/* ============================================================
   Application stylesheet — SoftFleet "Daylight" (both Light & Dark).

   Loaded AFTER the active token file (softfleet-theme/tokens-light.css
   or tokens-dark.css). Because both token files publish the SAME
   variable names, this ONE bridge/shell serves both themes — only the
   token values differ (light vs dark). Two jobs, no hardcoded colours
   or sizes — every value resolves to a token (spec §1.4):

     1. BRIDGE  — map the theme's tokens onto the component variables
                  the shared component layer consumes.
     2. SHELL   — the Daylight chrome: top bar, collapsible sidebar,
                  content column. Token-driven, so it re-tints itself
                  for the dark theme with no per-theme rules.
   ============================================================ */

:root {
  /* --- bridge: theme tokens -> component variables ----------------------
     NOTE: --bg, --muted, --warn are NOT redefined here — the light token file already
     publishes them under exactly these names, and `--bg: var(--bg)` would be a
     self-reference (invalid at computed-value time, silently unsetting it). */
  --panel: var(--surface);
  --panel2: var(--brand-tint-hover);
  --border: var(--line);
  --border2: var(--line);
  --text: var(--ink);
  --muted2: var(--muted);
  --th-ink: var(--ink);          /* see components.css th{} — AA on the tinted header fill */
  --accent: var(--brand);
  --on-accent: var(--surface);
  --accent-hover: var(--brand-dark);
  --accent-soft: var(--brand-tint);
  --accent-soft2: var(--brand-tint-hover);

  --success: var(--ok);      --success-soft: var(--ok-bg);      --success-ink: var(--ok);
  --error: var(--danger);    --error-soft: var(--danger-bg);    --error-ink: var(--danger);
  --warn-soft: var(--warn-bg);  --warn-ink: var(--warn);
  --info: var(--brand);      --info-soft: var(--brand-tint);    --info-ink: var(--brand-dark);
  --flash-ok-line: var(--ok-line);
  --flash-err-line: var(--danger-line);
  --flash-warn-line: var(--line);
  --flash-info-line: var(--line);

  --radius: var(--radius-xl);
  --radius-sm: var(--radius-lg);
  --radius-xs: var(--radius-md);

  --shadow: none;                     /* Daylight uses borders, not elevation */
  --shadow-md: 0 8px 30px rgb(26 26 46 / 10%);

  /* Density / type — the roomier half of the two themes */
  --ui-font: var(--font-sans);
  --ui-mono: var(--font-mono);
  --ui-line: 1.5;
  --ui-text: var(--text-lg);
  --ui-panel-pad: var(--text-2xl);
  --ui-cell-pad-y: var(--text-md);
  --ui-cell-pad-x: var(--text-xl);
  --ui-btn-pad: 9px 15px;
  --ui-page-title: var(--text-2xl);
}

* { box-sizing: border-box }
body {
  margin: 0;
  font-family: var(--ui-font);
  font-size: var(--ui-text);
  line-height: var(--ui-line);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-hover); text-decoration: none }
a:hover { text-decoration: underline }
.mono { font-family: var(--ui-mono); font-variant-numeric: tabular-nums }

/* --- top bar: white, no navigation (it lives in the sidebar) ------------- */
.topbar {
  background: var(--surface);
  color: var(--ink);
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--text-xl);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: var(--text-md) }
.topbar-logo { width: auto; height: 26px; display: block }
.topbar-title { font-size: var(--text-xl); font-weight: 700; line-height: 1.15 }
.topbar-sub { font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted) }
.topbar-right { display: flex; align-items: center; gap: var(--text-sm) }
.env-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-tint); color: var(--brand-dark);
  padding: 4px 10px; border-radius: var(--radius-full) }
.env-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }
.term-pill { font-size: var(--text-sm); font-weight: 600; background: var(--brand-tint);
  color: var(--brand-dark); padding: 5px 12px; border-radius: var(--radius-full) }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700 }
.topbar .who { font-size: var(--text-md); color: var(--muted) }
.topbar-logout { background: transparent; border: 1px solid var(--line); color: var(--ink);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-lg); cursor: pointer }
.topbar-logout:hover { background: var(--brand-tint-hover) }

/* --- shell: sticky viewport-tall sidebar + main -------------------------- */
.cs-shell { display: flex; align-items: flex-start;
  min-height: calc(100vh - var(--topbar-h)) }
