/* Tanoda — nyilvános oldalak. Nincs build-lépés, a böngésző közvetlenül olvassa. */

:root {
    color-scheme: light;

    /* Halk alaptónus: se vakító fehér, se telített szín. A nagy felület törtfehér,
       a fehér a rajta ülő kisebb blokkoké. */
    --tnd-bg: #eceff5;
    --tnd-surface: #f6f8fb;
    --tnd-card: #ffffff;
    --tnd-field: #fbfcfe;

    --tnd-ink: #253244;
    --tnd-muted: #6b7688;
    --tnd-accent: #40699f;
    --tnd-on-accent: #ffffff;
    --tnd-line: #e2e7ef;
    --tnd-line-strong: #cdd5e1;
    --tnd-error: #a33b34;

    --tnd-chip-bg: #e8ecf3;
    --tnd-chip-ink: #40506a;
    --tnd-note: #f7f4ea;
    --tnd-lunch-bg: #eaf2ec;
    --tnd-lunch-ink: #3c6b50;

    /* Az órarend napjai váltakozva kapnak hátteret, hogy szemmel könnyű legyen
       egy napon belül maradni. A mai nap ennél is kiemeltebb. */
    --tnd-day-a: #fbfcfe;
    --tnd-day-b: #edf1f7;
    --tnd-head-a: #e7ebf2;
    --tnd-head-b: #dde3ec;
    --tnd-today: #f8f1e3;
    --tnd-today-line: #c9a97a;
    --tnd-today-ink: #7a5a24;

    /* Eseménytípusok: egyetlen, tompított szín típusonként — a címke szövegén,
       a futó csík pöttyén és a naptár-kártya bal szélén ugyanaz. */
    --tnd-type-holiday: #4a8663;
    --tnd-type-national: #a85751;
    --tnd-type-trip: #4a6f9e;
    --tnd-type-program: #9a7739;
    --tnd-type-exam: #6f5f9c;
    --tnd-type-other: #6b7688;

    /* A naptár címkéi a típusuk saját színén ülnek. */
    --tnd-type-holiday-bg: #dcfce7;  --tnd-type-holiday-ink: #166534;
    --tnd-type-national-bg: #fee2e2; --tnd-type-national-ink: #991b1b;
    --tnd-type-trip-bg: #dbeafe;     --tnd-type-trip-ink: #1e40af;
    --tnd-type-program-bg: #fef3c7;  --tnd-type-program-ink: #92400e;
    --tnd-type-exam-bg: #ede9fe;     --tnd-type-exam-ink: #5b21b6;
    --tnd-type-other-bg: #eef1f6;    --tnd-type-other-ink: #374151;

    /* Sürgősség: ami ezen a héten esedékes. Tompított piros — a halk
       palettába illik, de egyértelműen kiugrik a többi esemény közül. */
    --tnd-urgent: #b3453c;
    --tnd-urgent-bg: #fdf3f2;

    --tnd-radius: 20px;
}

