/*
  Shared chrome for every Globe-served page: the SPA shell (the bare iommi
  Page in config/urls.py), the iommi admin, and any server-rendered page — all
  render through templates/base.html, which links this sheet.

  It owns two things:
    1. The design tokens (the Mercator / @prorenata/lerkaka palette), defined
       here once and reused by the iommi component sheet (static/sitdown.css)
       so the surfaces can't drift.
    2. The page skeleton + left navigation rail (.app-shell / .app-sidebar),
       moved out of the old mercator/index.html so the menu is defined in a
       single place rather than duplicated per surface.

  Inner page content styles its own internals: the SPA via the lerkaka bundle,
  the admin via sitdown.css. This sheet deliberately styles only the chrome.
*/

:root {
  /* beryl — the teal brand colour */
  --sd-beryl-100: #d9eeeb;
  --sd-beryl-200: #c0e3de;
  --sd-beryl-500: #80c7bc;
  --sd-beryl-950: #196c5e;
  /* silver — neutrals (text, borders, surfaces) */
  --sd-silver-0: #ffffff;
  --sd-silver-50: #f8fafa;
  --sd-silver-100: #edf5f7;
  --sd-silver-200: #d8e6eb;
  --sd-silver-300: #c4d6da;
  --sd-silver-400: #8ea8ad;
  --sd-silver-700: #657d82;
  --sd-silver-900: #4b5c60;
  --sd-silver-950: #00303c;
  /* gold — accent / focus highlight */
  --sd-gold-500: #f5a800;
  /* lapis — links */
  --sd-lapis-600: #1b84f5;
  --sd-lapis-800: #1757b6;
  /* ruby — danger */
  --sd-ruby-600: #f02806;
  --sd-ruby-700: #c71907;
  /* radius + shadow primitives (lerkaka Radius-xl / Shadows-base) */
  --sd-radius: 8px;
  --sd-radius-card: 12px;
  --sd-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --sd-focus-ring: 0 0 0 3px rgba(128, 199, 188, 0.4);

  --sd-sidebar-width: 16rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Lerkaka's base typography: Inter Variable, 16px / 1.5 (its --text-base).
     The SPA bundle ships the variable font; server-rendered pages get the
     static Inter the style loads (config/iommi_style.py). */
  font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sd-silver-950);
}

/* Brand accent: a full-width bar in normal flow at the very top. */
.brand-accent {
  height: 3px;
  flex-shrink: 0;
  background: var(--sd-gold-500);
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* The rail mirrors Lerkaka's ShadcnSidebar: a beryl-100 (primary-100) panel
   with on-primary text, no divider against the white content column. */
.app-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sd-sidebar-width);
  flex-shrink: 0;
  background: var(--sd-beryl-100);
}

/* Brand row: the wordmark plus (on phones only) the hamburger toggle. */
.app-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sd-silver-950);
  text-decoration: none;
}

/* The hamburger button. Hidden on desktop; the mobile breakpoint reveals it. */
.app-sidebar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.app-sidebar__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--sd-silver-950);
}

.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem;
}

/* Nav rows match Lerkaka's SidebarMenuItem: rounded, px-3 py-2, text-sm,
   font-medium, hover/active in primary-alt (beryl-200). */
.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--sd-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sd-silver-950);
  text-decoration: none;
}

.app-sidebar__link:hover {
  background: var(--sd-beryl-200);
}

/* iommi's Menu adds `.active` to the item matching the current URL. */
.app-sidebar__link.active {
  background: var(--sd-beryl-200);
}

/* The page content column to the right of the rail. White surface, like
   Lerkaka's SidebarInset — each surface adds its own inner padding (the SPA
   pages with their own p-6; the admin via sitdown.css's .sd-main). */
.app-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--sd-silver-0);
}

/* The SPA (the only page with an `#app` mount) owns its own full-height flex
   layout — a fixed header over a scrolling <main> — so let it fill the column
   and clip; its inner <main> does the scrolling. The admin column keeps the
   default overflow:auto above. */
.app-content:has(#app) {
  overflow: hidden;
}
.app-content:has(#app) .sd-main,
#app {
  height: 100%;
}

/* Phones: stack the rail above the content as a top bar, and collapse the nav
   behind the hamburger. The #app-nav-toggle checkbox (in base.html, a sibling
   of .app-body) drives the reveal via the general-sibling selector below. */
@media (max-width: 640px) {
  .app-body {
    flex-direction: column;
  }

  /* The rail becomes a full-width top bar; only the brand row shows at rest. */
  .app-sidebar {
    width: 100%;
    flex-shrink: 0;
  }

  .app-sidebar__burger {
    display: flex;
  }

  /* Nav is hidden until the hamburger toggles the checkbox open. */
  .app-sidebar__nav {
    display: none;
    padding-bottom: 0.75rem;
  }

  .app-nav-toggle:checked ~ .app-body .app-sidebar__nav {
    display: flex;
  }

  /* Let the content column take whatever height is left below the bar. The
     SPA's clip-and-inner-scroll still applies via .app-content:has(#app). */
  .app-content {
    flex: 1;
    min-height: 0;
  }
}