/* ==========================================================================
   Africalla — application design system
   Written from scratch. Replaces adminlte.min.css entirely.
   Bootstrap 4 remains loaded for grid + modal/dropdown behaviour only;
   every visual primitive below is redefined here.

   AdminLTE's JavaScript is still used for the sidebar toggle and submenu
   expansion, so the class contracts it toggles are implemented here:
     body.sidebar-collapse, body.sidebar-open,
     li.menu-open, li.menu-is-opening, ul.nav-treeview
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — deep cultivated green with a harvest gold accent */
  --c-canopy-950: #0d1f16;
  --c-canopy-900: #12291d;
  --c-canopy-800: #1a3a29;
  --c-canopy-700: #234a36;
  --c-canopy-600: #2f6045;
  --c-canopy-500: #3d7a58;
  --c-canopy-100: #e6efe9;
  --c-canopy-50:  #f2f7f4;

  --c-gold-700: #9a6f21;
  --c-gold-600: #bd8a30;
  --c-gold-500: #d4a44a;
  --c-gold-300: #e8cd96;
  --c-gold-100: #f7edd9;

  /* Neutrals — warm, so the UI never reads cold/corporate-grey */
  --c-ink:      #1a1d1b;
  --c-ink-2:    #3f4642;
  --c-ink-3:    #6d746f;
  --c-ink-4:    #9aa19c;
  --c-line:     #e5e3dc;
  --c-line-2:   #efedE7;
  --c-surface:  #ffffff;
  --c-raised:   #fbfaf7;
  --c-page:     #f6f5f1;

  /* Semantic */
  --c-positive: #2f7d4f;
  --c-positive-bg: #e9f3ec;
  --c-negative: #b04430;
  --c-negative-bg: #fbebe7;
  --c-notice:   #b3852c;
  --c-notice-bg: #fbf1de;
  --c-info:     #2f6b7d;
  --c-info-bg:  #e8f1f4;

  /* Type */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Elevation — low-spread, tinted to the brand rather than pure black */
  --shadow-xs: 0 1px 2px rgba(13, 31, 22, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 31, 22, 0.06), 0 1px 2px rgba(13, 31, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 31, 22, 0.07), 0 2px 4px rgba(13, 31, 22, 0.04);
  --shadow-lg: 0 12px 32px rgba(13, 31, 22, 0.12), 0 4px 8px rgba(13, 31, 22, 0.06);
  --shadow-xl: 0 24px 56px rgba(13, 31, 22, 0.18);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --sidebar-w: 252px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
  background-color: var(--c-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}

/* Financial figures line up in columns — matters on every invoice table here */
table, .stat-value, .figure, .money, td, th, input, select {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-canopy-900);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.85rem; }

a { color: var(--c-canopy-600); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--c-gold-700); text-decoration: none; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 1.25rem 0; }

::selection { background: var(--c-gold-100); color: var(--c-canopy-900); }

:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }

/* Scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d7d4cb;
  border-radius: 99px;
  border: 3px solid var(--c-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-ink-4); }

/* --------------------------------------------------------------------------
   3. Application shell
   -------------------------------------------------------------------------- */

.wrapper { min-height: 100vh; position: relative; }

/* ---- Sidebar ---- */

