/*
 * assessment.css
 *
 * Additive styles for the Assessment module. Reuses the existing Fee
 * Calculator tokens (--lime, --bg, --surface, --border, --text, etc.) so the
 * new views feel native. Every class is prefixed `as-` to avoid collisions.
 */

/* ---------- Layout ---------- */
.as-page-hdr { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 14px; }
.as-page-hdr h2 { font-family:var(--fb); font-size:22px; letter-spacing:-0.2px; color:var(--text); }
.as-page-sub { color:var(--text2); font-size:13px; margin-top:2px; }

.as-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.as-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.as-grid-5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
@media (max-width:1100px) { .as-grid-5 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .as-grid-2, .as-grid-3 { grid-template-columns:1fr; } }

/* ---------- Tables ---------- */
.as-table { width:100%; border-collapse:collapse; }
.as-table th, .as-table td { text-align:left; padding:8px 14px; border-bottom:1px solid var(--border); font-size:13.5px; }
.as-table th { color:var(--lime); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:11.5px; border-bottom:2px solid var(--lime); background:var(--surface2); }
.as-table tr:hover td { background:var(--surface2); }
.as-empty { padding:22px; text-align:center; color:var(--text3); }

/* ---------- Buttons (extends existing .btn) ---------- */
.as-btn-row { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Assessment Overview (P0.1) ---------- */
.as-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:1100px) { .as-overview-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px)  { .as-overview-grid { grid-template-columns:1fr; } }
.as-overview-tile { text-align:left; padding:14px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:var(--fb); cursor:pointer; transition:border-color .12s; }
.as-overview-tile:hover { border-color:var(--lime); }
.as-overview-tile-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.as-overview-tile-meta { font-size:12px; color:var(--text2); margin-bottom:8px; }

/* ---------- Runner ---------- */
.as-runner-wrap { display:grid; grid-template-columns:260px 1fr; gap:14px; }
@media (max-width:900px) { .as-runner-wrap { grid-template-columns:1fr; } }
.as-runner-side { position:sticky; top:64px; align-self:start; }
.as-pillar-list { display:flex; flex-direction:column; gap:6px; }
.as-pillar-btn { text-align:left; padding:10px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:var(--fb); font-size:14px; cursor:pointer; }
.as-pillar-btn:hover { border-color:var(--border2); }
.as-pillar-btn.as-active { border-color:var(--lime); background:rgba(212,252,104,.06); color:var(--lime); }
.as-pillar-btn .as-pillar-meta { display:flex; justify-content:space-between; align-items:center; margin-top:4px; font-size:11px; color:var(--text3); }
.as-progress { height:6px; background:var(--surface3); border-radius:3px; overflow:hidden; }
.as-progress-bar { height:100%; background:var(--lime); transition:width .2s; }

.as-question { padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); margin-bottom:10px; }
.as-question.as-critical { border-left:3px solid var(--amber); }
.as-question-text { font-size:15px; font-weight:600; color:var(--text); margin-bottom:4px; }
.as-question-guide { font-size:12px; color:var(--text2); margin-bottom:10px; line-height:1.5; }
.as-subdomain-hdr { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); margin:18px 0 6px; padding-top:14px; border-top:1px solid var(--border); }
.as-subdomain-hdr:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.as-options { display:flex; flex-direction:column; gap:6px; }
.as-option { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); cursor:pointer; font-size:14px; color:var(--text); transition:border-color .12s, background .12s; }
.as-option:hover { border-color:var(--border2); }
.as-option input { accent-color:var(--lime); }
.as-option.as-selected { border-color:var(--lime); background:rgba(212,252,104,.06); }
.as-notes { width:100%; min-height:60px; margin-top:10px; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:var(--fb); font-size:13px; resize:vertical; }

/* ---------- Answer states (P0.2) ---------- */
.as-status-row { display:flex; gap:6px; margin-top:10px; }
.as-status-btn { padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text3); font-family:var(--fb); font-size:12px; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.as-status-btn:hover { border-color:var(--border2); color:var(--text2); }
.as-status-btn.as-unknown.as-active { border-color:var(--text2); background:var(--surface3); color:var(--text); }
.as-status-btn.as-followup.as-active { border-color:var(--amber); background:rgba(255,172,28,.08); color:var(--amber); }
.as-status-btn.as-na.as-active { border-color:var(--border2); background:var(--surface3); color:var(--text2); }
.as-status-badge-unknown { border-color:var(--text2); color:var(--text2); }
.as-status-badge-followup { border-color:var(--amber); color:var(--amber); }
.as-status-badge-na { border-color:var(--border2); color:var(--text3); }

.as-runner-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.as-runner-footer .as-save-status { font-size:12px; color:var(--text3); }

