/* =====================================================================
   Kanizsay – globális stílus
   A --color-primary és --color-accent értékét a layout írja felül
   az adatbázis `settings` táblájából (color_primary / color_accent).
   Így a végleges színeket elég egy helyen, az admin felületen megadni.
   ===================================================================== */

:root {
    /* Ideiglenes helyőrző színek – a véglegeseket Martin adja meg */
    --color-primary: #1d4ed8;
    --color-accent:  #f59e0b;

    /* Származtatott árnyalatok (color-mix: minden modern böngésző tudja) */
    --color-primary-dark:  color-mix(in srgb, var(--color-primary) 82%, black);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 12%, white);
    --color-accent-dark:   color-mix(in srgb, var(--color-accent) 82%, black);
    --color-accent-light:  color-mix(in srgb, var(--color-accent) 15%, white);

    --app-radius: .75rem;

    /* Arculat: az akcentus arany szerepben – vékony vonal, kis jel, kiemelés.
       Nagy felületen sosem hordoz fehér szöveget, azon olvashatatlan volna. */
    --app-line:      #dfe5ef;
    --app-line-soft: #edf1f7;
    --app-ink:       #142034;
    --app-muted:     #66748c;
}

body {
    background-color: #f5f7fb;
    color: var(--app-ink);
    line-height: 1.7;
}

/* Nyugodtabb címhierarchia az egész oldalon */
h1, h2, h3, h4, h5 {
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* =====================================================================
   Szekciófejléc – a szimmetriatengely alapeleme.
   Használat:
     <div class="section-head">
         <span class="section-label">Hírek</span>
         <div class="section-rule"><i></i></div>
         <h2>Ami nálunk történik</h2>
         <p>…</p>
     </div>
   ===================================================================== */
.section-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.75rem;
}

.section-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: .9rem;
}

.section-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    width: 9rem;
    margin: 0 auto 1.1rem;
}

.section-rule::before,
.section-rule::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--color-accent);
    opacity: .6;
}

.section-rule i {
    width: .5rem;
    height: .5rem;
    flex: none;
    background-color: var(--color-accent);
    transform: rotate(45deg);
}

.section-head h2 {
    font-weight: 700;
    margin-bottom: .75rem;
}

.section-head p {
    color: var(--app-muted);
    margin-bottom: 0;
}

/* Világos háttéren (kék sávban) ugyanez */
.section-head-light .section-label { color: var(--color-accent); }
.section-head-light h2 { color: #fff; }
.section-head-light p  { color: rgb(255 255 255 / .8); }

/* =====================================================================
   Képzéseink
   ===================================================================== */
.program-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

.program-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgb(11 34 71 / .1) !important;
}

.program-icon {
    display: inline-grid;
    place-items: center;
    width: 4.1rem;
    height: 4.1rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    border: 1px solid var(--app-line);
    color: var(--color-primary);
}

.program-years {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: .9rem;
}

.program-classes {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--app-line-soft);
}

.program-classes-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin-bottom: .2rem;
}

.program-classes-list {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* --- Felnőttoktatás: egy tagozat blokkja ---------------------------- */
.adult-track {
    background-color: #fff;
    border: 1px solid var(--app-line);
    border-top: 3px solid var(--color-accent);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.adult-head {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--app-line-soft);
}

.adult-sub {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 0;
}

.adult-track > p { text-align: center; max-width: 62ch; margin-inline: auto; }

/* Amit a nappali tagozat ad – apró jelölők */
.adult-benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}

.adult-benefit {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border-radius: 2rem;
    padding: .2rem .8rem;
}

.sector-card {
    border: 1px solid var(--app-line-soft);
    padding: 1.1rem 1.15rem;
    background-color: var(--ground, #f5f7fb);
}

.sector-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: .6rem;
}

.sector-name svg { flex: none; }

.sector-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: .9rem;
    line-height: 1.55;
}

.sector-list li + li { margin-top: .3rem; }
.sector-list li::marker { color: var(--color-accent-dark); }

.sector-note {
    margin: .7rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid var(--app-line-soft);
    font-size: .82rem;
    color: var(--app-muted);
}

/* Jelentkezés – a blokk zárása */
.adult-apply {
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--app-line);
    text-align: center;
}

.adult-apply ul {
    display: inline-block;
    text-align: left;
    margin-inline: auto;
    color: var(--app-muted);
}

/* Kártyafejléc – az oldalsáv dobozaihoz, arany aláhúzással */
.card-title-app {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--app-muted);
    text-align: center;
    margin-bottom: 1.15rem;
    padding-bottom: .7rem;
    position: relative;
}

.card-title-app::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 2px;
    background-color: var(--color-accent);
}

/* --- Logó a fejlécben (szöveg nélkül) -------------------------------- */
.navbar-brand {
    padding-top: .1rem;
    padding-bottom: .1rem;
}

.app-logo {
    height: 44px;
    width: auto;
    background-color: #fff;
    border-radius: .35rem;
    padding: 3px;
}

/* =====================================================================
   Navigáció – világos sáv, a menü a tengelyen.
   A logó bal oldalt, a belépés jobb oldalt fogja közre a menüt.
   ===================================================================== */
.app-navbar {
    background-color: var(--color-primary);
    box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
    color: #fff;
}

