:root{
  --bg: #f3f4f6; --surface: #ffffff; --sidebar: #111827; --sidebar-muted: #9ca3af;
  --sidebar-group: #6b7280; --accent: #e11d48; --accent-light:#fde7ec; --accent-contrast: #ffffff;
  --text: #111827; --text-muted: #6b7280; --border: #e5e7eb;
  --pos: #059669; --neg: #dc2626; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0 0 var(--s3)}

/* ---- Layout shell ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--sidebar);color:#fff;
  display:flex;flex-direction:column;padding:var(--s3) 0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4) var(--s3);
  font-weight:800;font-size:18px;border-bottom:1px solid #1f2937;margin-bottom:var(--s2);}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.nav-group{font-size:10px;letter-spacing:.08em;color:var(--sidebar-group);font-weight:700;
  padding:var(--s3) var(--s4) var(--s1)}
.nav-item{display:flex;align-items:center;gap:var(--s2);color:var(--sidebar-muted);
  padding:9px var(--s4);font-size:14px;border-radius:8px;margin:1px var(--s2);}
.nav-item svg{width:16px;height:16px;flex:0 0 16px}
.nav-item:hover{background:#1f2937;color:#fff}
.nav-item.active{background:var(--accent);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:var(--s3) var(--s5);position:sticky;top:0;z-index:5}
.topbar h1{margin:0;font-size:18px}
.topbar .meta{display:flex;align-items:center;gap:var(--s4);color:var(--text-muted);font-size:13px}
.topbar form{margin:0}
.content{padding:var(--s5);max-width:1100px;width:100%}
/* The week view (esp. 2-week side-by-side) uses the full screen width; the day
   board and the rest keep the 1100px reading column. */
.content:has(.wkpanel){max-width:none}
/* 2-week joined view: remove the gap between the two panels so they read as one board */
.wkrow--joined{gap:0}
.wkrow--joined .wkpanel{border-radius:0}
.wkrow--joined .wkpanel:first-child{border-radius:10px 0 0 10px;border-right:none}
.wkrow--joined .wkpanel:last-child{border-radius:0 10px 10px 0}
/* Panel without time column: tables align row heights with the first panel */
.wkpanel--notimecol .wk tbody tr{height:42px}
.menu-toggle{display:inline-flex}
.backdrop{display:none}
/* desktop: ☰ collapses the pinned sidebar to full-width content */
@media (min-width:901px){ .app.is-toggled .sidebar{display:none} }

/* ---- Cards / stats ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s4);margin-bottom:var(--s4)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3);flex-wrap:wrap}
.card-head h2{margin:0;font-size:16px}
.card-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s4)}
.stat .n{font-size:clamp(18px,5vw,26px);font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.stat--accent .n{color:var(--accent)}
.section-title{font-size:16px;margin:var(--s5) 0 var(--s3)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;
  background:#e5e7eb;color:var(--text);padding:9px 14px;border-radius:8px;font-size:14px;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(.97)}
.btn-primary{background:var(--accent);color:var(--accent-contrast)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn.danger,.btn-ghost.danger{color:var(--neg);border-color:var(--neg)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Tables ---- */
.table{width:100%;border-collapse:collapse;background:var(--surface)}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.table thead th{position:sticky;top:0;background:#f9fafb;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-muted)}
.table tbody tr:nth-child(even){background:#fafafa}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table tfoot th{padding:10px 12px;border-top:2px solid var(--border);font-weight:800}
.table thead th.th-sort{cursor:pointer;user-select:none}
.table thead th.th-sort:hover{color:var(--text)}
.table thead th.sort-asc::after{content:" \25B2";font-size:10px}
.table thead th.sort-desc::after{content:" \25BC";font-size:10px}

/* ---- Badges ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.badge-attended,.badge-completed{background:#d1fae5;color:#065f46}
.badge-forfeit,.badge-void,.badge-cancelled{background:#fee2e2;color:#991b1b}
.badge-compensate{background:#fef3c7;color:#92400e}
.badge-reschedule{background:#dbeafe;color:#1e40af}
.badge-low{background:#fee2e2;color:#991b1b}

/* ---- Alerts / empty ---- */
.alert{padding:10px 14px;border-radius:8px;margin-bottom:var(--s3);
  background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.alert-error{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.empty{padding:var(--s5);text-align:center;color:var(--text-muted)}

/* ---- Money ---- */
.money.pos{color:var(--pos)} .money.neg{color:var(--neg)}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ---- Forms ---- */
.form p,.form-field{margin:0 0 var(--s3)}
.form label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:4px}
.form input,.form select,.form textarea,
.content input[type=text],.content input[type=number],.content input[type=date],.content select{
  padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;
  background:#fff;max-width:100%}
.content input:focus,.content select:focus{outline:2px solid var(--accent);outline-offset:1px}
.inline-form{display:flex;gap:var(--s2);align-items:end;flex-wrap:wrap;margin-bottom:var(--s4)}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:var(--s4)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:var(--s6);width:100%;max-width:360px;text-align:center}
.login-card img{height:54px;margin-bottom:var(--s4)}
.login-card .form{text-align:left;margin-top:var(--s4)}

/* ---- Responsive ---- */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:30;transform:translateX(-100%);
    transition:transform .2s ease}
  .app.is-toggled .sidebar{transform:translateX(0)}
  .app.is-toggled .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20}
}
@media (max-width:640px){
  .content{padding:var(--s4)}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--border);border-radius:8px;margin-bottom:var(--s3);
    background:var(--surface)!important;padding:var(--s2)}
  .table td{border:none;display:flex;justify-content:space-between;gap:var(--s3);text-align:right}
  .table td::before{content:attr(data-label);font-weight:700;color:var(--text-muted);text-align:left}
  .table .num{text-align:right}
  .table td .btn{display:inline-block;margin:2px 0}
  .table td.actions{flex-wrap:wrap;justify-content:flex-start}
  .table tfoot th{display:flex;justify-content:space-between;border:none;text-align:right}
  .table tfoot th::before{content:attr(data-label);font-weight:700;color:var(--text-muted)}
}

/* ---- Schedule day-grid readability (S1–S5) ---- */
/* S1: clearer vertical divider between room columns */
.vt th.roomcol { border-left:2px solid var(--text-muted); }
.vt td.cell { border-left:2px solid var(--border); }
/* S2/S3: teacher-colour fill + clearer cell border */
.blk--filled { background:var(--cell,#dbeafe); border:1px solid rgba(0,0,0,.25);
  border-radius:6px; color:#111; }
/* S4: time label inside cell */
.blk-time { display:block; font-size:10px; font-weight:600; opacity:.75; line-height:1.2; }
/* S5: stronger horizontal line at each hour row */
.vt .tlab.hour { border-top:2px solid #94a3b8; }

/* ---- Phone agenda list (shown under 640px, grid hidden) ---- */
.agenda{display:none}
.agenda-item{display:flex;gap:10px;padding:8px 10px;border-left:4px solid var(--cell,#ccc);
  border-bottom:1px solid var(--border);align-items:baseline}
.agenda-time{font-weight:700;min-width:52px}
.agenda-who{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.agenda-link{display:inline-block;padding:3px 6px;background:var(--cell,#eef);border-radius:6px;
  color:#111;text-decoration:none;font-weight:600}
.agenda-link .b{font-size:10px;color:var(--text-muted)}
.agenda-room{margin-left:auto;color:var(--text-muted)}
@media (max-width:640px){
  .vt{display:none}          /* hide the wide grid on phone */
  .agenda{display:block}
}