:root{
  --navy:#0b3158;
  --navy-dark:#061f39;
  --gold:#c8a55d;
  --cream:#f7f3ea;
  --white:#fff;
  --text:#253446;
  --muted:#6f7b88;
  --line:#e6e1d7;
  --success:#1f8b4c;
  --danger:#b33b3b;
  --shadow:0 16px 40px rgba(11,49,88,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f7fa;color:var(--text)}
button,input,select,textarea{font:inherit}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy-dark),var(--navy));color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px 24px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:20px}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--gold);color:var(--navy-dark);font-size:28px;font-weight:800}
.brand strong{display:block}
.brand span{display:block;font-size:12px;color:rgba(255,255,255,.65);margin-top:2px}
nav{display:grid;gap:7px}
.nav-item{width:100%;text-align:left;border:0;background:transparent;color:rgba(255,255,255,.76);padding:11px 12px;border-radius:10px;cursor:pointer;font-weight:650}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.12);color:#fff}
.main{padding:28px 32px 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}
.topbar h1{margin:0;color:var(--navy);font-size:32px}
.topbar p{margin:4px 0 0;color:var(--muted)}
.top-actions{display:flex;gap:10px}
.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:750;cursor:pointer}
.btn.primary{background:var(--navy);color:#fff}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.gold{background:var(--gold);color:var(--navy-dark)}
.btn.danger{background:#fff0f0;color:var(--danger);border:1px solid #f3caca}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(11,49,88,.05)}
.stat-label{font-size:13px;color:var(--muted);font-weight:700}
.stat-value{font-size:31px;color:var(--navy);font-weight:850;margin-top:6px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(11,49,88,.05)}
.panel h2{margin:0 0 14px;color:var(--navy);font-size:20px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
td{font-size:14px}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}
.badge.paid,.badge.active,.badge.present{background:#e9f8ef;color:var(--success)}
.badge.unpaid,.badge.absent{background:#fff0f0;color:var(--danger)}
.badge.partial,.badge.pending,.badge.rescheduled{background:#fff7df;color:#8a6500}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.search{min-width:240px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:750;color:var(--navy)}
.field input,.field select,.field textarea{padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.field.full{grid-column:1/-1}
.modal{position:fixed;inset:0;background:rgba(4,18,32,.65);display:grid;place-items:center;padding:20px;z-index:100}
.modal.hidden{display:none}
.modal-card{position:relative;background:#fff;width:min(760px,95vw);max-height:90vh;overflow:auto;border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.25)}
.modal-close{position:absolute;right:16px;top:12px;border:0;background:#f1f3f5;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}
.invoice-box{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}
.invoice-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}
.invoice-head h2{margin:0;color:var(--navy)}
.invoice-total{font-size:28px;font-weight:900;color:var(--navy)}
.muted{color:var(--muted)}
.list{display:grid;gap:10px}
.list-item{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fcfbf8}
.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.app-shell{grid-template-columns:210px 1fr}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.main{padding:20px}.cards{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media print{
  body{background:#fff}
  .sidebar,.topbar,.no-print{display:none!important}
  .app-shell{display:block}
  .main{padding:0}
  .modal{position:static;background:#fff;padding:0}
  .modal-card{box-shadow:none;width:100%;max-height:none;padding:0}
  .modal-close{display:none}
}


/* ===== Premium invoice v1.1 ===== */
.invoice-sheet{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e5e0d7;
  color:#21344b;
  box-shadow:0 16px 50px rgba(8,45,80,.08);
}
.invoice-hero{
  background:#082a4a;
  color:#fff;
  padding:34px 38px 26px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  align-items:center;
  border-bottom:6px solid #cfae61;
}
.invoice-logo-wrap{
  background:#f7f2e7;
  border-radius:18px;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.invoice-logo-text{
  font-family:Georgia,serif;
  color:#0b3158;
  text-align:center;
}
.invoice-logo-text strong{
  display:block;
  font-size:26px;
  letter-spacing:.02em;
}
.invoice-logo-text span{
  display:block;
  color:#b78d38;
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.invoice-title{
  text-align:right;
}
.invoice-title h1{
  margin:0;
  font-size:38px;
  letter-spacing:.02em;
}
.invoice-title .academy{
  color:#d6ae54;
  font-weight:900;
  margin-top:8px;
}
.invoice-title .tagline{
  margin-top:4px;
  opacity:.92;
}
.invoice-body{
  padding:32px 38px 30px;
}
.invoice-meta{
  background:#f5f0e6;
  border-radius:18px;
  padding:20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:24px;
}
.meta-block span,
.invoice-box-label{
  display:block;
  font-size:11px;
  font-weight:850;
  color:#66758a;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.meta-block strong{
  display:block;
  margin-top:8px;
  color:#0b3158;
  font-size:15px;
}
.invoice-status{
  display:inline-flex;
  margin-top:6px;
  min-width:82px;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#d3aa53;
  color:#092a49;
  font-weight:900;
}
.invoice-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:26px;
}
.invoice-info-card{
  border:1px solid #e7dfd0;
  border-radius:16px;
  padding:18px 20px;
  min-height:145px;
}
.invoice-info-card h3{
  color:#c89f4f;
  font-size:13px;
  text-transform:uppercase;
  margin:0 0 14px;
  letter-spacing:.03em;
}
.invoice-info-card .big{
  font-size:22px;
  font-weight:900;
  color:#0b3158;
  margin-bottom:6px;
}
.invoice-info-card p{
  margin:5px 0;
  color:#5f6e81;
}
.invoice-items{
  border:1px solid #e5dfd3;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:10px;
}
.invoice-items table{
  width:100%;
  border-collapse:collapse;
}
.invoice-items thead{
  background:#0b3b68;
  color:#fff;
}
.invoice-items th{
  color:#fff;
  font-size:12px;
  padding:14px 16px;
  text-transform:uppercase;
}
.invoice-items td{
  padding:15px 16px;
  border-bottom:1px solid #e7e1d7;
}
.invoice-items tr:last-child td{
  border-bottom:0;
}
.invoice-note{
  color:#6f7c8d;
  font-size:12px;
  margin:10px 0 18px 18px;
}
.invoice-bottom{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:stretch;
}
.payment-card{
  border:1px solid #e7dfd0;
  border-radius:16px;
  padding:18px 20px;
}
.payment-card h3{
  margin:0 0 14px;
  color:#c89f4f;
  font-size:13px;
  text-transform:uppercase;
}
.payment-card p{
  margin:7px 0;
  color:#526176;
}
.total-card{
  background:#f5f0e6;
  border-radius:16px;
  padding:18px 20px;
}
.total-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:8px 0;
}
.total-row.grand{
  border-top:2px solid #c9a252;
  padding-top:12px;
  margin-top:12px;
  color:#0b3158;
  font-size:18px;
  font-weight:900;
}
.total-row.grand strong{
  font-size:30px;
}
.invoice-footer{
  border-top:1px solid #e9e2d7;
  margin-top:34px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
}
.invoice-footer strong{
  color:#0b3158;
}
.invoice-footer .thanks{
  text-align:right;
  color:#c89f4f;
  font-weight:900;
}
@media(max-width:760px){
  .invoice-hero,.invoice-cols,.invoice-bottom{grid-template-columns:1fr}
  .invoice-title{text-align:left}
  .invoice-meta{grid-template-columns:1fr 1fr}
}
@media print{
  .invoice-sheet{box-shadow:none;border:0;border-radius:0}
  .invoice-body{padding:24px 28px}
  .invoice-hero{padding:28px}
}

/* v1.3 controls */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 18px}
.mini-field{display:grid;gap:5px;min-width:145px}
.mini-field span{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:800;letter-spacing:.04em}
.mini-field input,.mini-field select{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;min-height:38px}
.row-actions{display:flex;gap:6px;align-items:center}
.tiny-btn{border:1px solid var(--line);background:#fff;padding:6px 8px;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer}
.tiny-btn.good{color:var(--success);border-color:#bfe3cc}
.tiny-btn.warn{color:#8a6500;border-color:#efd894}
.tiny-btn.danger{color:var(--danger);border-color:#efc2c2}
.badge.on-hold{background:#fff7df;color:#8a6500}
.badge.left,.badge.expense{background:#fff0f0;color:var(--danger)}
.badge.income{background:#e9f8ef;color:var(--success)}
.badge.paused{background:#fff7df;color:#8a6500}
.badge.ended,.badge.inactive{background:#eef0f3;color:#647180}
.badge.scheduled{background:#e8eef8;color:#0b3158}
.badge.completed{background:#e9f8ef;color:var(--success)}
.badge.cancelled{background:#fff0f0;color:var(--danger)}
.badge.expired{background:#eef0f3;color:#647180}
.day-grid,.check-grid,.student-checks{display:flex;flex-wrap:wrap;gap:10px}
.day-grid label,.check-grid label,.student-checks label{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fcfbf8}
.student-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px;overflow:auto}
.report-controls{margin-bottom:18px}
#reportOutput{display:grid;gap:18px}
@media(max-width:760px){.student-checks{grid-template-columns:1fr}.row-actions{flex-wrap:wrap}}


/* ===== v1.4 invoice polish ===== */
.paypal-pay-box{
  display:grid;
  gap:14px;
  margin-top:12px;
}
.paypal-pay-btn{
  width:fit-content;
}
.paypal-qr-wrap{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.paypal-qr{
  width:92px;
  height:92px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  padding:5px;
}
.paypal-qr-wrap strong{
  color:var(--navy);
  display:block;
  margin-bottom:4px;
}
.invoice-status-paid{
  background:#dff5e8 !important;
  color:#176b39 !important;
}
.invoice-status-pending{
  background:#fff2cc !important;
  color:#8a6500 !important;
}
.invoice-status-unpaid{
  background:#ffe4e4 !important;
  color:#a33b3b !important;
}
@media print{
  .paypal-pay-box .paypal-pay-btn{display:none !important}
  .paypal-qr-wrap{break-inside:avoid}
}


/* ===== Version 1.5: editing, history and access ===== */
.current-user-badge{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:10px;
  background:#f7f3ea;
  color:#0b3158;
  border:1px solid #e7dfd0;
  font-size:12px;
  font-weight:850;
}
.badge.admin{background:#e8eef8;color:#0b3158}
.badge.manager{background:#fff2cc;color:#8a6500}
.badge.viewer{background:#eef0f3;color:#5e6b78}
.badge.edited,.badge.status-changed,.badge.user-edited{background:#e8eef8;color:#0b3158}
.badge.deleted,.badge.user-removed{background:#ffe4e4;color:#a33b3b}
.badge.user-added{background:#e9f8ef;color:#1f8b4c}
.access-warning{
  padding:15px 18px;
  border:1px solid #efd894;
  background:#fff9e8;
  color:#705500;
  border-radius:14px;
  margin-bottom:18px;
}
.access-steps{
  margin-top:24px;
  padding:18px 20px;
  border-radius:15px;
  background:#f8fafc;
  border:1px solid var(--line);
}
.access-steps h3{margin-top:0}
.access-steps li{margin:8px 0}


/* ===== v1.5.1 Academy logo ===== */
.brand-logo-wrap{
  width:64px;
  height:64px;
  border-radius:16px;
  overflow:hidden;
  background:#f7f3ea;
  border:1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  flex:0 0 64px;
}
.brand-logo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.brand{
  align-items:center;
}
.brand strong{
  line-height:1.15;
}


/* ===== Version 1.5.2 top bar polish ===== */
.current-user-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:7px 12px 7px 8px;
  border-radius:12px;
  background:#f7f3ea;
  border:1px solid #e4d9c1;
  color:#0b3158;
}
.user-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b3158;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.user-copy{
  display:grid;
  line-height:1.05;
}
.user-copy strong{
  font-size:13px;
  color:#0b3158;
}
.user-copy span{
  margin-top:4px;
  font-size:11px;
  color:#6f7b88;
}


/* ===== Version 1.6 Backup & Activity Center ===== */
.sidebar-version{
  margin-top:auto;
  padding:14px 18px;
  display:grid;
  gap:2px;
}
.sidebar-version strong{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
}
.sidebar-version span{
  display:block;
  color:rgba(255,255,255,.38);
  font-size:10.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.settings-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}
.safety-note{
  border:1px solid #efd894;
  background:#fff9e8;
  color:#705500;
  border-radius:12px;
  padding:13px 14px;
  line-height:1.5;
}
.activity-list{
  display:grid;
  gap:0;
}
.activity-item{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:12px;
  padding:16px 4px;
  border-bottom:1px solid var(--line);
}
.activity-item:last-child{border-bottom:0}
.activity-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c9a252;
  margin-top:6px;
}
.activity-main{
  min-width:0;
}
.activity-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:5px;
}
.activity-head strong{color:#0b3158}
.activity-head span{color:var(--muted);font-size:12px;white-space:nowrap}
.activity-changes{
  margin-top:7px;
  color:#5f6e81;
  font-size:12px;
  display:grid;
  gap:4px;
  word-break:break-word;
}


/* ===== Version 2.0 — Supabase Authentication Test ===== */
.auth-locked{
  display:none !important;
}
.auth-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(202,163,82,.13), transparent 30%),
    linear-gradient(135deg,#062848 0%,#0a355d 100%);
}
.auth-screen.hidden{
  display:none;
}
.auth-card{
  width:min(430px,100%);
  background:#fff;
  border-radius:24px;
  padding:34px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  border:1px solid rgba(202,163,82,.25);
}
.auth-logo{
  width:110px;
  height:70px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
}
.auth-brand{
  text-align:center;
  color:#c59b43;
  font-weight:900;
  letter-spacing:.06em;
  font-size:13px;
  text-transform:uppercase;
}
.auth-card h1{
  text-align:center;
  margin:8px 0 6px;
  color:#082f55;
  font-size:32px;
}
.auth-subtitle{
  text-align:center;
  color:#6a788c;
  margin:0 0 24px;
}
.auth-form{
  display:grid;
  gap:15px;
}
.auth-form label{
  display:grid;
  gap:7px;
  font-weight:800;
  color:#1b3550;
  font-size:13px;
}
.auth-form input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d9dee7;
  border-radius:11px;
  padding:13px 14px;
  font:inherit;
  outline:none;
  background:#fff;
}
.auth-form input:focus{
  border-color:#0b65c8;
  box-shadow:0 0 0 3px rgba(11,101,200,.12);
}
.auth-submit{
  width:100%;
  justify-content:center;
  margin-top:3px;
}
.auth-submit:disabled{
  opacity:.65;
  cursor:wait;
}
.auth-message{
  min-height:20px;
  margin-top:14px;
  text-align:center;
  color:#65748a;
  font-size:13px;
}
.auth-message.error{
  color:#b42318;
  background:#fff2f0;
  border:1px solid #ffd1cc;
  border-radius:9px;
  padding:9px 10px;
}
.auth-security{
  border-top:1px solid #eceff4;
  margin-top:18px;
  padding-top:15px;
  text-align:center;
  color:#8490a0;
  font-size:11px;
}


/* ===== Version 2.1 Master Schedule ===== */
.schedule-slot-line{
  margin:3px 0;
  font-size:12px;
}
.schedule-slot-line span{
  color:var(--muted);
  margin-left:5px;
}
.schedule-modal-card{
  width:min(900px,94vw);
}
.schedule-builder{
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.slot-row{
  display:grid;
  grid-template-columns:1fr 1fr 1.8fr auto;
  gap:10px;
  margin:10px 0;
  align-items:center;
}
.slot-row select,.slot-row input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d9dee7;
  border-radius:10px;
  padding:11px 12px;
  font:inherit;
  background:white;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
@media(max-width:760px){
  .slot-row{grid-template-columns:1fr 1fr}
  .slot-zone{grid-column:1 / -1}
}


/* ===== Version 3.0.0 Cloud Foundation ===== */
.small-stat{font-size:18px !important;line-height:1.25}
.json-setting{
  max-width:330px;
  text-align:right;
  font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-word;
}
textarea{
  min-height:90px;
  resize:vertical;
}


/* ===== v3.1.0 Master Schedule ===== */
.weekly-calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(155px,1fr));
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
}
.calendar-day{
  min-width:155px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.calendar-day-head{
  padding:10px 12px;
  background:#f7f9fc;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}
.calendar-day-head strong{color:#0b3158}
.calendar-day-head span{color:var(--muted)}
.calendar-day-body{padding:8px;display:grid;gap:7px}
.calendar-lesson{
  padding:9px;
  border-radius:10px;
  background:#f8f5ed;
  border:1px solid #e7dcc3;
  display:grid;
  gap:2px;
}
.calendar-lesson strong{color:#0b3158;font-size:12px}
.calendar-lesson span{font-size:12px;font-weight:800}
.calendar-lesson small{color:var(--muted)}
.calendar-empty{font-size:11px;color:var(--muted);padding:8px}
.schedule-slot-line{margin:3px 0;font-size:12px}
.schedule-slot-line span{color:var(--muted);margin-left:5px}
.slot-row-v31,.availability-row-v31{
  display:grid;
  grid-template-columns:1.1fr 1fr 1.8fr auto;
  gap:8px;
  margin:8px 0;
  align-items:center;
}
.availability-row-v31{grid-template-columns:1.1fr 1fr 1fr 1.5fr auto}
.slot-row-v31 select,.slot-row-v31 input,
.availability-row-v31 select,.availability-row-v31 input{
  width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:9px;padding:9px 10px;background:#fff;font:inherit;
}
@media(max-width:900px){
  .weekly-calendar{grid-template-columns:repeat(7,155px)}
  .slot-row-v31,.availability-row-v31{grid-template-columns:1fr 1fr}
  .v31-zone,.v31-av-zone{grid-column:1/-1}
}


/* ===== v3.1.2 Rolling Calendar + Attendance ===== */
.calendar-lesson small{
  display:block;
}
.calendar-lesson{
  min-height:64px;
}


/* ===== v3.2.0 Role Calendar / Google Calendar-like view ===== */
.gcal-month-label{font-size:16px;font-weight:800;color:#10375f;margin-bottom:10px}
.gcal-month{
  display:grid;
  grid-template-columns:repeat(7,minmax(110px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  overflow-x:auto;
}
.gcal-weekday{
  padding:10px;
  font-weight:800;
  text-align:center;
  background:#f7f9fc;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#556579;
  font-size:12px;
}
.gcal-cell{
  min-height:120px;
  padding:8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.gcal-cell.empty-cell{background:#fafbfc}
.gcal-date{
  font-size:12px;
  font-weight:800;
  color:#526278;
  margin-bottom:7px;
}
.gcal-event{
  padding:5px 7px;
  margin:4px 0;
  border-radius:6px;
  background:#e9f1fb;
  color:#123b67;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gcal-event.completed{background:#e6f6ea;color:#196638}
.gcal-event.cancelled{background:#fce9e9;color:#963838}
.gcal-event.no_show{background:#fff1d6;color:#865b00}
.gcal-more{font-size:10px;color:var(--muted);margin-top:4px}

.gcal-week-label{font-size:16px;font-weight:800;color:#10375f;margin-bottom:10px}
.gcal-week-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gcal-week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid var(--line);background:#fafbfc}
.gcal-week-daylabel{padding:8px 4px;text-align:center;font-weight:800;font-size:12px;color:#10375f;border-left:1px solid var(--line)}
.gcal-week-body{display:grid;grid-template-columns:60px repeat(7,1fr);height:600px;overflow-y:auto;position:relative}
.gcal-hour-col{display:flex;flex-direction:column}
.gcal-hour-label{height:var(--gcal-row,48px);font-size:10px;color:var(--muted);text-align:right;padding-right:6px;box-sizing:border-box;border-top:1px solid var(--line);padding-top:2px}
.gcal-week-col{position:relative;border-left:1px solid var(--line)}
.gcal-hour-line{height:var(--gcal-row,48px);border-top:1px solid var(--line);box-sizing:border-box}
.gcal-week-event{position:absolute;left:2px;right:2px;border-radius:4px;padding:2px 4px;font-size:10px;line-height:1.3;overflow:hidden;cursor:pointer;background:#e8eef8;color:#0b3158;border:1px solid #c7d6ee}
.gcal-week-event.completed{background:#e6f6ea;color:#196638;border-color:#bfe6c9}
.gcal-week-event.cancelled{background:#fce9e9;color:#963838;border-color:#f3c9c9}
.gcal-week-event.no_show{background:#fff1d6;color:#865b00;border-color:#f0dca8}
.gcal-week-event.rescheduled{background:#fff7df;color:#8a6500;border-color:#eddca0}
.timezone-helper-v32{
  margin-top:6px;
  font-size:11px;
  color:#607086;
}
@media(max-width:900px){
  .gcal-month{grid-template-columns:repeat(7,120px)}
}


/* ===== v3.3.0 Calendar Navigation + Timezone Diagnostics ===== */
.slot-row-wrap{
  margin:10px 0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.slot-row-wrap .slot-row-v31{margin:0}
.slot-preview-v33{
  margin-top:7px;
  font-size:11px;
  color:#3f607f;
  font-weight:700;
}
.slot-preview-v33.bad{color:#a43232}


/* ===== v3.3.1 Lesson Filters ===== */
.lesson-filter-bar{
  display:grid;
  grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:14px;
}
.lesson-filter-bar label{
  display:grid;
  gap:6px;
  color:#5c6c80;
  font-size:11px;
  font-weight:800;
}
.lesson-filter-bar select,
.lesson-filter-bar input{
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font:inherit;
}
.lesson-filter-actions{
  display:flex;
  gap:8px;
}
.lesson-filter-summary{
  margin:8px 0 12px;
  color:#526278;
  font-size:12px;
}
@media(max-width:1100px){
  .lesson-filter-bar{grid-template-columns:1fr 1fr 1fr}
  .lesson-filter-actions{grid-column:1/-1}
}
@media(max-width:700px){
  .lesson-filter-bar{grid-template-columns:1fr}
}


/* ===== v3.4.0 Rolling 12-Month Scheduler ===== */
.compact-cards .small-stat,
.small-stat{
  font-size:18px !important;
  line-height:1.2;
}


/* ===== v3.4.3 Lesson Period Presets ===== */
.lesson-filter-bar-v343{
  display:grid;
  grid-template-columns:1.4fr 1.4fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:12px;
}
.lesson-filter-bar-v343 label,
.custom-date-filter label{
  display:grid;
  gap:6px;
  color:#5c6c80;
  font-size:11px;
  font-weight:800;
}
.lesson-filter-bar-v343 select,
.custom-date-filter input{
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font:inherit;
}
.custom-date-filter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-width:520px;
  margin:0 0 14px;
}
.custom-date-filter.hidden{
  display:none;
}
@media(max-width:1000px){
  .lesson-filter-bar-v343{grid-template-columns:1fr 1fr}
  .lesson-filter-actions{grid-column:1/-1}
}
@media(max-width:650px){
  .lesson-filter-bar-v343,.custom-date-filter{grid-template-columns:1fr}
}


/* ===== v3.4.4 Visible Period Buttons ===== */
.lesson-filter-bar-v343{
  grid-template-columns:1.2fr 1.2fr minmax(390px,2fr) 1fr auto;
}
.period-filter-block{
  display:grid;
  gap:6px;
}
.period-filter-label{
  color:#5c6c80;
  font-size:11px;
  font-weight:800;
}
.period-preset-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.period-preset-btn{
  border:1px solid #d6dde7;
  background:#fff;
  color:#173a60;
  border-radius:9px;
  padding:9px 12px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.period-preset-btn:hover{
  background:#f4f7fb;
}
.period-preset-btn.active{
  background:#0b3a66;
  border-color:#0b3a66;
  color:#fff;
}
@media(max-width:1200px){
  .lesson-filter-bar-v343{grid-template-columns:1fr 1fr}
  .period-filter-block{grid-column:1/-1}
}


/* =========================================================
   v4.0.0 Clean Master Schedule
   ========================================================= */
.v4-slot-row{
  display:grid;
  grid-template-columns:1fr 1fr 1.8fr auto;
  gap:8px;
  padding:10px;
  margin:8px 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  align-items:center;
}
.v4-slot-row select,.v4-slot-row input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  padding:9px 10px;
  font:inherit;
}
.v4-slot-preview{
  grid-column:1/-1;
  color:#49657f;
  font-size:11px;
  font-weight:700;
}
.v4-slot-preview.bad{color:#a23434}

.lesson-filter-bar-v4{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.lesson-filter-bar-v4 label,
.custom-date-filter label{
  display:grid;
  gap:6px;
  color:#5c6c80;
  font-size:11px;
  font-weight:800;
}
.lesson-filter-bar-v4 select,
.lesson-filter-bar-v4 input[type="text"],
.custom-date-filter input{
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font:inherit;
}
.v4-periods{
  margin:8px 0 14px;
}
.calendar-lesson.completed{background:#e8f6ed}
.calendar-lesson.no_show{background:#fff1d8}
.calendar-lesson.cancelled{background:#fdecec}

@media(max-width:850px){
  .v4-slot-row{grid-template-columns:1fr 1fr}
  .v4-slot-row .v4-zone{grid-column:1/-1}
  .lesson-filter-bar-v4{grid-template-columns:1fr}
}


/* =========================================================
   v4.1.0 World Clock + Calendar Foundation
   ========================================================= */
.v4-slot-preview{
  line-height:1.55;
}
.v4-time-arrow{
  display:inline-block;
  margin:0 8px;
  color:#8a98aa;
}
.stat-card small{
  display:block;
  color:#68788b;
  margin-top:6px;
  font-size:11px;
  line-height:1.35;
}


/* ===== v4.3.0 Invoice PDF / Delete ===== */
.cloud-invoice-print{
  background:#fff;
  color:#21344b;
  max-width:900px;
  margin:0 auto;
}
.cloud-invoice-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:3px solid #0b3158;
}
.cloud-invoice-brand{font-size:24px;font-weight:900;color:#0b3158}
.cloud-invoice-number{text-align:right}
.cloud-invoice-number span{display:block;font-size:11px;font-weight:900;color:#c79b45;letter-spacing:.08em}
.cloud-invoice-number strong{font-size:18px;color:#0b3158}
.cloud-invoice-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.cloud-invoice-card{border:1px solid var(--line);border-radius:13px;padding:14px;display:grid;gap:5px}
.cloud-invoice-card small{font-weight:900;color:#c79b45}
.cloud-invoice-card strong{font-size:17px;color:#0b3158}
.cloud-invoice-card span{font-size:12px;color:#5d6d80}
.cloud-invoice-items{width:100%;border-collapse:collapse;margin-bottom:20px}
.cloud-invoice-items th{background:#0b3158;color:#fff;padding:11px;text-align:left;font-size:12px}
.cloud-invoice-items td{padding:11px;border-bottom:1px solid var(--line);font-size:12px}
.cloud-invoice-totals{width:min(330px,100%);margin-left:auto;display:grid;gap:5px}
.cloud-invoice-totals div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.cloud-invoice-balance{font-size:17px;color:#0b3158;border-top:2px solid #0b3158!important;padding-top:10px!important}
.cloud-invoice-footer{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#6f7d8e}
.invoice-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
@media(max-width:700px){
  .cloud-invoice-meta-grid{grid-template-columns:1fr}
  .cloud-invoice-footer{flex-direction:column}
}


/* ===== v5.9.1 Users & Access — Admin scope checkboxes ===== */
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.checkbox-row{display:flex!important;align-items:center;gap:6px;font-weight:600!important;font-size:13px!important;color:#334455!important}
.checkbox-row input{width:auto}
@media(max-width:600px){.checkbox-grid{grid-template-columns:1fr}}

/* ===== v4.4.0 Student Email ===== */
.field-help{
  display:block;
  margin-top:5px;
  color:#718095;
  font-size:11px;
  line-height:1.35;
}


/* ===== v4.5.0 Print Fix ===== */
#cloudInvoicePrintFrame{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}


/* ===== v4.6.0 Premium Invoice Preview ===== */
.premium-invoice{background:#fff;color:#153251;max-width:940px;margin:0 auto}
.pi-header{display:flex;background:#082f55;color:#fff;border-bottom:4px solid #c89b47;min-height:145px}
.pi-logo-box{width:43%;display:flex;align-items:center;padding:24px}
.pi-logo{max-width:220px;max-height:110px;object-fit:contain;background:#fff;border-radius:20px;padding:8px}
.pi-title-box{width:57%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:24px}
.pi-kicker{font-size:30px;font-weight:900}.pi-academy{color:#d3a54f;font-weight:900;margin-top:8px}.pi-subtitle{font-size:13px;margin-top:4px}
.pi-meta-bar{display:grid;grid-template-columns:repeat(4,1fr);background:#f7f1e7;border:1px solid #eadfcf;border-radius:16px;margin:22px 0;padding:16px}
.pi-meta-bar>div{padding:0 14px;border-right:1px solid #ddcfba}.pi-meta-bar>div:last-child{border-right:0}
.pi-meta-bar small,.pi-info-card small{display:block;color:#c39036;font-size:11px;font-weight:900;margin-bottom:5px}.pi-meta-bar strong{font-size:13px}
.pi-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.pi-info-card{border:1px solid #e5dac9;border-radius:16px;padding:18px;display:grid;gap:5px}.pi-info-card strong{font-size:20px;color:#10375f}.pi-info-card span{font-size:12px;color:#68778a}
.pi-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:22px}.pi-table th{background:#0b3d6d;color:#fff;padding:14px;text-align:left}.pi-table td{padding:14px;border-bottom:1px solid #eadfcf}
.pi-bottom-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.pi-pay-card{background:#fbf7ef;border:1px solid #e7dbc9;border-radius:16px;padding:18px}.pi-section-title,.pi-summary-title{font-weight:900}.pi-section-title{color:#10375f}.pi-pay-sub{font-size:12px;color:#6b7989;margin:6px 0 12px}.pi-pay-content{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center}.pi-qr{width:120px;height:120px;object-fit:contain;border:1px solid #cda85e;padding:6px;background:#fff}.pi-pay-copy{display:grid;gap:8px}.pi-paypal{font-size:22px;font-weight:900;color:#1670c8}.pi-pay-copy a{color:#123b65;text-decoration:none}.pi-pay-button{background:#0b3d6d!important;color:#fff!important;border-radius:10px;padding:12px!important;text-align:center;font-weight:900!important}
.pi-summary{background:#082f55;color:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column}.pi-summary-title{color:#d3a54f;margin-bottom:14px}.pi-summary-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(211,165,79,.35)}.pi-total{margin-top:16px;background:#d3a54f;color:#082f55;border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;font-weight:900}.pi-total strong{font-size:24px}.pi-thanks{margin-top:auto;padding-top:14px;font-size:12px;color:#f5e7c9}.pi-footer{margin-top:22px;border-top:2px solid #c89b47;padding-top:14px;display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:12px;font-size:11px;color:#5f7083}.pi-footer strong{color:#123b65}
.auth-message.hidden{display:none}
@media(max-width:760px){.pi-bottom-grid,.pi-info-grid,.pi-footer,.pi-meta-bar{grid-template-columns:1fr}.pi-meta-bar>div{border-right:0;border-bottom:1px solid #ddcfba;padding:8px 0}.pi-pay-content{grid-template-columns:1fr}.pi-title-box{align-items:flex-start}.pi-header{flex-direction:column}.pi-logo-box,.pi-title-box{width:100%}}


/* ===== v4.8.0 Secure Integration Foundation ===== */
.substitute-badge{
  display:inline-block;
  margin-top:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#fff3d9;
  color:#7a5510;
  font-weight:800;
  font-size:10px;
}


/* ===== v4.9.0 Family/Student Targeting ===== */
.family-target-badge{
  display:inline-block;
  margin-top:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#e9f1fb;
  color:#174a7b;
  font-weight:800;
  font-size:10px;
}


/* ===== v5.0.0 Family Participants ===== */
.participant-permissions{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.participant-permissions label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#44566c;
}
@media(max-width:700px){
  .participant-permissions{grid-template-columns:1fr}
}


/* ===== v5.0.1 Schedule Target UI Fix ===== */
.family-student-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
  margin-top:4px;
}
.family-student-chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.family-student-chip div{
  display:grid;
  gap:3px;
}
.family-student-chip strong{
  color:#153b63;
}
.family-student-chip small,
.family-student-chip span{
  color:#718095;
  font-size:11px;
}
.empty-inline{
  padding:12px;
  color:#718095;
  background:#fbfcfe;
  border:1px dashed var(--line);
  border-radius:12px;
}


/* ===== v5.0.2 Invoice Target UI Fix ===== */
.invoice-student-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px;
  margin-top:6px;
}
.invoice-student-card{
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  cursor:pointer;
}
.invoice-student-card input{
  width:auto!important;
  margin:0;
}
.invoice-student-card div{
  display:grid;
  gap:3px;
}
.invoice-student-card strong{
  color:#153b63;
}
.invoice-student-card small{
  color:#718095;
  font-size:11px;
}
.invoice-student-card>span{
  font-weight:800;
  color:#153b63;
}
.invoice-selection-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f7f1e7;
  border:1px solid #e4d6bd;
  color:#624c21;
}
@media(max-width:700px){
  .invoice-selection-summary{flex-direction:column}
}
\n/* ===== v5.0.5 Staged Invoice Flow ===== */\n.staged-invoice-form .invoice-stage-divider{font-size:16px;font-weight:900;color:#123b65;padding:12px 0 4px;border-top:1px solid var(--line)}\n

/* ===== v5.0.6 Visibility / Staged Flow Fix ===== */
/* New schedule/invoice flows rely on JS toggling the `hidden` class.
   This rule was missing, so both branches could stay visible at once. */
.hidden{
  display:none !important;
}


/* ===== v5.1.0 Family Schedule Sections ===== */
.schedule-sections-editor{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.schedule-section-row{
  display:grid;
  grid-template-columns:34px minmax(180px,1.4fr) 110px minmax(150px,.8fr) auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.section-order-handle{
  font-size:18px;
  color:#7d8b9c;
  text-align:center;
  cursor:grab;
}
.v51-section-time{
  font-size:12px;
  color:#52677d;
  white-space:nowrap;
}
.section-move-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.schedule-sections-total{
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  background:#f7f1e7;
  border:1px solid #e4d6bd;
  color:#624c21;
}
.schedule-section-summary{
  margin-top:6px;
  display:grid;
  gap:3px;
  font-size:11px;
  color:#617286;
}
@media(max-width:900px){
  .schedule-section-row{
    grid-template-columns:30px 1fr 100px;
  }
  .v51-section-time,.section-move-actions{
    grid-column:2 / -1;
  }
}


/* ===== v5.2.0 Schedule Meetings ===== */
.meeting-status-card{
  display:grid;
  gap:3px;
  min-width:110px;
}
.meeting-status-card strong{
  color:#176443;
  font-size:12px;
}
.meeting-status-card small{
  color:#718095;
  font-size:10px;
}
.meeting-status-card a{
  width:max-content;
  font-size:11px;
  font-weight:800;
  color:#174a7b;
  text-decoration:none;
}
.meeting-not-ready{
  color:#8a6a31;
  font-size:11px;
  font-weight:800;
}

/* ============================================================
   Homework & Lesson Report (v5.10.0)
   ============================================================ */
.pill{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  background:#eef2f7;
  color:#41506a;
  font-size:11px;
  font-weight:700;
  text-transform:capitalize;
}

.hw-banner{
  margin:10px 0 14px;
  padding:9px 12px;
  border-radius:9px;
  background:#eef4ff;
  border:1px solid #d3e0f7;
  color:#2c4470;
  font-size:13px;
}
.hw-banner.warn{
  background:#fdf3e6;
  border-color:#f0dcbc;
  color:#8a6a31;
}

.hw-chip{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.hw-chip.done{ background:#e4f6ec; color:#1d6b41; }
.hw-chip.todo{ background:#fdf0e6; color:#8a5a26; }

.hw-form-msg{ font-size:13px; min-height:18px; }
.hw-ok{ color:#1d6b41; font-weight:700; }
.hw-err{ color:#a3312b; font-weight:600; }

.hw-family-stack{ display:flex; flex-direction:column; gap:12px; }
.hw-child{
  border:1px solid #e3e8ef;
  border-radius:11px;
  padding:12px 14px;
  background:#fcfdff;
}
.hw-child > summary{
  cursor:pointer;
  font-size:14px;
  padding:2px 0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.hw-child[open] > summary{ margin-bottom:10px; border-bottom:1px solid #eef1f5; padding-bottom:9px; }

.hw-thread{ margin-top:18px; border-top:1px solid #eef1f5; padding-top:14px; }
.hw-thread h3{ margin:0 0 10px; font-size:14px; }
.hw-comments{ display:flex; flex-direction:column; gap:10px; }
.hw-comment{
  border:1px solid #eef1f5;
  border-radius:9px;
  padding:9px 11px;
  background:#fff;
}
.hw-comment-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  margin-bottom:5px;
}
.hw-comment-body{ font-size:13px; white-space:pre-wrap; }

.hw-attach-row{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.hw-attach{ display:inline-flex; align-items:center; gap:3px; }

.hw-composer{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.hw-composer textarea{ width:100%; }
.hw-composer .row-actions{ flex-wrap:wrap; gap:8px; align-items:center; }

@media (max-width:720px){
  .hw-child{ padding:10px; }
  .hw-composer .row-actions{ flex-direction:column; align-items:stretch; }
  .hw-comment-head{ font-size:11px; }
}

.hw-auto-hint{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:#7b879b;
  font-style:italic;
}

/* ---- Schedule creation wizard ---- */
.sw-body{max-height:60vh;overflow-y:auto}
.sw-choice-grid{display:grid;gap:12px;margin-top:8px}
.sw-choice{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border:1px solid #d9e0ea;
  border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sw-choice:hover{border-color:#1f3864;box-shadow:0 2px 10px rgba(31,56,100,.12)}
.sw-choice strong{font-size:15px;color:#1f3864}
.sw-choice span{font-size:12px;color:#6b7789}
.sw-people{display:grid;gap:6px;max-height:230px;overflow-y:auto;border:1px solid #e4e9f0;border-radius:8px;padding:8px}
.sw-person{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px}
.sw-person:hover{background:#f4f7fb}
.sw-person small{margin-left:auto;color:#8892a4;font-size:11px}
.sw-person-head{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 12px;background:#f4f7fb;border-radius:8px;margin-bottom:12px}
.sw-person-head strong{font-size:16px;color:#1f3864}
.sw-days{display:flex;flex-wrap:wrap;gap:6px}
.sw-day{display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid #d9e0ea;
  border-radius:6px;font-size:12px;cursor:pointer}
.sw-day:hover{border-color:#1f3864}
.sw-preview{background:#fbfcfe;border:1px solid #e4e9f0;border-radius:8px;padding:10px}
.sw-preview-row{display:grid;gap:3px;font-size:12.5px;padding:6px 0;border-bottom:1px dashed #e4e9f0}
.sw-preview-row:last-child{border-bottom:none}
.sw-tag{display:inline-block;min-width:62px;font-weight:700;color:#1f3864;font-size:11px;text-transform:uppercase}
.sw-preview small{color:#8892a4}
.sw-done{font-size:15px;font-weight:700;color:#1e7a4d;margin-bottom:12px}
.sw-footer{justify-content:flex-end;margin-top:14px}
.sw-slot-row{display:grid;grid-template-columns:150px 130px auto;gap:8px;align-items:center;
  padding:8px;border:1px solid #e4e9f0;border-radius:8px;margin-bottom:8px;background:#fff}
.sw-slot-preview{grid-column:1/-1;font-size:12px;color:#41506a;padding-top:2px}
.sw-preview-day{font-weight:700;color:#1f3864;font-size:12px;margin-bottom:2px}

.auth-forgot{text-align:center;margin-top:10px}
.link-btn{background:none;border:none;padding:4px;color:#1f3864;font-size:13px;
  text-decoration:underline;cursor:pointer;font-family:inherit}
.link-btn:hover{color:#c9a227}
.link-btn:disabled{opacity:.5;cursor:default}

.hw-chip.done{background:#e6f6ed;color:#1e7a4d;border:1px solid #bfe3cf}

/* --- Notification bell (v5.29) --- */
.notif-wrap{position:relative}
.notif-bell{position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:8px 10px;font-size:16px;cursor:pointer;line-height:1}
.notif-badge{position:absolute;top:-6px;right:-6px;background:var(--danger,#b3261e);color:#fff;
  border-radius:999px;font-size:10px;font-weight:800;padding:2px 5px;min-width:16px;text-align:center}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:360px;max-width:88vw;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(11,49,88,.16);z-index:60;overflow:hidden}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-list{max-height:60vh;overflow-y:auto}
.notif-item{display:flex;gap:10px;width:100%;text-align:left;background:#fff;border:0;
  border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer;align-items:flex-start}
.notif-item:hover{background:#f6f9fc}
.notif-item.unread{background:#f2f8ff}
.notif-item.unread .notif-copy strong::after{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:#1a73e8;margin-left:6px;vertical-align:middle}
.notif-icon{font-size:14px;line-height:1.5;flex:0 0 18px}
.notif-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.notif-copy strong{font-size:13px}
.notif-copy small{font-size:12px;color:#647180;white-space:normal}
.notif-copy em{font-size:11px;color:#8b97a5;font-style:normal}
@media(max-width:760px){.notif-panel{width:min(340px,92vw)}}

/* --- Current-time marker on the week grid (v5.31) --- */
.gcal-week-col{position:relative}
.gcal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid #ea4335;z-index:5;pointer-events:none}
.gcal-now span{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#ea4335;display:block}


/* =========================================================
   v5.32 Mobile experience
   Customers open this on a phone, not a laptop. Everything below
   turns the desktop shell into a phone app: an off-canvas drawer
   instead of a 19-item sidebar stacked on top of the page, a fixed
   header, thumb-sized controls, sheet-style modals, and a calendar
   that reads as a list instead of a 7-column grid.
   Kept at the end of the file on purpose — it has to win over the
   older 760px blocks above without needing !important.
   ========================================================= */

/* Chrome that only exists on small screens. */
.mobile-bar{display:none}
.nav-backdrop{display:none}
.drawer-close{display:none}

@media(max-width:900px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  body.nav-open{overflow:hidden}

  .app-shell{display:block;min-height:100vh}

  /* ---- Fixed header ---- */
  .mobile-bar{
    display:flex;align-items:center;gap:10px;
    position:fixed;top:0;left:0;right:0;z-index:80;
    height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 12px 0;
    background:linear-gradient(180deg,var(--navy-dark),var(--navy));
    color:#fff;box-shadow:0 2px 14px rgba(6,31,57,.28);
  }
  .mobile-menu-btn{
    flex:0 0 auto;width:42px;height:42px;border:0;border-radius:12px;
    background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  }
  .mobile-menu-btn:active{background:rgba(255,255,255,.26)}
  .mobile-bar-title{
    flex:1 1 auto;min-width:0;font-weight:800;font-size:17px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mobile-bar-slot{flex:0 0 auto;display:flex;align-items:center;gap:8px}
  .mobile-bar-slot .notif-bell{background:rgba(255,255,255,.14);border-color:transparent;color:#fff;
    width:42px;height:42px;border-radius:12px}

  /* ---- Off-canvas navigation ---- */
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:90;
    background:rgba(4,18,32,.55);opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:95;
    width:min(84vw,300px);height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:calc(16px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:0 0 44px rgba(0,0,0,.4);
  }
  body.nav-open .sidebar{transform:none}
  .drawer-close{
    display:grid;place-items:center;position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;
    width:36px;height:36px;border:0;border-radius:50%;
    background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  }
  .brand{padding:0 46px 18px 8px;margin-bottom:14px}   /* room for the close button */
  nav{gap:4px}
  .nav-item{padding:14px 13px;font-size:15px}
  .sidebar-version{margin-top:18px}

  /* ---- Page body ---- */
  .main{padding:calc(56px + env(safe-area-inset-top) + 16px) 14px 56px}
  .topbar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
  .topbar h1{display:none}          /* the fixed header already shows it */
  /* Most views repeat this line in their own panel header; two lines is
     enough context without spending a third of the screen on it. */
  .topbar p{margin:0;font-size:12.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .top-actions{flex-wrap:wrap;gap:8px}
  .top-actions .btn{flex:1 1 calc(50% - 4px);min-height:44px;padding:11px 8px;font-size:14px}

  /* Account card + Log out, relocated into the drawer by mobile-v1.js. */
  .drawer-foot{display:grid;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
  .drawer-foot .current-user-card{width:100%;background:rgba(255,255,255,.08);border-color:transparent;color:#fff}
  .drawer-foot .current-user-card strong{color:#fff}
  .drawer-foot .current-user-card span{color:rgba(255,255,255,.66)}
  .drawer-foot .btn{width:100%}

  .panel{padding:15px;border-radius:15px}
  .panel h2{font-size:18px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:18px}
  .stat-card{padding:14px;border-radius:14px}
  .stat-label{font-size:11.5px}
  .stat-value{font-size:23px;margin-top:4px}
  .grid-2{gap:14px}

  /* Thumb-sized controls, and 16px inputs so iOS stops zooming on focus. */
  .btn{min-height:44px;padding:11px 14px}
  .field input,.field select,.field textarea,
  .search,.mini-field input,.mini-field select{font-size:16px;min-height:44px}
  .tiny-btn{padding:9px 11px;font-size:12px}
  .row-actions{flex-wrap:wrap;gap:8px}

  .toolbar{flex-direction:column;align-items:stretch;gap:12px}
  .toolbar>div:first-child h2{margin-bottom:2px}
  .toolbar .row-actions{width:100%}
  .toolbar .row-actions>.btn{flex:1 1 auto}
  .search{width:100%;min-width:0}
  .filter-bar{gap:9px}
  .mini-field{min-width:0;flex:1 1 46%}

  /* Tables keep their columns and scroll sideways, edge to edge in the panel. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -15px;padding:0 15px}
  th,td{padding:10px 8px}
  td{font-size:13px}

  .list-item{flex-direction:column;gap:6px}

  /* ---- Modals become bottom sheets ---- */
  .modal{padding:0;place-items:end center}
  .modal-card{
    width:100%;max-width:none;max-height:92vh;border-radius:20px 20px 0 0;
    padding:22px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .modal-close{width:40px;height:40px;right:12px;top:12px}
  .modal-card h2:first-child{padding-right:46px}
  .modal-actions{flex-direction:column-reverse;gap:8px}
  .modal-actions .btn{width:100%}

  /* ---- Calendar ---- */
  .gcal-week-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gcal-week-header,.gcal-week-body{grid-template-columns:46px repeat(7,minmax(98px,1fr));min-width:740px}
  .gcal-week-body{height:min(66vh,540px);overflow-x:hidden}
  .gcal-month{grid-template-columns:repeat(7,minmax(94px,1fr));overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gcal-cell{min-height:92px;padding:6px}
  .gcal-week-daylabel{font-size:11px}

  .notif-panel{position:fixed;left:12px;right:12px;width:auto;max-width:none;
    top:calc(56px + env(safe-area-inset-top) + 8px)}
}

@media(max-width:340px){
  .cards{grid-template-columns:1fr}
}

/* ---- Agenda list: the phone-friendly calendar (v5.32) ---- */
.gcal-agenda{display:grid;gap:14px}
.gcal-agenda-day{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.gcal-agenda-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 13px;background:#f7f9fc;border-bottom:1px solid var(--line)}
.gcal-agenda-head strong{color:#10375f;font-size:14px}
.gcal-agenda-head span{font-size:11.5px;color:var(--muted);font-weight:700}
.gcal-agenda-day.is-today .gcal-agenda-head{background:#eaf2fd}
.gcal-agenda-day.is-today .gcal-agenda-head strong::after{content:" · Today";color:#1a73e8;font-size:11.5px}
.gcal-agenda-item{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  background:#fff;border:0;border-top:1px solid var(--line);padding:12px 13px;cursor:pointer}
.gcal-agenda-day .gcal-agenda-item:first-of-type{border-top:0}
.gcal-agenda-item:active{background:#f4f8fd}
.gcal-agenda-time{flex:0 0 66px;font-size:12px;font-weight:850;color:#0b3158;line-height:1.35}
.gcal-agenda-time small{display:block;font-weight:600;color:var(--muted)}
.gcal-agenda-copy{min-width:0;display:grid;gap:3px}
.gcal-agenda-copy strong{font-size:14px;color:var(--text)}
.gcal-agenda-copy small{font-size:12px;color:var(--muted)}
.gcal-agenda-item.completed .gcal-agenda-time{color:#196638}
.gcal-agenda-item.cancelled .gcal-agenda-time{color:#963838}
.gcal-agenda-item.cancelled .gcal-agenda-copy strong{text-decoration:line-through;color:var(--muted)}
.gcal-agenda-item.no_show .gcal-agenda-time{color:#865b00}
.gcal-agenda-empty{padding:22px;text-align:center;color:var(--muted);font-size:13px}


/* =========================================================
   v5.33 Role home pages (parent / student / teacher)
   ========================================================= */
.home-header{display:flex;gap:20px;align-items:flex-start;margin-bottom:16px}
.home-avatar{flex:0 0 auto;display:grid;gap:8px;justify-items:center}
.home-avatar-img,.home-avatar-initials{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gold);background:var(--navy);
}
.home-avatar-initials{display:grid;place-items:center;color:#fff;font-size:32px;font-weight:850;letter-spacing:.02em}
.home-avatar-edit{
  border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;
}
.home-avatar-edit:hover{border-color:var(--navy)}
.home-identity{min-width:0;display:grid;gap:6px;align-content:start}
.home-identity h2{margin:0;color:var(--navy);font-size:24px;word-break:break-word}
.home-identity p{margin:0}
.home-identity-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.home-avatar-msg{font-size:12px;color:var(--muted)}
.home-avatar-msg.error{color:var(--danger);font-weight:700}

.home-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.home-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 6px 18px rgba(11,49,88,.05)}
.home-tile-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.home-tile-value{font-size:21px;color:var(--navy);font-weight:850;margin-top:6px;line-height:1.25;word-break:break-word}
.home-tile-sub{font-size:12px;color:var(--muted);margin-top:4px}

.home-rows{display:grid}
.home-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.home-row:last-child{border-bottom:0}
.home-row-label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.home-row-value{font-size:14px;word-break:break-word}

.home-people{display:grid;gap:9px}
.home-person{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fcfbf8}
.home-person-face{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:13px;font-weight:850}
.home-person-copy{min-width:0;display:grid;gap:2px;flex:1 1 auto}
.home-person-copy strong{font-size:14px}
.home-person-copy small{font-size:12px;color:var(--muted)}

.home-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

@media(max-width:900px){
  .home-header{gap:14px;padding:15px}
  .home-avatar-img,.home-avatar-initials{width:76px;height:76px;font-size:26px}
  .home-identity h2{font-size:20px}
  .home-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .home-tiles>.home-tile:last-child:nth-child(odd){grid-column:1/-1}
  .home-tile{padding:13px;border-radius:14px}
  .home-tile-value{font-size:18px}
  /* Label above value: a 150px label column leaves nothing for the value. */
  .home-row{grid-template-columns:1fr;gap:3px;padding:10px 0}
  .home-links{margin-top:14px}
  .home-links .btn{flex:1 1 calc(50% - 5px)}
}

@media(max-width:380px){
  .home-tiles{grid-template-columns:1fr}
  .home-header{flex-direction:column;align-items:center;text-align:center}
  .home-identity-meta{justify-content:center}
}

/* Edit-my-details control (v5.34) */
.home-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.home-panel-head h2{margin:0}
.home-edit-btn{padding:8px 13px;font-size:13px;white-space:nowrap}
.home-edit-title{margin:0 0 16px;color:var(--navy)}
.home-edit-note{font-size:12px;color:var(--muted);margin:14px 0 0;line-height:1.5}

@media(max-width:900px){
  .home-panel-head{flex-direction:column;align-items:stretch;gap:10px}
  .home-edit-btn{width:100%}
}


/* =========================================================
   v5.35 Books & Resources
   ========================================================= */
/* The four controls in this toolbar crowd the heading out at desktop
   widths; let the row wrap instead of squeezing the title. Desktop only:
   the toolbar is a column below 900px, where a flex-basis would be read
   as a HEIGHT and open a 260px hole above the search box. */
@media(min-width:901px){
  #content .toolbar:has(#resSearch){flex-wrap:wrap}
  #content .toolbar:has(#resSearch)>div:first-child{flex:1 1 260px}
  #resSearch{flex:1 1 180px}
  #resCategory{flex:0 1 170px}
}

.res-group{margin-top:20px}
.res-group:first-of-type{margin-top:6px}
.res-group-head{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:850;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}

.res-item{display:flex;gap:13px;align-items:flex-start;padding:13px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:13px;background:#fcfbf8}
.res-icon{flex:0 0 auto;font-size:24px;line-height:1.1}
.res-body{flex:1 1 auto;min-width:0}
.res-body strong{display:block;font-size:15px;color:var(--navy)}
.res-desc{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.res-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.res-file{font-size:11.5px;color:var(--muted)}
.res-chip{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;
  background:#e8eef8;color:#0b3158}
.res-chip.subtle{background:#f1f0ec;color:#5f6b79}
.res-chip.warn{background:#fff7df;color:#8a6500}
.res-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.res-actions .btn{padding:8px 14px;font-size:13px}

.res-modal-title{margin:0 0 16px;color:var(--navy)}
.res-cat-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .res-item{flex-wrap:wrap;gap:10px}
  .res-icon{font-size:20px}
  .res-body{flex:1 1 100%;order:1}
  .res-actions{flex:1 1 100%;order:2;flex-direction:row}
  .res-actions .btn{flex:1 1 auto;min-height:44px}
  .res-actions .tiny-btn{flex:0 0 auto;min-height:44px;padding:0 14px}
}

/* Month-cell overflow is now a control, not a caption (v5.39) */
.gcal-more{
  display:block;width:100%;text-align:left;
  font-size:10px;color:var(--navy);margin-top:4px;
  background:none;border:0;padding:2px 0;cursor:pointer;
  font-weight:800;text-decoration:underline;
}
.gcal-more:hover{color:var(--gold)}
.v32-day-title{margin:0 0 4px;color:var(--navy)}
.v32-day-list{margin-top:14px}
.v32-day-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;text-align:left;cursor:pointer;font:inherit;
}
.v32-day-item:hover{border-color:var(--navy)}
@media(max-width:900px){
  .v32-day-item{min-height:44px}
}

/* Push toggle, beside the notification bell (v5.42) */
.push-toggle{
  position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:8px 10px;font-size:16px;cursor:pointer;line-height:1;margin-left:6px;transition:.18s;
}
.push-toggle:hover{border-color:var(--navy)}
.push-toggle:disabled{opacity:.5;cursor:default}
.push-toggle[data-state="on"]{background:#e9f8ef;border-color:#bfe3cc}
/* Blocked or unavailable is not a failure the person can act on from here,
   so it is stated quietly rather than shouted in red. */
.push-toggle[data-state="blocked"],
.push-toggle[data-state="ios-needs-install"],
.push-toggle[data-state="unsupported"]{opacity:.55}

/* File-or-link choice in the resource form (v5.43) */
.res-kind{display:flex;flex-wrap:wrap;gap:18px}
.res-kind label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:650;cursor:pointer}
.res-kind input{margin:0}
@media(max-width:620px){.res-kind{gap:12px}.res-kind label{min-height:44px}}

/* ---- Master Schedule -------------------------------------------------
   Rebuilt from a pair of stacked tables into two tabs: lessons is a daily
   errand, recurring schedules is occasional setup. The old screen only
   worked at 70% browser zoom because both competed for one viewport, and
   664px of every row — 42% — was buttons. */
.ms-panel{padding:0;overflow:visible}

.ms-tabs{display:flex;gap:26px;padding:0 22px;border-bottom:1px solid var(--line)}
.ms-tab{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  padding:14px 2px 13px;font-size:14.5px;font-weight:700;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:8px;
}
.ms-tab:hover{color:var(--navy)}
.ms-tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold)}
.ms-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:5px}
.ms-count{
  background:var(--cream);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-size:11.5px;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.ms-pane{padding:16px 22px 22px}
.ms-pane[hidden]{display:none}

/* One line where three stat cards used to stand. */
.ms-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
  padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:2px;
  font-size:13.5px;color:var(--muted);
}
.ms-summary strong{
  color:var(--navy);font-size:17px;font-weight:800;margin-right:4px;
  font-variant-numeric:tabular-nums;
}
.ms-summary-period{margin-left:auto;font-weight:700;color:var(--navy)}
.ms-summary .ms-new{margin-left:auto;padding:8px 15px;min-height:0;font-size:13.5px}
.ms-flag{
  margin-left:auto;background:#fff7df;color:#8a6500;border:1px solid #efd894;
  border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;
}

/* ---- lessons, grouped by day ---- */
/* The last track is a FIXED width, not auto.
   .ms-cols and .ms-row are separate grids, so an auto track is sized from
   each one's own content: the header's fifth cell is empty and resolved to
   0px while a row's resolved to 124px or 238px depending on which buttons
   that row happened to offer. Every fr column then received a different
   share of what was left, so the data sat left of its heading — and rows
   with different actions did not line up with each other either.
   A definite width is the only thing that makes independent grids agree.
   250px clears the widest set of actions measured (238px). */
.ms-cols,.ms-row{
  display:grid;grid-template-columns:1.35fr 1fr 1fr .8fr 250px;
  gap:14px;align-items:center;
}
.ms-cols{
  padding:11px 0;font-size:11px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
}
.ms-day{
  position:sticky;top:0;z-index:2;background:var(--white);
  display:flex;align-items:baseline;gap:11px;
  padding:15px 0 8px;border-bottom:1px solid var(--line);
}
.ms-day h3{
  margin:0;font-size:13px;font-weight:800;color:var(--navy);
  letter-spacing:.8px;text-transform:uppercase;
}
.ms-day.is-today h3{color:var(--gold)}
.ms-today{
  background:var(--navy);color:#fff;border-radius:999px;padding:2px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;
}
.ms-daycount{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.ms-row{padding:11px 0;border-bottom:1px solid #f4f1ea}
.ms-row:hover{background:#fbfaf6}
.ms-nm{font-weight:700;color:var(--navy);font-size:14.5px}
.ms-fam{font-size:12px;color:var(--muted)}
.ms-t{font-variant-numeric:tabular-nums}
.ms-big{font-weight:700;font-size:14px;color:var(--text)}
.ms-t.mine .ms-big{color:var(--navy)}
.ms-zone{font-size:11.5px;color:var(--muted)}
.ms-teacher{font-size:13.5px}
.ms-sub{font-size:11px;color:var(--muted)}
.ms-acts{display:flex;align-items:center;gap:6px;justify-self:end}

/* State reads as form, not only as a word. */
.ms-state{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:700;border:1px solid transparent;
  white-space:nowrap;
}
.ms-state.present{background:#e9f8ef;color:var(--success);border-color:#bfe3cc}
.ms-state.absent{background:#fff7df;color:#8a6500;border-color:#efd894}
.ms-state.cancelled{background:#fff0f0;color:var(--danger);border-color:#efc2c2}

/* One small button, used by both tabs. */
.btn-s{
  appearance:none;cursor:pointer;font:inherit;
  border:1px solid var(--line);background:var(--white);color:var(--text);
  border-radius:9px;padding:6px 11px;font-size:12px;font-weight:700;
  white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;
}
.btn-s:hover{border-color:var(--navy)}
.btn-s:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn-s.ok{color:var(--success);border-color:#bfe3cc}
.btn-s.warn{color:#8a6500;border-color:#efd894}
.btn-s.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-s.more{padding:6px 9px;font-size:15px;line-height:1;color:var(--navy)}

/* ---- recurring schedules, as cards ---- */
.sched-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;margin-top:16px;
}
.sched{border:1px solid var(--line);border-radius:14px;padding:16px 17px;background:var(--white)}
.sched:hover{border-color:#cfc7b6}
.sched-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sched-name{font-weight:800;color:var(--navy);font-size:15px}
.sched-fam{font-size:12px;color:var(--muted)}
.sched-state{
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;white-space:nowrap;
  background:#e9f8ef;color:var(--success);border:1px solid #bfe3cc;
}
.sched-state.paused{background:#fff7df;color:#8a6500;border-color:#efd894}
.sched-state.cancelled{background:#fff0f0;color:var(--danger);border-color:#efc2c2}
.sched-pattern{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 11px}
.sched-pattern span{
  background:var(--cream);border:1px solid var(--line);border-radius:8px;
  padding:4px 9px;font-size:12px;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.sched-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.sched-nolink{color:var(--danger);font-weight:700}
.sched-sections{margin-top:10px;font-size:12.5px;color:var(--muted);display:grid;gap:3px}
.sched-foot{display:flex;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* Fixed, on <body>, because a scroll container would clip it. */
.ms-menu{
  position:fixed;z-index:300;min-width:186px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(11,49,88,.20);
  padding:6px;display:flex;flex-direction:column;
}
/* Required, not optional. [hidden] gets display:none from the browser's own
   stylesheet, and any author rule beats it — so the display:flex above kept
   the menu on screen no matter how many times the JS set hidden=true. */
.ms-menu[hidden]{display:none}
.ms-menu button{
  text-align:left;border:0;background:none;cursor:pointer;
  padding:10px 12px;border-radius:8px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--navy);
}
.ms-menu button:hover{background:var(--cream)}
.ms-menu button.danger{color:var(--danger)}
.ms-menu button.danger:hover{background:#fff0f0}

@media(max-width:900px){
  .ms-tabs{gap:16px;padding:0 14px}
  .ms-pane{padding:14px}
  .ms-cols{display:none}
  .ms-row{grid-template-columns:1fr 1fr;gap:8px;padding:13px 0}
  .ms-acts{grid-column:1/-1;justify-self:start;flex-wrap:wrap}
  .ms-day{position:static}
  .ms-summary .ms-new,.ms-summary-period,.ms-flag{margin-left:0}
  /* Touch targets return where a mis-tap marks the wrong child absent. */
  .btn-s{min-height:40px;padding:0 13px}
}

/* ---- Density pass, whole app ------------------------------------------
   The Master Schedule was not uniquely bad — every screen was built at the
   same scale, which is why the browser sat at 70% zoom all day. The cost is
   concentrated in a handful of shared primitives:

     table td / th   14px padding on every cell, every table
     .btn            inherits 16px body text, used INSIDE table rows
     .stat-card      20px padding + 31px numerals, on 21 screens
     .main/.panel    28/32px and 20px of chrome around everything

   Wrapped in min-width:901px on purpose. The phone breakpoints earlier in
   this file restore 44px touch targets, and they must keep winning — this
   block sits later in the cascade and would otherwise silently undo them.
   Nothing here changes a layout; it only tightens spacing and type. */
@media(min-width:901px){
  .app-shell{grid-template-columns:232px 1fr}
  .sidebar{padding:18px 14px}
  .nav-item{padding:9px 11px}
  .main{padding:20px 26px 48px}
  .topbar{margin-bottom:18px}
  h1{font-size:25px}

  .panel{padding:16px 18px;border-radius:15px}
  .cards{gap:12px;margin-bottom:16px}
  .stat-card{padding:14px 16px;border-radius:14px}
  .stat-label{font-size:12px}
  .stat-value{font-size:24px;margin-top:2px}

  /* Tables carry most of the app's content, and most of its wasted height. */
  table{font-size:14px}
  table th{padding:9px 12px;font-size:12px}
  table td{padding:9px 12px}

  /* A full-size button belongs on a toolbar, not repeated down a column.
     Scoped to buttons inside a table so page-level actions keep their
     weight. */
  table .btn{padding:7px 12px;font-size:12.5px;border-radius:9px;min-height:0}
  table .row-actions{gap:6px}

  /* The narrower main column left the header actions wrapping mid-word
     ("+ New / Student", "Log / out"). They are labels, not paragraphs. */
  .topbar .btn{padding:9px 13px;font-size:13.5px;white-space:nowrap}
  .topbar{gap:12px}
  /* The name and role are labels too — "Gaafer Sobhi" over three lines is
     not a wrapping problem worth solving with more width. */
  .user-copy strong,.user-copy span{white-space:nowrap}
}

/* A grid track sized 1fr still has min-width:auto, so a wide table does not
   scroll inside .table-wrap — it stretches the whole main column and pushes
   the PAGE sideways. That is why every table screen had a horizontal
   scrollbar at the window edge and the right-hand buttons sat off-screen.
   min-width:0 makes 1fr mean what it looks like it means, and the overflow
   goes back where it belongs: inside the table's own container. */
.app-shell > *{min-width:0}
.main{min-width:0}
.table-wrap{max-width:100%}

/* The generic overflow trigger, matching the Master Schedule's own. */
.tiny-btn.ra-more,.ra-more{
  border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:9px;padding:4px 9px;font-size:15px;line-height:1;
  font-weight:800;cursor:pointer;
}
.ra-more:hover{border-color:var(--navy)}
.ra-more:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* Buttons moved into the popover should read as menu items, not as the
   pill they were in the row. */
.ms-menu .btn,.ms-menu .tiny-btn{
  width:100%;text-align:left;border:0;background:none;box-shadow:none;
  padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:700;
  color:var(--navy);min-height:0;
}
.ms-menu .btn:hover,.ms-menu .tiny-btn:hover{background:var(--cream)}
.ms-menu .btn.danger,.ms-menu .tiny-btn.danger{color:var(--danger)}

/* ---- 1. The sidebar has to be able to scroll --------------------------
   height:100vh with no overflow rule means anything past the fold is
   simply unreachable — Settings sat on the edge and "Powered by ATOM Ops"
   was cut in half. On a laptop the list is now longer than the viewport,
   so it scrolls, with the scrollbar toned down so it does not draw a
   bright line down the middle of the navy. */
@media(min-width:901px){
  .sidebar{
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
  }
  .sidebar::-webkit-scrollbar{width:8px}
  .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
  .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}
  .sidebar::-webkit-scrollbar-track{background:transparent}
}

/* ---- 2 & 3. The Master Schedule row treatment, applied everywhere -----
   Highlighting the whole row on hover is the thing that makes a wide
   table readable: it ties a name on the left to the buttons on the right
   when they are 900px apart. There is no reason that should have been
   unique to one screen.

   The separator is softened to match too. #eadfcf drew a hard line under
   every row and made a long table look like a grid of boxes; the lighter
   rule lets the rows read as a list. */
table tbody tr{transition:background .12s ease}
table tbody tr:hover{background:#fbfaf6}
table td{border-bottom:1px solid #f4f1ea}

/* Keyboard users get the same cue as the mouse. */
table tbody tr:focus-within{background:#fbfaf6}

/* A row that is doing something — selected, or mid-action — reads warmer
   than hover so the two are never confused. */
table tbody tr.is-active{background:var(--cream)}

@media(prefers-reduced-motion:reduce){
  table tbody tr{transition:none}
}

/* ---- Calendar: use the screen it has --------------------------------
   .gcal-week-body was a hardcoded height:600px, so on a 985px-tall
   viewport the grid scrolled internally while a third of the page sat
   empty beneath it. The week grid should be as tall as the room allows.

   clamp, not plain vh: below the floor the hour rows become unreadable,
   and above the ceiling a very tall monitor would stretch a teaching day
   across a metre of empty grid. */
@media(min-width:901px){
  .gcal-month{grid-template-columns:repeat(7,minmax(120px,1fr))}

  /* 10px was small for a name you read at a glance while marking a
     register. The blocks have room for another point and a half. */
  .gcal-week-event{font-size:11.5px;padding:3px 6px;border-radius:6px}
}

/* The same hover idea as the tables: a class you are pointing at should
   say so, since these blocks are the click target for the lesson modal. */
.gcal-week-event{transition:filter .12s ease, box-shadow .12s ease}
.gcal-week-event:hover{
  filter:brightness(.97);
  box-shadow:0 2px 8px rgba(11,49,88,.18);
}
.gcal-week-event:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

@media(prefers-reduced-motion:reduce){.gcal-week-event{transition:none}}

/* ================================================================
   Dashboard v5.64 — figures you can act on

   Every headline figure is a doorway to the screen that explains it:
   Overdue opens Invoices, Cancellation Rate opens Attendance. The cards
   are real <button>s, so keyboard focus and Enter work without any extra
   handling — which is why the resets below exist, as a button inherits
   none of the surrounding type or alignment.

   .stat-link is a separate class from .stat-card on purpose. A card whose
   screen this role cannot open is rendered as a plain div, and must not
   pick up the pointer cursor or the hover lift — inviting a click that
   cannot happen is worse than never inviting it.
   ================================================================ */
.stat-card.stat-link{
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  display:block;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.stat-card.stat-link:hover{
  transform:translateY(-2px);border-color:#d6cdb8;
  box-shadow:0 12px 26px rgba(11,49,88,.11)}
.stat-card.stat-link:active{transform:translateY(0)}
.stat-card.stat-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.stat-card small{display:block;color:var(--muted);font-size:12.5px;margin-top:5px;line-height:1.45}
.stat-card small.warn{color:var(--danger);font-weight:700}

/* The strip carries counts that are worth seeing but do not deserve a whole
   card. Dividers rather than gaps, so it reads as one instrument panel. */
.glance{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
        border-radius:14px;padding:2px;margin-bottom:22px;
        box-shadow:0 6px 18px rgba(11,49,88,.05)}
.glance-item{flex:1 1 150px;min-width:0;padding:12px 18px;border:0;border-right:1px solid var(--line);
             background:transparent;font:inherit;color:inherit;text-align:left;border-radius:12px}
.glance-item:last-child{border-right:0}
button.glance-item{cursor:pointer;transition:background .12s ease}
button.glance-item:hover{background:var(--cream)}
button.glance-item:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.glance-item b{display:block;font-size:20px;color:var(--navy);font-weight:850;
               font-variant-numeric:tabular-nums}
.glance-item span{font-size:12.5px;color:var(--muted);font-weight:650}

@media(max-width:760px){
  .glance-item{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .glance-item:nth-child(even){border-right:0}
}

/* A disabled button must look disabled.
   There was no :disabled rule anywhere, so a button the code had switched off
   still rendered as a solid navy call to action — the Send Salary button sat
   there looking ready to press on a month with nothing to pay. */
.btn:disabled,
.btn:disabled:hover,
.tiny-btn:disabled,
.tiny-btn:disabled:hover{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.35)}

/* ================================================================
   Sidebar groups (v5.75)

   Four collapsible groups instead of twenty-four flat rows. The whole
   sidebar now fits without scrolling at 100% zoom, which it never did.

   The items keep .nav-item untouched — role navigation sets style.display
   on them directly and the phone drawer closes on a .nav-item click, so
   both keep working with the buttons simply nested one level deeper.
   ================================================================ */
.nav-group{display:block}
.nav-group-head{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:transparent;color:rgba(255,255,255,.72);padding:10px 12px;
  border-radius:10px;cursor:pointer;font:inherit;font-weight:750;font-size:13px;
  letter-spacing:.01em;margin-top:3px}
.nav-group-head:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-group-head[aria-expanded="true"]{color:#fff}
.nav-group-head:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.nav-ico{width:17px;text-align:center;opacity:.85;flex-shrink:0;font-size:14px}
.nav-chev{margin-left:auto;font-size:10px;opacity:.55;transition:transform .18s ease}
.nav-group-head[aria-expanded="true"] .nav-chev{transform:rotate(90deg)}

/* The rule that hides a closed group. [hidden] comes from the UA stylesheet
   and loses to any author rule on the same element — the exact trap that kept
   the Master Schedule menu on screen in v5.61 — so it is stated explicitly. */
.nav-group-body{display:grid;gap:6px;padding-left:10px;margin:2px 0 2px 13px;
  border-left:1px solid rgba(255,255,255,.13)}
.nav-group-body[hidden]{display:none}
.nav-group-body .nav-item{padding:8px 11px;font-size:13px}

@media(max-width:900px){
  .nav-group-head{padding:12px;font-size:14.5px}
  .nav-group-body .nav-item{padding:11px 12px;font-size:14.5px}
}

/* Free-slot picker on the make-up booking form (v5.82).
   The times shown are in the STUDENT's zone, because that is what the two
   fields above them are labelled with; each chip carries the Egypt time in its
   tooltip so the admin can sanity-check without converting in their head. */
.slot-picker{display:flex;flex-wrap:wrap;gap:7px;max-height:168px;overflow-y:auto;padding:2px}
.slot-chip{
  border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s ease}
.slot-chip:hover{background:var(--cream);border-color:#d6cdb8}
.slot-chip.picked{background:var(--navy);color:#fff;border-color:var(--navy)}
.slot-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}