/* Sötét téma: ugyanazok a szerepek, sötét tónusban. Alapból a rendszer
   beállítását követjük, de a Beállítások fülön felül lehet bírálni — a választás
   a beállítás-sütibe kerül, ezért nincs villanás betöltéskor. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --tnd-bg: #10141b;
    --tnd-surface: #161b23;
    --tnd-card: #1d232d;
    --tnd-field: #222935;

    --tnd-ink: #e3e8f0;
    --tnd-muted: #98a3b5;
    --tnd-accent: #7ba3d0;
    --tnd-on-accent: #10141b;
    --tnd-line: #2b323e;
    --tnd-line-strong: #3a4352;
    --tnd-error: #e08a84;

    --tnd-chip-bg: #2a323f;
    --tnd-chip-ink: #cbd4e2;
    --tnd-note: #2a2721;
    --tnd-lunch-bg: #1f2c25;
    --tnd-lunch-ink: #8fc4a4;

    --tnd-day-a: #1a212a;
    --tnd-day-b: #212936;
    --tnd-head-a: #232b37;
    --tnd-head-b: #2a3341;
    --tnd-today: #2b2519;
    --tnd-today-line: #8a7038;
    --tnd-today-ink: #e0c48a;

    --tnd-type-holiday: #7fc09b;
    --tnd-type-national: #e0938d;
    --tnd-type-trip: #8fb2dd;
    --tnd-type-program: #d4b071;
    --tnd-type-exam: #ad9dd8;
    --tnd-type-other: #98a3b5;

    --tnd-type-holiday-bg: #1d3428;  --tnd-type-holiday-ink: #8ed6ac;
    --tnd-type-national-bg: #3a2222; --tnd-type-national-ink: #eaa8a2;
    --tnd-type-trip-bg: #1e2c42;     --tnd-type-trip-ink: #a3c6ec;
    --tnd-type-program-bg: #362b18;  --tnd-type-program-ink: #e3c184;
    --tnd-type-exam-bg: #2c2542;     --tnd-type-exam-ink: #bdaee8;
    --tnd-type-other-bg: #2a323f;    --tnd-type-other-ink: #b3bccb;

    --tnd-urgent: #e6928a;
    --tnd-urgent-bg: #2a1d1c;
}

* { box-sizing: border-box; }

body.tnd {
    margin: 0;
    background: var(--tnd-bg);
    color: var(--tnd-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.tnd-header { padding: 28px 20px 8px; text-align: center; }
.tnd-header__brand { font-size: 20px; font-weight: 700; color: var(--tnd-ink); text-decoration: none; }
.tnd-header__subtitle { margin: 10px 0 0; font-size: 26px; font-weight: 700; }

.tnd-main { max-width: 960px; margin: 0 auto; padding: 16px 20px 56px; }

.tnd-back { display: inline-block; margin-bottom: 16px; color: var(--tnd-accent); text-decoration: none; font-weight: 600; }
.tnd-back:hover { text-decoration: underline; }

.tnd-empty { color: var(--tnd-muted); text-align: center; padding: 32px 0; }
.tnd-section-title { font-size: 20px; margin: 28px 0 14px; }
.tnd-prose { background: var(--tnd-card); border-radius: var(--tnd-radius); padding: 18px 20px; margin-bottom: 8px; }
.tnd-prose :first-child { margin-top: 0; }
.tnd-prose :last-child { margin-bottom: 0; }

/* ---- Osztályoldal: teljes szélességű menü + felületek ---- */

.tnd-tabs {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    background: var(--tnd-card);
    padding: 10px 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    /* Kilóg a .tnd-main paddingjából, hogy tényleg teljes szélességű legyen. */
    margin: -16px -20px 18px;
}

.tnd-tabs__back { color: var(--tnd-ink); text-decoration: none; font-size: 26px; line-height: 1; padding: 0 4px; }
.tnd-tabs__avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.tnd-tabs__who { font-weight: 700; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tnd-tabs__items { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tnd-tabs__items::-webkit-scrollbar { display: none; }

.tnd-tabs__item {
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 16px; border-radius: 999px;
    font: inherit; font-weight: 600; color: var(--tnd-muted);
    white-space: nowrap;
}
.tnd-tabs__item.is-active { background: var(--tnd-accent); color: var(--tnd-on-accent); }

.tnd-panel { display: none; }
.tnd-panel.is-active { display: block; }

.tnd-sheet {
    background: var(--tnd-card);
    border-radius: var(--tnd-radius);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .07);
    padding: 22px;
    min-height: 60vh;
}
.tnd-sheet__title { margin: 0 0 16px; font-size: 20px; }
.tnd-sheet__title::first-line { color: var(--tnd-ink); }

/* Órarend-táblázat */
.tnd-table-wrap { overflow-x: auto; }
.tnd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tnd-table th, .tnd-table td {
    border: 1px solid var(--tnd-line); padding: 8px 10px;
    vertical-align: top; text-align: left;
}
.tnd-table thead th { font-size: 13px; white-space: nowrap; font-weight: 700; color: var(--tnd-ink); }
.tnd-table__hour { width: 44px; text-align: center; color: var(--tnd-muted); font-weight: 600; background: var(--tnd-surface); }

/* ---- Napok elválasztása: váltakozó háttér + a mai nap kiemelése ----
   Az első cella az óraszám, ezért a napok a 2. oszloptól kezdődnek. */
.tnd-table tbody td:nth-child(even) { background: var(--tnd-day-a); }
.tnd-table tbody td:nth-child(odd) { background: var(--tnd-day-b); }
.tnd-table thead th:nth-child(even) { background: var(--tnd-head-a); }
.tnd-table thead th:nth-child(odd) { background: var(--tnd-head-b); }
.tnd-table thead th:first-child { background: var(--tnd-surface); }

.tnd-table thead th.is-today,
.tnd-table tbody td.is-today { background: var(--tnd-today); }
.tnd-table thead th.is-today {
    background: var(--tnd-today); color: var(--tnd-today-ink);
    box-shadow: inset 0 -3px 0 var(--tnd-today-line);
}

.tnd-lesson + .tnd-lesson { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--tnd-line); }
.tnd-lesson__subject { display: block; font-weight: 600; }
.tnd-lesson__group {
    display: inline-block; margin-top: 3px;
    background: var(--tnd-chip-bg); color: var(--tnd-chip-ink);
    border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700;
}
.tnd-lesson__meta { display: block; color: var(--tnd-muted); font-size: 12px; margin-top: 3px; }

