:root{
  --ink:#1a2332;
  --ink-soft:#4a5568;
  --paper:#f6f4ee;
  --paper-raised:#ffffff;
  --line:#dcd6c8;
  --accent:#b5541f;
  --accent-soft:#f1ddc9;
  --match:#2f7d5c;
  --match-bg:#dcefe4;
  --match-bg-2:#c3e5d2;
  --m0-bg:#dcefe4; --m0-fg:#2f7d5c;
  --m1-bg:#d8e6f7; --m1-fg:#2a5fa5;
  --m2-bg:#f7e3c4; --m2-fg:#9a5b0c;
  --m3-bg:#ecdaf2; --m3-fg:#7d3a94;
  --m4-bg:#f6d6dc; --m4-fg:#a8324a;
  --m5-bg:#d6eef0; --m5-fg:#1b7480;
  --radius:10px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef1f6; --ink-soft:#9aa5b8; --paper:#14181f; --paper-raised:#1c222c;
    --line:#2c3341; --accent:#e08a4f; --accent-soft:#3a2c1e; --match:#5ecb9b; --match-bg:#173026; --match-bg-2:#1f4634;
    --m0-bg:#173026; --m0-fg:#5ecb9b; --m1-bg:#182a44; --m1-fg:#7fb0f0; --m2-bg:#3b2b12; --m2-fg:#e9a94f;
    --m3-bg:#2f1d38; --m3-fg:#c48be0; --m4-bg:#3c1a23; --m4-fg:#f08a9f; --m5-bg:#113338; --m5-fg:#58c4d0;
  }
}
:root[data-theme="dark"]{
  --ink:#eef1f6; --ink-soft:#9aa5b8; --paper:#14181f; --paper-raised:#1c222c;
  --line:#2c3341; --accent:#e08a4f; --accent-soft:#3a2c1e; --match:#5ecb9b; --match-bg:#173026; --match-bg-2:#1f4634;
  --m0-bg:#173026; --m0-fg:#5ecb9b; --m1-bg:#182a44; --m1-fg:#7fb0f0; --m2-bg:#3b2b12; --m2-fg:#e9a94f;
  --m3-bg:#2f1d38; --m3-fg:#c48be0; --m4-bg:#3c1a23; --m4-fg:#f08a9f; --m5-bg:#113338; --m5-fg:#58c4d0;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);}
html{scroll-padding-top: env(safe-area-inset-top, 0px);}
body{min-height:100%;}
a{color:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px 64px;}

header.top{
  position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.top-inner{max-width:1180px;margin:0 auto;padding:14px 16px 12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:space-between;}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand h1{font-size:1.05rem;font-weight:600;margin:0;letter-spacing:.01em;}
.brand .sub{font-size:.78rem;color:var(--ink-soft);}
.version-picker{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-soft);}
.version-picker #yearPicker{display:inline-flex;align-items:center;gap:8px;}
.version-picker #yearPicker[hidden]{display:none;}
.version-picker select{
  font-family:var(--sans); font-size:.8rem; padding:5px 8px; border-radius:7px;
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
}

nav.tabs{display:flex;gap:4px;margin:18px 0 12px;}
nav.tabs button{
  font-family:var(--sans); font-size:.85rem; font-weight:500; padding:8px 16px;
  border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
nav.tabs button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
nav.tabs button:not(.active):hover{border-color:var(--accent);color:var(--ink);}

.search-row{display:flex;gap:8px;margin-bottom:10px;}
.search-row input{
  flex:1; font-family:var(--sans); font-size:.92rem; padding:9px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
}
.search-row input:focus{outline:2px solid var(--accent);outline-offset:1px;}

.chip-grid{
  display:flex; flex-wrap:wrap; gap:6px; max-height:190px; overflow-y:auto;
  padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised);
  margin-bottom:14px;
}
.chip-grid.empty{color:var(--ink-soft); font-size:.85rem; padding:14px;}
.chip{
  font-family:var(--sans); font-size:.8rem; padding:6px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer;
  white-space:nowrap;
}
.chip:hover{border-color:var(--accent);}
.chip.selected{background:var(--accent);border-color:var(--accent);color:#fff;}

.selection-bar{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:18px; min-height:34px;
}
.selection-bar .label{font-size:.78rem;color:var(--ink-soft);margin-right:2px;}
.sel-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:5px 6px 5px 11px;
  border-radius:999px; background:var(--accent-soft); color:var(--ink); border:1px solid var(--line);
}
.sel-chip.type-teacher{background:var(--match-bg);}
.sel-chip button{
  border:none; background:transparent; color:inherit; cursor:pointer; font-size:.95rem;
  line-height:1; padding:2px 4px; border-radius:50%; opacity:.6;
}
.sel-chip button:hover{opacity:1;}
.clear-all{font-size:.78rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:underline;padding:4px;}

.hint{font-size:.85rem;color:var(--ink-soft);padding:28px 4px;text-align:center;}

/* ---- normal view (single entity) ---- */
.entity-title{font-size:1.15rem;font-weight:600;margin:6px 0 2px;}
.entity-sub{font-size:.8rem;color:var(--ink-soft);margin-bottom:16px;}

.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-raised);}
table.grid{border-collapse:collapse;width:100%;min-width:640px;}
table.grid th, table.grid td{border:1px solid var(--line);padding:0;}
table.grid thead th{
  padding:9px 6px; font-size:.74rem; font-weight:600; color:var(--ink-soft);
  background:var(--paper); position:sticky; top:0; z-index:2; text-align:center;
}
table.grid thead th:first-child{left:0;z-index:3;}
table.grid tbody th{
  padding:8px 8px; font-size:.72rem; color:var(--ink-soft); text-align:left; white-space:nowrap;
  background:var(--paper); position:sticky; left:0; z-index:1; font-weight:500;
}
table.grid tbody th .n{font-weight:600;color:var(--ink);display:block;font-size:.82rem;}
.cell{min-width:118px; height:100%; padding:8px 9px; vertical-align:top;}
.cell .subj{font-size:.82rem;font-weight:600;line-height:1.25;}
.cell .who{font-size:.74rem;color:var(--ink-soft);margin-top:3px;line-height:1.25;}
.cell.empty{background:repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px); opacity:.35;}

