/* ══════════════════════════════════════════════════════════════════════
 * PAYLINE DASHBOARD SHELL — "paper" back-office app frame
 * ----------------------------------------------------------------------
 * The reusable root chrome that operator + location pages mount into
 * (TKT-168, ADR-0028). Collapsible navy sidebar + paper topbar with a
 * ⌘K search trigger, bell, and account pill. Below 900px the sidebar
 * becomes a slide-in MobileDrawer.
 *
 * Consumes ONLY the --dash-* tokens from /shared/brand.css (single source
 * of truth). No hardcoded brand hexes here. Mounted by /shared/dash-shell.js
 * via Payline.mountDashShell({ active, nav, role }).
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  --shell-sidebar-w: 248px;
  --shell-sidebar-collapsed-w: 72px;
  --shell-topbar-h: 60px;
}

.dash-shell {
  min-height: 100vh;
  background: var(--dash-bg);
  color: var(--dash-ink);
  font-family: var(--dash-font-body);
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  grid-template-rows: var(--shell-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  transition: grid-template-columns 180ms cubic-bezier(.4,0,.2,1);
}
.dash-shell.is-collapsed { grid-template-columns: var(--shell-sidebar-collapsed-w) 1fr; }

/* ── Sidebar (navy) ──────────────────────────────────────────────────── */
.shell-sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--dash-navy-2) 0%, var(--dash-navy) 62%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 40;
}
.shell-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--shell-topbar-h);
  padding: 0 20px;
  flex-shrink: 0;
}
.shell-brand .mark {
  font-family: var(--dash-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: #fff;
  white-space: nowrap;
}
.shell-brand .mark .dot { color: var(--dash-teal-2); }
.is-collapsed .shell-brand .mark .word { display: none; }

.shell-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.shell-nav-group + .shell-nav-group { margin-top: 18px; }
.shell-nav-label {
  font-family: var(--dash-font-mono);
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.38); padding: 0 12px 8px;
}
.is-collapsed .shell-nav-label { opacity: 0; height: 4px; padding: 0; }
.shell-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--dash-r-btn);
  color: rgba(255,255,255,.72);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.shell-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.shell-nav-item.active { background: rgba(91,208,222,.16); color: #fff; }
.shell-nav-item.active .ico { color: var(--dash-teal-2); }
.shell-nav-item .ico { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.shell-nav-item .ico svg { width: 18px; height: 18px; }
.is-collapsed .shell-nav-item .lbl { display: none; }
.is-collapsed .shell-nav-item { justify-content: center; padding: 10px 0; }

.shell-collapse-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 12px 14px; padding: 9px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--dash-r-btn);
  color: rgba(255,255,255,.6);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--dash-font-body);
  flex-shrink: 0;
}
.shell-collapse-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.shell-collapse-btn svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.is-collapsed .shell-collapse-btn svg { transform: rotate(180deg); }
.is-collapsed .shell-collapse-btn .lbl { display: none; }
.is-collapsed .shell-collapse-btn { justify-content: center; }

/* ── Topbar (paper) ──────────────────────────────────────────────────── */
.shell-topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: rgba(244,241,233,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--dash-hair);
  position: sticky; top: 0; z-index: 30;
}
.shell-hamburger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--dash-hair); border-radius: var(--dash-r-btn);
  background: var(--dash-card); cursor: pointer; color: var(--dash-ink);
}
.shell-hamburger svg { width: 20px; height: 20px; }

.shell-search {
  flex: 1; max-width: 460px;
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px;
  background: var(--dash-card);
  border: 1px solid var(--dash-hair);
  border-radius: var(--dash-r-btn);
  color: var(--dash-ink-mute);
  font-size: 13.5px; cursor: text;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.shell-search:hover { border-color: var(--dash-ink-mute); }
.shell-search:focus-within { border-color: var(--dash-teal); box-shadow: 0 0 0 3px var(--dash-teal-soft); }
.shell-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--dash-ink);
}
.shell-search input::placeholder { color: var(--dash-ink-mute); }
.shell-search .kbd {
  font-family: var(--dash-font-mono);
  font-size: 11px; padding: 2px 6px;
  background: var(--dash-bg-sunk); border-radius: 6px;
  color: var(--dash-ink-mute); border: 1px solid var(--dash-hair);
}

.shell-spacer { flex: 1; }

