/*
 * SchoolCal — PUBLIC calendar stylesheet.
 *
 * Fresh, modern, mobile-first aesthetic (cards, chips, generous whitespace),
 * deliberately NOT the legacy bordered Word-table look of the reference PDFs.
 * Independent of the admin style.css. This same layout is the source of truth
 * for the server-side PDF export (BUILD_PLAN step 8), so keep it print-friendly.
 */

:root {
    --bg:        #f4f6fb;
    --surface:   #ffffff;
    --ink:       #1d2433;
    --ink-soft:  #5b6577;
    --ink-faint: #97a0b2;
    --line:      #e6e9f0;
    --brand:     #2c7be5;
    --brand-ink: #1a5dba;
    --closure:   #fff6f6;
    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 1px 2px rgba(20,30,55,.06), 0 8px 24px rgba(20,30,55,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    font-size: 16px;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.sc-wrap { max-width: 1040px; margin: 0 auto; padding: clamp(16px, 4vw, 32px); }

/* ---- top bar ---------------------------------------------------------- */
.sc-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 20px;
}
.sc-brand { display: flex; align-items: center; gap: 14px; }
.sc-mark {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, var(--brand), #5b9bf0);
    color: #fff; font-weight: 700; letter-spacing: .5px;
    display: grid; place-items: center; font-size: 17px;
}
.sc-school { font-size: clamp(18px, 3.4vw, 23px); font-weight: 700; line-height: 1.2; }
.sc-sub { color: var(--ink-soft); font-size: 14px; }
.sc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
    background: var(--brand); color: #fff; border: 1px solid transparent; cursor: pointer;
}
.sc-btn:hover { text-decoration: none; filter: brightness(.96); }
.sc-btn-ghost { background: var(--surface); color: var(--brand-ink); border-color: var(--line); box-shadow: var(--shadow); }
.sc-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---- controls bar ----------------------------------------------------- */
.sc-controls {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.sc-seg { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 3px; border: 1px solid var(--line); }
.sc-seg-btn {
    padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.sc-seg-btn:hover { text-decoration: none; color: var(--ink); }
.sc-seg-btn.is-on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(20,30,55,.12); }

.sc-field { display: flex; flex-direction: column; gap: 4px; }
.sc-field-label { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.sc-field select {
    appearance: none; -webkit-appearance: none;
    padding: 8px 30px 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6577' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
    font-size: 14px; color: var(--ink); min-width: 140px;
}
.sc-clear { align-self: center; font-size: 13px; color: var(--ink-soft); }
.sc-approved { color: var(--ink-soft); font-size: 13.5px; margin: 0 4px 14px; }

/* ---- month view ------------------------------------------------------- */
.sc-main {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px;
}
.sc-month-head { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.sc-month-title { font-size: clamp(17px, 3vw, 21px); font-weight: 700; text-align: center; min-width: 9ch; }
.sc-nav {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    font-size: 22px; color: var(--brand-ink); background: var(--bg); border: 1px solid var(--line); line-height: 1;
}
.sc-nav:hover { text-decoration: none; background: #eaf1fc; }
.sc-nav.is-disabled { opacity: .35; }

.sc-grid { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
/* minmax(0,1fr): equal tracks that content cannot blow out, so day columns
   line up identically across every week row. */
.sc-dow-row, .sc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-dow { padding: 9px 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-faint);
          text-transform: uppercase; letter-spacing: .04em; background: #fafbfe; border-bottom: 1px solid var(--line); }
.sc-cell { min-height: 104px; min-width: 0; overflow: hidden; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sc-week .sc-cell:last-child { border-right: none; }
.sc-cell.is-empty { background: #fcfcfe; }
.sc-cell.is-closure-day { background: var(--closure); }
.sc-cell.is-today { background: #eef5ff; }
.sc-daynum { font-size: 13px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.sc-cell.is-today .sc-daynum { color: var(--brand-ink); }
.sc-today-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }
.sc-day-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ---- chips ------------------------------------------------------------ */
.sc-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
    padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.35;
    background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 72%, #1d2433);
    border: 1px solid color-mix(in srgb, var(--c) 30%, #fff);
}
.sc-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.sc-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* In month cells the chip fills the column and its label ellipsizes, so a long
   title can never widen the day column. (Agenda chips stay content-hugging.) */
.sc-day-events .sc-chip { display: flex; width: 100%; }
.sc-chip.is-closure { font-weight: 700; }

/* graceful fallback if color-mix unsupported */
@supports not (background: color-mix(in srgb, red, blue)) {
    .sc-chip { background: #eef1f7; color: var(--ink); border-color: var(--line); }
}

/* ---- agenda view ------------------------------------------------------ */
.sc-agenda { list-style: none; }
.sc-agenda-month {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); padding: 16px 18px 8px; border-bottom: 1px solid var(--line);
}
.sc-agenda-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sc-agenda-item:last-child { border-bottom: none; }
.sc-agenda-item.is-past { opacity: .55; }
.sc-agenda-date {
    flex: none; width: 48px; text-align: center; border-radius: 10px; padding: 6px 0;
    background: var(--bg); border: 1px solid var(--line); height: fit-content;
}
.sc-agenda-dow { display: block; font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
.sc-agenda-dnum { display: block; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.sc-agenda-body { min-width: 0; }
.sc-agenda-title { margin-bottom: 4px; }
.sc-agenda-title .sc-chip { font-size: 14px; padding: 3px 9px; }
.sc-agenda-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13.5px; }
.sc-dot-sep { color: var(--ink-faint); }
.sc-progs { color: var(--brand-ink); font-weight: 600; }
.sc-badge {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: #fff3e0; color: #b76b00; padding: 1px 7px; border-radius: 999px; border: 1px solid #ffe2b8;
}
.sc-dismiss { list-style: none; margin: 7px 0 0; padding: 8px 11px; background: var(--bg); border-radius: var(--radius-sm); font-size: 13.5px; }
.sc-dismiss li { padding: 1px 0; color: var(--ink-soft); }
.sc-dismiss strong { color: var(--ink); }
.sc-agenda-desc { margin-top: 6px; color: var(--ink-soft); font-size: 14px; }

.sc-month-empty, .sc-empty { text-align: center; color: var(--ink-soft); padding: 28px 18px; }
.sc-empty h1 { color: var(--ink); margin-bottom: 8px; }

/* ---- month event list (phone companion to the grid) -------------------- */
/* Hidden by default; the phone breakpoint reveals it once the grid chips
   collapse to color bars and can no longer carry their labels. */
.sc-month-list { display: none; border-top: 1px solid var(--line); margin-top: 2px; }
.sc-month-list-head {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); padding: 14px 18px 0;
}

/* ---- legend ----------------------------------------------------------- */
.sc-legend {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.sc-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); }
.sc-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--c); border: 1px solid rgba(0,0,0,.08); flex: none; }
.sc-swatch.is-closure { border-radius: 4px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--c); }
.sc-legend-note { color: var(--ink-faint); }

/* ---- footer ----------------------------------------------------------- */
.sc-foot { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 8px 0 24px; }
.sc-foot a { color: var(--ink-soft); }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 720px) {
    body { font-size: 15px; }
    .sc-cell { min-height: 72px; padding: 4px; }
    .sc-chip-label { font-size: 11px; }
    .sc-dow { font-size: 10px; padding: 7px 2px; }
    .sc-controls { gap: 10px; }
    .sc-field select { min-width: 0; width: 100%; }
    .sc-field { flex: 1 1 132px; }
}
@media (max-width: 600px) {
    /* Phones: grid chips can't fit their labels, so collapse each to a slim
       solid bar of its type color and reveal the month event list below. */
    .sc-day-events .sc-chip {
        padding: 0; border: none; height: 6px; border-radius: 3px;
        background: var(--c);
    }
    .sc-day-events .sc-chip-dot, .sc-day-events .sc-chip-label { display: none; }
    .sc-cell { min-height: 52px; }
    .sc-day-events { gap: 3px; }
    .sc-month-list { display: block; }
}
@media (max-width: 460px) {
    .sc-cell { min-height: 44px; }
}

/* ---- print (PDF export reuses this layout) ---------------------------- */
@media print {
    body { background: #fff; }
    .sc-controls, .sc-actions, .sc-nav, .sc-foot a { display: none !important; }
    .sc-main, .sc-legend { box-shadow: none; border-color: #ccc; }
    .sc-agenda-item.is-past { opacity: 1; }
}