/* ============================================================
   layout.css — SFC UI Layout v2
   CSS Grid app shells, sidebar variants, nav items, nav styles.

   IMPORTANT: Do NOT import tailwindcss or base.css here.
   This file is loaded alongside a theme file (e.g., themes/helpdesk.css)
   which already imports base.css and tailwindcss transitively.

   All classes are plain CSS (not @utility) because this file is loaded
   as a separate <link> and is not part of the Tailwind processing chain.

   Token consumption pattern:
     Colors  — var(--color-bg-surface), var(--color-accent), etc.
     Shadows — var(--shadow-sm), var(--shadow-md), var(--shadow-lg)
     Radius  — var(--radius-sm), var(--radius), var(--radius-lg), var(--radius-xl)
     Primitives — var(--color-neutral-850), etc.

   Page link order:
     <link rel="stylesheet" href="/src/themes/helpdesk.css">
     <link rel="stylesheet" href="/src/layout.css">
   ============================================================ */

/* ============================================================
   SHEL-03 — Layout dimension custom properties
   All layout dimensions live here as overridable :root vars.
   Apps override a single var to change any dimension, e.g.:
     :root { --shell-panel-width: 480px; }
   ============================================================ */

:root {
  --shell-sidebar-width: 200px;
  --shell-rail-width:    56px;
  --shell-panel-width:   380px;
  --shell-topbar-height: 48px;
}

/* ============================================================
   Shell base
   Full-viewport CSS Grid container. All shell variants extend this.
   ============================================================ */

.shell {
  display: grid;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   SHEL-01 — Sidebar + header shell variants

   Two sub-variants for sidebar/topbar composition:
   1. shell--sidebar-header: full-height sidebar (sidebar spans both rows)
   2. shell--topbar-sidebar: full-width topbar (topbar spans both columns)
   ============================================================ */

/* Full-height sidebar: sidebar runs top-to-bottom; topbar covers content column only */
.shell--sidebar-header {
  grid-template-columns: var(--shell-sidebar-width, 240px) 1fr;
  grid-template-rows: var(--shell-topbar-height, 56px) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
}

/* Full-width topbar: topbar spans entire width; sidebar is below it on the left */
.shell--topbar-sidebar {
  grid-template-columns: var(--shell-sidebar-width, 240px) 1fr;
  grid-template-rows: var(--shell-topbar-height, 56px) 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar main";
}

/* ============================================================
   SHEL-02 — Rail + main + inspector (3-column shell)

   Three columns: icon rail (56px) | main content (1fr) | inspector panel (380px)
   Two rows: topbar spanning columns 2-3 | content row
   ============================================================ */

.shell--rail-inspector {
  grid-template-columns: var(--shell-rail-width, 56px) 1fr var(--shell-panel-width, 380px);
  grid-template-rows: var(--shell-topbar-height, 56px) 1fr;
  grid-template-areas:
    "rail topbar topbar"
    "rail main   panel";
}

/* Panel collapsed: changes --shell-panel-width to 0 on the shell element.
   This collapses the CSS Grid column itself — main area expands via 1fr. */
.shell--rail-inspector.panel-collapsed {
  --shell-panel-width: 0px;
}

/* Sidebar collapsed: shrinks the grid column to rail width.
   Toggle .sidebar-collapsed on the shell element alongside .is-collapsed on the sidebar. */
.sidebar-collapsed {
  --shell-sidebar-width: var(--shell-rail-width, 56px);
}

/* Card nav style needs extra grid column width to preserve visible right margin gap */
.sidebar-collapsed:has(.nav-style--card) {
  --shell-sidebar-width: calc(var(--shell-rail-width, 56px) + 1rem);
}

/* ============================================================
   Grid area assignments
   Apply to the direct children of a shell to assign them to named areas.

   shell__main MUST have overflow-y: auto so content scrolls within
   the main area and does not push the shell beyond the viewport.
   (Pitfall 3: without this, the shell exceeds 100vh)
   ============================================================ */

.shell__sidebar { grid-area: sidebar; }
.shell__topbar  { grid-area: topbar; }
.shell__main    { grid-area: main; overflow-y: auto; }
.shell__rail    { grid-area: rail; }
.shell__panel   { grid-area: panel; }

/* ============================================================
   Sidebar base
   Structural base — visual character set by variant modifiers below.
   Does NOT set grid-area (that is handled by shell__sidebar or shell__rail).
   ============================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 250ms ease;
}

/* ============================================================
   SIDE-01 — Light minimal sidebar
   Blends with content area. Uses bg-surface.
   ============================================================ */

.sidebar--light {
  background-color: var(--color-bg-surface);
}

/* ============================================================
   SIDE-02 — Dark contrasting sidebar
   Subtle contrast only — NOT near-black.
   neutral-850 (L 0.22) is one step darker than elevated surface (L 0.26).
   In light mode overridden to neutral-100 for equivalent subtle contrast.
   ============================================================ */

.sidebar--dark {
  background-color: var(--color-neutral-850);
  color: var(--color-text-primary);
}

/* Light mode override: dark sidebar uses neutral-100 (slightly tinted vs white content) */
html.light .sidebar--dark {
  background-color: var(--color-neutral-100);
}

/* ============================================================
   SIDE-03 — Icon-only rail
   56px fixed width, centered items. Text labels hidden via child selector.
   ============================================================ */

.sidebar--rail {
  width: var(--shell-rail-width, 56px);
  align-items: center;
  padding: 0.5rem 0;
}

/* Hide text labels inside rail sidebar */
.sidebar--rail .nav-label {
  display: none;
}

/* ============================================================
   SIDE-04 — Collapsible sidebar
   Full text+icon at --shell-sidebar-width (240px).
   Collapses to icon-only at --shell-rail-width (56px) via .is-collapsed.
   Both states use explicit pixel values for CSS width transition to work
   (Pitfall 2: width: auto cannot be transitioned).
   ============================================================ */

.sidebar--collapsible {
  width: var(--shell-sidebar-width, 240px);
}

/* Collapsed state — width must be explicit px value (not auto) for transition */
.sidebar--collapsible.is-collapsed {
  width: var(--shell-rail-width, 56px);
}

/* Hide text labels when collapsed */
.sidebar--collapsible.is-collapsed .nav-label {
  display: none;
}

/* Center items and tighten padding when collapsed */
.sidebar--collapsible.is-collapsed {
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar--collapsible.is-collapsed .nav-item {
  justify-content: center;
  padding: 0.5rem;
}

/* Override nav style padding/margins in collapsed state */
.sidebar--collapsible.is-collapsed.nav-style--classic {
  padding: 0.5rem 0;
}

.sidebar--collapsible.is-collapsed.nav-style--floating {
  padding: 0.5rem 0;
}

.sidebar--collapsible.is-collapsed.nav-style--card {
  margin: 0.5rem 0.5rem 0.5rem 0.25rem;
  padding: 0.5rem 0.25rem;
}

/* Toggle button: include in sidebar HTML as:
   <button class="sidebar__toggle" onclick="this.closest('.sidebar--collapsible').classList.toggle('is-collapsed')">
     <svg><!-- chevron icon --></svg>
   </button>
*/

.sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius);
}

