/* ==========================================================================
   M3 Leltár – egységes felület (macOS-szemlélet, üveghatás)
   Közös tokenek, alkalmazáskeret és komponensek. Az oldalankénti stílusok
   csak ezekre a tokenekre építenek, így a világos és a sötét megjelenés is
   innen jön.

   Téma: <html data-theme="light|dark">. A választást a base.html feji
   szkriptje állítja be a mentett beállításból (Világos / Sötét /
   Automatikus); szkript nélkül a rendszer beállítása érvényes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Világos téma (alapértelmezés)
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Háttér (az üveg mögötti „asztal”) */
    --wall:
        radial-gradient(1100px 800px at 0% 0%, #8DB9FF 0, transparent 62%),
        radial-gradient(900px 800px at 0% 100%, #A8E6D8 0, transparent 62%),
        radial-gradient(1000px 800px at 100% 0%, #D2BEFF 0, transparent 60%),
        radial-gradient(1000px 900px at 100% 100%, #FFCDB8 0, transparent 60%),
        #DDE5F4;
    --bg: #ECEFF5;

    /* Felületek */
    --window: rgba(255, 255, 255, .62);      /* fő ablak (áttetsző) */
    --surface: #FFFFFF;                      /* kártya */
    --surface-2: rgba(120, 120, 128, .06);   /* kártyán belüli csoport, sorhover */
    --surface-3: rgba(120, 120, 128, .12);   /* kitöltés: mező, szegmens, sáv */
    --border: rgba(60, 60, 67, .16);
    --border-soft: rgba(60, 60, 67, .10);
    --thead: rgba(248, 248, 250, .92);

    /* Üveg */
    --glass: rgba(255, 255, 255, .46);
    --glass-strong: rgba(250, 250, 252, .84);
    --glass-edge: rgba(255, 255, 255, .75);
    --glass-blur: blur(28px) saturate(180%);
    --glass-blur-strong: blur(40px) saturate(190%);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .2);
    --glass-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 10px 30px rgba(30, 40, 80, .10);

    /* Szöveg */
    --fg: #1D1D1F;
    --fg-muted: rgba(60, 60, 67, .74);
    --fg-faint: rgba(60, 60, 67, .46);

    /* Kiemelés (rendszerkék) */
    --accent: #007AFF;
    --accent-hover: #0064D6;
    --accent-soft: rgba(0, 122, 255, .12);
    --accent-line: rgba(0, 122, 255, .45);
    --accent-ink: #0058C0;
    --on-accent: #FFFFFF;
    --focus-ring: 0 0 0 3.5px rgba(0, 122, 255, .32), 0 0 0 1px #007AFF;

    /* Állapotok (rendszerszínek) */
    --ok: #1F8F3A;      --ok-soft: rgba(52, 199, 89, .16);    --ok-ink: #1B7A35;    --ok-solid: #34C759;
    --warn: #E59400;    --warn-soft: rgba(255, 204, 0, .22);  --warn-ink: #8A5F00;  --warn-solid: #FFCC00;
    --orange: #FF9500;  --orange-soft: rgba(255, 149, 0, .16); --orange-ink: #A35A00;
    --danger: #E5332A;  --danger-soft: rgba(255, 59, 48, .13); --danger-ink: #C4261D; --danger-solid: #FF3B30;
    --info: #007AFF;    --info-soft: rgba(0, 122, 255, .11);  --info-ink: #0058C0;
    --sys: #5856D6;     --sys-soft: rgba(88, 86, 214, .12);
    --violet: #9B44D6;  --violet-soft: rgba(175, 82, 222, .14);
    --teal: #1F9CB3;    --teal-soft: rgba(48, 176, 199, .15);
    --gray: #8E8E93;

    /* Oldalsáv (üveg, a téma szerint) */
    --side-bg: var(--glass);
    --side-fg: var(--fg);
    --side-muted: var(--fg-faint);
    --side-hover: rgba(0, 0, 0, .045);
    --side-on: rgba(0, 0, 0, .08);
    --side-line: rgba(60, 60, 67, .12);
    --side-accent: var(--accent);

    /* Méretek */
    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-win: 22px;
    --shadow-sm: 0 0 0 .5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .05);
    --shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 8px 28px rgba(30, 40, 80, .12);
    --shadow-lg: 0 0 0 .5px rgba(0, 0, 0, .08), 0 24px 64px rgba(20, 30, 60, .26);
    --side-w: 252px;
    --top-h: 60px;
    --gutter: 24px;
    --frame: 10px;

    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-disp: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

    /* A régi oldalak változóneveinek átirányítása az új tokenekre. */
    --bg-main: var(--bg);
    --card-bg: var(--surface);
    --text-main: var(--fg);
    --text-muted: var(--fg-muted);
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --success: var(--ok);
    --warning: var(--warn);
    --border-color: var(--border);
    --shadow-md: var(--shadow);
    --radius-md: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Sötét téma. Kétszer szerepel: a kifejezett választáshoz (data-theme) és a
   rendszerbeállításhoz (szkript nélkül, vagy „Automatikus” esetén).
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --wall:
        radial-gradient(1100px 800px at 0% 0%, #1E3A78 0, transparent 62%),
        radial-gradient(900px 800px at 0% 100%, #0F4A4A 0, transparent 62%),
        radial-gradient(1000px 800px at 100% 0%, #3C2470 0, transparent 60%),
        radial-gradient(1000px 900px at 100% 100%, #5A2C24 0, transparent 60%),
        #111318;
    --bg: #17181C;
    --window: rgba(30, 30, 34, .66);
    --surface: #2A2A2E;
    --surface-2: rgba(255, 255, 255, .05);
    --surface-3: rgba(118, 118, 128, .24);
    --border: rgba(255, 255, 255, .13);
    --border-soft: rgba(255, 255, 255, .08);
    --thead: rgba(44, 44, 48, .95);
    --glass: rgba(40, 40, 46, .52);
    --glass-strong: rgba(44, 44, 50, .86);
    --glass-edge: rgba(255, 255, 255, .12);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 .5px rgba(255, 255, 255, .08);
    --glass-shadow: 0 0 0 .5px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .40);
    --fg: #F5F5F7;
    --fg-muted: rgba(235, 235, 245, .66);
    --fg-faint: rgba(235, 235, 245, .40);
    --accent: #0A84FF;
    --accent-hover: #339CFF;
    --accent-soft: rgba(10, 132, 255, .22);
    --accent-line: rgba(10, 132, 255, .6);
    --accent-ink: #64B0FF;
    --focus-ring: 0 0 0 3.5px rgba(10, 132, 255, .45), 0 0 0 1px #0A84FF;
    --ok: #30D158;      --ok-soft: rgba(48, 209, 88, .18);    --ok-ink: #5BE07D;    --ok-solid: #30D158;
    --warn: #FFD60A;    --warn-soft: rgba(255, 214, 10, .18); --warn-ink: #FFE066;  --warn-solid: #FFD60A;
    --orange: #FF9F0A;  --orange-soft: rgba(255, 159, 10, .20); --orange-ink: #FFB84D;
    --danger: #FF453A;  --danger-soft: rgba(255, 69, 58, .20); --danger-ink: #FF7B73; --danger-solid: #FF453A;
    --info: #0A84FF;    --info-soft: rgba(10, 132, 255, .20); --info-ink: #64B0FF;
    --sys: #7D7AFF;     --sys-soft: rgba(94, 92, 230, .24);
    --violet: #D08CFF;  --violet-soft: rgba(191, 90, 242, .22);
    --teal: #5AD2E8;    --teal-soft: rgba(64, 200, 224, .20);
    --gray: #98989D;
    --side-hover: rgba(255, 255, 255, .06);
    --side-on: rgba(255, 255, 255, .11);
    --side-line: rgba(255, 255, 255, .09);
    --shadow-sm: 0 0 0 .5px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .10), 0 26px 70px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --wall:
            radial-gradient(1100px 800px at 0% 0%, #1E3A78 0, transparent 62%),
            radial-gradient(900px 800px at 0% 100%, #0F4A4A 0, transparent 62%),
            radial-gradient(1000px 800px at 100% 0%, #3C2470 0, transparent 60%),
            radial-gradient(1000px 900px at 100% 100%, #5A2C24 0, transparent 60%),
            #111318;
        --bg: #17181C;
        --window: rgba(30, 30, 34, .66);
        --surface: #2A2A2E;
        --surface-2: rgba(255, 255, 255, .05);
        --surface-3: rgba(118, 118, 128, .24);
        --border: rgba(255, 255, 255, .13);
        --border-soft: rgba(255, 255, 255, .08);
        --thead: rgba(44, 44, 48, .95);
        --glass: rgba(40, 40, 46, .52);
        --glass-strong: rgba(44, 44, 50, .86);
        --glass-edge: rgba(255, 255, 255, .12);
        --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 .5px rgba(255, 255, 255, .08);
        --glass-shadow: 0 0 0 .5px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .40);
        --fg: #F5F5F7;
        --fg-muted: rgba(235, 235, 245, .66);
        --fg-faint: rgba(235, 235, 245, .40);
        --accent: #0A84FF;
        --accent-hover: #339CFF;
        --accent-soft: rgba(10, 132, 255, .22);
        --accent-line: rgba(10, 132, 255, .6);
        --accent-ink: #64B0FF;
        --focus-ring: 0 0 0 3.5px rgba(10, 132, 255, .45), 0 0 0 1px #0A84FF;
        --ok: #30D158;      --ok-soft: rgba(48, 209, 88, .18);    --ok-ink: #5BE07D;    --ok-solid: #30D158;
        --warn: #FFD60A;    --warn-soft: rgba(255, 214, 10, .18); --warn-ink: #FFE066;  --warn-solid: #FFD60A;
        --orange: #FF9F0A;  --orange-soft: rgba(255, 159, 10, .20); --orange-ink: #FFB84D;
        --danger: #FF453A;  --danger-soft: rgba(255, 69, 58, .20); --danger-ink: #FF7B73; --danger-solid: #FF453A;
        --info: #0A84FF;    --info-soft: rgba(10, 132, 255, .20); --info-ink: #64B0FF;
        --sys: #7D7AFF;     --sys-soft: rgba(94, 92, 230, .24);
        --violet: #D08CFF;  --violet-soft: rgba(191, 90, 242, .22);
        --teal: #5AD2E8;    --teal-soft: rgba(64, 200, 224, .20);
        --gray: #98989D;
        --side-hover: rgba(255, 255, 255, .06);
        --side-on: rgba(255, 255, 255, .11);
        --side-line: rgba(255, 255, 255, .09);
        --shadow-sm: 0 0 0 .5px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .3);
        --shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .45);
        --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .10), 0 26px 70px rgba(0, 0, 0, .6);
    }
}

@media (max-width: 1100px) { :root { --gutter: 18px; } }
@media (max-width: 640px)  { :root { --gutter: 14px; } }

/* Üveget nem támogató böngészőben tömör felület. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass: #F2F3F6; --glass-strong: #F7F7F9; --window: #F7F8FA; }
    :root[data-theme="dark"] { --glass: #26262A; --glass-strong: #2C2C30; --window: #1F1F23; }
}

/* --------------------------------------------------------------------------
   Alapok
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.47;
    letter-spacing: -.006em;
    color: var(--fg);
    background: var(--wall);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
}

img, svg, video, canvas { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--font-disp); margin: 0; text-wrap: balance; color: var(--fg); letter-spacing: -.018em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Keresőmezőkben a gyűrű a keretet kapja (:focus-within), nem a belső mezőt. */
[class*="search"] > input:focus-visible, [class*="search"] > input:focus { box-shadow: none; outline: none; }
[class*="search"]:focus-within { box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }

.mono { font-family: var(--font-mono); font-size: .9em; letter-spacing: 0; }
.disp { font-family: var(--font-disp); }
.num  { font-variant-numeric: tabular-nums; }
.mut  { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A macOS a csoportcímkéket nem csupa nagybetűvel írja. */
.eyebrow { font-size: 12px; font-weight: 600; color: var(--fg-muted); }

/* Görgetősáv (vékony, a téma színeivel) */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Üveg segédosztály */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-hi);
}

/* --------------------------------------------------------------------------
   Alkalmazáskeret: lebegő üveg oldalsáv + áttetsző ablak
   -------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; padding: var(--frame); gap: var(--frame); }

.side {
    position: sticky; top: var(--frame);
    flex: 0 0 var(--side-w); width: var(--side-w);
    height: calc(100vh - 2 * var(--frame)); height: calc(100dvh - 2 * var(--frame));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--side-bg); color: var(--side-fg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-hi);
    border-radius: var(--radius-win);
    padding: 14px 10px 10px;
    display: flex; flex-direction: column; gap: 14px;
    z-index: 60;
}
.side-brand {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 2px;
    color: var(--fg); text-decoration: none;
}
.side-brand:hover { color: var(--fg); text-decoration: none; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(160deg, #3D9BFF, #0060DF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 96, 223, .35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b { font-family: var(--font-disp); font-weight: 600; font-size: 13.5px; color: var(--fg); }
.brand-text span { font-size: 11.5px; color: var(--fg-muted); }

.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
    font-size: 11.5px; font-weight: 600; color: var(--fg-faint); padding: 0 10px 4px;
}
.nav-link {
    display: flex; align-items: center; gap: 9px;
    padding: 0 10px; min-height: 30px; border-radius: 8px;
    color: var(--fg); text-decoration: none; font-weight: 500; font-size: 13.5px;
}
.nav-link i { font-size: 15px; width: 18px; text-align: center; flex: none; color: var(--accent); }
.nav-link:hover { background: var(--side-hover); color: var(--fg); text-decoration: none; }
.nav-link.on { background: var(--side-on); color: var(--fg); }
.nav-link .nav-badge {
    margin-left: auto; font-size: 11px; font-weight: 600; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 9px;
    background: var(--orange); color: #fff; font-variant-numeric: tabular-nums;
}

.side-user {
    margin-top: auto; padding: 8px; border-radius: 14px;
    background: var(--surface-2); box-shadow: var(--glass-hi);
    display: flex; flex-direction: column; gap: 8px;
}
.side-user-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 600; font-size: 12.5px;
    background: linear-gradient(160deg, #8E9AAF, #5E6A80); color: #fff;
}
.avatar.admin { background: linear-gradient(160deg, #C77DFF, #8A3AB9); color: #fff; }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.lt { background: var(--accent-soft); color: var(--accent-ink); }
.side-user-name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.side-user-name b { color: var(--fg); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-name span { font-size: 11.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-logout {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 28px; padding: 0 10px; border-radius: 8px;
    border: 0; background: transparent; color: var(--fg-muted);
    cursor: pointer; font-weight: 500; font-size: 12.5px;
}
.side-logout:hover { background: var(--side-hover); color: var(--fg); }

/* Megjelenés-választó (Világos / Sötét / Automatikus) */
.theme-pick { display: flex; flex-direction: column; gap: 5px; }
.theme-pick-label { font-size: 11.5px; font-weight: 600; color: var(--fg-faint); padding: 0 2px; }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border-radius: 9px; background: var(--surface-3); }
.theme-seg button {
    display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 0 4px;
    border: 0; border-radius: 7px; background: transparent; color: var(--fg); cursor: pointer;
    font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.theme-seg button i { font-size: 12.5px; }
.theme-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .05); }
:root[data-theme="dark"] .theme-seg button[aria-pressed="true"] { background: #636366; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.main {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    min-height: calc(100vh - 2 * var(--frame)); min-height: calc(100dvh - 2 * var(--frame));
    background: var(--window);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-hi);
    border-radius: var(--radius-win);
}

