/* A helyettesítés-kijelző (helyettesites.szig.hu, digiszter.szig.hu/helyettesites).
   A kinézet a diák.szig.hu családé (apps/diak-portal, szin-kiosk, konyv-kiosk):
   ugyanaz a paletta és a két betű (helyben, fonts/README.md), a rendszer sötét
   módját követi. Asztalon (és a tanári 24"-os érintőképernyőn) táblázat,
   768 px alatt kártyák. Külső betöltés nincs. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #FDFBF7; --surface: #FFFFFF; --sand: #F3ECDE; --stripe: #F8F4EC; --border: #E6DCCA; --border-strong: #CDB98A;
  --text: #3B2A0A; --muted: #6B5C47; --gold: #FAD058; --gold-soft: #FCE9A8; --ochre: #D4A017; --label: #8A6D1B;
  --shadow: 0 1px 2px rgba(59, 42, 10, .06), 0 8px 24px -12px rgba(59, 42, 10, .18);
  --radius: 10px;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* A helyettesítés-táblázat oszlopai (a fejléc és a sorok ugyanezt használják). */
  --subs-cols: minmax(0, 21fr) minmax(0, 15fr) minmax(0, 17fr) minmax(0, 10fr) minmax(0, 17fr) minmax(0, 22fr);
  --subs-num: 4.5rem;
  --subs-bar: 4.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1409; --surface: #261C0F; --sand: #2F2413; --stripe: #2B2112; --border: #3D301B; --border-strong: #5E4B28;
    --text: #F3ECDE; --muted: #B8A98E; --gold: #4A3B14; --gold-soft: #3A2E12; --ochre: #E4B73A; --label: #F2CF6B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(1400px 420px at 50% -8%, var(--gold-soft), transparent 70%), var(--bg);
  color: var(--text); font: 16px/1.4 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; text-wrap: balance; }
button, select, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.125em; }

/* ---- fejléc és fülek ---------------------------------------------------- */
.kiosk-header { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: var(--surface);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.kiosk-header__brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.kiosk-header__brand img { height: 42px; width: auto; display: block; }
.kiosk-header__brand strong { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; }
.kiosk-header__app { font-size: 1.15rem; color: var(--muted); padding-left: .7rem; border-left: 2px solid var(--gold); }
.kiosk-header__updated { margin-left: auto; font-size: .9rem; color: var(--muted); white-space: nowrap; }

.kiosk-tabs { display: flex; gap: .25rem; padding: .6rem 1rem 0; overflow-x: auto; }
.kiosk-tabs__tab { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 1px solid var(--border);
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--sand); color: var(--muted);
  font-size: 1.05rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.kiosk-tabs__tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 3px 0 var(--gold); }

.kiosk-main { padding: 0 1rem 2rem; }
.kiosk-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 1rem 1.25rem 1.5rem; box-shadow: var(--shadow); }
.kiosk-tabs + .kiosk-main .kiosk-panel { border-top-left-radius: 0; }
body:not(:has(.kiosk-tabs)) .kiosk-main { padding-top: 1rem; }
body:not(:has(.kiosk-tabs)) .kiosk-panel { border-radius: var(--radius); }

.kiosk-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 1.3rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.kiosk-button:hover { background: var(--sand); border-color: var(--ochre); }
.kiosk-button:disabled { opacity: .4; cursor: default; }
.kiosk-button--plain { min-height: 2.4rem; padding: 0 .6rem; border-color: transparent; background: none; }
.kiosk-message { margin: 1rem 0; padding: 1rem 1.25rem; border: 1px solid var(--ochre); border-radius: var(--radius); background: var(--gold-soft); }
.kiosk-message--calm { border-style: dashed; border-color: var(--border-strong); background: var(--sand); color: var(--muted); }
.kiosk-field { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.1rem; font-weight: 600; }
.kiosk-field select, .kiosk-field input { min-height: 2.8rem; padding: 0 .7rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface); font-weight: 400; }
.kiosk-field select { min-width: min(22rem, 100%); }
.kiosk-segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.kiosk-segmented button { min-height: 2.8rem; padding: 0 1rem; border: 0; border-left: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; }
.kiosk-segmented button:first-child { border-left: 0; }
.kiosk-segmented button[aria-pressed="true"] { background: var(--gold); font-weight: 700; }

/* ---- a helyettesítések ---------------------------------------------------- */
/* Asztalon a szűrősor és alatta a táblázat fejléce ragad; a sor bal szélén az
   éppen olvasott nap (app.js), így az első nap saját címe rejtve van. */
.subs-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 1rem; height: var(--subs-bar);
  margin: -1rem 0 0; background: var(--surface); }
.subs-toolbar__day { margin: 0 auto 0 0; font-family: var(--display); font-size: 1.6rem; font-weight: 700; }
.subs-day.is-lead .subs-day__title { display: none; }
.subs-filter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.subs-filter__label { font-weight: 700; color: var(--muted); }
.subs-filter__active { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .2rem .2rem .8rem; border-radius: 999px;
  background: var(--gold); font-weight: 700; }
.subs-filter--mobile { display: none; }

.subs { font-size: 1.05rem; }
.subs-head { position: sticky; top: var(--subs-bar); z-index: 2; display: grid; grid-template-columns: var(--subs-num) var(--subs-cols);
  background: var(--gold); border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; text-align: center; }
.subs-head > span { padding: .45rem .6rem; }
.subs-day { margin-top: .5rem; }
.subs-day__title { margin: 1.1rem 0 .5rem; font-size: 1.6rem; }
.subs-notice { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; padding: .45rem .8rem; border-radius: var(--radius);
  background: var(--sand); border-left: 4px solid var(--ochre); }
.subs-lesson { display: grid; grid-template-columns: var(--subs-num) minmax(0, 1fr); border-top: 1px solid var(--border-strong); }
.subs-lesson:last-child { border-bottom: 1px solid var(--border-strong); }
.subs-lesson__num { display: flex; align-items: flex-start; justify-content: center; padding-top: .2rem; border-right: 1px solid var(--border-strong);
  font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
/* A hosszú óra száma a ragadós fejléc alatt is látszik, amíg az óra sorai. */
.subs-lesson__num > span:first-child { position: sticky; top: calc(var(--subs-bar) + 2.6rem); }
.subs-lesson__word { display: none; }
/* A mai nap már véget ért órái (DailyList::days): halványan, de olvashatóan. */
.subs-lesson.is-past { opacity: .45; }
.subs-row { display: grid; grid-template-columns: var(--subs-cols); }
.subs-row.is-striped { background: var(--stripe); }
.subs-cell { padding: .35rem .6rem; line-height: 1.3; overflow-wrap: anywhere; border-right: 1px solid var(--border); }
.subs-cell:last-child { border-right: 0; }
.subs-cell--substitute { font-weight: 700; }
.subs-cell--substitute.is-empty { color: var(--muted); font-weight: 400; }
.subs-cell__label { display: none; }

/* ---- a szűrőpanel (asztal) ------------------------------------------------ */
.filter-panel { position: fixed; inset: 0 0 0 auto; width: min(34rem, 100vw); height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: -.5rem 0 2rem rgba(0, 0, 0, .3); }
.filter-panel::backdrop { background: rgba(0, 0, 0, .4); }
.filter-panel__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; background: var(--sand);
  border-bottom: 1px solid var(--border); box-shadow: inset 4px 0 0 var(--gold); }
.filter-panel__head h2 { font-size: 1.4rem; }
.filter-panel__names { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.25rem; }

/* ---- órarendek (belső fülek) ---------------------------------------------- */
.timetable-output { margin-top: 1rem; overflow-x: auto; }
.tt { display: grid; grid-template-columns: 3rem repeat(var(--tt-days, 5), minmax(0, 1fr)); min-width: 50rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.tt__corner, .tt__day { background: var(--gold); font-weight: 700; text-align: center; padding: .4rem; }
.tt__num { display: flex; align-items: center; justify-content: center; background: var(--sand); font-family: var(--display);
  font-size: 1.4rem; font-weight: 800; border-top: 1px solid var(--border); }
.tt__cell { position: relative; min-height: 4.2rem; padding: .3rem .45rem; border-top: 1px solid var(--border); border-left: 1px solid var(--border); min-width: 0; }
.tt__subject { font-weight: 700; font-size: 1.1rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt__subject.is-long { font-size: .95rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tt__meta { display: flex; justify-content: space-between; gap: .4rem; font-size: .95rem; color: var(--muted); }
.tt__meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt__meta > span:last-child { flex: none; max-width: 50%; }
.tt__lessons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; }
.tt__lesson { min-width: 0; }
.tt__lesson + .tt__lesson { border-left: 1px solid var(--border); padding-left: .4rem; }
.tt--class .tt__subject { text-align: left; font-size: 1rem; }
.tt__line { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt__line--muted { color: var(--muted); }
.tt__cell.has-details { cursor: pointer; }
.tt__cell.has-details:hover, .tt__cell.has-details:focus-within { outline: 2px solid var(--ochre); outline-offset: -2px; }
.tt__details { display: none; position: absolute; top: 100%; left: 0; z-index: 5; width: max(100%, 22rem); padding: .6rem .8rem;
  background: var(--surface); border: 1px solid var(--ochre); border-radius: var(--radius); box-shadow: var(--shadow); }
.tt__cell:hover > .tt__details, .tt__cell:focus-within > .tt__details { display: block; }
.tt__details--left { left: auto; right: 0; }
.tt__details--up { top: auto; bottom: 100%; }
.tt__details--wide { width: max(100%, 40rem); }
.tt__details-title { font-weight: 700; padding-bottom: .3rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border); }
.tt__details-list { display: grid; gap: .5rem; }
.tt__details--wide .tt__details-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.tt__detail { display: grid; }

/* ---- korábbi hiányzások ----------------------------------------------------- */
.history-tools { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-bottom: 1rem; }
.history-summary { font-size: 1.15rem; }
.history-day { margin: 1.2rem 0 .4rem; font-size: 1.25rem; }
.history-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.history-table th { background: var(--gold); text-align: left; padding: .4rem .6rem; }
.history-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--border); }
.history-table tbody tr:nth-child(even) { background: var(--stripe); }
.history-table__num { font-weight: 700; text-align: center; }