.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 1038;
  display: flex;
  flex-direction: column;
  background: var(--c-canopy-950);
  background-image: linear-gradient(180deg, var(--c-canopy-900) 0%, var(--c-canopy-950) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-sidebar .sidebar {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 24px;
  /* Fade the first/last few pixels so long menus visibly continue past the
     edge instead of items looking abruptly sliced by the brand bar. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
}

/* Brand */
.brand-link {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--topbar-h);
  flex: none;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  overflow: hidden;
}

.brand-link .brand-image {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px rgba(212, 164, 74, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.brand-link .brand-text {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: #f5f2ea;
  letter-spacing: -0.01em;
  transition: opacity 0.18s ease;
}

/* Nav */
.nav-sidebar { list-style: none; margin: 0; padding: 0 10px; }
.nav-sidebar .nav-item { position: relative; }

.nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  margin: 1px 0;
  border-radius: var(--r-md);
  color: rgba(233, 238, 234, 0.78);
  font-size: 0.855rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.nav-sidebar .nav-link p {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sidebar .nav-icon {
  width: 18px;
  flex: none;
  text-align: center;
  font-size: 0.94rem;
  color: rgba(212, 164, 74, 0.75);
  transition: color 0.14s ease;
}

.nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}
.nav-sidebar .nav-link:hover .nav-icon { color: var(--c-gold-500); }

/* Bootstrap ships `a:not([href]):not([tabindex]){color:inherit}` at specificity
   (0,2,1), which outranks `.nav-sidebar .nav-link` at (0,2,0). 21 sidebar items
   are onclick-only anchors with no href, so they inherited a dark colour and
   disappeared against the dark sidebar. These rules outrank Bootstrap's. */
.nav-sidebar a.nav-link:not([href]),
.nav-sidebar a.nav-link:not([href]):not([tabindex]) {
  color: rgba(233, 238, 234, 0.78);
  cursor: pointer;
}
.nav-sidebar a.nav-link:not([href]):hover,
.nav-sidebar a.nav-link:not([href]):not([tabindex]):hover { color: #fff; }

.nav-sidebar .nav-treeview a.nav-link:not([href]),
.nav-sidebar .nav-treeview a.nav-link:not([href]):not([tabindex]) {
  color: rgba(233, 238, 234, 0.62);
}
.nav-sidebar .nav-treeview a.nav-link:not([href]):hover { color: #fff; }

/* Same trap elsewhere: onclick-only dropdown items and buttons */
.dropdown-item:not([href]):not([tabindex]) { color: var(--c-ink-2); cursor: pointer; }
.dropdown-item:not([href]):not([tabindex]):hover { color: var(--c-canopy-800); }
a.btn:not([href]):not([tabindex]) { color: inherit; cursor: pointer; }

/* Active item — filled pill with a gold edge marker */
.nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, rgba(212, 164, 74, 0.17), rgba(212, 164, 74, 0.06));
  color: #fff;
  font-weight: 600;
}
.nav-sidebar > .nav-item > .nav-link.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--c-gold-500);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--c-gold-500); }

/* Submenu caret */
.nav-sidebar .nav-link .right {
  font-size: 0.72rem;
  color: rgba(233, 238, 234, 0.4);
  transition: transform 0.22s ease;
}
.nav-sidebar .menu-open > .nav-link .right,
.nav-sidebar .menu-is-opening > .nav-link .right { transform: rotate(-90deg); }

/* Submenu */
.nav-sidebar .nav-treeview {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 12px;
  position: relative;
}
.nav-sidebar .nav-treeview::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.nav-sidebar .nav-treeview .nav-link {
  padding: 7px 11px 7px 20px;
  font-size: 0.815rem;
  font-weight: 400;
  color: rgba(233, 238, 234, 0.56);
}
.nav-sidebar .nav-treeview .nav-link:hover { color: #fff; }
.nav-sidebar .nav-treeview .nav-link.active {
  color: var(--c-gold-300);
  background: rgba(255, 255, 255, 0.05);
}
.nav-sidebar .nav-treeview .nav-icon { font-size: 0.78rem; width: 15px; }

/* Section label — groups the menu into readable bands */
.nav-sidebar .nav-section {
  padding: 18px 12px 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(233, 238, 234, 0.32);
  white-space: nowrap;
  overflow: hidden;
}
.nav-sidebar .nav-section:first-child { padding-top: 8px; }

/* ---- Collapsed sidebar (body.sidebar-collapse, toggled by adminlte.js) ---- */

@media (min-width: 992px) {
  body.sidebar-collapse .main-sidebar { width: var(--sidebar-w-collapsed); }
  body.sidebar-collapse .main-sidebar .brand-text,
  body.sidebar-collapse .main-sidebar .nav-link p,
  body.sidebar-collapse .main-sidebar .nav-section { opacity: 0; pointer-events: none; }
  body.sidebar-collapse .main-sidebar .nav-section { padding-top: 10px; padding-bottom: 0; height: 8px; }
  body.sidebar-collapse .main-sidebar .nav-treeview { display: none !important; }
  body.sidebar-collapse .main-sidebar .nav-link { justify-content: center; padding-left: 9px; padding-right: 9px; }
  body.sidebar-collapse .brand-link { justify-content: center; padding: 0; }
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-header,
  body.sidebar-collapse .main-footer { margin-left: var(--sidebar-w-collapsed); }

  /* Fully hidden variant (adminlte.js also toggles sidebar-closed) */
  body.sidebar-closed .main-sidebar { transform: translateX(-100%); }
  body.sidebar-closed .content-wrapper,
  body.sidebar-closed .main-header,
  body.sidebar-closed .main-footer { margin-left: 0; }
}

/* ---- Mobile drawer (body.sidebar-open) ---- */

@media (max-width: 991.98px) {
  .main-sidebar { transform: translateX(-100%); transition: transform 0.24s ease; }
  body.sidebar-open .main-sidebar { transform: none; box-shadow: var(--shadow-xl); }
  .content-wrapper, .main-header, .main-footer { margin-left: 0 !important; }
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(13, 31, 22, 0.45);
    z-index: 1037;
  }
}