.app-navbar .nav-link {
    font-weight: 600;
    font-size: .95rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 2px solid transparent;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

.app-navbar .nav-link.active {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

.app-navbar .navbar-toggler {
    border-color: rgb(255 255 255 / .4);
}

.app-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* --- Személyes menü a fejlécben ------------------------------------
   A név hosszú is lehet („Dr. Gáváné Komáromi Edina"), ezért korlátozzuk:
   különben egyetlen menüpont szétfeszítené a sávot. Kis képernyőn a
   legördülő amúgy is a hamburger alatt nyílik ki, ott van hely. */
.app-navbar .user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.app-navbar .user-menu-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A kilépés a legördülőben űrlapgomb, de úgy nézzen ki, mint a többi elem */
.dropdown-menu form .dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
}

/* A kilépés gomb a többi menüponttal egyezzen */
.app-navbar .btn-link {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    padding: .5rem 1rem;
}

.app-navbar .btn-link:hover {
    color: var(--color-accent-light);
}

/* Lenyíló menü */
.app-navbar .dropdown-menu {
    border-color: var(--app-line);
    border-top: 2px solid var(--color-accent);
    border-radius: 0;
    box-shadow: 0 .75rem 2rem rgb(11 34 71 / .1);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* Összecsukott állapotban a menü balra igazodjon, hogy olvasható legyen */
@media (max-width: 991.98px) {
    .app-navbar .navbar-nav {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center;
    }
    .app-navbar .nav-link { border-bottom: 0; }
}

/* --- Gombok --------------------------------------------------------- */
.btn-primary-app {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary-app:hover,
.btn-primary-app:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn-accent-app {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #1a1a1a;
}

.btn-accent-app:hover,
.btn-accent-app:focus {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

/* --- Kiemelés (helyettesítések, változások jelölése) ---------------- */
.accent-text {
    color: var(--color-accent-dark);
}

.accent-badge {
    background-color: var(--color-accent);
    color: #1a1a1a;
}

/* A megváltozott órarendi cellák kapják ezt */
.cell-changed {
    background-color: var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
}

/* =====================================================================
   Nyitóblokk – oklevélkeret a mély kéken.
   Az iskola saját formanyelve a bizonyítvány: finom keret, középre
   szedett szöveg, sarokszögek. Fotó nélkül is megáll; ha lesz fotó,
   halványan a keret mögé kerülhet.
   ===================================================================== */
/* Az iskola Kassai utcai homlokzata a háttérben.
   A fátyol csak annyi, hogy a kép kékbe boruljon és az épület látsszon;
   az olvashatóságot a keret belsejében lévő sötétítés adja (lásd lentebb),
   nem az egész képet lefedő réteg. */
.hero {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 55%, transparent) 0%,
            color-mix(in srgb, var(--color-primary-dark) 62%, transparent) 100%),
        url('/assets/img/hero.jpg') center 42% / cover no-repeat,
        var(--color-primary-dark);
    color: #fff;
    padding: 1.25rem;
}

.hero-frame {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
    padding: 3.25rem 1.5rem 3.5rem;
    text-align: center;

    /* A szöveg mögött sötétít, a szélek felé elfogy – így az épület
       látszik a kép szélein, a felirat mégis olvasható marad. */
    background: radial-gradient(
        ellipse 78% 72% at 50% 50%,
        color-mix(in srgb, var(--color-primary-dark) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-dark) 45%, transparent) 55%,
        transparent 80%
    );
}

/* Két átellenes sarkot arany szög zár – ettől lesz oklevél, nem doboz */
.hero-frame::before,
.hero-frame::after {
    content: "";
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid var(--color-accent);
}

.hero-frame::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.hero-frame::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* „Alapítva 1919” – arany vonalak között */
.hero-est {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 8px rgb(11 34 71 / .6);
}

.hero-est::before,
.hero-est::after {
    content: "";
    width: 1.6rem;
    height: 1px;
    background-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* A cím az iskola teljes neve (80+ karakter), ezért tágabb sorhossz és
   rugalmas méret kell – szűk korláttal keskeny, magas oszloppá törne. */
/* A fotó fölött a szöveg finom árnyékot kap, hogy a világosabb
   képrészleteken se olvadjon bele a háttérbe. */
.hero h1 {
    font-weight: 700;
    font-size: clamp(1.45rem, 3.4vw, 2.35rem);
    line-height: 1.25;
    max-width: 26ch;
    margin: 0 auto 1.1rem;
    text-shadow: 0 2px 14px rgb(11 34 71 / .55);
}

/* Az iskola jelmondata – a cím alatt, aranyban, két hajszálvonal között */
.hero-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 30rem;
    margin: 0 auto 1.1rem;
    color: var(--color-accent);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 600;
    font-style: italic;
    letter-spacing: .01em;
    text-shadow: 0 1px 10px rgb(11 34 71 / .55);
}

.hero-tagline::before,
.hero-tagline::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.hero-lead {
    color: rgb(255 255 255 / .92);
    max-width: 56ch;
    margin: 0 auto;
    font-size: 1rem;
    text-shadow: 0 1px 10px rgb(11 34 71 / .5);
}

@media (max-width: 575.98px) {
    .hero-tagline { gap: .6rem; }
}

.hero-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.9rem;
}

/* Fehér körvonalas gomb a kék háttéren */
.btn-outline-light-app {
    border: 1px solid rgb(255 255 255 / .5);
    color: #fff;
}

.btn-outline-light-app:hover,
.btn-outline-light-app:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-primary-dark);
}

@media (max-width: 575.98px) {
    .hero { padding: .6rem; }
    .hero-frame { padding: 2.25rem 1rem 2.5rem; }
}

/* =====================================================================
   Lábléc – a tengelyen zárul, az iskola adataival
   ===================================================================== */
.app-footer {
    background-color: color-mix(in srgb, var(--color-primary) 88%, black);
    color: rgb(255 255 255 / .68);
    font-size: .9rem;
    text-align: center;
}

.app-footer a {
    color: rgb(255 255 255 / .68);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--color-accent);
}

/* A lábléc logóját elhagytuk: a fejlécben úgyis ott van, és külön sávként
   csak magasította a láblécet. */

/* A lábléc korábban öt egymás alatti sávból állt (logó, elérhetőségek,
   ikonok, azonosítók, jogi sor), és emiatt fölöslegesen magas volt.
   Az elérhetőségek és az ikonok most EGY sorban állnak; szűk kijelzőn
   természetesen tördelnek. */
.footer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
}

/* A menü csak a fejlécben van, a láblécben nem ismételjük.
   Az iskola neve a nyitóblokkban szerepel, itt csak a jogi sorban. */
.footer-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem 1.5rem;
    margin-bottom: 0;
}

.footer-contact span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.footer-contact svg {
    color: var(--color-accent);
    flex: none;
}

/* Hivatalos azonosítók és a jogi sor – halkan, EGY elválasztó alatt.
   Korábban mindkettőnek saját szegélye és belső margója volt, ami önmagában
   közel 60 képpontot adott a lábléc magasságához. */
.footer-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem 1.5rem;
    font-size: .76rem;
    color: rgb(255 255 255 / .5);
}

.footer-meta,
.footer-bottom {
    line-height: 1.5;
}

.footer-legal {
    border-top: 1px solid rgb(255 255 255 / .12);
    margin-top: .9rem;
    padding-top: .8rem;
}

.footer-bottom {
    margin-top: .25rem;
    font-size: .76rem;
    color: rgb(255 255 255 / .45);
}

