/* =====================================================================
   Alap (téma-független) beállítások
   ===================================================================== */
body { min-height: 100vh; }
.font-serif { font-family: Georgia, "Times New Roman", serif; }
h1, h2, h3, .brand-font { font-family: Georgia, "Times New Roman", serif; }
.navbar-brand { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .01em; }

:root, [data-bs-theme] {
    --bs-border-radius: 0.7rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.shadow-soft { box-shadow: 0 2px 14px rgba(15, 23, 42, .08); }
[data-bs-theme="dark"] .shadow-soft { box-shadow: 0 2px 14px rgba(0, 0, 0, .4); }

.icon-circle {
    width: 3rem; height: 3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
}

/* =====================================================================
   Színséma-változók: lásd assets/themes/*.css — minden téma egy önálló,
   feltölthető/cserélhető fájl, hogy könnyen bővíthető/lecserélhető
   legyen. Ez a fájl csak a TÉMA-FÜGGETLEN komponens-stílusokat
   tartalmazza, amik a témák által definiált CSS-változókra hivatkoznak.
   ===================================================================== */

/* =====================================================================
   Bootstrap komponensek "bekötése" a téma-változókhoz.

   FONTOS, a tényleges bootstrap.min.css forrásában ellenőrzött tény: sok
   Bootstrap-komponens (gombok, nav-pills, form-check, linkek) a színét
   NEM a --bs-primary/--bs-warning gyökér-változóból származtatja, hanem
   build-time SASS-szal előre kiszámolt, FIX hexa értéket ír a saját
   komponens-szintű CSS-változójába (pl. .btn-primary{--bs-btn-bg:#0d6efd}
   — szó szerint ez van a kódban, akkor is, ha a --bs-primary türkiz/navy).
   Ezért a --bs-primary felülírása ÖNMAGÁBAN NEM elég — ezeket a
   komponens-szintű változókat is explicit módon a témához kell kötni.
   ===================================================================== */

/* --- Linkek (a Bootstrap ezt is fix RGB hármasként tárolja) --- */
:root, [data-bs-theme] {
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
}

/* --- .btn-primary: alap / hover / active / disabled / fókusz-gyűrű --- */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--btn-primary-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-hover-color: var(--btn-primary-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
    --bs-btn-active-color: var(--btn-primary-text);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--btn-primary-text);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* --- .btn-outline-primary: idle / hover(=kitöltés) / active / fókusz ---
   Ez érinti pl. a téma-választó gombokat és az ügyintéző-hozzárendelő
   pill-eket is, amik btn-check + btn-outline-primary kombinációval
   működnek. */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--btn-primary-text);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--btn-primary-text);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: var(--btn-primary-text);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* --- .btn-warning: csak akkor tér el Bootstrap alapszínétől, ha egy
   téma (pl. navy) saját --bs-warning-t definiál — a gombnak ezt kell
   követnie, nem a Bootstrap fix sárga árnyalatait. --- */
.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 70%, black);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.card { background-color: var(--bs-card-bg); }

/* --- nav-pills aktív fül (pl. admin foglalások szűrő) --- */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-nav-pills-link-active-color: var(--btn-primary-text);
}
/* Az INAKTÍV nav-pills fülek szövege alapból a Bootstrap linkszínét (kék)
   örökölné, ami semmilyen témában nem illeszkedik — helyette a téma
   semleges, másodlagos szövegszínét használjuk, ugyanúgy, mint bármelyik
   más másodlagos szöveg a felületen. */
.nav-pills .nav-link:not(.active) {
    color: var(--bs-secondary-color);
}
.nav-pills .nav-link:not(.active):hover {
    color: var(--bs-emphasis-color);
}

/* --- text-bg-primary (pl. időtartam-badge a kezdőlapon) — a háttere már
   var()-ból jön, csak a fix fehér szövegszínt kellett javítani. --- */
.text-bg-primary { color: var(--btn-primary-text) !important; }

/* --- Időtartam-badge a kezdőlapon — külön, témánként állítható színnel
   (nem feltétlenül ugyanaz, mint az általános primary gomb-szín). --- */
.badge-duration {
    background-color: var(--badge-duration-bg) !important;
    color: var(--badge-duration-text) !important;
}

/* --- nav-pills aktív fülön lévő számláló badge — külön, témánként
   állítható színnel (a Bootstrap ezt sem köti a --bs-primary-hez). --- */
.nav-pills .nav-link.active .nav-pill-count-badge {
    background-color: var(--nav-pill-badge-bg) !important;
    color: var(--nav-pill-badge-text) !important;
}

/* --- Breadcrumb linkek színe — külön állítható a témában. --- */
.breadcrumb-item a { color: var(--breadcrumb-link-color); }

/* --- list-group aktív elem (pl. email-sablonok bal oldali listája) —
   a Bootstrap ezt is fix kékkel tárolja alapból. --- */
.list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-color: var(--btn-primary-text);
    --bs-list-group-active-border-color: var(--bs-primary);
}

/* --- form-check (checkbox/switch): checked + fókusz állapot, a Bootstrap
   ezeket is fix kék hexával tárolja alapból. Az --form-check-checked-bg
   minden téma-fájlban külön állítható (alapból a --bs-primary-t követi). --- */
.form-check-input:checked {
    background-color: var(--form-check-checked-bg);
    border-color: var(--form-check-checked-bg);
}
.form-check-input:focus {
    border-color: var(--form-check-checked-bg);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--form-check-checked-bg) 25%, transparent);
}

