/* ===========================================================================
   lumo.css — DESIGN TOKENOK (CSS custom property-k).
   A projekt teljes CSS-e (components.css) ezekre a --lumo-* és --color-*
   változókra hivatkozik. A felhasználó kérésére a Lumo (Vaadin) vizuális
   identitása helyett itt egy önálló, modern, professzionális dizájn-nyelv
   van definiálva — a VÁLTOZÓNEVEK szándékosan megmaradtak (ezért nem
   kellett ~500+ helyen külön átírni a components.css minden szabályát),
   csak az ÉRTÉKEIK cserélődtek egy letisztultabb, semleges szürke
   alapú, visszafogott kékesindigó kiemelésű palettára és tipográfiára.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* --- Alap színpaletta --- */
    --lumo-base-color: #ffffff;

    /* Kontraszt (semleges, hűvös szürkék — slate-alapú, nem a Lumo kékes-szürkéje) */
    --lumo-contrast-5pct: hsla(222, 24%, 12%, 0.045);
    --lumo-contrast-10pct: hsla(222, 22%, 12%, 0.08);
    --lumo-contrast-20pct: hsla(222, 20%, 12%, 0.13);
    --lumo-contrast-30pct: hsla(222, 19%, 12%, 0.20);
    --lumo-contrast-40pct: hsla(222, 18%, 12%, 0.32);
    --lumo-contrast-50pct: hsla(222, 17%, 13%, 0.46);
    --lumo-contrast-60pct: hsla(222, 16%, 13%, 0.58);
    --lumo-contrast-70pct: hsla(222, 16%, 13%, 0.68);
    --lumo-contrast-80pct: hsla(222, 17%, 13%, 0.80);
    --lumo-contrast-90pct: hsla(222, 20%, 13%, 0.92);
    --lumo-contrast: hsl(222, 24%, 12%);

    /* Elsődleges — visszafogott, professzionális indigókék */
    --lumo-primary-color-10pct: hsla(224, 76%, 48%, 0.1);
    --lumo-primary-color-50pct: hsla(224, 76%, 48%, 0.5);
    --lumo-primary-color: hsl(224, 76%, 48%);
    --lumo-primary-text-color: hsl(224, 80%, 40%);
    --lumo-primary-contrast-color: #ffffff;

    /* Hiba */
    --lumo-error-color-10pct: hsla(354, 75%, 50%, 0.1);
    --lumo-error-color-50pct: hsla(354, 75%, 50%, 0.5);
    --lumo-error-color: hsl(354, 75%, 48%);
    --lumo-error-text-color: hsl(354, 78%, 40%);
    --lumo-error-contrast-color: #ffffff;

    /* Siker */
    --lumo-success-color-10pct: hsla(158, 64%, 32%, 0.1);
    --lumo-success-color-50pct: hsla(158, 64%, 32%, 0.5);
    --lumo-success-color: hsl(158, 68%, 30%);
    --lumo-success-text-color: hsl(158, 76%, 24%);
    --lumo-success-contrast-color: #ffffff;

    /* Szövegszínek */
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    /* --- Méretek --- */
    --lumo-size-xs: 1.625rem;
    --lumo-size-s: 1.875rem;
    --lumo-size-m: 2.25rem;
    --lumo-size-l: 2.75rem;
    --lumo-size-xl: 3.5rem;

    /* --- Ikonméretek --- */
    --lumo-icon-size-s: 1.25em;
    --lumo-icon-size-m: 1.5em;
    --lumo-icon-size-l: 2.25em;

    /* --- Térközök --- */
    --lumo-space-xs: 0.25rem;
    --lumo-space-s: 0.5rem;
    --lumo-space-m: 1rem;
    --lumo-space-l: 1.5rem;
    --lumo-space-xl: 2.5rem;

    --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
    --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
    --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
    --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
    --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);

    /* --- Tipográfia — modern, professzionális (Inter elsődlegesen, jó
       rendszer-fallback lánccal, ha nincs internet-elérés az @import-hoz) --- */
    --lumo-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    --lumo-font-size-xxs: 0.75rem;
    --lumo-font-size-xs: 0.8125rem;
    --lumo-font-size-s: 0.875rem;
    --lumo-font-size-m: 0.9375rem;
    --lumo-font-size-l: 1.125rem;
    --lumo-font-size-xl: 1.375rem;
    --lumo-font-size-xxl: 1.75rem;
    --lumo-font-size-xxxl: 2.375rem;

    --lumo-line-height-xs: 1.3;
    --lumo-line-height-s: 1.45;
    --lumo-line-height-m: 1.6;

    /* --- Lekerekítés — nagyobb, lágyabb sugarak a modern, letisztult
       hatásért (a Lumo eredeti 0.25em-je szögletesebb, korábbi stílust ad) --- */
    --lumo-border-radius-s: 0.375rem;
    --lumo-border-radius-m: 0.5rem;
    --lumo-border-radius-l: 0.875rem;
    --lumo-border-radius: 0.5rem;

    /* --- Árnyékok — visszafogottabb, semleges (nem kékes) tónusú, lágy
       modern árnyékok --- */
    --lumo-box-shadow-xs: 0 1px 2px 0 var(--lumo-shade-10pct);
    --lumo-box-shadow-s: 0 1px 3px 0 var(--lumo-shade-10pct), 0 2px 6px -2px var(--lumo-shade-20pct);
    --lumo-box-shadow-m: 0 4px 10px -2px var(--lumo-shade-10pct), 0 10px 24px -6px var(--lumo-shade-20pct);
    --lumo-box-shadow-l: 0 8px 20px -4px var(--lumo-shade-10pct), 0 20px 48px -10px var(--lumo-shade-30pct);
    --lumo-box-shadow-xl: 0 12px 28px -6px var(--lumo-shade-10pct), 0 28px 72px -12px var(--lumo-shade-30pct);

    --lumo-shade-5pct: hsla(222, 24%, 8%, 0.04);
    --lumo-shade-10pct: hsla(222, 24%, 8%, 0.07);
    --lumo-shade-20pct: hsla(222, 24%, 8%, 0.12);
    --lumo-shade-30pct: hsla(222, 24%, 8%, 0.18);
    --lumo-shade-40pct: hsla(222, 24%, 8%, 0.26);
    --lumo-shade-50pct: hsla(222, 24%, 8%, 0.36);
    --lumo-shade-60pct: hsla(222, 24%, 8%, 0.46);
    --lumo-shade-70pct: hsla(222, 24%, 8%, 0.58);
    --lumo-shade-80pct: hsla(222, 24%, 8%, 0.72);
    --lumo-shade-90pct: hsla(222, 24%, 8%, 0.88);

    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
    --lumo-tint: #fff;
}

