/* ============================================================================
   BAJ Farm OS — Executive Sidebar Navigation             sidebar.css · v1.0.0
   Designed & Developed by: Babatunde Adedeji Adelaja · 2026
   ----------------------------------------------------------------------------
   A professional, collapsible left navigation rail (SAP Fiori / Linear / Stripe
   feel) that REPLACES the module-card grid as the primary navigation. Fully
   scoped under .baj-sb; self-contained colours (no global-theme inheritance);
   every text/background pair passes WCAG AA on the deep-green rail. Uses the
   --ds-* tokens (design-system.css) with hard fallbacks.
   ============================================================================ */

/* ---- EXECUTIVE SHELL SKELETON (v38.5) ----------------------------------
   Full-width top navigation · sidebar BELOW it · content beside the sidebar:
     ┌──────────── top nav (full browser width) ───────────┐
     │ sidebar │  main content (banner · description · …)  │
   The rail no longer pushes the nav aside; it starts under it
   (top: var(--nh)). On the immersive dashboard the nav is hidden
   (exec-dashboard.css), so the rail extends to the top there.
   Pure document flow — no negative margins, no transforms, no
   absolute-position hacks. ---- */
body.baj-sb-on { --sbw: 254px; }
body.baj-sb-on.baj-sb-collapsed { --sbw: 68px; }
/* Managed Farm (body.mf) gets the sidebar via the same sidebar.js/apply()
   path as BAJ admin/staff — same --sbw variable, same reflow rule below.
   Re-declared here (not just relying on baj-sb-on being co-present) so the
   shift is robust even if the classes are ever set independently. */
body.mf { --sbw: 254px; }
body.mf.baj-sb-collapsed { --sbw: 68px; }
/* (the top nav keeps its own full-width left:0 — no override here) */
body.baj-sb-on > section.pg, body.mf > section.pg { margin-left: var(--sbw, 254px); transition: margin-left .22s cubic-bezier(.4,0,.2,1); }