/* --- Dropdown menü aktív eleme (pl. admin "Kezelés"/"Fiók" menü) — a
   Bootstrap ezt is fix kékkel tárolja alapból. --- */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--dropdown-active-bg);
    --bs-dropdown-link-active-color: var(--dropdown-active-text);
}

/* =====================================================================
   Natív dátum/idő mezők (type="date"/"time") — a mező kerete/háttere
   már a .form-control szabályokból örökli a témát. Az `accent-color`
   modern böngészőkben (Chrome/Edge) magát a naptár/óra IKONT is a téma
   színéhez igazítja; ahol ez nem támogatott (pl. régebbi WebKit), ott a
   ::-webkit-calendar-picker-indicator opacitás/szűrő ad hasonló hatást
   — mindkettő témánként állítható (--picker-icon-filter). Magát a
   felugró naptár/óra-választó ablakot a böngésző/OS rajzolja ki, ez
   CSS-ből nem befolyásolható — ez a natív input választásának tudatos
   velejárója (lásd README, 9. pont).
   ===================================================================== */
input[type="date"], input[type="time"] {
    accent-color: var(--bs-primary);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .65;
    cursor: pointer;
    border-radius: 4px;
    padding: 3px;
    filter: var(--picker-icon-filter);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: var(--bs-primary-bg-subtle);
}

/* =====================================================================
   Hibaoldal-illusztrációk (assets/images/errors/*.svg) — akár 4 különböző
   színt is használhatnak, amik témánként és light/dark módonként külön
   állíthatók (lásd assets/themes/*.css --illustration-color-1..4 és az
   assets/images/errors/README.md-t a pontos SVG-konvencióért).
   ===================================================================== */
.error-illustration { color: var(--illustration-color-1); }
.error-illustration .ec-1, .error-illustration .error-color-1 { fill: var(--illustration-color-1); stroke: var(--illustration-color-1); }
.error-illustration .ec-2, .error-illustration .error-color-2 { fill: var(--illustration-color-2); stroke: var(--illustration-color-2); }
.error-illustration .ec-3, .error-illustration .error-color-3 { fill: var(--illustration-color-3); stroke: var(--illustration-color-3); }
.error-illustration .ec-4, .error-illustration .error-color-4 { fill: var(--illustration-color-4); stroke: var(--illustration-color-4); }

/* =====================================================================
   Email-sablon placeholder "chip" gombok — a korábbi <button><code>...
   szerkezetnél a code elem eltérő betű-metrikái (monospace font,
   más sor-magasság/baseline, mint a gomb saját betűtípusa) okozták,
   hogy semmilyen margin/padding állítás nem centrálta rendesen a
   szöveget — a code-ot elhagyva, közvetlenül a gombon beállított
   monospace fonttal és flexbox-centrálással ez megoldódik.
   Színe témánként állítható (--placeholder-chip-*). ===================================================================== */
.placeholder-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0 .55rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--placeholder-chip-bg);
    color: var(--placeholder-chip-text);
    border: 1px solid var(--placeholder-chip-border);
    border-radius: 999px;
    cursor: pointer;
    transition: filter .1s ease;
}
.placeholder-chip:hover { filter: brightness(0.95); }
.placeholder-chip:active { filter: brightness(0.9); }
[data-bs-theme="dark"] .placeholder-chip:hover { filter: brightness(1.15); }
[data-bs-theme="dark"] .placeholder-chip:active { filter: brightness(1.25); }

/* =====================================================================
   Form-mezők — kicsit kiemelve a kártya hátteréből, hogy ne olvadjanak
   bele, és jól látható, téma-színű fókusz-állapotuk legyen.
   ===================================================================== */
.form-control, .form-select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .7; }
.form-control:disabled, .form-select:disabled {
    background-color: var(--bs-tertiary-bg);
    opacity: .6;
}
.form-label { font-weight: 600; font-size: .92rem; }

/* =====================================================================
   Navbar / márka
   ===================================================================== */
/* A brand szöveg zsugorodjon/csonkuljon, ne törje új sorba a mellette lévő
   gombokat — FONTOS: a navbar konténeren magán NEM szabad flex-wrap:nowrap-ot
   kényszeríteni, mert az megakadályozná a .navbar-collapse mobil nézetben
   szükséges, saját sorba wrap-elését (megnyitáskor a menü emiatt a fejlécbe
   torlódna). Csak a brand elem zsugorodását engedjük meg. */
.navbar-brand.text-truncate { min-width: 0; flex-shrink: 1; }

.theme-toggle-btn {
    border: none; background: transparent; color: rgba(255,255,255,.85); font-size: 1.1rem; flex-shrink: 0;
    /* Legalább 44x44px kattintható/érinthető terület — korábban a gomb
       ténylegesen csak kb. 30x28px volt, ami a mobil érintőképernyős
       ajánlott minimum (44-48px) alatt van. Az ikon mérete (font-size)
       nem nő, csak a köré eső, kattintható párnázás. */
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { color: #fff; }

/* =====================================================================
   Kártya-választó lista (szolgáltatás / ügyintéző)
   ===================================================================== */
.pick-card { transition: transform .12s ease, box-shadow .12s ease; }
.pick-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.2rem rgba(15,23,42,.14) !important; }

/* =====================================================================
   Heti naptár
   ===================================================================== */
.week-nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.week-nav-bar .week-nav-prev { justify-self: start; }
.week-nav-bar .week-nav-label { justify-self: center; text-align: center; white-space: nowrap; }
.week-nav-bar .week-nav-next { justify-self: end; }

.week-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scroll-snap-type: x proximity;
}
.week-strip .day-pane { scroll-snap-align: start; }