/* --- Űrlapok -------------------------------------------------------- */
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.card {
    border-radius: var(--app-radius);
}

/* A kilépés gomb színezése a navigáció szakaszában van (fentebb),
   hogy ne írja felül két azonos erősségű szabály egymást. */

/* --- Használati útmutató --------------------------------------------
   Képekkel illusztrált leírás szerepkörönként (/utmutato). A képek a
   működő oldalról készültek, ezért keretet kapnak: látszódjon, hol ér
   véget a képernyőkép és hol kezdődik ez az oldal. */
.guide-nav {
    position: sticky;
    top: 1rem;
}

.guide-kep {
    margin: 1.25rem 0 1.75rem;
}

.guide-kep img {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / .06);
}

.guide-kep figcaption {
    margin-top: .4rem;
    font-size: .85rem;
    color: #6c757d;
}

.guide-tartalom h2 {
    margin-top: .5rem;
}

/* A jegyzék kártyái */
.guide-kartya {
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

.guide-kartya:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .1) !important;
}

.guide-kartya h2 {
    color: var(--color-primary);
}

@media print {
    .guide-nav { display: none; }
    .guide-kep { break-inside: avoid; }

    /* Papíron a fejléc, a menü és a lábléc nem kell. A csupasz elrendezésben
       (`/utmutato/nyomtatas`) eleve nincsenek, de a rendes lapokról nyomtatva
       is ez a helyes. */
    .app-navbar,
    .app-footer,
    .btn { display: none !important; }

    body { background: #fff; }
    a { text-decoration: none; color: inherit; }

    /* A hivatkozás címét NEM írjuk ki a szöveg mellé: az útmutatóban minden
       link az oldal saját lapjaira mutat, papíron pedig csak zaj lenne –
       ráadásul a gépnév vagy IP-cím is kikerülne vele. */
    a[href]::after { content: none !important; }
}

/* --- Az útmutató nyomtatható változata ------------------------------- */
.guide-nyomtatas-fejlec {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.guide-nyomtatas-szakasz {
    /* Minden szakasz új lapon kezdődjön – az első kivételével */
    break-before: page;
    page-break-before: always;
}

.guide-nyomtatas-szakasz.elso {
    break-before: auto;
    page-break-before: auto;
}

.guide-nyomtatas h2 {
    break-after: avoid;
    page-break-after: avoid;
}

.guide-nyomtatas img {
    max-width: 100%;
    height: auto;
}

/* --- Adminisztráció menü: két hasáb ----------------------------------
   Húsz menüpont egy hasábban a fél képernyőt elfoglalta (Martin, 09-03).
   Rács, szakaszonként egy dobozzal: a szakaszcím és a pontjai együtt
   maradnak. Keskeny képernyőn (telefon, összecsukott menü) egy hasáb. */
.admin-menu {
    min-width: 30rem;
    padding: .5rem .35rem;
}

/* A rácsot CSAK a nyitott menüre tesszük rá: a Bootstrap a `.dropdown-menu`-t
   `display:none`-nal rejti, és a `.show` osztállyal nyitja. Ha a rácsot a
   `.dropdown-menu`-re írnánk, a menü mindig nyitva állna. */
.admin-menu.show {
    display: block;
    column-count: 2;
    column-gap: 1rem;
}

/* Hasábtörés ellen: a szakaszcím és a pontjai együtt maradnak. A
   `display:inline-block` + `width:100%` a bevált trükk erre – a
   `break-inside: avoid` önmagában nem mindenhol elég. */
.admin-menu-szakasz {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
}

.admin-menu .dropdown-header {
    padding-top: .35rem;
}

.admin-menu .dropdown-item {
    border-radius: .3rem;
}

@media (max-width: 575.98px) {
    .admin-menu {
        min-width: 0;
    }

    .admin-menu.show {
        column-count: 1;
    }
}

/* =====================================================================
   Órarend rács (4. lépés)
   ===================================================================== */

.timetable {
    background-color: #fff;
    font-size: .875rem;
    /* Minden nap-oszlop azonos szélességű, függetlenül a tartalomtól */
    table-layout: fixed;
    width: 100%;
    min-width: 60rem;
}

.timetable thead th {
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.timetable thead th .text-body-secondary {
    color: rgb(255 255 255 / .75) !important;
}

.timetable .period-col {
    width: 6.5rem;
    background-color: var(--color-primary-light);
    text-align: center;
    white-space: nowrap;
}

.timetable td {
    vertical-align: top;
    padding: .35rem;
    /* Egységes sormagasság: minden cella ugyanakkora, akkor is, ha üres */
    height: 5.5rem;
}

/* Az aktuális nap oszlopa */
.timetable th.is-today,
.timetable td.is-today {
    background-color: color-mix(in srgb, var(--color-primary) 7%, white);
}

.timetable thead th.is-today {
    background-color: var(--color-primary-dark);
}

/* --- Egy óra a cellában --------------------------------------------- */
.lesson {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .3rem .45rem;
    border-radius: .4rem;
    background-color: color-mix(in srgb, var(--color-primary) 5%, white);
    border-left: 3px solid var(--color-primary);
    /* Azonos magasság: tantárgy + tanár + terem három sora */
    min-height: 4.6rem;
    overflow: hidden;
}

.lesson + .lesson {
    margin-top: .25rem;
}

/* Több párhuzamos óra egy cellában (bontott csoportok): két soros,
   tömör blokkok, hogy a sor magassága ne szaladjon el */
.lesson-compact {
    min-height: 0;
    padding: .2rem .4rem;
}

.lesson-compact .lesson-subject {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: .8rem;
}

.lesson-compact .lesson-meta {
    font-size: .72rem;
}

/* A hosszú nevek egy sorba tördelve, három pontos levágással.
   A teljes szöveg a cella "title" buboréktippjében olvasható. */
.lesson-subject {
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-meta {
    font-size: .76rem;
    color: #5c636a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lesson-badge {
    align-self: flex-start;
    font-size: .65rem;
    margin-bottom: .1rem;
}

/* Változással érintett óra – kiemelő szín */
.lesson.cell-changed {
    background-color: var(--color-accent-light);
    border-left-color: var(--color-accent);
}

.lesson.cell-cancelled {
    opacity: .75;
}

/* --- A terem ---------------------------------------------------------
   A cella legfontosabb gyakorlati adata: a diák a tantárgyat tudja, azt
   keresi, HOVÁ menjen. Ezért kiemelt, kis táblácskaként jelenik meg, nem
   a tanár neve alatt egy sorban. */
.lesson-room {
    align-self: flex-start;
    margin-top: .1rem;
    padding: 0 .32rem;
    border-radius: .3rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lesson-compact .lesson-room {
    font-size: .72rem;
    line-height: 1.3;
}

/* Teremcsere: az eredeti áthúzva, az új a kiemelő színnel */
.lesson-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}

.lesson-room-old {
    color: #6c757d;
    background-color: transparent;
    font-weight: 500;
    text-decoration: line-through;
    padding-left: 0;
    padding-right: 0;
}

.lesson-room-changed {
    color: #6a4b00;
    background-color: var(--color-accent-light);
}

/* --- „Éppen ebben az órában járunk" ---------------------------------
   A mai oszlop és a mostani óra metszéspontja. A sor egészét is jelöljük,
   mert a rács széles: a bal szélen látszik, hol tartunk, akkor is, ha a mai
   nap oszlopa épp a képernyő szélén van.
   A jelölést a `timetable-now.js` percenként újraszámolja. */
.timetable tr.is-now-row > .period-col {
    background-color: var(--color-primary);
    color: #fff;
}

.timetable tr.is-now-row > .period-col .text-body-secondary {
    color: rgb(255 255 255 / .8) !important;
}

.timetable tr.is-next-row > .period-col {
    background-color: color-mix(in srgb, var(--color-primary) 25%, white);
}

.timetable td.is-now {
    background-color: color-mix(in srgb, var(--color-primary) 16%, white);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.timetable td.is-next {
    background-color: color-mix(in srgb, var(--color-primary) 10%, white);
}

/* A „most" / „szünet" felirat az óra sorszáma alatt. Mindkettő ott van a
   lapon, a sor állapota dönti el, melyik látszik. */
.period-now-badge {
    display: none;
    margin-top: .15rem;
    padding: .05rem .35rem;
    border-radius: .6rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.timetable tr.is-now-row .period-now-badge.is-now-label {
    display: inline-block;
    background-color: #fff;
    color: var(--color-primary-dark);
}

.timetable tr.is-next-row .period-now-badge.is-next-label {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
}

/* --- Kattintható óra: névsor -----------------------------------------
   Csak azok a cellák kapják meg, amikre a felhasználó jogosult (tanár a
   saját óráján, osztályfőnök a saját osztályáén). */
.lesson-nevsor {
    cursor: pointer;
}

.lesson-nevsor:hover,
.lesson-nevsor:focus-visible {
    background-color: color-mix(in srgb, var(--color-primary) 12%, white);
    outline: none;
}

.lesson-nevsor:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.roster-lista li {
    margin-bottom: .15rem;
}

/* --- Lyukasóra ------------------------------------------------------
   Üres cella két óra KÖZÖTT ugyanazon a napon. Halvány sávozás, hogy
   ránézésre elváljon az iskolaidő előtti/utáni üres celláktól, de ne
   vonja el a figyelmet a valódi óráktól. */
.timetable td.is-gap {
    background-image: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 6%, transparent) 0,
        color-mix(in srgb, var(--color-primary) 6%, transparent) .35rem,
        transparent .35rem,
        transparent .8rem
    );
}

.lesson-gap {
    display: block;
    text-align: center;
    font-size: .72rem;
    color: #6c757d;
    font-style: italic;
}

/* =====================================================================
   Órarend-szerkesztő rács (admin)
   ===================================================================== */
.timetable-editor {
    background-color: #fff;
    table-layout: fixed;
    min-width: 60rem;
    font-size: .85rem;
}

.timetable-editor thead th {
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.timetable-editor .period-col {
    width: 6.5rem;
    background-color: var(--color-primary-light);
    text-align: center;
    vertical-align: middle;
}

.timetable-editor td {
    vertical-align: top;
    padding: .3rem;
    height: 5rem;
}

/* Egy felvitt óra – kattintva szerkeszthető */
.editor-lesson {
    display: block;
    padding: .3rem .45rem;
    margin-bottom: .25rem;
    border-radius: .35rem;
    background-color: color-mix(in srgb, var(--color-primary) 6%, white);
    border-left: 3px solid var(--color-primary);
    text-decoration: none;
    color: var(--app-ink);
    transition: background-color .12s ease;
}

.editor-lesson:hover {
    background-color: color-mix(in srgb, var(--color-primary) 14%, white);
}

.editor-subject {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

.editor-meta {
    display: block;
    font-size: .74rem;
    color: var(--app-muted);
    line-height: 1.25;
}

/* Üres cellában halvány, ráhúzva előtűnik */
.editor-add {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--app-muted);
    border: 1px dashed var(--app-line);
    border-radius: .35rem;
    padding: .1rem;
    font-weight: 700;
    opacity: .45;
    transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}

.editor-add:hover {
    opacity: 1;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Jelmagyarázat pötty */
.legend-swatch {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: .2rem;
    background-color: var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
    vertical-align: -1px;
    margin-right: .25rem;
}

/* A/B hét jelölés */
.week-badge {
    background-color: var(--color-accent);
    color: #1a1a1a;
}

/* Tagozat fülek */
.nav-tabs .nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: #fff;
}

.nav-tabs .nav-link {
    color: #495057;
}

@media (max-width: 767.98px) {
    .timetable {
        font-size: .8rem;
    }
    .timetable td {
        min-width: 7.5rem;
    }
}

/* =====================================================================
   Profilképek, tanári kar és osztálynévsor (7. lépés)
   ===================================================================== */

/* --- Kis kerek avatar (admin lista, fejlécek) ----------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.avatar-xs { width: 26px;  height: 26px;  font-size: .65rem; }
.avatar-sm { width: 40px;  height: 40px;  font-size: .8rem; }
.avatar-md { width: 64px;  height: 64px;  font-size: 1rem; }
.avatar-lg { width: 120px; height: 120px; font-size: 2rem; }

.avatar-initials {
    border: 1px solid rgb(0 0 0 / .08);
}

/* --- Kártyák: tanárok és diákok ------------------------------------- */
.person-card {
    overflow: hidden;
    border-radius: var(--app-radius);
}

.person-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg,
                color-mix(in srgb, var(--color-primary) 12%, white) 0%,
                color-mix(in srgb, var(--color-primary) 4%, white) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.person-initials {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: .05em;
}

.person-card-sm .person-photo {
    aspect-ratio: 1 / 1;
}

.person-card-sm .person-initials {
    font-size: 1.5rem;
}

.person-meta {
    font-size: .82rem;
    color: #5c636a;
    line-height: 1.45;
    margin-top: .35rem;
}

.person-meta li + li {
    margin-top: .1rem;
}

.person-meta a {
    color: var(--color-primary);
}

/* --- Osztálykártya --------------------------------------------------- */
.class-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

.class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .1) !important;
}

.class-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

/* Tanári e-mail cím a kártya alján */
.person-email {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgb(0 0 0 / .06);
    font-size: .78rem;
    word-break: break-all;
}

.person-email a {
    color: var(--color-primary);
    text-decoration: none;
}

.person-email a:hover {
    text-decoration: underline;
}

/* --- Külső óraadók (tömör lista a lap alján) ------------------------ */
.external-staff {
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 20%, white);
}

.external-item {
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / .07);
    border-radius: .5rem;
    padding: .4rem .55rem;
    height: 100%;
}

.external-item .avatar-sm {
    width: 34px;
    height: 34px;
    font-size: .7rem;
    flex: 0 0 auto;
}

.external-meta {
    font-size: .72rem;
    color: #6c757d;
    line-height: 1.25;
}

.min-w-0 {
    min-width: 0;
}

/* Select2 igazítása a Bootstrap magassághoz */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
}

