/* ============================================================
   LexTime - "Erdő és csont" design system
   Elkötelezett mély erdőzöld márkaszín + csont-semleges felület.
   Committed: a zöld viszi az oldalsávot; egyébként Restrained.
   Tipográfia: IBM Plex Sans (UI), Mono (számok), Serif (csak wordmark + díjbekérő fejléc).
   Szín OKLCH-ban. Light az elsődleges (nappali iroda); dark a rendszer-preferenciára.
   ============================================================ */

:root {
    /* ---- felületek (csont-semleges, nagyon alacsony zöld chroma, NEM krém) ---- */
    --bg:            oklch(0.985 0.006 145);
    --surface:       oklch(1 0 0);
    --surface-2:     oklch(0.967 0.007 145);   /* tábla-fej, sor-hover, halvány kitöltés */
    --surface-3:     oklch(0.944 0.009 146);
    --border:        oklch(0.912 0.008 146);
    --border-strong: oklch(0.858 0.011 147);

    /* ---- tinta ---- */
    --ink:   oklch(0.27 0.018 152);            /* fő szöveg, majdnem fekete zöld árnyalattal */
    --ink-2: oklch(0.448 0.016 150);           /* másodlagos szöveg, placeholder (>=4.5:1) */
    --ink-3: oklch(0.60 0.014 150);            /* halvány, csak nem-kritikus jelzés */

    /* ---- márka akcent (erdőzöld) ---- */
    --accent:        oklch(0.46 0.10 151);     /* elsődleges gomb, link, kijelölés */
    --accent-strong: oklch(0.405 0.10 151);    /* hover / active */
    --accent-weak:   oklch(0.95 0.032 150);    /* kijelölt sor / halvány tint háttér */
    --accent-ink:    oklch(0.42 0.105 151);    /* akcent-színű szöveg világoson (link) */
    --on-accent:     oklch(0.99 0.01 150);     /* szöveg az akcenten (≈fehér) */
    --ring:          oklch(0.46 0.10 151 / 0.32);

    /* ---- oldalsáv: elkötelezett mély erdőzöld (mindkét témában) ---- */
    --sidebar-bg:         oklch(0.275 0.041 153);
    --sidebar-bg-2:       oklch(0.335 0.046 153);   /* hover */
    --sidebar-ink:        oklch(0.905 0.022 150);
    --sidebar-ink-2:      oklch(0.735 0.030 150);   /* muted (>=4.5:1 a sávon) */
    --sidebar-active-bg:  oklch(0.375 0.052 153);
    --sidebar-active-bar: oklch(0.80 0.135 148);
    --sidebar-border:     oklch(1 0 0 / 0.10);
    --on-sidebar-active:  #fff;                      /* aktív menüpont szövege (világos sávú skinnél sötétre vált) */

    /* ---- szemantikus állapotok ---- */
    --ok:        oklch(0.50 0.11 150);   --ok-bg:     oklch(0.95 0.045 150);
    --info:      oklch(0.49 0.085 235);  --info-bg:   oklch(0.95 0.03 235);
    --warn:      oklch(0.505 0.115 70);  --warn-bg:   oklch(0.955 0.045 80);
    --danger:    oklch(0.515 0.165 28);  --danger-bg: oklch(0.95 0.04 28);

    /* ---- forma ---- */
    --radius:    10px;
    --radius-sm: 7px;
    --radius-xs: 5px;
    --shadow-sm: 0 1px 2px rgba(22, 35, 26, .05), 0 1px 3px rgba(22, 35, 26, .04);
    --shadow-md: 0 4px 14px rgba(22, 35, 26, .08);
    --shadow-lg: 0 12px 32px rgba(22, 35, 26, .14);

    --sidebar-w: 244px;
    --topbar-h:  60px;

    /* ---- tipográfia (fix rem skála, ~1.2 arány) ---- */
    --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
    --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-display: var(--font-sans);   /* nagy címsorok (h1-h2); a skinek serif/mono-ra válthatják */

    --fs-display: 1.875rem;  /* 30 - stat érték */
    --fs-h1: 1.5rem;         /* 24 */
    --fs-h2: 1.25rem;        /* 20 */
    --fs-h3: 1.125rem;       /* 18 */
    --fs-lg: 1rem;           /* 16 */
    --fs-base: 0.9375rem;    /* 15 - törzs */
    --fs-sm: 0.8125rem;      /* 13 */
    --fs-xs: 0.75rem;        /* 12 */

    /* ---- z-index skála ---- */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-backdrop: 1040;
    --z-drawer:   1050;
    --z-modal:    1055;
    --z-toast:    1060;

    --speed: 170ms;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

[data-theme="dark"] {
    --bg:            oklch(0.195 0.012 152);
    --surface:       oklch(0.235 0.014 152);
    --surface-2:     oklch(0.275 0.016 152);
    --surface-3:     oklch(0.31 0.018 152);
    --border:        oklch(0.325 0.016 152);
    --border-strong: oklch(0.40 0.020 152);

    --ink:   oklch(0.93 0.016 145);
    --ink-2: oklch(0.745 0.020 145);
    --ink-3: oklch(0.58 0.020 145);

    --accent:        oklch(0.66 0.12 150);
    --accent-strong: oklch(0.72 0.13 150);
    --accent-weak:   oklch(0.30 0.035 150);
    --accent-ink:    oklch(0.76 0.12 150);
    --on-accent:     oklch(0.18 0.03 150);
    --ring:          oklch(0.66 0.12 150 / 0.40);

    --ok:        oklch(0.74 0.12 150);   --ok-bg:     oklch(0.305 0.045 150);
    --info:      oklch(0.72 0.09 235);   --info-bg:   oklch(0.305 0.035 235);
    --warn:      oklch(0.78 0.11 80);    --warn-bg:   oklch(0.32 0.05 80);
    --danger:    oklch(0.70 0.15 28);    --danger-bg: oklch(0.32 0.055 28);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .42);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
}

/* ============================================================
   SKIN-RÉTEG - tenant-szintű arculatok a forest alap fölött.
   A [data-skin] felülírja a tokeneket; a [data-skin][data-theme="dark"]
   adja a sötét változatot. A komponens-CSS változatlan (token-vezérelt).
   A skin az iroda identitása; a kontraszt minden skinben tartja a WCAG AA-t.
   ============================================================ */

/* ---- Lex Editorial: szerkesztőségi tekintély, tinta-bordó (oxblood), dráma-serif címsor ---- */
[data-skin="editorial"] {
    --font-display: 'Fraunces', 'IBM Plex Serif', Georgia, serif;
    --font-serif:   'Fraunces', 'IBM Plex Serif', Georgia, serif;

    --bg:            oklch(0.972 0.008 28);
    --surface:       oklch(0.995 0.003 30);
    --surface-2:     oklch(0.963 0.010 26);
    --surface-3:     oklch(0.938 0.013 26);
    --border:        oklch(0.898 0.013 26);
    --border-strong: oklch(0.838 0.017 24);

    --ink:   oklch(0.255 0.032 24);
    --ink-2: oklch(0.430 0.038 24);
    --ink-3: oklch(0.575 0.032 24);

    --accent:        oklch(0.440 0.155 18);
    --accent-strong: oklch(0.375 0.150 18);
    --accent-weak:   oklch(0.950 0.035 22);
    --accent-ink:    oklch(0.425 0.160 18);
    --on-accent:     oklch(0.990 0.008 60);
    --ring:          oklch(0.440 0.155 18 / 0.34);

    --sidebar-bg:         oklch(0.305 0.085 20);
    --sidebar-bg-2:       oklch(0.365 0.090 20);
    --sidebar-ink:        oklch(0.930 0.025 40);
    --sidebar-ink-2:      oklch(0.790 0.045 36);
    --sidebar-active-bg:  oklch(0.400 0.100 20);
    --sidebar-active-bar: oklch(0.740 0.140 38);
    --sidebar-border:     oklch(1 0 0 / 0.12);
}
[data-skin="editorial"][data-theme="dark"] {
    --bg:            oklch(0.200 0.022 20);
    --surface:       oklch(0.245 0.026 20);
    --surface-2:     oklch(0.290 0.030 20);
    --surface-3:     oklch(0.335 0.032 20);
    --border:        oklch(0.340 0.030 20);
    --border-strong: oklch(0.420 0.035 20);

    --ink:   oklch(0.930 0.020 40);
    --ink-2: oklch(0.750 0.028 36);
    --ink-3: oklch(0.600 0.026 30);

    --accent:        oklch(0.640 0.165 22);
    --accent-strong: oklch(0.700 0.160 22);
    --accent-weak:   oklch(0.320 0.060 20);
    --accent-ink:    oklch(0.745 0.155 24);
    --on-accent:     oklch(0.180 0.030 20);
    --ring:          oklch(0.640 0.165 22 / 0.42);

    --sidebar-bg:         oklch(0.175 0.042 20);
    --sidebar-bg-2:       oklch(0.235 0.050 20);
    --sidebar-ink:        oklch(0.900 0.030 40);
    --sidebar-ink-2:      oklch(0.720 0.040 36);
    --sidebar-active-bg:  oklch(0.300 0.070 22);
    --sidebar-active-bar: oklch(0.660 0.150 30);
    --sidebar-border:     oklch(1 0 0 / 0.10);
}

