/* =========================================================
   DASHBOARD THEME
   Restyles AdminLTE's structural classes (kept so existing
   markup + adminlte.min.js sidebar-treeview JS still work) to
   look like a clean, modern SaaS dashboard instead of the
   default dark AdminLTE skin.
   Load order: bootstrap5 -> design-tokens -> THIS -> bs4-compat
   ========================================================= */

/* ---------- Base ---------- */
html,
body {
  background: var(--ax-body-bg);
  color: var(--ax-text);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-fs-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ax-primary);
}
a:hover {
  color: var(--ax-primary-hover);
}

/* =========================================================
   SECTION COLOR SYSTEM
   Each top-level nav-header (Overview, Sales & Support, Catalog
   & Inventory, Partners & Brand, Finance, Growth, Admin) and
   every sub-header/nav-item inside it carries a matching
   data-section attribute (set in side-bar.php). These variables
   are the single source of truth for that section's color —
   change a section's look by editing one line here.

   These are self-contained fallback values (not wired into the
   existing --ax-* token file, since its section-level colors
   aren't defined there). If design-tokens.css later grows a
   proper multi-hue palette, swap these for token references.
   ========================================================= */
:root {
  --sec-overview: #2563eb; /* blue    */
  --sec-sales: #059669; /* emerald */
  --sec-catalog: #7c3aed; /* violet  */
  --sec-partners: #db2777; /* pink    */
  --sec-finance: #d97706; /* amber   */
  --sec-growth: #0891b2; /* cyan    */
  --sec-admin: #6b7280; /* gray — deliberately neutral, this is system config, not a "growth" area */
}

/* ---------- Sidebar (was: sidebar-dark-primary, dark navy) ---------- */
.main-sidebar {
  background: var(--ax-sidebar-bg) !important;
  border-right: 1px solid var(--ax-sidebar-border);
  width: var(--ax-sidebar-width) !important;
  box-shadow: none;
}

/* AdminLTE hardcodes 250px for these three in adminlte.min.css. Since we
   changed the sidebar's actual width via the token above, these need to
   match it exactly — otherwise you get either a gap (margin > sidebar
   width) or overlap (margin < sidebar width). Keep both driven by the
   same variable so they can never drift apart again. */
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-footer,
body:not(.sidebar-collapse) .main-header {
  margin-left: var(--ax-sidebar-width) !important;
}
@media (max-width: 991.98px) {
  body:not(.sidebar-collapse) .content-wrapper,
  body:not(.sidebar-collapse) .main-footer,
  body:not(.sidebar-collapse) .main-header {
    margin-left: 0 !important;
  }
}

/* adminlte.min.css also hardcodes each individual .nav-link's width to
   calc(250px - 0.5rem * 2) under .sidebar-mini/-md/-xs (the "hover to
   expand" collapsed states). That 250px was never updated when we
   narrowed the sidebar, so nav-links were rendering wider than the
   sidebar itself and spilling out. Tie it to the same variable so this
   can't drift out of sync again either. */
.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
  width: calc(var(--ax-sidebar-width) - 0.5rem * 2) !important;
}

.main-sidebar .brand-link {
  border-bottom: 1px solid var(--ax-sidebar-border);
  display: flex;
  align-items: center;
  padding: 0.9rem 1.25rem;
}
.main-sidebar .brand-image {
  max-height: 32px;
  opacity: 1 !important;
}

.main-sidebar .user-panel {
  border-bottom: 1px solid var(--ax-sidebar-border) !important;
  padding: 0.9rem 1.25rem !important;
}
.main-sidebar .user-panel .info a {
  color: var(--ax-sidebar-text);
  font-size: var(--ax-fs-sm);
  font-weight: 600;
}
.main-sidebar .user-panel .image img {
  width: 32px;
  height: 32px;
  border-radius: var(--ax-radius-pill);
}

.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: auto;
  max-width: 90%;
  color: var(--ax-sidebar-text);
  border-radius: var(--ax-radius-md);
  margin: 2px 8px;
  padding: 0.5rem 0.65rem;
  font-size: var(--ax-fs-sm);
  font-weight: 500;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
  box-sizing: border-box;
}

/* AdminLTE's default markup puts the label + chevron both inside <p>,
   with the chevron absolutely positioned. That breaks once labels wrap
   to two lines (nothing reserves space for the icon, so wrapped text
   runs flush to the edge). Flexbox instead: chevron pushed to the far
   right with `margin-left: auto`, label wraps freely, both always stay
   inside the link's own padding — no more edge-hugging text. */
