/* =====================================================================
   app-shell.css — authenticated console layout + shared primitives
   Built on the design tokens defined in styles.css (load styles.css first).
   Used by all worker / agent / staff console pages.
   ===================================================================== */

/* Extra tokens layered on top of styles.css */
:root {
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --nav-h: 64px; /* universal public nav height on console pages */
  --surface: #ffffff;
  --border: #e8edf6;
  --gray-bg: #f8faff; /* referenced by fixture inline styles (e.g. expanded applicant rows); was undefined here */
  --blue-soft: rgba(59,130,246,0.10);
  --green: #00915c;              /* reference "instant" green family (viewJobs) */
  --green-soft: #e6faf3;         /* = --instant-bg / --success-bg on public pages */
  --amber: #b45309;              /* warmed to match .tier-bronze */
  --amber-soft: #fdf3e4;
  --red: #ef4444;                /* = --error on public forms */
  --red-soft: #fef2f2;           /* = --error-bg */
}

/* ---------- Shell layout ---------- */
/* Console pages sit under the universal public nav (nav.css). The frame is the
   GitLab pattern in TaskPool clothes: global bar on top, light rail on the left,
   fluid content, canonical footer below. */
.app { display: flex; min-height: calc(100vh - var(--nav-h)); align-items: stretch; }

body.console > nav { height: var(--nav-h); padding: 0 28px; }
body.console > nav .topbar-avatar { flex: 0 0 auto; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}

/* Context header — role "project tile", GitLab-style */
.sidebar-context {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 10px;
}
.sidebar-context .ctx-tile {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--blue); color: #ffffff;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-context .ctx-meta { min-width: 0; display: flex; flex-direction: column; }
.sidebar-context .ctx-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-context .ctx-sub { font-size: 0.72rem; color: var(--text-muted); }

/* Reset the global `nav {}` rule from styles.css, which otherwise leaks a white
   background, sticky positioning, border, shadow and horizontal space-between
   flex onto this <nav> and breaks the vertical sidebar list. */
.sidebar-nav {
  flex: 1;
  padding: 4px 8px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  position: static;
  z-index: auto;
}

.sidebar-section-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 16px 10px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-link svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); transition: color 0.15s; }
.sidebar-link:hover { background: rgba(2,12,69,0.05); color: var(--ink); }
.sidebar-link:hover svg { color: var(--ink); }
.sidebar-link.active { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.sidebar-link.active svg { color: var(--blue-dark); }
.sidebar-link .link-badge {
  margin-left: auto;
  background: rgba(2,12,69,0.07);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 1px 8px;
}
.sidebar-link.active .link-badge { background: rgba(59,130,246,0.16); color: var(--blue-dark); }

.sidebar-foot {
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-foot .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
}
.sidebar-foot .who { min-width: 0; }
.sidebar-foot .who .name { color: var(--ink); font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who .email { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot .sign-out-btn { border-radius: 8px; transition: background 0.15s; }
.sidebar-foot .sign-out-btn:hover { background: rgba(2,12,69,0.06); }

/* ---------- Main column ---------- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 50%;
  background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--white);
}

.topbar-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--blue); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
}

.app-content {
  flex: 1;
  padding: 22px 32px 56px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Page header ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.page-head .sub { font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* GitLab-style breadcrumb trail at the top of every console page */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 16px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs .crumb-sep { color: var(--gray-mid); }
.crumbs .crumb-here { color: var(--ink); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-mid);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,0.04); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #ffffff; }
.btn-danger { background: var(--red); border-color: var(--red); color: #ffffff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
.btn-ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--blue); background: var(--blue-soft); }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards (flat, 1px, GitLab-panel weight) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-family: 'Sora', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.card-body { padding: 20px; }
.card-body.tight { padding: 8px 20px; }

/* ---------- KPI tiles ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: grid;
  /* label hugs the value at the same tight gap as value→sub (≈2px) */
  grid-template-rows: auto 1fr auto;
}
.kpi-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; text-align: center; margin-bottom: 2px; }
/* rows that use sub-labels reserve the two-line label band so values stay level */
.kpi-row:has(.kpi-note) .kpi-label { min-height: 32px; }
.kpi-note { display: block; font-size: 0.72rem; font-weight: 400; font-style: italic; color: var(--text-muted); margin-top: 1px; }
.kpi-value { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); align-self: center; justify-self: center; text-align: center; padding: 2px 0; }
.kpi-value.green { color: var(--green); }
/* value with no sub line beneath: scale up to fill the value+sub band */
.kpi-value:last-child { font-size: 2.3rem; }
.kpi-value .rep-tier { font-size: 0.85rem; height: 2.4rem; padding: 0 18px; } /* pill box matches the 1.5rem value line height */
.kpi-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; text-align: center; min-height: 1.05rem; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  /* Long tables (audit, accounts) keep their column context while scrolling.
     Works inside .table-wrap and page scroll alike; the surface background
     stops rows showing through. */
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.88rem; vertical-align: middle; }
.table tbody tr:last-child td, .table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 0.12s; }
.table tbody tr:hover { background: var(--bg); }
.row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--blue); }
.table .muted { color: var(--text-muted); font-size: 0.85rem; }
.table .num { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---------- Badges ---------- */
/* Base applies to bare variant usage too (fixtures use e.g. class="badge-amber" alone) */
.badge, .badge-blue, .badge-green, .badge-amber, .badge-red, .badge-muted, .badge-gray, .badge-navy {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700;
  border-radius: 6px;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-blue    { background: var(--blue-soft);  color: var(--blue-dark); border-color: rgba(59,130,246,0.25); }
.badge-green   { background: var(--green-soft); color: var(--green); border-color: rgba(0,194,122,0.3); }
.badge-amber   { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,0.22); }
.badge-red     { background: var(--red-soft);   color: var(--red); border-color: rgba(239,68,68,0.25); }
.badge-muted   { background: var(--gray-light); color: var(--text-muted); border-color: var(--gray-mid); }
.badge-gray    { background: var(--gray-light); color: var(--text-muted); border-color: var(--gray-mid); } /* alias — templates use both names */
.badge-navy    { background: rgba(2,12,69,0.08); color: var(--ink); border-color: rgba(2,12,69,0.18); }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state .empty-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.empty-state h3 { font-family: 'Sora', sans-serif; font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.empty-state p { font-size: 0.88rem; max-width: 340px; margin: 0 auto 16px; line-height: 1.6; }

/* ---------- Notices ---------- */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.88rem; line-height: 1.5;
  margin-bottom: 18px;
}
.notice svg { flex-shrink: 0; margin-top: 1px; }
.notice-info  { background: var(--blue-soft);  color: var(--blue-dark); }
.notice-warn  { background: var(--amber-soft); color: var(--amber); }
.notice-danger{ background: var(--red-soft);   color: #b91c1c; }
.notice-success{ background: var(--green-soft);color: var(--green); }
/* Non-semantic asides that shouldn't borrow a feedback colour. */
.notice-neutral{ background: var(--gray-light, #e8edf6); color: var(--text-muted); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--red); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field input[type="date"],
.field input[type="datetime-local"],
.field select,
.field textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  padding: 11px 13px;
  border: 1.5px solid var(--gray-mid);
  border-radius: var(--radius);
  background: var(--white);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80,162,255,0.15); /* public-form focus ring */
}
.field .field-hint { font-size: 0.78rem; color: var(--text-muted); }
.field .label-hint { font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
/* Placeholders must read as examples, not entered values — the public forms
   set this deliberately (logIn/signUp.css); the console needs the same rule or
   dark mode leaves placeholder contrast to browser luck. */
.field ::placeholder, .filters-bar ::placeholder { color: var(--text-muted); opacity: 0.7; }

/* A refused submit has to look refused. The status line sits under the whole grid, often several
   fields away from the one at fault, so in muted hint grey it reads as instructions — the button
   looks like it simply did nothing. .is-error colours the line and rings the offending field, which
   the page also focuses. Shared here rather than per page: agent/keys.html had already reached for
   an inline style:color to say the same thing. */
.field-hint.is-error { color: var(--red); font-weight: 600; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--red); }
.field.is-error input:focus, .field.is-error select:focus, .field.is-error textarea:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft);
}
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Inline form feedback — mirrors .form-alert on the public sign-up/login forms */
.form-alert {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.88rem;
  display: none;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
  background: var(--red-soft);
  color: #991b1b;
  border: 1px solid rgba(239,68,68,0.25);
}
.form-alert.visible { display: flex; }
.form-alert.success { background: var(--green-soft); color: #065f46; border-color: rgba(0,194,122,0.3); }

/* Dashed drop / placeholder zone — same affordance as the sign-up photo upload */
.captcha-box {
  min-height: 66px;
  border: 2px dashed var(--gray-mid);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.captcha-box:hover { border-color: var(--blue); background: rgba(80,162,255,0.03); }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text); }
.checkbox-row input { margin-top: 3px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select label {
  font-size: 0.85rem; padding: 7px 14px;
  border: 1.5px solid var(--gray-mid); border-radius: 50px;
  cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.chip-select input { display: none; }
.chip-select input:checked + span, .chip-select label:hover { color: var(--blue); }
.chip-select label:has(input:checked) { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* ---------- Detail layout (main + aside) ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.def-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 0.9rem; }
.def-list dt { color: var(--text-muted); }
.def-list dd { color: var(--ink); font-weight: 500; }

/* ---------- Message thread ---------- */
.thread { display: flex; flex-direction: column; gap: 14px; }
.thread-msg { display: flex; gap: 10px; max-width: 82%; }
.thread-msg .t-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 600; color: #ffffff; background: var(--text-muted);
}
.thread-msg .t-bubble { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; line-height: 1.5; }
.thread-msg .t-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.thread-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.thread-msg.me .t-bubble { background: var(--blue-soft); border-color: transparent; color: var(--blue-dark); }
.thread-msg.me .t-avatar { background: var(--blue); }
.thread-msg.internal .t-bubble { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.composer { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.composer input { flex: 1; padding: 11px 13px; border: 1.5px solid var(--gray-mid); border-radius: var(--radius); font-family: inherit; font-size: 0.9rem; }
.composer input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(80,162,255,0.15); }

/* ---------- Reputation (tier + score) — replaces the 5-star widget ---------- */
.rep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-tier {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Sora', sans-serif; font-size: 0.8rem; font-weight: 700;
  padding: 5px 12px; border-radius: 50px;
  border: 1.5px solid;
}
.rep-tier::before { content: '●'; font-size: 0.7rem; }
.tier-bronze   { color: #b45309; border-color: #f6d5a8; background: #fdf5ea; }
.tier-silver   { color: #475569; border-color: #d7dee8; background: #f4f6fa; }
.tier-gold     { color: #b8860b; border-color: #f2e0a0; background: #fdf9ec; }
.tier-platinum { color: #0f766e; border-color: #bfe4df; background: #edf8f6; }
.score-bar { flex: 1; min-width: 120px; height: 8px; background: var(--gray-light); border-radius: 50px; overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: var(--blue); border-radius: 50px; }
.score-num { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.review-score { display: inline-flex; gap: 2px; font-size: 0.9rem; }
.review-score .pip { width: 18px; height: 6px; border-radius: 3px; background: var(--gray-light); }
.review-score .pip.on { background: var(--green); }

/* ---------- Copy field (API key shown once) ---------- */
.copy-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #ffffff;
  border-radius: var(--radius); padding: 12px 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem;
  word-break: break-all;
}
.copy-field button { margin-left: auto; flex-shrink: 0; }

/* ---------- Tabs / filter bar ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 16px; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; }
.tab:hover { color: var(--blue); }
.tab.active { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }
.filters-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filters-bar select, .filters-bar input {
  padding: 8px 12px; border: 1.5px solid var(--gray-mid); border-radius: var(--radius);
  font-family: inherit; font-size: 0.85rem; background: var(--white);
}

.stack-sm > * + * { margin-top: 8px; }
.muted { color: var(--text-muted); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Unclassed links in page content default to the brand link colour
   (public pages never show UA-blue underlined links). */
.app-content a:not([class]) { color: var(--blue); text-decoration: none; }
.app-content a:not([class]):hover { color: var(--blue-dark); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  body.console > nav { padding: 0 14px; }
  .sidebar {
    width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; overflow-x: auto; padding: 0 8px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-context, .sidebar-section-label, .sidebar-foot, .sidebar-link .link-badge { display: none; }
  .sidebar-nav { display: flex; flex-direction: row; align-items: center; padding: 0; flex: 1; }
  .sidebar-link { white-space: nowrap; margin: 6px 2px; }
  /* minmax(0,…), not a bare 1fr: a bare 1fr is minmax(auto,1fr), and `auto` lets wide
     content (a table cell, an unbreakable KPI money string) set the track's minimum — the
     column then overflows the viewport instead of staying inside it (the desktop
     .detail-grid rule above guards the same way). */
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .app-content { padding: 22px 18px 48px; }
  .topbar { padding: 0 18px; }
}

/* ---------- Skills editor (category + free-form name + evidence: File/Link/Text) ---------- */
.skills-manager { margin-top: 4px; }
.skills-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.skills-list:empty { display: none; }
.skill-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.skill-item-head { display: flex; align-items: center; gap: 10px; }
.skill-cat { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); background: var(--blue-soft); padding: 2px 8px; border-radius: 50px; white-space: nowrap; }
/* Belt-and-braces for the nullable category — skills.js omits the pill entirely,
   but any other renderer emitting an empty one would show a bare padded chip. */
.skill-cat:empty { display: none; }
.skill-name { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.skill-evidence-toggle { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.78rem; font-family: inherit; padding: 4px 8px; border-radius: 6px; }
.skill-evidence-toggle:hover { color: var(--blue); background: var(--blue-soft); }
.skill-evidence-toggle.has-evidence { color: var(--green); }
.skill-remove { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1.15rem; line-height: 1; padding: 0 2px; }
.skill-remove:hover { color: var(--red); }
.skill-evidence-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.skill-evidence-items:empty { display: none; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px 3px 8px; font-size: 0.78rem; color: var(--text); }
.ev-chip .ev-icon { font-size: 0.8rem; line-height: 1; }
.ev-chip .ev-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-chip .ev-remove { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.95rem; line-height: 1; padding: 0 2px; }
.ev-chip .ev-remove:hover { color: var(--red); }
.skill-evidence-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.skill-evidence-form select, .skill-ev-value { padding: 7px 10px; border: 1.5px solid var(--gray-mid); border-radius: 8px; font-family: inherit; font-size: 0.82rem; background: var(--white); }
.skill-ev-value { flex: 1; min-width: 160px; }
.skill-ev-btn { border: 1.5px solid var(--gray-mid); background: var(--white); color: var(--text); font-family: inherit; font-size: 0.8rem; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.skill-ev-btn:hover { border-color: var(--blue); color: var(--blue); }
.skill-ev-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.skill-ev-btn.primary:hover { color: #fff; }
.skills-add { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.skills-add .field { margin: 0; }

/* ---------- Dark mode (console only) — toggled by JS/theme.js ---------- */
/* Smooth theme switch — only while .theme-anim is set (toggle press), so
   page loads restore dark mode instantly with no light→dark flash-fade. */
body.console.theme-anim, body.console.theme-anim *, body.console.theme-anim *::before, body.console.theme-anim *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.console.dark {
  --bg: #0b1226;
  --surface: #111a38;
  --border: #26325c;
  --gray-bg: #16203f;
  --gray-light: #1c2749;
  --gray-mid: #34426e;
  --text: #dbe4f8;
  --text-muted: #93a3c8;
  /* --navy stays the dark brand colour here too; the ink twin (--ink, flipped by body.dark in
     styles.css) is what headings and labels use. Flipping --navy itself was the old workaround and
     it turned the one console surface painted with it — .copy-field, which shows an API key once,
     in white on it — into white-on-white. */
  --blue-soft: rgba(59,130,246,0.16);
  --green: #34d399;
  --green-soft: rgba(52,211,153,0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251,191,36,0.14);
  --red: #f87171;
  --red-soft: rgba(248,113,113,0.14);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  background: var(--bg);
  color: var(--text);
}
/* nav + footer chrome use literal hexes — repaint the shell pieces */
body.console.dark > nav { background: var(--surface); border-bottom-color: var(--border); }
body.console.dark > nav .logo { color: #ffffff; }
body.console.dark > nav .nav-links a { color: var(--text); }
body.console.dark > nav .nav-links a:hover, body.console.dark > nav .nav-links a.active { color: var(--blue-light); }
body.console.dark .nav-dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
body.console.dark .nav-dropdown-menu a { color: var(--text); }
body.console.dark .nav-dropdown-menu a:hover { background: rgba(59,130,246,0.12); color: var(--blue-light); }
body.console.dark .icon-btn, body.console.dark .tp-chat-launch { background: transparent; border-color: var(--gray-mid); color: var(--text-muted); }
body.console.dark .icon-btn:hover, body.console.dark .tp-chat-launch:hover { border-color: var(--blue-light); color: var(--blue-light); }
/* badge rings are white in light mode — ring with the dark nav surface instead */
body.console.dark .icon-btn .dot, body.console.dark .tp-chat-badge { border-color: var(--surface); }
body.console.dark .sidebar, body.console.dark .sidebar-foot { background: var(--surface); }
body.console.dark .sidebar-link:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
body.console.dark .sidebar-link .link-badge { background: rgba(255,255,255,0.08); }
body.console.dark .sidebar-foot .sign-out-btn:hover, body.console.dark .sidebar-foot .theme-toggle-btn:hover { background: rgba(255,255,255,0.08); }
body.console.dark .btn { background: var(--surface); border-color: var(--gray-mid); color: var(--text); }
body.console.dark .btn:hover { border-color: var(--blue); color: var(--blue-light); background: rgba(59,130,246,0.08); }
body.console.dark .btn-primary, body.console.dark .btn-primary:hover { color: #ffffff; }
body.console.dark .btn-primary { background: var(--blue); border-color: var(--blue); }
body.console.dark .btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
body.console.dark .btn-ghost { background: none; border-color: transparent; color: var(--text-muted); }
body.console.dark .btn-ghost:hover { color: var(--blue-light); background: var(--blue-soft); }
body.console.dark .filters-bar select, body.console.dark .filters-bar input,
body.console.dark .field input, body.console.dark .field select, body.console.dark .field textarea,
body.console.dark .composer input { background: var(--surface); color: var(--text); border-color: var(--gray-mid); }
/* Repeated at this specificity because the rule above would otherwise repaint the error ring away. */
body.console.dark .field.is-error input,
body.console.dark .field.is-error select,
body.console.dark .field.is-error textarea { border-color: var(--red); }
body.console.dark .badge-navy { background: rgba(232,238,252,0.10); color: var(--ink); border-color: rgba(232,238,252,0.22); }
body.console.dark .sidebar-foot .theme-toggle-btn { border-radius: 8px; transition: background 0.15s; }
/* blue-dark reads too dim on dark surfaces */
body.console.dark .sidebar-link.active, body.console.dark .sidebar-link.active svg,
body.console.dark .badge-blue, body.console.dark .notice-info,
body.console.dark .thread-msg.me .t-bubble { color: var(--blue-light); }
body.console.dark .sidebar-link.active .link-badge { background: rgba(80,162,255,0.16); color: var(--blue-light); }
/* ── QA dark-mode accessibility fixes ── */
body.console.dark { color-scheme: dark; }
body.console.dark .notice-danger { color: var(--red); } /* latent: literal #b91c1c too dim on dark */
body.console.dark .copy-field { background: #020C45; color: #ffffff; }
body.console.dark .tier-bronze   { color: #e6b980; border-color: rgba(230,185,128,0.40); background: rgba(230,185,128,0.12); }
body.console.dark .tier-silver   { color: #c3cede; border-color: rgba(195,206,222,0.38); background: rgba(195,206,222,0.10); }
body.console.dark .tier-gold     { color: #e8c86a; border-color: rgba(232,200,106,0.40); background: rgba(232,200,106,0.12); }
body.console.dark .tier-platinum { color: #5ec9bd; border-color: rgba(94,201,189,0.40); background: rgba(94,201,189,0.12); }

/* Link-styled button: for inline actions that read as links (Refresh, Show all,
   audit row expanders) — replaces the background:none;border:none inline blobs. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* ---------- Loading: shared spinner + skeleton ---------- */
/* Single-sourced spinner (was duplicated in logIn.css/signUp.css, which keep
   their copies until verified removable). Usable on any console button too. */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton placeholder: grey bars where content will land, so async loads keep
   their height instead of collapsing to a one-line "Loading…" row and jumping.
   JS swaps these for real rows — same ~32 sites the text placeholders used. */
.skeleton {
  display: inline-block;
  width: 100%;
  min-height: 0.9em;
  background: linear-gradient(90deg, var(--gray-light, #e8edf6) 25%, var(--surface, #ffffff) 50%, var(--gray-light, #e8edf6) 75%);
  background-size: 200% 100%;
  animation: tp-shimmer 1.4s ease infinite;
  border-radius: 6px;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
@keyframes tp-shimmer { to { background-position: -200% 0; } }
body.console.dark .skeleton {
  background-image: linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%);
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Notifications list (notifications.html) ---------- */
/* Read rows recede so the unread ones carry the page. */
.table tr[data-read="true"] td { opacity: 0.75; }
/* Date-group separators (Today / Yesterday / This week / Earlier). */
.table tr.notif-group td {
  padding: 14px 16px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: none;
}