/* ---- Chambers Noir: sötét kamara, réz/bronz akcent, meleg könyv-serif címsor ---- */
[data-skin="noir"] {
    --font-display: 'Lora', 'IBM Plex Serif', Georgia, serif;
    --font-serif:   'Lora', 'IBM Plex Serif', Georgia, serif;

    --bg:            oklch(0.960 0.005 80);
    --surface:       oklch(0.995 0.002 80);
    --surface-2:     oklch(0.960 0.006 78);
    --surface-3:     oklch(0.935 0.008 76);
    --border:        oklch(0.890 0.008 76);
    --border-strong: oklch(0.830 0.010 74);

    --ink:   oklch(0.270 0.015 70);
    --ink-2: oklch(0.450 0.018 70);
    --ink-3: oklch(0.600 0.018 72);

    --accent:        oklch(0.500 0.105 62);
    --accent-strong: oklch(0.440 0.105 62);
    --accent-weak:   oklch(0.930 0.040 72);
    --accent-ink:    oklch(0.470 0.110 60);
    --on-accent:     oklch(0.990 0.012 80);
    --ring:          oklch(0.500 0.105 62 / 0.34);

    --sidebar-bg:         oklch(0.200 0.012 65);
    --sidebar-bg-2:       oklch(0.260 0.014 65);
    --sidebar-ink:        oklch(0.900 0.015 75);
    --sidebar-ink-2:      oklch(0.720 0.025 70);
    --sidebar-active-bg:  oklch(0.300 0.030 65);
    --sidebar-active-bar: oklch(0.700 0.120 65);
    --sidebar-border:     oklch(1 0 0 / 0.10);
}
[data-skin="noir"][data-theme="dark"] {
    --bg:            oklch(0.175 0.008 65);
    --surface:       oklch(0.220 0.010 65);
    --surface-2:     oklch(0.260 0.012 65);
    --surface-3:     oklch(0.300 0.014 65);
    --border:        oklch(0.310 0.012 65);
    --border-strong: oklch(0.400 0.015 65);

    --ink:   oklch(0.920 0.012 75);
    --ink-2: oklch(0.730 0.018 72);
    --ink-3: oklch(0.580 0.018 70);

    --accent:        oklch(0.720 0.110 68);
    --accent-strong: oklch(0.780 0.120 68);
    --accent-weak:   oklch(0.300 0.040 65);
    --accent-ink:    oklch(0.760 0.110 68);
    --on-accent:     oklch(0.190 0.020 65);
    --ring:          oklch(0.720 0.110 68 / 0.42);

    --sidebar-bg:         oklch(0.145 0.008 65);
    --sidebar-bg-2:       oklch(0.210 0.010 65);
    --sidebar-ink:        oklch(0.890 0.015 75);
    --sidebar-ink-2:      oklch(0.700 0.025 70);
    --sidebar-active-bg:  oklch(0.270 0.030 65);
    --sidebar-active-bar: oklch(0.720 0.120 68);
    --sidebar-border:     oklch(1 0 0 / 0.09);
}

/* ---- Statute brutal: svájci akta, mono, vastag sötét keret, borostyán highlight.
       Modell: PRIMARY = tinta (sötét), HIGHLIGHT = borostyán (accent-weak / active-bar). ---- */
[data-skin="brutal"] {
    --font-display: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-serif:   'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --bg:            oklch(0.970 0.002 90);
    --surface:       oklch(1 0 0);
    --surface-2:     oklch(0.960 0.004 88);
    --surface-3:     oklch(0.930 0.006 85);
    --border:        oklch(0.320 0.012 90);
    --border-strong: oklch(0.220 0.012 90);

    --ink:   oklch(0.215 0.008 90);
    --ink-2: oklch(0.420 0.010 88);
    --ink-3: oklch(0.560 0.012 85);

    --accent:        oklch(0.250 0.012 90);
    --accent-strong: oklch(0.155 0.012 90);
    --accent-weak:   oklch(0.870 0.145 82);
    --accent-ink:    oklch(0.400 0.115 70);
    --on-accent:     oklch(0.990 0.005 90);
    --ring:          oklch(0.620 0.160 78 / 0.50);

    --ok:     oklch(0.500 0.110 150);  --ok-bg:     oklch(0.930 0.060 150);
    --info:   oklch(0.490 0.085 235);  --info-bg:   oklch(0.930 0.045 235);
    --warn:   oklch(0.500 0.130 55);   --warn-bg:   oklch(0.920 0.075 60);
    --danger: oklch(0.515 0.165 28);   --danger-bg: oklch(0.930 0.055 28);

    --sidebar-bg:         oklch(0.970 0.002 90);
    --sidebar-bg-2:       oklch(0.910 0.012 82);
    --sidebar-ink:        oklch(0.220 0.008 90);
    --sidebar-ink-2:      oklch(0.420 0.010 88);
    --sidebar-active-bg:  oklch(0.870 0.145 82);
    --sidebar-active-bar: oklch(0.220 0.012 90);
    --sidebar-border:     oklch(0.220 0.010 90 / 0.15);
    --on-sidebar-active:  oklch(0.215 0.012 90);

    --shadow-sm: 2px 2px 0 oklch(0.220 0.010 90);
    --shadow-md: 4px 4px 0 oklch(0.220 0.010 90);
    --shadow-lg: 6px 6px 0 oklch(0.220 0.010 90);

    /* éles sarok: a teljes radius-skala nullazasa (svajci akta) */
    --radius: 0; --radius-sm: 0; --radius-xs: 0;
}
[data-skin="brutal"][data-theme="dark"] {
    --bg:            oklch(0.180 0.004 90);
    --surface:       oklch(0.225 0.005 90);
    --surface-2:     oklch(0.270 0.006 90);
    --surface-3:     oklch(0.310 0.008 90);
    --border:        oklch(0.620 0.010 90);
    --border-strong: oklch(0.740 0.012 90);

    --ink:   oklch(0.930 0.006 90);
    --ink-2: oklch(0.720 0.008 88);
    --ink-3: oklch(0.560 0.010 85);

    --accent:        oklch(0.920 0.010 90);
    --accent-strong: oklch(0.990 0.005 90);
    --accent-weak:   oklch(0.420 0.100 80);
    --accent-ink:    oklch(0.820 0.130 80);
    --on-accent:     oklch(0.180 0.010 90);
    --ring:          oklch(0.800 0.150 80 / 0.50);

    --ok:     oklch(0.740 0.120 150);  --ok-bg:     oklch(0.300 0.050 150);
    --info:   oklch(0.720 0.090 235);  --info-bg:   oklch(0.300 0.040 235);
    --warn:   oklch(0.800 0.120 70);   --warn-bg:   oklch(0.310 0.060 60);
    --danger: oklch(0.700 0.150 28);   --danger-bg: oklch(0.310 0.060 28);

    --sidebar-bg:         oklch(0.155 0.004 90);
    --sidebar-bg-2:       oklch(0.220 0.006 90);
    --sidebar-ink:        oklch(0.920 0.006 90);
    --sidebar-ink-2:      oklch(0.700 0.008 88);
    --sidebar-active-bg:  oklch(0.420 0.100 80);
    --sidebar-active-bar: oklch(0.820 0.150 80);
    --sidebar-border:     oklch(1 0 0 / 0.18);
    --on-sidebar-active:  oklch(0.990 0 0);

    --shadow-sm: 2px 2px 0 oklch(0.620 0.010 90);
    --shadow-md: 4px 4px 0 oklch(0.620 0.010 90);
    --shadow-lg: 6px 6px 0 oklch(0.620 0.010 90);
}

