/* =====================================================================
   HSMart brand token layer  —  Bách Hóa Số Hasu
   ---------------------------------------------------------------------
   MUST LOAD LAST (after Tabler + custom.css) so these :root overrides win
   the cascade by source order — no !important needed.
   Strategy: override Tabler's SOURCE tokens (--tblr-*); the rest of the
   theme cascades automatically. Keep enum-named status classes, only
   re-skin them. Dark mode re-declares the source tokens.
   ===================================================================== */

:root{
  /* ---- raw brand palette ---- */
  --hs-navy:#084CA1;   --hs-navy-rgb:8,76,161;
  --hs-yellow:#FFC709; --hs-yellow-rgb:255,199,9;
  --hs-sky:#00AEEF;    --hs-sky-rgb:0,174,239;
  --hs-orange:#F7941D; --hs-orange-rgb:247,148,29;

  /* navy ramp */
  --hs-navy-900:#042c61; --hs-navy-800:#063b80; --hs-navy-700:#0a57b5;
  --hs-navy-300:#6f9fd4; --hs-navy-200:#a9c4e4; --hs-navy-100:#d6e3f3; --hs-navy-050:#eaf1fa;
  /* yellow ramp */
  --hs-yellow-700:#c79a00; --hs-yellow-300:#ffe07a; --hs-yellow-100:#fff3cc;

  /* gradients */
  --hs-grad-sky-navy:linear-gradient(135deg,#00AEEF 0%,#084CA1 100%);
  --hs-grad-yellow-orange:linear-gradient(135deg,#FFC709 0%,#F7941D 100%);

  /* typography families */
  --hs-font-heading:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --hs-font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* semantic surface/border tokens (reused by status + components + DataTables) */
  --hs-surface:#ffffff; --hs-surface-2:#f6f8fb;
  --hs-border:#e6ebf2; --hs-border-strong:#d6dde7;
  --hs-text:#16233a; --hs-text-muted:#5b6677; --hs-text-faint:#8a94a6;

  /* status family tokens */
  --st-pos-bg:var(--hs-navy-050);  --st-pos-fg:var(--hs-navy-700);  --st-pos-bd:var(--hs-navy-100);
  --st-warn-bg:var(--hs-yellow-100); --st-warn-fg:#7a5b00;          --st-warn-bd:#ffe7a3;
  --st-prog-bg:rgba(var(--hs-sky-rgb),.13); --st-prog-fg:#066a91;   --st-prog-bd:rgba(var(--hs-sky-rgb),.30);
  --st-neg-bg:#fdecee;             --st-neg-fg:#b21e2b;             --st-neg-bd:#f6c9ce;
  --st-neutral-bg:#eef1f5;         --st-neutral-fg:#566073;         --st-neutral-bd:#dde3ec;

  /* motion */
  --hs-motion-fast:120ms; --hs-motion-base:200ms; --hs-motion-slow:320ms;
  --hs-ease:cubic-bezier(.2,0,0,1);

  /* sidebar (navy rail) — tokenized so the sub-menu redesign has one source of truth */
  --hs-sidebar-link:#cfe0f5;          /* top-level link text */
  --hs-sidebar-icon:#9cc0ec;          /* top-level icon */
  --hs-sidebar-child:#b9d0ec;         /* sub-menu item text */
  --hs-sidebar-muted:#7fa8d8;         /* section headers / faint text */
  --hs-sidebar-hover-bg:rgba(255,255,255,.07);
  --hs-sidebar-active-bg:rgba(255,255,255,.12);
  --hs-sidebar-rail:rgba(255,255,255,.14);   /* sub-menu guide line */
}

/* ====== Map Tabler source tokens → brand (light) ====== */
:root,
[data-bs-theme="light"]{
  --tblr-primary:var(--hs-navy);
  --tblr-primary-rgb:var(--hs-navy-rgb);
  --tblr-primary-fg:#ffffff;
  --tblr-primary-lt:var(--hs-navy-050);

  --tblr-blue:var(--hs-navy);   --tblr-blue-rgb:var(--hs-navy-rgb);
  --tblr-azure:var(--hs-sky);   --tblr-azure-rgb:var(--hs-sky-rgb);
  --tblr-yellow:var(--hs-yellow); --tblr-yellow-rgb:var(--hs-yellow-rgb);
  --tblr-orange:var(--hs-orange); --tblr-orange-rgb:var(--hs-orange-rgb);

  /* warning maps to ORANGE — yellow text fails WCAG on white; yellow stays a fill token */
  --tblr-warning:var(--hs-orange); --tblr-warning-rgb:var(--hs-orange-rgb);
  --tblr-info:var(--hs-sky);       --tblr-info-rgb:var(--hs-sky-rgb);
  --tblr-success:#2ca24b;          --tblr-success-rgb:44,162,75;
  --tblr-danger:#e02d3c;           --tblr-danger-rgb:224,45,60;

  --tblr-link-color:var(--hs-navy);
  --tblr-link-color-rgb:var(--hs-navy-rgb);
  --tblr-link-hover-color:var(--hs-navy-800);
}

/* ====== Dark mode parity (navy too dark on dark surfaces) ====== */
[data-bs-theme="dark"]{
  --tblr-primary:#2f7bd6; --tblr-primary-rgb:47,123,214; --tblr-primary-fg:#08182b;
  --tblr-primary-lt:rgba(47,123,214,.16);
  --tblr-blue:#2f7bd6; --tblr-blue-rgb:47,123,214;
  --tblr-azure:#36c0f5; --tblr-azure-rgb:54,192,245;
  --tblr-yellow:#ffd23f; --tblr-yellow-rgb:255,210,63;
  --tblr-orange:#ffa53d; --tblr-orange-rgb:255,165,61;
  --tblr-warning:#ffa53d; --tblr-warning-rgb:255,165,61;
  --tblr-info:#36c0f5; --tblr-info-rgb:54,192,245;
  --tblr-link-color:#6fa8e6; --tblr-link-color-rgb:111,168,230;
  --tblr-link-hover-color:#9cc4f0;

  --hs-surface:#15202e; --hs-surface-2:#1b2838;
  --hs-border:#25344a; --hs-border-strong:#324259;
  --hs-text:#e7edf5; --hs-text-muted:#9aa7b8; --hs-text-faint:#6c7a8d;
  --hs-navy-050:rgba(47,123,214,.14); --hs-navy-100:rgba(47,123,214,.22); --hs-navy-700:#9cc4f0;

  --st-pos-fg:#9cc4f0;
  --st-warn-bg:rgba(255,199,9,.16); --st-warn-fg:#ffd574; --st-warn-bd:rgba(255,199,9,.30);
  --st-prog-fg:#5fcdf5;
  --st-neg-bg:rgba(255,93,106,.14); --st-neg-fg:#ff8a93; --st-neg-bd:rgba(255,93,106,.30);
  --st-neutral-bg:#222e40; --st-neutral-fg:#9aa7b8; --st-neutral-bd:#324259;
}

/* =====================================================================
   Typography — flip body to Archivo, headings to Montserrat
   (overriding --tblr-font-sans-serif switches the whole body stack)
   ===================================================================== */
:root{ --tblr-font-sans-serif:var(--hs-font-body); }
body{ font-family:var(--hs-font-body); }
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.page-title,.card-title,.navbar-brand,.nav-link-title,.btn,
.page-pretitle{
  font-family:var(--hs-font-heading);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.page-title{ letter-spacing:-.1px; }
.btn{ font-weight:600; }

/* =====================================================================
   High-impact polish that belongs with the tokens
   (deep component work lives in Phase 3 / interaction.css)
   ===================================================================== */
.btn-primary:hover,.btn-primary:focus{ background-color:var(--hs-navy-800); border-color:var(--hs-navy-800); }
[data-bs-theme="dark"] .btn-primary:hover,[data-bs-theme="dark"] .btn-primary:focus{ background-color:#4a90e0; border-color:#4a90e0; }

/* yellow CTA helper: brand accent button with navy label (always-dark text) */
.btn-cta{ background:var(--hs-yellow); border-color:var(--hs-yellow); color:var(--hs-navy-900); font-weight:600; }
.btn-cta:hover,.btn-cta:focus{ background:var(--hs-yellow-700); border-color:var(--hs-yellow-700); color:var(--hs-navy-900); }

/* gradient utilities (brand) */
.hs-grad-blue{ background:var(--hs-grad-sky-navy)!important; color:#fff; }
.hs-grad-yellow{ background:var(--hs-grad-yellow-orange)!important; color:var(--hs-navy-900); }

/* accessible focus ring on every interactive (Tabler's default is weak) */
a:focus-visible,button:focus-visible,.btn:focus-visible,
.form-control:focus-visible,.form-select:focus-visible,
[tabindex]:focus-visible,.page-link:focus-visible{
  outline:2px solid var(--hs-sky); outline-offset:2px;
}

/* form focus → navy ring */
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:var(--tblr-primary);
  box-shadow:0 0 0 .25rem rgba(var(--hs-navy-rgb),.15);
}

/* =====================================================================
   Status badges — consolidated to 5 semantic families.
   Class names are DB enum values used as `<span class="badge {status}">`
   so we keep the names and only restyle. Loaded after custom.css ⇒ wins.
   ===================================================================== */
.badge.accepted,.badge.accepted_by_seller,.badge.partially_accepted,
.badge.approved,.badge.visible,.badge.published,.badge.delivered,
.accepted,.accepted_by_seller,.partially_accepted,
.approved,.visible,.published,.delivered{
  background-color:var(--st-pos-bg)!important; color:var(--st-pos-fg)!important; border-color:var(--st-pos-bd)!important;
}
.badge.pending,.badge.awaiting_seller_response,.badge.awaiting_store_response,.badge.returning_to_store,
.pending,.awaiting_seller_response,.awaiting_store_response,.returning_to_store{
  background-color:var(--st-warn-bg)!important; color:var(--st-warn-fg)!important; border-color:var(--st-warn-bd)!important;
}
.badge.preparing,.badge.assigned,.badge.collected,.badge.out_for_delivery,.badge.ready_for_pickup,
.preparing,.assigned,.collected,.out_for_delivery,.ready_for_pickup{
  background-color:var(--st-prog-bg)!important; color:var(--st-prog-fg)!important; border-color:var(--st-prog-bd)!important;
}
.badge.rejected,.badge.rejected_by_seller,.badge.failed,.badge.delivery_failed,
.badge.draft,.badge.not_approved,.badge.pending_verification,.badge.inactive,
.rejected,.rejected_by_seller,.failed,.delivery_failed,
.draft,.not_approved,.pending_verification,.inactive{
  background-color:var(--st-neg-bg)!important; color:var(--st-neg-fg)!important; border-color:var(--st-neg-bd)!important;
}
.badge.cancelled,.badge.dropped,
.cancelled,.dropped{
  background-color:var(--st-neutral-bg)!important; color:var(--st-neutral-fg)!important; border-color:var(--st-neutral-bd)!important;
}
/* keep status pills consistently shaped */
.badge.accepted,.badge.pending,.badge.preparing,.badge.rejected,.badge.cancelled,
.badge.delivered,.badge.approved,.badge.failed,.badge.assigned,.badge.out_for_delivery{
  border-width:1px; border-style:solid;
}

/* =====================================================================
   Shell — sidebar (brand navy + yellow active), top header, auth
   Applies to BOTH panels (shared _sidebar / _header / guest layouts).
   ===================================================================== */

/* ---- Sidebar: deep navy rail with yellow active accent ---- */
.navbar-vertical{
  background:var(--hs-navy)!important; border-right:0;
  box-shadow:2px 0 14px rgba(8,23,43,.14);
}
.navbar-vertical .navbar-brand{ padding-block:14px; }
.navbar-vertical .nav-link{
  color:var(--hs-sidebar-link); transition:background var(--hs-motion-fast) var(--hs-ease), color var(--hs-motion-fast) var(--hs-ease);
}
.navbar-vertical .nav-link .nav-link-icon{ color:var(--hs-sidebar-icon); }
.navbar-vertical .nav-link:hover{ background:var(--hs-sidebar-hover-bg); color:#fff; }
.navbar-vertical .nav-link:hover .nav-link-icon{ color:#fff; }
.navbar-vertical .nav-item.active>.nav-link,
.navbar-vertical .nav-link.active{
  background:rgba(255,255,255,.10); color:#fff; font-weight:600;
  box-shadow:inset 3px 0 0 var(--hs-yellow);
}
.navbar-vertical .nav-item.active>.nav-link .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon{ color:var(--hs-yellow); }
/* chevron on collapsible parents rotates when open */
.navbar-vertical .nav-link.dropdown-toggle::after{
  transition:transform var(--hs-motion-base) var(--hs-ease);
}
.navbar-vertical .nav-link.dropdown-toggle.show::after{ transform:rotate(180deg); }

/* ---- Sub-menu (redesign 2026-07-05): indented items along a guide rail; the active
       item gets a yellow dot on the rail — same "yellow = you are here" language as the
       parent's inset bar. Bullet icons (ti-point) were dropped from the blade. ---- */
.navbar-vertical .dropdown-menu{
  background:transparent; border:0; box-shadow:none;
  /* rail aligned under the parent's icon column */
  margin:2px 0 4px 20px; padding:0 8px 0 10px;
  border-left:1px solid var(--hs-sidebar-rail);
}
.navbar-vertical .dropdown-menu .dropdown-item{
  position:relative;
  color:var(--hs-sidebar-child);
  border-radius:6px;
  padding:.42rem .6rem;
  margin:1px 0;
  font-size:.8125rem; line-height:1.35;
  white-space:normal;              /* long labels wrap inside the rail, never overflow */
  min-width:0;
  transition:background var(--hs-motion-fast) var(--hs-ease), color var(--hs-motion-fast) var(--hs-ease);
}
.navbar-vertical .dropdown-menu .dropdown-item:hover{
  background:var(--hs-sidebar-hover-bg); color:#fff;
}
.navbar-vertical .dropdown-menu .dropdown-item.active{
  background:var(--hs-sidebar-active-bg); color:#fff; font-weight:600;
}
/* active dot sits ON the rail (negative offset = rail padding + half dot) */
.navbar-vertical .dropdown-menu .dropdown-item.active::before{
  content:""; position:absolute; left:-13px; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--hs-yellow);
  box-shadow:0 0 0 3px rgba(var(--hs-yellow-rgb),.22);
}

/* section divider + version text on navy */
.hs-nav-section{
  display:block; font-size:.65rem; letter-spacing:.08em; padding:.25rem 0;
}
.navbar-vertical .nav-item .nav-link-title.text-uppercase{ color:var(--hs-sidebar-muted)!important; }
.navbar-vertical .container-fluid > .fw-medium{ color:#6f97c8; }

/* ---- Top header: sticky with shadow-on-scroll ---- */
.hs-topbar{
  position:sticky; top:0; z-index:1020;
  background:var(--hs-surface);
  transition:box-shadow var(--hs-motion-base) var(--hs-ease);
}
.hs-topbar.is-stuck{ box-shadow:0 2px 14px rgba(16,37,66,.09); }

/* ---- Auth pages: subtle brand ground + elevated card ---- */
.auth-page{
  min-height:100vh;
  background:linear-gradient(135deg, var(--hs-navy-050) 0%, var(--hs-surface-2) 60%, #ffffff 100%);
}
[data-bs-theme="dark"] .auth-page{ background:linear-gradient(135deg,#0e1622 0%, #15202e 100%); }
.auth-page .card,
.page-center .card-md{ border:0; box-shadow:0 18px 44px rgba(16,37,66,.14); border-radius:16px; }