/* ════════════════════════════════════════════════════════════════════
   CFS PRO — LAYOUT
   App shell: topbar, sidebar, main grid, modals, drawers, palette.
   ════════════════════════════════════════════════════════════════════ */

/* ── ROOT SHELL ────────────────────────────────────────────────── */
#app-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  isolation: isolate;
}

#app-shell::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--grad-hero);
  z-index: -1;
  pointer-events: none;
}

#app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h) - var(--topbar-h-sub));
}
[data-sidebar="collapsed"] #app-body {
  grid-template-columns: var(--sidebar-w-min) 1fr;
}
@media (max-width: 768px) {
  #app-body { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   TOPBAR — sticky, glass, multi-row
   ════════════════════════════════════════════════════════════════════ */
#topbar {
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-bd);
  box-shadow: var(--sh-1);
}

.tb-row {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  max-width: var(--content-max);
  margin: 0 auto;
}

.tb-row-2 {
  height: var(--topbar-h-sub);
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  max-width: var(--content-max);
  margin: 0 auto;
  font-size: var(--fs-12);
  color: var(--text-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tb-row-2::-webkit-scrollbar { display: none; }

/* Brand mark */
.tb-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  padding-inline-end: var(--s-3);
  border-inline-end: 1px solid var(--divider);
  height: 100%;
}
.tb-brand-mark {
  width: 32px; height: 32px;
  border-radius: var(--r-3);
  background: var(--grad-ink);
  display: grid;
  place-items: center;
  color: var(--accent-300);
  position: relative;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.06);
  flex-shrink: 0;
}
.tb-brand-mark::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--grad-gold);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--d-3) var(--ease-out);
}
.tb-brand:hover .tb-brand-mark::after { opacity: .6; }
.tb-brand-mark svg { width: 18px; height: 18px; }
.tb-brand-text { line-height: 1.1; }
.tb-brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-sem);
  letter-spacing: var(--tr-snug);
  color: var(--text-1);
}
.tb-brand-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--text-3);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* Batch input pill */
.tb-batch {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
  transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.tb-batch:focus-within {
  border-color: var(--accent-400);
  box-shadow: var(--sh-gold-glow);
}
.tb-batch-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.tb-batch input {
  width: 64px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  font-weight: var(--fw-sem);
  color: var(--text-1);
  background: transparent;
}
.tb-batch-unit {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-2);
}

/* Breadcrumb */
.tb-crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  white-space: nowrap;
}
.tb-crumb b { color: var(--text-1); font-weight: var(--fw-sem); }
.tb-crumb .sep { opacity: .5; }
.tb-crumb svg { width: 12px; height: 12px; opacity: .5; }

/* Actions cluster */
.tb-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
}

/* Profile chip */
.tb-profile {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 4px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--d-2) var(--ease-out);
  flex-shrink: 0;
}
.tb-profile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-2);
}
.tb-profile-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  gap: 2px;
}
.tb-profile-name {
  font-size: var(--fs-12);
  font-weight: var(--fw-sem);
  color: var(--text-1);
  letter-spacing: -0.005em;
  line-height: 1;
}
.tb-profile-role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1;
}
.tb-profile-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink-950);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px rgba(14,14,12,.1);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — right side (RTL), collapsible
   ════════════════════════════════════════════════════════════════════ */
#sidebar {
  grid-row: 1 / -1;
  position: sticky;
  top: calc(var(--topbar-h) + var(--topbar-h-sub));
  align-self: start;
  height: calc(100vh - var(--topbar-h) - var(--topbar-h-sub));
  width: 100%;
  background: var(--surface-2);
  border-inline-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--d-3) var(--ease-out);
  order: 2;  /* right side in RTL grid */
}

.sb-section {
  padding: var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.sb-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-sem);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
  padding: var(--s-2) var(--s-3);
}
[data-sidebar="collapsed"] .sb-label { opacity: 0; visibility: hidden; height: 0; padding: 0; }

.sb-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-3);
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: all var(--d-2) var(--ease-out);
  white-space: nowrap;
}
.sb-item:hover { background: var(--surface-3); color: var(--text-1); }
.sb-item.active {
  background: var(--ink-950);
  color: var(--text-inv);
  box-shadow: var(--sh-2);
}
[data-theme="dark"] .sb-item.active { background: var(--accent-500); color: var(--ink-950); }
.sb-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent-500);
  border-radius: var(--r-full);
}
.sb-item-ic {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: currentColor;
}
.sb-item-ic svg { width: 18px; height: 18px; stroke-width: 1.5; }
.sb-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--d-2) var(--ease-out);
}
[data-sidebar="collapsed"] .sb-item-label,
[data-sidebar="collapsed"] .sb-item-badge { opacity: 0; visibility: hidden; }
[data-sidebar="collapsed"] .sb-item { justify-content: center; padding: 10px 0; }

.sb-item-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
}