/* ============================================================
   EXTRÉM ARCULATOK - 2. hullám (terminal / dejure / lumen / vermillion)
   ============================================================ */

/* ---- Lex Terminal: foszforzöld retró-terminál, monospace + scanline + glow ---- */
[data-skin="terminal"] {
    --font-display: 'VT323', 'IBM Plex Mono', monospace;
    --font-sans:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-serif:   'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --bg:            oklch(0.960 0.018 150);
    --surface:       oklch(0.992 0.010 150);
    --surface-2:     oklch(0.935 0.022 150);
    --surface-3:     oklch(0.900 0.028 150);
    --border:        oklch(0.760 0.055 150);
    --border-strong: oklch(0.600 0.080 150);

    --ink:   oklch(0.300 0.090 152);
    --ink-2: oklch(0.420 0.085 150);
    --ink-3: oklch(0.520 0.075 150);

    --accent:        oklch(0.440 0.125 150);
    --accent-strong: oklch(0.370 0.125 150);
    --accent-weak:   oklch(0.900 0.055 150);
    --accent-ink:    oklch(0.425 0.125 150);
    --on-accent:     oklch(0.985 0.020 150);
    --ring:          oklch(0.440 0.125 150 / 0.40);

    --ok:     oklch(0.450 0.110 150);  --ok-bg:     oklch(0.905 0.055 150);
    --info:   oklch(0.460 0.090 235);  --info-bg:   oklch(0.910 0.040 235);
    --warn:   oklch(0.480 0.110 70);   --warn-bg:   oklch(0.915 0.060 80);
    --danger: oklch(0.490 0.170 28);   --danger-bg: oklch(0.910 0.050 28);

    --sidebar-bg:         oklch(0.215 0.048 152);
    --sidebar-bg-2:       oklch(0.285 0.060 152);
    --sidebar-ink:        oklch(0.895 0.080 150);
    --sidebar-ink-2:      oklch(0.760 0.090 150);
    --sidebar-active-bg:  oklch(0.330 0.080 150);
    --sidebar-active-bar: oklch(0.760 0.160 148);
    --sidebar-border:     oklch(0.800 0.120 150 / 0.20);
    --on-sidebar-active:  oklch(0.965 0.050 150);

    --shadow-sm: 0 1px 2px oklch(0.300 0.05 150 / 0.16);
    --shadow-md: 0 4px 14px oklch(0.300 0.05 150 / 0.16);
    --shadow-lg: 0 12px 32px oklch(0.300 0.05 150 / 0.22);

    --radius: 0; --radius-sm: 0; --radius-xs: 0;
}
[data-skin="terminal"][data-theme="dark"] {
    --bg:            oklch(0.135 0.022 152);
    --surface:       oklch(0.175 0.028 152);
    --surface-2:     oklch(0.215 0.032 152);
    --surface-3:     oklch(0.255 0.036 152);
    --border:        oklch(0.420 0.080 150);
    --border-strong: oklch(0.560 0.110 150);

    --ink:   oklch(0.910 0.165 150);
    --ink-2: oklch(0.760 0.145 150);
    --ink-3: oklch(0.620 0.115 150);

    --accent:        oklch(0.875 0.215 148);
    --accent-strong: oklch(0.940 0.205 148);
    --accent-weak:   oklch(0.300 0.070 150);
    --accent-ink:    oklch(0.885 0.200 148);
    --on-accent:     oklch(0.135 0.030 152);
    --ring:          oklch(0.875 0.215 148 / 0.55);

    --ok:     oklch(0.860 0.190 150);  --ok-bg:     oklch(0.250 0.060 150);
    --info:   oklch(0.825 0.130 200);  --info-bg:   oklch(0.250 0.050 210);
    --warn:   oklch(0.855 0.155 90);   --warn-bg:   oklch(0.270 0.060 90);
    --danger: oklch(0.755 0.200 28);   --danger-bg: oklch(0.275 0.090 28);

    --sidebar-bg:         oklch(0.105 0.018 152);
    --sidebar-bg-2:       oklch(0.165 0.026 152);
    --sidebar-ink:        oklch(0.845 0.160 150);
    --sidebar-ink-2:      oklch(0.645 0.120 150);
    --sidebar-active-bg:  oklch(0.250 0.060 150);
    --sidebar-active-bar: oklch(0.900 0.225 148);
    --sidebar-border:     oklch(0.700 0.150 150 / 0.25);
    --on-sidebar-active:  oklch(0.940 0.205 148);

    --shadow-sm: 0 0 0 1px oklch(0.500 0.100 150 / 0.45);
    --shadow-md: 0 0 14px oklch(0.875 0.215 148 / 0.22);
    --shadow-lg: 0 0 28px oklch(0.875 0.215 148 / 0.30);
}

/* ---- De Jure (Codex): illuminált pergamen, szépia tinta, viaszpecsét-vörös + arany ---- */
[data-skin="dejure"] {
    --font-display: 'Cinzel', 'IBM Plex Serif', Georgia, serif;
    --font-serif:   'Cinzel', 'IBM Plex Serif', Georgia, serif;
    --font-sans:    'EB Garamond', 'IBM Plex Serif', Georgia, serif;

    --bg:            oklch(0.895 0.038 78);
    --surface:       oklch(0.935 0.030 80);
    --surface-2:     oklch(0.860 0.042 76);
    --surface-3:     oklch(0.820 0.046 74);
    --border:        oklch(0.680 0.055 68);
    --border-strong: oklch(0.540 0.070 62);

    --ink:   oklch(0.285 0.055 52);
    --ink-2: oklch(0.420 0.055 52);
    --ink-3: oklch(0.485 0.052 55);

    --accent:        oklch(0.450 0.165 30);
    --accent-strong: oklch(0.380 0.165 30);
    --accent-weak:   oklch(0.865 0.055 40);
    --accent-ink:    oklch(0.445 0.165 30);
    --on-accent:     oklch(0.955 0.028 80);
    --ring:          oklch(0.450 0.165 30 / 0.35);

    --ok:     oklch(0.460 0.095 140);  --ok-bg:     oklch(0.870 0.050 130);
    --info:   oklch(0.440 0.080 245);  --info-bg:   oklch(0.870 0.040 240);
    --warn:   oklch(0.460 0.115 65);   --warn-bg:   oklch(0.892 0.052 72);
    --danger: oklch(0.455 0.175 30);   --danger-bg: oklch(0.870 0.055 35);

    --sidebar-bg:         oklch(0.295 0.045 52);
    --sidebar-bg-2:       oklch(0.355 0.050 52);
    --sidebar-ink:        oklch(0.900 0.040 82);
    --sidebar-ink-2:      oklch(0.745 0.045 75);
    --sidebar-active-bg:  oklch(0.380 0.060 50);
    --sidebar-active-bar: oklch(0.725 0.140 75);
    --sidebar-border:     oklch(0.900 0.060 80 / 0.14);
    --on-sidebar-active:  oklch(0.955 0.035 82);

    --shadow-sm: 0 1px 2px oklch(0.30 0.04 50 / 0.12), 0 1px 3px oklch(0.30 0.04 50 / 0.08);
    --shadow-md: 0 6px 18px oklch(0.30 0.04 50 / 0.16);
    --shadow-lg: 0 16px 40px oklch(0.30 0.04 50 / 0.24);
}
[data-skin="dejure"][data-theme="dark"] {
    --bg:            oklch(0.185 0.022 52);
    --surface:       oklch(0.235 0.026 52);
    --surface-2:     oklch(0.280 0.028 52);
    --surface-3:     oklch(0.320 0.030 52);
    --border:        oklch(0.420 0.040 55);
    --border-strong: oklch(0.520 0.050 58);

    --ink:   oklch(0.895 0.040 82);
    --ink-2: oklch(0.745 0.045 78);
    --ink-3: oklch(0.668 0.050 72);

    --accent:        oklch(0.640 0.155 35);
    --accent-strong: oklch(0.700 0.150 35);
    --accent-weak:   oklch(0.330 0.070 35);
    --accent-ink:    oklch(0.730 0.135 42);
    --on-accent:     oklch(0.180 0.030 50);
    --ring:          oklch(0.640 0.155 35 / 0.45);

    --ok:     oklch(0.760 0.130 140);  --ok-bg:     oklch(0.310 0.055 135);
    --info:   oklch(0.740 0.100 245);  --info-bg:   oklch(0.310 0.050 240);
    --warn:   oklch(0.800 0.130 70);   --warn-bg:   oklch(0.320 0.060 65);
    --danger: oklch(0.700 0.165 32);   --danger-bg: oklch(0.320 0.070 32);

    --sidebar-bg:         oklch(0.145 0.020 52);
    --sidebar-bg-2:       oklch(0.205 0.024 52);
    --sidebar-ink:        oklch(0.885 0.040 82);
    --sidebar-ink-2:      oklch(0.715 0.045 75);
    --sidebar-active-bg:  oklch(0.300 0.055 45);
    --sidebar-active-bar: oklch(0.720 0.140 78);
    --sidebar-border:     oklch(0.800 0.080 80 / 0.12);
    --on-sidebar-active:  oklch(0.950 0.035 82);
}

