/* NodeFabric shared shell — palette, sidebar/topbar chrome, and reusable components. */

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

:root {
  --bg: #0d1117;
  --surface2: #161b22;
  --surface3: #21262d;
  --border: #30363d;
  --border-subtle: #21262d;
  --text: #e6edf3;
  --muted: #7d8590;
  --accent: #58a6ff;
  --accent-strong: #1f6feb;
  --accent-strong-hover: #388bfd;
  --success: #238636;
  --success-hover: #2ea043;
  --danger: #f85149;
  --warning: #fbbf24;
  --warning-dim: #fbd38d;
  --good: #68d391;
  --side-w: 236px;
  --topbar-h: 56px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4150; }
::-webkit-scrollbar-track { background: transparent; }

/* ── App shell ─────────────────────────────────────────────────────── */

.app-shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.sidebar {
  width: var(--side-w);
  flex-shrink: 0;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  flex-shrink: 0;
}
.sidebar-brand img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; }
.sidebar-brand-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: #f0f6ff; }
.sidebar-brand-sub {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.nav-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #525a68; font-weight: 600; margin: 16px 6px 8px;
}
.nav-label:first-child { margin-top: 8px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: #9aa3b2;
  text-decoration: none; cursor: pointer; margin-top: 2px;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: var(--surface3); color: var(--text); }
.nav-item.active {
  background: rgba(88, 166, 255, .12);
  color: #dbe7ff;
}
.nav-item.active svg { stroke: var(--accent); }

