/* ===================================================================
   SavTrack PORT — App shell chrome (sidebar + topbar + content frame)
   -------------------------------------------------------------------
   Faithful port of design/prototype/proto.css + _shell.html inline
   shell styles, RE-KEYED to design-system tokens and made
   COLLISION-SAFE for the live Bootstrap5 / hope-ui app.

   LOAD: global, AFTER resources/css/app.css and AFTER
   design-system.scoped.css (so :root tokens exist), BEFORE
   @yield('afterStyle'). No build step; edit + hard-refresh.

   COLLISION RULES (why this file exists instead of proto.css verbatim):
     - Uses ONLY distinct shell classes: .app .side .top .view .main
       .side__* .nav-group* .top__*  — none of these are Bootstrap/
       hope-ui class names, so nothing here leaks onto existing pages.
     - Deliberately DROPS proto.css's .modal / .modal-overlay / .modal__*
       rules: those collide with Bootstrap's own .modal and would break
       every CRUD add*/edit* modal in the app. The app keeps Bootstrap
       modals; the prototype's modal skin is out of scope here.
     - Does NOT define .nav-item / .sidebar / .topbar / .btn / .card /
       .avatar bare — those belong to Bootstrap/hope-ui and to the
       SCOPED design-system bundle (body.ds-reskin ...). We never fight
       them globally.
   =================================================================== */