/* ---- Lumen (Neon Noir): kék-fekete éjszaka, electric cián + hot-magenta neon-glow ---- */
[data-skin="lumen"] {
    --font-display: 'Orbitron', 'IBM Plex Sans', sans-serif;
    --font-serif:   'Orbitron', 'IBM Plex Sans', sans-serif;

    --bg:            oklch(0.970 0.012 230);
    --surface:       oklch(0.995 0.006 230);
    --surface-2:     oklch(0.945 0.018 230);
    --surface-3:     oklch(0.910 0.024 230);
    --border:        oklch(0.840 0.045 230);
    --border-strong: oklch(0.700 0.065 230);

    --ink:   oklch(0.250 0.050 265);
    --ink-2: oklch(0.400 0.060 260);
    --ink-3: oklch(0.520 0.070 255);

    --accent:        oklch(0.502 0.150 215);
    --accent-strong: oklch(0.440 0.150 215);
    --accent-weak:   oklch(0.910 0.060 210);
    --accent-ink:    oklch(0.500 0.148 215);
    --on-accent:     oklch(0.990 0.010 230);
    --ring:          oklch(0.502 0.150 215 / 0.40);

    --ok:     oklch(0.462 0.140 150);  --ok-bg:     oklch(0.912 0.070 155);
    --info:   oklch(0.460 0.120 220);  --info-bg:   oklch(0.912 0.055 225);
    --warn:   oklch(0.470 0.120 75);   --warn-bg:   oklch(0.906 0.068 80);
    --danger: oklch(0.482 0.185 350);  --danger-bg: oklch(0.916 0.060 350);

    --sidebar-bg:         oklch(0.200 0.060 265);
    --sidebar-bg-2:       oklch(0.270 0.075 265);
    --sidebar-ink:        oklch(0.900 0.040 240);
    --sidebar-ink-2:      oklch(0.745 0.055 245);
    --sidebar-active-bg:  oklch(0.300 0.090 220);
    --sidebar-active-bar: oklch(0.750 0.160 205);
    --sidebar-border:     oklch(0.700 0.120 215 / 0.20);
    --on-sidebar-active:  oklch(0.970 0.030 230);

    --shadow-sm: 0 1px 2px oklch(0.25 0.05 265 / 0.14);
    --shadow-md: 0 4px 16px oklch(0.25 0.05 265 / 0.16);
    --shadow-lg: 0 14px 36px oklch(0.25 0.05 265 / 0.22);
}
[data-skin="lumen"][data-theme="dark"] {
    --bg:            oklch(0.150 0.038 265);
    --surface:       oklch(0.195 0.045 265);
    --surface-2:     oklch(0.240 0.052 265);
    --surface-3:     oklch(0.285 0.058 265);
    --border:        oklch(0.440 0.090 260);
    --border-strong: oklch(0.580 0.120 255);

    --ink:   oklch(0.950 0.020 240);
    --ink-2: oklch(0.780 0.045 250);
    --ink-3: oklch(0.620 0.060 255);

    --accent:        oklch(0.800 0.170 205);
    --accent-strong: oklch(0.870 0.150 205);
    --accent-weak:   oklch(0.300 0.100 220);
    --accent-ink:    oklch(0.820 0.150 205);
    --on-accent:     oklch(0.140 0.040 250);
    --ring:          oklch(0.800 0.170 205 / 0.50);

    --ok:     oklch(0.840 0.180 155);  --ok-bg:     oklch(0.260 0.080 160);
    --info:   oklch(0.820 0.140 220);  --info-bg:   oklch(0.260 0.070 230);
    --warn:   oklch(0.860 0.150 90);   --warn-bg:   oklch(0.280 0.070 90);
    --danger: oklch(0.720 0.210 350);  --danger-bg: oklch(0.280 0.110 350);

    --sidebar-bg:         oklch(0.120 0.032 265);
    --sidebar-bg-2:       oklch(0.190 0.045 265);
    --sidebar-ink:        oklch(0.885 0.040 240);
    --sidebar-ink-2:      oklch(0.715 0.055 245);
    --sidebar-active-bg:  oklch(0.270 0.100 210);
    --sidebar-active-bar: oklch(0.800 0.180 205);
    --sidebar-border:     oklch(0.700 0.150 210 / 0.24);
    --on-sidebar-active:  oklch(0.970 0.030 230);

    --shadow-sm: 0 0 0 1px oklch(0.600 0.120 215 / 0.35);
    --shadow-md: 0 0 16px oklch(0.800 0.170 205 / 0.22);
    --shadow-lg: 0 0 32px oklch(0.800 0.170 205 / 0.30);
}