/* ---- Topbar ---- */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  margin-left: var(--sidebar-w);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
  transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header .navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  flex-direction: row;
}

.main-header .navbar-nav.ml-auto { margin-left: auto !important; }

.main-header .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  color: var(--c-ink-2);
  font-size: 0.87rem;
  font-weight: 500;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.main-header .nav-link:hover { background: var(--c-canopy-50); color: var(--c-canopy-800); }

.main-header .navbar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--c-gold-600);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.main-header .nav-item { position: relative; }

/* ---- Content ---- */

.content-wrapper {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--topbar-h));
  background: var(--c-page);
  transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-header {
  padding: 26px 26px 6px;
}
.content-header h1 {
  font-size: 1.55rem;
  margin: 0;
  color: var(--c-canopy-900);
}
/* Most pages carry .text-dark on their page title from the old theme; keep the
   heading on-brand rather than letting the utility flatten it to near-black. */
.content-header h1.text-dark { color: var(--c-canopy-900) !important; }

/* Pages nest a .container-fluid inside .content/.content-header; the outer
   wrapper already supplies the gutter, so drop Bootstrap's duplicate padding. */
.content-header > .container-fluid,
.content > .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* The shared page-header row: title left, actions/breadcrumb right */
.content-header > .container-fluid > .row {
  align-items: center;
  row-gap: 10px;
}

/* Header action buttons: the old markup wraps them in grid columns with
   .btn-block, which stretches them edge-to-edge. Size them to content. */
.content-header .btn-block {
  display: inline-flex;
  width: auto;
  min-width: 0;
  margin-bottom: 0 !important;
}
.content-header .row > [class^="col"],
.content-header .row > [class*=" col"] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.content-header .row > [class^="col"] > .breadcrumb,
.content-header .row > [class*=" col"] > .breadcrumb { margin-left: auto; }
.content-header .float-sm-right { float: none !important; margin-left: auto; }

/* Bare radio/checkbox filter toggles sitting loose in page headers */
.content-header input[type="radio"],
.content-header input[type="checkbox"] { margin-right: 6px; }

.breadcrumb {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--c-ink-3);
}
.breadcrumb-item + .breadcrumb-item { padding-left: 8px; }
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  padding-right: 8px;
  color: var(--c-line);
}
.breadcrumb-item a { color: var(--c-ink-3); }
.breadcrumb-item a:hover { color: var(--c-canopy-700); }
.breadcrumb-item.active { color: var(--c-ink-4); }