.cs-side {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: var(--surface); border-right: 1px solid var(--line);
  /* Sticky AND exactly viewport-tall with internal scroll: without this the collapse
     control drops below the fold on long pages — the most-reported bug on this feature. */
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  transition: width .12s ease, flex-basis .12s ease;
}
.cs-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--text-md) var(--text-sm) }
.cs-main { flex: 1 1 auto; min-width: 0 }
body.cs-collapsed .cs-side { width: var(--sidebar-rail); flex-basis: var(--sidebar-rail) }

/* Nav items */
/* Collapsible groups — the header is a button, its items live in .nav-items */
.nav-group { display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: var(--text-md) 10px 4px }
.nav-group:hover { color: var(--ink) }
.nav-caret { width: 10px; height: 6px; margin-left: auto; flex: 0 0 10px;
  transition: transform .12s ease }
.nav-sec.is-open .nav-caret { transform: rotate(180deg) }
.nav-items { display: none }
.nav-sec.is-open .nav-items { display: block }
.nav-docs { margin-top: var(--text-md) }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-md); font-size: var(--text-md); color: var(--muted);
  white-space: nowrap; margin-bottom: 2px }
.nav-item:hover { background: var(--brand-tint-hover); color: var(--ink); text-decoration: none }
.nav-item.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700 }
.nav-ico { width: 18px; height: 18px; flex: 0 0 18px; display: block }
.nav-item .count { margin-left: auto; font-size: var(--text-xs); font-weight: 600;
  background: var(--brand-tint); color: var(--brand-dark);
  border-radius: var(--radius-full); padding: 1px 8px }
.nav-item.active .count { background: var(--brand); color: var(--surface) }

/* Collapsed rail: icons only, tooltips retained via title= */
body.cs-collapsed .nav-item span, body.cs-collapsed .nav-group,
body.cs-collapsed .nav-item .count, body.cs-collapsed .side-foot span { display: none }
body.cs-collapsed .nav-item { justify-content: center; padding-inline: 0 }
/* Icon-only rail: headers are hidden, so a folded group would hide its icons entirely —
   force every group open there and make the (invisible) header unclickable. */
body.cs-collapsed .nav-items { display: block }
body.cs-collapsed .nav-group { pointer-events: none }

.side-foot { border-top: 1px solid var(--line); padding: var(--text-sm) }
#side-toggle { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--muted); font-family: inherit; font-size: var(--text-sm); padding: 7px 8px; cursor: pointer }
#side-toggle:hover { background: var(--brand-tint-hover); color: var(--ink) }

/* Content — centred card on the page background (§9.2) */
.content { padding: var(--text-2xl); max-width: 1180px; margin: 0 auto }
.crumbbar { display: none }   /* Daylight has no breadcrumb bar; the page title carries identity */

/* Mobile menu button + drawer backdrop — hidden on desktop (the sidebar is always visible). */
.nav-burger { display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 2px; padding: 0; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); cursor: pointer }
.nav-burger:hover { background: var(--brand-tint-hover) }
.nav-backdrop { display: none }

@media (max-width: 760px) {
  /* The sidebar is an OFF-CANVAS DRAWER: it slides in from the left over a dimming backdrop,
     instead of the old horizontal-scroll strip. The nav renders normally inside it (vertical,
     with working collapsible groups). Collapse-to-rail is meaningless here and is neutralised. */
  .cs-shell { display: block }
  .nav-burger { display: inline-flex }

  .cs-side, body.cs-collapsed .cs-side {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 60;
    width: min(86vw, 320px); flex-basis: auto;
    height: calc(100dvh - var(--topbar-h));
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 20px rgba(0, 0, 0, .22);
  }
  body.nav-open .cs-side { transform: translateX(0) }
  body.nav-open { overflow: hidden }          /* freeze the page behind the open drawer */

  .nav-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 55;
    background: rgba(0, 0, 0, .42); border: 0 }
  .nav-backdrop[hidden] { display: none }
  body.nav-open .nav-backdrop { display: block }

  /* Full labels in the drawer regardless of a stored desktop collapse state. */
  body.cs-collapsed .nav-item span, body.cs-collapsed .nav-item .count { display: inline }
  body.cs-collapsed .nav-group { display: flex; pointer-events: auto }
  body.cs-collapsed .nav-item { justify-content: flex-start; padding-inline: 10px }
  body.cs-collapsed .nav-items { display: none }
  body.cs-collapsed .nav-sec.is-open .nav-items { display: block }
}