/* ==================================================================
 * CLASSIVO — Admin Theme (Bootstrap 5.3 companion stylesheet)
 * ------------------------------------------------------------------
 * Layer 1  :root tokens ....... palette / type / layout metrics.
 *                               Chart.js reads these too (single
 *                               source of truth for the colour set).
 * Layer 2  Bootstrap bridge ... re-skins NATIVE components (buttons,
 *                               forms, cards, tables, nav, modal,
 *                               dropdown, offcanvas) — no extra HTML.
 * Layer 3  Short helpers ...... only what Bootstrap has no class for.
 *
 * Rule of thumb: if a Bootstrap utility does the job, use it in the
 * markup and do NOT add CSS here. Keep this file lean.
 * ================================================================== */

:root {

  /* ---------- 1. Brand palette ---------- */
  --cls-primary: #4A0E1A;           /* Royal Maroon      */
  --cls-primary-hover: #370A13;
  --cls-gold: #D4AF7C;              /* Champagne Gold    */
  --cls-gold-hover: #C29C68;
  --cls-brown: #A7765A;             /* Muted Brown       */
  --cls-ivory: #F3E3D7;             /* Warm Ivory        */
  --cls-canvas: #FAF8F6;            /* Warm cream canvas */
  --cls-card: #FFFFFF;
  --cls-border: #E8E0DC;
  --cls-text: #24191B;
  --cls-muted: #746A68;

  /* ---------- 2. Elevation ---------- */
  --cls-shadow-card: 0 2px 10px rgba(36, 25, 27, .04);
  --cls-shadow-hover: 0 4px 20px -2px rgba(74, 14, 26, .06);

  /* ---------- 3. Layout metrics ---------- */
  --cls-sidebar-w: 16rem;
  --cls-topbar-h: 4rem;
  --cls-radius: .75rem;

  /* ---------- 3b. Sidebar panel (dark maroon) ---------- */
  --cls-side-bg: #4A0E1A;                      /* panel base             */
  --cls-side-hairline: rgba(255, 255, 255, .08);/* section / row divider  */
  --cls-side-label: rgba(255, 255, 255, .72);  /* resting link text      */
  --cls-side-icon: rgba(255, 255, 255, .55);   /* resting icon           */
  --cls-side-section: rgba(255, 255, 255, .45);/* section header text    */
  --cls-side-hover: rgba(255, 255, 255, .06);  /* link hover fill        */
  --cls-side-active: rgba(212, 175, 124, .14); /* active link fill       */
  --cls-side-chip: rgba(255, 255, 255, .07);   /* icon chip fill         */
  --cls-side-chip-active: rgba(212, 175, 124, .18);

  /* ---------- 4. Typography ---------- */
  --cls-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cls-font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;

  /* ---------- 5. Charts + order status colours ---------- */
  --cls-chart-pending: #D4AF7C;
  --cls-chart-processing: #A7765A;
  --cls-chart-shipped: #2D6A4F;
  --cls-chart-delivered: #3B82F6;
  --cls-chart-cancelled: #E63946;

  --cls-st-pending-bg: #FDF3D7;     --cls-st-pending-fg: #854D0E;
  --cls-st-processing-bg: #DBEAFE;  --cls-st-processing-fg: #1E40AF;
  --cls-st-shipped-bg: #D1FAE5;     --cls-st-shipped-fg: #065F46;
  --cls-st-delivered-bg: #E0F2FE;   --cls-st-delivered-fg: #075985;
  --cls-st-cancelled-bg: #FEE2E2;   --cls-st-cancelled-fg: #9F1239;

  /* =============== 6. Bootstrap variable bridge =============== */
  --bs-body-font-family: var(--cls-font-sans);
  --bs-body-bg: var(--cls-canvas);
  --bs-body-color: var(--cls-text);
  --bs-body-color-rgb: 36, 25, 27;
  --bs-emphasis-color: var(--cls-text);
  --bs-secondary-color: var(--cls-muted);
  --bs-secondary-bg: #F6EDE6;            /* warm tint: icon chips, table head, modal bars */
  --bs-secondary-bg-rgb: 246, 237, 230;
  --bs-border-color: var(--cls-border);
  --bs-border-radius: .5rem;
  --bs-border-radius-xl: var(--cls-radius);

  --bs-primary: var(--cls-primary);
  --bs-primary-rgb: 74, 14, 26;          /* .text-primary / .bg-primary become maroon */

  /* a{} renders through the *_rgb forms; .btn-link uses the hex ones */
  --bs-link-color: var(--cls-brown);
  --bs-link-color-rgb: 167, 118, 90;
  --bs-link-hover-color: var(--cls-primary);
  --bs-link-hover-color-rgb: 74, 14, 26;

  --bs-form-control-bg: #fff;            /* white inputs on the cream canvas */

  --bs-card-bg: var(--cls-card);
  --bs-card-border-color: var(--cls-border);
  --bs-card-border-radius: var(--cls-radius);

  --bs-dropdown-bg: var(--cls-card);
  --bs-dropdown-border-color: var(--cls-border);
  --bs-dropdown-border-radius: var(--cls-radius);
  --bs-dropdown-link-hover-bg: var(--cls-canvas);

  --bs-modal-bg: var(--cls-card);
  --bs-modal-border-color: var(--cls-border);
  --bs-modal-border-radius: var(--cls-radius);
}