/* ---- mobil: kártyák, „Az én helyettesítéseim” ------------------------------ */
@media (max-width: 767.98px) {
  .kiosk-header { padding: .5rem .9rem; gap: .6rem; }
  .kiosk-header__brand img { height: 34px; }
  .kiosk-header__brand strong { font-size: 1.15rem; }
  .kiosk-header__app { font-size: .95rem; padding-left: .5rem; }
  .kiosk-header__updated { font-size: .8rem; }
  .kiosk-tabs { padding: .5rem .5rem 0; }
  .kiosk-tabs__tab { padding: .55rem .8rem; }
  .kiosk-tabs__tab span { display: none; }
  .kiosk-main { padding: 0 .5rem 1.5rem; }
  .kiosk-panel { padding: .75rem .75rem 1.25rem; }
  .kiosk-panel:first-child { border-top-left-radius: 0; }

  .subs-toolbar { position: static; display: block; height: auto; margin: 0; }
  .subs-toolbar__day { display: none; }
  .subs-day.is-lead .subs-day__title { display: block; }
  .subs-filter--desktop { display: none; }
  .subs-filter--mobile { display: grid; gap: .3rem; }
  .subs-filter--mobile select { min-height: 3rem; padding: 0 .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); font-size: 1.05rem; }

  .subs { font-size: 1rem; }
  .subs-head { display: none; }
  .subs-day__title { font-size: 1.35rem; }
  .subs-lesson { display: block; border: 0; }
  .subs-lesson:last-child { border: 0; }
  .subs-lesson__num { justify-content: flex-start; gap: .25em; margin: .9rem 0 .4rem; border: 0; font-size: 1.15rem; color: var(--label); }
  .subs-lesson__num > span:first-child { position: static; }
  .subs-lesson__word { display: inline; }
  .subs-lesson__rows { display: grid; gap: .5rem; }
  /* Egy helyettesítés kártyája: fent az osztály és a terem, alatta vastagon a
     helyettesítő, majd a típus és a tantárgy, végül a hiányzó. */
  /* A jobb oszlop (terem, tantárgy) legfeljebb a kártya 45%-a: egy hosszú tantárgy ne szorítsa egy
     betű szélesre az osztályt és a típust, hanem maga tördelődjön. */
  .subs-row { grid-template-columns: minmax(0, 1fr) fit-content(45%); grid-template-areas: "class room" "substitute substitute" "type subject" "absent absent";
    gap: .15rem .6rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .subs-row.is-striped { background: var(--surface); }
  /* szóhatáron törünk (az „anywhere” betűnként is törne, és a cella egy betűre zsugorodhatna) */
  .subs-cell { padding: 0; border: 0; overflow-wrap: break-word; }
  .subs-cell--class { grid-area: class; font-weight: 700; }
  .subs-cell--room { grid-area: room; justify-self: end; align-self: start; padding: 0 .55rem; border-radius: 999px; background: var(--sand); font-weight: 700; }
  .subs-cell--substitute { grid-area: substitute; font-size: 1.15rem; }
  /* Helyettesítő nélküli sornál (elmarad, 9-re jönnek…) a típus mondja el, mi lesz. */
  .subs-cell--substitute.is-empty { display: none; }
  .subs-cell--type { grid-area: type; color: var(--label); font-weight: 600; }
  .subs-cell--subject { grid-area: subject; justify-self: end; text-align: right; color: var(--muted); }
  .subs-cell--absent { grid-area: absent; color: var(--muted); font-size: .92rem; }
  .subs-cell__label { display: inline; }

  .filter-panel { width: 100vw; }
}