/* =====================================================================
   Naptár, galéria, közösségi ikonok (8. lépés)
   ===================================================================== */

/* --- Havi naptár rács ------------------------------------------------ */
.calendar {
    background-color: #fff;
    table-layout: fixed;
}

.calendar thead th {
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    font-size: .85rem;
    white-space: nowrap;
}

.calendar td {
    height: 6.5rem;
    vertical-align: top;
    padding: .3rem;
    font-size: .8rem;
}

.calendar td.is-other-month {
    background-color: #fafafa;
}

.calendar td.is-other-month .day-number {
    color: #b9bcc0;
}

.calendar td.is-today {
    background-color: color-mix(in srgb, var(--color-accent) 18%, white);
}

.calendar .day-number {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: .15rem;
}

.calendar td.is-today .day-number {
    color: var(--color-accent-dark);
}

.cal-event {
    display: block;
    background-color: color-mix(in srgb, var(--color-primary) 8%, white);
    border-left: 3px solid var(--color-primary);
    border-radius: .25rem;
    padding: .1rem .3rem;
    margin-bottom: .15rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-time {
    color: #6c757d;
    margin-right: .15rem;
}

.upcoming-list li {
    border-left: 3px solid var(--color-primary);
    padding: .15rem .6rem;
    margin-bottom: .75rem;
}

.upcoming-list li:last-child {
    margin-bottom: 0;
}

.color-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: -1px;
}