/* ============================================================
   Nav item — Linear-style accent pill active state
   Base item: muted text, hover elevates color + background.
   Active item: full accent background, white text, semibold.
   ============================================================ */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color 150ms ease, background-color 150ms ease;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Active state — accent pill
   Uses --accent-raw (not --color-accent) because theme files may remap
   --color-accent for shadcn compatibility (e.g., to bg-elevated for hover).
   --accent-raw always resolves to the brand accent color. */
.nav-item--active {
  background-color: var(--accent-raw);
  color: oklch(1 0 0);
  font-weight: 600;
}

/* Hover state — only applies to non-active items */
.nav-item:hover:not(.nav-item--active) {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
}

/* ============================================================
   Nav style orthogonal modifiers (Classic / Floating / Card)
   Apply one to any sidebar variant — they are independent.
   From Phase 2 nav style exploration (themes.html).

   These MUST override sidebar variant backgrounds (light, dark, etc.)
   including html.light overrides. Use .sidebar.nav-style--X for
   sufficient specificity.
   ============================================================ */

/* Classic — bordered sidebar with right separator.
   Sidebar = bg-base, main = bg-elevated. Separated by border.
   (themes.html: bg-bg-base border-r border-border) */
.sidebar.nav-style--classic,
html.light .sidebar.nav-style--classic {
  background-color: var(--color-bg-base);
  border-right: 1px solid var(--color-border);
  padding: 1rem 0;
}

/* Floating — sidebar and main share bg-elevated. No border, no separation.
   Nav items float on the same surface as content.
   (themes.html: wrapper bg-bg-elevated, nav has no bg) */
.sidebar.nav-style--floating,
html.light .sidebar.nav-style--floating {
  background-color: var(--color-bg-elevated);
  border-right: none;
  padding: 1.5rem 0.75rem 1rem;
}

/* Card — sidebar as rounded card with shadow on elevated surface.
   Card = bg-surface, gap area = bg-elevated (matches main content).
   (themes.html: wrapper bg-bg-elevated, nav bg-bg-surface rounded-xl shadow-md) */
.sidebar.nav-style--card,
html.light .sidebar.nav-style--card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin: 1rem 1.25rem 1rem 0.75rem;
  padding: 0.75rem;
  border-right: none;
}

/* Floating nav style: shell bg = elevated so sidebar and main share
   the same surface — no visible boundary between them */
.shell:has(.nav-style--floating) {
  background-color: var(--color-bg-elevated);
}

/* Card nav style: shell bg matches main content so gap area behind
   sidebar card is the same shade as the content background */
.shell:has(.nav-style--card) {
  background-color: var(--color-bg-elevated);
}