.topbar {
    position: sticky; top: var(--frame); z-index: 40;
    display: flex; align-items: center; gap: 10px;
    min-height: var(--top-h);
    padding: 12px var(--gutter) 8px;
    border-radius: var(--radius-win) var(--radius-win) 0 0;
}
.topbar .menu-btn { display: none; }
.topbar-brand { display: none; }
.top-search {
    display: flex; align-items: center; gap: 8px;
    flex: 0 1 340px; max-width: 420px; min-height: 36px; padding: 0 14px; margin-left: auto;
    border-radius: 18px;
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-hi);
}
.top-search i { color: var(--fg-muted); }
.top-search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 13.5px; }
.top-search input::placeholder { color: var(--fg-faint); }
.top-search:focus-within { box-shadow: var(--focus-ring); }
.top-search-kbd { font-size: 11px; font-weight: 500; color: var(--fg-faint); flex: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.content {
    flex: 1 0 auto;
    width: 100%; max-width: 1680px; margin: 0 auto;
    padding: 6px var(--gutter) 24px;
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
}
.content.wide { max-width: none; }
.app-footer {
    padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
    color: var(--fg-faint); font-size: 11.5px; text-align: center;
}

.scrim {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .32);
    z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* Tablet/telefon: az oldalsáv fiókká válik. */
@media (max-width: 1023px) {
    :root { --frame: 0px; }
    .shell { padding: 0; gap: 0; }
    .side {
        position: fixed; left: 8px; top: 8px; bottom: 8px; height: auto;
        width: min(84vw, 300px);
        transform: translateX(calc(-100% - 16px)); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--glass-strong);
        -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
        box-shadow: var(--shadow-lg), var(--glass-hi);
    }
    body.nav-open .side { transform: none; }
    body.nav-open .scrim { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
    .main { border-radius: 0; min-height: 100vh; min-height: 100dvh; box-shadow: none; }
    .topbar {
        top: 0; border-radius: 0;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        background: var(--glass-strong);
        -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        box-shadow: 0 .5px 0 var(--border);
    }
    .topbar .menu-btn { display: inline-flex; }
    .topbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg); font-weight: 600; font-family: var(--font-disp); }
    .topbar-brand:hover { color: var(--fg); text-decoration: none; }
}
@media (max-width: 640px) {
    .top-search { display: none; }
    .top-search.open { display: flex; position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); max-width: none; background: var(--glass-strong); box-shadow: var(--shadow); }
    .topbar { position: sticky; }
    .content { padding-top: 14px; gap: 14px; }
    .top-search-kbd { display: none; }
    .topbar-actions { margin-left: auto; }
}
@media (min-width: 641px) { .search-toggle { display: none !important; } }

