:root{
  --red:#c60c30; --red-dark:#9a0a25; --red-light:#fce8ec; --red-mid:rgba(198,12,48,0.08);
  --text:#1a1a1a; --text2:#555; --text3:#999;
  --border:#e5e7eb; --border2:#d1d5db;
  --bg:#f7f8fa; --white:#ffffff;
  --green:#16a34a; --green-light:#dcfce7;
  --amber:#d97706; --amber-light:#fef3c7;
  --blue:#2563eb; --blue-light:#eff6ff;
  --font:'Nunito Sans',sans-serif;
  --font-display:'Nunito',sans-serif;
  --font-mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
.hidden{display:none!important;}
a{color:inherit;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideInRight{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* ─── APP SHELL ─────────────────────────── */
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ─── TOPBAR ─────────────────────────────── */
.topbar{
  /* min-height, not height: if the brand name/subtitle ever need more than
     one line (long team name + team-switcher squeezing available width on
     narrow screens), the bar grows to fit instead of clipping/overlapping
     the content above and below it — a fixed height can't do that, it just
     centers the overflow half above and half below the box. */
  min-height:64px;background:var(--red);box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:flex;align-items:center;padding:0 28px;gap:16px;
  position:sticky;top:0;z-index:50;
}
.tb-brand{display:flex;align-items:center;gap:12px;flex-shrink:1;}
.tb-logo{height:30px;width:auto;display:block;flex-shrink:0;}
/* 90px, not 0: a flex child's default min-width is "however wide its
   content naturally is" (the classic flexbox min-width:auto trap), which
   blocks the ellipsis truncation below from ever engaging — but min-width:0
   removes that floor entirely, letting this column get squeezed all the
   way to invisible when other topbar elements (team switcher, admin
   buttons) compete for space. 90px keeps a few characters + "…" visible
   instead of nothing. */
.tb-brand > div{min-width:90px;overflow:hidden;}
/* min-width:0 on both: they're flex items of .inline-editable-row too, one
   level down from .tb-brand > div — without it here as well, each still
   refuses to shrink past its own text's natural width and the ellipsis
   below never actually gets room to engage. */
.tb-name{font-family:var(--font-display);font-size:1rem;font-weight:800;color:white;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tb-sub{font-size:.7rem;color:rgba(255,255,255,.68);font-family:var(--font);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tb-sep{flex:1;}
.tb-theme-btn{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:white;
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s;flex-shrink:0;
}
.tb-theme-btn:hover{background:rgba(255,255,255,.28);}
.admin-controls-row{display:flex;align-items:center;gap:12px;}
#btn-mobile-menu{display:none;}
.badge-admin{background:white;color:var(--red);font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:20px;}
.edit-toggle-wrap{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:6px 12px;border-radius:20px;}
.edit-toggle-label{font-size:.75rem;font-weight:700;color:white;font-family:var(--font);white-space:nowrap;}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.35);border-radius:20px;transition:background .18s;}
.switch-slider::before{content:'';position:absolute;height:14px;width:14px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .18s;}
.switch input:checked + .switch-slider{background:#fff;}
.switch input:checked + .switch-slider::before{transform:translateX(16px);background:var(--red);}
.tb-signout,.tb-login-btn{
  background:white;border:none;color:var(--red);font-size:.8rem;font-weight:700;
  padding:8px 16px;border-radius:7px;cursor:pointer;font-family:var(--font);
  transition:all .18s;display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.tb-signout:hover,.tb-login-btn:hover{background:var(--red-dark);color:white;}
.tb-user-email{font-size:.72rem;color:rgba(255,255,255,.7);font-family:var(--font-mono);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-manage-btn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:white;
  font-size:.78rem;font-weight:700;padding:7px 14px;border-radius:7px;cursor:pointer;
  font-family:var(--font);transition:background .18s;white-space:nowrap;
}
.tb-manage-btn:hover{background:rgba(255,255,255,.28);}

/* ─── TEAM SWITCHER (topbar, visible to every viewer, not just admins) ───
   Custom button + popup menu, not a native <select> — a native select's
   arrow is drawn by the browser/OS at the box's fixed right edge (not
   controllable via CSS) and the box always sizes to its WIDEST option
   ("Information Technology"), not the current one, forcing either a big
   gap before the arrow or truncated text. A custom control sizes to its
   actual content and keeps the icon adjacent to the text. */
.tb-team-wrap{position:relative;flex-shrink:0;}
.team-select-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:white;
  height:36px;padding:0 12px;border-radius:7px;font-family:var(--font);
  font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s;
}
.team-select-btn:hover{background:rgba(255,255,255,.22);}
.team-select-btn:focus{outline:none;border-color:rgba(255,255,255,.75);}
.team-select-caret{flex-shrink:0;transition:transform .15s;}
.team-select-btn[aria-expanded="true"] .team-select-caret{transform:rotate(180deg);}

.team-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:100%;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;z-index:60;
  max-height:min(320px,70vh);overflow-y:auto;
}
.team-select-option{
  display:block;width:100%;text-align:left;padding:8px 12px;border-radius:6px;border:none;
  background:none;font-family:var(--font);font-size:.85rem;font-weight:600;color:var(--text);
  cursor:pointer;white-space:nowrap;
}
.team-select-option:hover{background:var(--bg);}
.team-select-option.active{background:var(--red-light);color:var(--red);}

/* ─── DASHBOARD SETTINGS MODAL ───────────── */
.settings-section-title{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-family:var(--font-mono);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:10px;}
.form-grid-sm{display:flex;flex-direction:column;gap:4px;}
.settings-tabs{display:flex;gap:4px;padding:3px;background:var(--bg);border:1px solid var(--border);border-radius:9px;width:fit-content;margin-bottom:18px;}
.settings-tab{padding:6px 16px;border-radius:6px;border:none;background:transparent;font-size:.8rem;font-family:var(--font);font-weight:600;color:var(--text2);cursor:pointer;transition:background .15s,color .15s;}
.settings-tab:hover{color:var(--text);}
.settings-tab.active{background:var(--white);color:var(--red);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.settings-tab-panel.hidden{display:none;}
.history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);}
.history-row-info{min-width:0;}
.history-row-heading{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-row-meta{font-size:.68rem;color:var(--text3);font-family:var(--font-mono);margin-top:2px;}

/* ─── ADMINS LIST (manage-admins modal) ─── */
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);}
.admin-row-email{font-size:.82rem;color:var(--text);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.you-tag{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--red);background:var(--red-light);padding:2px 7px;border-radius:4px;font-family:var(--font);}

/* ─── INLINE PENCIL EDIT (edit-mode only, on titles/footer) ─── */
.inline-editable-row{display:flex;align-items:center;gap:7px;}
.inline-edit-btn{background:none;border:none;cursor:pointer;font-size:.8rem;line-height:1;padding:2px 4px;border-radius:4px;opacity:.5;transition:opacity .15s,background .15s;flex-shrink:0;}
.inline-edit-btn:hover{opacity:1;background:var(--red-light);}
.inline-edit-btn--onred:hover{background:rgba(255,255,255,.22);}

.main{padding:32px 24px 60px;max-width:1200px;margin:0 auto;width:100%;flex:1;}
.section-head{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.section-title{font-family:var(--font-display);font-size:1.55rem;color:var(--text);font-weight:800;margin-bottom:4px;}
.section-sub{font-size:.85rem;color:var(--text3);font-family:var(--font);}
.cat-title{font-family:var(--font-display);font-size:1rem;font-weight:800;color:var(--text);margin:30px 0 14px;padding-top:6px;}
.cat-title:first-child{margin-top:0;}

/* ─── STAT / KPI CARDS ───────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px;}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:var(--font-mono);margin-bottom:8px;}
.stat-num-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:6px;}
.stat-num{font-size:2rem;font-weight:800;line-height:1;color:var(--text);font-family:var(--font-display);}
.stat-spark{flex-shrink:0;opacity:.9;}
.stat-delta{font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
.stat-delta.up{color:var(--green);}.stat-delta.down{color:var(--red);}.stat-delta.flat{color:var(--text3);}

/* ─── CARD ───────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:18px;}
.card-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-title{font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font);}
.card-body{padding:20px;}

/* ─── BUTTONS ────────────────────────────── */
.btn{padding:9px 16px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font);font-size:.85rem;font-weight:700;transition:all .18s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.btn-primary{background:var(--red);color:white;}.btn-primary:hover{background:var(--red-dark);}
.btn-secondary{background:var(--bg);color:var(--text2);border:1.5px solid var(--border2);}.btn-secondary:hover{background:var(--border);}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2);}.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:transparent;color:#dc2626;border:1px solid rgba(220,38,38,.3);}.btn-danger:hover{background:#fef2f2;}
.btn-sm{padding:6px 12px;font-size:.76rem;}.btn-xs{padding:3px 9px;font-size:.68rem;border-radius:5px;}
.btn:disabled{opacity:.5;cursor:default;}