/* --- Galéria --------------------------------------------------------- */
.album-card {
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

.album-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .1) !important;
}

.album-cover {
    aspect-ratio: 3 / 2;
    background-color: var(--color-primary-light);
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}

.gallery-grid a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: .5rem;
    background-color: var(--color-primary-light);
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.gallery-grid a:hover img {
    transform: scale(1.05);
}

/* --- Lightbox -------------------------------------------------------- */
body.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / .9);
    padding: 2.5rem 3.5rem;
}

.lightbox.is-open {
    display: flex;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .25rem;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    padding: .5rem .75rem;
    opacity: .75;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav:hover {
    opacity: 1;
}

.lightbox-close { top: .5rem;   right: .75rem; font-size: 2.5rem; }
.lightbox-prev  { left: .25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: .25rem; top: 50%; transform: translateY(-50%); }

.lightbox-counter {
    position: absolute;
    bottom: .75rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgb(255 255 255 / .75);
    font-size: .85rem;
}

/* =====================================================================
   Hírek, dokumentumok, elérhetőségek
   ===================================================================== */

.news-card {
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .1) !important;
}

.news-cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-primary-light);
}

.news-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /*
     * A vágás felfelé tolva, nem középre.
     *
     * A kártya 16:9-es, a beküldött kép viszont gyakran ÁLLÓ portré
     * (600×900). Középre igazítva ilyenkor a fej teteje és az áll is
     * lemarad – csak egy sáv látszik a szem magasságában. Az arc a
     * portrékon a kép felső harmadában van, ezért a 25% hozza vissza.
     *
     * A fekvő képeken alig változtat: ott a 25% és az 50% közötti
     * eltérés néhány képpont, és a fejek amúgy is fölül vannak.
     */
    object-position: 50% 25%;
}

.news-hero {
    max-height: 24rem;
    object-fit: cover;
    object-position: 50% 25%;   /* ugyanaz az ok, mint a kártyánál */
}

/* A kezdőlap kiemelt (széles) hírkártyája: kép balra, szöveg jobbra */
@media (min-width: 768px) {
    .news-cover-wide {
        flex: 0 0 40%;
        max-width: 40%;
        aspect-ratio: auto;
    }
}

.news-meta {
    font-size: .78rem;
    color: #6c757d;
}

.news-body {
    font-size: 1.02rem;
    line-height: 1.65;
}

.news-body p {
    margin-bottom: 1rem;
}

.news-body a {
    color: var(--color-primary);
}

.admin-thumb {
    object-fit: cover;
    border-radius: .3rem;
}

/* --- Dokumentumlista -------------------------------------------------- */
.document-list .list-group-item {
    border-color: rgb(0 0 0 / .06);
}

.document-list a {
    color: var(--color-primary);
    text-decoration: none;
}

.document-list a:hover {
    text-decoration: underline;
}

.doc-year {
    min-width: 5.5rem;
    text-align: center;
    font-weight: 400;
    color: #6c757d;
}

/* --- Elérhetőségek ---------------------------------------------------- */
.contact-list dt {
    font-weight: 600;
    padding-bottom: .35rem;
}

.contact-list dd {
    padding-bottom: .35rem;
    margin-bottom: 0;
}

.contact-card {
    border: 1px solid rgb(0 0 0 / .07);
    border-radius: .5rem;
    padding: .75rem .9rem;
    background-color: #fff;
}

.contact-card a {
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-all;
}