/* Adatlap */
.tnd-id { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.tnd-id__avatar { width: 76px; height: 76px; border-radius: 50%; }
.tnd-id__name { margin: 0; font-size: 22px; font-weight: 700; }
.tnd-id__class { margin: 2px 0 0; color: var(--tnd-muted); }

.tnd-facts { margin: 0; }
.tnd-facts__row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--tnd-line);
}
.tnd-facts dt { color: var(--tnd-muted); }
.tnd-facts dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 640px) {
    .tnd-tabs { gap: 8px; padding: 10px 12px; }
    .tnd-sheet { padding: 16px 14px; border-radius: 16px; }
    .tnd-table { font-size: 13px; }
    .tnd-table th, .tnd-table td { padding: 6px 7px; }
}

/* ---- Teljes képernyős füles nézet ----
   Az osztályoldalon nincs kártya és nincs középre zárt sáv: a menü fent ragad,
   alatta a nyitott felület kitölti a képernyő maradékát — minden fülön
   egyformán (MA, HOLNAP, Órarend, Beállítások, Tantárgy). */
.tnd-main--flush {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    max-width: none; margin: 0; padding: 0;
}
.tnd-main--flush .tnd-tabs { margin: 0; }
.tnd-main--flush .tnd-panel.is-active { display: flex; flex: 1 1 auto; }
.tnd-main--flush .tnd-sheet {
    flex: 1 1 auto; width: 100%; min-width: 0;
    background: var(--tnd-surface);
    border-radius: 0; box-shadow: none; min-height: 0;
    padding: 22px 18px 48px;
}

/* Az órarend inkább vízszintesen görögjön, mint hogy a cellák magasra nyúljanak. */
.tnd-table { min-width: 660px; }

/* ---- MA / HOLNAP: a nap órái nagyban ---- */

.tnd-sheet__sub { font-weight: 400; color: var(--tnd-muted); font-size: 15px; margin-left: 8px; }
.tnd-subhead { font-size: 16px; margin: 22px 0 10px; }

.tnd-hour {
    display: flex; gap: 14px; padding: 14px 12px;
    border-radius: 12px;
}
/* Váltakozó háttér: nem díszítés, hanem sorvezető. */
.tnd-hour:nth-of-type(odd) { background: var(--tnd-card); }

.tnd-hour__when { flex: 0 0 78px; text-align: center; }
.tnd-hour__no { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
.tnd-hour__bell { display: block; font-size: 11px; color: var(--tnd-muted); margin-top: 4px; white-space: nowrap; }

.tnd-hour__what { flex: 1 1 auto; min-width: 0; }
/* A tantárgy csak akkor link, ha van mögötte tankönyv vagy gyakorló — a
   testneveléshez például sosem lesz. Az alapállapot ezért sima szöveg, a
   link-külsőt a gomb változat kapja (ugyanígy működik az órarend-táblázat is). */
.tnd-hour__subject {
    display: inline-block; border: 0; background: transparent; padding: 0;
    font: inherit; font-size: 19px; font-weight: 700; color: var(--tnd-ink);
    text-align: left;
}
button.tnd-hour__subject {
    color: var(--tnd-accent);
    cursor: pointer; text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .25); text-underline-offset: 4px;
}
button.tnd-hour__subject:hover { text-decoration-color: currentColor; }
.tnd-hour__meta { margin: 5px 0 0; color: var(--tnd-muted); font-size: 14px; }