/* Shared page header: title block left, actions right */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head .breadcrumb { margin-bottom: 7px; }
.page-head h1 { margin: 0; }

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Segmented control — replaces bare radio/link filter toggles */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--c-page);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.segmented-opt {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  color: var(--c-ink-3);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.segmented-opt:hover { color: var(--c-canopy-700); }
.segmented-opt.is-active {
  background: var(--c-surface);
  color: var(--c-canopy-800);
  box-shadow: var(--shadow-xs);
}

.content { padding: 12px 26px 32px; }
.content-header + .content,
.content-header + section.content { padding-top: 14px; }

/* ---- Data-entry grids (sales, packing, order entry — 16 pages) ----
   These use .resetInput / .salesinput inside table cells with inline styles
   that strip all but the bottom border. Nothing ever styled them, so they fell
   back to raw browser defaults. Treat them as proper underline fields. */
.resetInput,
.salesinput {
  min-height: 30px;
  padding: 3px 6px;
  font-family: var(--font-ui);
  font-size: 0.845rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.resetInput:hover,
.salesinput:hover { background: var(--c-canopy-50); }
.resetInput:focus,
.salesinput:focus {
  outline: none;
  border-bottom-color: var(--c-gold-500);
  background: var(--c-gold-100);
}
.resetInput:disabled,
.salesinput:disabled { color: var(--c-ink-4); background: transparent; }

textarea.resetInput { resize: vertical; min-height: 30px; }

/* Table cell utilities used by list pages */
.table td.cell { vertical-align: middle; }
.table td.cell-action { text-align: center; }
.table td.cell-action i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--c-ink-3);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.table td.cell-action i:hover { background: var(--c-canopy-50); color: var(--c-canopy-700); }

/* List pages drop their table straight into .content with no card around it.
   Give it the surface a card would provide. Most are DataTables, which wraps
   the table in .dataTables_wrapper — style that so the toolbar sits inside. */
.content .dataTables_wrapper {
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.content .dataTables_wrapper .row:first-child { margin-bottom: 10px; }
.content .dataTables_wrapper .row:last-child { margin-top: 10px; }

/* Plain (non-DataTables) tables sitting bare in the content area */
.content > .container-fluid > .row > table.table,
.content > .container-fluid > table.table,
.content .row > [class^="col"] > table.table:only-child,
.content .row > [class*=" col"] > table.table:only-child {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.main-footer {
  margin-left: var(--sidebar-w);
  padding: 16px 26px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: 0.8rem;
  transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-footer a { color: var(--c-canopy-600); font-weight: 500; }

/* --------------------------------------------------------------------------
   4. Surfaces / cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid var(--c-line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-canopy-900);
  margin: 0;
  letter-spacing: -0.01em;
}

.card-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.card-body { padding: 20px; }
.card-footer {
  padding: 14px 20px;
  background: var(--c-raised);
  border-top: 1px solid var(--c-line-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.card.card-outline { border-top: 3px solid var(--c-gold-500); }

/* --------------------------------------------------------------------------
   5. Stat tiles  (.small-box — AdminLTE class name, entirely new treatment)
   -------------------------------------------------------------------------- */

.small-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  padding: 18px 20px 0;
  margin-bottom: 20px;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.small-box:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Accent rail keyed off the legacy bg-* class the markup already carries */
.small-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-canopy-600);
}
.small-box.bg-warning::before, .small-box.bg-gradient-warning::before { background: var(--c-gold-500); }
.small-box.bg-success::before, .small-box.bg-gradient-success::before { background: var(--c-positive); }
.small-box.bg-info::before,    .small-box.bg-gradient-info::before    { background: var(--c-info); }
.small-box.bg-danger::before,  .small-box.bg-gradient-danger::before  { background: var(--c-negative); }

.small-box .inner { flex: 1; }
.small-box .inner h3 {
  font-family: var(--font-ui);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-ink) !important;
  margin: 0 0 2px;
  line-height: 1.15;
}
.small-box .inner p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--c-ink-3) !important;
}

/* Icon becomes a contained chip instead of a giant washed-out glyph */
.small-box .icon {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-canopy-50);
  color: var(--c-canopy-600);
  opacity: 1;
  font-size: 1rem;
}
.small-box .icon > i { font-size: 1rem; margin: 0 !important; }
.small-box.bg-warning .icon, .small-box.bg-gradient-warning .icon { background: var(--c-gold-100); color: var(--c-gold-700); }
.small-box.bg-success .icon, .small-box.bg-gradient-success .icon { background: var(--c-positive-bg); color: var(--c-positive); }
.small-box.bg-info .icon,    .small-box.bg-gradient-info .icon    { background: var(--c-info-bg); color: var(--c-info); }
.small-box.bg-danger .icon,  .small-box.bg-gradient-danger .icon  { background: var(--c-negative-bg); color: var(--c-negative); }

.small-box .small-box-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px -20px 0;
  padding: 10px 20px;
  border-top: 1px solid var(--c-line-2);
  background: transparent;
  color: var(--c-ink-3) !important;
  font-size: 0.78rem;
  font-weight: 500;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.small-box .small-box-footer:hover { background: var(--c-canopy-50); color: var(--c-canopy-700) !important; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 0.865rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(212, 164, 74, 0.32); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }

.btn-sm { height: 33px; padding: 0 12px; font-size: 0.8rem; border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 0.95rem; }
.btn-block { display: flex; width: 100%; }

