/* BeaconLens app styles, carried over from the original Observation Tracker.
   School colors override --navy and --accent at runtime (see app/page.tsx). */
:root {
/* Warm palette grounded in the school's own navy + orange */
--bg: #FAF7F1;
--surface: #FFFFFF;
--surface-2: #F4EFE4;
--border: #E8E1D2;
--text: #21264A;
--text-muted: #756F60;
--navy: #0B2265;
--navy-hover: #081848;
--navy-soft: #E7EBF6;
--accent: #E77A1E;
--accent-hover: #CE6A15;
--accent-soft: #FBEADA;
--danger: #B0473A;
--danger-soft: #F8EAE6;
--success: #3F7D58;
--success-soft: #E8F2EC;
--warn: #A8791A;
--warn-soft: #FAF0DC;
--live: #C15A18;
--live-soft: #FBEADA;
--r1: #B0473A; --r1-soft: #F8EAE6;
--r2: #A8791A; --r2-soft: #FAF0DC;
--r3: #3F7D58; --r3-soft: #E8F2EC;
--r4: var(--accent); --r4-soft: var(--accent-soft);
--shadow: 0 1px 2px rgba(40,30,10,.04), 0 8px 24px rgba(40,30,10,.07);
--radius: 16px;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
#app { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.topbar { display:flex; flex-direction:column; align-items:center; padding:6px 4px 24px; gap:14px; }
.topbar-row { display:flex; align-items:center; justify-content:space-between; width:100%; }
.school-mark { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; background:var(--surface); box-shadow:0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent-soft); }
.school-mark img { width:100%; height:100%; object-fit:contain; }
.brand { display:flex; align-items:center; gap:12px; justify-content:center; }
.brand-mark { width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg { width:100%; height:100%; }
.brand-text { text-align:center; }
@media (max-width: 480px) {
.topbar-row { flex-direction:column; gap:10px; }
}
.brand h1 { font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600; font-variation-settings:'SOFT' 80,'WONK' 1; font-size:23px; margin:0; color:var(--navy); }
.brand p { margin:1px 0 0; font-size:12.5px; color:var(--text-muted); }
.user-badge { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); padding:6px 14px 6px 6px; border-radius:999px; font-size:13px; box-shadow:var(--shadow); }
.avatar { width:27px; height:27px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; }
nav.tabs { display:flex; gap:4px; margin-bottom:22px; overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:5px; box-shadow:var(--shadow); }
nav.tabs button { border:none; background:transparent; color:var(--text-muted); padding:9px 17px; border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
nav.tabs button:hover { background:var(--surface-2); color:var(--text); }
nav.tabs button.active { background:var(--navy); color:#fff; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.grid-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.stat-card .num { font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:600; color:var(--navy); }
.stat-card .lbl { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.greeting { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; color:var(--navy); margin:0 0 18px; }
.banner { display:flex; gap:10px; justify-content:space-between; background:var(--warn-soft); color:var(--warn); border:1px solid #EAD6A6; border-radius:14px; padding:13px 18px; margin-bottom:18px; font-size:13.5px; flex-wrap:wrap; align-items:center; }
.banner button { background:var(--warn); color:#fff; border:none; padding:7px 14px; border-radius:9px; font-weight:600; cursor:pointer; }
.banner.live { background:var(--live-soft); color:var(--live); border-color:#F0C79A; }
h2.section-title { font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:600; margin:0 0 14px; color:var(--navy); }
h3.domain-title { font-size:13px; font-weight:700; margin:18px 0 8px; color:var(--accent); }
h3.domain-title:first-child { margin-top:0; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select, textarea { font-family:inherit; font-size:13.5px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); background:var(--surface); }
textarea { width:100%; min-height:110px; resize:vertical; }
label { font-size:12.5px; font-weight:600; color:var(--text-muted); display:block; margin-bottom:6px; }
.field { margin-bottom:14px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.btn { border:none; padding:10px 20px; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; transition:background .15s,opacity .15s; }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-hover); }
.btn-secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-live { background:var(--accent); color:#fff; }
.btn-live:hover { background:var(--accent-hover); }
.btn-sm { padding:6px 13px; font-size:12.5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th { text-align:left; color:var(--text-muted); font-size:12px; font-weight:600; padding:9px 10px; border-bottom:1px solid var(--border); }
tbody td { padding:13px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:hover td { background:var(--surface-2); }
.table-wrap { overflow-x:auto; }
.pill { padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; display:inline-block; margin:1px 2px 1px 0; }
.pill-sent { background:var(--success-soft); color:var(--success); }
.pill-unsent { background:var(--surface-2); color:var(--text-muted); }
.pill-domain { background:var(--navy-soft); color:var(--navy); }
.feedback-preview { max-width:300px; color:var(--text-muted); font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; }
.empty-state { text-align:center; padding:50px 20px; color:var(--text-muted); }
.modal-backdrop { position:fixed; inset:0; background:rgba(20,15,5,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50; }
.modal { background:var(--surface); border-radius:20px; border:1px solid var(--border); max-width:600px; width:100%; padding:24px; box-shadow:0 20px 60px rgba(20,15,5,.25); }
.close-x { background:none; border:none; color:var(--text-muted); font-size:19px; cursor:pointer; float:right; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:11px 20px; border-radius:12px; font-size:13px; z-index:100; opacity:0; transition:opacity .2s; max-width:80vw; text-align:center; box-shadow:var(--shadow); }
.toast.show { opacity:1; }
.muted { color:var(--text-muted); }
.backup-log-item { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px; }
.checkbox-row { display:flex; gap:14px; flex-wrap:wrap; }
.checkbox-row label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); font-weight:500; cursor:pointer; }
.checkbox-row input { width:auto; padding:0; }
.notes-log { max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface-2); margin-bottom:12px; }
.note-line { font-size:13px; padding:7px 0; border-bottom:1px dashed var(--border); }
.note-line:last-child { border-bottom:none; }
.note-time { font-weight:700; color:var(--live); margin-right:4px; }
.note-author { color:var(--text-muted); font-size:11.5px; }
.join-card { border:1px solid #F0C79A; background:var(--live-soft); border-radius:14px; padding:15px 17px; margin-top:10px; }
.collapsible-head { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:10px 0; }
.rating-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; flex-wrap:wrap; }
.rating-row .ind-name { font-size:13px; flex:1; min-width:180px; }
.rating-buttons { display:flex; gap:4px; flex-wrap:wrap; }
.rating-btn { border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.rating-btn:hover { background:var(--border); }
.rating-btn.active { color:#fff; font-weight:700; }
.rating-btn[data-idx="0"].active { background:var(--r1); border-color:var(--r1); }
.rating-btn[data-idx="1"].active { background:var(--r2); border-color:var(--r2); }
.rating-btn[data-idx="2"].active { background:var(--r3); border-color:var(--r3); }
.rating-btn[data-idx="3"].active { background:var(--r4); border-color:var(--r4); }
.overall-row { border-top:1px solid var(--border); margin-top:10px; padding-top:13px; }
.overall-row .ind-name { font-weight:700; color:var(--navy); }
.rating-item { margin-bottom:12px; }
.rating-note { width:100%; min-height:40px; font-size:12.5px; padding:7px 9px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); resize:vertical; margin-top:4px; }
.rating-note:focus { outline:none; border-color:var(--accent); background:var(--surface); }
.goal-card { border:1px solid #F0C79A; background:var(--accent-soft); border-radius:14px; padding:15px 17px; margin:6px 0 16px; }
.goal-last { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.5px; white-space:pre-wrap; }
.goal-card .rating-buttons { margin-bottom:6px; }
.goal-card .rating-note { background:var(--surface); }
.goal-btn[data-goal-idx="0"].active { background:var(--r1); border-color:var(--r1); }
.goal-btn[data-goal-idx="1"].active { background:var(--r2); border-color:var(--r2); }
.goal-btn[data-goal-idx="2"].active { background:var(--r3); border-color:var(--r3); }
.clickable-row { cursor:pointer; border-radius:10px; padding:5px 8px; margin:0 -8px 6px; transition:background .15s; }
.clickable-row:hover { background:var(--surface-2); }
nav.tabs button.tab-accent:not(.active) { color:var(--live); }
.dash-row { display:grid; gap:16px; margin-bottom:16px; align-items:start; }
.dash-row.r1 { grid-template-columns:1.35fr 1fr; }
.dash-row.r2 { grid-template-columns:1fr 1fr; }
@media (max-width: 760px) { .dash-row.r1, .dash-row.r2 { grid-template-columns:1fr; } }
.new-badge { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; color:var(--live); background:var(--accent-soft); padding:3px 8px; border-radius:7px; margin-left:10px; vertical-align:middle; letter-spacing:.03em; }
.card-sub { font-size:12.5px; color:var(--text-muted); margin:-8px 0 14px; }
.stat-card.highlight { border:2px solid var(--accent); cursor:pointer; transition:background .15s; }
.stat-card.highlight:hover { background:var(--accent-soft); }
.chart-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); margin-bottom:12px; }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.chart-legend span:hover { color:var(--text); }
.chart-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.goal-chart { display:flex; align-items:flex-end; gap:18px; height:230px; border-bottom:1px solid var(--border); padding:0 6px; background-image:linear-gradient(var(--border) 1px, transparent 1px); background-size:100% 25%; }
.goal-col { flex:1; max-width:88px; height:100%; display:flex; flex-direction:column-reverse; }
.goal-seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; cursor:pointer; min-height:6px; border-top:2px solid var(--surface); transition:filter .15s; }
.goal-seg:hover { filter:brightness(1.15); box-shadow:inset 0 0 0 2px var(--navy); }
.goal-col .goal-seg:last-child { border-radius:6px 6px 0 0; }
.goal-months { display:flex; gap:18px; padding:8px 6px 0; }
.goal-months div { flex:1; max-width:88px; text-align:center; font-size:12.5px; color:var(--text-muted); }
.follow-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 8px; margin:0 -8px; border-top:1px solid var(--border); cursor:pointer; border-radius:8px; }
.follow-item:hover { background:var(--surface-2); }
.soft-pill { padding:4px 10px; border-radius:8px; font-size:12px; font-weight:700; white-space:nowrap; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ns-filter.ns-on { background:var(--navy); border-color:var(--navy); color:#fff; }
tr.ns-row:hover td { background:var(--surface-2); }
.fu-chip { padding:4px 10px; border-radius:8px; font-size:12px; font-weight:700; white-space:nowrap; background:var(--accent-soft); color:var(--live); }
.fu-chip.overdue { background:var(--r1-soft); color:var(--r1); }
.fu-chip.upcoming { background:var(--navy-soft); color:var(--navy); }
.fu-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.quick-dates { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }