/* EWS Lite design system — v2 (sidebar shell redesign, 2026-07-28).
   Source of truth: claude.ai/design project fe06186b (ews/ components).
   Pair every severity color with its word — never color alone. */

:root {
  --ews-navy: #14406b;         /* sidebar, primary buttons, links */
  --ews-navy-hover: #0e2e4d;   /* primary button + link hover */
  --ews-nav-active: #1c5289;   /* active/hover item inside the navy sidebar */
  --ews-ink: #1a2733;          /* headings + body text */
  --ews-ink-soft: #3b4753;     /* long explanatory copy */
  --ews-muted: #55606a;        /* labels, meta, table headings */
  --ews-bg: #f5f7f9;           /* page background */
  --ews-card: #ffffff;         /* card background */
  --ews-shell: #eef2f5;        /* board columns, inactive tabs, avatars */
  --ews-field: #f8fafb;        /* inputs, table head fill */
  --ews-border: #dde4ea;       /* card + table borders */
  --ews-row: #eef2f5;          /* row dividers */
  --ews-urgent: #b3261e;
  --ews-concern: #c26a00;
  --ews-watch: #8a7a00;
  --ews-ok: #1a7f37;
  --ews-neutral: #8a949e;
  --ews-link-on-dark: #cfe0f1;
  --ews-dim-on-dark: #a9c4de;
  --ews-note-bg: #fdf6ee;      /* explanation / caution panels */
  --ews-note-border: #f0dcc0;
  --ews-radius: 10px;          /* cards */
  --ews-radius-sm: 8px;        /* buttons, inputs, tabs */
  --ews-radius-xs: 4px;        /* badges */
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 0;
  color: var(--ews-ink);
  background: var(--ews-bg);
  font-size: 14px;
  line-height: 1.45;
}

h1 { font-size: 19px; font-weight: 680; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 4px; }
p { margin: 0 0 8px; text-wrap: pretty; }
.sub { font-size: 12.5px; color: var(--ews-muted); }
.note { font-size: 13.5px; color: var(--ews-ink-soft); max-width: 65ch; }
a { color: var(--ews-navy); text-decoration: none; font-weight: 550; }
a:hover { color: var(--ews-navy-hover); text-decoration: underline; }

