/* ════════════════════════════════════════════════════════════════════════
   Shell page (2026-07-08) — the quick-nav destinations that don't use
   base_dash (My Schedule, New Order, Orders, Invoices) get the same
   folder-tab + shell-card chrome the dashboard has, but on base.html. The
   dashboard's own copy lives in dashboard.css scoped to .dash-root; this
   file is self-contained (tokens scoped to .shell-page-wrap) so loading it
   on base.html can't collide with anything and only shows up when a page
   opts in via {% block shell_page %}1 + body_class db-shell-page.
   Desktop-only (≥1025px) like the quick-nav it hosts; mobile keeps the
   drawer + bottom-nav and renders the page's content unwrapped.
   ════════════════════════════════════════════════════════════════════════ */

/* Shell surface tokens — mirror dashboard.css's --dbx-* but scoped here so we
   don't depend on .dash-root (which base.html doesn't have). */
.shell-page-wrap {
  --shx-shell:  #FFFFFF;
  --shx-page:   #EDF1F5;
  --shx-text:   #16211F;
  --shx-text-2: #5D6B6A;
  --shx-border: rgba(13, 32, 30, 0.08);
  --shx-acc:    var(--acc, #1E3A6E);
  --shx-acc-lift: var(--acc-lift, #38BDF8);
}
[data-theme="dark"] .shell-page-wrap {
  --shx-shell:  #122347;
  --shx-page:   #0A1530;
  --shx-text:   #F2F7F6;
  --shx-text-2: rgba(235, 245, 243, 0.64);
  --shx-border: rgba(255, 255, 255, 0.07);
}
/* Magenta accent: dark shell surfaces go charcoal (see tokens.css
   pink-on-charcoal block) instead of navy. */
[data-theme="dark"][data-accent="magenta"] .shell-page-wrap {
  --shx-shell:  #17171B;
  --shx-page:   #0A0A0C;
}

/* The wrap centres + caps width like the dashboard's .dash-page. */
.shell-page-wrap { max-width: 1360px; margin: 0 auto; width: 100%; }

/* ── The big shell card the page content lives inside ── */
.shell-page-wrap .db-shell {
  background: var(--shx-shell);
  border: 1px solid var(--shx-border);
  border-radius: 24px;
  padding: var(--space-5, 24px);
  position: relative;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 700px) {
  .shell-page-wrap .db-shell { padding: var(--space-3, 14px); border-radius: 20px; }
}

/* ── Folder tabs notched into the shell's top border ── */
.shell-page-wrap .db-tabsrow { position: relative; z-index: 1; padding: 0 var(--space-5, 24px); }
.shell-page-wrap .db-tabsrow .chrome-tabs { display: none; }

@media (min-width: 1025px) {
  /* Hide the topbar's own copy of the quick-nav on shell pages — the tabs
     now live on the card. Leaves the bar as floating utilities. */
  body.db-shell-page .topbar .chrome-tabs { display: none; }

  .shell-page-wrap .db-tabsrow .chrome-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shell-page-wrap .db-tabsrow .chrome-tabs::-webkit-scrollbar { display: none; }
  .shell-page-wrap .db-tabsrow .tb-tab {
    padding: 11px 20px;
    margin-bottom: -1px;                 /* overlap the shell's top border */
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    color: var(--shx-text-2);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
    transition: color .15s ease, background .15s ease;
  }
  .shell-page-wrap .db-tabsrow .tb-tab i { font-size: 15px; }
  .shell-page-wrap .db-tabsrow .tb-tab:hover {
    color: var(--shx-text);
    background: rgba(13, 32, 30, 0.05);
  }
  [data-theme="dark"] .shell-page-wrap .db-tabsrow .tb-tab:hover { background: rgba(255, 255, 255, 0.06); }
  .shell-page-wrap .db-tabsrow .tb-tab.on {
    background: var(--shx-shell);
    border-color: var(--shx-border);
    color: var(--shx-text);
    font-weight: 800;
    box-shadow: inset 0 3px 0 var(--shx-acc);
  }
  [data-theme="dark"] .shell-page-wrap .db-tabsrow .tb-tab.on { box-shadow: inset 0 3px 0 var(--shx-acc-lift); }
  .shell-page-wrap .db-tabsrow .tb-tab.on i { color: var(--shx-acc); }
  [data-theme="dark"] .shell-page-wrap .db-tabsrow .tb-tab.on i { color: var(--shx-acc-lift); }
}