/* ==========================================================================
   Avondale v2 — portal layout (white SVG-icon sidebar + design-system cards)
   ========================================================================== */

.portal-body { background: var(--surface); min-height: 100vh; }
.portal-shell { display: flex; min-height: 100vh; background: var(--surface); position: relative; }

/* ---------- sidebar ---------- */
.side { width: 252px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px 16px; }
.side-brand .brand-badge { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--navy-glow)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 17px; overflow: hidden; }
.side-brand .brand-badge img { width: 100%; height: 100%; object-fit: cover; }
.side-brand b { font-weight: 900; font-size: 15px; color: var(--navy); display: block; line-height: 1.15; }
.side-brand small { font-size: 11px; color: var(--muted); font-weight: 600; }
.side-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.side-nav .grp { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 16px 10px 8px; }
.side-item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 10px 11px; border-radius: var(--r-input); cursor: pointer; text-align: left; margin-bottom: 2px; transition: background .12s, color .12s; font-family: inherit; }
.side-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-item:hover { background: var(--surface); color: var(--ink); }
.side-item.active { background: var(--tint); color: var(--primary-600); font-weight: 800; }
.side-item .label { flex: 1; }
.side-item .count { background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; }
.side-item.active .count { background: var(--primary); }
.side-foot { border-top: 1px solid var(--hairline); padding: 12px; margin: 0 6px; }
.side-foot .who { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-input); }
.side-foot .who .nm { font-weight: 800; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .who .rl { font-size: 11.5px; color: var(--muted); }
.side-foot .signout { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.side-foot .signout:hover { background: var(--surface-2); color: var(--red); }
.side-backdrop { display: none; }

/* ---------- main column ---------- */
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); padding: 12px clamp(16px,3vw,28px); display: flex; align-items: center; gap: 14px; }
.topbar .menu-btn { display: none; border: 1.5px solid var(--hairline); background: #fff; border-radius: 10px; padding: 8px; cursor: pointer; }
.topbar .tb-titles { min-width: 0; }
.topbar .tb-titles h1 { font-size: clamp(17px,2vw,21px); font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-titles .sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.topbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .tb-icon { position: relative; border: 1.5px solid var(--hairline); background: #fff; border-radius: 12px; padding: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.topbar .tb-icon .ping { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; border: 2px solid #fff; }
.portal-content { flex: 1; padding: clamp(18px,3vw,32px); max-width: 1240px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(20px,2.4vw,26px); }
.page-head p { color: var(--muted); margin-top: 4px; font-size: 14px; }

/* ---------- KPI cards (admin dashboard) ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-sm); }
.kpi .kpi-top { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi .kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(47,107,255,.1); color: var(--primary); }
.kpi.violet .kpi-ic { background: rgba(124,92,255,.12); color: var(--violet); }
.kpi.green .kpi-ic { background: var(--green-tint); color: var(--green); }
.kpi.accent .kpi-ic { background: var(--accent-tint); color: var(--accent-ink); }
.kpi .kpi-delta { background: var(--green-tint); color: var(--green); font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }
.kpi .kpi-v { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; margin-top: 14px; line-height: 1; color: var(--navy); }
.kpi .kpi-l { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }

/* ---------- simple stat cards (summaries) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); }
.stat-card .sc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; flex: none; background: var(--tint); color: var(--primary); }
.stat-card.g .sc-ic { background: var(--green-tint); color: var(--green); }
.stat-card.a .sc-ic { background: var(--amber-tint); color: var(--amber-ink); }
.stat-card.p .sc-ic { background: rgba(124,92,255,.12); color: var(--violet); }
.stat-card .sc-v { font-size: 24px; font-weight: 900; color: var(--navy); line-height: 1.1; }
.stat-card .sc-l { color: var(--muted); font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ---------- layout grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.grid-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; align-items: start; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 5px; margin-bottom: 22px; overflow-x: auto; box-shadow: var(--shadow-sm); }
.tabs a { padding: 9px 18px; border-radius: var(--r-pill); font-weight: 800; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.tabs a.active { background: var(--primary); color: #fff; }
.tabs a:hover:not(.active) { color: var(--primary-600); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-sm); }
table.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dtable th { text-align: left; padding: 13px 20px; background: var(--surface); color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
table.dtable td { padding: 12px 20px; border-bottom: 1px solid var(--hairline-2); color: var(--ink); vertical-align: middle; }
table.dtable tr:last-child td { border-bottom: none; }
table.dtable tbody tr:hover { background: var(--surface); }
table.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-user { display: flex; align-items: center; gap: 11px; }
.cell-user .avatar { width: 36px; height: 36px; font-size: 13px; }
.cell-user .nm { font-weight: 800; color: var(--navy); }
.cell-user .sub { font-size: 12px; color: var(--muted); }

/* ---------- empty ---------- */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .ic { font-size: 40px; margin-bottom: 10px; opacity: .7; }
.empty h3 { color: var(--ink); font-size: 16px; }
.empty p { margin-top: 6px; font-size: 14px; }

/* ---------- feed / notices ---------- */
.notice { background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--primary); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.notice.pinned { border-left-color: var(--accent); background: #fffdf8; }
.notice h4 { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.notice .meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.notice p { margin-top: 6px; color: #3b465f; font-size: 14px; white-space: pre-line; line-height: 1.55; }
/* dotted feed list (dashboard) */
.feed-item { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.feed-item:last-child { border-bottom: none; }
.feed-item .fdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--primary); }
.feed-item .fmain { flex: 1; min-width: 0; }
.feed-item .ftitle { font-weight: 800; font-size: 14px; }
.feed-item .fbody { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.feed-item .fdate { font-size: 12px; color: var(--faint); font-weight: 700; white-space: nowrap; }
.panel { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel .panel-head { padding: 16px 22px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel .panel-head h2 { font-size: 16px; font-weight: 800; }
.panel .panel-pad { padding: 8px 22px 16px; }

/* ---------- messages ---------- */
.msg { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 12px; border-left: 4px solid var(--hairline); box-shadow: var(--shadow-sm); }
.msg.high { border-left-color: var(--amber); }
.msg.urgent { border-left-color: var(--red); }
.msg .msg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.msg .msg-subj { font-weight: 800; color: var(--navy); font-size: 15px; }
.msg .msg-meta { font-size: 12.5px; color: var(--muted); }
.msg .msg-body { margin-top: 8px; color: #3b465f; font-size: 14px; white-space: pre-line; }
.msg .msg-reply { margin-top: 10px; background: var(--surface); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #3b465f; }

/* ---------- confidential record ---------- */
.record-banner { display: flex; align-items: center; gap: 12px; background: var(--red-tint); border: 1px solid #f6cccd; color: #b3282d; border-radius: var(--r-card); padding: 14px 20px; margin-bottom: 20px; font-weight: 700; font-size: 13.5px; }
.record-banner .tagpill { background: #fff; color: #b3282d; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; margin-left: auto; }
.rec-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 20px; }
.rec-hero .avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 24px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; }
.rec-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.rec-card.medical { border-color: #f6cccd; }
.rec-card .rc-head { padding: 15px 20px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; }
.rec-card.medical .rc-head { border-bottom-color: var(--red-tint); background: linear-gradient(90deg, var(--red-tint), transparent); }
.rec-card .rc-head .rc-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--tint); color: var(--primary); display: grid; place-items: center; }
.rec-card.medical .rc-head .rc-ic { background: #fff; color: var(--red); }
.rec-card .rc-head h3 { font-size: 15px; font-weight: 800; margin: 0; }
.rec-card.medical .rc-head h3 { color: #b3282d; }
.rec-body { padding: 6px 20px 14px; }
.rec-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline-2); font-size: 13.5px; }
.rec-row:last-child { border-bottom: none; }
.rec-row .k { color: var(--muted); font-weight: 700; }
.rec-row .v { color: var(--navy); font-weight: 700; text-align: right; }
.rec-row .v.sensitive { background: var(--red-tint); color: #b3282d; padding: 2px 9px; border-radius: 7px; }
.confidential-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--red-tint); color: #b3282d; font-weight: 800; font-size: 12px; padding: 5px 12px; border-radius: var(--r-pill); }
.access-log .al-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline-2); }
.access-log .al-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

/* ---------- attendance ---------- */
.att-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--hairline-2); }
.att-row:last-child { border-bottom: none; }
.att-opts { display: flex; gap: 8px; }
.att-opts label { cursor: pointer; }
.att-opts input { position: absolute; opacity: 0; }
.att-opts .pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; border-radius: var(--r-pill); border: 1.5px solid var(--hairline); font-weight: 800; font-size: 13px; color: var(--muted); background: #fff; transition: all .14s; }
.att-opts input:checked + .pill.present { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px -4px var(--green); }
.att-opts input:checked + .pill.late { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 4px 12px -4px var(--amber); }
.att-opts input:checked + .pill.absent { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 12px -4px var(--red); }
.att-counts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.att-count { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; padding: 7px 13px; border-radius: var(--r-pill); }
.att-count.p { background: var(--green-tint); color: var(--green); }
.att-count.l { background: var(--amber-tint); color: var(--amber-ink); }
.att-count.a { background: var(--red-tint); color: var(--red); }

/* ---------- gradebook ---------- */
.gradebook input.mark { width: 74px; text-align: center; font-weight: 800; padding: 8px 6px; }
.gletter { font-weight: 900; font-size: 12px; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.progressbar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progressbar > span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.grade-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.grade-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grade-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- parent hero ---------- */
.parent-hero { background: linear-gradient(120deg, var(--navy), var(--navy-glow)); border-radius: var(--r-card); padding: 24px 26px; color: #fff; margin-bottom: 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow); }
.parent-hero .ph-av { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 900; font-size: 22px; }
.parent-hero .ph-name { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.parent-hero .ph-sub { font-size: 13px; opacity: .8; }
.parent-hero .ph-cap { font-size: 12.5px; opacity: .75; font-weight: 700; }
.parent-hero .ph-big { font-size: 30px; font-weight: 900; line-height: 1.1; }

/* ---------- timetable ---------- */
.timetable-wrap { overflow-x: auto; }
table.timetable { width: 100%; border-collapse: separate; border-spacing: 6px; min-width: 680px; }
table.timetable th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 800; padding: 6px; }
table.timetable td { background: var(--surface); border: 1px solid var(--hairline); border-radius: 11px; padding: 10px 12px; vertical-align: top; min-width: 110px; }
table.timetable td.slot { background: rgba(47,107,255,.08); border-color: rgba(47,107,255,.18); }
table.timetable td .sub { font-weight: 800; color: var(--navy); font-size: 13px; }
table.timetable td .rm { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- inline sub-forms ---------- */
.subform { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 22px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.subform h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- upload / logo preview ---------- */
.logo-drop { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1.5px dashed var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.logo-drop .lp { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--navy-glow)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 26px; overflow: hidden; flex: none; }
.logo-drop .lp img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; transform: translateX(-105%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg); }
  .side.open { transform: translateX(0); }
  .side-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(20,32,74,.45); z-index: 44; backdrop-filter: blur(2px); }
  .topbar .menu-btn { display: grid; place-items: center; }
}
@media (max-width: 620px) {
  .portal-content { padding: 18px 14px 48px; }
  .att-counts { width: 100%; }
}
@media print {
  .side, .topbar, .tabs, .no-print, .side-backdrop { display: none !important; }
  .portal-shell { display: block; }
  .portal-content { padding: 0; }
  body { background: #fff; }
}

/* Shared school logo: when the badge holds the uploaded logo image (same one
   the public site uses), show it in full on a light background instead of the
   cropped navy letter tile. */
.brand-badge:has(img) { background: #fff !important; border: 1px solid var(--line, #e6ecf5); }
.brand-badge img { object-fit: contain !important; padding: 3px; box-sizing: border-box; }

/* ═══════════════════════════════════════════
   NOTICE BOARD (cork board of pinned notes)
   ═══════════════════════════════════════════ */
.nb-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.nb-pick{display:inline-flex;align-items:center;gap:9px;font-size:13px}
.nb-pick span{font-weight:800;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.nb-pick select{padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-weight:700;color:#14204a;background:#fff}
.nb-day{display:flex;align-items:center;gap:12px;margin-left:auto}
.nb-daylabel{text-align:center;line-height:1.25}
.nb-daylabel>div{font-weight:800;color:#14204a;font-size:14px;margin-top:3px}
.nb-tag{display:inline-block;background:#14204a;color:#c8a455;font-weight:800;font-size:10px;letter-spacing:.09em;padding:3px 10px;border-radius:999px}
.nb-compose{margin-bottom:16px;max-width:620px}
.nb-compose-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.nb-colors{display:inline-flex;gap:7px;align-items:center}
.nb-colors label{display:inline-flex;position:relative}
.nb-colors input{position:absolute;opacity:0;width:0;height:0}
.nb-colors input:focus-visible + .nb-swatch{outline:2px solid #14204a;outline-offset:2px}
.nb-swatch{width:24px;height:24px;border-radius:7px;display:inline-block;cursor:pointer;border:2px solid rgba(20,32,74,.14);transition:transform .15s,border-color .15s}
.nb-colors input:checked + .nb-swatch{border-color:#14204a;transform:scale(1.14)}
.nb-yellow{background:#fdf3c3}.nb-pink{background:#fbdce8}.nb-cyan{background:#d3ecf5}
.nb-green{background:#d8ecdd}.nb-purple{background:#e4dcf5}.nb-white{background:#fff}

/* the board itself */
.nb-board{background:linear-gradient(135deg,#1a2744,#14204a);padding:14px;border-radius:18px;
  box-shadow:0 18px 44px rgba(20,32,74,.28),inset 0 0 0 2px rgba(200,164,85,.25)}
.nb-cork{background-color:#cBa274;background-color:#c9a275;
  background-image:radial-gradient(circle,rgba(110,75,30,.20) 1.3px,transparent 1.6px);
  background-size:16px 16px;border-radius:10px;padding:26px 22px;min-height:380px}
.nb-grid{column-count:3;column-gap:22px}
@media(max-width:1100px){.nb-grid{column-count:2}}
@media(max-width:700px){.nb-grid{column-count:1}}

.nb-note{position:relative;display:inline-block;width:100%;margin:0 0 24px;break-inside:avoid;
  padding:20px 18px 14px;background:var(--nb-bg);border-radius:2px;
  box-shadow:0 10px 20px rgba(50,34,10,.30);transform:rotate(var(--nb-rot));
  transition:transform .22s ease,box-shadow .22s ease}
.nb-note:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 16px 28px rgba(50,34,10,.34);z-index:2}
.nb-pinhead{position:absolute;top:-9px;left:50%;margin-left:-9px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--nb-pin) 62%);box-shadow:0 3px 5px rgba(0,0,0,.35)}
.nb-note h4{font-family:'Playfair Display',Georgia,serif;font-size:17px;line-height:1.2;color:#2a2416;margin:0;padding-right:16px}
.nb-note p{color:#4a4330;font-size:13.5px;line-height:1.55;margin:7px 0 0}
.nb-note footer{display:flex;justify-content:space-between;gap:8px;margin-top:12px;
  color:#7a6f52;font-size:11.5px;font-weight:800}
.nb-remove{position:absolute;top:5px;right:5px}
.nb-remove button{background:none;border:0;cursor:pointer;color:rgba(60,40,10,.45);padding:2px;line-height:0;border-radius:6px}
.nb-remove button:hover{color:#b91c1c;background:rgba(255,255,255,.5)}

.nb-blank{text-align:center;padding:56px 20px;color:#6b5a38}
.nb-blank h3{font-family:'Playfair Display',Georgia,serif;color:#4a3c22;margin:12px 0 4px;font-size:20px}
.nb-blank p{margin:0;font-size:14px;color:#6b5a38}
.nb-empty-icon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:15px;
  background:rgba(255,255,255,.55);color:#8a7043}
.card .nb-empty-icon{background:var(--surface,#eef3fa);color:#14204a}

/* ═══════════════════════════════════════════
   REPORT CARD
   ═══════════════════════════════════════════ */
.report-card{max-width:900px}
.rc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:2px solid var(--navy,#14204a);margin-bottom:18px}
.rc-brand{display:flex;align-items:center;gap:12px}
.rc-brand .brand-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#1a2744,#2a3d5e);color:#fff;font-weight:900}
.rc-brand .brand-badge img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box;background:#fff}
.rc-brand b{display:block;font-size:16px;color:var(--navy,#14204a);font-weight:900;line-height:1.2}
.rc-brand small{color:var(--muted);font-size:12px}
.rc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;margin-bottom:20px}
.rc-meta>div{display:flex;flex-direction:column;gap:2px}
.rc-meta span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rc-meta b{font-size:14.5px;color:var(--ink)}
.rc-h{margin:22px 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}
.rc-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;margin-top:20px;
  padding:14px 16px;background:var(--surface);border-radius:12px}
.rc-notes>div{display:flex;flex-direction:column;gap:2px}
.rc-notes span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rc-comment{min-height:46px;padding:12px 14px;border:1px solid var(--hairline);border-radius:10px;margin:0}
.rc-sign{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;margin-top:34px}
.rc-sign>div{font-size:12px;color:var(--muted);font-weight:700;text-align:center}
.rc-sign span{display:block;border-top:1.5px solid var(--ink);margin-bottom:6px;height:26px}

@media print{
  .no-print,.side,.topbar,.side-backdrop,.back-to-top,.alert{display:none!important}
  body,.portal-body{background:#fff!important}
  .portal-shell{display:block}
  .portal-content{padding:0;max-width:none}
  .report-card{max-width:none;border:0;box-shadow:none;padding:0}
  .table-wrap{border:0;box-shadow:none}
  a[href]:after{content:''}
}

/* ---- Term report scheduling ---- */
.term-sched{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline)}
.term-sched__form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.term-sched__form label{display:flex;align-items:center;gap:6px}
.term-sched__state{flex:1;min-width:200px;font-size:13px}
.term-sched input[type=datetime-local]{padding:8px 11px;border:1.5px solid var(--hairline);border-radius:10px;font:inherit}

/* ── Report cards ──────────────────────────────────────────────────────────
   One layout for all three stages; the template decides which blocks appear. */
.rc__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid var(--navy,#1e3a8a);}
.rc__school{font-weight:800;font-size:17px;color:var(--navy,#1e3a8a);}
.rc__addr{font-size:12.5px;color:var(--muted,#6b7280);}
.rc__title{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy,#1e3a8a);}
.rc__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin-bottom:18px;}
.rc__meta span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b7280);}
.rc__meta b{font-size:14.5px;}
.rc__extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;
  padding:14px;background:var(--surface-2,#f9fafb);border-radius:var(--r-card,12px);margin-bottom:20px;}
.rc__extra span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#6b7280);margin-bottom:3px;}
.rc__extra input,.rc__extra select{width:100%;padding:6px 8px;font-size:13.5px;}
.rc__h{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--navy,#1e3a8a);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--hairline,#e5e7eb);}
.rc__table input{width:100%;padding:5px 7px;font-size:13.5px;}
.rc__avg td{background:var(--surface-2,#f9fafb);}
.rc__skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px 26px;}
.rc__group h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#6b7280);margin:0 0 6px;}
.rc__row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:5px 0;border-bottom:1px dotted var(--hairline,#e5e7eb);font-size:13.5px;}
.rc__row:last-child{border-bottom:0;}
.rc__item{flex:1;min-width:0;}
.rc__sel{width:64px;flex:0 0 auto;padding:3px 6px;font-size:13px;}
.rc__mark{flex:0 0 auto;min-width:34px;text-align:center;font-weight:800;font-size:12.5px;
  padding:2px 8px;border-radius:20px;background:var(--tint,#eef2ff);color:var(--navy,#1e3a8a);}
.rc__mark--none{background:transparent;color:var(--faint,#9ca3af);font-weight:400;}
.rc__keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--hairline,#e5e7eb);font-size:12.5px;}
.rc__keys b{display:block;margin-bottom:4px;color:var(--navy,#1e3a8a);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;}
.rc__keys span{display:block;color:var(--muted,#6b7280);line-height:1.7;}
@media print{
  .rc{box-shadow:none;border:0;}
  .rc__skills{grid-template-columns:1fr 1fr;}
  .rc__row{break-inside:avoid;}
  .rc__group{break-inside:avoid;}
}

/* ---------- quick-look dialog (a name on a list screen) -------------------- */
.peek-back { position: fixed; inset: 0; background: rgba(20,32,74,.45); backdrop-filter: blur(2px);
             z-index: 60; display: flex; align-items: flex-start; justify-content: center;
             padding: 8vh 16px 16px; opacity: 0; transition: opacity .14s ease; }
.peek-back.show { opacity: 1; }
.peek-card { background: #fff; border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(20,32,74,.28);
             width: 100%; max-width: 520px; max-height: 82vh; overflow: auto;
             transform: translateY(-8px); transition: transform .14s ease; }
.peek-back.show .peek-card { transform: none; }
.peek-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hairline); }
.peek-head .avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.peek-head h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.2;
                overflow: hidden; text-overflow: ellipsis; }
.peek-head p { margin: 2px 0 0; font-size: 12.5px; }
.peek-head .badge { margin-left: auto; flex-shrink: 0; }
.peek-body { padding: 6px 20px 14px; }
.peek-row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--hairline); font-size: 13.5px; }
.peek-row:last-child { border-bottom: 0; }
.peek-k { flex: 0 0 132px; color: var(--muted); font-weight: 700; }
.peek-v { flex: 1; min-width: 0; color: var(--ink); word-break: break-word; }
.peek-v code { font-size: 12.5px; }
.peek-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px 18px; border-top: 1px solid var(--hairline); }
.peek-loading { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.peek-name { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.peek-name:hover { color: var(--primary-600); text-decoration: underline; }
@media (max-width: 560px) { .peek-row { display: block; } .peek-k { margin-bottom: 2px; } }