@media (min-width: 768px) {
    .week-strip { overflow-x: visible; }
    .week-strip .day-pane { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 767.98px) {
    .week-strip .day-pane { flex: 0 0 82%; }
}

.day-pane .card-header {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 700;
    text-align: center;
    font-size: .85rem;
    padding: .5rem .25rem;
}
.day-pane .card-header .day-date {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

.slot-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding: .6rem;
}
.slot-scroll::-webkit-scrollbar { width: 6px; }
.slot-scroll::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }

.slot-btn { font-size: .82rem; line-height: 1.2; padding-top: .4rem; padding-bottom: .4rem; }
.slot-btn small { display: block; font-weight: 400; font-size: .68rem; opacity: .85; }

.slot-disabled.slot-booked,
.slot-disabled.slot-reserved,
.slot-disabled.slot-too_short {
    background-color: var(--slot-booked-bg) !important;
    color: var(--slot-booked-text) !important;
    border-color: var(--bs-border-color) !important;
}

.no-slots-msg {
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    padding: 2.5rem 0;
}
.no-slots-msg-blocked {
    color: var(--bs-warning-emphasis, #997404);
    font-weight: 600;
    padding: 2rem .5rem;
    cursor: help;
}
.no-slots-msg-blocked i {
    color: var(--bs-warning, #ffc107);
}

.legend-swatch {
    width: 2rem;
    height: 1.35rem;
    padding: 0 !important;
    pointer-events: none;
}

/* =====================================================================
   Admin
   ===================================================================== */
.stat-icon { width: 3.2rem; height: 3.2rem; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.admin-nav .nav-link { font-weight: 600; color: var(--bs-secondary-color); }
.admin-nav .nav-link.active { color: var(--bs-primary); }

/* Táblázat-fejléc, ami TÉNYLEGESEN követi a sötét/világos módot
   (a Bootstrap .table-light egy fix, nem téma-érzékeny variáns) */
.table-head-subtle th {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* =====================================================================
   Telepítő varázsló — a lépés-jelző szövege és a köre SZÁNDÉKOSAN eltérő
   színt használ (nem ugyanaz a szín, mint korábban), hogy az aktív lépés
   jobban elkülönüljön, és fixen sötét módban (lásd install.php
   data-bs-theme="dark") is jól látható/kontrasztos maradjon.
   ===================================================================== */
.install-step-indicator .step {
    display: flex; align-items: center; gap: .5rem;
    color: var(--bs-secondary-color); font-size: .85rem; font-weight: 600;
}
.install-step-indicator .step.active {
    color: var(--bs-emphasis-color, #fff);
}
.install-step-indicator .step-num {
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--bs-tertiary-bg); display:flex; align-items:center; justify-content:center;
    font-size: .8rem; color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}
.install-step-indicator .step.active .step-num {
    background: var(--bs-primary);
    color: var(--btn-primary-text);
    border-color: var(--bs-primary);
}

/* =====================================================================
   Toast értesítések — automatikusan eltűnő, lecsengő csíkkal
   ===================================================================== */
.toast-container { z-index: 1080; }
.app-toast { min-width: 300px; max-width: 380px; overflow: hidden; }
/* A toast alapértelmezett Bootstrap bezáró-gombja (.btn-close) nagyon
   halvány szürke — a felhasználó szerint "beleolvad" a toast hátterébe.
   Nagyobb alap-átlátszatlanságot és egy jól látható, kerek hover-hátteret
   adunk neki, hogy egyértelműen kirajzolódjon, felfedezhető/kattintható
   elemnek tűnjön. */
.app-toast .btn-close {
    opacity: 0.65;
    border-radius: 50%;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.app-toast .btn-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .app-toast .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.toast-progress-track { height: 3px; background: rgba(0, 0, 0, .08); }
[data-bs-theme="dark"] .toast-progress-track { background: rgba(255, 255, 255, .12); }
.toast-progress-bar { height: 100%; width: 100%; transform-origin: left; transition: transform linear; }

/* =====================================================================
   Egyéb téma-finomítások
   ===================================================================== */
[data-bs-theme="dark"] .navbar.bg-primary { background-color: var(--navbar-bg-dark) !important; }
/* A login.php / forgot_password.php / reset_password.php oldalak
   TELJES oldal-hátterükhöz (nem csak a navbar-sávhoz) is a
   .bg-primary osztályt használják — enélkül a felülbírálás nélkül a
   navbar sötét módban helyesen sötétebbre váltott volna, DE a mögötte
   lévő oldal-háttér változatlanul a fényes, világos-módbeli türkiz
   maradt volna, ami zavaró, "kétszínű" hatást keltett volna. */
[data-bs-theme="dark"] body.bg-primary { background-color: var(--navbar-bg-dark) !important; }

/* A navbar szövegének/ikonjainak színe téma-függő — türkiz világos módban
   a navbar (és a login oldal bg-primary háttere) fényes marad, ott sötét
   szöveg kell, egyébként fehér. */
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link {
    color: var(--navbar-text-color) !important;
}
.bg-primary .theme-toggle-icon { color: var(--navbar-text-color) !important; }
.on-primary-text, .on-primary-text * { color: var(--navbar-text-color) !important; }
.bg-primary .theme-toggle-btn { color: var(--navbar-text-color); }
.bg-primary .theme-toggle-btn:hover { color: var(--navbar-text-color); opacity: .8; }
.navbar.bg-primary .navbar-toggler-icon { filter: var(--navbar-toggler-filter); }
.navbar.bg-primary .navbar-toggler { border-color: color-mix(in srgb, var(--navbar-text-color) 25%, transparent); }
.navbar.bg-primary .btn-outline-light {
    color: var(--navbar-text-color);
    border-color: color-mix(in srgb, var(--navbar-text-color) 50%, transparent);
}
.navbar.bg-primary .btn-outline-light:hover {
    background-color: var(--navbar-text-color);
    /* FONTOS: NEM --navbar-bg-dark-ot használunk itt — az világos módban
       szándékosan nincs használatban (lásd a téma-fájlok megjegyzését),
       és véletlenül majdnem ugyanolyan sötét, mint a --navbar-text-color,
       ami emiatt szinte eltüntette a hover-szöveget. A --bs-body-bg
       mindig garantáltan ellentétes fényességű, mint a --navbar-text-color
       (hiszen az egyik a fő olvasható felület, a másik pedig kifejezetten
       a navbar-ral való kontrasztra lett választva), így mindkét
       módban biztosan jól olvasható marad.
    */
    color: var(--bs-body-bg);
    border-color: var(--navbar-text-color);
}
/* FONTOS, korábban hiányzó szabály: a Bootstrap SAJÁT alapértelmezett
   :focus színe (egy fixen sötét szín) érvénybe lépett, amint a gomb
   fókuszt kapott (pl. dropdown megnyitása/bezárása után) — DE eltérően
   a fenti :hover-től, a HÁTTÉR ilyenkor átlátszó maradt, így a sötét
   szöveg egyenesen a türkiz (vagy más színű) navbar-háttéren jelent meg,
   sok esetben rossz kontraszttal, "egybeolvadva" azzal — pontosan ez
   okozta a jelentett hibát. A :focus és a Bootstrap dropdown-jelölte
   .show állapot (amíg a menü nyitva van) most UGYANAZT az invertált,
   biztonságos kontrasztú stílust kapja, mint a :hover. */
.navbar.bg-primary .btn-outline-light:focus,
.navbar.bg-primary .btn-outline-light.show {
    background-color: var(--navbar-text-color);
    color: var(--bs-body-bg);
    border-color: var(--navbar-text-color);
    box-shadow: none;
}

/* =====================================================================
   Quill rich-text szerkesztő — a beépített (fix fehér/fekete) színezés
   helyett a rendszer aktuális témáját követi, világos és sötét módban is.
   ===================================================================== */
#legal-editor, .rich-text-editor { min-height: 320px; }
#email-body-editor { min-height: 220px; }
.ql-toolbar.ql-snow {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.ql-container.ql-snow {
    border-color: var(--bs-border-color) !important;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    font-size: 1rem;
}
.ql-editor {
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
    min-height: inherit;
}
/* Az EMAIL-SABLON szerkesztő tartalmi területe MOST MÁR követi az
   admin aktuális sötét/világos UI-témáját (a felhasználó kifejezett
   kérésére) — korábban itt egy fix, mindig világos háttér volt, hogy a
   WYSIWYG-nézet pontosabban tükrözze a végleges email kinézetét, de ez
   a döntés most felül van írva: a szerkesztési élmény kényelme
   (konzisztens sötét/világos mód) élvez elsőbbséget. */
.dropdown-item-like:hover {
    background-color: var(--bs-tertiary-bg);
}
/* Az admin/appointments.php státusz-fülei (nav-pills) — vízszintesen
   görgethető, DE a natív böngésző-scrollbar vizuálisan rejtve van
   (helyette a görgetés maga, illetve az assets/app.js
   initNavPillsDragScroll()-ja általi húzás jelzi a további tartalmat).
   A fülek NEM zsugorodhatnak össze (flex-shrink:0), különben a
   szövegük törne/csonkulna görgetés helyett. */
/* Az admin/appointments.php státusz-fülei (nav-pills) — SOSEM törnek
   sort és SOSEM válnak vízszintesen görgethetővé (a korábbi húzásos/
   nyilas megoldás nem bizonyult ideálisnak) — helyette a JS
   (initNavPillsAdaptive) FOKOZATOSAN csökkenti az információ-
   sűrűséget, amíg minden fül elfér egy sorban: először a szám-
   jelvények tűnnek el, ha ez sem elég, a szöveges címkék is
   (csak ikon + tooltip marad). Csak akkor törik sort/lesz reszponzív a
   mobil nézet, amikor MÁR ez sem elég (azaz a d-md-flex breakpoint
   alatt, ahol amúgy is egy teljesen más, dropdown-alapú vezérlő látszik). */
.nav-pills-adaptive.nav-pills-compact-badges .nav-pill-count-badge {
    display: none;
}
.nav-pills-adaptive.nav-pills-compact-labels .nav-pill-label {
    display: none;
}
.nav-pills-adaptive .nav-link {
    white-space: nowrap;
    transition: padding 0.15s ease;
    /* A felhasználó jelezte, hogy a badge-ek gyakran teljesen eltűntek
       tipikus admin-elrendezésnél (oldalsáv miatt szűkebb hely), mert a
       teljes-szélességű + középre-igazított elrendezésnél a tartalom
       akár 50px-cel is meghaladhatta a rendelkezésre álló helyet. Egy
       kismértékű, alig észrevehető padding-csökkentéssel (a Bootstrap
       alap nav-pills 1rem helyett 0.6rem) pilyenkénti ~13px-et
       (összesen ~90px-et 7 pillnél) nyerünk — ez a LEGTÖBB tipikus
       admin-elrendezésnél elegendő ahhoz, hogy a badge-ek ne kelljen
       elrejteni. */
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
}
.nav-pills-adaptive {
    /* A felhasználó kifejezett kérésére: a nav a szülő TELJES
       szélességét tölti ki (Bootstrap .nav-pills alapértelmezése), a
       "justify-content-center" HTML-osztály (lásd admin/appointments.php)
       pedig a fülöket KÖZÉPRE igazítja EBBEN a teljes szélességben —
       így ha a fülök összesen kevesebb helyet foglalnak, mint a
       rendelkezésre álló szélesség, az üres sáv EGYENLETESEN oszlik
       meg mindkét oldalon, nem csak a jobb szélen jelentkezik. */
    max-width: 100%;
}
/* A form-range (csúszka, pl. az egyéni "range" foglalási mező) a
   Bootstrap saját, fix kékjét használta a húzógombhoz, nem az app
   egyedi témaszínét (türkiz/navy/lila/citrom) — ezt javítjuk itt,
   kereszt-böngésző (Chrome/Safari/Firefox) kompatibilis módon. */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}
.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
.form-range::-webkit-slider-runnable-track {
    background-color: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-tertiary-bg));
}
.form-range::-moz-range-track {
    background-color: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-tertiary-bg));
}
/* Amikor nincs szerkesztési jog, a toolbart elrejtjük (lásd JS) — enélkül
   a doboz csak alul lenne kerekítve, mintha "levágták" volna a tetejét.
   Ez a class a TELJES dobozt kerekíti, és Bootstrap "letiltott mező"
   szerű, halványabb hátteret ad, hogy egyértelmű legyen: ez itt egy
   csak-olvasható nézet, nem egy hibásan renderelt szerkesztő. */
.ql-container.ql-snow.ql-no-toolbar {
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
}
.ql-container.ql-snow.ql-no-toolbar .ql-editor {
    background-color: transparent;
    cursor: default;
}
/* Az email-sablonok "gomb" linkjei (email_button() segédfüggvény,
   lásd includes/mailer.php) SZÁNDÉKOSAN <table><td><a>...</a></td></table>
   szerkezetűek — ez a levelező-kliensek (főleg Outlook) miatt szükséges
   technika, valódi CSS-gombok helyett. A Quill szerkesztő betöltéskor
   MEGŐRZI a táblázatot és a szín-stílusokat, de eldobja a padding/
   border-radius/aláhúzás-mentes formázást (ezek nincsenek benne a Quill
   saját formátum-modelljében) — emiatt a gomb csupasz, stílus nélküli
   táblázat-cellaként és szövegként jelenne meg szerkesztés közben. Az
   alábbi szabály a MEGŐRZÖTT inline háttérszín alapján (ami style-ban
   marad) visszaállítja a gomb-szerű megjelenést a szerkesztőn BELÜL —
   a ténylegesen KIKÜLDÖTT email HTML-jét ez nem érinti, az változatlanul
   a teljes, eredeti stílusokkal megy ki.
*/
/* A CAPTCHA-widget (Turnstile/reCAPTCHA/hCaptcha) körüli konténer —
   a widget maga egy iframe, aminek belső kinézetét nem tudjuk stílusozni,
   de a KÖRÜLÖTTE lévő elhelyezést igen: középre igazítva, a form többi
   elemétől egyenletes térközzel.
   SZÁNDÉKOSAN NINCS itt semmilyen extra háttér/padding/border-radius —
   korábban próbálkoztunk ilyesmivel egy feltételezett, de sosem
   megerősített méret-eltérés elleni "védekezésként", de ez ÖNMAGÁBAN
   új problémát okozott: mivel a CAPTCHA gyakran egy KÁRTYÁN (más
   háttérszínű felületen) belül jelenik meg, a hozzáadott, a
   kártyáétól ELTÉRŐ háttérszín egy jól látható, nem odaillő
   színfoltot hozott létre pont a widget körül. A widget saját
   iframe-je natívan, a megadott theme-paraméterrel (világos/sötét)
   már önmagában megfelelően illeszkedik — nincs szükség extra
   trükkre. */
/* CAPTCHA-widget konténer (Turnstile/reCAPTCHA/hCaptcha) — TELJESEN
   ÚJRAÉPÍTVE, a korábbi próbálkozások (fix min-width/min-height
   kényszerítése) törölve. Az ismételt visszajelzések alapján ezek a
   "segítő" méret-előírások ÖNMAGUKBAN okoztak vizuális eltérést a
   szolgáltató saját, natív iframe-méretéhez (.rc-anchor-normal)
   képest — a konténerünk a KELLETÉNÉL NAGYOBBRA volt kényszerítve,
   ami extra, nem odaillő üres teret hagyott a widget körül.
   A MOST-ANI megközelítés: NINCS semmilyen szélesség/magasság
   kényszerítés — a widget iframe-je TELJESEN SZABADON, a szolgáltató
   SAJÁT belső logikája alapján méretezi magát, mi csak a
   VÍZSZINTES KÖZÉPRE IGAZÍTÁST végezzük, ami nem hat a méretezésre. */
.captcha-widget-wrap {
    display: flex;
    justify-content: center;
}

.content-i18n-toggle {
    transition: background-color 0.15s ease;
}
.content-i18n-inner {
    animation: content-i18n-fade-in 0.15s ease;
}
@keyframes content-i18n-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Hibás ellenőrző-kód beírásakor rövid, jól érzékelhető "rázás" —
   vizuálisan jelzi, hogy a beírt kód helytelen volt, mielőtt kiürülne. */
.otp-shake {
    animation: otp-shake-anim 0.4s ease;
}
@keyframes otp-shake-anim {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}
.otp-box:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

/* A beszúrt "gomb" elem (lásd initQuillButtonInserter, DIV-alapú HTML)
   stílusai már INLINE be vannak állítva beszúráskor (a téma aktuális
   színeivel) — itt csak egy védekező felülbírálás kell, hogy a Quill
   saját alapértelmezett link-aláhúzása semmiképp ne törje meg a
   gomb-kinézetet. */
.ql-editor a[style*="background-color"] {
    text-decoration: none !important;
}
.ql-snow .ql-stroke { stroke: var(--bs-secondary-color) !important; }
.ql-snow .ql-fill { fill: var(--bs-secondary-color) !important; }
.ql-snow .ql-picker { color: var(--bs-secondary-color) !important; }
.ql-snow .ql-picker-options { background-color: var(--bs-card-bg) !important; border-color: var(--bs-border-color) !important; }
.ql-toolbar.ql-snow .ql-formats button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-formats button.ql-active .ql-stroke { stroke: var(--bs-primary) !important; }
.ql-toolbar.ql-snow .ql-formats button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-formats button.ql-active .ql-fill { fill: var(--bs-primary) !important; }
.ql-toolbar.ql-snow .ql-formats button:hover,
.ql-toolbar.ql-snow .ql-formats button.ql-active { color: var(--bs-primary) !important; }
.ql-snow .ql-picker.ql-expanded .ql-picker-label { color: var(--bs-primary) !important; }
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--bs-primary) !important; }
.ql-snow .ql-picker-label:hover { color: var(--bs-primary) !important; }
/* A Quill alapból egy szürke keretet ad a picker-labelnek nyitott
   állapotban — feleslegesen "dobozosnak" hat, inkább elhagyjuk. */
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: transparent !important;
}
.ql-snow .ql-tooltip {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.ql-snow .ql-tooltip input[type=text] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* =====================================================================
   Flatpickr — teljesen saját, JS-alapú (nem natív böngésző-) dátum/idő
   választó, hogy a felugró ablak MAGA is a rendszer témáját kövesse
   (natív input picker-ablakot böngészőből nem lehet stílusozni — ez a
   Flatpickr pontosan ezt a korlátot oldja fel).
   ===================================================================== */
.flatpickr-calendar {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bs-border-color); }
.flatpickr-months, .flatpickr-current-month {
    color: var(--bs-body-color);
}
/* =====================================================================
   A Flatpickr saját középre-igazítása egy JS által (a tényleges betű-
   metrikák alapján) kiszámított, pixelre pontos padding-top-ra épül —
   ez törékenynek bizonyult, amint a hónap/év mezők magasságát/betű-
   típusát módosítottuk. Ehelyett egy egyszerű, megbízható flexbox
   középre-igazításra váltunk: kikapcsoljuk a Flatpickr saját abszolút
   pozicionálását és padding-számítását, és helyette a szülő elemen
   (.flatpickr-months) végezzük el a vertikális centrálást — ez
   függetlenné teszi az eredményt bármilyen betűméret/magasság
   változástól, nem csak "esetlegesen jól kijövő" pixel-értékektől.
   ===================================================================== */