/* --- Sötét variáns (az AppBar fejléce mindig [theme~="dark"]-ot használ,
   erre a kis részleges blokkra ettől függetlenül is szükség van) ---
   Modern, mély "slate" sötét (nem a Lumo kékes-szürkéje). */
[theme~="dark"] {
    --lumo-base-color: hsl(222, 32%, 15%);
    --lumo-contrast-5pct: hsla(220, 40%, 92%, 0.055);
    --lumo-contrast-10pct: hsla(220, 40%, 92%, 0.12);
    --lumo-contrast-20pct: hsla(220, 42%, 92%, 0.2);
    --lumo-contrast-30pct: hsla(220, 44%, 93%, 0.3);
    --lumo-contrast-50pct: hsla(220, 50%, 95%, 0.5);
    --lumo-contrast-60pct: hsla(220, 55%, 96%, 0.62);
    --lumo-contrast: hsl(220, 45%, 98%);
    --lumo-header-text-color: hsl(220, 45%, 98%);
    --lumo-body-text-color: hsla(220, 40%, 97%, 0.92);
    --lumo-secondary-text-color: hsla(220, 36%, 94%, 0.7);
    --lumo-tertiary-text-color: hsla(220, 32%, 90%, 0.5);
    --lumo-primary-text-color: hsl(217, 91%, 76%);
    color: var(--lumo-body-text-color);
    background-color: var(--lumo-base-color);
}

/* ===========================================================================
   TELJES, OLDALSZINTŰ sötét mód — a <html data-theme="dark"> attribútumon
   keresztül (a felhasználói dark/light váltó kapcsolja, lásd app.js +
   MainLayout.php). A fenti [theme~="dark"] csak az AppBar saját, mindig
   sötét fejléc-sávjának volt elég — ez a blokk a TELJES tokenkészletet
   újradefiniálja, hogy minden komponens (kártyák, táblázatok, mezők,
   párbeszédablakok, jelvények) is helyesen, professzionálisan sötétedjen.
   Mély "slate" alap, világosabb/telítettebb elsődleges-hiba-siker színek
   (sötét háttér előtt a visszafogottabb, világos módra hangolt tónusok
   "eltűnnének"), és erősebb árnyékok a láthatóság kedvéért. */