/* Alsó navigáció (csak telefonon): lebegő üveg sáv */
.tabbar { display: none; }
@media (max-width: 640px) {
    .tabbar {
        display: flex; position: fixed; z-index: 50;
        left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 5px; border-radius: 32px;
        background: var(--glass-strong);
        -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
        box-shadow: var(--shadow), var(--glass-hi);
    }
    .tabbar .tab {
        flex: 1 1 0; min-width: 0; min-height: 52px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border: 0; background: transparent; border-radius: 26px;
        color: var(--fg); text-decoration: none; font: 600 10.5px var(--font); cursor: pointer;
    }
    .tabbar .tab:hover { text-decoration: none; color: var(--fg); }
    .tabbar .tab i { font-size: 20px; line-height: 1; }
    .tabbar .tab.on { color: var(--accent); background: var(--side-on); }
    /* A tartalom ne kerüljön az alsó sáv alá. */
    .app-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    /* A menü a fiókban és az alsó sávon is elérhető; a felső gomb itt felesleges. */
    .topbar .menu-btn { display: none; }
}

/* --------------------------------------------------------------------------
   Oldalfej
   -------------------------------------------------------------------------- */
.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px;
}
.page-head > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
.page-sub { color: var(--fg-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--fg-muted); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
@media (max-width: 640px) {
    .page-title { font-size: 24px; }
    .page-actions { width: 100%; }
    .page-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Kártya
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface); border: 0; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.card-pad { padding: 16px 18px; }
.card-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px 10px;
}
.card-head + .card-body, .card-head.line { border-top: 0; }
.card-head.line { border-bottom: .5px solid var(--border-soft); padding-bottom: 12px; }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.card-body { padding: 14px 18px; }
.card-foot { padding: 12px 18px; border-top: .5px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.card.warn { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--warn-soft); }
.card.danger { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--danger-soft); }
@media (max-width: 640px) {
    .card-pad, .card-body { padding: 14px; }
    .card-head { padding: 12px 14px; }
    .card-foot { padding: 10px 14px; }
}