.flatpickr-months {
    align-items: center;
    background-color: var(--bs-primary);
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}
.flatpickr-months .flatpickr-month {
    background-color: var(--bs-primary);
    color: var(--btn-primary-text);
    fill: var(--btn-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.flatpickr-current-month {
    position: static !important;
    width: auto !important;
    left: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transform: none !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--btn-primary-text);
    background: transparent;
    border-radius: 4px;
    margin: 0;
    height: 24px;
    line-height: 24px;
    align-self: center;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    /* A Flatpickr alapból natív böngésző-select kinézetet ad ennek
       (appearance:menulist) — ez a rendszer többi, Bootstrap-stílusú
       legördülőjéhez képest idegen testként hatott, ezért levesszük. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
    background: rgba(0, 0, 0, .08);
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: #000; }
.numInputWrapper { display: flex !important; align-items: center; }
/* A nyilakat (prev/next hónap) a Flatpickr abszolút pozicionálja +
   10px paddinggel próbálja középre hozni — ehelyett a szülő flex
   konténer (.flatpickr-months, align-items:center) végzi a centrálást,
   ez megbízhatóbb. Az SVG-nek saját alap vertical-align:baseline-je
   van, ami babrálás nélkül IS enyhén lejjebb csúsztatja a nyilat a
   span-jéhez képest — ezt "display:block" oldja meg. */
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    position: static !important;
    top: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    fill: var(--btn-primary-text);
    color: var(--btn-primary-text);
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
    display: block;
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--btn-primary-text);
    opacity: .7;
}
.flatpickr-weekdays { background-color: var(--bs-card-bg); }
span.flatpickr-weekday {
    background-color: var(--bs-card-bg);
    color: var(--bs-secondary-color);
}
.flatpickr-day { color: var(--bs-body-color); }
.flatpickr-day.today { border-color: var(--bs-primary); }
.flatpickr-day:hover, .flatpickr-day:focus {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--btn-primary-text);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: var(--bs-secondary-color);
    opacity: .4;
}
.flatpickr-time { border-top-color: var(--bs-border-color); }
/* Csak-idő (naptár nélküli) picker esetén nincs fölötte semmi, amitől el
   kellene választani — a border-top ott felesleges, "lógó" vonalnak tűnik. */