/* --- Csoportosított elérhetőség (pl. Titkárság) ----------------------
   Egy dobozban több személy: a csoport neve a doboz élén, SÁRGA vonallal
   aláhúzva (Martin ezt kérte vissza), a tagokat vékony vonal választja el. */
.contact-group-title {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    padding-bottom: .5rem;
    margin-bottom: .55rem;
    border-bottom: 2px solid var(--color-accent);
}

.contact-card .contact-member + .contact-member {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid rgb(0 0 0 / .07);
}

.contact-member-name {
    display: block;
    font-weight: 600;
}

/* --- Közösségi ikonok a láblécben ------------------------------------ */
/* A lábléc sötétkék, ezért az ikonok áttetsző fehér körben állnak */
.social-links {
    justify-content: center;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background-color: rgb(255 255 255 / .1);
    transition: background-color .15s ease, color .15s ease;
}

.social-links a:hover {
    background-color: var(--color-accent);
    color: #1a1a1a;
}

/* ---------------------------------------------------------------------
   Gyorslinkek – külső rendszerek a „Gyors elérés" kártyában
   (KRÉTA, Kvízter…). Az oldalsávban vagyunk, tehát keskeny a hely:
   egy sor egy link, a badge fix méretű, hogy a különböző arányú
   faviconok mellett is egyenes maradjon a bal él.
   --------------------------------------------------------------------- */
.quick-links {
    display: grid;
    gap: .4rem;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .55rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

.quick-link:hover,
.quick-link:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.quick-link-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: .35rem;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 700;
    font-size: .85rem;
    overflow: hidden;
}

.quick-link-badge img {
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
}

.quick-link-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-link-badge svg {
    width: 16px;
    height: 16px;
}

/* A két csoportot (külső felületek / saját oldalak) elválasztó vonal
   halványabb, mint az alapértelmezett – nem szakaszhatár, csak egy
   lélegzetvétel a listában. */
.quick-links-sep {
    margin: .75rem 0;
    border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    opacity: 1;
}

.quick-link-arrow {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.quick-link:hover .quick-link-arrow {
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Statikus oldalak (bemutatkozás, köszöntő, iskolatörténet)

   Az importált tartalom a régi honlap saját formázását elveszíti (a
   <style> blokkokat szándékosan kidobjuk), ezért itt adunk neki olvasható
   tipográfiát: tág sorköz, mértéktartó sorhossz, kiemelt idézetek.
   --------------------------------------------------------------------- */
.static-page {
    line-height: 1.75;
}

.static-page h1,
.static-page h2,
.static-page h3,
.static-page h4 {
    margin: 2rem 0 .75rem;
    font-weight: 600;
    color: var(--color-primary);
}

.static-page h1 { font-size: 1.5rem; }
.static-page h2 { font-size: 1.3rem; }
.static-page h3 { font-size: 1.15rem; }
.static-page h4 { font-size: 1.02rem; }

.static-page > :first-child {
    margin-top: 0;
}

.static-page p {
    margin-bottom: 1.1rem;
}

.static-page ul,
.static-page ol {
    margin-bottom: 1.1rem;
    padding-left: 1.4rem;
}

.static-page li {
    margin-bottom: .35rem;
}

.static-page blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--color-accent);
    font-style: italic;
    color: var(--bs-secondary-color);
}

.static-page img {
    max-width: 100%;
    height: auto;
    margin: 1.25rem 0;
    border-radius: .4rem;
}

.static-page table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}

.static-page th,
.static-page td {
    padding: .5rem .65rem;
    border: 1px solid var(--bs-border-color);
    vertical-align: top;
}

.static-page th {
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    text-align: left;
}



/* A plakátok szövegéből átvett tudnivalók a felnőttoktatás blokkjában */
.adult-facts {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    background-color: var(--color-primary-light);
    border-radius: .4rem;
}

.adult-facts-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.adult-facts ul {
    padding-left: 1.15rem;
    font-size: .9rem;
}

.adult-facts li + li { margin-top: .3rem; }
.adult-facts li::marker { color: var(--color-accent-dark); }

/* ---------------------------------------------------------------------
   A hírszerkesztő formázó osztályai

   Szándékosan RÖGZÍTETT készlet, nem szabad színválasztó és nem tetszőleges
   betűméret: így a hírek az iskola arculatán belül maradnak, és a szűrőnek
   sem kell inline stílust átengednie (az elronthatná az oldal elrendezését).

   Ugyanez a néhány osztály érvényes a szerkesztőben és a publikus oldalon,
   ezért az előnézet pontosan azt mutatja, ami megjelenik.
   --------------------------------------------------------------------- */