/* ---- Grid frame ---------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w-expanded, 250px) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg, #f6f4fa);
}
.app.is-collapsed { grid-template-columns: 76px minmax(0, 1fr); }

/* ---- Sidebar frame ------------------------------------------------- */
.side {
  background: var(--surface, #fff);
  border-right: 1px solid var(--border, #ece8f2);
  /* Flow with the page: one scrollbar for the whole app. Was sticky + height:100vh +
     overflow-y:auto, which gave the sidebar its OWN scroll and hid the bottom nav items
     below the fold. Now it grows to its content and the page scrolls as one. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  z-index: 30;
}
.side::-webkit-scrollbar { width: 7px; }
.side::-webkit-scrollbar-thumb { background: rgba(20, 10, 35, .13); border-radius: 8px; }
.side::-webkit-scrollbar-thumb:hover { background: rgba(20, 10, 35, .24); }
.side::-webkit-scrollbar-track { background: transparent; }

/* Brand */
.side__brand { display: flex; align-items: center; gap: 11px; padding: 16px 18px 12px; text-decoration: none; }
/* Dark circular coin lockup (proto): /port/logo-wolf.png is a gold-coin/black-
   wolf square art — cover-crop it into a dark circle so it reads as an avatar. */
.side__brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 3px 12px rgba(230, 0, 126, .22); background: #140a23; object-fit: cover; }
.side__brand b { font-family: var(--font-display, "Space Grotesk"), system-ui; font-size: 1.18rem; letter-spacing: -.02em; color: var(--text, #1a1024); }

/* Nav column */
.side__nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 40px; flex: 1 1 auto; }

/* Category label / accordion toggle */
.nav-group { display: flex; flex-direction: column; width: 100%; align-self: stretch; }
.nav-group__label {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-subtle, #948ea4); padding: 16px 12px 6px;
}
.nav-group__label:first-child { padding-top: 6px; }
.nav-group__toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; border-radius: 8px; margin: 2px 2px 0; padding: 12px 10px 6px;
}
.nav-group__toggle:hover { background: var(--neutral-100, #f5f2fa); color: var(--text-muted, #6b6577); }
.nav-group__chev { width: 14px; height: 14px; color: var(--text-subtle, #b3adc0); transition: transform .18s ease; flex: none; }
.nav-group.is-collapsed .nav-group__chev { transform: rotate(-90deg); }
.nav-group__items { max-height: 720px; overflow: hidden; transition: max-height .22s ease; width: 100%; align-self: stretch; }
.nav-group.is-collapsed .nav-group__items { max-height: 0; }

/* Nav item — SCOPED under .side__nav so we never touch Bootstrap .nav-item */
.side__nav .nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; border-radius: 11px;
  color: var(--text-muted, #5b5568); font-size: .9rem; font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; width: 100%;
  transition: background .12s ease, color .12s ease;
}
.side__nav .nav-item:hover { background: var(--neutral-100, #f5f2fa); color: var(--text, #1a1024); text-decoration: none; }
.side__nav .nav-item > span { overflow: hidden; text-overflow: ellipsis; }
.side__nav .nav-item > i,
.side__nav .nav-item svg { width: 19px; height: 19px; flex: none; display: grid; place-items: center; font-size: 16px; }

/* Active — soft magenta fill + left bar, no glow */
.side__nav .nav-item.is-active,
.side__nav .nav-item.active {
  background: var(--primary-tint, rgba(230, 0, 126, .10));
  color: var(--primary, #E6007E); font-weight: 600;
}
.side__nav .nav-item.is-active::before,
.side__nav .nav-item.active::before {
  content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--primary, #E6007E);
}
.side__nav .nav-item.is-active > i,
.side__nav .nav-item.active > i,
.side__nav .nav-item.is-active svg,
.side__nav .nav-item.active svg { color: var(--primary, #E6007E); }

/* Collapsed icon-rail mode */
.app.is-collapsed .side__brand b,
.app.is-collapsed .side__nav .nav-item > span,
.app.is-collapsed .nav-group__label { display: none; }
.app.is-collapsed .side__nav .nav-item { justify-content: center; padding: 0; }
.app.is-collapsed .side__brand { justify-content: center; padding: 16px 0 12px; }
.app.is-collapsed .side__nav .nav-item.is-active::before,
.app.is-collapsed .side__nav .nav-item.active::before { left: 0; }
.app.is-collapsed .nav-group__items { max-height: none !important; }
.app.is-collapsed .nav-group__chev { display: none; }
.app.is-collapsed .nav-group__toggle { pointer-events: none; }
.app.is-collapsed .nav-group { gap: 0; }

/* ---- Main column --------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; }

/* Topbar */
.top {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--topbar-h, 64px); padding: 10px 22px;
  background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border, #ece8f2);
}
.top__search { flex: 0 1 420px; min-width: 0; }
.top__search .input-group { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border, #ece8f2); background: var(--surface-2, #fbfbfd); color: var(--text-subtle, #9a94a8); }
.top__search .input-group > i { font-size: 14px; }
.top__search .input { flex: 1; height: 100%; border: 0; background: transparent; outline: none; font-size: var(--text-base, .875rem); color: var(--text, #1a1024); }
.top__search .input::placeholder { color: var(--text-subtle, #9a94a8); }
.top__spacer { flex: 1; }

/* Flat bordered search (proto parity). On ds-reskin pages the SCOPED design-
   system otherwise wins: `body.ds-reskin .input` re-adds a border + radius +
   focus ring (the pill/shadow look) and `body.ds-reskin .input-group > svg`
   absolutely-positions the (lucide) search icon. We out-specify with #appShell
   so the single flat wrapper border stays, the icon is a flex sibling, and the
   field is transparent + ring-free — exactly like design/prototype/_shell.html. */
#appShell .top__search .input-group { box-shadow: none; }
#appShell .top__search .input-group > i,
#appShell .top__search .input-group > svg {
  position: static; flex: none; width: 16px; height: 16px;
  color: var(--text-subtle, #9a94a8);
}
#appShell .top__search .input,
#appShell .top__search .input:hover,
#appShell .top__search .input:focus {
  flex: 1; width: auto; min-height: 0; height: 100%;
  padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; outline: none;
}

/* Sidebar collapse toggle (lives in the topbar) */
.side__toggle {
  border: 0; background: transparent; cursor: pointer; color: var(--text-muted, #5b5568);
  width: 40px; height: 40px; border-radius: var(--radius-md, 11px); display: grid; place-items: center; flex: none;
}
.side__toggle:hover { background: var(--neutral-100, #f5f2fa); color: var(--text, #1a1024); }

/* Generic proto topbar icon button (theme toggle, etc.) */
.top__icon {
  position: relative; width: 40px; height: 40px; border-radius: var(--radius-md, 11px);
  display: grid; place-items: center; color: var(--text-muted, #5b5568); border: 0; background: transparent; cursor: pointer;
}
.top__icon:hover { background: var(--neutral-100, #f5f2fa); color: var(--text, #1a1024); }

/* Content region — fills the grid column full-width like proto _shell (.view is
   the 1fr track). No max-width cap; a cap left a dead gutter on wide screens. */
.view { padding: 22px; min-width: 0; width: 100%; }
@media (max-width: 640px) { .view { padding: 16px; } }

/* ---- Reuse the PRESERVED hope-ui navbar cluster inside .top --------
   The draft layout @includes inc/navbar.blade.php inside .top so the
   notification bell, realtime hooks (.notification-icon/.badge-count/
   .notification-list/#clear-notifications/#sidebar-payment-counter),
   the user dropdown, logout form, window.App and pusher stay byte-for-
   byte intact. We only re-flow it: strip its slab chrome, hide the old
   logo + the two legacy sidebar/hamburger toggles, right-align actions.
   !important is used ONLY to beat hope-ui on hidden legacy chrome.      */
.top .iq-navbar { flex: 1; margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; min-height: 0; }
.top .iq-navbar .navbar-inner { padding: 0; }
.top .iq-navbar .navbar-brand,
.top .iq-navbar > .container-fluid > .sidebar-toggle,
.top .iq-navbar .navbar-toggler { display: none !important; }
.top .iq-navbar .navbar-collapse { flex: 1; }
.top .iq-navbar .navbar-list { margin-left: auto; }

/* User cluster chevron caret (proto parity). navbar.blade.php's user toggle
   (.custom-drop > #navbarDropdown) ships no caret and is NOT a .dropdown-toggle,
   so Bootstrap draws none. Add a lucide chevron-down via CSS mask — visual only;
   the Bootstrap `data-bs-toggle="dropdown"` menu stays wired untouched. */
.top .iq-navbar .custom-drop > .nav-link::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: 4px;
  border: 0;
  background-color: var(--text-subtle, #9a94a8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ---- Per-page hero art (proto parity) --------------------
   Every ported .page-hero carries has-art (mirrors proto.js auto-wiring);
   pages with art set --hero-art inline (PNGs served from /port/hero/),
   pages without fall back to the plain dark gradient (no moon/ridge). */
.page-hero.has-art,
body.ds-reskin .page-hero.page-hero--cosmic.has-art {  /* outgun scoped --cosmic bg */
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(18,7,36,.92) 0%, rgba(18,7,36,.72) 30%, rgba(18,7,36,.32) 56%, rgba(18,7,36,.04) 100%),
    var(--hero-art, none),
    linear-gradient(120deg, #1b0b30 0%, #2c1250 60%, #3a1666 100%);
  background-size: cover, cover, cover;
  background-position: center, center right, center;
  background-repeat: no-repeat;
}
.page-hero.has-art::before, .page-hero.has-art::after,
body.ds-reskin .page-hero.has-art::before, body.ds-reskin .page-hero.has-art::after { display: none !important; content: none !important; }

/* ---- Responsive: below 992px collapse to icon rail by default ------ */
@media (max-width: 992px) {
  .app:not(.is-expanded) { grid-template-columns: 76px minmax(0, 1fr); }
  .app:not(.is-expanded) .side__brand b,
  .app:not(.is-expanded) .side__nav .nav-item > span,
  .app:not(.is-expanded) .nav-group__label { display: none; }
  .app:not(.is-expanded) .side__nav .nav-item { justify-content: center; padding: 0; }
}

/* --- Guarantee the shell grid wins over hope-ui/Bootstrap (.app id + important) --- */
#appShell.app { display: grid !important; grid-template-columns: var(--sidebar-w-expanded, 250px) minmax(0, 1fr) !important; }
#appShell.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed, 76px) minmax(0, 1fr) !important; }

/* --- Cosmic hero: force light title/text over the dark art (hope-ui h1 color was winning) --- */
#appShell .page-hero--cosmic .page-hero__title,
#appShell .page-hero--cosmic h1,
#appShell .page-hero--cosmic h2 { color: #fff !important; }
#appShell .page-hero--cosmic .page-hero__subtitle { color: rgba(255,255,255,.82) !important; }

/* ===================================================================
   RESPONSIVE LAYER — mobile/tablet behavior for the whole app shell
   and shared content patterns (cards, tables, grids, filters).
   =================================================================== */

/* ---- Phones: off-canvas sidebar ----------------------------------- */
@media (max-width: 767.98px) {
  /* Shell becomes a single column; sidebar slides over content */
  #appShell.app,
  #appShell.app.is-collapsed { display: block !important; grid-template-columns: none !important; }

  #appShell .side {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(280px, 82vw);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: none;
    z-index: 90;
  }
  #appShell.side-open .side { transform: none; box-shadow: 0 0 40px rgba(20, 10, 35, .35); }

  /* Restore full labels on mobile drawer (992px icon-rail rules would hide them) */
  #appShell .side__brand b,
  #appShell .side__nav .nav-item > span,
  #appShell .nav-group__label { display: revert; }
  #appShell .side__nav .nav-item { justify-content: flex-start; padding: revert; }

  /* Backdrop */
  #appShell.side-open::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(20, 10, 35, .45); z-index: 80;
  }

  /* Topbar: keep toggle reachable, shrink search */
  #appShell .top { position: sticky; top: 0; z-index: 40; flex-wrap: nowrap; gap: 8px; }
  #appShell .top__search { flex: 1 1 auto; min-width: 0; }
  #appShell .top__search .input { min-width: 0; width: 100%; }

  #appShell .view { padding: 12px; }
}

/* ---- Tables: never blow the page width ----------------------------- */
@media (max-width: 992px) {
  #appShell .view .table-responsive,
  #appShell .view .dataTables_wrapper,
  #appShell .view .dt-container {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  #appShell .view table.table,
  #appShell .view table.dataTable { min-width: 640px; }
}

/* ---- Cards & shared ds patterns ------------------------------------ */
@media (max-width: 640px) {
  /* Card headers wrap instead of overflowing */
  body.ds-reskin .card__header { flex-wrap: wrap; row-gap: 6px; }
  body.ds-reskin .card__actions { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  body.ds-reskin .card__body { min-width: 0; }

  /* Any multi-col stat grid stacks to 2, tiny screens 1 */
  body.ds-reskin .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* Podium (top 3 sellers) stacks vertically */
  body.ds-reskin .podium { grid-template-columns: 1fr !important; align-items: stretch; }

  /* Breakdown rows (Net Sales card) wrap long labels */
  body.ds-reskin .brk__row { flex-wrap: wrap; row-gap: 2px; }

  /* List rows: keep amount column from crushing the name */
  body.ds-reskin .lrow { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 420px) {
  body.ds-reskin .stat-grid { grid-template-columns: 1fr !important; }
}

/* Charts (ApexCharts) shrink with their card */
@media (max-width: 992px) {
  body.ds-reskin .apexcharts-canvas, body.ds-reskin .apexcharts-canvas svg { max-width: 100%; }
}

/* ---- Dropdowns inside page heroes ----------------------------------
   .page-hero clips overflow (rounds its background art), which also
   clipped Bootstrap dropdown menus opened from hero action buttons
   (e.g. Front Pool "Actions"). While a menu is open, release the clip —
   the art is a background-image, so border-radius still rounds it. */
body.ds-reskin .page-hero:has(.dropdown-menu.show) { overflow: visible; }
/* Keep the open menu above the cards that follow the hero */
body.ds-reskin .page-hero .dropdown-menu.show { z-index: 1080; }

/* ---- Filter bar polish ---------------------------------------------
   Filter selects are TomSelect (.ts-wrapper), which the .filter-bar rules
   never sized — controls rendered uneven/squished. Give every control a
   consistent width and align the row to the control baseline. */
body.ds-reskin .filter-bar { align-items: flex-end; }
body.ds-reskin .filter-bar .filter-group { min-width: 180px; flex: 0 1 auto; }
body.ds-reskin .filter-bar .ts-wrapper,
body.ds-reskin .filter-bar .tom-select,
body.ds-reskin .filter-bar select,
body.ds-reskin .filter-bar .input { width: 100%; min-width: 180px; }
body.ds-reskin .filter-bar .ts-control { min-height: 38px; }

/* Phones: filters stack full-width */
@media (max-width: 640px) {
  body.ds-reskin .filter-bar { align-items: stretch; }
  body.ds-reskin .filter-bar .filter-group { flex: 1 1 100%; min-width: 0; }
  body.ds-reskin .filter-bar__spacer { display: none; }
}

/* TomSelect open dropdown must float above the cards/tables that follow */
body.ds-reskin .ts-dropdown { z-index: 1060; }

/* ---- TomSelect dropdown panel ---------------------------------------
   The open list rendered see-through in places (options painted their own
   bg but the panel itself had none) and bled into the table below. Force a
   solid, bounded, elevated panel. */
body.ds-reskin .ts-dropdown {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e8e4f0) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(20, 10, 35, .16) !important;
  margin-top: 4px;
  overflow: hidden;
}
body.ds-reskin .ts-dropdown .ts-dropdown-content {
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface, #fff);
}
body.ds-reskin .ts-dropdown .option { background: transparent; padding: 8px 12px; }
body.ds-reskin .ts-dropdown .option.active { background: var(--magenta-50, #fdeaf4); color: var(--magenta-700, #b8005f); }
body.ds-reskin .ts-dropdown .ts-dropdown-input {
  background: var(--surface, #fff);
  border: 0; border-bottom: 1px solid var(--border, #e8e4f0);
  padding: 8px 12px; width: 100%;
}

/* ---- Choices.js dropdown panel (failed-payments / leads filters) ----
   Same treatment as TomSelect: solid elevated panel above the table. */
body.ds-reskin .choices__list--dropdown,
body.ds-reskin .choices__list[aria-expanded] {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e8e4f0) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(20, 10, 35, .16) !important;
  z-index: 1060 !important;
  margin-top: 4px;
  overflow: hidden;
}
body.ds-reskin .choices__list--dropdown .choices__list { max-height: 260px; overflow-y: auto; }
body.ds-reskin .choices__list--dropdown .choices__item { padding: 8px 12px; }
body.ds-reskin .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--magenta-50, #fdeaf4); color: var(--magenta-700, #b8005f);
}
body.ds-reskin .choices { min-width: 180px; }