/* ==================================================================
 * Layer 2 — native component re-skin
 * ================================================================== */

/* Buttons -------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--cls-primary);
  --bs-btn-border-color: var(--cls-primary);
  --bs-btn-hover-bg: var(--cls-primary-hover);
  --bs-btn-hover-border-color: var(--cls-primary-hover);
  --bs-btn-active-bg: var(--cls-primary-hover);
  --bs-btn-active-border-color: var(--cls-primary-hover);
  --bs-btn-disabled-bg: var(--cls-primary);
  --bs-btn-disabled-border-color: var(--cls-primary);
  --bs-btn-focus-shadow-rgb: 74, 14, 26;
}

/* White pill + gold hover — date filter, "Cancel", ghost actions */
.btn-soft {
  --bs-btn-color: var(--cls-text);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--cls-border);
  --bs-btn-hover-color: var(--cls-primary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--cls-gold);
  --bs-btn-active-bg: var(--cls-canvas);
  --bs-btn-active-border-color: var(--cls-gold);
  --bs-btn-focus-shadow-rgb: 212, 175, 124;
}

/* Champagne focus ring instead of Bootstrap blue ------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cls-gold);
  box-shadow: 0 0 0 .25rem rgba(212, 175, 124, .35);
}

/* Cards — soft shadow + gentle lift ------------------------------- */
.card {
  box-shadow: var(--cls-shadow-card);
  transition: box-shadow .2s ease;
}
.card:hover {
  box-shadow: var(--cls-shadow-hover);
}

/* Dense admin data tables ----------------------------------------- */
.table {
  font-size: .8125rem;
  --bs-table-hover-bg: var(--cls-canvas);
}
.table th,
.table td {
  padding: .75rem 1rem;
  vertical-align: middle;
}
.table thead th {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cls-muted);
}

/* ==================================================================
 * Layer 3 — small helpers Bootstrap has no class for
 * ================================================================== */

/* Brand type + brand text colours --------------------------------- */
.font-serif { font-family: var(--cls-font-serif); }
.text-gold  { color: var(--cls-gold); }
.text-brown { color: var(--cls-brown); }
.tracking-wide  { letter-spacing: .08em; }
.tracking-widest { letter-spacing: .22em; }