.flatpickr-calendar.noCalendar .flatpickr-time { border-top: none; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    color: var(--bs-body-color);
    background-color: var(--bs-card-bg);
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    background-color: var(--bs-primary-bg-subtle);
}
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--bs-secondary-color); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--bs-secondary-color); }
.numInputWrapper span:hover { background: var(--bs-primary-bg-subtle); }
.flatpickr-input + input[readonly] { cursor: pointer; }
/* Explicit naptár/óra ikon a látható mező végén — konkrét kattintható
   jelzés, hogy ide picker tartozik (a szín témánként állítható,
   lásd assets/themes/*.css --picker-calendar-icon/--picker-clock-icon). */
input.fp-alt-date, input.fp-alt-time {
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    cursor: text;
}
input.fp-alt-date { background-image: var(--picker-calendar-icon); }
input.fp-alt-time { background-image: var(--picker-clock-icon); }

/* Az email-mező input-group-jában a jobb szélső elem (lookup-spinner)
   "d-none"-nal van elrejtve, de technikailag még mindig ő az utolsó DOM
   gyerek — a Bootstrap input-group CSS-e emiatt ŐT kerekítené jobbra,
   az input mezőt pedig "középső" elemként kezelve szögletesen hagyta a
   jobb szélét. A :has()-szal explicit visszaadjuk az inputnak a jobb
   oldali lekerekítést, amikor a spinner épp rejtve van. */