/* Rácsok */
.grid { display: grid; gap: 14px; }
.grid-kpi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.row > .grow { flex: 999 1 520px; min-width: 0; }
.row > .aside { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* KPI */
.kpi { padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); display: flex; align-items: center; gap: 7px; }
.kpi-value { font-family: var(--font-disp); font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: 12px; color: var(--fg-muted); }
.kpi.warn .kpi-label { color: var(--warn-ink); }
.kpi.danger .kpi-label { color: var(--danger-ink); }
@media (max-width: 640px) {
    .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { padding: 12px 14px; }
    .kpi-value { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Gombok (kapszula)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 14px;
    font: 500 13.5px/1.2 var(--font); letter-spacing: -.006em;
    border-radius: 999px; border: 0;
    background: var(--surface); color: var(--fg);
    box-shadow: 0 0 0 .5px var(--border), 0 1px 2px rgba(0, 0, 0, .06);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, box-shadow .15s, color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .btn:not(.pri):not(.btn-primary):not(.danger-solid):not(.ghost):not(.plain) { background: rgba(255, 255, 255, .10); }
.btn:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
:root[data-theme="dark"] .btn:not(.pri):not(.btn-primary):not(.danger-solid):not(.ghost):not(.plain):hover { background: rgba(255, 255, 255, .16); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn i { font-size: 14px; }
.btn.pri, .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 122, 255, .35); }
.btn.pri:hover, .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.tint { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.btn.tint:hover { background: var(--accent-soft); filter: brightness(.97); color: var(--accent-ink); }
.btn.plain { background: transparent; box-shadow: none; color: var(--accent); }
.btn.plain:hover { background: var(--accent-soft); color: var(--accent); }
.btn.danger { color: var(--danger-ink); }
.btn.danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.btn.danger-solid { background: var(--danger-solid); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.danger-solid:hover { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { min-height: 26px; padding: 0 11px; font-size: 12.5px; }
.btn.lg { min-height: 38px; padding: 0 18px; font-size: 14px; }
.btn.icon { padding: 0; width: 32px; }
.btn.icon.sm { width: 26px; }
.btn.block { width: 100%; }
.btn .badge { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn.sm { min-height: 36px; }
    .btn.icon { width: 44px; }
    .btn.icon.sm { width: 36px; }
}

/* Eszközsor-kapszula: összetartozó gombok egy üveg csoportban */
.cap-group {
    display: inline-flex; align-items: center; min-height: 36px; padding: 3px; border-radius: 18px;
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-hi);
}
.cap-group > .btn { box-shadow: none; background: transparent; min-height: 30px; }
.cap-group > .btn:hover { background: var(--side-hover); }
.cap-group > .btn + .btn { position: relative; }
.cap-group > .btn + .btn::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--border-soft); }

/* Chip / jelvény */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6; min-height: 20px;
    padding: 0 8px; border-radius: 999px; white-space: nowrap;
    background: var(--surface-3); color: var(--fg-muted);
}
/* Kézzel (nem SAP-importból) rögzített tétel jele az anyagszám mellett */
.kezi-jel { font-size: .85em; margin-left: 5px; color: var(--fg-muted); vertical-align: 0; }
.chip.accent, .chip.biz { background: var(--accent-soft); color: var(--accent-ink); }
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip.danger { background: var(--danger-soft); color: var(--danger-ink); }
.chip.info { background: var(--info-soft); color: var(--info-ink); }
.chip.sys { background: var(--sys-soft); color: var(--sys); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
.chip.solid { background: var(--accent); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: currentColor; }

/* --------------------------------------------------------------------------
   Űrlapok
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .label { font-size: 12.5px; font-weight: 500; color: var(--fg-muted); }
.hint { font-size: 12px; color: var(--fg-muted); }
.inp, .sel, .txt,
.form-control, .form-select {
    width: 100%; min-height: 32px; padding: 0 10px;
    border: 0; border-radius: 8px;
    background: var(--surface); color: var(--fg);
    box-shadow: 0 0 0 .5px var(--border), 0 0 0 .5px var(--border), inset 0 1px 1px rgba(0, 0, 0, .03);
    font-size: 13.5px;
    transition: box-shadow .15s;
}
:root[data-theme="dark"] .inp, :root[data-theme="dark"] .sel, :root[data-theme="dark"] .txt,
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background: rgba(255, 255, 255, .07); }
.sel, .form-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.txt, textarea.form-control { padding: 8px 10px; min-height: 84px; resize: vertical; line-height: 1.45; }
.inp:focus, .sel:focus, .txt:focus, .form-control:focus, .form-select:focus {
    outline: none; box-shadow: var(--focus-ring);
}
.inp::placeholder, .txt::placeholder, .form-control::placeholder { color: var(--fg-faint); }
.inp.auto, .sel.auto { width: auto; }
.inp-icon { position: relative; display: flex; align-items: center; }
.inp-icon > i { position: absolute; left: 10px; color: var(--fg-muted); pointer-events: none; font-size: 13px; }
.inp-icon > .inp { padding-left: 30px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.text-danger { color: var(--danger-ink); }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--danger-ink); font-size: 12.5px; }
@media (max-width: 640px) {
    /* 16 px alatt az iOS ráközelít a mezőre. */
    .inp, .sel, .txt, .form-control, .form-select, .top-search input { font-size: 16px; }
    .form-actions > .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) {
    .inp, .sel, .form-control, .form-select { min-height: 44px; }
}