/* Lucide icon sizing (CSS beats the svg width/height attributes) --- */
.icon     { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-xs  { width: .875rem; height: .875rem; }
.icon-md  { width: 1.25rem; height: 1.25rem; }

/* Extra type steps (Bootstrap starts at .small / .875rem) ---------- */
.text-xs   { font-size: .75rem; }
.text-2xs  { font-size: .6875rem; }
.min-w-0   { min-width: 0; }

/* Bootstrap has no pointer-events utility (Tailwind-style name) ----- */
.pointer-events-none { pointer-events: none; }

/* App shell -------------------------------------------------------- */
.admin-topbar { height: var(--cls-topbar-h); }

/* Auth pages — centered column width (inc/auth/header.php) --------- */
.auth-shell { width: 100%; max-width: 26rem; }

/* ==================================================================
 * Sidebar — premium dark panel (inc/admin/sidebar.php)
 * ------------------------------------------------------------------
 * Responsive Bootstrap offcanvas: slide-in panel < lg, static column
 * >= lg (`offcanvas-lg offcanvas-start` — the responsive class
 * replaces the base .offcanvas class). Bootstrap only parks the
 * background-COLOR at lg, so the glow gradient below survives.
 * ================================================================== */
.admin-sidebar {
  --bs-offcanvas-width: var(--cls-sidebar-w);
  --bs-offcanvas-bg: var(--cls-side-bg);
  --bs-offcanvas-color: #fff;
  --bs-offcanvas-border-color: var(--cls-side-hairline);
  --bs-offcanvas-box-shadow: .5rem 0 1.5rem -.5rem rgba(36, 25, 27, .45);

  /* Keep Bootstrap's nav-pills vars in sync with our own rules so
     both styling paths render the same active state. */
  --bs-nav-link-color: var(--cls-side-label);
  --bs-nav-link-hover-color: #fff;
  --bs-nav-link-font-size: .875rem;
  --bs-nav-link-font-weight: 500;
  --bs-nav-pills-link-active-bg: var(--cls-side-active);
  --bs-nav-pills-link-active-color: var(--cls-gold);

  width: var(--cls-sidebar-w);
  display: flex;
  flex-direction: column;
  background-color: var(--cls-side-bg);
  /* Soft champagne glow behind the brand, fading down the panel. */
  background-image: radial-gradient(115% 22% at 50% -4%, rgba(212, 175, 124, .2) 0%, transparent 72%);
  color: #fff;
}

@media (min-width: 992px) {
  /* Bootstrap parks responsive offcanvas with a transparent
     background (!important) — restore the maroon panel. */
  .admin-sidebar {
    background-color: var(--cls-side-bg) !important;
    border-right: 1px solid var(--cls-side-hairline);
  }
}

/* --- Brand header (logo mark + wordmark) -------------------------- */
.sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.0625rem 1.25rem .9375rem;
  border-bottom: 1px solid var(--cls-side-hairline);
}
.sidebar-logo {           /* CSS size beats the svg width/height attrs */
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}
.sidebar-wordmark {
  font-family: var(--cls-font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cls-gold);
}
.sidebar-tagline {
  margin-top: .3125rem;
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.sidebar-close {         /* mobile offcanvas dismiss (hidden >= lg) */
  position: absolute;
  top: .6875rem;
  right: .6875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-close:hover { background-color: rgba(255, 255, 255, .08); color: #fff; }

/* --- Navigation (sections + items) -------------------------------- */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;              /* let the flex child scroll cleanly */
  overflow-y: auto;
  padding: 1rem 1rem 1.25rem;
}

.sidebar-section + .sidebar-section { margin-top: 1.375rem; }

.sidebar-section-title {     /* MAIN / INVENTORY / CRM / ... */
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 .5rem;
  padding: 0 .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cls-side-section);
}
/* Faint rule trailing the label, fading out to the right edge. */
.sidebar-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent);
}

/* --- Nav link: icon chip + label + optional chevron --------------- */
.sidebar-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6875rem;
  padding: .5rem .625rem .5rem .75rem;
  border-radius: .5625rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--cls-side-label);
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-nav .nav-link:hover {
  background-color: var(--cls-side-hover);
  color: #fff;
}

.sidebar-icon {             /* rounded chip around the Lucide icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: .4375rem;
  background-color: var(--cls-side-chip);
  color: var(--cls-side-icon);
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-nav .nav-link:hover .sidebar-icon {
  background-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
}

.sidebar-label {
  flex: 1 1 auto;
  min-width: 0;              /* long labels truncate instead of pushing */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, .3);
  transition: color .18s ease;
}
.sidebar-nav .nav-link:hover .sidebar-chevron { color: rgba(255, 255, 255, .55); }

/* --- Active state: champagne fill + gold rail accent -------------- */
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active:hover {
  background-color: var(--cls-side-active);
  color: var(--cls-gold);
  font-weight: 600;
}
.sidebar-nav .nav-link.active .sidebar-icon {
  background-color: var(--cls-side-chip-active);
  color: var(--cls-gold);
}
/* Clean gold border accent, seated in the nav's left gutter. */
.sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.125rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cls-gold), var(--cls-brown));
  box-shadow: 0 0 10px rgba(212, 175, 124, .45);
}