.input-group:has(#lookup-spinner.d-none) #email {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* =====================================================================
   Quill "Forráskód szerkesztése" gomb — ugyanabba a .ql-formats
   csoportba kerül, mint a Quill saját gombjai, ezért alapból örökli
   azok kinézetét; itt csak az "aktív" (forráskód-módban van) állapotot
   emeljük ki, ugyanúgy, ahogy a Quill a saját aktív gombjait jelöli.
   ===================================================================== */
.ql-source-toggle-group button.ql-active .ql-stroke {
    stroke: var(--bs-primary) !important;
}

/* =====================================================================
   CodeMirror (a Quill forráskód-nézetéhez) — a témát követő keret és
   szintaxis-színek, világos és sötét módban is.
   ===================================================================== */
.quill-source-wrap {
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    overflow: hidden;
}
.quill-source-wrap .CodeMirror {
    height: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
}
.quill-source-wrap .CodeMirror-gutters {
    background-color: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}
.quill-source-wrap .CodeMirror-linenumber { color: var(--bs-secondary-color); }
.quill-source-wrap .CodeMirror-cursor { border-left-color: var(--bs-body-color); }
[data-bs-theme="dark"] .quill-source-wrap .cm-tag,
[data-bs-theme="dark"] .quill-source-wrap .cm-bracket { color: #7ee787; }
[data-bs-theme="dark"] .quill-source-wrap .cm-attribute { color: #79c0ff; }
[data-bs-theme="dark"] .quill-source-wrap .cm-string { color: #a5d6ff; }
[data-bs-theme="dark"] .quill-source-wrap .cm-comment { color: var(--bs-secondary-color); }

/* =====================================================================
   Lábléc "Készítette" — ha van hozzá link, tényleg úgy is nézzen ki
   (téma-szín, aláhúzás csak hover-re), ha nincs, egyértelműen NEM
   kattintható, szürkés szövegként jelenjen meg — a korábbi közös
   ".link-secondary" osztály mindkét esetben ugyanúgy (aláhúzva) nézett
   ki, ami nem tette egyértelművé, melyik változat aktív éppen.
   ===================================================================== */
.footer-credit-link {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}
.footer-credit-link:hover {
    text-decoration: underline;
    color: var(--bs-primary);
}
.footer-credit-name {
    color: var(--bs-secondary-color);
}

/* =====================================================================
   Navbar-brand hosszú alkalmazásnév esetén — a .text-truncate osztály
   (overflow:hidden + white-space:nowrap) ÖNMAGÁBAN nem elég: a
   Bootstrap navbar .container eleme alapból flex-wrap:wrap-et használ,
   ami hosszú márka-szöveg esetén ÚJ SORBA törte a téma-váltó gombot
   (ahelyett, hogy a szövegnek kellett volna "..."-ra csonkolódnia).
   A flex-wrap:nowrap kényszerítésével a böngésző a zsugorítást
   (flex-shrink) választja a törés helyett, így a brand ténylegesen
   összenyomódik és csonkolódik, a gomb pedig mindig a helyén marad.
   ===================================================================== */
/* FONTOS: ez a flex-wrap:nowrap SZABÁLY KIZÁRÓLAG asztali (lg és afölötti)
   nézetben érvényesülhet! Mobil nézetben a Bootstrap navbar-collapse
   elemnek a container-fluid ALAPÉRTELMEZETT flex-wrap:wrap
   viselkedésére kell támaszkodnia ahhoz, hogy kinyitáskor a TELJES
   szélességben, a navbar ALÁ kerüljön — ha itt is nowrap-ot
   kényszerítenénk, a lenyíló menü a toggler-gomb MELLÉ szorulna egy
   keskeny sávba a jobb oldalon, ahelyett hogy alávándorolna (pontosan ez
   volt a korábbi mobil-hiba: a lenyíló menü nem a teljes szélességben,
   hanem oldalra tolva, összenyomva jelent meg).
*/
@media (min-width: 992px) {
.navbar.navbar-expand-lg .container,
.navbar.navbar-expand-lg .container-fluid {
    flex-wrap: nowrap;
}
}
/* A PUBLIKUS fejléc (templates/header.php) navbar-ja NEM
   navbar-expand-lg — nincs mobil hamburger/collapse-menüje, csak a
   márka-név + 2 lenyíló gomb (nyelv, téma), MINDIG egy sorban. Ennek
   emiatt MINDEN képernyőméreten (nem csak asztalin) nowrap kell,
   különben keskeny nézetben a gomb-pár új sorba törik a márka-név alá
   ("kétsoros fejléc" — ez okozta azt is, hogy a lenyíló menü rossz,
   képernyőn kívüli helyre pozicionálódott, mert a kiváltó gomb maga is
   rossz helyre került a törés miatt). */
.navbar:not(.navbar-expand-lg) .container {
    flex-wrap: nowrap;
}
.navbar .navbar-brand {
    min-width: 0;
    flex-shrink: 1;
    flex-grow: 0;
}
.navbar .theme-toggle-btn,
.navbar > .container > .d-flex,
.navbar > .container-fluid > .d-flex {
    flex-shrink: 0;
}
/* A bejelentkezett felhasználó neve/fiókgombja SOSE csonkolódjon vagy
   törjön több sorba — mindig a teljes szöveg legyen olvasható. Ha kevés
   a hely, a navbar-brand (fentebb: flex-shrink:1 + text-truncate) adja
   fel a helyét, nem ez a gomb. */
.account-name-btn {
    white-space: nowrap;
    flex-shrink: 0;
    /* SZÁNDÉKOSAN nincs egyedi padding — a Bootstrap alapértelmezett
       .btn-sm méretezését használja, PONTOSAN úgy, mint a mellette lévő
       nyelv-választó és téma-váltó gombok, hogy a három gomb magassága
       egységes legyen (korábban egy extra padding miatt ez a gomb
       ~5px-szel magasabb volt a szomszédjainál). */
}

/* =====================================================================
   Jogi tartalmak (ÁSZF, Adatvédelmi tájékoztató) tipográfiája —
   ugyanez a szabálykészlet vonatkozik a publikus megjelenítésre
   (.legal-content-body) ÉS az admin-oldali Quill-szerkesztőre
   (#legal-editor .ql-editor), hogy szerkesztéskor pontosan azt lássa
   az admin, amit az ügyfél is látni fog (WYSIWYG).
   A Bootstrap alapértelmezett fejléc-méretei (H2=32px, H3=28px) egy
   sok számozott alponttal (1., 1.1, 1.2, 2., ...) rendelkező, sűrű
   jogi dokumentumban aránytalanul nagynak és "szétesőnek" hatottak —
   ezért itt jóval visszafogottabb, dokumentum-jellegű méretezést
   kapnak, plusz kellő térközt a KÖVETKEZŐ szekció ELÉ (margin-top),
   hogy vizuálisan is elváljon az előző bekezdéstől.
   ===================================================================== */
.legal-content-body,
#legal-editor .ql-editor {
    font-size: 1rem;
    line-height: 1.7;
}
.legal-content-body h1, #legal-editor .ql-editor h1 { font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 0.75rem; }
.legal-content-body h2, #legal-editor .ql-editor h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.6rem; }
.legal-content-body h3, #legal-editor .ql-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.legal-content-body h4, #legal-editor .ql-editor h4 { font-size: 1rem; font-weight: 600; margin: 1.1rem 0 0.4rem; }
.legal-content-body h1:first-child, #legal-editor .ql-editor h1:first-child,
.legal-content-body h2:first-child, #legal-editor .ql-editor h2:first-child,
.legal-content-body h3:first-child, #legal-editor .ql-editor h3:first-child {
    margin-top: 0;
}
.legal-content-body p, #legal-editor .ql-editor p { margin-bottom: 1rem; }
.legal-content-body ul, #legal-editor .ql-editor ul,
.legal-content-body ol, #legal-editor .ql-editor ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.legal-content-body li, #legal-editor .ql-editor li { margin-bottom: 0.35rem; }

/* =====================================================================
   Süti-tájékoztató sáv — mind a publikus, mind az admin felületen
   megjelenhet (lásd templates/partials/cookie_consent.php). Az oldal
   alján rögzített, a téma kártya-hátterét és árnyékát használja, hogy
   illeszkedjen bármelyik témához, ne csak egyetlen hardkódolt színhez.
   ===================================================================== */
.cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform .35s ease-out;
}
.cookie-consent-bar-visible {
    transform: translateY(0);
}
.cookie-consent-bar #cookie-consent-details-toggle {
    color: var(--bs-secondary-color);
}