/* Szűrősáv */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.filters > .field { flex: 1 1 170px; }
.filters > .field.grow { flex: 3 1 240px; }
.filters-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filters-toggle { display: none; }
@media (max-width: 640px) {
    .filters-toggle { display: flex; width: 100%; }
    form.filters.collapsed { display: none; }
    .filters > .field { flex: 1 1 100%; }
    .filters-actions { width: 100%; }
    .filters-actions > .btn { flex: 1 1 0; }
}

/* --------------------------------------------------------------------------
   Táblázatok (Finder-lista)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th {
    font-size: 12px; font-weight: 600;
    color: var(--fg-muted); text-align: left; white-space: nowrap;
    padding: 8px 14px; border-bottom: .5px solid var(--border); background: var(--thead);
    position: sticky; top: 0; z-index: 1;
}
.tbl td { padding: 9px 14px; border-bottom: 0; vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--surface-2); }
.tbl tbody tr:hover td { background: var(--accent-soft); }
.tbl .r, .tbl th.r { text-align: right; }
.tbl .c, .tbl th.c { text-align: center; }
.tbl a.row-link { color: var(--fg); font-weight: 600; text-decoration: none; }
.tbl a.row-link:hover { color: var(--accent); text-decoration: none; }
.cell-title { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--fg-muted); }

/* Telefonon a .tbl-stack táblázat soronként kártyává alakul (data-label). */
@media (max-width: 720px) {
    .tbl-stack thead { display: none; }
    .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
    .tbl-stack tr { padding: 10px 14px; border-bottom: .5px solid var(--border-soft); }
    .tbl-stack tbody tr:last-child { border-bottom: 0; }
    .tbl-stack td {
        border: 0; padding: 3px 0; display: block; text-align: right; min-width: 0; overflow-wrap: anywhere;
        background: transparent !important;
    }
    .tbl-stack td::after { content: ""; display: table; clear: both; }
    .tbl-stack td::before {
        content: attr(data-label); float: left; text-align: left; margin-right: 12px; line-height: 1.9;
        font-size: 12px; font-weight: 500; color: var(--fg-muted);
    }
    .tbl-stack td[data-label=""]::before, .tbl-stack td:not([data-label])::before { content: none; }
    .tbl-stack tr { display: flex; flex-direction: column; }
    .tbl-stack td.lead { display: block; text-align: left; padding-bottom: 6px; order: -1; }
    .tbl-stack td.lead::before { content: none; }
    .tbl-stack td.block { display: block; text-align: left; padding: 6px 0; }
    .tbl-stack td.block::before { float: none; display: block; margin-bottom: 4px; }
    .tbl-stack td.m-empty { display: none; }
}