/* Primary — the brand green */
.btn-primary, .btn-primary.bg-gradient-primary, .bg-gradient-primary.btn {
  background: var(--c-canopy-700) !important;
  border-color: var(--c-canopy-700) !important;
  color: #fff !important;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover, .bg-gradient-primary.btn:hover {
  background: var(--c-canopy-800) !important;
  border-color: var(--c-canopy-800) !important;
  box-shadow: var(--shadow-sm);
}

/* Secondary — quiet, bordered */
.btn-secondary, .btn-default, .btn-light {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink-2) !important;
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
  background: var(--c-raised) !important;
  border-color: #d9d6cd !important;
  color: var(--c-ink) !important;
}

.btn-warning, .bg-gradient-warning.btn {
  background: var(--c-gold-600) !important;
  border-color: var(--c-gold-600) !important;
  color: #fff !important;
}
.btn-warning:hover, .bg-gradient-warning.btn:hover {
  background: var(--c-gold-700) !important;
  border-color: var(--c-gold-700) !important;
}

.btn-success, .bg-gradient-success.btn {
  background: var(--c-positive) !important;
  border-color: var(--c-positive) !important;
  color: #fff !important;
}
.btn-success:hover, .bg-gradient-success.btn:hover { background: #276a42 !important; border-color: #276a42 !important; }

.btn-danger, .bg-gradient-danger.btn {
  background: var(--c-negative) !important;
  border-color: var(--c-negative) !important;
  color: #fff !important;
}
.btn-danger:hover, .bg-gradient-danger.btn:hover { background: #963727 !important; border-color: #963727 !important; }

.btn-info, .bg-gradient-info.btn {
  background: var(--c-info) !important;
  border-color: var(--c-info) !important;
  color: #fff !important;
}
.btn-info:hover, .bg-gradient-info.btn:hover { background: #275a69 !important; border-color: #275a69 !important; }

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--c-canopy-600) !important;
  color: var(--c-canopy-700) !important;
}
.btn-outline-primary:hover { background: var(--c-canopy-50) !important; }

.btn-link { background: none !important; border: none !important; color: var(--c-canopy-600) !important; box-shadow: none !important; }
.btn-link:hover { color: var(--c-gold-700) !important; text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-2);
}

.form-control, .custom-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 13px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
textarea.form-control { height: auto; padding: 10px 13px; min-height: 88px; }
select.form-control { padding-right: 30px; }

.form-control::placeholder { color: var(--c-ink-4); }

.form-control:focus, .custom-select:focus {
  outline: none;
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 3px rgba(212, 164, 74, 0.18);
  background-color: var(--c-surface);
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--c-raised);
  color: var(--c-ink-3);
  cursor: not-allowed;
}
.form-control.is-invalid { border-color: var(--c-negative); }
.form-control.is-valid { border-color: var(--c-positive); }

.form-group { margin-bottom: 18px; }
.form-text, small.text-muted { font-size: 0.78rem; color: var(--c-ink-3) !important; }

/* Input groups */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group-prepend, .input-group-append { display: flex; }
.input-group-prepend > .input-group-text { border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0; }
.input-group-append > .input-group-text { border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 0; }
.input-group > .input-group-prepend + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 13px;
  font-size: 0.85rem;
  color: var(--c-ink-3);
  background-color: var(--c-raised);
  border: 1px solid var(--c-line);
}

/* Checkbox / radio */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--c-canopy-700);
  border-color: var(--c-canopy-700);
}
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type=hidden] + label::before {
  background-color: var(--c-canopy-700) !important;
  border-color: var(--c-canopy-700) !important;
}
input[type='checkbox'], input[type='radio'] { accent-color: var(--c-canopy-700); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: 40px !important;
  padding: 0 4px;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  color: var(--c-ink);
  padding-left: 9px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(212, 164, 74, 0.18);
}
.select2-dropdown {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--c-canopy-700) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--c-canopy-50) !important;
  color: var(--c-canopy-800);
}

/* Compact select2 when it sits inside a table row (per-row action pickers) */
.table td .select2-container--default .select2-selection--single {
  height: 34px !important;
  min-height: 34px;
}
.table td .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  font-size: 0.83rem;
}
.table td .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px !important; }
.table td .form-control { height: 34px; font-size: 0.83rem; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  color: var(--c-ink);
  font-size: 0.865rem;
}