.main-sidebar .nav-sidebar .nav-link p {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.3;
}
.main-sidebar .nav-sidebar .nav-link .right {
  position: static !important;
  margin-left: auto;
  padding-left: 0.5rem;
  flex-shrink: 0;
}

/* Belt-and-suspenders: nothing inside the sidebar should ever be able to
   visually spill past its own edge, regardless of what causes it. */
.main-sidebar,
.main-sidebar .sidebar {
  overflow-x: hidden;
}

/* Hover: neutral gray, no color tint (Stripe uses plain gray hovers, not brand-colored ones) */
.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: var(--ax-sidebar-hover-bg);
  color: var(--ax-gray-900);
}

/* Active leaf: neutral-tinted background using the section's own color
   at low opacity, text/icon in the full section color, plus a colored
   accent bar on the far edge of the sidebar. Replaces the old single
   --ax-primary accent with a per-section one via data-section. */
.nav-item {
  position: relative;
}
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  font-weight: 600;
}
.nav-sidebar > .nav-item > .nav-link.active::before,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.nav-sidebar > .nav-item > .nav-link.active::before {
  left: -8px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before {
  left: -20px;
}

/* Per-section active-state coloring. Each block below covers: tinted
   background, section-colored text, section-colored accent bar,
   section-colored icon. Repeat pattern, one per data-section value. */
.nav-item[data-section="overview"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-overview) 10%, transparent);
  color: var(--sec-overview);
}
.nav-item[data-section="overview"] > .nav-link.active::before {
  background: var(--sec-overview);
}
.nav-item[data-section="overview"] > .nav-link.active .nav-icon {
  color: var(--sec-overview);
}

.nav-item[data-section="sales"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-sales) 10%, transparent);
  color: var(--sec-sales);
}
.nav-item[data-section="sales"] > .nav-link.active::before {
  background: var(--sec-sales);
}
.nav-item[data-section="sales"] > .nav-link.active .nav-icon {
  color: var(--sec-sales);
}

.nav-item[data-section="catalog"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-catalog) 10%, transparent);
  color: var(--sec-catalog);
}
.nav-item[data-section="catalog"] > .nav-link.active::before {
  background: var(--sec-catalog);
}
.nav-item[data-section="catalog"] > .nav-link.active .nav-icon {
  color: var(--sec-catalog);
}

.nav-item[data-section="partners"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-partners) 10%, transparent);
  color: var(--sec-partners);
}
.nav-item[data-section="partners"] > .nav-link.active::before {
  background: var(--sec-partners);
}
.nav-item[data-section="partners"] > .nav-link.active .nav-icon {
  color: var(--sec-partners);
}

.nav-item[data-section="finance"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-finance) 10%, transparent);
  color: var(--sec-finance);
}
.nav-item[data-section="finance"] > .nav-link.active::before {
  background: var(--sec-finance);
}
.nav-item[data-section="finance"] > .nav-link.active .nav-icon {
  color: var(--sec-finance);
}

.nav-item[data-section="growth"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-growth) 10%, transparent);
  color: var(--sec-growth);
}
.nav-item[data-section="growth"] > .nav-link.active::before {
  background: var(--sec-growth);
}
.nav-item[data-section="growth"] > .nav-link.active .nav-icon {
  color: var(--sec-growth);
}

.nav-item[data-section="admin"] > .nav-link.active {
  background: color-mix(in srgb, var(--sec-admin) 10%, transparent);
  color: var(--sec-admin);
}
.nav-item[data-section="admin"] > .nav-link.active::before {
  background: var(--sec-admin);
}
.nav-item[data-section="admin"] > .nav-link.active .nav-icon {
  color: var(--sec-admin);
}

.nav-sidebar .nav-icon {
  flex-shrink: 0;
  color: var(--ax-sidebar-text-muted);
  font-size: 0.9rem;
  width: 1.1rem;
  margin-right: 0.45rem;
}
.nav-sidebar .nav-treeview {
  background: transparent;
  /* Groups no longer collapse — the chevron toggle and JS accordion
     behavior were removed, so every submenu stays visible regardless
     of any .menu-open class state. */
  display: block !important;
}
.nav-sidebar .nav-treeview .nav-link {
  padding-left: 2.25rem;
  font-size: var(--ax-fs-xs);
}
.nav-sidebar .far.fa-circle {
  font-size: 5px;
  vertical-align: middle;
}

/* ---------- Top-level section headers (Overview, Sales & Support, ...) ---------- */
/* Colored per data-section, with a small colored dot before the label —
   the dot picks up the header's own color automatically via currentColor,
   so no per-section repetition is needed here. */