/* Lista */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list > li { padding: 10px 0; border-bottom: .5px solid var(--border-soft); min-width: 0; }
.list > li:last-child { border-bottom: 0; }
.list.pad > li { padding: 10px 18px; }
@media (max-width: 640px) { .list.pad > li { padding: 10px 14px; } }

/* Idővonal (napló) */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline > li {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px;
    padding: 9px 0; border-bottom: .5px solid var(--border-soft);
}
.timeline > li:last-child { border-bottom: 0; }
.timeline time { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }

/* Sávdiagram: .hbars > .hbar > (címke, .track, érték) */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) auto; grid-template-areas: "l t v"; gap: 4px 12px; align-items: center; }
.hbar > :first-child { grid-area: l; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar > .track { grid-area: t; }
.hbar > :last-child { grid-area: v; text-align: right; white-space: nowrap; }
.track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.track > span, .track > div { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
@media (max-width: 520px) { .hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; } }

/* Kulcs–érték */
.kv { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: 8px; } }

/* Üres állapot */
.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 36px 16px; text-align: center; color: var(--fg-muted);
}
.empty i { font-size: 30px; color: var(--fg-faint); }
.empty b { color: var(--fg); font-size: 15px; }

/* Értesítő sáv */
.note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 13px; border-radius: 12px; font-size: 13px;
    background: var(--info-soft); color: var(--info-ink); border: 0;
}
.note > i { font-size: 15px; line-height: 1.35; flex: none; }
.note.ok { background: var(--ok-soft); color: var(--ok-ink); }
.note.warn { background: var(--warn-soft); color: var(--warn-ink); }
.note.danger, .note.error { background: var(--danger-soft); color: var(--danger-ink); }
.messages { display: flex; flex-direction: column; gap: 8px; }