.table thead th {
  padding: 11px 14px;
  background: var(--c-raised);
  border: none;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--c-line-2);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover { background-color: var(--c-canopy-50); }

.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfbf9; }
.table-striped tbody tr:hover { background-color: var(--c-canopy-50); }

/* 35 pages carry .table-bordered from the old theme. Keep the class working
   but drop the heavy grid — horizontal hairlines only, like every other table. */
.table-bordered { border: none; }
.table-bordered thead th,
.table-bordered tbody td { border-left: none; border-right: none; }
.table-bordered tbody td { border-bottom: 1px solid var(--c-line-2); }
.table-bordered thead th { border-bottom: 1px solid var(--c-line); }

.table-sm td, .table-sm th { padding: 7px 11px; }

/* Table inside a card sits flush and inherits the card's rounded corners */
.card-body > .table:only-child,
.card > .table { margin: 0; }
.card > .table thead th:first-child { border-top-left-radius: var(--r-lg); }
.card > .table thead th:last-child { border-top-right-radius: var(--r-lg); }

.table-responsive { border-radius: var(--r-lg); }

/* DataTables */
.dataTables_wrapper { padding: 4px 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 0.82rem; color: var(--c-ink-3); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  padding: 0 11px;
  margin-left: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 3px rgba(212, 164, 74, 0.18);
}

.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  height: 34px;
  padding: 0 9px !important;
  margin: 0 2px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--c-ink-2) !important;
  font-size: 0.82rem;
  line-height: 32px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--c-canopy-50) !important;
  border-color: var(--c-line) !important;
  color: var(--c-canopy-800) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-canopy-700) !important;
  border-color: var(--c-canopy-700) !important;
  color: #fff !important;
  font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

/* Buttons extension */
.dt-buttons .dt-button {
  height: 36px !important;
  padding: 0 13px !important;
  margin-right: 6px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--c-ink-2) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}
.dt-buttons .dt-button:hover { background: var(--c-raised) !important; color: var(--c-ink) !important; }

/* --------------------------------------------------------------------------
   9. Modals
   -------------------------------------------------------------------------- */

.modal-backdrop.show { background-color: var(--c-canopy-950); opacity: 0.5; }

.modal-content {
  border: none;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  background: var(--c-surface);
}

.modal-header {
  align-items: center;
  padding: 20px 24px 16px;
  background: transparent;
  border-bottom: 1px solid var(--c-line-2);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-canopy-900);
  letter-spacing: -0.015em;
}
.modal-header .close {
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-ink-3);
  opacity: 1;
  text-shadow: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.modal-header .close:hover { background: var(--c-page); color: var(--c-ink); opacity: 1; }

/* Many modals wrap their title in a centred full-width div. Rather than edit
   54 occurrences of that markup, neutralise it here. */
.modal-header > div[style*="text-align: center"] {
  text-align: left !important;
  width: auto !important;
  flex: 1 1 auto;
}

.modal-body { padding: 22px 24px; }
.modal-footer {
  padding: 16px 24px;
  gap: 8px;
  background: var(--c-raised);
  border-top: 1px solid var(--c-line-2);
}
.modal-footer > * { margin: 0; }

/* Footers that lay their buttons out with a nested Bootstrap grid */
.modal-footer > .row {
  width: 100%;
  margin: 0;
  align-items: center;
}
.modal-footer > .row > [class^="col"],
.modal-footer > .row > [class*=" col"] { padding-left: 4px; padding-right: 4px; }

.modal-dialog { margin-top: 32px; }