/* Színek – az iskola palettájához igazítva */
.szin-kek    { color: var(--color-primary); }
.szin-arany  { color: var(--color-accent-dark); }
.szin-piros  { color: #c0392b; }
.szin-zold   { color: #1e8449; }
.szin-szurke { color: var(--app-muted); }

/* Kiemelés – háttérszínnel */
.kiemel-arany { background-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.kiemel-kek   { background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); }

/* Betűtípusok – három, egymástól jól megkülönböztethető család */
.betu-talpas  { font-family: Georgia, "Times New Roman", serif; }
.betu-irogep  { font-family: ui-monospace, "Courier New", monospace; }

/* Betűméretek – az alapmérethez viszonyítva */
.meret-kicsi   { font-size: .85em; }
.meret-nagy    { font-size: 1.2em; }
.meret-nagyobb { font-size: 1.45em; }

/* --- Kép igazítása és mérete a hírekben ----------------------------- */
.kep-kicsi   { max-width: 220px; }
.kep-kozepes { max-width: 420px; }
.kep-teljes  { width: 100%; }

.kep-balra {
    float: left;
    margin: .25rem 1.25rem .75rem 0;
}

.kep-jobbra {
    float: right;
    margin: .25rem 0 .75rem 1.25rem;
}

.kep-kozepre {
    display: block;
    margin-inline: auto;
}

/* Szűk kijelzőn a körbefuttatás olvashatatlan tördelést adna */
@media (max-width: 575.98px) {
    .kep-balra,
    .kep-jobbra {
        float: none;
        display: block;
        margin-inline: auto;
    }
}

/* --- Beágyazott videó ----------------------------------------------- */
/* Az arány megtartásával, a szélességhez igazodva */
.video {
    margin: 1.5rem 0;
}

.video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: .5rem;
}

/* ---------------------------------------------------------------------
   A `hidden` attribútum verje a megjelenítési utility osztályokat.

   A Bootstrapben a [hidden]{display:none!important} a reboot ELEJÉN van
   (~10 000. karakter), a .d-flex{display:flex!important} viszont a fájl
   VÉGÉN (~164 000.). A kettő specificitása azonos (0,1,0), tehát a későbbi
   nyer: a d-flex felülírta a hidden-t.

   Ezért a hírszerkesztő „Van egy el nem mentett változat" sávja
   (class="alert ... d-flex" + hidden) MINDIG látszott, és az „Eldobom"
   gomb – ami `bar.hidden = true`-t állít – nem tüntette el.

   Ez a szabály a Bootstrap után töltődik, tehát ő nyer. Általános
   javítás: minden hidden-es elemre érvényes, nem csak arra az egy sávra.
   --------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}

/* =====================================================================
   Publikus tanári lista (kijelentkezve)
   ---------------------------------------------------------------------
   Kép nélküli, de nem csupasz felsorolás: kártyába foglalt, hajszálvonalas
   sorok. Egy sor három részből áll – név, titulus, e-mail –, és az e-mail
   a hasáb jobb széléhez igazodik, így a szem táblázatként olvassa.
   Széles kijelzőn két hasáb, mert 60 név egy hasábban hosszú kanyar.
   ===================================================================== */

.staff-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Két hasáb csak 1400 pixel FELETT.
 *
 * Lemérve: a leghosszabb sor (hosszú név + titulus + e-mail) 609 pixelt kér.
 * 1280 pixeles kijelzőn a hasáb 520 pixel lenne, és 109 sorból 10 kettőbe
 * tördelődött – rácsban ez a szomszéd sort is megnyújtja, tehát felborítja a
 * lista ritmusát. 1400 felett a hasáb ~640 pixel, ott minden sor egy sor.
 */
@media (min-width: 1400px) {
    .staff-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.75rem;
    }
}

.staff-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .65rem;
    padding: .62rem .5rem .62rem .75rem;
    border-bottom: 1px solid var(--app-line-soft);

    /* A bal szélen ülő jel csak rámutatáskor jelenik meg – nyugodt lista,
       de a sor mégis reagál. */
    border-left: 2px solid transparent;
    transition: background-color .12s ease, border-left-color .12s ease;
}

.staff-row:hover {
    background-color: #f8fafd;
    border-left-color: var(--color-accent);
}

.staff-name {
    font-weight: 600;
    color: var(--app-ink);
}

.staff-title {
    font-size: .75rem;
    line-height: 1.5;
    padding: .05rem .55rem;
    border-radius: 999px;
    background-color: var(--color-accent-light);
    color: #5b4300;
    white-space: nowrap;
}

.staff-mail {
    margin-left: auto;
    font-size: .78rem;
    color: var(--app-muted);
    text-decoration: none;
    white-space: nowrap;
}

