/* GHB unified shell — design system ported from the CRM. */

:root {
  --bg: #f6f7f5;
  --card: #fff;
  --ink: #1a2b1a;
  --muted: #6a7d6a;
  --accent: #2f6b3a;
  --accent2: #a8c99a;
  --border: #e3e7e0;
  --warn: #b87a18;
  --danger: #b43a3a;
  --radius: 10px;
  --sidebar-w: 220px;
  --topbar-h: 76px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: "Avenir Next","Avenir","Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 14px; line-height: 1.4; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- LAYOUT ---------- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
  transition: grid-template-columns 0.2s ease; }
/* A grid item's min-width defaults to its content's min-content width, so one
   wide table (the menu editor's 14-column rows) used to push the content
   column — and the whole page — past the viewport, leaving the topbar short
   of the window edge (Ben, 2026-10-08). The column now stays at the viewport;
   wide content scrolls inside its own box instead. */
.layout > * { min-width: 0; }

/* Collapsed sidebar — driven by the topbar hamburger toggle (app.js). */
.layout.nav-hidden { grid-template-columns: 0 1fr; }
.layout.nav-hidden > aside.nav {
  width: 0; min-width: 0; padding-left: 0; padding-right: 0;
  border-right: 0; overflow: hidden; pointer-events: none;
}