.sb-footer {
  margin-top: auto;
  padding: var(--s-3);
  border-top: 1px solid var(--border);
}

.sb-toggle {
  width: 100%;
  padding: 8px;
  border-radius: var(--r-3);
  background: transparent;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: all var(--d-2) var(--ease-out);
}
.sb-toggle:hover { background: var(--surface-3); color: var(--text-1); }
.sb-toggle svg { width: 16px; height: 16px; transition: transform var(--d-3) var(--ease-out); }
[data-sidebar="collapsed"] .sb-toggle svg { transform: rotate(180deg); }
[data-sidebar="collapsed"] .sb-toggle-text { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MAIN CONTENT GRID
   ════════════════════════════════════════════════════════════════════ */
#main {
  order: 1;
  min-width: 0;
  padding: var(--s-7) var(--gutter) var(--s-9);
  max-width: 100%;
}

.main-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* 12-col grid for dashboards */
.g-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4);
}
.g-col-1  { grid-column: span 1; }
.g-col-2  { grid-column: span 2; }
.g-col-3  { grid-column: span 3; }
.g-col-4  { grid-column: span 4; }
.g-col-5  { grid-column: span 5; }
.g-col-6  { grid-column: span 6; }
.g-col-7  { grid-column: span 7; }
.g-col-8  { grid-column: span 8; }
.g-col-9  { grid-column: span 9; }
.g-col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .g-col-3, .g-col-4 { grid-column: span 6; }
  .g-col-5, .g-col-7, .g-col-8, .g-col-9 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .g-col-2, .g-col-3, .g-col-4, .g-col-6 { grid-column: span 12; }
  .g-12 { gap: var(--s-3); }
  #main { padding: var(--s-5) var(--s-3) var(--s-7); }
}

/* Page header */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
  margin-bottom: var(--s-2);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--text-1);
}
.page-sub {
  font-size: var(--fs-13);
  color: var(--text-2);
  margin-top: var(--s-2);
  max-width: 60ch;
}

/* ════════════════════════════════════════════════════════════════════
   MODALS / OVERLAYS / DRAWERS
   ════════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,12,.42);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  animation: fadeIn var(--d-3) var(--ease-out);
}
[data-theme="dark"] .overlay { background: rgba(0,0,0,.6); }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-6);
  box-shadow: var(--sh-5);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleIn var(--d-3) var(--ease-spring);
  z-index: var(--z-modal);
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }

.modal-head {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-sem);
  letter-spacing: var(--tr-snug);
  color: var(--text-1);
}
.modal-sub {
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-top: 2px;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-3);
  display: grid; place-items: center;
  color: var(--text-3);
  transition: all var(--d-2) var(--ease-out);
}
.modal-close:hover { background: var(--surface-3); color: var(--text-1); }
.modal-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
.modal-foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  background: var(--surface-2);
}

/* Drawer (slides from inline-start in RTL = right) */
.drawer {
  position: fixed;
  top: 0; bottom: 0;
  inset-inline-end: 0;
  width: min(440px, 100vw);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--sh-5);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  animation: slideInEnd var(--d-4) var(--ease-out);
}
.drawer-head { padding: var(--s-5); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.drawer-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
.drawer-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: var(--s-2); }

/* ════════════════════════════════════════════════════════════════════
   COMMAND PALETTE (Cmd+K)
   ════════════════════════════════════════════════════════════════════ */
.palette {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-6);
  box-shadow: var(--sh-5);
  z-index: var(--z-palette);
  overflow: hidden;
  animation: scaleIn var(--d-3) var(--ease-spring);
}
.palette-input {
  width: 100%;
  padding: var(--s-5) var(--s-5);
  font-size: var(--fs-15);
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
}
.palette-list { max-height: 50vh; overflow-y: auto; padding: var(--s-2); }
.palette-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-3);
  font-size: var(--fs-13);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--d-1) var(--ease-out);
}
.palette-item:hover, .palette-item[aria-selected="true"] { background: var(--surface-3); }
.palette-item-ic { width: 18px; height: 18px; color: var(--text-3); }
.palette-item-kbd { margin-inline-start: auto; }

/* ════════════════════════════════════════════════════════════════════
   TOAST CONTAINER
   ════════════════════════════════════════════════════════════════════ */
#toasts {
  position: fixed;
  bottom: var(--s-5);
  inset-inline-start: var(--s-5);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: 360px;
}
#toasts > * { pointer-events: auto; }

/* ════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ════════════════════════════════════════════════════════════════════ */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.crumbs a, .crumbs span { white-space: nowrap; }
.crumbs > * + *::before {
  content: "/";
  margin-inline-end: var(--s-2);
  color: var(--border-strong);
}
.crumbs .current { color: var(--text-1); font-weight: var(--fw-sem); }

/* ════════════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUT BADGE
   ════════════════════════════════════════════════════════════════════ */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-sem);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: inset 0 -1px 0 var(--border-strong);
  line-height: 1;
}