/* ---- Vermillion (Drenched): lakk-vörös teljes elárasztás, arany akcent ---- */
[data-skin="vermillion"] {
    --font-display: 'Playfair Display', 'IBM Plex Serif', Georgia, serif;
    --font-serif:   'Playfair Display', 'IBM Plex Serif', Georgia, serif;

    --bg:            oklch(0.430 0.160 28);
    --surface:       oklch(0.390 0.165 28);
    --surface-2:     oklch(0.350 0.165 28);
    --surface-3:     oklch(0.470 0.150 28);
    --border:        oklch(0.560 0.150 30);
    --border-strong: oklch(0.650 0.140 32);

    --ink:   oklch(0.955 0.040 82);
    --ink-2: oklch(0.870 0.060 80);
    --ink-3: oklch(0.770 0.080 78);

    --accent:        oklch(0.815 0.140 80);
    --accent-strong: oklch(0.875 0.125 82);
    --accent-weak:   oklch(0.500 0.155 30);
    --accent-ink:    oklch(0.850 0.130 80);
    --on-accent:     oklch(0.300 0.120 30);
    --ring:          oklch(0.815 0.140 80 / 0.45);

    --ok:     oklch(0.880 0.130 135);  --ok-bg:     oklch(0.420 0.090 130);
    --info:   oklch(0.880 0.090 230);  --info-bg:   oklch(0.430 0.080 250);
    --warn:   oklch(0.890 0.130 85);   --warn-bg:   oklch(0.470 0.110 60);
    --danger: oklch(0.930 0.055 40);   --danger-bg: oklch(0.300 0.150 28);

    --sidebar-bg:         oklch(0.320 0.165 28);
    --sidebar-bg-2:       oklch(0.380 0.160 28);
    --sidebar-ink:        oklch(0.930 0.050 82);
    --sidebar-ink-2:      oklch(0.820 0.070 80);
    --sidebar-active-bg:  oklch(0.450 0.155 30);
    --sidebar-active-bar: oklch(0.820 0.140 80);
    --sidebar-border:     oklch(0.900 0.080 80 / 0.16);
    --on-sidebar-active:  oklch(0.960 0.040 82);

    --shadow-sm: 0 1px 2px oklch(0.20 0.10 28 / 0.30);
    --shadow-md: 0 6px 18px oklch(0.20 0.10 28 / 0.34);
    --shadow-lg: 0 16px 40px oklch(0.18 0.10 28 / 0.44);
}
[data-skin="vermillion"][data-theme="dark"] {
    --bg:            oklch(0.200 0.095 28);
    --surface:       oklch(0.250 0.105 28);
    --surface-2:     oklch(0.295 0.110 28);
    --surface-3:     oklch(0.340 0.110 28);
    --border:        oklch(0.440 0.130 30);
    --border-strong: oklch(0.540 0.140 32);

    --ink:   oklch(0.930 0.045 82);
    --ink-2: oklch(0.800 0.065 80);
    --ink-3: oklch(0.660 0.080 78);

    --accent:        oklch(0.830 0.140 82);
    --accent-strong: oklch(0.880 0.125 84);
    --accent-weak:   oklch(0.330 0.110 30);
    --accent-ink:    oklch(0.840 0.135 82);
    --on-accent:     oklch(0.200 0.090 28);
    --ring:          oklch(0.830 0.140 82 / 0.45);

    --ok:     oklch(0.840 0.140 135);  --ok-bg:     oklch(0.300 0.075 135);
    --info:   oklch(0.840 0.100 230);  --info-bg:   oklch(0.300 0.065 240);
    --warn:   oklch(0.860 0.140 85);   --warn-bg:   oklch(0.330 0.080 60);
    --danger: oklch(0.760 0.190 30);   --danger-bg: oklch(0.330 0.110 28);

    --sidebar-bg:         oklch(0.160 0.080 28);
    --sidebar-bg-2:       oklch(0.220 0.090 28);
    --sidebar-ink:        oklch(0.920 0.050 82);
    --sidebar-ink-2:      oklch(0.800 0.065 80);
    --sidebar-active-bg:  oklch(0.300 0.110 30);
    --sidebar-active-bar: oklch(0.830 0.140 82);
    --sidebar-border:     oklch(0.880 0.080 80 / 0.14);
    --on-sidebar-active:  oklch(0.960 0.040 82);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);   /* product UI alap: egy család; a nagy címsorok a skin display-fontját kapják */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}
h1, h2 { font-family: var(--font-display); }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code {
    font-family: var(--font-mono); font-size: .9em;
    background: var(--surface-2); padding: 1px 6px; border-radius: var(--radius-xs);
}

/* tabuláris számok pénz / idő / iktatószám oszlopokhoz */
.num, td.num, .stat-value, .invoice-totals, .invoice-meta { font-variant-numeric: tabular-nums; }
.num { font-feature-settings: "tnum" 1; }

/* fókusz-gyűrű: csak billentyűzetnél */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-xs); }

::selection { background: var(--accent-weak); color: var(--ink); }
::placeholder { color: var(--ink-2); opacity: 1; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; height: 100vh; height: 100dvh;
    z-index: var(--z-drawer);
}
.sidebar-brand {
    display: flex; align-items: center; gap: 11px;
    height: var(--topbar-h); padding: 0 20px;
    border-bottom: 1px solid var(--sidebar-border);
}
.brand-mark {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--sidebar-active-bar);
    color: var(--sidebar-bg);
    font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 1;
}
.brand-name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sidebar-ink); }

.nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 13px; border-radius: var(--radius-sm);
    color: var(--sidebar-ink-2); font-weight: 500; font-size: var(--fs-base);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-item:hover { background: var(--sidebar-bg-2); color: var(--sidebar-ink); text-decoration: none; }
.nav-item:focus-visible { box-shadow: 0 0 0 3px var(--sidebar-active-bar); }
.nav-item.is-active {
    background: var(--sidebar-active-bg); color: var(--on-sidebar-active); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sidebar-active-bar);
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .92; }
.nav-section { padding: 15px 12px 5px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-ink-2); }
.nav-section:first-child { padding-top: 2px; }

.sidebar-foot { padding: 14px 20px; border-top: 1px solid var(--sidebar-border); }
.badge-secure {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); color: var(--sidebar-ink-2); font-weight: 500;
}
.badge-secure svg { width: 14px; height: 14px; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: var(--topbar-h);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; gap: 14px;
    position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-title h1 { font-size: var(--fs-h2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-chip {
    font-size: var(--fs-xs); color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.topbar-user { display: flex; align-items: center; gap: 12px; }
.user-meta { text-align: right; line-height: 1.2; }
.user-name { font-weight: 600; font-size: var(--fs-base); }
.user-role { font-size: var(--fs-xs); color: var(--ink-2); }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    display: grid; place-items: center; font-weight: 600; font-size: var(--fs-base);
    flex: none;
}

/* ikon-gomb (topbar vezérlők) */
.icon-btn {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-2); cursor: pointer;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-toggle { display: none; }
/* A téma-gomb ikonja a választott MÓD-ot tükrözi (nem a tényleges témát): nap=világos, hold=sötét, fél-kör=automatikus. */
.theme-toggle .i-sun, .theme-toggle .i-moon, .theme-toggle .i-auto { display: none; }
.theme-toggle[data-mode="light"] .i-sun { display: block; }
.theme-toggle[data-mode="dark"] .i-moon { display: block; }
.theme-toggle[data-mode="auto"] .i-auto { display: block; }
.theme-toggle:not([data-mode]) .i-auto { display: block; } /* JS előtti alap: automatikus */

.content { padding: 26px 32px 48px; max-width: none; width: 100%; }
.cell-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.page-intro { color: var(--ink-2); margin-bottom: 22px; }
.page-intro strong { color: var(--ink); font-weight: 600; }

/* mobil-sávhoz elsötétítő réteg */
.sidebar-scrim {
    position: fixed; inset: 0; background: oklch(0.2 0.02 152 / 0.5);
    z-index: var(--z-backdrop); opacity: 0; pointer-events: none;
    transition: opacity var(--speed) var(--ease);
}
.sidebar-scrim.show { opacity: 1; pointer-events: auto; }

/* ---------- stat kártyák ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat-value { font-size: var(--fs-display); font-weight: 600; color: var(--accent-ink); line-height: 1.1; letter-spacing: -0.02em; }
.stat-value span { font-weight: 500; color: var(--ink-2); }
.stat-label { font-weight: 600; font-size: var(--fs-base); margin-top: 4px; }
.stat-hint { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 1px; }

/* ---------- card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: var(--fs-h3); }
.card-body { padding: 20px; }
.check-list { margin: 0; padding-left: 18px; }
.check-list li { margin: 6px 0; }

.chip { font-size: var(--fs-xs); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.chip-success { background: var(--ok-bg); color: var(--ok); }

/* ---------- gombok (teljes állapot-szótár) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base);
    line-height: 1.2; padding: 9px 16px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
                color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform 60ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); text-decoration: none; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); text-decoration: none; }
/* másodlagos = nyugodt, körvonalas (nem konkurál az elsődlegessel) */
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-3); text-decoration: none; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.btn-danger { background: transparent; border-color: color-mix(in oklab, var(--danger) 45%, transparent); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); text-decoration: none; }
.btn-link { background: transparent; color: var(--accent-ink); padding: 6px 8px; }
.btn-link:hover { text-decoration: underline; }

/* loading állapot: spinner, input blokkolva */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 15px; height: 15px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    color: var(--on-accent); animation: spin .6s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after, .btn-danger.is-loading::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- űrlapok ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea, .input-search {
    font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink);
    padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); width: 100%;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus, .input-search:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
    background: var(--surface-2); color: var(--ink-2); cursor: not-allowed; opacity: .8;
}
.field input[readonly], .field textarea[readonly] { background: var(--surface-2); color: var(--ink-2); }
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
select { cursor: pointer; }