/* ─── TREND CHART CARD ───────────────────── */
.trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:6px;}
.trend-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.trend-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:8px;}
.trend-label{font-size:.78rem;font-weight:700;color:var(--text2);}
.trend-latest{font-size:.95rem;font-weight:800;color:var(--text);font-family:var(--font-display);}
/* Line + gradient-area chart. Coordinate space is 0-100 on both axes (a
   percentage grid), so the SVG (paths only — no circles, which would distort
   under non-uniform scaling) and the HTML dot/label overlay (which needs true
   circles) can share the exact same left/top % positioning. */
.tl-chart-wrap{position:relative;height:84px;margin-bottom:4px;}
.tl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.tl-line{fill:none;stroke:var(--red);stroke-width:2px;vector-effect:non-scaling-stroke;}
/* NOT nested under .tl-area — the <stop> tags live in <defs>, a sibling of the
   <path>, not a descendant, so a ".tl-area .tl-grad-top" selector never matched
   and the gradient silently fell back to solid black. */
.tl-grad-top{stop-color:var(--red);stop-opacity:.3;}
.tl-grad-bottom{stop-color:var(--red);stop-opacity:0;}
.tl-point{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;}
.tl-point.editable{cursor:pointer;}
.tl-dot{width:6px;height:6px;border-radius:50%;background:var(--red);border:2px solid var(--white);box-shadow:0 0 0 1px var(--border);transition:transform .12s;}
.tl-point:hover .tl-dot{transform:scale(1.4);}
.tl-dot.na{background:var(--border2);width:5px;height:5px;box-shadow:none;border:none;}
.tl-dot.best{background:var(--green);width:8px;height:8px;}
.tl-dot.worst{background:var(--amber);width:8px;height:8px;}
.tl-axis-label{position:absolute;left:0;transform:translateY(-50%);font-size:.6rem;color:var(--text3);font-family:var(--font-mono);background:var(--white);padding:1px 5px;border-radius:3px;z-index:2;line-height:1.3;pointer-events:none;}
.tl-x-labels{position:relative;height:14px;}
.tl-x-label{position:absolute;top:0;transform:translateX(-50%);font-size:.56rem;color:var(--text3);font-family:var(--font-mono);white-space:nowrap;}
.trend-tip{
  /* Always a dark pill with white text, in either theme — color:#fff is
     intentionally hardcoded here, not var(--white), which means "surface
     color" and becomes dark navy in dark mode (near-invisible on this). */
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--text);color:#fff;font-size:.68rem;font-family:var(--font-mono);
  padding:4px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:50;
}
.tl-point:hover{z-index:50;}
.tl-point:hover .trend-tip{opacity:1;}
body.dark .trend-tip{background:#000;}

/* ─── Combined multi-line chart (e.g. Staff vs Student Literacy) ─── */
.tl-legend{display:flex;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.tl-legend-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text2);font-weight:600;}
.tl-legend-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ─── ACHIEVEMENT ACTIVITY HEATMAP ────────── */
.heatmap-table{border-collapse:separate;border-spacing:4px;}
.heatmap-table th{font-size:.62rem;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:0 0 4px;}
.heatmap-year-label{font-size:.75rem;font-weight:700;color:var(--text2);font-family:var(--font-mono);padding-right:10px;text-align:right;white-space:nowrap;}
.hm-cell{width:26px;height:26px;border-radius:5px;transition:transform .12s;}
.hm-cell:hover{transform:scale(1.15);}

