/* Shared across all three departments on purpose - the common visual
   language (cards, tables, buttons, status pills) that should mean the
   same thing everywhere, not something each department restyles on its
   own. Department-specific rules live in attendance.css/outcomes.css/
   enrollment.css/tuition.css, loaded alongside this one, never instead
   of it.

   "Ledger" house style: warm paper, hairline rules, flat throughout -
   no gradients, no patterned backgrounds, no decorative effects. Each
   department keeps its own accent (set in its own stylesheet) so you
   can still tell them apart at a glance, but every accent is now a
   deep, muted tone meant to be spent sparingly - one primary button,
   everything else plain and bordered. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Spectral:wght@600&display=swap');

:root{
  --ink:#20241f; --muted:#4e524b; --small:#686c65;
  --line:#dedcd8; --line-soft:#eae9e4; --bg:#f5f5f3;
  --accent:#20241f; --accent-soft:#eae9e4;
  --ok:#17603f; --ok-bg:#e2efe8;
  --late:#7a5f1c; --late-bg:#f2ebdd;
  --bad:#9a3b32; --bad-bg:#f6e9e7;
  --info:#1f5b66; --info-bg:#e4eef0;
  --grey-bg:#eae9e4;
}
*{box-sizing:border-box}
/* the hidden attribute always wins, whatever display a class sets (a
   chip, a pill, a drop zone state) */
[hidden]{display:none!important}
body{margin:0;font:15px/1.5 Inter,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
/* Plain links (a talmid's name in a table, "Open Reports for X ->") had
   no rule of their own anywhere in this file, so they fell back to the
   browser's own blue/underline/purple-when-visited - completely outside
   the palette, on every page. One accent color, no underline at rest
   (underline is what says "this is interactive" on hover instead - the
   flat, no-decoration house style extends to links too), and no separate
   :visited color, since revisiting a talmid's page isn't a meaningfully
   different state here the way it is on the open web. */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none;opacity:.8}