/* ---------- alertek ---------- */
.alert { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: var(--fs-base); border: 1px solid transparent; display: flex; gap: 9px; align-items: flex-start; }
.alert-danger  { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.alert-info    { background: var(--info-bg); color: var(--info); border-color: color-mix(in oklab, var(--info) 30%, transparent); }

/* ---------- auth ---------- */
body.auth {
    display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px;
    background:
        radial-gradient(120% 80% at 15% 0%, oklch(0.36 0.06 153) 0%, transparent 55%),
        linear-gradient(165deg, var(--sidebar-bg) 0%, oklch(0.22 0.035 155) 100%);
}
.auth-wrap { width: 100%; max-width: 408px; }
.auth-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-brand .brand-mark { background: var(--accent); color: var(--on-accent); }
.auth-brand .brand-name { font-size: 1.4rem; color: var(--ink); }
.auth-brand .brand-sub { font-size: var(--fs-sm); color: var(--ink-2); }
.auth-title { font-size: var(--fs-h1); margin-bottom: 4px; }
.auth-lead { color: var(--ink-2); margin: 0 0 22px; }
.auth-links { margin-top: 18px; text-align: center; font-size: var(--fs-base); }
.auth-foot { text-align: center; color: var(--sidebar-ink-2); font-size: var(--fs-xs); margin-top: 18px; }

/* ---------- oldal-fejléc + eszköztár ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h1 { font-size: var(--fs-h1); }
.page-header .sub { color: var(--ink-2); font-size: var(--fs-base); margin-top: 3px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input-search { min-width: 220px; width: auto; }
.toolbar .select2-container { width: auto !important; min-width: 170px; }
.topbar-new-entry { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; }
.topbar-new-entry svg { width: 17px; height: 17px; }

/* ---------- adattábla ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.data th {
    text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px;
    color: var(--ink-2); font-weight: 600; padding: 11px 16px;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background var(--speed) var(--ease); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tr[data-href] { cursor: pointer; }
table.data tr[data-href]:focus-visible { background: var(--accent-weak); outline: none; }
table.data tbody tr.is-selected { background: var(--accent-weak); }
table.data td.actions, table.data th.actions { text-align: right; white-space: nowrap; }
table.data .primary-cell { font-weight: 600; color: var(--ink); }
table.data .sub-cell { color: var(--ink-2); font-size: var(--fs-sm); }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* ---------- badge-ek / státusz ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--ok-bg); color: var(--ok); }
.badge-info    { background: var(--info-bg); color: var(--info); }
.badge-warning { background: var(--warn-bg); color: var(--warn); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-muted   { background: var(--surface-3); color: var(--ink-2); }
.badge-secondary { background: var(--accent-weak); color: var(--accent-ink); }
.badge.role { text-transform: none; }

/* ---------- űrlap-elrendezés ---------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; max-width: 920px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { margin-top: 4px; }
.form-section + .form-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.form-section h4 { font-size: var(--fs-lg); margin-bottom: 14px; color: var(--ink); }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.required-mark { color: var(--danger); }
.field .help { font-size: var(--fs-xs); color: var(--ink-2); }
.field-error { font-size: var(--fs-sm); color: var(--danger); }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* ---------- üres állapot ---------- */
.empty { text-align: center; padding: 56px 24px; color: var(--ink-2); }
.empty svg { width: 44px; height: 44px; opacity: .45; margin-bottom: 12px; color: var(--accent); }
.empty h3 { font-size: var(--fs-h3); color: var(--ink); margin-bottom: 6px; }
.empty p { margin: 0 0 18px; max-width: 42ch; margin-inline: auto; }

/* skeleton betöltés (spinner helyett) */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; border-radius: var(--radius-xs); animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- adatlap (show) ---------- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; margin: 0; }
.kv dt { color: var(--ink-2); font-size: var(--fs-sm); }
.kv dd { margin: 0; font-size: var(--fs-base); word-break: break-word; }
.kv dd.empty-val { color: var(--ink-3); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.section-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-2); font-weight: 600; margin-bottom: 12px; }

/* hozzárendelt személyek / pill-ek */
.pill-list { display: flex; flex-direction: column; gap: 8px; }
.pill { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-base); }
.pill .who { display: flex; align-items: center; gap: 9px; }
.pill .who .mini-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; }
.pill form { margin: 0; }
.pill .x { background: none; border: none; color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; padding: 3px 7px; border-radius: var(--radius-xs); transition: background var(--speed) var(--ease), color var(--speed) var(--ease); }
.pill .x:hover { color: var(--danger); background: var(--danger-bg); }

/* inline űrlapok */
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1; min-width: 120px; }
.inline-form.compact { gap: 8px; }

/* idővonal */
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.history li:last-child { border-bottom: none; }
.history .when { color: var(--ink-2); font-size: var(--fs-xs); margin-left: auto; }

.breadcrumb { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--accent-ink); }
.muted-text { color: var(--ink-2); }

/* ---------- szűrősáv, mérősáv, díjbekérő ---------- */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.filter-bar .field { margin: 0; min-width: 150px; }
.filter-bar .field-label { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 2px; }

.meter { display: inline-block; width: 92px; height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--speed) var(--ease); }
.meter-label { font-size: var(--fs-xs); color: var(--ink-2); margin-left: 7px; }

/* Teljesítmény: kétrétegű haladás-sáv (rögzített vs jóváhagyott, a heti óracélra vetítve) + jelmagyarázat */
.meter-dual { position: relative; width: 100%; max-width: 260px; }
.meter-dual span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; transition: width var(--speed) var(--ease); }
.meter-dual .m-rec { background: var(--accent-weak); }
.meter-dual .m-app { background: var(--accent); }
.meter-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 12px; color: var(--ink-2); }
.meter-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.meter-legend .sw-rec { background: var(--accent-weak); }
.meter-legend .sw-app { background: var(--accent); }

/* Szegmentált fülek (időszak-választó) */
.seg-tabs { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.seg-tabs .seg { padding: 8px 18px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-right: 1px solid var(--border); transition: background var(--speed) var(--ease), color var(--speed) var(--ease); }
.seg-tabs .seg:last-child { border-right: none; }
.seg-tabs .seg:hover { background: var(--surface-2); color: var(--ink); }
.seg-tabs .seg.is-active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }

/* Beállítások: téma-paletta választó */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.palette { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); }
.palette:hover { background: var(--surface-2); }
.palette.is-active, .palette:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.palette input { position: absolute; opacity: 0; pointer-events: none; }
.palette-swatch { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.palette-name { font-size: 13px; color: var(--ink); }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 54px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); cursor: pointer; }
.color-hex { width: 120px; font-family: var(--font-mono); text-transform: uppercase; }

/* Beállítások: arculat (skin) választó */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.skin-opt { position: relative; display: flex; gap: 13px; align-items: center; padding: 12px 13px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); }
.skin-opt:hover { background: var(--surface-2); }
.skin-opt.is-active, .skin-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.skin-opt input { position: absolute; opacity: 0; pointer-events: none; }
.skin-prev { position: relative; flex: 0 0 auto; width: 56px; height: 42px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.skin-prev-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--p-bg); }
.skin-prev-dot { position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--p-ac); }
.skin-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skin-name { font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.skin-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }

/* számlázó-integráció: két oszlop (Számlázz.hu | Billingo) */
.integration-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.integration-col { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.integration-col-title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .integration-cols { grid-template-columns: 1fr; } }

/* díjbekérő képernyős nézet */
.invoice-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; max-width: 840px; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; margin-bottom: 24px; }
.invoice-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--ink-2); margin-bottom: 4px; }
.invoice-name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--accent-ink); }
.invoice-line { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
.invoice-meta div { display: flex; justify-content: space-between; gap: 18px; font-size: var(--fs-sm); padding: 2px 0; }
.invoice-meta span { color: var(--ink-2); }
.invoice-items { margin: 8px 0 18px; }
.invoice-totals { margin-left: auto; width: 320px; max-width: 100%; }
.invoice-totals div { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-base); }
.invoice-totals .grand { border-top: 2px solid var(--accent); margin-top: 4px; padding-top: 10px; font-size: var(--fs-h3); color: var(--accent-ink); }
.invoice-totals .grand strong { font-family: var(--font-serif); font-weight: 600; }
/* tiltott oldal-csík HELYETT: teljes körvonal + halvány tint */
.invoice-note { margin-top: 20px; padding: 12px 14px; background: var(--accent-weak); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink); }
.invoice-foot { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-xs); }

/* ---------- F4: skip-link, sor-linkek, tfoot, hibaoldal ---------- */
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: var(--z-toast);
    background: var(--accent); color: var(--on-accent);
    padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm);
    transform: translateY(-160%); transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* táblázat elsődleges-cella link: úgy néz ki mint a szöveg, de fókuszálható/billentyűzhető */
.primary-cell a { color: var(--ink); font-weight: 600; text-decoration: none; }
.primary-cell a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.primary-cell a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-xs); }

table.data tfoot td { border-top: 2px solid var(--border-strong); background: var(--surface-2); font-weight: 600; padding: 12px 16px; }

.error-page { text-align: center; }
.error-code { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 600; line-height: 1; color: var(--accent-ink); letter-spacing: -0.02em; margin-bottom: 6px; }
.error-page .auth-title { text-align: center; }
.error-page .auth-lead { text-align: center; }
.error-page .btn { margin-top: 4px; }

/* ---------- időbejegyzés: gyorsgombok + költségek + Select2 ---------- */
.quick-mins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-mins button {
    font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
    color: var(--accent-ink); background: var(--accent-weak);
    border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
    border-radius: 999px; padding: 4px 12px; cursor: pointer;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.quick-mins button:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.quick-mins button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.cost-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.cost-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cost-rows { display: flex; flex-direction: column; gap: 8px; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 180px 36px; gap: 8px; align-items: center; }
.cost-row input {
    width: 100%; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink);
    padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.cost-row input::placeholder { color: var(--ink-3); }
.cost-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cost-row .x {
    background: none; border: 1px solid var(--border); color: var(--ink-2); cursor: pointer;
    font-size: 17px; line-height: 1; width: 36px; height: 36px; border-radius: var(--radius-xs);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.cost-row .x:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* Időbejegyzés: kétoszlopos elrendezés (bal: felvétel, jobb: lista) */
.entry-split { display: grid; grid-template-columns: minmax(520px, 680px) minmax(0, 1fr); gap: 24px; align-items: start; }
.entry-split > * { min-width: 0; }          /* a Select2 hosszú szövege ne feszítse szét az oszlopot */
.entry-split .field { min-width: 0; }
.entry-split .cost-row { grid-template-columns: 1fr 1fr; gap: 6px; }
.entry-split .cost-row .x { width: 36px; }
@media (max-width: 1320px) { .entry-split { grid-template-columns: minmax(0, 1fr); } }

/* Szerkesztő modál (időbejegyzés) */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal.open, .modal.closing { display: flex; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(22, 35, 26, .45); backdrop-filter: blur(2px); animation: modal-fade 240ms var(--ease); }
.modal-panel { position: relative; z-index: 1; width: 100%; max-width: 660px; animation: modal-in 280ms var(--ease); transform-origin: center top; }
/* záráskor: a .closing osztály (app.js) lefuttatja a kilépő fade+zoom-ot, mielőtt a modál eltűnik */
.modal.closing .modal-backdrop { animation: modal-fade-out 240ms var(--ease) forwards; }
.modal.closing .modal-panel { animation: modal-out 260ms var(--ease) forwards; }
.modal-panel .card { box-shadow: var(--shadow-lg); }
.modal-x { position: absolute; top: 11px; right: 13px; z-index: 2; width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-2); font-size: 23px; line-height: 1; cursor: pointer; border-radius: var(--radius-xs); transition: background var(--speed) var(--ease), color var(--speed) var(--ease); }
.modal-x:hover { background: var(--surface-2); color: var(--ink); }
.modal-msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; text-align: center; color: var(--ink-2); box-shadow: var(--shadow-lg); }
.modal-loading { padding: 44px; text-align: center; color: var(--ink-2); }
.modal .cost-row { grid-template-columns: 1fr 1fr; gap: 6px; }
.modal .cost-row .x { width: 36px; }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.97); } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Jelentés: ügyfélszintű díjbekérő sáv */
.invoice-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 14px 16px; background: var(--accent-weak); border: 1px solid var(--border); border-radius: var(--radius); }
.invoice-bar-text { display: flex; flex-direction: column; gap: 2px; }
.invoice-bar-text strong { color: var(--ink); }
.invoice-bar-text .muted-text { font-size: 13px; }

/* Jelentés: inline jóváhagyás cella (óra+perc input + sárga/zöld állapotjelzés; alapból a rögzített idő töltődik be) */
.approve-cell { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.approve-inputs {
    display: inline-flex; align-items: center; gap: 1px; padding: 2px 5px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.approve-inputs input { width: 34px; padding: 3px 2px; border: none; background: transparent; color: var(--ink);
    text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: var(--fs-sm); -moz-appearance: textfield; }
.approve-inputs input::-webkit-outer-spin-button, .approve-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.approve-inputs input:focus { outline: none; }
.approve-inputs .approve-sep { color: var(--ink-3); font-weight: 600; }
.approve-cell.is-dirty .approve-inputs { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }     /* módosítva, nincs mentve */
.approve-cell.is-saved .approve-inputs { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }         /* AJAX-mentés sikeres */

/* Globális "módosítva" jelölés: bármely szerkesztett űrlapmező borostyán kerete (mentésig / újratöltésig).
   :not(:focus) -> fókuszban a normál fókusz-gyűrű marad; a jelzés a mezőből kilépve látszik. */
input.is-dirty-field:not(:focus), select.is-dirty-field, textarea.is-dirty-field:not(:focus) {
    border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg);
}
select.is-dirty-field + .select2-container--default .select2-selection--single {
    border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg);
}