/* Lapozó (szegmentált) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pager-links { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 2px; border-radius: 9px; background: var(--surface-3); }
.pager-links a, .pager-links span {
    min-width: 30px; min-height: 26px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; border: 0; background: transparent;
    text-decoration: none; color: var(--fg); font-weight: 500; font-size: 12.5px;
}
.pager-links a:hover { background: var(--side-hover); text-decoration: none; color: var(--fg); }
.pager-links .on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
:root[data-theme="dark"] .pager-links .on { background: #636366; }

/* Fülek (szegmentált vezérlő) */
.tabs { display: flex; gap: 0; padding: 2px; background: var(--surface-3); border-radius: 9px; overflow-x: auto; max-width: 100%; }
@media (max-width: 640px) { .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; } }
.tabs a, .tabs button {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px;
    border: 0; background: transparent; border-radius: 7px; cursor: pointer;
    font-weight: 500; font-size: 13px; color: var(--fg); text-decoration: none; white-space: nowrap;
}
.tabs a:hover { text-decoration: none; color: var(--fg); }
.tabs .on, .tabs [aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .tabs .on, :root[data-theme="dark"] .tabs [aria-selected="true"] { background: #636366; }

/* Fa (leltárhely, kategória, szervezet) */
.tree-list { list-style: none; margin: 0; padding: 0; }
.tree-list ul { list-style: none; margin: 0 0 0 10px; padding: 0 0 0 12px; border-left: 1px solid var(--border-soft); }

/* Modális ablak (üveg lap) */
.m3-modal {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: flex-start; justify-content: center;
    padding: 60px 16px 16px; background: rgba(0, 0, 0, .24);
}
.m3-modal.show, .m3-modal.open, .m3-modal[open] { display: flex; }
.m3-modal-box {
    width: min(560px, 100%); max-height: calc(100dvh - 80px); overflow: auto;
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
    border-radius: 24px; box-shadow: var(--shadow-lg), var(--glass-hi);
    display: flex; flex-direction: column;
}
.m3-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 8px; }
.m3-modal-body { padding: 8px 20px 14px; display: flex; flex-direction: column; gap: 14px; }
.m3-modal-foot { padding: 6px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
    .m3-modal { align-items: flex-end; padding: 8px; }
    .m3-modal-box { width: 100%; border-radius: 32px; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .m3-modal-foot > .btn { flex: 1 1 0; }
}

/* Natív <dialog> lapok közös üveg alapja (az oldalak a .dlg osztályt használják). */
dialog { color: var(--fg); }
dialog::backdrop { background: rgba(0, 0, 0, .26); }

/* Toast */
.toast-host { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast {
    background: var(--glass-strong); color: var(--fg); padding: 10px 14px; border-radius: 14px; font-size: 13px;
    -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow), var(--glass-hi);
}

/* Segédek */
.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none !important; } }
.show-sm { display: none !important; }
@media (max-width: 640px) { .show-sm { display: revert !important; } }
.divider { height: .5px; background: var(--border); border: 0; margin: 0; }

/* Nyomtatás: mindig világos, üveg nélkül */
@media print {
    .side, .topbar, .app-footer, .scrim, .page-actions, .tabbar { display: none !important; }
    body { background: #fff; color: #000; }
    .main { background: #fff; box-shadow: none; }
    .card { box-shadow: 0 0 0 1px #ccc; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    :root { --glass: #F2F3F6; --glass-strong: #F7F7F9; --window: #F7F8FA; }
    :root[data-theme="dark"] { --glass: #26262A; --glass-strong: #2C2C30; --window: #1F1F23; }
}

/* Telefonon a toast az alsó navigáció fölött jelenik meg. */
@media (max-width: 640px) { .toast-host { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }