/* ============================================================
   Snagging System — light "Control Center" design system
   Self-contained, no external fonts/CDNs (no network dependency).
   ============================================================ */

:root {
  /* Brand / accent */
  --brand-50:  #eef0ff;
  --brand-100: #e0e3ff;
  --brand-200: #c7ccff;
  --brand-500: #6366f1;
  --brand-600: #5457e0;
  --brand-700: #4547c4;

  /* Status accents (critical=red, ongoing=amber, quality=green) */
  --red:    #e11d48;  --red-glow: rgb(225 29 72 / 0.18);   --red-bg: #fdecef;
  --amber:  #d97706;  --amber-glow: rgb(217 119 6 / 0.18);  --amber-bg: #fef3e2;
  --green:  #059669;  --green-glow: rgb(5 150 105 / 0.18);  --green-bg: #e7f7f0;
  --blue:   #2563eb;  --blue-bg: #eaf1fe;

  /* Neutrals — light scale (n-950 = near-white ... n-50 = near-black text) */
  --n-950: #f4f6fb;
  --n-900: #ffffff;
  --n-850: #ffffff;
  --n-800: #eef1f7;
  --n-700: #e3e7f0;
  --n-600: #cdd3e2;
  --n-500: #98a1b8;
  --n-400: #71799a;
  --n-300: #565f7d;
  --n-200: #3c4362;
  --n-100: #262b45;
  --n-50:  #14172a;

  /* Semantic (flash messages etc) */
  --ok-bg: #e7f7f0;    --ok-text: #067a56;    --ok-border: #bfe9d6;
  --warn-bg: #fef3e2;  --warn-text: #a3620a;  --warn-border: #fbdba0;
  --err-bg: #fdecef;   --err-text: #b7123a;   --err-border: #f8c3d0;
  --info-bg: #eaf1fe;  --info-text: #1d4ed8;  --info-border: #bfd6fb;
  --err-solid: var(--red); --ok-solid: var(--green); --warn-solid: var(--amber); --info-solid: var(--blue);

  /* Surfaces */
  --bg: var(--n-950);
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --border: #e5e8f0;
  --text: var(--n-100);
  --text-muted: var(--n-400);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.05);
  --shadow: 0 4px 16px -2px rgb(16 24 40 / 0.08);
  --shadow-lg: 0 16px 48px -8px rgb(16 24 40 / 0.14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 0.5rem; font-weight: 650; letter-spacing: -0.01em; color: var(--n-50); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.75rem; }
code { background: var(--n-800); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em; }
.muted { color: var(--text-muted); font-size: 0.9rem; }
.text-sm { font-size: 0.85rem; }
.text-center { text-align: center; }

/* ---------- App shell: sidebar + topbar ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--n-900);
  color: var(--n-300);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  border-right: 1px solid var(--border);
  transition: transform 0.2s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1.2rem 1.15rem;
  color: var(--n-50); font-weight: 700; font-size: 1.02rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-500), #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgb(99 102 241 / 0.35);
}
.sidebar-project {
  margin: 0.9rem 1rem 0.25rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--n-400);
}
.sidebar-project strong { display: block; color: var(--n-50); font-size: 0.92rem; font-weight: 600; margin-top: 0.15rem; }

.sidebar-nav { flex: 1; padding: 0.75rem 0.6rem; overflow-y: auto; }
.sidebar-nav .group-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--n-500); padding: 1rem 0.65rem 0.4rem; font-weight: 600;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.7rem; margin-bottom: 0.15rem;
  border-radius: var(--radius-sm);
  color: var(--n-300); font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.sidebar-nav a:hover { background: var(--surface-2); color: var(--n-50); }
.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--brand-500), #7c3aed);
  color: #fff; box-shadow: 0 4px 14px -2px rgb(99 102 241 / 0.4);
}
.sidebar-nav a.active svg { opacity: 1; }

.sidebar-user {
  padding: 0.9rem 1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.sidebar-user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), #a855f7);
  color: #fff; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-user .who { flex: 1; min-width: 0; }
.sidebar-user .who .name { font-size: 0.85rem; font-weight: 600; color: var(--n-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who a { font-size: 0.78rem; color: var(--n-400); }
.sidebar-user .who a:hover { color: var(--n-50); }

/* ---------- Top bar (persistent, "Control Center") ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
}
.topbar h1 { margin: 0; font-size: 1.15rem; white-space: nowrap; }
.topbar-search {
  flex: 1; max-width: 480px; position: relative;
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.5rem 1rem;
  color: var(--n-400); font-size: 0.85rem;
}
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.topbar-search input {
  background: transparent; border: none; color: var(--text); font-size: 0.85rem;
  flex: 1; outline: none; padding: 0;
}
.topbar-search input::placeholder { color: var(--n-500); }
.topbar-right { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.topbar-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--n-300);
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.topbar-icon-btn svg { width: 17px; height: 17px; }
.topbar-icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--surface); }
.topbar-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), #a855f7);
  color: #fff; font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}

.hamburger {
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--n-100); font-size: 1rem; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
#nav-toggle { display: none; }
.sidebar-backdrop { display: none; }

main.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
}
.content-inner { padding: 1.6rem 1.75rem 3rem; max-width: 1320px; }

/* ---------- Flash messages ---------- */
.flash-stack { margin: 1.25rem 1.75rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.flash {
  padding: 0.65rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem;
  border: 1px solid transparent; display: flex; align-items: center; gap: 0.5rem;
}
.flash.success { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.flash.error   { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }
.flash.info    { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap;
}
.card-header h2, .card-header h3 { margin: 0; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { margin-bottom: 0.2rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: linear-gradient(135deg, var(--brand-500), #7c3aed); color: #fff; border: 1px solid transparent;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.3;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(0.5px); }
button.btn, input[type=submit].btn { font-family: inherit; }
button { font-family: inherit; }
.btn.secondary { background: var(--surface); color: var(--n-200); border-color: var(--border); }
.btn.secondary:hover { background: var(--surface-2); filter: none; }
.btn.danger { background: var(--red); }
.btn.ghost { background: transparent; color: var(--n-300); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
form.inline { display: inline; }
form.inline-block { display: inline-block; }

button:not(.btn):not(.icon-btn) {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(135deg, var(--brand-500), #7c3aed); color: #fff; border: none;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
button:not(.btn):not(.icon-btn):hover { filter: brightness(1.08); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.badge.role { background: var(--brand-50); color: var(--brand-700); text-transform: none; }
.badge.gray { background: var(--surface-2); color: var(--n-300); border: 1px solid var(--border); text-transform: none; }
.badge.status-open      { background: var(--err-bg); color: var(--err-text); }
.badge.status-resolved  { background: var(--warn-bg); color: var(--warn-text); }
.badge.status-closed    { background: var(--ok-bg); color: var(--ok-text); }
.badge.status-no_snag   { background: var(--surface-2); color: var(--n-300); border: 1px solid var(--border); }

.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.count-pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.count-pill.info { background: var(--info-bg); color: var(--info-text); }
.count-pill.ok   { background: var(--ok-bg); color: var(--ok-text); }
.count-pill.flat { background: var(--surface-2); color: var(--n-500); border: 1px solid var(--border); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: -0.2rem -0.2rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
  color: var(--text-muted); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--n-600);
}
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
.empty-row td { padding: 2rem; text-align: center; color: var(--text-muted); }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--n-300); margin: 0.9rem 0 0.3rem; }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=password], input[type=email], input[type=file],
input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 0.55rem 0.75rem;
  border: 1px solid var(--n-600); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--text);
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
select[multiple] { padding: 0.4rem; }
.field-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }
.form-actions { margin-top: 1.4rem; display: flex; gap: 0.6rem; }
.form-narrow { max-width: 420px; }
.checkline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text); margin: 0.5rem 0; font-weight: 400; }
.checkline input { width: auto; }

/* ---------- Legacy flat stat tiles (reports page) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
}
.stat-tile .value { font-size: 1.7rem; font-weight: 750; color: var(--n-50); line-height: 1.1; }
.stat-tile .label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.stat-tile.accent-warn .value { color: var(--amber); }
.stat-tile.accent-info .value { color: var(--blue); }
.stat-tile.accent-ok .value { color: var(--green); }

/* ---------- Ring stat cards (dashboard hero) ---------- */
.ring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-bottom: 1.25rem; }
.ring-card {
  border-radius: var(--radius-lg); padding: 1.3rem 1.4rem;
  display: flex; align-items: center; gap: 1.1rem;
  border: 1px solid var(--border); position: relative; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.ring-card.red   { background: linear-gradient(160deg, var(--red-bg), var(--surface) 65%); }
.ring-card.amber { background: linear-gradient(160deg, var(--amber-bg), var(--surface) 65%); }
.ring-card.green { background: linear-gradient(160deg, var(--green-bg), var(--surface) 65%); }
.ring-card .ring-wrap { position: relative; width: 68px; height: 68px; flex-shrink: 0; }
.ring-card svg { width: 68px; height: 68px; transform: rotate(-90deg); }
.ring-card .ring-track { fill: none; stroke: var(--n-700); stroke-width: 7; }
.ring-card .ring-prog { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring-card.red .ring-prog { stroke: var(--red); }
.ring-card.amber .ring-prog { stroke: var(--amber); }
.ring-card.green .ring-prog { stroke: var(--green); }
.ring-card .ring-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.ring-card .label-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.ring-card.red .label-eyebrow { color: var(--red); }
.ring-card.amber .label-eyebrow { color: var(--amber); }
.ring-card.green .label-eyebrow { color: var(--green); }
.ring-card .value-big { font-size: 1.65rem; font-weight: 800; color: var(--n-50); line-height: 1.15; }
.ring-card .value-sub { font-size: 0.78rem; color: var(--n-400); }

/* ---------- Dashboard grid (floor plan + feed) ---------- */
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 1080px) { .dash-grid { grid-template-columns: 1fr; } }

/* Isometric floor stack */
.iso-wrap { padding: 1rem 0.5rem 0.5rem; position: relative; }
.iso-tower-picker { margin-bottom: 1rem; max-width: 220px; }
.iso-stack { display: flex; flex-direction: column-reverse; gap: 10px; padding: 0.5rem 0 1rem 2.5rem; position: relative; }
.iso-floor {
  position: relative;
  height: 34px;
  background: linear-gradient(100deg, var(--surface-2), var(--n-800));
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  display: flex; align-items: center; padding: 0 1.2rem;
  border: 1px solid var(--border);
  transition: filter 0.15s ease;
}
.iso-floor:hover { filter: brightness(0.97); }
.iso-floor .floor-label {
  font-size: 0.68rem; color: var(--n-400); position: absolute; left: -2.5rem; width: 2.2rem; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iso-floor .dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 0.6rem; flex-shrink: 0; }
.iso-floor.sev-none .dot { background: var(--n-500); }
.iso-floor.sev-low  .dot { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.iso-floor.sev-mid  .dot { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.iso-floor.sev-high .dot { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.iso-floor .floor-text { font-size: 0.78rem; color: var(--n-200); }
.iso-floor .floor-count { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--n-100); }
.iso-callout {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 0.8rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.iso-callout .dot-big { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; box-shadow: 0 0 6px var(--red-glow); }

/* Snag feed */
.feed-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 0.85rem; background: var(--surface-2); }
.feed-item:last-child { margin-bottom: 0; }
.feed-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.35rem; }
.feed-item-title { font-size: 0.9rem; font-weight: 650; color: var(--n-50); }
.feed-item-meta { font-size: 0.76rem; color: var(--n-400); margin-bottom: 0.6rem; }
.feed-photo { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.feed-photo-empty {
  width: 100%; height: 90px; border-radius: var(--radius-sm); border: 1px dashed var(--n-600);
  display: flex; align-items: center; justify-content: center; color: var(--n-500); font-size: 0.75rem;
}
.feed-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.feed-assignee { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.feed-assignee .mini-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--n-700); color: var(--n-100);
  font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ---------- Flat cards (raiser flat list) ---------- */
.flat-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; }
.flat-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.05rem 1.1rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.flat-card:hover { box-shadow: var(--shadow); border-color: var(--brand-200); transform: translateY(-1px); text-decoration: none; }
.flat-card .flat-card-no { font-size: 1.05rem; font-weight: 750; color: var(--n-50); }
.flat-card .flat-card-loc { font-size: 0.76rem; color: var(--n-400); margin: 0.15rem 0 0.7rem; }
.flat-card .flat-card-customer { font-size: 0.74rem; color: var(--n-400); margin-top: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flat-card-dots { display: flex; gap: 0.9rem; }
.flat-card-dots .fcd { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; color: var(--n-400); }
.flat-card-dots .fcd .dot { width: 8px; height: 8px; border-radius: 50%; }
.flat-card-dots .fcd.open .dot { background: var(--red); }
.flat-card-dots .fcd.resolved .dot { background: var(--amber); }
.flat-card-dots .fcd.closed .dot { background: var(--green); }
.flat-card-dots .fcd.zero { opacity: 0.35; }
.flat-card.all-clear { border-color: var(--ok-border); }

/* ---------- Category chip picker ---------- */
.chip-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-picker .chip {
  display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--n-300);
  font-size: 0.83rem; font-weight: 600; cursor: pointer; user-select: none;
  transition: all 0.12s ease;
}
.chip-picker .chip:hover { border-color: var(--brand-500); color: var(--brand-700); }
.chip-picker input:checked + .chip {
  background: linear-gradient(135deg, var(--brand-500), #7c3aed); border-color: transparent; color: #fff;
}
.chip-picker.chip-sm .chip { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.chip-picker .chip.chip-all { background: var(--surface-2); }
.chip-picker .chip.active {
  background: linear-gradient(135deg, var(--brand-500), #7c3aed); border-color: transparent; color: #fff;
}

/* ---------- Photo preview (raise/resolve forms) ---------- */
.photo-drop {
  border: 1.5px dashed var(--n-600); border-radius: var(--radius); padding: 1.1rem;
  text-align: center; cursor: pointer; background: var(--surface-2); position: relative;
}
.photo-drop:hover { border-color: var(--brand-500); }
.photo-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-drop .hint { font-size: 0.82rem; color: var(--n-400); }
.photo-drop .hint svg { width: 22px; height: 22px; margin-bottom: 0.4rem; display: block; margin-inline: auto; opacity: 0.6; }
.photo-preview-img { max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); display: none; margin: 0 auto; }

/* ---------- Snag cards (solver list + raiser history) ---------- */
.snag-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.snag-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.snag-card .sc-photo { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--surface-2); }
.snag-card .sc-photo-empty {
  width: 100%; height: 120px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--n-500); font-size: 0.75rem;
}
.snag-card .sc-body { padding: 0.85rem 0.95rem; flex: 1; display: flex; flex-direction: column; }
.snag-card .sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.3rem; }
.snag-card .sc-loc { font-size: 0.88rem; font-weight: 700; color: var(--n-50); }
.snag-card .sc-meta { font-size: 0.74rem; color: var(--n-400); margin-bottom: 0.5rem; }
.snag-card .sc-obs { font-size: 0.82rem; color: var(--n-200); margin-bottom: 0.7rem; flex: 1; }
.snag-card .sc-actions { margin-top: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Leaderboard */
.lb-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.lb-row:last-child { border-bottom: none; }
.lb-row .mini-avatar {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--n-200);
  font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid var(--border);
}
.lb-row .lb-name { font-size: 0.85rem; font-weight: 600; color: var(--n-50); }
.lb-row .lb-sub { font-size: 0.72rem; color: var(--n-400); }
.lb-bar { height: 5px; border-radius: 3px; background: var(--n-700); margin-top: 0.3rem; overflow: hidden; }
.lb-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), #34d399); }
.lb-bar-fill.warn { background: linear-gradient(90deg, var(--amber), #fbbf24); }

/* ---------- Action cards (home quick links) ---------- */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.action-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.3rem; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.action-card:hover { box-shadow: var(--shadow); border-color: var(--brand-200); transform: translateY(-1px); text-decoration: none; }
.action-card .icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-600);
}
.action-card .icon svg { width: 20px; height: 20px; }
.action-card h3 { margin-bottom: 0.25rem; color: var(--n-50); }
.action-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.action-card .go { margin-top: 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--brand-600); }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state svg { width: 40px; height: 40px; color: var(--n-600); margin-bottom: 0.75rem; }

/* ---------- Login screen ---------- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, var(--brand-50), transparent 45%),
    radial-gradient(circle at 85% 80%, #f3e8ff, transparent 45%),
    var(--bg);
  padding: 1.5rem;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 2.2rem 2rem;
}
.auth-card .mark {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--brand-500), #a855f7);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
  box-shadow: 0 6px 18px rgb(99 102 241 / 0.35);
}
.auth-card h1 { text-align: center; font-size: 1.3rem; }
.auth-card p.muted { text-align: center; margin-bottom: 1.4rem; }
.project-pick {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0.9rem; margin: 0.55rem 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.project-pick:hover { border-color: var(--brand-500); background: var(--brand-50); }
.project-pick input { width: auto; margin: 0; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: 0.5rem; } .gap { gap: 0.85rem; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.wrap { flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); top: var(--topbar-h); }
  #nav-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }
  #nav-toggle:checked ~ .sidebar-backdrop { display: block; }
  .sidebar-backdrop {
    position: fixed; inset: 0; top: var(--topbar-h); background: rgb(15 20 35 / 0.4); z-index: 35;
  }
  .hamburger { display: flex; }
  .topbar-search { display: none; }
  main.content { margin-left: 0; }
  .content-inner { padding: 1.25rem 1rem 2.5rem; }
  .flash-stack { margin: 1.25rem 1rem 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: 1.1rem; }
  .ring-grid { grid-template-columns: 1fr; }
}