/* mobile agenda layout for normal view */
.agenda{display:none;}
.day-block{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:var(--paper-raised);overflow:hidden;}
.day-block h3{margin:0;padding:9px 12px;font-size:.82rem;font-weight:600;background:var(--paper);border-bottom:1px solid var(--line);}
.day-block .row{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);align-items:baseline;}
.day-block .row:last-child{border-bottom:none;}
.day-block .row .time{font-size:.7rem;color:var(--ink-soft);min-width:28px;flex-shrink:0;font-family:var(--mono);white-space:nowrap;}
.day-block .row .time b{color:var(--ink);font-size:.8rem;}
.show-times .day-block .row .time{min-width:96px;}
.day-block .row .content .subj{font-size:.85rem;font-weight:600;}
.day-block .row .content .who{font-size:.75rem;color:var(--ink-soft);margin-top:2px;}
.day-block .row.empty .content{color:var(--ink-soft);font-size:.78rem;font-style:italic;}

@media (max-width:640px){
  .tbl-view{display:none;}
  .agenda{display:block;}
}

/* ---- comparison view ---- */
.legend{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink-soft);margin:2px 0 14px;}
.legend .swatch{width:12px;height:12px;border-radius:3px;background:var(--match-bg-2);border:1px solid var(--match);display:inline-block;}

/* fixed layout: every selected column gets the same width. The table's min-width is
   set inline by renderComparison() (day + hour columns + n * 118px) so columns
   never get narrower than 118px; below that the .tbl-scroll wrapper scrolls. */
table.cmp{border-collapse:collapse;width:100%;table-layout:fixed;}
table.cmp th, table.cmp td{border:1px solid var(--line);}
table.cmp thead th{
  padding:9px 8px; font-size:.72rem; font-weight:600; background:var(--paper); position:sticky; top:0; z-index:3;
  overflow-wrap:anywhere;
}
table.cmp thead th:first-child, table.cmp thead th:nth-child(2){position:sticky; left:0; z-index:4; text-align:left;}
table.cmp thead th.day-head{width:26px; min-width:26px; padding:0;}
table.cmp thead th.period-head{left:26px; padding:9px 5px; width:44px;}
.show-times table.cmp thead th.period-head{width:84px;}
table.cmp tbody th.day-cell{
  width:26px; min-width:26px; padding:6px 0; font-size:.72rem; font-weight:600; background:var(--paper);
  position:sticky; left:0; z-index:2; text-align:center; vertical-align:middle;
  text-transform:capitalize; letter-spacing:.06em;
}
table.cmp tbody th.day-cell .day-txt{display:inline-block; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; white-space:nowrap;}
table.cmp tbody th.period-cell{
  padding:6px 5px; font-size:.68rem; color:var(--ink-soft); background:var(--paper); position:sticky; left:26px; z-index:2;
  white-space:nowrap; font-family:var(--mono); text-align:left;
}
table.cmp tbody th.period-cell b{color:var(--ink);font-size:.78rem;}