/* ─── FULL DATA TABLE ────────────────────── */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:left;padding:10px 14px;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:var(--font-mono);border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle;white-space:nowrap;}
.data-table tbody tr:hover{background:var(--bg);}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table td.num{font-family:var(--font-mono);text-align:right;}
.dt-editable{outline:none;cursor:text;border-radius:4px;padding:2px 5px;transition:box-shadow .15s;}
.dt-editable:hover{box-shadow:0 0 0 2px rgba(198,12,48,.2);}
.dt-editable:focus{box-shadow:0 0 0 2px rgba(198,12,48,.5);background:var(--red-light);}
.dt-row-del{color:var(--text3);background:none;border:none;cursor:pointer;font-size:.9rem;padding:2px 6px;transition:color .15s;}
.dt-row-del:hover{color:var(--red);}
.dt-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}

/* ─── ACHIEVEMENTS TIMELINE ──────────────── */
.timeline{display:flex;flex-direction:column;gap:16px;}
.ach-card{
  background:var(--white);border:1px solid var(--border);border-left:4px solid var(--red);
  border-radius:8px;padding:18px 22px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ach-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.ach-date{
  display:inline-flex;align-items:center;gap:6px;background:var(--red-light);color:var(--red);
  padding:4px 11px;border-radius:5px;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
}
.ach-title{font-family:var(--font-display);font-size:1.02rem;font-weight:800;color:var(--text);}
.ach-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.ach-item{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--text2);line-height:1.5;}
.ach-item::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:7px;flex-shrink:0;}
.ach-item-edit{flex:1;outline:none;border-radius:4px;padding:2px 5px;}
.ach-item-edit:hover{box-shadow:0 0 0 2px rgba(198,12,48,.2);}
.ach-item-edit:focus{box-shadow:0 0 0 2px rgba(198,12,48,.5);}
.ach-item-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.8rem;flex-shrink:0;}
.ach-item-del:hover{color:var(--red);}
.ach-edit-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