.tnd-needs { margin: 10px 0 0; padding: 10px 12px 10px 28px; background: var(--tnd-note); border-radius: 12px; }
.tnd-needs li { margin: 3px 0; font-size: 14px; }

.tnd-lunch {
    margin: 10px 0; padding: 10px 14px; border-radius: 12px;
    background: var(--tnd-lunch-bg); color: var(--tnd-lunch-ink); font-weight: 600; font-size: 15px;
}

/* ---- Tantárgy fül: tankönyvek ---- */

.tnd-tabs__item--dynamic[hidden] { display: none; }

.tnd-books { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tnd-book { display: block; text-decoration: none; color: inherit; }
.tnd-book__cover {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 12px; background: var(--tnd-chip-bg); display: block;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
}
.tnd-book__title { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.tnd-book__genre { display: block; color: var(--tnd-muted); font-size: 12px; margin-top: 2px; }

@media (max-width: 640px) {
    .tnd-hour__when { flex-basis: 62px; }
    .tnd-hour__no { font-size: 20px; }
    .tnd-hour__subject { font-size: 17px; }
}

/* Az órarend-táblázatban is tantárgyra lehet kattintani. */
button.tnd-lesson__subject {
    border: 0; background: transparent; padding: 0;
    font: inherit; font-weight: 600; color: var(--tnd-accent);
    cursor: pointer; text-align: left;
    text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .25);
    text-underline-offset: 3px;
}
button.tnd-lesson__subject:hover { text-decoration-color: currentColor; }

/* ---- Beállítások fül: csoport- és óraválasztás ---- */
.tnd-lead { margin: 0 0 18px; color: var(--tnd-muted); font-size: 15px; line-height: 1.55; }
.tnd-prefs { display: flex; flex-direction: column; margin-bottom: 8px; }

/* A csoportnév mellett a tanár neve is ott van, ezért a legördülő kapja a teljes
   szélességet, a címke pedig fölé kerül — így semmi nem vágódik le telefonon. */
.tnd-prefs__row {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 2px; border-bottom: 1px solid var(--tnd-line);
}
.tnd-prefs__label { font-weight: 600; font-size: 15px; }
/* Szögletes, egységes legördülők: a natív nyíl helyett saját, hogy minden
   böngészőben ugyanúgy nézzenek ki. A csoportnév mellett a tanáré is elfér:
   normál vastagság, kicsit kisebb betű — így a hosszú nevek sem vágódnak le. */
.tnd-prefs select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font: inherit; font-weight: 500; font-size: 14px; line-height: 1.2;
    width: 100%; box-sizing: border-box; height: 46px;
    padding: 0 40px 0 12px;
    color: var(--tnd-ink);
    border: 1px solid var(--tnd-line-strong); border-radius: 0; background-color: var(--tnd-field);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
    transition: border-color .12s ease;
}
.tnd-prefs select:hover { border-color: var(--tnd-accent); }
.tnd-prefs select:focus-visible { outline: 0; border-color: var(--tnd-accent); box-shadow: inset 0 0 0 1px var(--tnd-accent); }

/* A kapcsolók egy sorban maradnak: rövid a szöveg, a jelölő pedig jobbra kerül. */
.tnd-prefs__row--check {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer;
}
.tnd-prefs__row--check input {
    /* A jelölő a sor jobb szélére kerül, a neve marad balra. */
    order: 2; width: 22px; height: 22px; accent-color: var(--tnd-accent); flex: none;
}