/* hour ranges: hidden unless toggled on */
.times{display:none;}
.show-times .times{display:inline;}
.show-times table.cmp tbody th.period-cell .times, .show-times table.grid tbody th .times{display:block;}
.view-tools{display:flex;justify-content:flex-start;margin-bottom:8px;}
.times-toggle{
  font-family:var(--sans); font-size:.76rem; padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-raised); color:var(--ink-soft); cursor:pointer;
}
.times-toggle.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
td.ccell{min-width:118px;padding:7px 9px;vertical-align:top;overflow-wrap:anywhere;}
td.ccell .subj{font-size:.78rem;font-weight:600;line-height:1.25;}
td.ccell .who{font-size:.7rem;color:var(--ink-soft);margin-top:2px;line-height:1.2;}
td.ccell.empty{background:repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px); opacity:.32;}
td.ccell.match{background:var(--mbg);box-shadow:inset 3px 0 0 var(--mfg);}
td.ccell.match .subj{color:var(--mfg);}
td.ccell.m0{--mbg:var(--m0-bg);--mfg:var(--m0-fg);}
td.ccell.m1{--mbg:var(--m1-bg);--mfg:var(--m1-fg);}
td.ccell.m2{--mbg:var(--m2-bg);--mfg:var(--m2-fg);}
td.ccell.m3{--mbg:var(--m3-bg);--mfg:var(--m3-fg);}
td.ccell.m4{--mbg:var(--m4-bg);--mfg:var(--m4-fg);}
td.ccell.m5{--mbg:var(--m5-bg);--mfg:var(--m5-fg);}
tr.day-first td, tr.day-first th{border-top:2px solid var(--ink);}

.day-filter{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap;}
.day-filter button{
  font-family:var(--sans); font-size:.78rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-raised); color:var(--ink-soft); cursor:pointer;
}
.day-filter button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

footer{margin-top:40px;font-size:.72rem;color:var(--ink-soft);text-align:center;}

/* ---------- login + admin ---------- */
.top-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.auth-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;}
.auth-box button,.btn-login,#adminPanel button{
  font-family:var(--sans); font-size:.8rem; padding:5px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); cursor:pointer;
}
.auth-box button:hover,.btn-login:hover,#adminPanel button:hover:not(:disabled){border-color:var(--accent);}
.btn-login{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.who-am-i{color:var(--ink-soft);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.auth-notice{flex-basis:100%;color:var(--accent);font-size:.75rem;}
.chip-grid.locked{display:block;padding:16px;color:var(--ink-soft);font-size:.9rem;line-height:1.7;}

#adminPanel{
  width:min(720px,94vw); max-height:90vh; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper); color:var(--ink); font-family:var(--sans);
}
#adminPanel::backdrop{background:rgba(0,0,0,.45);}
#adminPanel h2{font-size:1.05rem;margin:0;}
#adminPanel h3{font-size:.9rem;margin:22px 0 6px;}
#adminPanel input,#adminPanel select{
  font-family:var(--sans); font-size:.85rem; padding:6px 9px; border-radius:7px;
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
}
#adminPanel button:disabled{opacity:.5;cursor:default;}
.adm-head{display:flex;justify-content:space-between;align-items:center;}
.adm-grid{display:grid;grid-template-columns:90px 1fr 150px;gap:10px;margin:10px 0;}
.adm-grid label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--ink-soft);}
.adm-grid.two{grid-template-columns:1fr 1fr;}
.adm-grid.three{grid-template-columns:1fr 1fr 1fr;}
.adm-sub{font-size:.75rem;font-weight:600;color:var(--ink-soft);margin:10px 0 2px;}
.adm-btns{display:flex;gap:6px;flex-shrink:0;}
.adm-wd{font-size:.7rem;color:var(--ink-soft);min-height:1em;}
.adm-closure{flex-wrap:wrap;justify-content:flex-start;}
.adm-closure > input[data-f="label"]{flex:1;min-width:170px;}
.adm-dt{display:inline-flex;flex-direction:column;font-size:.7rem;color:var(--ink-soft);}
.adm-wrapbtns{flex-wrap:wrap;margin:6px 0 10px;}
.adm-edit{flex-direction:column;align-items:stretch;}
.adm-edit .adm-grid{margin:4px 0;}
.adm-note{font-size:.78rem;color:var(--ink-soft);margin:4px 0 8px;}
.adm-msg{font-size:.8rem;margin:8px 0;white-space:pre-wrap;}
.adm-msg.ok{color:var(--match);} .adm-msg.err{color:#b3261e;}
.adm-list{display:flex;flex-direction:column;gap:4px;margin:6px 0;}
.adm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper-raised);font-size:.85rem;}
.adm-badge{font-size:.68rem;padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);}
.adm-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;} .adm-add input{flex:1;min-width:200px;}
@media (max-width:560px){.adm-grid,.adm-grid.two,.adm-grid.three{grid-template-columns:1fr;}}

/* ---------- names inside cells: clickable -> add to comparison ---------- */
button.ref{
  font:inherit; color:inherit; background:none; border:0; padding:1px 0; margin:0;
  text-align:left; cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px;
}
button.ref:hover{color:var(--accent);text-decoration-style:solid;}
button.ref:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px;}
.ref.sel{font-weight:700;color:var(--ink);}
.toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:40;
  transform:translate(-50%, 24px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:14px; max-width:min(92vw,460px);
  padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--paper);
  font-size:.85rem; box-shadow:0 6px 24px rgba(0,0,0,.25); transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.toast button{
  font-family:var(--sans); font-size:.82rem; font-weight:600; background:none; border:0;
  color:var(--accent-soft); cursor:pointer; padding:2px 4px; text-decoration:underline;
}