.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  width: 244px;
  /* The same paper every card gets (`--surface` — see base/tokens.css), plus one
     layer of its own: the signal wash that warms the brand block. It goes UNDER the
     wash rather than over it, which at these alphas is invisible either way — both
     the highlight and the amber are at the top, and neither is opaque enough to hide
     the other. Keeping the shared pair as one token is worth more than the ordering. */
  background:
    var(--surface),
    linear-gradient(180deg, color-mix(in srgb, var(--signal) 5%, transparent), transparent 140px),
    var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  position: relative;
  padding: 20px 22px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 22px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center;
}
.brand-logo { height: 64px; width: auto; }
.brand::before {  /* command ribbon */
  content: ""; position: absolute; left: 0; top: 20px; bottom: 18px;
  width: 4px; background: linear-gradient(180deg, var(--signal), var(--accent));
}
.brand small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  color: var(--muted); font-size: 9.5px; letter-spacing: 2px; margin-top: 3px;
  text-transform: uppercase;
}

.nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.nav-group { padding: 8px 0; }
.nav-group + .nav-group::before {
  content: ""; display: block; height: 1px; margin: 4px 22px 14px;
  background: var(--border);
}
.nav-label {
  display: block;
  padding: 6px 22px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-left: 3px solid transparent;
  transition: color .12s, background .12s;
}
.nav a::before {  /* monospace bullet that lights up under the pointer */
  content: "›"; font-family: var(--font-mono); color: var(--muted-2);
  font-size: 13px; transition: color .12s;
}
.nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav a:hover::before { color: var(--signal); }
/* Selecting a section must not redraw its row. The active state is the left stripe plus
   the plate behind it and nothing else: the label keeps its ink, the bullet keeps its
   glyph, and the 3px border is declared `transparent` on `.nav a` from the start, so
   only its *colour* changes here and no box is ever resized.
   What this replaces: the bullet used to swap "›" → "▸" and carry a `translateX(1px)`.
   Those are two glyphs with two different advance widths in the mono face, so clicking
   a section nudged its own label sideways — the row you had just aimed at was the one
   that moved. A marker that only ever changes colour cannot do that. */
.nav a.active {
  background: var(--panel);
  border-left-color: var(--signal);
}

.sidebar .user {
  padding: 14px 16px 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.user-id { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* The card is the way into /settings/ («Мій обліковий запис»), so it behaves like
   a nav row rather than a link: inherited ink, a hover plate, no underline. */
a.user-id {
  color: inherit; text-decoration: none;
  padding: 6px; margin: -6px -6px 4px; border-radius: var(--radius-sm);
}
a.user-id:hover { background: var(--panel); text-decoration: none; }
a.user-id:hover .user-meta b { color: var(--text-strong); }
/* Shared avatar — photo or initials placeholder. Rendered via {% avatar %}.
   Sizes: sm (sidebar), md (list rows), lg (detail hero). */
.avatar {
  flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .5px;
  color: var(--ok-glow);
  background: radial-gradient(circle at 30% 25%, var(--panel-3), var(--panel-2));
  border: 1px solid var(--border-bright);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar.sm { width: 38px; height: 38px; border-radius: 50%; font-size: 14px; }
.avatar.md { width: 42px; height: 42px; border-radius: 50%; font-size: 14px; }
.avatar.lg { width: 150px; height: 200px; border-radius: var(--radius); font-size: 44px; letter-spacing: 1px; }
.user-meta { min-width: 0; flex: 1; }
.user-meta b {
  display: block; color: var(--text); font-size: 13px;
  font-family: var(--font-display); letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-sub {
  display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px;
}
.user-role {
  color: var(--muted); font-weight: 500;
}

/* ── Main column ──────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 30px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--topbar-veil), transparent);
}
.topbar h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; margin: 0; letter-spacing: -.2px;
}
/* Secondary identifier trailing a name heading (e.g. a subdivision's code): the
   name stays the primary, the code reads as a quiet mono tag beside it. */
.heading-code {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--muted-2); letter-spacing: .5px; margin-left: 8px;
}
.content { padding: 26px 30px 48px; }
/* `flex: none` so the action cluster never gives up width: the two halves of a
   `space-between` row otherwise shrink together, and on a phone — where the title is
   the half that may ellipsize (it carries `min-width: 0`) and the buttons are 40px
   touch targets that may not — the buttons were the ones losing room. */
.topbar-right { display: flex; align-items: center; gap: 16px; flex: none; }
.topbar-divider {
  flex: none; width: 1px; align-self: stretch; margin: 4px 0;
  background: var(--border);
}
.topbar-divider:first-child { display: none; }
.sys-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase;
  padding: 6px 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel);
}
.icon-btn {
  flex: none; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); transition: color .12s, border-color .12s, background .12s;
}
.icon-btn:hover { color: var(--signal); border-color: var(--border-bright); background: var(--panel-2); }
.icon-btn svg { display: block; }