.tnd-prefs__save {
    align-self: flex-start; margin-top: 14px;
    border: 0; cursor: pointer; background: var(--tnd-accent); color: var(--tnd-on-accent);
    padding: 11px 22px; border-radius: 999px; font: inherit; font-weight: 700;
}
.tnd-prefs__switch {
    color: var(--tnd-accent); font-weight: 600; font-size: 15px;
    text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
/* Az osztály sora marad kétoszlopos: név balra, váltás jobbra. */
.tnd-prefs__row--class { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }

/* Ahol van rá hely, a címke és a legördülő egy sorba kerül — nem egymás alá.
   Telefonon marad az egymás alatti elrendezés, különben a hosszú tanárnevekre
   nem jutna szélesség. */
@media (min-width: 560px) {
    .tnd-prefs__row {
        flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
    }
    /* Minden legördülő ugyanolyan széles, hogy egy vonalban álljanak. */
    .tnd-prefs select { width: 340px; flex: 0 0 340px; }
}

/* ---- Osztályváltó a fejléc bal sarkában ---- */
.tnd-switch { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-right: auto; }
.tnd-switch__label { font-size: 12px; font-weight: 600; color: var(--tnd-muted); text-transform: uppercase; letter-spacing: .04em; }
.tnd-switch__select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
    /* Az osztályfőnök nevével együtt hosszabb a sor: nagyobb a kattintható
       felület. Telefonon korlátozzuk, hogy a füleknek is maradjon hely. */
    height: 38px; max-width: 62vw; padding: 0 30px 0 10px; color: var(--tnd-ink);
    border: 1px solid var(--tnd-line-strong); border-radius: 0; background-color: var(--tnd-field);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 11px 7px;
    cursor: pointer;
}
.tnd-switch__select:hover { border-color: var(--tnd-accent); }
.tnd-switch__select:focus-visible { outline: 0; border-color: var(--tnd-accent); box-shadow: inset 0 0 0 1px var(--tnd-accent); }
.tnd-switch__go {
    border: 1px solid var(--tnd-line-strong); border-radius: 0; background: var(--tnd-field); cursor: pointer;
    height: 38px; padding: 0 12px; font: inherit; font-weight: 600; font-size: 14px;
}
/* Telefonon a felirat elmarad — a legördülő magától érthető, és így marad hely a füleknek. */
@media (max-width: 559px) {
    .tnd-switch__label { display: none; }
    .tnd-switch { gap: 0; margin-right: 10px; min-width: 0; }
}
@media (min-width: 560px) {
    .tnd-switch__select { max-width: none; }
}

/* ---- Fent ragadó fejléc: menü + eseménycsík ---- */
/* A fejléc egy hajszálnyit hidegebb a lap felületénél, alul vékony
   akcentus-vonallal — így elválik anélkül, hogy nagy árnyékot kellene alá tenni. */
.tnd-top {
    position: sticky; top: 0; z-index: 20;
    background: var(--tnd-card);
    border-bottom: 2px solid var(--tnd-accent);
    box-shadow: 0 4px 14px rgba(30, 41, 59, .08);
}
.tnd-top .tnd-tabs { position: static; box-shadow: none; background: transparent; }

/* ---- Futó csík a közelgő eseményekkel ---- */
.tnd-ticker {
    display: block; width: 100%; overflow: hidden; cursor: pointer;
    border: 0; border-top: 1px solid var(--tnd-line); background: var(--tnd-bg);
    padding: 0; font: inherit; text-align: left;
    /* A track kétszer tartalmazza a listát, ezért a fél útig tolva ér körbe. */
    --tnd-ticker-speed: 46s;
}
.tnd-ticker__track { display: inline-flex; white-space: nowrap; animation: tnd-ticker var(--tnd-ticker-speed) linear infinite; }
.tnd-ticker:hover .tnd-ticker__track,
.tnd-ticker:focus-visible .tnd-ticker__track { animation-play-state: paused; }
.tnd-ticker__run { display: inline-flex; }
.tnd-ticker__item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: 14px; }
.tnd-ticker__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tnd-ticker__when { font-weight: 700; }
.tnd-ticker__rel { color: var(--tnd-muted); }

@keyframes tnd-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Aki kikapcsolta a mozgó animációkat, annak nem fut, hanem görgethető. */
@media (prefers-reduced-motion: reduce) {
    .tnd-ticker { overflow-x: auto; }
    .tnd-ticker__track { animation: none; }
    .tnd-ticker__run + .tnd-ticker__run { display: none; }
}