/* Cards + layout ------------------------------------------------------ */
.card { background: var(--ews-card); border: 1px solid var(--ews-border);
        border-radius: var(--ews-radius); padding: 16px 18px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { padding: 13px 16px; border-bottom: 1px solid var(--ews-row);
             display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Buttons + pills ------------------------------------------------------ */
.btn { display: inline-block; background: var(--ews-navy); color: #fff; border: 0;
       border-radius: var(--ews-radius-sm); padding: 9px 14px; font: inherit;
       font-size: 13.5px; font-weight: 550; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--ews-navy-hover); color: #fff; text-decoration: none; }
.btn.outline { background: #fff; color: var(--ews-navy); border: 1px solid var(--ews-navy); }
.btn.outline:hover { background: #eef4fa; color: var(--ews-navy); }
.btn.quiet { background: #fff; color: var(--ews-ink-soft); border: 1px solid var(--ews-border); }
.btn.quiet:hover { background: #f2f6fa; color: var(--ews-ink-soft); }
.btn.green { background: var(--ews-ok); } .btn.green:hover { background: #146429; }
.btn.red { background: var(--ews-urgent); } .btn.red:hover { background: #96201a; }
.btn.danger-outline { background: #fff; color: var(--ews-urgent); border: 1px solid var(--ews-urgent); }
.btn.danger-outline:hover { background: #fdf0ef; color: var(--ews-urgent); }
.btn.sm { padding: 7px 12px; font-size: 13px; }

.pill { border: 1px solid var(--ews-border); background: #fff; color: var(--ews-ink-soft);
        border-radius: 18px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.pill.on { background: var(--ews-navy); border-color: var(--ews-navy); color: #fff; font-weight: 600; }
.pill.on-danger { background: var(--ews-urgent); border-color: var(--ews-urgent); color: #fff; font-weight: 600; }

/* Tables --------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600;
     color: var(--ews-muted); text-transform: uppercase; letter-spacing: 0.03em;
     background: var(--ews-field); white-space: nowrap; }
thead tr { border-bottom: 2px solid var(--ews-border); }
td { padding: 13px 14px; font-size: 13.5px; }
tbody tr { border-bottom: 1px solid var(--ews-row); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--ews-field); }
.dense td, .dense th { padding: 8px 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Severity ------------------------------------------------------------- */
.badge { display: inline-block; border-radius: var(--ews-radius-xs); padding: 2px 8px;
         font-size: 11.5px; font-weight: 550; color: #fff; }
.badges { display: flex; gap: 5px; flex-wrap: wrap; }
.sev-urgent { background: var(--ews-urgent); }
.sev-concern { background: var(--ews-concern); }
.sev-watch { background: var(--ews-watch); }
.sev-ok { background: var(--ews-ok); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-lg { width: 12px; height: 12px; }
.dot-urgent { background: var(--ews-urgent); } .dot-concern { background: var(--ews-concern); }
.dot-watch { background: var(--ews-watch); } .dot-ok { background: var(--ews-ok); }
.dot-grey { background: var(--ews-neutral); }
/* Aliases used by existing templates */
.dot-green { background: var(--ews-ok); } .dot-red { background: var(--ews-urgent); }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
.up { color: var(--ews-ok); } .down { color: var(--ews-urgent); } .flat { color: var(--ews-muted); }

/* Stat cards: number first, colored rail on the left -------------------- */
.stat { background: var(--ews-card); border: 1px solid var(--ews-border);
        border-left: 4px solid var(--ews-navy); border-radius: var(--ews-radius);
        padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat.urgent { border-left-color: var(--ews-urgent); }
.stat.concern { border-left-color: var(--ews-concern); }
.stat.watch { border-left-color: var(--ews-watch); }
.stat.ok { border-left-color: var(--ews-ok); }
.stat .num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat .label { font-size: 13px; font-weight: 550; }

/* App shell: navy sidebar + white topbar -------------------------------- */
.shell { display: flex; min-height: 100vh; background: var(--ews-bg); }
.side { width: 250px; flex: none; background: var(--ews-navy); color: #fff;
        display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side .mark { width: 34px; height: 34px; flex: none; border-radius: var(--ews-radius-sm);
              background: var(--ews-link-on-dark); color: var(--ews-navy);
              display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.side .brand b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.side .brand small { font-size: 12px; color: var(--ews-dim-on-dark); }
.navitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
           border: 0; background: none; border-radius: var(--ews-radius-sm);
           padding: 9px 10px; font: inherit; font-size: 14px; color: var(--ews-link-on-dark);
           cursor: pointer; text-decoration: none; }
.navitem:hover { background: var(--ews-nav-active); color: #fff; text-decoration: none; }
.navitem.on { background: var(--ews-nav-active); color: #fff; font-weight: 600; }
.navitem .dot { background: rgba(207,224,241,0.35); width: 6px; height: 6px; }
.navitem.on .dot { background: var(--ews-link-on-dark); }
.side .foot { margin-top: auto; border-top: 1px solid #2a5680; padding-top: 14px;
              display: flex; flex-direction: column; gap: 8px; }
.side .foot .who { display: flex; align-items: center; gap: 9px; padding: 2px 8px; }
.side .foot .who .av { width: 28px; height: 28px; flex: none; border-radius: 50%;
                       background: #2a5680; color: var(--ews-link-on-dark);
                       display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff;
          border-bottom: 1px solid var(--ews-border); padding: 14px 26px; }
.topbar .title { flex: 1; min-width: 180px; }
.topbar .title .t { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.content { padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
/* Anonymous pages (login, signup, errors) — no sidebar */
.bare main { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

/* Triage row: student, why, meta, actions -------------------------------- */
.flagrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start;
           padding: 13px 16px; border-bottom: 1px solid #f2f5f8; }
.flagrow:last-child { border-bottom: 0; }
.flagrow .who { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.flagrow .meta { display: flex; flex-direction: column; gap: 4px; min-width: 130px;
                 font-size: 12.5px; color: var(--ews-muted); }
.flagrow .acts { display: flex; gap: 8px; align-items: center; }
.name { font-size: 15px; font-weight: 600; }

/* Explanation panel — always says why a rule fired, in plain words ------- */
.why { background: var(--ews-note-bg); border: 1px solid var(--ews-note-border);
       border-radius: var(--ews-radius-sm); padding: 11px 13px;
       display: flex; flex-direction: column; gap: 3px; }
.why b { font-size: 13.5px; }
.why span { font-size: 13.5px; color: var(--ews-ink-soft); }

/* Profile tabs (CSS-only radio mechanism keeps working) ------------------ */
.tabbed input[type=radio] { display: none; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 10px 12px 0; margin: 1.5rem 0 0;
        background: var(--ews-field); border: 1px solid var(--ews-border); border-bottom: 0;
        border-radius: var(--ews-radius) var(--ews-radius) 0 0; }
.tabs label { border: 1px solid var(--ews-border); border-bottom: 0; background: var(--ews-shell);
              color: var(--ews-muted); border-radius: var(--ews-radius-sm) var(--ews-radius-sm) 0 0;
              padding: 8px 13px; font-size: 13px; cursor: pointer; position: relative; top: 1px; }
.panel { display: none; }
.panels { background: var(--ews-card); border: 1px solid var(--ews-border);
          border-radius: 0 0 var(--ews-radius) var(--ews-radius); padding: 1.2rem; }
#tab1:checked ~ .tabs label[for=tab1], #tab2:checked ~ .tabs label[for=tab2],
#tab3:checked ~ .tabs label[for=tab3], #tab4:checked ~ .tabs label[for=tab4],
#tab5:checked ~ .tabs label[for=tab5], #tab6:checked ~ .tabs label[for=tab6] {
  background: var(--ews-card); color: var(--ews-navy); font-weight: 650;
}
#tab1:checked ~ .panels #panel1, #tab2:checked ~ .panels #panel2,
#tab3:checked ~ .panels #panel3, #tab4:checked ~ .panels #panel4,
#tab5:checked ~ .panels #panel5, #tab6:checked ~ .panels #panel6 { display: block; }

/* Case board -------------------------------------------------------------- */
.col { background: var(--ews-shell); border: 1px solid var(--ews-border);
       border-radius: var(--ews-radius); padding: 12px; display: flex;
       flex-direction: column; gap: 10px; min-width: 0; }
.minicard { background: #fff; border: 1px solid var(--ews-border); border-top: 3px solid var(--ews-navy);
            border-radius: var(--ews-radius-sm); padding: 11px 12px; cursor: pointer;
            display: flex; flex-direction: column; gap: 6px; }
.minicard:hover { border-color: var(--ews-navy); }

/* Forms -------------------------------------------------------------------- */
label { font-size: 13px; font-weight: 550; }
label .hint { font-size: 12.5px; color: var(--ews-muted); font-weight: 400; }
input[type=text], input[type=date], input[type=number], input[type=email],
input:not([type]), select, textarea {
  padding: 9px 10px; border: 1px solid var(--ews-border); border-radius: var(--ews-radius-sm);
  font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ews-navy); outline-offset: 1px; }
textarea { resize: vertical; }
.search { width: 270px; background: var(--ews-field); }
.bar { height: 9px; border-radius: 5px; background: var(--ews-shell); overflow: hidden; }
.bar > div { height: 100%; border-radius: 5px; background: var(--ews-navy); }

/* Legacy helper still used in the sidebar foot */
.btn-link { background: none; color: var(--ews-link-on-dark); border: 0; cursor: pointer;
            font-size: 12.5px; text-decoration: underline; padding: 2px 8px; text-align: left; }