/* ══════════════════════════════════════════════════════════════
   FleetFixer Fix - Operations console shell
   Corporate, data-forward layout on the Pine & Citrus tokens.
   Structure: dark pine sidebar (grouped nav), slim global topbar
   (search, theme, profile), page header (title + toolbar), then
   the panel canvas. All JS hooks (ids, .nav-item, .commandbar,
   .rail, .open, .search-open) are unchanged.
   ══════════════════════════════════════════════════════════════ */

/* ── Confirm button override ── */
#confirmYes.btn-primary{ background: var(--danger); }
#confirmYes.btn-primary:hover{ filter: brightness(.95); }

/* ── Modal entrance animation ── */
.modal{
  transform:scale(.96);
  opacity:0;
  animation:modalIn .18s ease forwards;
}
@keyframes modalIn{
  to{ transform:scale(1); opacity:1; }
}

/* ══════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════ */
.app-shell{ --sidebar-w:264px; --topbar-h:64px; display:flex; min-height:100vh; min-height:100dvh; }
.app-shell.rail{ --sidebar-w:78px; }

body{ background:var(--bg); background-image:var(--backdrop); background-attachment:fixed; }

/* ── Sidebar: deep pine chrome ── */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg, var(--chrome-bg) 0%, color-mix(in srgb, var(--chrome-bg) 86%, #000) 100%);
  background-color:var(--chrome-bg);
  color:var(--chrome-text);
  border-right:1px solid var(--chrome-border);
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; height:100dvh;
  z-index:60; overflow:hidden;
  transition:width .22s var(--ease);
}

.sidebar-brand{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 18px 12px; min-height:60px;
}
.sidebar-logo{
  display:flex; align-items:center; gap:10px; min-width:0;
  text-decoration:none; color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:15.5px; letter-spacing:-.01em;
}
.sidebar-logo img{ height:28px; width:auto; border-radius:7px; flex-shrink:0; }
.sidebar-logo strong{ white-space:nowrap; overflow:hidden; }
.sidebar-logo .logo-app{
  font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--chrome-active-text); display:block; margin-top:1px;
}
.sidebar-close{ display:none; color:var(--chrome-text-muted); }
.sidebar-close:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ── Workspace identity card ── */
.workspace-card{
  margin:2px 12px 8px; padding:10px 12px;
  display:flex; align-items:center; gap:10px; min-width:0;
  background:rgba(255,255,255,.05);
  border:1px solid var(--chrome-border);
  border-radius:var(--radius);
}
.workspace-icon{
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  display:grid; place-items:center;
  background:var(--brand-gradient);
  color:#fff; font-size:13px; font-weight:800; font-family:var(--font-display);
}
.workspace-logo{
  display:block; width:calc(100% - 24px); height:96px; min-width:0;
  margin:10px 12px 16px; flex-shrink:0;
  object-fit:contain; padding:0; background:none; border:0; border-radius:0;
}
.workspace-card[hidden], .workspace-logo[hidden]{ display:none !important; }
.workspace-meta{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.workspace-name{
  font-size:13px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.workspace-app{
  font-size:10.5px; font-weight:600; letter-spacing:.4px;
  color:var(--chrome-text-muted); white-space:nowrap;
}

/* ── Grouped navigation ── */
.sidebar-nav{
  display:flex; flex-direction:column; gap:2px;
  padding:6px 12px 12px; flex:1; overflow-y:auto; overflow-x:hidden;
}
.nav-group{ display:flex; flex-direction:column; gap:1px; }
.nav-group + .nav-group{ margin-top:10px; }
.nav-group-label{
  font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--chrome-text-muted); opacity:.75;
  padding:0 12px 4px; white-space:nowrap;
}
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:100%; padding:7px 12px;
  background:none; border:1px solid transparent; cursor:pointer;
  border-radius:9px; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--chrome-text-muted); text-align:left; white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item::before{
  content:""; position:absolute; left:-12px; top:50%; translate:0 -50%;
  width:3px; height:0; border-radius:0 3px 3px 0;
  background:var(--chrome-active-text);
  transition:height .16s var(--ease);
}
.nav-item i{ width:20px; text-align:center; font-size:14.5px; color:inherit; flex-shrink:0; }
.nav-item span{ overflow:hidden; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:var(--chrome-active-bg); color:#fff; }
.nav-item.active::before{ height:60%; }
.nav-item.active i{ color:var(--chrome-active-text); }
.nav-item:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--chrome-active-text); }

.sidebar-footer{
  padding:12px; border-top:1px solid var(--chrome-border);
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}
.sidebar-footer .tier-badge{
  margin-left:0; background:rgba(255,255,255,.06); border-color:var(--chrome-border);
  color:var(--chrome-text); justify-content:center;
}
.sidebar-collapse{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--chrome-text-muted); padding:9px 12px; margin:0 12px 4px; width:calc(100% - 24px);
  border-radius:10px;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sidebar-collapse:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-collapse i{ width:20px; text-align:center; transition:transform .22s var(--ease); }

.sidebar-scrim{ display:none; }