/* ============================================================
   TOPB-01 — Minimal topbar
   Breadcrumb left, search center-right, user avatar far right.
   Uses bg-surface for spatial separation from content (no border,
   no shadow — color step only per user decision).
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  height: var(--shell-topbar-height, 48px);
  padding: 0 1rem;
  background-color: var(--color-bg-surface);
  gap: 1rem;
}

/* ============================================================
   Dark top-band — continuous dark bar across sidebar brand + topbar
   Apply .shell--dark-topband on the shell element.
   Both .sidebar__brand and .topbar share the same dark background
   so they visually merge into one full-width band.
   ============================================================ */

.shell--dark-topband .topbar {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
}

.shell--dark-topband .topbar__actions {
  color: var(--color-neutral-100);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: var(--shell-topbar-height, 48px);
  padding: 0 0.75rem;
  margin: -1.5rem -0.75rem 0;
  flex-shrink: 0;
}

.shell--dark-topband .sidebar__brand {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
}

/* In light mode keep the dark topband (it's a brand element) */
html.light .shell--dark-topband .topbar,
html.light .shell--dark-topband .sidebar__brand {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
}

html.light .shell--dark-topband .topbar__actions {
  color: var(--color-neutral-100);
}

.topbar__breadcrumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.topbar__search {
  flex: 1;
  max-width: 400px;
  margin-left: auto;
}

.topbar__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent-raw);
  box-shadow: 0 0 0 2px oklch(0.60 0.12 245 / 0.2);
}

/* ============================================================
   TOPB-02 — Full horizontal nav topbar
   Used with shell--topbar-sidebar where topbar spans full width.
   Contains brand/logo area, navigation links, and action buttons.
   ============================================================ */

.topbar--full-nav {
  justify-content: flex-start;
  gap: 0;
}

.topbar__brand {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-right: 2rem;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.topbar__nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.topbar__nav-link--active {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  font-weight: 600;
}

.topbar__nav-link:hover:not(.topbar__nav-link--active) {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
}

/* ============================================================
   Spatial Hierarchy — 3-level background depth system
   ==========================================================================
   Level 1 (deepest): bg-bg-base     — shell background, sidebar anchoring
   Level 2 (middle):  bg-bg-surface  — cards, topbar, panels, sidebars
   Level 3 (nearest): bg-bg-elevated — content area, card footers, hovers

   Usage is contextual, not rigid:
   - Sidebar on shell: bg-surface on bg-base
   - Cards on content: bg-surface on bg-elevated
   - Topbar on content: bg-surface (color step, no border)
   - Panel on content: bg-elevated or bg-surface (color step, no border)
   ============================================================ */

/* ============================================================
   Mixed-Weight Heading Pattern (CONT-03)
   ==========================================================================
   Usage in HTML — bold + light words in same heading for visual interest:

   <h1 class="text-2xl font-semibold text-text-primary">
     Dashboard <span class="font-light">Overview</span>
   </h1>

   No CSS utility needed — Tailwind's font-semibold + font-light handle this.
   Pattern already demonstrated in themes.html and index.html.
   ============================================================ */

/* ============================================================
   Adaptive Shadows (CONT-04)
   ==========================================================================
   Shadow tokens (shadow-sm, shadow-md, shadow-lg) already adapt to dark/light
   mode via the --shadow-*-raw pattern in base.css:
   - Dark mode: subtle light-colored glow (oklch(1 0 0 / 0.04-0.08) ring)
   - Light mode: diffused multi-layer drop shadow

   Layout components use these tokens directly via shadow-sm, shadow-md, shadow-lg
   Tailwind utility classes. No additional shadow CSS is needed here.
   ============================================================ */

/* ============================================================
   CONT-01 — Card component (shadow-only depth, no border on container)
   Pattern established in Phase 2. Kit with header/body/footer sections.
   ============================================================ */

.card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.card__header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__body {
  padding: 1rem;
}

.card__footer {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
}

/* ============================================================
   Card grid utilities (preset column layouts)
   ============================================================ */

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ============================================================
   PANL-01 — Inspector panel
   Fixed header + scrollable body. Default width 380px via CSS custom property.
   Color step separation from content (no border, no shadow on the edge).
   ============================================================ */

.panel {
  width: var(--shell-panel-width, 380px);
  overflow: hidden;
  transition: width 250ms ease;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-surface);
}

.panel__header {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}

/* ============================================================
   PANL-02 — Panel collapse transition
   Width transition is already on the panel (250ms ease).
   Collapse is triggered by toggling .panel-collapsed on the SHELL element.
   This changes --shell-panel-width to 0 (defined in shell--rail-inspector.panel-collapsed),
   causing both the grid column and the panel to shrink.
   Main expands via 1fr to fill freed space.

   JS trigger:
     document.getElementById('main-shell').classList.toggle('panel-collapsed');
   ============================================================ */

/* Suppress overflow when panel is fully collapsed */
.panel-collapsed .panel {
  overflow: hidden;
  min-width: 0;
}