/* SweetAlert2 — matched to the same modal language */
.swal2-popup {
  border-radius: var(--r-xl) !important;
  padding: 28px !important;
  font-family: var(--font-ui) !important;
  box-shadow: var(--shadow-xl) !important;
  background: var(--c-surface) !important;
}
.swal2-title {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--c-canopy-900) !important;
  letter-spacing: -0.015em;
}
.swal2-html-container, .swal2-content { color: var(--c-ink-2) !important; font-size: 0.9rem !important; }
.swal2-actions { gap: 8px; margin-top: 20px !important; }
.swal2-styled {
  height: 40px;
  padding: 0 18px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.87rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.14s ease;
}
.swal2-confirm { background: var(--c-canopy-700) !important; }
.swal2-confirm:hover { background: var(--c-canopy-800) !important; }
.swal2-cancel {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-2) !important;
}
.swal2-cancel:hover { background: var(--c-raised) !important; }
.swal2-deny { background: var(--c-negative) !important; }
.swal2-icon.swal2-warning { border-color: var(--c-gold-500) !important; color: var(--c-gold-600) !important; }
.swal2-icon.swal2-error { border-color: var(--c-negative) !important; color: var(--c-negative) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--c-negative) !important; }
.swal2-icon.swal2-success { border-color: var(--c-positive) !important; color: var(--c-positive) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--c-positive) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(47, 125, 79, 0.28) !important; }
.swal2-icon.swal2-info { border-color: var(--c-info) !important; color: var(--c-info) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
}
.swal2-input:focus { border-color: var(--c-gold-500) !important; box-shadow: 0 0 0 3px rgba(212, 164, 74, 0.18) !important; }
.swal2-toast { border-radius: var(--r-md) !important; box-shadow: var(--shadow-lg) !important; }

/* --------------------------------------------------------------------------
   10. Feedback — badges, alerts, dropdowns
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.5;
}
.badge-primary { background: var(--c-canopy-100); color: var(--c-canopy-800); }
.badge-secondary { background: var(--c-page); color: var(--c-ink-2); }
.badge-success { background: var(--c-positive-bg); color: var(--c-positive); }
.badge-danger  { background: var(--c-negative-bg); color: var(--c-negative); }
.badge-warning { background: var(--c-notice-bg); color: var(--c-notice); }
.badge-info    { background: var(--c-info-bg); color: var(--c-info); }

.alert {
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 0.875rem;
}
.alert-success { background: var(--c-positive-bg); border-color: #cfe3d6; color: #24603d; }
.alert-danger  { background: var(--c-negative-bg); border-color: #f0d2cb; color: #8d3626; }
.alert-warning { background: var(--c-notice-bg); border-color: #ecdcb6; color: #8a6621; }
.alert-info    { background: var(--c-info-bg); border-color: #cfe0e5; color: #245663; }

.dropdown-menu {
  padding: 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: var(--c-surface);
  font-size: 0.87rem;
  min-width: 208px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-canopy-50); color: var(--c-canopy-800); }
.dropdown-divider { margin: 5px 0; border-color: var(--c-line-2); }
.dropdown-header {
  padding: 8px 11px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

/* --------------------------------------------------------------------------
   11. Legacy AdminLTE colour helpers, remapped to the palette
   -------------------------------------------------------------------------- */

.bg-gradient-primary:not(.btn), .bg-primary:not(.btn):not(.small-box) { background: var(--c-canopy-700) !important; color: #fff; }
.bg-gradient-success:not(.btn), .bg-success:not(.btn):not(.small-box) { background: var(--c-positive) !important; color: #fff; }
.bg-gradient-warning:not(.btn), .bg-warning:not(.btn):not(.small-box) { background: var(--c-gold-600) !important; color: #fff; }
.bg-gradient-danger:not(.btn),  .bg-danger:not(.btn):not(.small-box)  { background: var(--c-negative) !important; color: #fff; }
.bg-gradient-info:not(.btn),    .bg-info:not(.btn):not(.small-box)    { background: var(--c-info) !important; color: #fff; }

.text-primary { color: var(--c-canopy-700) !important; }
.text-success { color: var(--c-positive) !important; }
.text-danger  { color: var(--c-negative) !important; }
.text-warning { color: var(--c-notice) !important; }
.text-info    { color: var(--c-info) !important; }
.text-muted   { color: var(--c-ink-3) !important; }
.text-dark    { color: var(--c-ink) !important; }

.elevation-1 { box-shadow: var(--shadow-sm) !important; }
.elevation-2, .elevation-3, .elevation-4 { box-shadow: var(--shadow-md) !important; }

/* Utility */
.hold-transition * { transition: none !important; }
.page-lede { color: var(--c-ink-3); font-size: 0.9rem; margin: 5px 0 0; }
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; }
.stat-delta.is-up { color: var(--c-positive); }
.stat-delta.is-down { color: var(--c-negative); }

/* Print */
@media print {
  .main-sidebar, .main-header, .main-footer, .no-print { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
  .card { box-shadow: none; border-color: #ddd; }
}