.nav-sidebar .nav-header {
  padding: 1.1rem 1rem 0.35rem;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  display: flex;
  align-items: center;
}
.nav-sidebar .nav-header::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 7px;
  background: currentColor;
}
.nav-sidebar li:first-child.nav-header {
  padding-top: 0.5rem;
}

.nav-header[data-section="overview"] {
  color: var(--sec-overview);
}
.nav-header[data-section="sales"] {
  color: var(--sec-sales);
}
.nav-header[data-section="catalog"] {
  color: var(--sec-catalog);
}
.nav-header[data-section="partners"] {
  color: var(--sec-partners);
}
.nav-header[data-section="finance"] {
  color: var(--sec-finance);
}
.nav-header[data-section="growth"] {
  color: var(--sec-growth);
}
.nav-header[data-section="admin"] {
  color: var(--sec-admin);
}

/* ---------- Topbar / main-header ---------- */
.main-header.navbar {
  background: var(--ax-topbar-bg) !important;
  border-bottom: 1px solid var(--ax-topbar-border);
  min-height: var(--ax-topbar-height);
  box-shadow: none;
}
/* This AdminLTE build hardcodes .navbar-light .navbar-nav .nav-link to
   white (leftover from when .navbar-white was actually themed purple —
   see .navbar-white{background-color:#7d40f0}). That selector has
   higher specificity than a plain .main-header .nav-link rule, so it
   was winning even after we fixed the background to white, leaving
   white icons on a white bar. Matching specificity + !important here. */
.main-header.navbar-light .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link {
  color: var(--ax-gray-700) !important;
}
.main-header.navbar-light .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:hover,
.main-header.navbar-light .navbar-nav .nav-link:focus,
.main-header .navbar-nav .nav-link:focus {
  color: var(--ax-gray-900) !important;
}

/* ---------- Navbar user menu (moved here from the sidebar) ---------- */
.main-header .user-menu-name {
  margin-left: 0.4rem;
  font-size: var(--ax-fs-sm);
  font-weight: 600;
  color: var(--ax-gray-800);
}
.main-header .user-menu .dropdown-menu {
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-md);
}
.main-header .user-menu .user-header {
  background: var(--ax-primary) !important;
}

/* ---------- Sub-section headers (Orders & Fulfillment, Invoices, ...) ---------- */
/* Colored per data-section using a tinted (lower-saturation-reading, via
   opacity) version of that section's color, plus a colored left border —
   the sub-header visually "belongs" to its parent section's color family
   without competing with the bolder top-level nav-header dot marker. */
.sidebar-subheader {
  display: block;
  padding: 6px 12px 4px 12px;
  margin: 4px 8px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-left: 2px solid currentColor;
  opacity: 0.9;
}

.nav-sidebar .nav-item + .sidebar-subheader {
  border-top: 1px solid var(--ax-sidebar-border);
  padding-top: 10px;
  margin-top: 8px;
}

.sidebar-subheader[data-section="overview"] {
  color: var(--sec-overview);
}
.sidebar-subheader[data-section="sales"] {
  color: var(--sec-sales);
}
.sidebar-subheader[data-section="catalog"] {
  color: var(--sec-catalog);
}
.sidebar-subheader[data-section="partners"] {
  color: var(--sec-partners);
}
.sidebar-subheader[data-section="finance"] {
  color: var(--sec-finance);
}
.sidebar-subheader[data-section="growth"] {
  color: var(--sec-growth);
}
.sidebar-subheader[data-section="admin"] {
  color: var(--sec-admin);
}

/* ---------- Content wrapper ---------- */
.content-wrapper {
  background: var(--ax-body-bg) !important;
}
.content-header h1 {
  font-size: var(--ax-fs-xl);
  font-weight: 700;
  color: var(--ax-gray-900);
}
.content-header .breadcrumb {
  background: transparent;
  font-size: var(--ax-fs-xs);
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-sm);
  background: var(--ax-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ax-border);
  font-weight: 600;
  font-size: var(--ax-fs-md);
  padding: 1rem 1.25rem;
}
.card-body {
  padding: 1.25rem;
}
.card-footer {
  background: var(--ax-gray-25);
  border-top: 1px solid var(--ax-border);
}
.card-title {
  font-weight: 600;
  color: var(--ax-gray-900);
}
/* Neutralize AdminLTE's loud .card-primary/.card-danger colored headers -> subtle top accent instead */
[class*="card-outline"] {
  border-top: 3px solid var(--ax-primary);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--ax-radius-md);
  font-weight: 600;
  font-size: var(--ax-fs-sm);
  padding: 0.5rem 1rem;
  box-shadow: none;
  transition:
    background-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.05s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
}
.btn-primary:hover {
  background: var(--ax-primary-hover);
  border-color: var(--ax-primary-hover);
}
.btn-primary:active {
  background: var(--ax-primary-active);
  border-color: var(--ax-primary-active);
}
.btn-outline-primary {
  color: var(--ax-primary);
  border-color: var(--ax-primary);
}
.btn-outline-primary:hover {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
}
.btn-light,
.btn-default {
  background: var(--ax-surface);
  border-color: var(--ax-border);
  color: var(--ax-gray-700);
}
.btn-light:hover {
  background: var(--ax-gray-50);
}
.btn-success {
  background: var(--ax-success);
  border-color: var(--ax-success);
}
.btn-danger {
  background: var(--ax-danger);
  border-color: var(--ax-danger);
}
.btn-warning {
  background: var(--ax-warning);
  border-color: var(--ax-warning);
  color: #fff;
}