/* ─── EMPTY STATE ────────────────────────── */
.empty-state{padding:48px 20px;text-align:center;color:var(--text3);}
.empty-state .icon{font-size:2.2rem;margin-bottom:12px;}
.empty-state p{font-size:.875rem;margin-bottom:14px;}

/* ─── MODAL ──────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;backdrop-filter:blur(2px);padding:20px;}
.modal{background:var(--white);border:1px solid var(--border);border-radius:12px;width:420px;max-width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 40px rgba(0,0,0,.15);animation:slideUp .2s cubic-bezier(.16,1,.3,1);}
.modal-head{padding:20px 24px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-title{font-family:var(--font-display);font-size:1.05rem;color:var(--text);font-weight:800;}
.modal-close{background:none;border:none;color:var(--text3);font-size:1.3rem;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--red);}
.modal-body{padding:4px 24px 24px;overflow-y:auto;flex:1;}
.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0;}
.field-input{width:100%;padding:0 13px;height:42px;border:1.5px solid var(--border2);border-radius:8px;background:var(--white);color:var(--text);font-family:var(--font);font-size:.88rem;outline:none;transition:border-color .18s;}
.field-input:focus{border-color:var(--red);}
.field-label{font-size:.78rem;font-weight:700;color:var(--text2);margin-bottom:6px;display:block;}
.btn-google{width:100%;padding:12px 16px;border:1.5px solid var(--border2);border-radius:8px;background:var(--white);color:var(--text);font-family:var(--font);font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;}
.btn-google:hover{border-color:var(--red);box-shadow:0 2px 8px rgba(198,12,48,.12);}
.login-note{font-size:.78rem;color:var(--text3);line-height:1.6;margin-top:14px;text-align:center;}

/* ─── TOAST ──────────────────────────────── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:.82rem;color:var(--text);max-width:320px;pointer-events:all;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;align-items:center;gap:10px;animation:slideInRight .25s ease;}
.toast.success{border-left:3px solid var(--green);}.toast.error{border-left:3px solid var(--red);}.toast.info{border-left:3px solid var(--blue);}

/* ─── FOOTER ─────────────────────────────── */
.site-footer{text-align:center;padding:20px;font-size:.72rem;color:var(--text3);font-family:var(--font-mono);}