a:visited{color:var(--accent)}
header{background:#fff;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:24px;padding:0 20px;position:sticky;top:0;z-index:5}
.brand{font:600 17px/1 Spectral,Georgia,serif;padding:12px 0;letter-spacing:.1px;
  display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.brand img{width:24px;height:24px;border-radius:6px;display:block}
.brand-emoji{font-size:19px;line-height:1;display:block}
nav{display:flex;flex-wrap:wrap}
nav a{padding:15px 12px;text-decoration:none;color:var(--muted);font-weight:600;
  border-bottom:3px solid transparent;transition:color .12s ease,border-color .12s ease}
nav a:hover{color:var(--accent);border-bottom-color:var(--accent-soft)}
/* the page uses the whole window - no centred column */
main{max-width:none;margin:0;padding:22px 24px 60px}
/* a section whose page is a wide sheet (Collections) uses the whole window */
main.wide{max-width:none;padding-left:14px;padding-right:14px}
h1{font-size:24px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px;text-wrap:balance}
h2{font-size:17px;font-weight:600;margin:26px 0 10px}
p.sub{color:var(--muted);margin:0 0 18px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:18px;margin-bottom:18px}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;font-size:14px}
th{background:var(--bg);font-weight:600}
td.c,th.c{text-align:center}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.totals td{font-weight:600;background:var(--bg);border-top:1px solid var(--line)}
.flash{padding:10px 14px;border-radius:4px;margin-bottom:12px;font-weight:600;
  border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.flash.warn{background:var(--late-bg);color:var(--late);border-color:var(--late)}
.flash.error{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
/* One button object in the whole app - every variant below changes
   exactly one property off this base. Applies to a real <button> and
   an <a class="btn"> alike (display:inline-block) so a link styled as
   a button and an actual button render identically. This IS the plain,
   unclassed look now - "secondary" used to be the exception file, it's
   the rule. */
button,.btn{display:inline-block;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:inherit;padding:9px 14px;font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .12s ease}
button:hover,.btn:hover{border-color:var(--small)}
button:disabled,.btn:disabled{opacity:.6;cursor:wait}

/* Exactly one of these per screen - the one thing this screen is
   "for". If a second one seems needed, the design is wrong; every
   other button on the page stays the plain one above. */
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);
  color:#fff}
button.primary:hover,.btn.primary:hover{filter:brightness(.9)}

button.small,.btn.small{padding:6px 10px;font-size:12.5px}
button.wide,.btn.wide{width:100%}

/* Destructive, but quiet until you actually reach for it - no accent,
   just red text and a pale red border; the fill only shows on hover,
   never at rest. */
button.danger,.btn.danger{color:var(--bad);border-color:var(--bad-bg);background:#fff}
button.danger:hover,.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad-bg)}

input[type=text],input[type=date],input[type=password],input[type=search],
input[type=number],select,textarea{border:1px solid var(--line);
  border-radius:4px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}
/* Full width by default - but a field that already carries a `size`
   attribute asked for a deliberately compact width (an order number, a
   short code), and that has to keep winning or every one of those
   stretches to fill its row. */
input[type=text]:not([size]),input[type=date],input[type=password],
input[type=search]:not([size]),input[type=number]:not([size]){width:100%}
/* a box that is a table cell (the Collections sheet edits in place) */
/* a donor's page: two columns of cards, centered */
.donor{max-width:1100px;margin:0 auto}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cols .card{margin-bottom:16px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
/* the Plan's month: a small calendar, and the check-off list */
table.cal{width:auto}
table.cal td,table.cal th{padding:4px 0;width:36px;font-size:13px}
table.cal td.day{cursor:pointer}
table.cal td.today{font-weight:700}
tr.done td{opacity:.55;text-decoration:line-through}
tr.skipped td{opacity:.45}
tr.spent td{opacity:.5}
tr.drill>td{background:var(--bg);padding:10px 14px}
tr.done td.c{text-decoration:none}
@media print{header,.noprint,.flash{display:none !important}main{max-width:none;padding:0}
  .card{border:0;box-shadow:none;padding:0}}
td.edit{cursor:text}
td.editing{padding:0 2px}
table input.cell{padding:3px 5px;border-radius:3px;font-size:13px;width:auto;max-width:100%}
table input.cell.num{text-align:right}
table input.cell[type=date]{width:118px}
/* the sheet itself: tighter cells so a dozen columns fit without a sideways scroll */
table.sheet th,table.sheet td{padding:4px 6px;font-size:13px;white-space:nowrap}
textarea{width:100%;min-height:220px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px}
label.chk{display:inline-flex;align-items:center;gap:7px;margin:0 14px 8px 0}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:4px}
.field span{font-size:13.5px;color:var(--small);font-weight:600}

/* One .pill base, every modifier declared after it so it always wins -
   these used to collide with a second, page-specific .pill rule defined
   later in the old single stylesheet; the status colors below were
   silently losing to it (every status pill rendered plain grey, no
   red/green/amber distinction at all) since a same-specificity tie
   resolves by source order. Keeping exactly one .pill definition, with
   every modifier after it, is what actually prevents that class of bug -
   not just splitting files. 3px radius, not a lozenge - a tag, not a
   consumer-app badge. */
.pill{display:inline-block;padding:4px 9px;border-radius:3px;font-size:11px;
  font-weight:600;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.pill.warn{background:var(--late-bg);border-color:var(--late);color:var(--late)}
.pill.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.s-ontime{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.s-late{background:var(--late-bg);color:var(--late);border-color:transparent}
.s-absent{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.s-review{background:var(--grey-bg);color:var(--muted);border-color:transparent}
.s-nosheet{background:#f5f5f3;color:var(--small);border-color:transparent}
.s-holiday{background:var(--info-bg);color:var(--info);border-color:transparent}
.s-not_taken{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.s-pending_check{background:var(--late-bg);color:var(--late);border-color:transparent}
.s-pending{background:#fff;color:var(--small);border:1px dashed var(--line)}
.s-part_time{background:#fff;color:var(--small);border:1px dashed var(--line)}
.s-elsewhere{background:transparent;border-color:transparent;min-width:18px}
/* Tuition contract status - fixed colors, not var(--accent), so a
   status pill reads the same on the Enrollment talmid page (which
   never loads tuition.css) as it does inside Tuition itself. Mapped
   onto the same four semantic colors every other status pill uses,
   not a one-off palette of its own. */
.t-entered{background:var(--grey-bg);color:var(--muted);border-color:transparent}
.t-aid_review{background:var(--late-bg);color:var(--late);border-color:transparent}
.t-renegotiated{background:var(--info-bg);color:var(--info);border-color:transparent}
.t-sent_to_qb{background:var(--ok-bg);color:var(--ok);border-color:transparent}

.muted{color:var(--muted)}
.small{color:var(--small);font-size:13.5px}

/* A row of at-a-glance numbers - shared across any page that wants one
   (Learning Abroad's dashboard, Attendance's Today page), so it always
   looks the same wherever it shows up. Same "no shadow, border only"
   house style as a plain .card. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;margin-bottom:18px}
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:18px;text-align:center}
.stat-tile .n{font-size:32px;font-weight:700;line-height:1;color:var(--accent)}
.stat-tile .l{color:var(--muted);font-size:13px;margin-top:6px}

/* A labeled horizontal bar, one per row - a breakdown under a stat-row
   (Learning Abroad's programs, Outcomes' top institutions/growth). */
.bar-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.bar-label{flex:0 0 170px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:var(--bg);border-radius:3px;height:8px;overflow:hidden}
.bar-fill{background:var(--accent);height:8px}
.bar-count{flex:0 0 24px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.legend span{margin-right:14px;font-size:12px}
.spacer{flex:1}
.hdr-end{display:flex;align-items:center;gap:10px}
/* a header button that opens a list of pages (the Admin menu) */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;user-select:none;white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" \25BE";font-size:10px}
.menu[open] summary{background:var(--accent-soft,#eee);border-color:var(--accent)}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:#fff;
  border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.10);
  padding:6px 0;z-index:60}
.menu-list a{display:block;padding:8px 16px;color:var(--ink);text-decoration:none;font-size:13.5px;white-space:nowrap}
.menu-list a:hover{background:var(--accent-soft,#eee);opacity:1}
.ver{color:var(--small);font-size:12px}
.hdr-end .btn.small{padding:5px 10px;font-size:12px}
/* Tertiary: not worth a bordered box - Dismiss, Close, Change these.
   No border, no background, no padding - just underlined text that
   turns red on hover, the one hint that this button does something at
   all. */
button.linky,a.linky{display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:3px;color:var(--ink);font:inherit;font-weight:600;font-size:12px;
  line-height:1.2;padding:4px 9px;cursor:pointer;text-decoration:none;
  transition:border-color .12s ease,color .12s ease}
button.linky:hover,a.linky:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.linky.bad{color:var(--bad)}
.linky.bad:hover{border-color:var(--bad);color:var(--bad)}
button.linky:disabled{opacity:.5;cursor:default}

/* Drop zone: the one way a file is handed in, everywhere a file goes in
   (scanned sheets, roster and import CSVs, a backup). A real file input
   sits inside, visually hidden but present, so the form posts exactly
   as before and `required` still holds; the zone itself is the click
   target. Dashed at rest, accent while a file hovers over it, solid
   accent once one is picked. */
.dropzone{position:relative;border:1.5px dashed var(--line);border-radius:6px;
  padding:20px 18px;background:#fff;text-align:center;cursor:pointer;
  transition:border-color .12s ease,background .12s ease}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.has-file{border-style:solid;border-color:var(--accent)}
.dropzone input[type=file]{position:absolute;left:50%;top:50%;width:1px;height:1px;
  opacity:0;pointer-events:none}
.dropzone-idle,.dropzone-picked{display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap}
.dropzone-idle[hidden],.dropzone-picked[hidden]{display:none}
.dropzone-name{font-weight:600}
.row>.dropzone{flex:1 1 260px}

/* A count on a nav tab (Tuition's Reminders) - the one place a solid
   red fill is right: it's a number that exists to be noticed. */
.badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:5px;
  border-radius:999px;background:var(--bad);color:#fff;font-size:11px;
  font-weight:700;line-height:16px;text-align:center;vertical-align:1px}

/* Chip: a filter you can click. Here it wraps a real checkbox with the
   box itself hidden, so a multi-select group picker stays a plain form
   control - no script, Select all/none still just flip the boxes. The
   checked one is solid accent with white text. */
.chip{position:relative;display:inline-flex;align-items:center;
  padding:6px 12px;margin:0 6px 6px 0;border:1px solid var(--line);
  border-radius:4px;background:#fff;font-size:12.5px;font-weight:600;
  cursor:pointer;user-select:none;transition:border-color .12s ease}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip:hover{border-color:var(--small)}
.chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* the sign-in page's centered layout - a neutral page, loads no
   department file, so this has to live here rather than in enrollment.css */
.welcome{max-width:760px;margin:40px auto;text-align:center}
.welcome h1{font-size:26px;margin-bottom:4px}
/* The card grid of the front pages - the choose-department screen and
   a department's home. Shared: the portal has no section stylesheet. */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin:24px 0 8px;text-align:left}
.dept-card{display:block;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:26px;text-decoration:none;color:var(--ink);
  transition:border-color .12s ease}
.dept-card:hover{border-color:var(--accent)}
.dept-card img{width:52px;height:52px;border-radius:4px;display:block;margin-bottom:14px}
.dept-emoji{font-size:40px;line-height:1;display:block;margin-bottom:14px}
.dept-card h2{margin:0 0 6px;font-size:17px;font-weight:600}
.dept-card p{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.5}