/* ---------- Snapshot ---------- */
.as-kpi { background:linear-gradient(140deg, rgba(17,17,17,.97) 0%, rgba(11,11,11,.98) 58%, rgba(7,7,7,.99) 100%); border:1px solid var(--border2); border-radius:10px; padding:16px; }
.as-kpi-label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text2); }
.as-kpi-val { font-family:var(--fb); font-size:28px; color:var(--text); margin-top:6px; }
.as-kpi-sub { font-size:11px; color:var(--text3); margin-top:4px; }
.as-kpi.as-good { border-top:2px solid var(--good); }
.as-kpi.as-amber { border-top:2px solid var(--amber); }
.as-kpi.as-red { border-top:2px solid var(--red); }

.as-band { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.as-band-good { background:rgba(113,219,212,.08); color:var(--good); border:1px solid rgba(113,219,212,.35); }
.as-band-mid  { background:rgba(255,172,28,.06); color:var(--amber); border:1px solid rgba(255,172,28,.35); }
.as-band-low  { background:rgba(249,66,58,.06); color:var(--red); border:1px solid rgba(249,66,58,.35); }

.as-finding { padding:12px 14px; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:8px; background:var(--surface2); margin-bottom:8px; }
.as-finding.as-med { border-left-color:var(--amber); }
.as-finding-title { font-weight:600; color:var(--text); margin-bottom:4px; font-size:14px; }
.as-finding-impact { color:var(--text2); font-size:13px; line-height:1.55; }

.as-rec { padding:12px 14px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); margin-bottom:8px; }
.as-rec-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.as-rec-title { font-weight:600; color:var(--text); font-size:14px; }
.as-rec-meta { font-size:11px; color:var(--text3); display:flex; gap:8px; }
.as-rec-action { color:var(--text2); font-size:13px; line-height:1.55; }
.as-rec-msrel { margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); font-size:12px; color:var(--text3); }

.as-roadmap { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:1000px) { .as-roadmap { grid-template-columns:1fr 1fr; } }
.as-roadmap-col { border:1px solid var(--border); border-radius:8px; padding:12px; background:var(--surface2); }
.as-roadmap-col h4 { font-family:var(--fb); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
.as-roadmap-col ul { list-style:none; padding:0; margin:0; }
.as-roadmap-col li { font-size:13px; color:var(--text); padding:6px 0; border-bottom:1px solid var(--border); }
.as-roadmap-col li:last-child { border-bottom:none; }

/* ---------- Modal ---------- */
.as-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:500; }
.as-modal { background:var(--surface); border:1px solid var(--border2); border-radius:12px; max-width:820px; width:min(95vw, 820px); max-height:90vh; overflow:auto; padding:22px 24px; animation:modalIn .2s ease; }
.as-modal h3 { font-family:var(--fb); font-size:18px; color:var(--text); margin-bottom:10px; }
.as-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* ---------- Form controls ---------- */
.as-field { margin-bottom:10px; }
.as-field label { display:block; font-size:12px; color:var(--text2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.as-input, .as-select, .as-textarea { width:100%; padding:11px 14px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:var(--fb); font-size:15px; }
.as-input:focus, .as-select:focus, .as-textarea:focus { border-color:var(--focus-border); box-shadow:0 0 0 3px rgba(212,252,104,.22); }
.as-textarea { min-height:80px; resize:vertical; }
.as-json { font-family:'JetBrains Mono', monospace; font-size:12px; min-height:280px; white-space:pre; }

/* ---------- Admin subnav ---------- */
.as-admin-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.as-admin-nav button { padding:6px 10px; background:linear-gradient(145deg, rgba(18,18,18,.98), rgba(10,10,10,.99)); border:1px solid var(--border2); border-radius:6px; color:var(--text2); font-weight:600; font-size:12px; cursor:pointer; transition:all .15s ease; }
.as-admin-nav button:hover { color:var(--text); border-color:rgba(255,255,255,.28); background:linear-gradient(145deg, rgba(27,27,27,.98), rgba(13,13,13,.99)); }
.as-admin-nav button.as-active { color:var(--lime); border-color:rgba(212,252,104,.65); background:linear-gradient(145deg, rgba(34,52,44,.92), rgba(14,20,17,.98)); box-shadow:0 0 0 1px rgba(212,252,104,.10), 0 0 14px rgba(212,252,104,.08); }
.as-weight-total { font-family:'JetBrains Mono', monospace; font-size:12px; padding:4px 8px; border-radius:4px; }
.as-weight-total.ok { color:var(--good); background:rgba(113,219,212,.08); }
.as-weight-total.bad { color:var(--red); background:rgba(249,66,58,.08); }

/* ---------- Utility ---------- */
.as-hidden { display:none !important; }
.as-mt-8 { margin-top:8px; } .as-mt-16 { margin-top:16px; }
.as-mb-4 { margin-bottom:4px; } .as-mb-8 { margin-bottom:8px; }
.as-flex { display:flex; gap:8px; align-items:center; }
.as-flex-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.as-tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; color:var(--text2); background:var(--surface3); border:1px solid var(--border); }