/* ---- Naptár ---- */
.tnd-events { list-style: none; margin: 0; padding: 0; }
/* Minden esemény kártyán ül, a bal szélén a típusa színével. */
.tnd-event {
    display: flex; gap: 18px; padding: 15px 18px; margin-bottom: 10px;
    background: var(--tnd-card); border-radius: 12px;
    border-left: 5px solid var(--tnd-line);
}
/* Minden típus egyetlen színt kap; a kártya bal széle, a címke szövege és a
   csík pöttye mind ebből dolgozik. */
.tnd-event { border-left-color: var(--tnd-type, var(--tnd-line-strong)); }
.tnd-event.is-now { box-shadow: 0 0 0 2px var(--tnd-today-line); }
.tnd-event__when { flex: 0 0 130px; }
.tnd-event__date { display: block; font-weight: 700; }
.tnd-event__rel { display: block; color: var(--tnd-muted); font-size: 13px; margin-top: 2px; }
.tnd-event__what { min-width: 0; }
.tnd-event__name { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.tnd-event__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tnd-event__scope { color: var(--tnd-muted); font-size: 13px; }
.tnd-event__note { margin-top: 8px; color: var(--tnd-muted); font-size: 14px; line-height: 1.5; }
.tnd-event.is-now .tnd-event__date { color: var(--tnd-accent); }

/* ---- Ezen a héten ----
   Ami a mostani naptári hétbe esik, arra a szülőnek reagálnia kell, ezért
   erősebb jelzést kap, mint a többi: piros bal szegély, piros dátum és egy
   „ezen a héten" felirat. A típus színe a címkén megmarad — csak a kártya
   kerete vált át, hogy a sürgősség és a típus ne mossa össze egymást. */
.tnd-event.is-this-week {
    border-left-color: var(--tnd-urgent);
    background: var(--tnd-urgent-bg);
}

.tnd-event.is-this-week .tnd-event__date { color: var(--tnd-urgent); }

.tnd-event.is-this-week .tnd-event__rel::after {
    content: " · ezen a héten";
    color: var(--tnd-urgent);
    font-weight: 700;
}

/* A futó csíkon ugyanez halkabban: a név vastag és piros. */
.tnd-ticker__item.is-this-week { color: var(--tnd-urgent); font-weight: 700; }
.tnd-ticker__item.is-this-week .tnd-ticker__when,
.tnd-ticker__item.is-this-week .tnd-ticker__rel { color: var(--tnd-urgent); }

/* A típus színe egy változóban utazik: a címke szövegét és a pötty hátterét is
   ez adja, így a semleges chip-háttéren halk marad, nem rikít. */
.tnd-type--holiday  { --tnd-type: var(--tnd-type-holiday);  --tnd-type-bg: var(--tnd-type-holiday-bg);  --tnd-type-ink: var(--tnd-type-holiday-ink); }
.tnd-type--national { --tnd-type: var(--tnd-type-national); --tnd-type-bg: var(--tnd-type-national-bg); --tnd-type-ink: var(--tnd-type-national-ink); }
.tnd-type--trip     { --tnd-type: var(--tnd-type-trip);     --tnd-type-bg: var(--tnd-type-trip-bg);     --tnd-type-ink: var(--tnd-type-trip-ink); }
.tnd-type--program  { --tnd-type: var(--tnd-type-program);  --tnd-type-bg: var(--tnd-type-program-bg);  --tnd-type-ink: var(--tnd-type-program-ink); }
.tnd-type--exam     { --tnd-type: var(--tnd-type-exam);     --tnd-type-bg: var(--tnd-type-exam-bg);     --tnd-type-ink: var(--tnd-type-exam-ink); }
.tnd-type--other    { --tnd-type: var(--tnd-type-other);    --tnd-type-bg: var(--tnd-type-other-bg);    --tnd-type-ink: var(--tnd-type-other-ink); }

/* A címke a típusa saját színén ül — a naptárban ez adja a gyors tájékozódást. */
.tnd-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: var(--tnd-type-bg, var(--tnd-chip-bg));
    color: var(--tnd-type-ink, var(--tnd-muted));
}
.tnd-ticker__dot { background: var(--tnd-type, var(--tnd-muted)); }