/* ---------- SIDEBAR ---------- */
aside.nav {
  background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 0;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
aside.nav nav { display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 0 12px; }
aside.nav nav a {
  background: transparent; border: 0; text-align: left;
  padding: 9px 12px; border-radius: 7px; font: inherit; color: var(--ink);
  font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
aside.nav nav a:hover { background: #f0f1ed; text-decoration: none; }
aside.nav nav a.active { background: rgba(47, 107, 58, 0.10); color: var(--accent); font-weight: 600; }
aside.nav nav a .icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; color: var(--muted); }
aside.nav nav a .icon svg { width: 100%; height: 100%; }
aside.nav nav a.active .icon { color: var(--accent); }

/* Top-level (module header) vs sub (sub-module) styling */
aside.nav nav a.top { margin-top: 6px; font-weight: 600; }
aside.nav nav a.top:first-child { margin-top: 0; }
/* Module groups: header row (link + optional caret) over its sub-module links.
   The caret only renders for users with 4+ modules (see app.js); clicking it
   folds the subs away and the choice is remembered in localStorage. */
aside.nav nav .nav-group { display: flex; flex-direction: column; gap: 2px; }
/* The header row is ONE bubble: the hover / active tint sits on the row, and
   the link + caret inside it are transparent. Hovering the caret lights just
   the caret (a darker pip inside the bubble) so it reads as "this opens a
   drop-down"; hovering/clicking the label is the module home. */
aside.nav nav .nav-group-head { display: flex; align-items: stretch; gap: 0; margin-top: 6px; border-radius: 7px; }
aside.nav nav .nav-group-head:hover { background: #f0f1ed; }
aside.nav nav .nav-group-head.active { background: rgba(47, 107, 58, 0.10); }
aside.nav nav .nav-group-head a.top { margin-top: 0; flex: 1; min-width: 0; border-radius: 7px 0 0 7px; }
aside.nav nav .nav-group-head a.top:hover,
aside.nav nav .nav-group-head a.top.active { background: transparent; }
aside.nav nav .nav-group-head a.top .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside.nav nav .nav-subs { display: flex; flex-direction: column; gap: 2px; }
aside.nav nav .nav-group.collapsed .nav-subs { display: none; }
aside.nav nav .nav-caret {
  flex-shrink: 0; width: 24px; margin: 4px 4px 4px 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
aside.nav nav .nav-caret:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink); }
aside.nav nav .nav-group-head.active .nav-caret { color: var(--accent); }
aside.nav nav .nav-group-head.active .nav-caret:hover { background: rgba(47, 107, 58, 0.16); }
aside.nav nav .nav-caret svg { transition: transform 0.15s ease-out; }
aside.nav nav .nav-group.collapsed .nav-caret svg { transform: rotate(-90deg); }
aside.nav nav a.sub {
  padding: 5px 12px 5px 26px; font-size: 12.5px; font-weight: 500;
  color: var(--ink); border-radius: 6px; gap: 9px;
}
/* Smaller, muted icons mark sub-modules as children of their parent module. */
aside.nav nav a.sub .icon { width: 15px; height: 15px; }
aside.nav nav a.sub:hover { background: #f0f1ed; }
aside.nav nav a.sub.active { background: rgba(47, 107, 58, 0.10); color: var(--accent); font-weight: 600; }
aside.nav .logout {
  padding: 12px 20px 4px; border-top: 1px solid var(--border); margin-top: 8px;
  font-size: 12px; color: var(--muted);
}
aside.nav .logout a { color: var(--muted); }

/* ---------- "VIEW AS USER" (impersonation) BANNER ---------- */
/* Sticky amber bar pinned above the topbar while an admin is viewing as another
   user. The `.impersonating` body class nudges the sticky topbar + sidebar down
   by the banner height so nothing overlaps. */
.impersonation-banner {
  position: sticky; top: 0; z-index: 100; box-sizing: border-box;
  height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #8a3b00; color: #fff; font-size: 13px; font-weight: 600;
}
.impersonation-banner .imp-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impersonation-banner .imp-exit {
  margin-left: auto; flex-shrink: 0; cursor: pointer; font: inherit; font-weight: 600;
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 6px; padding: 4px 12px;
}
.impersonation-banner .imp-exit:hover { background: rgba(255,255,255,0.30); }
body.impersonating .topbar { top: 36px; }
body.impersonating aside.nav { top: calc(var(--topbar-h) + 36px); }

/* Onboarding "add your bank info" banner — same fixed-bar pattern as view-as. */
.dd-required-banner {
  position: sticky; top: 0; z-index: 100; box-sizing: border-box;
  min-height: 36px; display: flex; align-items: center; gap: 12px; padding: 6px 16px;
  background: #1f7a4d; color: #fff; font-size: 13px; font-weight: 600;
}
.dd-required-banner .dd-text { flex: 1 1 auto; }
.dd-required-banner .dd-cta {
  flex-shrink: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none;
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 6px; padding: 4px 12px;
}
.dd-required-banner .dd-cta:hover { background: rgba(255,255,255,0.30); }
.dd-required-banner .dd-dismiss {
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: 15px; line-height: 1;
  background: transparent; color: #fff; border: 0; padding: 4px 6px; opacity: 0.85;
}
.dd-required-banner .dd-dismiss:hover { opacity: 1; }
body.dd-required .topbar { top: 36px; }
body.dd-required aside.nav { top: calc(var(--topbar-h) + 36px); }
/* Onboarding gate: same bar, no dismiss, amber so it reads as a lock not a nag. */
.dd-required-banner.hold { background: #8a5a00; }

/* ---------- UNIFIED TOP BAR ---------- */
/* One full-width bar across the whole app. Sticky to the top so it stays put
   on scroll, and lives outside .layout so it stays put when the sidebar
   collapses. Left identity panel spans the sidebar column width. */
.topbar {
  position: sticky; top: 0; left: 0; z-index: 50;   /* left: 0 keeps it over the viewport even if a page does scroll sideways */
  display: flex; align-items: center; height: var(--topbar-h);
  background: #fff; border-bottom: 1px solid var(--border);
}
.topbar .topbar-who {
  width: var(--sidebar-w); flex-shrink: 0; height: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; border-right: 1px solid var(--border);
}
.topbar .topbar-who .who-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: #f0efea center/cover no-repeat; border: 1px solid var(--border);
}
.topbar .topbar-who .who-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--muted);
}
.topbar .topbar-who .who-text { min-width: 0; }
.topbar .topbar-who .name { font-weight: 700; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .topbar-who .meta { font-size: 11px; color: var(--muted); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.topbar .topbar-who .meta .pill {
  background: var(--accent); color: #fff; padding: 1px 7px; border-radius: 999px;
  font-size: 9px;
}
.topbar .module-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  margin-left: 16px; min-width: 0; }
.topbar .module-title .sub { font-size: 11px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
/* Clip wrapper: keeps the topbar at its fixed height while the logo inside
   is scaled up. Cropping the logo's white padding makes the mark read ~2x
   larger without the white square overflowing into the content below. */
.topbar .logo-wrap { margin-left: auto; margin-right: 28px; flex-shrink: 0;
  height: var(--topbar-h); display: flex; align-items: center; overflow: hidden; }
.topbar img.logo { height: 104px; width: auto; display: block; }

/* Hamburger (3-line) toggle */
.nav-toggle {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0; margin-left: auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer;
}
.nav-toggle:hover { background: #f0f1ed; }
.nav-toggle span {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--accent); transition: transform 0.2s ease, opacity 0.2s ease;
}

main.content { padding: 22px 28px; max-width: none; margin: 0; }

/* ---------- HEADINGS / TEXT ---------- */
h1 { font-size: 22px; margin: 0 0 12px; color: var(--ink); }
h2 { font-size: 16px; margin: 22px 0 8px; color: var(--ink); }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- CARDS / PANELS ---------- */
.card, .panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.panel h2, .card h3 {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
.panel h2 { font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px;
  background: #f0f1ed; color: var(--muted); margin-left: 6px; vertical-align: middle; font-weight: 600; }

.placeholder {
  background: rgba(184, 122, 24, 0.08); border: 1px solid rgba(184, 122, 24, 0.25);
  border-radius: var(--radius); padding: 16px; color: var(--ink);
}

/* ---------- TILE GRID (module home) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tile {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  text-decoration: none; color: inherit;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,107,58,0.10);
  border-color: var(--accent); text-decoration: none; }
.tile h3 { margin: 6px 0 6px; font-size: 15px; color: var(--ink);
  text-transform: none; letter-spacing: 0; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 12px; }

/* ---------- TABLES ---------- */
table { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 13px; }
table th, table td { padding: 8px 12px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top; }
table th { background: #f6f7f5; font-weight: 600; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; }
table tr:last-child td { border-bottom: 0; }
table tr:hover td { background: #f6f7f5; }

/* ---------- FORMS / BUTTONS ---------- */
button, .btn {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--border);
  background: var(--card); border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink);
}
button:hover, .btn:hover { background: #f0f1ed; }
button.primary, .btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.danger, .btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

.error { color: var(--danger); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; margin: 0; }
fieldset legend { font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; padding: 0 6px; }

/* ---------- MOBILE ---------- */
@media (max-width: 800px) {
  :root { --topbar-h: 60px; }
  /* Every module locks to the phone's width — the page itself never pans or
     zooms sideways. Genuinely wide views (CRM calendar, MRP kanban, HR org
     chart, data tables) each carry their own overflow-x:auto wrapper, so they
     still scroll INSIDE the screen rather than widening the whole document.
     The clip lives on .layout/main.content — NOT html/body: any overflow on
     body makes iOS Safari treat it as the scroll container, which unpins the
     sticky topbar (it scrolls away instead of staying at the top). */
  .layout { max-width: 100vw; overflow-x: clip; }
  main.content { max-width: 100vw; overflow-x: clip; }
  .layout { grid-template-columns: 1fr; }
  /* The nav is a fixed full-screen drawer under the topbar, not an in-flow
     block: an in-flow nav pushes the page down when the hamburger opens it,
     which reads as the page "jumping to another section" mid-scroll. */
  aside.nav {
    position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    height: auto; z-index: 49; padding: 12px 0;
    border-right: 0; overflow-y: auto;
    /* The drawer floats over the page (position:fixed), so a touch scroll that
       the nav can't consume — because it's shorter than the screen, or already
       at its top/bottom — used to chain through to the page behind it, moving
       the module instead of the menu. `contain` keeps the gesture in the
       drawer (it already spans top:topbar→bottom:0, so it's the scroll surface
       that should catch the touch). */
    overscroll-behavior: contain;
  }
  aside.nav nav a { padding: 10px 12px; font-size: 14px; }
  aside.nav nav .nav-caret { width: 40px; }
  .layout.nav-hidden { grid-template-columns: 1fr; }
  .layout.nav-hidden > aside.nav { display: none; }
  /* Bar shrinks to just hamburger + title + logo on narrow screens. */
  .topbar .topbar-who { width: auto; padding: 0 12px; border-right: 0; }
  .topbar .topbar-who .who-text { display: none; }
  .topbar .topbar-who .who-avatar { display: none; }
  .nav-toggle { margin-left: 0; }
  .topbar .module-title { font-size: 16px; margin-left: 10px; }
  .topbar .module-title .sub { display: none; }
  /* Swipe-hint chevron pinned to the open drawer's right edge (the element is
     only created on mobile in app.js). position:fixed resolves against the
     drawer once a swipe applies a transform, so it rides along mid-gesture. */
  aside.nav .nav-swipe-hint {
    position: fixed; right: 10px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 56px; padding: 0; border-radius: 10px;
    border: 1px solid var(--border); background: #fff; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); cursor: pointer; z-index: 50;
  }
  .topbar .logo-wrap { margin-right: 14px; }
  .topbar img.logo { height: 80px; }
  main.content { padding: 14px 12px; }
  /* Wide data tables (MRP, Finance, HR, CRM lists) pan sideways instead of
     clipping their right-hand columns off a phone screen. */
  main.content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* iOS zooms the whole page when focusing any input styled under 16px. */
  main.content input, main.content select, main.content textarea { font-size: 16px; }
}

/* Brief green flash when a "Send to Distributor" qty saves live (inventory). */
@keyframes saved-flash-kf { from { background:#d6f5e0; border-color:#1f7a3d; } to { background:#fff; } }
input.saved-flash { animation: saved-flash-kf 0.6s ease-out; }

/* ---------- SORTABLE COLUMNS ----------
   Wired app-wide by /table-sort.js, which marks the headers it has taken over.
   Matches the ▲/▼ convention the MRP and CRM data tables already use, plus a
   dim ⇅ on hover so a column reads as clickable before you click it. The 10px
   inline-block reserves the glyph's space so the header doesn't shift. */
table th.gs-sortable { cursor: pointer; user-select: none; -webkit-user-select: none; }
table th.gs-sortable::after {
  content: ''; display: inline-block; width: 10px; margin-left: 4px;
  font-size: 0.85em; line-height: 1; color: var(--muted, #6a7d6a); opacity: 0.5;
}
table th.gs-sortable:hover::after { content: '⇅'; }
table th.gs-sortable[aria-sort]::after { opacity: 1; color: var(--accent, #2f6b3a); }
table th.gs-sortable[aria-sort="ascending"]::after { content: '▲'; }
table th.gs-sortable[aria-sort="descending"]::after { content: '▼'; }
table th.gs-sortable:focus-visible { outline: 2px solid var(--accent, #2f6b3a); outline-offset: -2px; }