html[data-theme="dark"] {
    --lumo-base-color: hsl(222, 30%, 12%);

    --lumo-contrast-5pct: hsla(220, 38%, 92%, 0.05);
    --lumo-contrast-10pct: hsla(220, 40%, 92%, 0.1);
    --lumo-contrast-20pct: hsla(220, 40%, 92%, 0.16);
    --lumo-contrast-30pct: hsla(220, 42%, 93%, 0.24);
    --lumo-contrast-40pct: hsla(220, 44%, 93%, 0.34);
    --lumo-contrast-50pct: hsla(220, 46%, 94%, 0.46);
    --lumo-contrast-60pct: hsla(220, 50%, 95%, 0.58);
    --lumo-contrast-70pct: hsla(220, 53%, 96%, 0.7);
    --lumo-contrast-80pct: hsla(220, 56%, 97%, 0.82);
    --lumo-contrast-90pct: hsla(220, 58%, 98%, 0.93);
    --lumo-contrast: hsl(220, 42%, 97%);

    --lumo-primary-color-10pct: hsla(221, 83%, 65%, 0.14);
    --lumo-primary-color-50pct: hsla(221, 83%, 65%, 0.5);
    --lumo-primary-color: hsl(221, 83%, 63%);
    --lumo-primary-text-color: hsl(217, 91%, 76%);
    --lumo-primary-contrast-color: hsl(222, 30%, 10%);

    --lumo-error-color-10pct: hsla(355, 85%, 66%, 0.14);
    --lumo-error-color-50pct: hsla(355, 85%, 66%, 0.5);
    --lumo-error-color: hsl(355, 85%, 64%);
    --lumo-error-text-color: hsl(355, 92%, 74%);
    --lumo-error-contrast-color: hsl(222, 30%, 10%);

    --lumo-success-color-10pct: hsla(158, 55%, 48%, 0.14);
    --lumo-success-color-50pct: hsla(158, 55%, 48%, 0.5);
    --lumo-success-color: hsl(158, 58%, 46%);
    --lumo-success-text-color: hsl(158, 65%, 60%);
    --lumo-success-contrast-color: hsl(222, 30%, 10%);

    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    /* Mélyebb, feketébb (nem a világos mód kékes-szürkéje) és jóval
       erősebb alfájú árnyékok — sötét alapon egy "light mode"-erősségű
       árnyék gyakorlatilag láthatatlan lenne. */
    --lumo-shade-5pct: hsla(220, 60%, 2%, 0.18);
    --lumo-shade-10pct: hsla(220, 60%, 2%, 0.3);
    --lumo-shade-20pct: hsla(220, 60%, 2%, 0.42);
    --lumo-shade-30pct: hsla(220, 60%, 2%, 0.52);
    --lumo-shade-40pct: hsla(220, 60%, 2%, 0.62);
    --lumo-shade-50pct: hsla(220, 60%, 2%, 0.7);
    --lumo-shade-60pct: hsla(220, 60%, 2%, 0.78);
    --lumo-shade-70pct: hsla(220, 60%, 2%, 0.84);
    --lumo-shade-80pct: hsla(220, 60%, 2%, 0.9);
    --lumo-shade-90pct: hsla(220, 60%, 2%, 0.96);

    --lumo-tint-5pct: hsla(220, 50%, 97%, 0.06);
    --lumo-tint-10pct: hsla(220, 50%, 97%, 0.1);
    --lumo-tint-60pct: hsla(220, 50%, 97%, 0.5);
    --lumo-tint: hsl(220, 50%, 97%);

    color: var(--lumo-body-text-color);
    background-color: var(--lumo-base-color);
}

/* A jelvény/badge-eken és állapotjelzőkön használt halvány, telt-színű
   háttér-tónusok (--color-halvany*) sötét alapon alacsony alfával
   túl "piszkosnak", kontraszt nélkülinek hatnának — ezért sötét módban
   kicsit erősebb alfával, és minden alap-tónus kicsit világosabban,
   hogy a sötét háttér előtt is jól olvasható, élénk jelvény maradjon. */
html[data-theme="dark"] {
    --color-okkersarga: #F2C14E;
    --color-halvanysarga: #F2C14E3D;
    --color-vilagoskek: #60A5FA;
    --color-halvanykek: #60A5FA3D;
    --color-vilagoszold: #34D399;
    --color-halvanyzold: #34D3993D;
    --color-bibor: #A78BFA;
    --color-halvanybibor: #A78BFA3D;
    --color-szurke: #94A3B8;
    --color-pink: #F472B6;
    --color-turkiz: #2DD4DA;
    --color-halvanyturkiz: #2DD4DA3D;
    --color-narancssarga: #FBBF24;
    --color-paradicsom: #FB7154;
    --color-halvanypiros: #FB71545D;
    --color-paradicsom-hover: #FB715480;
    --color-okkersarga-hover: #F2C14E80;
}

/* --- A projekt saját, kiegészítő színei (állapotjelzők, badge-ek stb.) ---
   Kicsit visszafogottabb, egymással jobban harmonizáló tónusok, mint az
   eredeti, élénk Lumo-kiegészítő paletta. */
:root {
    --color-okkersarga: #E3A008;
    --color-halvanysarga: #E3A00830;
    --color-vilagoskek: #3B82F6;
    --color-halvanykek: #3B82F630;
    --color-vilagoszold: #22A06B;
    --color-halvanyzold: #22A06B30;
    --color-bibor: #7C5CD6;
    --color-halvanybibor: #7C5CD630;
    --color-szurke: #64748B;
    --color-pink: #DB4C77;
    --color-turkiz: #0EA5B5;
    --color-halvanyturkiz: #0EA5B52E;
    --color-narancssarga: #F59E0B;
    --color-paradicsom: #E4572E;
    --color-halvanypiros: #E4572E4D;
    --color-paradicsom-hover: #E4572E80;
    --color-okkersarga-hover: #E3A00880;
}