.staff-mail:hover,
.staff-mail:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Keskeny kijelzőn a név külön sorba kerül, alá a titulus és az e-mail */
@media (max-width: 575.98px) {
    .staff-name { flex: 0 0 100%; }
    .staff-mail { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   Helyettesítés-admin: a művelethez tartozó mező dobozai

   A Select2 induláskor méri a szélességet, a mezők viszont REJTETT
   dobozban indulnak (csak a választott művelethez tartozó látszik).
   Rejtve a mért szélesség nulla, és megjelenéskor összecsuklana –
   ezért a szélességet CSS-ből rögzítjük, nem a Select2-re bízzuk.
   --------------------------------------------------------------------- */
.sub-field .select2-container {
    width: 100% !important;
}

/* A művelet-gombsor ne törjön szét fölöslegesen keskeny kijelzőn sem */
.sub-actions .btn {
    padding-inline: .55rem;
}

/* --- Keresősáv a fejléc alatt ----------------------------------------
   A nyitást a `hidden` ATTRIBÚTUM kapcsolja (search.js), nem osztály –
   ezért itt SEMMILYEN display szabály nincs rá. Így ha a stíluslap nem
   töltődne be, a sáv akkor is rejtve marad zárt állapotban.

   A sáv a menüsávon KÍVÜL, normál folyamban ül: kinyitva lejjebb tolja az
   oldalt, de nem takar el és nem szorít ki semmit. */
.app-searchbar {
    background-color: #fff;
    border-bottom: 1px solid var(--app-line);
    box-shadow: 0 .35rem .75rem rgb(11 34 71 / .06);
}

.app-searchbar-results:empty {
    display: none;
}

.app-searchbar-results {
    max-height: 60vh;
    overflow-y: auto;
}

/* A nagyító ikon a sáv jobb szélén, a hamburger mellett.
   A felirat `visually-hidden` – az ikon mellé kiírva csak zsúfolna,
   a képernyőolvasó viszont megkapja. */
.app-search-open {
    display: inline-flex;
    align-items: center;
    padding: .5rem .65rem;
    border-bottom: 0;          /* itt nem menüpont, nem kell az arany aláhúzás */
}

.app-search-open:hover,
.app-search-open:focus {
    border-bottom: 0;
    opacity: .85;
}

/* A keresősáv űrlapja TÖRIK: telefonon a mező kerül az első sorba,
   a gombok alá. Enélkül a nagy mező, az „Összes találat” és a bezáró
   egy sorba préselődött, és olvashatatlanul összement. */
.app-searchbar-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-searchbar-form .form-control {
    flex: 1 1 14rem;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .app-searchbar-form .form-control {
        flex-basis: 100%;
    }

    /* Telefonon a gomb a mező alatt, teljes szélességben */
    .app-searchbar-form .btn-primary-app {
        flex: 1 1 auto;
    }
}

/* --- Szerkesztői elemek a statikus oldalakon --------------------------
   Csak TIPOGRÁFIA: betűméret, szín, szegély, térköz. Szándékosan nincs
   benne pozicionálás vagy elrendezés – ezek nem tudnak elcsúsztatni
   semmit, akkor sem, ha a stíluslap részben töltődne be. */

/* Kiemelt mondat: a bekezdésfolyamból kiemelt, keretes gondolat */
.static-page .kiemelt-mondat {
    margin: 2rem 0;
    padding: 1.1rem 1.35rem;
    background-color: #f2f6fc;                                        /* tartalék */
    background-color: color-mix(in srgb, var(--color-primary) 7%, transparent);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 .35rem .35rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Aláírás-blokk a levél végén */
.static-page .alairas {
    margin-top: 2.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--app-line);
    text-align: right;
    line-height: 1.5;
}

.static-page .alairas strong {
    display: block;
    font-size: 1.05rem;
    color: var(--color-primary);
}

/* --- Képméret: fajsúlyosabb szabályok --------------------------------
   HIBA volt: a `.kep-kicsi` (fajsúly 0,1,0) alulmaradt a
   `.static-page img { max-width: 100% }` szabállyal (0,1,1) szemben, ezért
   a kis méretre állított kép is teljes szélességben jelent meg – egy álló
   portrénál ez 600×900 képpontot jelentett a szövegoszlopban.

   Az `img.kep-*` alak fajsúlya azonos (0,1,1), és mivel később áll a
   fájlban, ez nyer. Ugyanez a helyzet a körbefuttatás margóival. */
img.kep-kicsi   { max-width: 220px; }
img.kep-kozepes { max-width: 420px; }
img.kep-teljes  { max-width: 100%; width: 100%; }

img.kep-balra  { margin: .25rem 1.25rem .75rem 0; }
img.kep-jobbra { margin: .25rem 0 .75rem 1.25rem; }

@media (max-width: 575.98px) {
    img.kep-balra,
    img.kep-jobbra {
        float: none;
        display: block;
        margin: 0 auto 1rem;
    }
}

/* Az aláírásban a név blokk-szintű, tehát a sortörést ő adja.
   A beosztás közvetlenül alatta üljön, ne egy üres sorral lejjebb. */
.static-page .alairas strong {
    margin-bottom: .1rem;
    line-height: 1.3;
}

/* --- Bővített készlet (2026-08-22) -----------------------------------
   FAJSÚLY: a `.static-page p` és a `.news-body p` fajsúlya 0,1,1. Az
   önmagában álló `.doboz-info` (0,1,0) ALULMARADNA velük szemben – pont
   ez volt a képméret hibája. Ezért `p.doboz-info` alakot használunk
   (0,1,1), és a fájl végén állva ez nyer. */

/* Kiemelés szövegen belül – ezek span-ek, nincs velük ütköző szabály */
.kiemel-zold  { background-color: color-mix(in srgb, #1E8449 22%, transparent); }
.kiemel-piros { background-color: color-mix(in srgb, #C0392B 18%, transparent); }

/* Jegyzetdobozok: az egész bekezdésre hatnak */
p.doboz-info,
p.doboz-figyelem {
    margin: 1.5rem 0;
    padding: 1rem 1.15rem;
    border-radius: .4rem;
    border-left: 4px solid;
}

p.doboz-info {
    background-color: #eef4fc;                                       /* tartalék */
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-left-color: var(--color-primary);
}

p.doboz-figyelem {
    background-color: #fdf5e0;                                       /* tartalék */
    background-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-left-color: var(--color-accent-dark);
}

/* A hírek törzsében ugyanígy nézzenek ki, mint a statikus oldalakon */
.news-body .kiemelt-mondat {
    margin: 2rem 0;
    padding: 1.1rem 1.35rem;
    background-color: #f2f6fc;
    background-color: color-mix(in srgb, var(--color-primary) 7%, transparent);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 .35rem .35rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.news-body .alairas {
    margin-top: 2.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--app-line);
    text-align: right;
    line-height: 1.5;
}

.news-body .alairas strong {
    display: block;
    font-size: 1.05rem;
    color: var(--color-primary);
}

/* --- Szerkesztő: speciális karakter választó -------------------------- */
.rte-chars {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    max-width: 22rem;
    padding: .4rem;
    margin: .3rem 0;
    background: #fff;
    border: 1px solid var(--app-line);
    border-radius: .35rem;
    box-shadow: 0 .35rem .9rem rgb(0 0 0 / .12);
}

.rte-chars button {
    min-width: 2rem;
    padding: .25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    font-size: 1rem;
}

.rte-chars button:hover {
    border-color: var(--app-line);
    background: var(--app-line-soft);
}

/* A bekapcsolt „formázatlan beillesztés" gomb jelzése */
.rte-toolbar button.is-on {
    background: var(--color-primary);
    color: #fff;
}

/* A futó változat jelölése a láblécben – csak adminoknak látszik */
.footer-version {
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* --- Óra áthúzása a szerkesztő rácsában ------------------------------- */
.timetable-editor .editor-lesson[draggable="true"] {
    cursor: grab;
}

.timetable-editor .editor-lesson.is-dragging {
    opacity: .45;
    cursor: grabbing;
}

.timetable-editor td.is-drop-target {
    background-color: #e7f0fb;
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}


/* --- Belépés Google-fiókkal ------------------------------------------
   A Google arculati útmutatója fehér gombot, sötét szöveget és a saját,
   színes „G” jelet kéri – ezért nem az oldal kék gombját használjuk.
   A jel inline SVG, hogy ne kelljen külső fájl (a CSP amúgy sem engedné). */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background-color: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    font-weight: 500;
    padding: .5rem .9rem;
}

.btn-google:hover,
.btn-google:focus-visible {
    background-color: #f8f9fa;
    border-color: #d2d5d9;
    color: #1f1f1f;
}

.btn-google svg { flex-shrink: 0; }

/* „vagy” felirat vízszintes vonallal a két belépési mód között */
.login-elvalaszto {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--app-muted, #6c757d);
    font-size: .85rem;
}

.login-elvalaszto::before,
.login-elvalaszto::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgb(0 0 0 / .1);
}

/* --- Belépés: lenyitható jelszavas blokk -----------------------------
   A Google élesedése óta a többség azt használja, ezért a jelszavas űrlap
   `<details>`-be került – így a panel rövid marad, de egy kattintásra ott
   van a másik út. JavaScript nem kell hozzá. */
.login-jelszo > summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: .35rem 0;
    list-style: none;
}

.login-jelszo > summary::-webkit-details-marker { display: none; }

.login-jelszo > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: .4rem;
    transition: transform .15s ease;
}

.login-jelszo[open] > summary::before { transform: rotate(90deg); }

.login-jelszo > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: .2rem;
}

@media (prefers-reduced-motion: reduce) {
    .login-jelszo > summary::before { transition: none; }
}