@media (max-width: 559px) {
    .tnd-event { flex-direction: column; gap: 6px; }
    .tnd-event__when { flex: none; display: flex; align-items: baseline; gap: 10px; }
    .tnd-event__rel { margin-top: 0; }
}

/* ---- Szegmentált választó (megjelenés: rendszer / világos / sötét) ---- */
.tnd-choice { display: inline-flex; border: 1px solid var(--tnd-line-strong); background: var(--tnd-field); }
.tnd-choice__item {
    padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
    color: var(--tnd-muted); white-space: nowrap;
}
.tnd-choice__item + .tnd-choice__item { border-left: 1px solid var(--tnd-line-strong); }
.tnd-choice__item input { position: absolute; opacity: 0; pointer-events: none; }
.tnd-choice__item:has(input:checked) { background: var(--tnd-accent); color: var(--tnd-on-accent); }
.tnd-choice__item:has(input:focus-visible) { outline: 2px solid var(--tnd-accent); outline-offset: 2px; }

/* ---- Gyakorlók a tantárgy fülön ---- */
.tnd-practices { display: flex; flex-direction: column; gap: 10px; }
.tnd-practice {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 14px 16px; background: var(--tnd-card); border-radius: 12px;
    border-left: 5px solid var(--tnd-accent); text-decoration: none; color: inherit;
}
.tnd-practice__title { font-weight: 600; font-size: 16px; }
.tnd-practice__meta { color: var(--tnd-muted); font-size: 13px; white-space: nowrap; }

/* ---- Ragadós lábléc ----
   Mindig a képernyő alján ül, de nem takarja a tartalmat: a main alsó
   térköze ad neki helyet. A fő tartalmi panelek teljes képernyősek, ezért
   a lábléc fixed — máskülönben csak a legalsó görgetésnél látszana.

   A felső sáv tükörképe: ott a szürke futó csíkot a kék akcentusvonal zárja
   le alul, itt ugyanaz a szürke sáv, a kék vonallal felül. Így a lap alja és
   teteje ugyanazt a keretet adja, és nem marad fehér csík a képernyő alján. */
.tnd-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 8px 20px;
    background: var(--tnd-bg);
    border-top: 2px solid var(--tnd-accent);
    box-shadow: 0 -4px 14px rgba(30, 41, 59, .08);
    font-size: 13px;
}

.tnd-footer__brand {
    color: var(--tnd-ink);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tnd-footer__version {
    color: var(--tnd-muted);
    font-weight: 500;
}

.tnd-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.tnd-footer__links a {
    color: var(--tnd-muted);
    text-decoration: none;
}

.tnd-footer__links a:hover {
    color: var(--tnd-accent);
    text-decoration: underline;
}

/* A lábléc alá ne csússzon tartalom. */
.tnd-main { padding-bottom: 76px; }

@media print {
    .tnd-footer { display: none; }
    .tnd-main { padding-bottom: 0; }
}

/* ---- Űrlap a nyilvános oldalon (hibabejelentés) ---- */
.tnd-form { max-width: 640px; }

.tnd-form__row { display: block; margin-bottom: 16px; }
.tnd-form__label { display: block; margin-bottom: 6px; font-weight: 600; }
.tnd-form__label small { font-weight: 400; color: var(--tnd-muted); }
.tnd-form__error { display: block; margin-top: 6px; color: var(--tnd-error); font-size: 13px; }

.tnd-input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--tnd-ink);
    background: var(--tnd-field);
    border: 1px solid var(--tnd-line-strong);
    border-radius: 6px;
}

.tnd-input:focus {
    outline: 2px solid var(--tnd-accent);
    outline-offset: 1px;
}

.tnd-submit {
    padding: 10px 22px;
    font: inherit;
    font-weight: 600;
    color: var(--tnd-on-accent);
    background: var(--tnd-accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Csali mező a robotoknak: ember nem látja. */
.tnd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tnd-flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.tnd-flash--ok { background: var(--tnd-lunch-bg); color: var(--tnd-lunch-ink); }
.tnd-flash--bad { background: #f6e7e6; color: var(--tnd-error); }