/* ---------- Badges ---------- */
.badge {
  font-weight: 600;
  font-size: var(--ax-fs-xs);
  border-radius: var(--ax-radius-sm);
  padding: 0.3em 0.6em;
}
.badge-primary,
.text-bg-primary {
  background: var(--ax-primary-soft);
  color: var(--ax-primary-text);
}
.badge-success,
.text-bg-success {
  background: var(--ax-success-soft);
  color: var(--ax-success);
}
.badge-danger,
.text-bg-danger {
  background: var(--ax-danger-soft);
  color: var(--ax-danger);
}
.badge-warning,
.text-bg-warning {
  background: var(--ax-warning-soft);
  color: var(--ax-warning);
}
.badge-info,
.text-bg-info {
  background: var(--ax-info-soft);
  color: var(--ax-info);
}

/* ---------- Tables ---------- */
.table {
  font-size: var(--ax-fs-sm);
  color: var(--ax-text);
}
.table thead th {
  border-bottom: 1px solid var(--ax-border);
  border-top: none;
  color: var(--ax-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--ax-fs-xs);
  letter-spacing: 0.03em;
  padding: 0.75rem 1rem;
}
.table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ax-gray-100);
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background: var(--ax-gray-25);
}
/* DataTables wrapper controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--ax-radius-sm);
  border: 1px solid var(--ax-border);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ax-primary) !important;
  border-color: var(--ax-primary) !important;
  color: #fff !important;
  border-radius: var(--ax-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ax-radius-sm);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: var(--ax-radius-md);
  border: 1px solid var(--ax-border);
  font-size: var(--ax-fs-sm);
  padding: 0.5rem 0.75rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ax-primary);
  box-shadow: 0 0 0 3px var(--ax-primary-soft);
}
label {
  font-weight: 600;
  font-size: var(--ax-fs-sm);
  color: var(--ax-gray-700);
}

/* ---------- Small boxes / info boxes (dashboard stat cards) ---------- */
.small-box,
.info-box {
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-sm);
  border: 1px solid var(--ax-border);
}
.small-box > .small-box-footer {
  background: rgba(0, 0, 0, 0.02);
}

/* ---------- Sidebar menu search ---------- */
.sidebar-search-wrap {
  position: relative;
  margin: 10px 12px 0.75rem;
}
.sidebar-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--ax-gray-400);
  pointer-events: none;
}
.sidebar-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem 0.4rem 1.9rem;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  background: var(--ax-gray-50);
  font-size: var(--ax-fs-xs);
  color: var(--ax-gray-800);
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}
.sidebar-search-input::placeholder {
  color: var(--ax-gray-400);
}
.sidebar-search-input:focus {
  outline: none;
  background: var(--ax-surface);
  border-color: var(--ax-primary);
  box-shadow: 0 0 0 3px var(--ax-primary-soft);
}
.sidebar-search-empty {
  display: none;
  margin: 0.25rem 1rem 0.5rem;
  font-size: var(--ax-fs-xs);
  color: var(--ax-gray-400);
  text-align: center;
}
.sidebar-search-empty.is-visible {
  display: block;
}

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--ax-gray-300);
  border-radius: var(--ax-radius-pill);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Sortable table headers (table-sort.js) ---------- */
table[data-sortable] th[data-sort-index] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 18px !important;
}
table[data-sortable] th[data-sort-index]:hover {
  background: var(--ax-gray-50);
}
table[data-sortable] th[data-sort-index]::after {
  content: "⇅";
  position: absolute;
  right: 6px;
  opacity: 0.35;
  font-size: 0.8em;
}
table[data-sortable] th.sort-asc::after {
  content: "↑";
  opacity: 1;
  color: var(--ax-primary);
}
table[data-sortable] th.sort-desc::after {
  content: "↓";
  opacity: 1;
  color: var(--ax-primary);
}