/* Ügyvédek áttekintő (munkatárs-kártyák + gazdátlan ügyek + kétirányú kiosztás) */
.lawyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.lawyer-card .card-body { display: flex; flex-direction: column; gap: 14px; }
.lawyer-head { display: flex; align-items: center; gap: 11px; }
.lawyer-head .mini-avatar { width: 42px; height: 42px; font-size: 17px; flex: 0 0 auto; }
.lawyer-head .lawyer-id { flex: 1 1 auto; min-width: 0; }
.lawyer-head strong { display: block; font-size: 15px; margin-bottom: 3px; }
.lawyer-active { flex: 0 0 auto; text-align: center; padding: 5px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.lawyer-active .big { display: block; font-size: 21px; font-weight: 700; line-height: 1.05; color: var(--ink); font-family: var(--font-mono); }
.lawyer-active .lbl { font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.lawyer-months { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lmonth { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.lmonth-now { border-color: var(--accent); background: var(--surface); }
.lmonth-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.lmonth-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.lmonth-now .lmonth-name { color: var(--accent); }
.lmonth-tag { font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.lmonth-vals { display: flex; flex-direction: column; gap: 5px; }
.lmonth-vals .hv { font-size: 11px; color: var(--ink-2); display: flex; align-items: baseline; gap: 4px; }
.lmonth-vals .hh { font-size: 17px; font-weight: 700; font-family: var(--font-mono); color: var(--ink); }
.lmonth-vals .hl { margin-left: auto; }
.trend { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; }
.trend-up { color: var(--accent); border-color: var(--accent); }
.trend-down { color: var(--danger); border-color: var(--danger); }
.trend-flat { color: var(--ink-2); border-color: var(--border); }
/* Belső (irodai) ügy: form-kapcsoló + jelzés */
.check-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.check-row input { width: 17px; height: 17px; flex: 0 0 auto; }
.internal-flag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.lawyer-cases { display: flex; flex-direction: column; gap: 5px; }
.case-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.case-row.is-done { opacity: .58; }
.case-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.case-title { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-title .num { font-family: var(--font-mono); color: var(--ink-2); margin-right: 4px; }
.case-link:hover .case-title { color: var(--accent); }
.case-client { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-row form { margin: 0; flex: 0 0 auto; }
.case-pill { padding: 3px 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; font-size: 11px; cursor: pointer; transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.case-pill:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.case-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; }
.case-pill-icon svg { width: 14px; height: 14px; }
.lawyer-assign { display: flex; gap: 7px; align-items: center; margin-top: auto; }
.lawyer-assign .select2-container { flex: 1; }
.warn-card { border-color: var(--warn); }
.warn-card .card-head h3 { color: var(--warn); }
.orphan-list { display: flex; flex-direction: column; gap: 9px; }
.orphan-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; margin: 0; }
.orphan-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.orphan-info .num { font-family: var(--font-mono); color: var(--ink-2); font-size: 13px; }
.orphan-row .select2-container { min-width: 170px; flex: 0 0 auto; width: auto !important; }

/* Select2 - "Erdő és csont" théma a natív vezérlők helyett */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: auto; min-height: 42px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    display: flex; align-items: center; padding: 5px 8px 5px 12px;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 1.4; padding: 0; font-size: var(--fs-base); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-3); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ink-2) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--ink-2) transparent; }
.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--ink-2); font-weight: 700; margin-right: 20px; }
select.is-invalid + .select2-container--default .select2-selection--single { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.select2-dropdown { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: var(--z-dropdown); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--ink); padding: 7px 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--accent); }
.select2-results__options { max-height: 260px; }
.select2-container--default .select2-results__option { color: var(--ink); padding: 8px 12px; font-size: var(--fs-base); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: var(--on-accent); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--accent-weak); color: var(--accent-ink); }

@media (max-width: 860px) {
    .cost-row { grid-template-columns: 1fr 1fr; gap: 6px; }
    .cost-row .x { width: 36px; }
}

/* ---------- Statute brutal: forma-élezés (amit a token-csere nem fed le) ---------- */
[data-skin="brutal"] .card,
[data-skin="brutal"] .table-wrap,
[data-skin="brutal"] .stat-card,
[data-skin="brutal"] .form-card,
[data-skin="brutal"] .filter-bar,
[data-skin="brutal"] .invoice-sheet { border-width: 2px; }
[data-skin="brutal"] .auth-card { border: 2px solid var(--ink); border-radius: 0; }
[data-skin="brutal"] .sidebar { border-right: 3px solid var(--ink); }
[data-skin="brutal"] .btn { border-width: 2px; }
[data-skin="brutal"] .btn-primary, [data-skin="brutal"] .btn-accent { border-color: var(--accent); }
/* éles sarok a pill-szerű elemeken is (a 999px / kör hard-code felülírása) */
[data-skin="brutal"] :is(.badge, .chip, .tenant-chip, .quick-mins button, .trend,
    .case-pill, .meter, .meter > span, .meter-dual span, .avatar, .mini-avatar, .seg-tabs, .brand-mark) { border-radius: 0; }
/* a login háttér-gradiens helyett sík papír (a világos sidebar-bg-vel a gradiens nem áll jól) */
[data-skin="brutal"] body.auth { background: var(--bg); }

/* ============================================================
   EXTRÉM ARCULATOK - komponens-réteg (scanline / textúra / neon-glow)
   A token-csere viszi a fő munkát; itt csak a karakter-adó effektek.
   ============================================================ */

/* ---- Lex Terminal: éles pill + CRT scanline + foszfor-glow + villogó kurzor ---- */
[data-skin="terminal"] :is(.badge, .chip, .tenant-chip, .quick-mins button, .trend,
    .case-pill, .meter, .meter > span, .meter-dual span, .avatar, .mini-avatar, .seg-tabs, .brand-mark) { border-radius: 0; }
[data-skin="terminal"] .btn,
[data-skin="terminal"] .card,
[data-skin="terminal"] .stat-card,
[data-skin="terminal"] .table-wrap,
[data-skin="terminal"] .auth-card { border-width: 1.5px; }
/* CRT scanline-réteg a teljes képernyőn (a dropdownok/modal fölé nem kerül) */
[data-skin="terminal"] body::after {
    content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 2px, oklch(0.30 0.08 150 / 0.05) 2px 3px);
}
[data-skin="terminal"][data-theme="dark"] body::after {
    background: repeating-linear-gradient(0deg, transparent 0 2px, oklch(0.80 0.14 150 / 0.055) 2px 3px);
}
[data-skin="terminal"][data-theme="dark"] .stat-value,
[data-skin="terminal"][data-theme="dark"] .brand-name { text-shadow: 0 0 10px oklch(0.875 0.215 148 / 0.45); }
/* villogó terminál-kurzor a wordmark mögött */
[data-skin="terminal"] .brand-name::after {
    content: "_"; margin-left: 1px; font-weight: 400;
    animation: term-caret 1.1s step-end infinite;
}
@keyframes term-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- De Jure (Codex): finom pergamen-szemcse a háttéren (kártyák tiszta lapok maradnak) ---- */
[data-skin="dejure"] body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
}
[data-skin="dejure"][data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: 0.35; }
/* vésett címsor-karakter: a Cinzel kapitálisra optimalizált */
[data-skin="dejure"] h1, [data-skin="dejure"] h2,
[data-skin="dejure"] .brand-name { letter-spacing: 0.02em; }

/* ---- Lumen (Neon Noir): neon-glow a kulcs-elemeken (csak sötét témában) ---- */
[data-skin="lumen"][data-theme="dark"] .btn-primary,
[data-skin="lumen"][data-theme="dark"] .btn-accent { box-shadow: 0 0 16px oklch(0.800 0.170 205 / 0.40); }
[data-skin="lumen"][data-theme="dark"] .nav-item.is-active { box-shadow: inset 0 0 0 1px oklch(0.800 0.170 205 / 0.35), 0 0 14px oklch(0.800 0.170 205 / 0.20); }
[data-skin="lumen"][data-theme="dark"] .stat-value,
[data-skin="lumen"][data-theme="dark"] .brand-name { text-shadow: 0 0 12px oklch(0.800 0.170 205 / 0.40); }
[data-skin="lumen"] h1, [data-skin="lumen"] h2, [data-skin="lumen"] .brand-name { letter-spacing: 0.01em; }
[data-skin="lumen"] .badge, [data-skin="lumen"] .case-pill { letter-spacing: 0.02em; }

/* ---- Vermillion (Drenched): a Playfair drámai súlya + arany hajszál-kiemelés ---- */
[data-skin="vermillion"] h1, [data-skin="vermillion"] h2 { font-weight: 700; letter-spacing: -0.01em; }
[data-skin="vermillion"] .stat-card { border-color: oklch(0.815 0.140 80 / 0.30); }

/* ---------- mozgás: reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- reszponzív (strukturális) ---------- */
@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); transition: transform var(--speed) var(--ease); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .nav-toggle { display: grid; }
    .content { padding: 20px 18px 40px; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 120px 1fr; }
    .invoice-parties { grid-template-columns: 1fr; }
    .user-meta { display: none; }
    table.data .hide-sm { display: none; }
}