.sidebar-user {
  padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-user-card {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 9px; background: var(--surface3); border: 1px solid var(--border);
  position: relative;
}
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #2b3a52, #1c3a5e);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent);
}
.sidebar-user-body { min-width: 0; flex: 1; }
.sidebar-user-name {
  font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-sub {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-menu-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; }
.sidebar-user-dropdown {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: .35rem 0; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: none;
}
.sidebar-user.open .sidebar-user-dropdown { display: block; }
.sidebar-user-dropdown a {
  display: block; padding: .55rem 1rem; font-size: .82rem;
  color: #c9d1d9; text-decoration: none; white-space: nowrap;
}
.sidebar-user-dropdown a:hover { background: var(--surface3); color: #f0f6ff; }
.sidebar-user-dropdown hr { border: none; border-top: 1px solid var(--border-subtle); margin: .3rem 0; }
.sidebar-user-dropdown .menu-danger { color: var(--danger); }
.sidebar-user-dropdown .menu-danger:hover { background: rgba(248,81,73,.08); color: var(--danger); }

.sidebar-signin {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px; border-radius: 8px; background: var(--accent-strong); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.sidebar-signin:hover { background: var(--accent-strong-hover); }

.sidebar-toggle {
  display: none; position: fixed; top: 0; left: 0; z-index: 230;
  width: 56px; height: var(--topbar-h); align-items: center; justify-content: center;
  background: var(--surface2); border: none; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); color: var(--muted); cursor: pointer;
}
.sidebar-toggle:hover { color: var(--accent); }
.sidebar-backdrop { display: none; }

/* ── Main / topbar ─────────────────────────────────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 0 24px; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.topbar-title { display:inline; font-size: 15px; font-weight: 700; color: #f0f6ff; white-space: nowrap; }
.topbar-sub { display:inline; font-size: 11.5px; color: var(--muted); margin-top: 1px; margin-left: 10px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.page-content { flex: 1; overflow-y: auto; padding: 28px 24px 48px; }
.page-content-inner { max-width: 1080px; margin: 0 auto; }
.page-content-inner.wide { max-width: 1140px; }
.page-content-inner.narrow { max-width: 860px; }

/* ── Search input ──────────────────────────────────────────────────── */

.search-input {
  position: relative; display: flex; align-items: center;
}
.search-input input {
  width: 100%; padding: .6rem .9rem .6rem 2.5rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: .85rem; outline: none; transition: border-color .15s;
  font-family: inherit;
}
.search-input input::placeholder { color: var(--muted); }
.search-input input:focus { border-color: var(--accent); }
.search-input svg { position: absolute; left: .8rem; color: var(--muted); pointer-events: none; }

/* ── Filter bar (search + dropdown filters above a table) ─────────────── */

.filter-bar { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
.filter-bar .search-input { flex: 1; min-width: 220px; }
.filter-bar select {
  padding: .6rem .9rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: .85rem; font-family: inherit; outline: none; cursor: pointer;
  transition: border-color .15s;
}
.filter-bar select:focus { border-color: var(--accent); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .85rem; font-weight: 600; font-family: inherit;
  padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface3); color: var(--text); cursor: pointer;
  text-decoration: none; transition: border-color .15s, background .15s; white-space: nowrap;
}
.btn:hover { border-color: #3a4150; }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn-primary:hover { background: var(--accent-strong-hover); border-color: var(--accent-strong-hover); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); }
.btn-danger { background: transparent; border-color: #5c2a2a; color: var(--danger); }
.btn-danger:hover { background: rgba(248,81,73,.08); }
.btn-sm { padding: .4rem .75rem; font-size: .78rem; border-radius: 7px; }

/* ── Cards ─────────────────────────────────────────────────────────── */

.card {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 13px;
  padding: 17px 19px;
}
.card-title { font-size: .95rem; font-weight: 600; color: #f7fafc; }
.card-meta { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

.section-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 4px; display: inline-block;
}
.badge-diff-beginner { color: var(--good); background: #1a2e24; border: 1px solid #276749; }
.badge-diff-intermediate { color: var(--warning-dim); background: #2d2412; border: 1px solid #5c4a1e; }
.badge-diff-advanced { color: #fc8181; background: #2d1515; border: 1px solid #5c2a2a; }
.badge-mode-guided { color: #a5b4fc; background: #1e1b4b; border: 1px solid #383a6b; }
.badge-mode-free { color: var(--warning); background: #271f08; border: 1px solid #5c4a1e; }
.badge-role { color: var(--muted); background: var(--surface3); border: 1px solid var(--border); }
.badge-role-instructor { color: var(--good); background: #1a2e24; border: 1px solid #276749; }
.badge-role-org_admin, .badge-role-platform_admin { color: var(--warning); background: #2d1b00; border: 1px solid #78350f; }

.badge-status-draft { color: var(--muted); background: var(--surface3); border: 1px solid var(--border); }
/* 'Issued' is retired from the switching-order lifecycle but the class stays:
   legacy status-history rows still render it, and users.html reuses it. */
.badge-status-issued { color: #a5b4fc; background: #1e1b4b; border: 1px solid #383a6b; }
.badge-status-in-review { color: #7dd3fc; background: #0c2a38; border: 1px solid #1e5a75; }
.badge-status-pending-approval { color: #d8b4fe; background: #2a1b3d; border: 1px solid #5b3a7a; }
.badge-status-approved { color: #5eead4; background: #0f2b26; border: 1px solid #1e5c4f; }
.badge-status-scheduled { color: #a5b4fc; background: #1e1b4b; border: 1px solid #383a6b; }
.badge-status-ready-for-execution { color: #bef264; background: #1f2b0d; border: 1px solid #4a5c1e; }
.badge-status-in-progress { color: var(--warning); background: #271f08; border: 1px solid #5c4a1e; }
.badge-status-on-hold { color: #fdba74; background: #2b1a0b; border: 1px solid #6b3f1e; }
.badge-status-completed { color: var(--good); background: #1a2e24; border: 1px solid #276749; }
.badge-status-restoration-in-progress { color: #6ee7b7; background: #113029; border: 1px solid #2a6b52; }
.badge-status-restoration-complete { color: #86efac; background: #14321f; border: 1px solid #2f7a4d; }
.badge-status-closed { color: #94a3b8; background: #151d2b; border: 1px solid #334155; }
.badge-status-cancelled { color: #fc8181; background: #2d1515; border: 1px solid #5c2a2a; }

/* Cross-order device conflict marker. Advisory, so it borrows the warning
   palette rather than the error red — the order is not blocked. inline-flex
   (the .badge default is inline-block) so the Feather glyph centers against
   the count instead of sitting on the text baseline, and so the source
   newlines around the <svg> don't render as a gap. */
.badge-conflict {
  color: var(--warning); background: #271f08; border: 1px solid #5c4a1e; cursor: help;
  display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle;
  position: relative;   /* positioning context for .conflict-tip */
}
.badge-conflict svg { flex: none; }

/* Conflict tooltip overlay. A native title attribute can only carry one flat
   string; this shows each conflicting order's status badge and the devices
   actually shared. Escapes the table because .table-wrap deliberately has no
   overflow:hidden (see the note above .table-wrap table).

   z-index 25 clears the table rows. It also sits above .row-menu-box (20),
   which is harmless: the two live in different columns and can't overlap. */
.conflict-tip {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 25;
  min-width: 240px; max-width: 340px; padding: .55rem .7rem;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: default;
  /* Reset the .badge typography this inherits from its parent. */
  font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: #c9d1d9; text-align: left; white-space: normal;
}
/* Bridges the 6px gap so travelling from the badge to the tooltip doesn't
   cross dead space and dismiss it. */
.conflict-tip::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; }

.badge-conflict:hover .conflict-tip,
.badge-conflict:focus .conflict-tip,
.badge-conflict:focus-within .conflict-tip { display: block; }
.badge-conflict:focus { outline: 2px solid var(--warning); outline-offset: 1px; }

.conflict-tip-title {
  display: block; margin-bottom: .4rem; color: var(--muted);
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.conflict-tip-row { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .2rem 0; }
.conflict-tip-row + .conflict-tip-row { border-top: 1px solid var(--border-subtle); }
.conflict-tip-id { font-family: monospace; font-weight: 600; color: #f0f6ff; }
.conflict-tip-devices {
  flex-basis: 100%; color: var(--muted); font-family: monospace; font-size: .7rem;
}

.role-select {
  padding: .3rem .5rem; background: var(--surface3); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: .78rem; font-family: inherit; outline: none; cursor: pointer;
}
.role-select:disabled { opacity: .5; cursor: default; }

/* ── Tables ────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 2rem;
}
/* Corners are rounded per-cell (not via overflow:hidden on the wrapper) so
   that absolutely-positioned popovers like .row-menu-box can escape the
   table without being clipped. */
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table-wrap th {
  text-align: left; padding: .65rem 1rem; font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table-wrap td { padding: .75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: #c9d1d9; vertical-align: middle; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.table-wrap thead tr:first-child th:last-child { border-top-right-radius: 10px; }
.table-wrap tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.table-wrap tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.table-wrap tr:hover td { background: #1d212b; }
.table-wrap tr.hidden { display: none; }

/* Sortable column headers */
.table-wrap th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-wrap th.sortable:hover { color: #c9d1d9; }
.table-wrap th.sortable::after {
  content: ''; display: inline-block; width: 0; height: 0; margin-left: .4em;
  vertical-align: middle; opacity: 0; /* placeholder keeps header width stable */
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.table-wrap th.sort-asc::after {
  opacity: .9; border-bottom: 5px solid currentColor; border-top: 0;
}
.table-wrap th.sort-desc::after {
  opacity: .9; border-top: 5px solid currentColor; border-bottom: 0;
}

/* Table pager (client-side pagination controls) */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: -1rem 0 2rem;
}
.pager-info { font-size: .78rem; color: var(--muted); }
.pager-controls { display: flex; align-items: center; gap: .75rem; }
.pager-page { font-size: .78rem; color: var(--muted); }
.pager button[disabled] { opacity: .4; cursor: default; }

/* ── Forms ─────────────────────────────────────────────────────────── */

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-size: .72rem; color: var(--muted); margin-bottom: .4rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .65rem .9rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-strong); }

/* Inputs that sit inline in a flex row (e.g. the clearance issue/release forms)
   rather than in a full-width .field block. Same theme as .field input, but the
   caller controls sizing via flex/min-width so width:100% is intentionally omitted. */
.inline-input {
  padding: .65rem .9rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.inline-input:focus { border-color: var(--accent-strong); }

.field-err { font-size: .8rem; color: var(--danger); margin-bottom: .85rem; }
.field-hint { font-size: .72rem; color: var(--muted); margin-top: .3rem; }

.check-row { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: #c9d1d9; margin-bottom: 1.25rem; cursor: pointer; }
.check-row input { accent-color: var(--accent-strong); width: 14px; height: 14px; }

/* ── Inline "Reset Password" disclosure (native <details>, no JS) ────── */
.reset-pw { position: relative; display: inline-block; }
.reset-pw > summary { list-style: none; }
.reset-pw > summary::-webkit-details-marker { display: none; }
.reset-pw-box {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); width: 230px;
}
.reset-pw-box input {
  width: 100%; padding: .5rem .6rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: .8rem; margin-bottom: .5rem; font-family: inherit;
}
.reset-pw-box .hint { margin-bottom: .5rem; }

/* ── Row "Actions" disclosure (native <details>, no JS) ──────────────── */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; display: flex; align-items: center; gap: .3rem; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-box {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: .35rem 0; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.row-menu-box a, .row-menu-box button, .row-menu-box .reset-pw > summary {
  display: block; width: 100%; text-align: left; padding: .5rem .9rem; font-size: .82rem;
  color: #c9d1d9; text-decoration: none; background: none; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.row-menu-box a:hover, .row-menu-box button:hover, .row-menu-box .reset-pw > summary:hover { background: var(--surface3); color: #f0f6ff; }
.row-menu-box form { margin: 0; }
.row-menu-box .reset-pw { width: 100%; }
.row-menu-box .menu-danger { color: var(--danger); }
.row-menu-box .menu-danger:hover { background: rgba(248,81,73,.08); color: var(--danger); }

.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.alert { border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .84rem; line-height: 1.5; }
.alert-error { background: #2d1515; border: 1px solid #6e1a18; color: #fc8181; }
.alert-success { background: #1a2e24; border: 1px solid #276749; color: var(--good); }
.alert-warning { background: #271f08; border: 1px solid #78350f; color: var(--warning-dim); }

.back-link { font-size: .8rem; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--accent); }

/* ── Admin: stat cards, plan/role badges, inline forms ────────────── */

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; }
.stat-val { font-size: 1.8rem; font-weight: 800; color: #f0f6ff; letter-spacing: -.02em; }
.stat-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .2rem; }

.section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.plan-badge { font-size: .65rem; padding: .2rem .55rem; border-radius: 4px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.plan-basic { background: var(--surface2); color: #94a3b8; border: 1px solid #334155; }
.plan-pro { background: #1a2e24; color: var(--good); border: 1px solid #276749; }
.plan-enterprise { background: #2d1b00; color: var(--warning); border: 1px solid #78350f; }
.plan-core { background: rgba(88,166,255,.12); color: var(--accent); border: 1px solid #1f4064; }
.plan-individual { background: #1a2e24; color: var(--good); border: 1px solid #276749; }
.plan-founding { background: #2d2200; color: #f5c518; border: 1px solid #7a5c00; }

.addon-badge { font-size: .65rem; padding: .2rem .55rem; border-radius: 4px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.addon-on { background: #1a2e24; color: var(--good); border: 1px solid #276749; }
.addon-off { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

.form-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; margin-bottom: 2rem; }
.form-panel h3 { font-size: .82rem; font-weight: 700; color: #c9d1d9; margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { margin-top: 1rem; display: flex; gap: .75rem; }
.hint { font-size: .7rem; color: #484f58; margin-top: .3rem; }
a.link-accent { color: var(--accent); text-decoration: none; font-weight: 600; }
a.link-accent:hover { text-decoration: underline; }
/*.inactive-row { opacity: .45; }*/

.num-cell { text-align: center; color: #c9d1d9; }
.muted { color: var(--muted); }

/* ── List / item cards (feeder list, scenario list, attempt history) ── */

.item-grid { display: grid; gap: .75rem; }

.item-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.25rem; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.item-card:hover { border-color: var(--accent); background: #1d212b; }
.item-card.hidden { display: none; }

.item-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 8px; background: #2b3a52;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent);
}
.item-body { flex: 1; min-width: 0; }
.item-title {
  font-size: .95rem; font-weight: 600; color: #f7fafc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-meta { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.item-stats { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; }
.item-stat { font-size: .75rem; color: #a0aec0; }
.item-stat strong { color: var(--text); font-weight: 600; }
.item-arrow { color: #4a5568; flex-shrink: 0; margin-left: .5rem; }
.item-card:hover .item-arrow { color: var(--accent); }

.item-card-row { display: flex; align-items: stretch; gap: .5rem; }
.item-card-row.hidden { display: none; }
.item-card-row .item-card { flex: 1; min-width: 0; }
.item-card-delform { display: flex; margin: 0; }
.item-card-del {
  width: 2.75rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.item-card-del:hover { border-color: var(--danger); color: var(--danger); background: rgba(248,81,73,.08); }

/* Revision-history link on a circuit card — same footprint as .item-card-del so
   the two line up whether or not the delete button is rendered for this role. */
.item-card-rev {
  width: 2.75rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--muted); text-decoration: none;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.item-card-rev:hover { border-color: var(--accent); color: var(--accent); background: #1d212b; }

/* Revision number in a circuit card's meta line and in the history header. */
.rev-chip {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: .12rem .4rem; border-radius: 5px; margin-left: .45rem;
  color: #a5b4fc; background: #1e1b4b; border: 1px solid #383a6b;
}

/* ── Revision history ──────────────────────────────────────────────────────── */
.rev-row { display: flex; align-items: flex-start; gap: .9rem; }
.rev-num {
  flex-shrink: 0; width: 4.25rem; font-size: .82rem; font-weight: 700; color: #f0f6ff;
}
.rev-num .rev-minor { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); }
.rev-main { flex: 1; min-width: 0; }
.rev-summary { font-size: .84rem; color: #c9d1d9; margin: .25rem 0 .35rem; line-height: 1.5; }
.rev-summary.muted { color: var(--muted); font-style: italic; }
.rev-counts { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .72rem; }
.rev-count-add { color: var(--good); }
.rev-count-del { color: var(--danger); }
.rev-count-mod { color: var(--warning-dim); }
.rev-actions { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; }

.diff-group { margin-bottom: 1.5rem; }
.diff-group h3 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .6rem;
}
.diff-item {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface2);
  padding: .6rem .8rem; margin-bottom: .4rem; font-size: .8rem;
}
.diff-item.added   { border-left: 3px solid var(--success); }
.diff-item.removed { border-left: 3px solid var(--danger); }
.diff-item.changed { border-left: 3px solid var(--warning); }
.diff-name { font-weight: 600; color: #f0f6ff; }
.diff-type { color: var(--muted); font-size: .72rem; margin-left: .4rem; }
.diff-fields { margin: .45rem 0 0; padding: 0; list-style: none; }
.diff-fields li { font-size: .75rem; color: var(--muted); padding: .12rem 0; }
.diff-fields .fld { color: #c9d1d9; }
.diff-before { color: var(--danger); text-decoration: line-through; }
.diff-after  { color: var(--good); }

/* ── Diagram review workflow ───────────────────────────────────────────────
   Title-block signatures (written / checked / approved) and the draft review
   screen. Shared by circuit_draft.html and circuit_revision_detail.html. */
.signature-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 700px) { .signature-block { grid-template-columns: 1fr; } }
.signature-slot {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface2);
  padding: .65rem .8rem;
}
.signature-slot.signed { border-left: 3px solid var(--success); }
.signature-slot.pending { border-left: 3px solid var(--border); }
.signature-role {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .25rem;
}
.signature-name { font-size: .84rem; font-weight: 600; color: #f0f6ff; }
.signature-date { font-size: .7rem; margin-top: .1rem; }

/* Draft status badge. Colours track how far along the drawing is, not how
   urgent it is: grey while it's still being worked, amber once it's waiting on
   somebody, blue when only the approval is left. */
.draft-badge {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .5rem; border-radius: 5px; white-space: nowrap;
}
.draft-badge.draft     { background: var(--surface3); color: var(--muted); border: 1px solid var(--border); }
.draft-badge.submitted { background: #2d2412; color: var(--warning-dim); border: 1px solid #4a3a1c; }
.draft-badge.reviewed  { background: #1e1b4b; color: #a5b4fc; border: 1px solid #383a6b; }

.draft-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Side-by-side entry points into the proposed and live drawings. A reviewer
   checks a one-line by looking at it, so these sit above the device diff
   rather than below it. */
.draft-review-links { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 700px) { .draft-review-links { grid-template-columns: 1fr; } }
.draft-review-link {
  display: block; padding: .8rem .9rem; border-radius: 8px; text-decoration: none;
  background: var(--surface2); border: 1px solid var(--border); transition: border-color .15s;
}
.draft-review-link:hover { border-color: var(--accent); }
.drl-title { display: block; font-size: .85rem; font-weight: 600; color: var(--accent); }
.drl-sub { display: block; font-size: .74rem; color: var(--muted); margin-top: .25rem; line-height: 1.5; }

/* Pending-change flag beside a circuit name in the dashboard listing. Two
   weights: amber when the change is waiting on the person reading it, neutral
   when it's only telling them the drawing is about to move. Neither is red —
   a revision in review is normal operation, not a fault. */
.draft-flag {
  display: inline-block; vertical-align: middle; font-size: .66rem; font-weight: 700;
  letter-spacing: .03em; padding: .12rem .45rem; border-radius: 5px; margin-left: .5rem;
  white-space: nowrap;
  color: var(--muted); background: var(--surface3); border: 1px solid var(--border);
}
.draft-flag.action { color: var(--warning-dim); background: #271f08; border-color: #78350f; }

/* Workflow trail — one line per signature, rejection or withdrawal. */
.draft-event { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--border-subtle); }
.draft-event:last-child { border-bottom: none; }
.draft-event-main { flex: 1; min-width: 0; }
.draft-event-label { font-size: .8rem; font-weight: 600; color: #c9d1d9; }
.draft-event-note { font-size: .78rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }
.draft-event-meta { font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* ── Confirmation modal (reusable — circuit delete, scenario delete) ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 300;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  width: min(420px, 100%); padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-title { font-size: 1rem; font-weight: 700; color: #f0f6ff; margin-bottom: .6rem; }
.modal-body { font-size: .88rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.4rem; }
.modal-body strong { color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; }

.empty-state-block { text-align: center; padding: 3rem 1rem; color: #4a5568; font-size: .9rem; }

/* ── Free-text input with a suggestion dropdown (issued-to, compliance label) ── */
.typeahead-wrap { position: relative; }
.typeahead-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.typeahead-list.open { display: block; }
.typeahead-item { padding: .5rem .7rem; cursor: pointer; font-size: .84rem; color: var(--text); }
.typeahead-item .th-email,
.typeahead-item .th-sub { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.typeahead-item:hover, .typeahead-item.active { background: var(--surface3); }
.typeahead-empty { padding: .5rem .7rem; font-size: .78rem; color: var(--muted); }

/* ── Two-column dashboard layout (scenarios + attempt history, etc) ── */

.split-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } }

.diff-group { margin-bottom: 1.5rem; }

.history-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: .5rem; }
.history-title { font-size: .82rem; font-weight: 600; color: #c9d1d9; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta { font-size: .7rem; color: var(--muted); display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.empty-state { color: var(--muted); font-size: .82rem; padding: 1rem 0; }

.score-pill { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; }
.score-high { background: #1a2e24; color: var(--good); }
.score-mid { background: #2d2412; color: var(--warning-dim); }
.score-low { background: #2d1515; color: #fc8181; }

.compliance-pill { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; white-space: nowrap; }
.compliance-ok { background: #1a2e24; color: var(--good); }
.compliance-soon { background: #2d2412; color: var(--warning-dim); }
.compliance-expired { background: #2d1515; color: #fc8181; }
.compliance-list { display: flex; flex-direction: column; gap: .5rem; }
.compliance-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .8rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }

.row-actions { display: flex; align-items: center; gap: .5rem; }

.page-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header-row h1 { font-size: 1.15rem; font-weight: 700; color: #f0f6ff; }

/* ── Switching-order step builder ──────────────────────────────────────
   Shared by scenario_form.html (inline "create new order" builder) and
   switching_order_form.html (standalone order create/edit). */
.so-card-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.so-card-hdr h3 { margin-bottom: 0; }
.so-step-count { font-family: monospace; font-size: .72rem; color: var(--accent); font-weight: 700; }

.so-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin-bottom: .9rem; }
.so-toggle button { font-size: .75rem; font-weight: 600; padding: .4rem .9rem; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all .12s; }
.so-toggle button.active { background: var(--accent-strong); color: #fff; }
.so-toggle button:not(.active):hover { color: #c9d1d9; background: var(--surface3); }
.so-new-builder { border: 1px solid var(--border-subtle); border-radius: 8px; padding: .9rem 1rem; background: var(--bg); margin-top: .25rem; }

.so-steps-hdr { display: flex; gap: .6rem; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; padding: 0 .1rem; }
.so-steps-hdr span:nth-child(1) { width: 1rem; }
.so-steps-hdr span:nth-child(2) { width: 1.4rem; }
.so-steps-hdr span:nth-child(3) { width: 5.6rem; }
.so-steps-hdr span:nth-child(4) { width: 6.5rem; }
.so-steps-hdr span:nth-child(5) { flex: 1; }

.so-step-row {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface2); border: 1px solid var(--border-subtle); border-radius: 9px;
  padding: .55rem .65rem; margin-bottom: .5rem;
}
.so-step-num {
  width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: .68rem; font-weight: 700; color: var(--muted);
  background: var(--surface3); border: 1px solid var(--border);
}
.so-step-row select,
.so-step-row input[type="text"] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: .8rem; padding: .4rem .55rem;
  outline: none; transition: border-color .15s;
}
.so-step-row select:focus,
.so-step-row input[type="text"]:focus { border-color: var(--accent-strong); }
.so-step-row select.step-action { width: 7rem; flex-shrink: 0; font-weight: 700; }
.so-step-row select.step-device { width: 6.5rem; flex-shrink: 0; font-family: monospace; }
.so-step-row input[type="text"].step-text { flex: 1; min-width: 0; }
.step-action.act-open  { color: var(--danger); border-color: #5c2a2a; background: rgba(248,81,73,.08); }
.step-action.act-close { color: #34d058; border-color: #1e4620; background: rgba(52,208,88,.08); }
.step-action.act-ground   { color: #2ee6a8; border-color: #14532d; background: rgba(46,230,168,.08); }
.step-action.act-unground { color: #d29922; border-color: #78350f; background: rgba(210,153,34,.08); }
.step-action.act-none     { color: var(--muted); font-weight: 400; }
.so-step-remove { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--danger); font-size: .9rem; line-height: 1; padding: .3rem .55rem; cursor: pointer; flex-shrink: 0; }
.so-step-remove:hover { background: rgba(248,81,73,.08); border-color: #6e1a18; }
.so-step-handle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1rem; color: var(--muted); cursor: grab; touch-action: none;
}
.so-step-handle:hover { color: #c9d1d9; }
.so-step-row.dragging { opacity: .4; }
.so-step-row.drag-over { border-color: var(--accent); }
.so-step-performed {
  display: flex; align-items: center; gap: .35rem;
  margin: -.3rem 0 .55rem 2rem; font-size: .72rem; color: #34d058;
}
.so-step-performed strong { color: #c9d1d9; font-weight: 600; }
.so-add-step { width: 100%; font-size: .78rem; font-weight: 600; padding: .55rem; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--accent); cursor: pointer; margin-top: .2rem; }
.so-add-step:hover { border-color: var(--accent); background: #161d2b; }
.so-no-circuit { color: var(--muted); font-size: .8rem; padding: .4rem 0; }

.so-preview { border: 1px solid var(--border-subtle); border-radius: 8px; padding: .75rem .9rem; background: var(--bg); margin-top: .6rem; }
.so-preview-hdr { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; display: flex; gap: .5rem; align-items: center; }
.so-preview-meta { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .72rem; }
.so-prev-step {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--surface2); border: 1px solid var(--border-subtle); border-radius: 9px;
  padding: .5rem .65rem; margin-bottom: .4rem;
}
.so-prev-step:last-child { margin-bottom: 0; }
.so-prev-num {
  width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 6px; margin-top: .05rem;
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: .68rem; font-weight: 700; color: var(--muted);
  background: var(--surface3); border: 1px solid var(--border);
}
.so-prev-act { font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .18rem .45rem; border-radius: 4px; flex-shrink: 0; margin-top: .05rem; }
.so-prev-act.open { color: var(--danger); background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); }
.so-prev-act.close { color: #34d058; background: rgba(52,208,88,.1); border: 1px solid rgba(52,208,88,.4); }
.so-prev-act.none { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
.so-prev-body { min-width: 0; }
.so-prev-body .dev { font-size: .78rem; color: #c9d1d9; font-family: monospace; }
.so-prev-body .txt { font-size: .74rem; color: var(--muted); margin-top: .1rem; line-height: 1.4; }
.so-preview-loading { color: var(--muted); font-size: .78rem; }

/* ── Notice stack (impersonation, edit-mode, etc.) ─────────────────────
   Floating pills, not a layout-shifting bar, so they work identically
   across base.html's flex shell and the two raw viewer templates' fixed-
   offset layouts without needing to adjust topbar/sidebar offsets in three
   places. Bottom-centered to stay clear of those templates' own bottom-
   anchored floating chrome (zoom controls on the left, phase legend on the
   right). column-reverse keeps the last-added notice anchored at the
   classic bottom-most spot, with any others stacking upward above it, so
   a single notice looks identical to the old solo-pill layout. */
.notice-stack {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column-reverse; align-items: center;
  gap: 10px; pointer-events: none;
}
.notice-stack > * { pointer-events: auto; }
.notice-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 999px; font-size: .8rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap;
}
.notice-pill form { margin: 0; }
.notice-pill button {
  border: none; border-radius: 999px; padding: 6px 14px; font-size: .74rem;
  font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.notice-pill.impersonation-banner {
  background: #2d2412; border: 1px solid var(--warning); color: var(--warning-dim);
}
.notice-pill.impersonation-banner strong { color: var(--warning); }
.notice-pill.impersonation-banner button { background: var(--warning); color: #14161c; }
.notice-pill.impersonation-banner button:hover { background: var(--warning-dim); }
.notice-pill.edit-banner {
  background: #12212d; border: 1px solid var(--accent); color: #a8d2ff;
}
.notice-pill.edit-banner strong { color: var(--accent); }

/* ── Off-canvas sidebar (tablet & narrower) ───────────────────────────
   Above 1200px the sidebar stays put as a normal flex child. At or below
   it becomes a slide-in drawer so the working area (diagrams, switching
   orders) gets the full screen on a tablet — see also the matching rules
   duplicated in training_viewer_template.html, which uses fixed-offset
   positioning instead of flexbox and can't share this stylesheet's layout
   rules directly. Kept at the end of the file so
   these overrides win the cascade against the base .sidebar/.topbar rules
   above, which share the same selector specificity. */
@media (max-width: 1200px) {
  .sidebar-toggle { display: flex; }
  .topbar { padding-left: 68px; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 220;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 210;
  }
}