/* Base + page grid: topbar / (sidebar + main) / footer */

* {
  box-sizing: border-box;
}

html {
  /* Slightly below the 16px default -- scales every rem-based size in the
     app down a notch without having to touch each declaration. */
  font-size: 93.75%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background var(--transition-medium), color var(--transition-medium);
}

/* height, not min-height: pins the grid to the viewport so the middle
   (1fr) row is a real scroll container via .main's own overflow-y (below)
   instead of growing past the viewport and pushing the footer down when a
   page (e.g. a long waris list) has more content than fits on screen. */
.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr var(--footer-height);
  grid-template-columns: 1fr;
  height: 100vh;
}

/* ---------- Top bar ---------- */

.topbar {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.topbar__sidebar-toggle {
  margin-inline-end: 0.25rem;
}

.topbar__brand {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.topbar__spacer {
  flex: 1;
}

/* ---------- Body: sidebar + main ---------- */

.app-body {
  grid-row: 2;
  display: flex;
  min-height: 0;
}

.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  /* Only the session list scrolls (sessions.css); the header with "+" and the
     footer with Feedback stay in place. Collapsed, there is nothing to scroll. */
  overflow: hidden;
  /* Column so a footer block (e.g. the Feedback button) can sit at the
     bottom: .sidebar__nav takes the free space (below). */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  transition: flex-basis var(--transition-medium), width var(--transition-medium);
}

.sidebar[data-collapsed="true"] {
  flex-basis: var(--sidebar-width-collapsed);
  width: var(--sidebar-width-collapsed);
}

.sidebar__nav {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar__section-label {
  padding-inline: 0.5rem;
  margin-block: 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar[data-collapsed="true"] .sidebar__section-label,
.sidebar[data-collapsed="true"] .nav-item__label {
  opacity: 0;
  pointer-events: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background: transparent;
  font: inherit;
  text-align: start;
  width: 100%;
}

.nav-item:hover {
  background: var(--color-surface-alt);
}

.nav-item[aria-current="page"] {
  background: var(--color-surface-alt);
  color: var(--color-accent);
  font-weight: 600;
}

.nav-item__icon {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
}

.nav-item__label {
  transition: opacity var(--transition-fast);
}

/* ---------- Sidebar footer (pinned to the bottom of the sidebar; e.g. Feedback, Back to app) ---------- */

.sidebar__footer {
  flex: 0 0 auto;
  position: sticky;
  inset-block-end: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sidebar__footer .nav-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* The app's Feedback button: filled in the primary colour with white text
   (like the other primary buttons), so it reads as an action rather than a
   navigation link. Collapsed, the icon-only button keeps the fill. */
.sidebar__feedback {
  inline-size: 100%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}

.sidebar__feedback:hover {
  background: var(--color-primary);
  filter: brightness(0.92);
}

.sidebar__footer .sidebar__feedback:focus-visible {
  outline-offset: 2px;
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem;
}

/* ---------- Workspace: bar + main (index.html only) ----------
   The case controls (save state, guide switch) sit in a bar above the
   scrolling .main, so they stay in view. Wraps .main in a column; admin.html
   has no wrapper and keeps .main directly in .app-body. */

.workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workspace > .main {
  min-height: 0;
}

.workspace-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  /* One height whatever it holds: its items come and go (the save indicator
     is hidden with no case open, the Guide switch when an admin turns the
     guide off). Fits the tallest one, the Guide switch, plus padding and
     border; a minimum, not a fixed height, so a narrow screen can still wrap. */
  min-block-size: 3.25rem;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ---------- Footer ---------- */

.footer {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 1rem;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .sidebar {
    position: fixed;
    inset-block: var(--topbar-height) var(--footer-height);
    inset-inline-start: 0;
    z-index: 20;
    box-shadow: var(--shadow-md);
  }

  .sidebar[data-collapsed="true"] {
    flex-basis: 0;
    width: 0;
    border-inline-end: none;
  }
}