.shell-iconbtn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--dash-hair); border-radius: var(--dash-r-btn);
  background: var(--dash-card); cursor: pointer; color: var(--dash-ink-soft);
}
.shell-iconbtn:hover { color: var(--dash-ink); border-color: var(--dash-ink-mute); }
.shell-iconbtn svg { width: 18px; height: 18px; }
.shell-iconbtn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--dash-red); border: 1.5px solid var(--dash-card);
}

.shell-account {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 6px 0 8px;
  background: var(--dash-card);
  border: 1px solid var(--dash-hair);
  border-radius: var(--dash-r-pill);
  cursor: pointer;
}
.shell-account:hover { border-color: var(--dash-ink-mute); }
.shell-account .avatar {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--dash-navy-2); color: #fff;
  display: grid; place-items: center;
  font-family: var(--dash-font-display);
  font-size: 12px; font-weight: 700;
}
.shell-account .who { display: flex; flex-direction: column; line-height: 1.15; }
.shell-account .who .name { font-size: 12.5px; font-weight: 600; color: var(--dash-ink); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-account .who .role { font-family: var(--dash-font-mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--dash-ink-mute); }
.shell-account .caret { color: var(--dash-ink-mute); }
.shell-account .caret svg { width: 14px; height: 14px; }

.shell-acct-menu {
  position: absolute; top: calc(var(--shell-topbar-h) - 6px); right: 24px;
  min-width: 184px;
  background: var(--dash-card);
  border: 1px solid var(--dash-hair);
  border-radius: var(--dash-r-card);
  box-shadow: var(--dash-shadow-lift);
  padding: 6px; z-index: 60;
  display: none;
}
.shell-acct-menu.open { display: block; }
.shell-acct-menu a, .shell-acct-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent;
  border-radius: var(--dash-r-btn);
  font: inherit; font-size: 13.5px; color: var(--dash-ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.shell-acct-menu a:hover, .shell-acct-menu button:hover { background: var(--dash-bg-sunk); }
.shell-acct-menu .sep { height: 1px; background: var(--dash-hair); margin: 4px 0; }
.shell-acct-menu .danger { color: var(--dash-red); }

/* ── Main content area ───────────────────────────────────────────────── */
.shell-main {
  grid-area: main;
  overflow-y: auto;
  min-width: 0;
}
.shell-main-inner { max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; }

/* ── Search palette (⌘K) ─────────────────────────────────────────────── */
.shell-palette-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,30,63,.32);
  backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.shell-palette-overlay.open { display: flex; }
.shell-palette {
  width: min(560px, 92vw);
  background: var(--dash-card);
  border: 1px solid var(--dash-hair);
  border-radius: var(--dash-r-card);
  box-shadow: var(--dash-shadow-lift);
  overflow: hidden;
}
.shell-palette-input {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--dash-hair);
}
.shell-palette-input svg { width: 18px; height: 18px; color: var(--dash-ink-mute); flex-shrink: 0; }
.shell-palette-input input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--dash-font-display); font-size: 17px; color: var(--dash-ink);
}
.shell-palette-results { max-height: 320px; overflow-y: auto; padding: 8px; }
.shell-palette-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--dash-r-btn);
  color: var(--dash-ink); text-decoration: none; font-size: 14px;
  cursor: pointer;
}
.shell-palette-item:hover, .shell-palette-item.sel { background: var(--dash-bg-sunk); }
.shell-palette-item .ico { width: 18px; height: 18px; color: var(--dash-ink-mute); display: grid; place-items: center; }
.shell-palette-item .ico svg { width: 16px; height: 16px; }
.shell-palette-empty { padding: 28px; text-align: center; color: var(--dash-ink-mute); font-size: 13.5px; }

/* ── Mobile drawer (< 900px) ─────────────────────────────────────────── */
.shell-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(10,30,63,.4);
  opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}

@media (max-width: 900px) {
  .dash-shell, .dash-shell.is-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
  }
  .shell-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--shell-sidebar-w);
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
  }
  .dash-shell.drawer-open .shell-sidebar { transform: translateX(0); }
  .dash-shell.drawer-open .shell-scrim { opacity: 1; pointer-events: auto; }
  .shell-hamburger { display: flex; }
  .shell-collapse-btn { display: none; }
  .is-collapsed .shell-nav-item .lbl,
  .is-collapsed .shell-nav-label,
  .is-collapsed .shell-brand .mark .word { display: revert; }
  .shell-main-inner { padding: 20px 18px 56px; }
  .shell-search { max-width: none; }
  .shell-account .who { display: none; }
  .shell-acct-menu { right: 14px; }
}

@media (max-width: 560px) {
  .shell-search .kbd { display: none; }
}