/* A nav-tabs (pl. admin/settings.php fülei) alapból a Bootstrap saját,
   FIX kékjét (#0d6efd) használta az inaktív fülek szövegéhez, ami NEM
   követte az app egyedi színtémáját (türkiz/navy/lila/citrom) — ezt
   javítjuk itt, hogy MINDEN fül-állapot az aktuális témához illeszkedjen. */
.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
    border-color: transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--bs-primary);
    border-color: var(--bs-border-color) var(--bs-border-color) transparent;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-card-bg);
    font-weight: 600;
}
.nav-tabs {
    border-bottom-color: var(--bs-border-color);
}

/* A telefonszám-mező SAJÁT, EGYSZERŰ zászló-legördülője (lásd
   assets/app.js initInputMasks()) — az intl-tel-input könyvtár CSAK
   mint ADATFORRÁS (ország-lista, zászló-sprite) van felhasználva, a
   TÉNYLEGES UI-elemek (gomb, legördülő menü) SAJÁT, Bootstrap-natív
   elemek, amik EMIATT automatikusan öröklik az app témaszíneit —
   nincs szükség témánkénti felülbírálásra, mint a könyvtár SAJÁT,
   kemény-kódolt (mindig fehér hátterű) UI-jánál kellett volna. */
.phone-mask-group .phone-country-toggle {
    flex-shrink: 0;
}
.phone-country-menu {
    max-width: 90vw;
}
.phone-country-menu .dropdown-item {
    cursor: pointer;
}