/* ============================ THE RAIL ============================ */
.baj-sb {
  position: fixed; top: var(--nh, 66px); left: 0; bottom: 0; width: var(--sbw, 254px); z-index: 99;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0d4835 0%, #0a3b2c 46%, #082f24 100%);
  border-right: 1px solid rgba(212,164,55,.28);
  box-shadow: 4px 0 24px -14px rgba(4,28,20,.6);
  font-family: var(--ds-font);
  color: var(--ds-on-dark, #f5f8f5);
  transition: width .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

/* The rail always starts below the full-width chrome actually on screen:
   operators (adm/usr/gst) have a 36px role strip above the 66px nav;
   the immersive dashboard hides the nav but keeps the strip;
   managed-farm (mf) has no top nav at all — only the 36px strip, in every
   view including its dashboard — so its rail always starts at 36px, never
   0 (0 pushed the box's top under the strip, clipping its own header and
   overstating its height by 36px, which is what squeezed the footer). */
body.usr .baj-sb, body.adm .baj-sb, body.gst .baj-sb { top: calc(var(--nh, 66px) + 36px); }
body.mf .baj-sb { top: 36px; }
body.baj-on-dash .baj-sb { top: 36px; }
body.mf.baj-on-dash .baj-sb { top: 36px; }

/* brand / toggle */
.sb-top { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.sb-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(212,164,55,.16); border: 1px solid rgba(212,164,55,.4); color: var(--ds-gold-soft, #dcc78f); }
.sb-brand { display: flex; flex-direction: column; min-width: 0; }
.sb-brand-t { font-family: var(--ds-font-display, Georgia, serif); font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.1; white-space: nowrap; }
.sb-brand-s { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-on-dark-3, #a9c4b7); white-space: nowrap; }
.sb-toggle { flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ds-on-dark-2, #cfe0d6); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--ds-t); }
.sb-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }

/* nav scroll area */
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; }
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }

.sb-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ds-on-dark-3, #a9c4b7); padding: 14px 12px 6px; }

/* top-level item (Dashboard / Workspace) */
.sb-item, .sb-head {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0; border: none; border-radius: 10px; background: transparent;
  color: var(--ds-on-dark, #f5f8f5); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-align: left; position: relative; transition: background var(--ds-t), color var(--ds-t);
}
.sb-item:hover, .sb-head:hover { background: rgba(255,255,255,.07); }
.sb-ic { flex: none; width: 24px; text-align: center; font-size: 17px; line-height: 1; }
.sb-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-caret { flex: none; font-size: 10px; color: var(--ds-on-dark-3, #a9c4b7); transition: transform var(--ds-t); }

/* active state */
.sb-item.on, .sb-leaf.on { background: rgba(212,164,55,.16); color: #ffffff; }
.sb-item.on::before, .sb-leaf.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ds-gold, #D4A437); }

/* group */
.sb-group { margin: 1px 0; }
.sb-group.open .sb-caret { transform: rotate(90deg); }
.sb-sub { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.sb-group.open .sb-sub { max-height: 640px; }
.sb-leaf {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 46px; margin: 1px 0; border: none; border-radius: 9px; background: transparent;
  color: var(--ds-on-dark-2, #cfe0d6); font: inherit; font-size: 12.8px; font-weight: 600;
  cursor: pointer; text-align: left; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--ds-t), color var(--ds-t);
}
.sb-leaf:hover { background: rgba(255,255,255,.06); color: #ffffff; }
.sb-leaf-ic { flex: none; font-size: 13px; opacity: .9; }

/* footer */
.sb-foot { flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: 10px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.sb-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-gold, #D4A437); color: #0B4D3A; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.sb-user-meta { min-width: 0; }
.sb-user-n { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-r { font-size: 10.5px; font-weight: 700; color: var(--ds-on-dark-3, #a9c4b7); text-transform: capitalize; }
.sb-logout { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--ds-on-dark, #f5f8f5); font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: var(--ds-t); }
.sb-logout:hover { background: rgba(192,40,31,.9); border-color: transparent; color: #fff; }

/* ============================ COLLAPSED (icons only) ============================ */
body.baj-sb-collapsed .sb-brand,
body.baj-sb-collapsed .sb-label,
body.baj-sb-collapsed .sb-caret,
body.baj-sb-collapsed .sb-eyebrow,
body.baj-sb-collapsed .sb-user-meta,
body.baj-sb-collapsed .sb-leaf-tx,
body.baj-sb-collapsed .sb-logout { display: none; }
body.baj-sb-collapsed .sb-top { justify-content: center; padding: 0; }
body.baj-sb-collapsed .sb-toggle { margin: 0; }
body.baj-sb-collapsed .sb-item, body.baj-sb-collapsed .sb-head { justify-content: center; padding: 11px 0; }
body.baj-sb-collapsed .sb-sub { display: none; }       /* subs only in expanded mode */
body.baj-sb-collapsed .sb-foot { padding: 8px 6px; }
body.baj-sb-collapsed .sb-user { justify-content: center; padding: 4px; }
body.baj-sb-collapsed .sb-item.on::before, body.baj-sb-collapsed .sb-leaf.on::before { left: -6px; }

/* ============================ MOBILE (off-canvas) ============================ */
.sb-mtoggle { display: none; }
@media (max-width: 900px) {
  body.baj-sb-on, body.mf { --sbw: 0px; }
  body.baj-sb-on .nav, body.mf .nav { left: 0 !important; }
  body.baj-sb-on > section.pg, body.mf > section.pg { margin-left: 0; }
  .baj-sb { width: 254px; transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1); }
  body.baj-sb-collapsed .baj-sb { width: 254px; }
  .baj-sb.open { transform: none; box-shadow: 0 0 0 100vmax rgba(6,26,19,.5); }
  body.baj-sb-collapsed .sb-brand, body.baj-sb-collapsed .sb-label, body.baj-sb-collapsed .sb-caret,
  body.baj-sb-collapsed .sb-eyebrow, body.baj-sb-collapsed .sb-user-meta, body.baj-sb-collapsed .sb-logout { display: revert; }
  body.baj-sb-collapsed .sb-sub { display: block; }
  .sb-mtoggle {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 131;
    left: 12px; top: calc(var(--nh, 64px) + 8px); width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid rgba(212,164,55,.5); background: #0B4D3A; color: var(--ds-gold-soft, #dcc78f);
    font-size: 18px; cursor: pointer; box-shadow: var(--ds-sh-md);
  }
}

/* ════ ENTERPRISE POLISH (UI only — no logic) ═══════════════════════════ */
/* vertical rhythm: items breathe */
.sb-item, .sb-head { padding-top: 10px; padding-bottom: 10px; }
.sb-leaf { padding-top: 8px; padding-bottom: 8px; }
.sb-nav > .sb-group + .sb-group { margin-top: 2px; }

/* stronger active state: darker emerald, gold edge, bold white, lit icon */
.sb-item.on, .sb-leaf.on {
  background: linear-gradient(90deg, rgba(4,34,23,.92), rgba(6,61,42,.75)) !important;
  color: #ffffff !important; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(212,164,55,.28);
}
.sb-item.on .sb-ic, .sb-leaf.on .sb-leaf-ic { filter: brightness(1.25); }
.sb-item.on::before, .sb-leaf.on::before { top: 6px; bottom: 6px; width: 3px; }

/* submenu hierarchy: guide line, clear indent, smaller type */
.sb-group.open .sb-sub {
  margin-left: 21px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.13);   /* small left guide */
}
.sb-leaf { font-size: 12.3px; }
.sb-leaf .sb-leaf-tx { font-weight: 600; }
.sb-leaf.on .sb-leaf-tx { font-weight: 800; }

/* hover: quiet emerald elevation, smooth, white text — no flashes */
.sb-item, .sb-head, .sb-leaf { transition: background .18s ease, color .18s ease, transform .18s ease; }
.sb-item:hover, .sb-head:hover { background: rgba(6,61,42,.85); color: #ffffff; }
.sb-leaf:hover { background: rgba(6,61,42,.7); color: #ffffff; transform: translateX(2px); }

/* chevron: smooth 90° rotation easing (base rule handles the rotate) */
.sb-caret { transition: transform .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .sb-item, .sb-head, .sb-leaf, .sb-caret { transition: none !important; }
  .sb-leaf:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) { .baj-sb, .sb-sub, body.baj-sb-on .nav, body.baj-sb-on > section.pg, body.mf .nav, body.mf > section.pg { transition: none !important; } }