/* ─── LOADER ─────────────────────────────── */
.loader-wrap{display:flex;align-items:center;justify-content:center;padding:60px;}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--red);animation:spin .7s linear infinite;}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:768px){
  .topbar{padding:0 14px;gap:10px;}
  /* Brand name/subtitle dropped entirely on mobile, not just shrunk — the
     team switcher right next to it already names the current team, so the
     text was pure redundancy competing for space with the switcher, admin
     controls, and icon buttons. On real phone widths that competition was
     pushing the rightmost buttons (help, theme toggle) off-screen entirely.
     Logo stays for brand identity; only the text column goes. Desktop is
     untouched — this lives inside the existing 768px mobile breakpoint. */
  .tb-brand > div{display:none;}
  /* Team switcher must stay visible to non-admins too, so it can't collapse
     into the admin kebab menu — just shrink it instead. */
  .team-select-btn{height:32px;padding:0 9px;font-size:.72rem;gap:5px;}
  .main{padding:18px 12px 40px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-num{font-size:1.6rem;}
  .stat-spark{display:none;} /* squeezed too tight next to the number below ~768px */
  .trend-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .section-title{font-size:1.25rem;}
  .card-body{padding:14px;}
  .ach-card{padding:14px 16px;}
  .data-table{min-width:640px;}

  /* Admin cluster (edit toggle, settings, sign out) collapses into a dropdown
     off a kebab button instead of cramming 5 separate controls into the bar. */
  #btn-mobile-menu:not(.hidden){display:flex;}
  .admin-controls-row{
    display:none;position:absolute;top:100%;right:14px;margin-top:8px;
    flex-direction:column;align-items:stretch;gap:10px;width:220px;
    background:var(--white);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);padding:14px;z-index:60;
  }
  .admin-controls-row.mobile-open{display:flex;}
  .admin-controls-row .edit-toggle-label{display:inline;color:var(--text2);}
  .admin-controls-row .edit-toggle-wrap{background:none;border:none;padding:0;justify-content:space-between;}
  /* The switch's default colors (translucent-white track, white knob) are
     built for sitting directly on the red topbar — invisible against this
     dropdown's white panel. Give it contrast that works on white instead. */
  .admin-controls-row .switch-slider{background:var(--border2);}
  .admin-controls-row .switch-slider::before{box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .admin-controls-row .switch input:checked + .switch-slider{background:var(--red);}
  /* The base rule also turns the KNOB red when checked (built for a white
     checked-track, so a red knob stands out) — but the override above just
     made the checked TRACK red too, so without this the knob would vanish
     into a solid red pill. Keep the knob white here so it stays visible. */
  .admin-controls-row .switch input:checked + .switch-slider::before{background:white;}
  .admin-controls-row .tb-user-email{display:block;max-width:100%;color:var(--text3);}
  .admin-controls-row .tb-manage-btn,.admin-controls-row .tb-signout{
    background:var(--bg);color:var(--text);border:1px solid var(--border2);width:100%;justify-content:center;
  }
  .admin-controls-row .badge-admin{background:var(--red-light);color:var(--red);width:fit-content;}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;}
}

/* ══════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════ */
body.dark{
  --text:#e2e8f0; --text2:#94a3b8; --text3:#64748b;
  --border:#2d3748; --border2:#3d4f63;
  --bg:#0f1117; --white:#1a1f2e;
  --green-light:rgba(22,163,74,.18); --amber-light:rgba(217,119,6,.18);
  --blue-light:rgba(37,99,235,.18); --red-light:rgba(198,12,48,.18);
}
body.dark ::-webkit-scrollbar-track{background:var(--bg);}
body.dark ::-webkit-scrollbar-thumb{background:var(--border2);}
body.dark .field-input{background:var(--bg);}
body.dark .modal{background:var(--white);}
body.dark .data-table tbody tr:hover{background:var(--border);}
body.dark .btn-google{background:var(--white);border-color:var(--border2);color:var(--text);}

/* ══════════════════════════════════════════
   PRINT — condensed view: heading, KPI tiles,
   and trend charts only. Everything else
   (topbar, table, achievements, footer) hides.
══════════════════════════════════════════ */
@media print{
  @page{margin:0.6in;size:auto;}
  html{font-size:100%;}
  body{margin:0!important;}
  #app{min-height:0!important;}
  .print-hide,.modal-overlay,#toast-container,.inline-edit-btn,#btn-seed{display:none!important;}
  body,body.dark{
    background:#fff!important;
    --text:#1a1a1a!important; --text2:#555!important; --text3:#999!important;
    --bg:#ffffff!important; --white:#ffffff!important;
  }
  .main{padding:28px!important;max-width:100%!important;}
  .card,.stat-card,.trend-card{
    box-shadow:none!important;border:1px solid #ddd!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .section-head{margin-bottom:20px!important;}
  .stats-grid{margin-bottom:24px!important;gap:14px!important;grid-template-columns:repeat(4,1fr)!important;}
  .stat-card{padding:18px 20px!important;}
  .cat-title{margin:24px 0 14px!important;padding-top:0!important;font-size:1.15rem!important;}
  .cat-title:first-child{margin-top:0!important;}
  .trend-grid{gap:14px!important;grid-template-columns:repeat(4,1fr)!important;margin-bottom:6px!important;}
  .trend-card{padding:16px 18px!important;}
  .tl-chart-wrap{height:100px!important;}
  body[data-print-date]::after{
    content:"Printed "attr(data-print-date);
    display:block;text-align:center;font-size:.8rem;color:#999;margin-top:28px;
  }
}