/* --- Collapsible submenu (Products group) ------------------------ */
.sidebar-parent {
  display: flex;
  align-items: center;
}
/* Parent keeps its chip + label; the chevron toggle lives beside it. */
.sidebar-parent .nav-link {
  border-radius: .5625rem .375rem .375rem .5625rem;
}
.sidebar-parent .nav-link.has-active-child {
  color: #fff;
  font-weight: 600;
}
.sidebar-parent .nav-link.has-active-child .sidebar-icon {
  background-color: var(--cls-side-chip-active);
  color: var(--cls-gold);
}

.sidebar-subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: .4375rem;
  background: transparent;
  color: rgba(255, 255, 255, .45);
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-subtoggle:hover {
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}
/* Chevron flips down when the submenu is open. */
.sidebar-subtoggle .icon {
  transition: transform .2s ease;
}
.sidebar-subtoggle:not(.collapsed) .icon {
  transform: rotate(180deg);
}

.sidebar-subnav {
  position: relative;
  margin: .125rem 0 .25rem;
  padding: .25rem 0 .25rem 1.625rem;   /* indent under the parent chip */
}
/* Hairline guide dropping from the parent down the sub-items. */
.sidebar-subnav::before {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 0;
  bottom: .5rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
}
.sidebar-subnav .nav-link {
  gap: .5rem;
  padding: .375rem .625rem;
  border-radius: .5rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}
.sidebar-subnav .nav-link:hover {
  background-color: var(--cls-side-hover);
  color: #fff;
}
.sidebar-subnav .nav-link.active,
.sidebar-subnav .nav-link.active:hover {
  background-color: var(--cls-side-active);
  color: var(--cls-gold);
  font-weight: 600;
}

.sidebar-subicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, .4);
  transition: color .18s ease;
}
.sidebar-subnav .nav-link:hover .sidebar-subicon { color: rgba(255, 255, 255, .8); }
.sidebar-subnav .nav-link.active .sidebar-subicon { color: var(--cls-gold); }

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-link,
  .sidebar-icon,
  .sidebar-close,
  .sidebar-subtoggle,
  .sidebar-subtoggle .icon { transition: none; }
}

/* --- Footer tagline ------------------------------------------------ */
.sidebar-footer {
  padding: .9375rem 1.25rem 1rem;
  border-top: 1px solid var(--cls-side-hairline);
  background-color: rgba(0, 0, 0, .14);
}
.sidebar-footer-tagline {
  font-family: var(--cls-font-serif);
  font-style: italic;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--cls-gold);
}
.sidebar-footer-meta {
  margin-top: .3125rem;
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

/* Order / stock status badges (tokens from :root) ------------------ */
.badge[data-status="pending"]    { background-color: var(--cls-st-pending-bg);    color: var(--cls-st-pending-fg); }
.badge[data-status="processing"] { background-color: var(--cls-st-processing-bg); color: var(--cls-st-processing-fg); }
.badge[data-status="shipped"]    { background-color: var(--cls-st-shipped-bg);    color: var(--cls-st-shipped-fg); }
.badge[data-status="delivered"]  { background-color: var(--cls-st-delivered-bg);  color: var(--cls-st-delivered-fg); }
.badge[data-status="cancelled"]  { background-color: var(--cls-st-cancelled-bg);  color: var(--cls-st-cancelled-fg); }

/* Chart legend swatch --------------------------------------------- */
.dot {
  width: .625rem;
  height: .625rem;
  flex-shrink: 0;
  display: inline-block;
}

/* Admin avatar ring ------------------------------------------------ */
.avatar-gold { border: 1px solid var(--cls-gold); }

/* Scrollbars — gold on cream --------------------------------------- */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--cls-canvas); }
*::-webkit-scrollbar-thumb { background: var(--cls-gold); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--cls-brown); }
.admin-sidebar ::-webkit-scrollbar-thumb { background: rgba(212, 175, 124, .35); }
.admin-sidebar ::-webkit-scrollbar-track { background: transparent; }
body { scrollbar-width: thin; scrollbar-color: var(--cls-gold) var(--cls-canvas); }