/* ── Icon-rail (collapsed) mode ── */
.app-shell.rail .sidebar-logo strong,
.app-shell.rail .nav-item span,
.app-shell.rail .nav-group-label,
.app-shell.rail .workspace-meta,
.app-shell.rail .sidebar-collapse span,
.app-shell.rail .sidebar-footer .tier-badge span{ display:none; }
.app-shell.rail .sidebar-brand{ justify-content:center; padding-left:0; padding-right:0; }
.app-shell.rail .workspace-card{ justify-content:center; padding:8px; margin-left:12px; margin-right:12px; }
.app-shell.rail .nav-item{ justify-content:center; padding-left:0; padding-right:0; }
.app-shell.rail .nav-group + .nav-group{ margin-top:8px; padding-top:8px; border-top:1px solid var(--chrome-border); }
.app-shell.rail .sidebar-collapse{ justify-content:center; }
.app-shell.rail .sidebar-collapse i{ transform:rotate(180deg); }
.app-shell.rail .sidebar-footer .tier-badge{ padding:6px 0; }

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

/* ── Global topbar: frosted, slim, utility-only ── */
.app-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  height:var(--topbar-h); padding:0 28px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--stroke);
}
.topbar-crumb{
  display:flex; flex-direction:column; gap:1px; white-space:nowrap;
}
.topbar-crumb .crumb-product{
  font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--accent);
}
.topbar-crumb .crumb-context{ font-size:12.5px; font-weight:600; color:var(--muted); }

/* legacy hook kept for JS (title now lives in the page head) */
.topbar-title{ display:none; }

.topbar-search{
  flex:1; display:flex; align-items:center; gap:8px;
  max-width:440px; margin-left:auto; position:relative;
}
.topbar-search .app-search{
  width:100%; height:38px; padding:0 38px 0 16px;
  background:var(--panel); border:1px solid var(--stroke);
  font-size:13px;
}
.topbar-search .search-kbd{
  position:absolute; right:10px; top:50%; translate:0 -50%;
  pointer-events:none;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--muted-2); background:var(--surface-2);
  border:1px solid var(--stroke); border-radius:5px;
  padding:1px 6px; line-height:1.5;
}
.topbar-search .app-search:focus ~ .search-kbd{ opacity:0; }

.topbar-right{ display:flex; align-items:center; gap:10px; position:relative; }
.menu-toggle{ display:none; }

/* ── Theme toggle (mounted by ff-theme.js into [data-ff-theme-toggle]) ── */
.ff-theme-toggle{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--stroke); cursor:pointer;
  color:var(--muted);
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ff-theme-toggle:hover{ background:var(--surface-2); color:var(--text); }
.ff-theme-toggle svg{ display:block; }
:root[data-theme="dark"] .ff-theme-toggle .ff-ico-moon{ display:none; }
:root:not([data-theme="dark"]) .ff-theme-toggle .ff-ico-sun{ display:none; }

/* ══════════════════════════════════════════════
   PAGE HEADER: title block + per-tab toolbar
   ══════════════════════════════════════════════ */
.main-col > .app-breadcrumbs{
  width:100%;max-width:1520px;margin:0 auto;padding:18px 32px 0;
}
.main-col > .app-breadcrumbs + .page-head{padding-top:12px}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  padding:26px 32px 0; max-width:1520px; width:100%; margin:0 auto;
}
.page-head-text{ min-width:0; }
.page-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--accent);
}
.page-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent-light);
}
.page-title{
  margin:4px 0 0; font-family:var(--font-display);
  font-size:clamp(21px, 2.4vw, 27px); font-weight:800; letter-spacing:-.02em;
  color:var(--text-strong); line-height:1.1;
}
.page-sub{ margin:5px 0 0; font-size:13px; color:var(--muted); line-height:1.5; max-width:60ch; }

/* The per-tab command bars live inside .page-actions; JS toggles
   each #xxxCommands between display:none and display:flex. */
.page-actions{ flex-shrink:0; }
.main-col .commandbar{
  background:transparent; border-bottom:none;
  padding:0; min-height:0;
  display:flex; align-items:center; gap:8px;
}
.command-group{ display:flex; align-items:center; gap:8px; }
.command-spacer{ flex:0 0 4px; }

.main-col .command-btn{
  height:38px; padding:0 14px; gap:8px;
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:10px;
  font-size:13px; font-weight:600; color:var(--text);
  box-shadow:var(--shadow-xs);
}
.main-col .command-btn i{ font-size:13px; color:var(--muted); }
.main-col .command-btn:hover{
  background:var(--panel); border-color:var(--stroke-strong);
  box-shadow:var(--shadow-sm); color:var(--text);
}
.main-col .command-btn.primary{
  background:var(--accent); border-color:transparent;
  border-radius:var(--radius-pill);
  color:var(--accent-contrast); font-weight:700; padding:0 18px;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.main-col .command-btn.primary i{ color:var(--accent-contrast); }
.main-col .command-btn.primary:hover{
  background:var(--accent-strong); filter:none;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

/* ── Panel canvas ── */
#panelContainer{
  flex:1; width:100%; max-width:1520px; margin:0 auto;
  padding:18px 32px 56px;
}
#panelContainer .table-area{ padding:0; }

/* ── Modals centre in the content column ── */
.app-shell .modal-wrap{
  left:var(--sidebar-w, 0);
  z-index:80;
  transition:left .22s var(--ease);
}