/* ===== SLOTH — Design Tokens ===== minden szín, térköz, árnyék, rádiusz és típus itt; EZT töltsd be elsőként. */

:root {
  /* ── Brand / Accent ─────────────────────────────────────── */
  --clr-green:        #2dbd68;
  --clr-green-hover:  #25a85c;
  --clr-green-light:  #f0fdf4;
  --clr-green-dim:    #dcfce7;

  --clr-red:          #ef4444;
  --clr-red-dark:     #dc2626;
  --clr-red-light:    #fef2f2;

  --clr-yellow:       #f59e0b;
  --clr-yellow-light: #fef3c7;
  --clr-yellow-dark:  #92400e;

  --clr-blue:         #3b82f6;
  --clr-blue-light:   #eff6ff;
  --clr-blue-dark:    #1d4ed8;

  --clr-purple:       #7c3aed;
  --clr-purple-light: #f5f3ff;

  --clr-red-dim:      rgba(220, 38, 38, 0.30);
  --clr-red-alpha-20: rgba(239, 68, 68, 0.20);

  --clr-yellow-border:   rgba(245, 158, 11, 0.25);
  --clr-yellow-alpha-08: rgba(245, 158, 11, 0.08);
  --clr-yellow-alpha-15: rgba(245, 158, 11, 0.15);
  --clr-yellow-alpha-20: rgba(245, 158, 11, 0.20);

  --clr-orange:        #f97316;
  --clr-orange-light:  #fff7ed;
  --clr-orange-border: #fed7aa;
  --clr-orange-dark:   #b45309;

  --clr-purple-border:    rgba(124, 58, 237, 0.20);
  --clr-purple-alpha-10:  rgba(124, 58, 237, 0.10);
  --clr-purple-alpha-15:  rgba(124, 58, 237, 0.15);
  --clr-purple-alpha-25:  rgba(124, 58, 237, 0.25);
  --clr-purple-text-dark: #c4b5fd;

  --clr-green-dark:      #166534;
  --clr-green-medium:    #16a34a;
  --clr-green-alpha-10:  rgba(45, 189, 104, 0.10);
  --clr-green-alpha-20:  rgba(45, 189, 104, 0.20);

  --clr-blue-alpha-10:   rgba(59, 130, 246, 0.10);
  --clr-blue-alpha-20:   rgba(59, 130, 246, 0.20);

  --clr-yellow-alpha-10: rgba(245, 158, 11, 0.10);

  /* ── Ticket card state colors ───────────────────────────── */
  --tc-state-warn:    #d9b122;
  --tc-state-danger:  #cc3e4a;
  --tc-state-muted:   #686c73;

  /* ── Role Badge Colors ─────────────────────────────────── */
  --badge-own-bg:         #f0fdf4;
  --badge-own-text:       #16a34a;
  --badge-shared-bg:      #eff6ff;
  --badge-shared-text:    #2563eb;
  --badge-shared-in-bg:   #f5f3ff;
  --badge-shared-in-text: #7c3aed;

  /* ── Status badge ──────────────────────────────────────── */
  --badge-pending-bg:   #6b7280;
  --badge-active-bg:    #2dbd68;

  /* ── Surface / Background ──────────────────────────────── */
  /* Slightly off-white page — white cards naturally pop */
  --bg-page:    #f5f7fa;
  --bg-surface: #eef1f6;
  --bg-muted:   #e8ecf2;
  --bg-card:    #ffffff;
  --bg-input:   #ffffff;
  --bg-nav:     #ffffff;
  --bg-menu:    #ffffff;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   #374151;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;
  --text-link:      #2dbd68;
  --text-inverse:   #ffffff;

  /* ── Borders ───────────────────────────────────────────── */
  --border:        #dce1ea;
  --border-light:  #eef1f6;
  --border-input:  #dce1ea;
  --border-focus:  var(--text-secondary);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:         0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:         0 1px 2px rgba(0,0,0,.05);
  --shadow-card:       0 1px 2px rgba(16,24,40,.04);
  --shadow-card-hover: 0 2px 8px rgba(16,24,40,.08);
  --shadow-md:         0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:         0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:         0 8px 24px rgba(0,0,0,.10);
  --shadow-nav:        0 1px 0 0 var(--border);
  --shadow-menu:       0 4px 16px rgba(0,0,0,.10);
  --shadow-flash:      0 3px 10px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);

  /* ── Radius ────────────────────────────────────────────── */
  /* Csak két szögletes rádiusz megengedett: control (gombok) és surface (kártyák, mezők). */
  --radius-control: 18px;
  --radius-surface: 14px;
  --radius-full:    9999px;

  /* Legacy aliases — kept so older selectors collapse onto the 2-radius system */
  --radius-xs:   var(--radius-surface);
  --radius-sm:   var(--radius-surface);
  --radius-md:   var(--radius-surface);
  --radius-lg:   var(--radius-surface);
  --radius-xl:   var(--radius-surface);
  --radius-2xl:  var(--radius-surface);

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-18: 4.5rem;
  --space-24: 6rem;

  /* ── Control Sizing ───────────────────────────────────── */
  --control-height-sm:        2rem;
  --control-height-md:        2.5rem;
  --control-height-lg:        2.875rem;
  --control-padding-x-sm:     var(--space-3);
  --control-padding-x-md:     var(--space-4);
  --control-padding-x-lg:     var(--space-5);
  --control-gap-sm:           var(--space-1);
  --control-gap-md:           var(--space-2);
  --control-gap-lg:           var(--space-3);
  --control-icon-button-sm:   2rem;
  --control-icon-button-md:   2.5rem;

  /* ── Shared Block Rhythm ──────────────────────────────── */
  --block-gap-first:   var(--space-4);
  --block-gap-linked:  var(--space-2);
  --block-gap-section: var(--space-3);
  --block-pad-y:       var(--space-5);
  --block-pad-x:       var(--space-6);
  --layout-gap: var(--space-4);

  /* ── Shared Page Rhythm ───────────────────────────────── */
  --page-pad-top-mobile:                var(--space-4);
  --page-pad-top-tablet:                var(--space-5);
  --page-pad-top-desktop:               var(--space-5);
  --page-pad-bottom-mobile:             calc(var(--footer-height) + var(--space-8));
  --page-pad-bottom-tablet:             calc(var(--footer-height) + var(--space-10));
  --page-pad-bottom-desktop:            var(--space-12);
  --page-pad-x-mobile:                  var(--space-4);
  --page-pad-x-tablet:                  var(--space-6);
  --page-pad-x-desktop:                 var(--space-12);
  --page-pad-x-wide:                    var(--space-24);
  --page-submenu-gap:                   var(--space-4);
  --page-inner-pad-bottom:              var(--space-1);
  /* Kifutás = a gomb alsó eltolása + magassága + egy --space-4 térköz, hogy sose fedje a tartalmat. */
  --page-floating-save-clearance-mobile:    calc(var(--footer-height) + env(safe-area-inset-bottom, 0px) + var(--space-4) + var(--control-height-lg) + var(--space-4));
  --page-floating-save-clearance-desktop:   calc(var(--space-8) + var(--control-height-lg) + var(--space-4));
  --page-floating-action-clearance-mobile:  calc(var(--footer-height) + env(safe-area-inset-bottom, 0px) + var(--space-4) + var(--control-height-lg) + var(--space-4));
  --page-floating-action-clearance-desktop: calc(var(--space-8) + var(--control-height-lg) + var(--space-4));
  --page-admin-pad-x:                   var(--space-18);
  --page-admin-pad-x-compact:           var(--space-8);
  --page-calendar-pad-x-compact:        var(--space-2);

  /* A kártyasor vezető jele és a szövege közti táv; minden kártyasor ezt a tokent használja (frontend.md). */
  --card-row-gap:                       var(--space-3);

  /* A kártyasoron belüli egymás alatti SZÖVEGSOROK távolsága; egy érték minden kártya-családra. */
  --card-text-gap:                      0.15rem;

  /* A kártya JELVÉNYE és az alatta lévő címke közti táv; szándékosan NEM --card-text-gap (frontend.md). */
  --card-badge-gap:                     0.35rem;

  /* Minden kártya-jelvény függőleges paddingja; token, mert a szabályai ~1100 sorra vannak egymástól. */
  --card-badge-pad-y:                   0.125rem;

  /* ── Layout ────────────────────────────────────────────── */
  --nav-height:    4rem;
  --footer-height: 4rem;

  /* A környezet-sáv magassága; élesben 0, a `body.has-env-banner` írja felül (frontend.md). */
  --env-banner-height: 0px;

  /* Mobil billentyűzet magassága; 0 alapból, a theme.js visualViewport-figyelője írja felül. */
  --keyboard-inset: 0px;

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.8125rem;  /* 13px */
  --text-md:   0.9375rem;  /* 15px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  /* ── Focus Ring ────────────────────────────────────────── */
  --focus-ring-green: rgba(45, 189, 104, 0.15);

  /* ── Overlay / Backdrop ─────────────────────────────────── */
  --overlay-bg:             rgba(0, 0, 0, 0.35);
  --overlay-dark:           rgba(0, 0, 0, 0.45);
  --overlay-subtle:         rgba(0, 0, 0, 0.08);
  --overlay-hover:          rgba(0, 0, 0, 0.07);
  --overlay-hover-md:       rgba(0, 0, 0, 0.12);
  --overlay-active-text:    rgba(255, 255, 255, 0.90);
  --overlay-active-border:  rgba(255, 255, 255, 0.25);
  --overlay-white-subtle:   rgba(255, 255, 255, 0.08);
  --overlay-white-dim:      rgba(255, 255, 255, 0.55);
  --overlay-white-md:       rgba(255, 255, 255, 0.16);
  --overlay-white-bright:   rgba(255, 255, 255, 0.85);

  /* ── Tap / Press Feedback ───────────────────────────────── */
  --tap-press-scale: 0.98;
  --tap-press-dim:   0.93;

  /* ── PWA Banner ─────────────────────────────────────────── */
  --bg-banner-start:    #133d25;
  --bg-banner-end:      #1b5233;
  --clr-green-alpha-25: rgba(45, 189, 104, 0.25);

  /* ── Neutral / Inactive ─────────────────────────────────── */
  --clr-inactive: #cccccc;

  /* ── Extended yellow palette ────────────────────────────── */
  --clr-yellow-pale: #fffbeb;

  /* ── Extended green palette ─────────────────────────────── */
  --clr-green-vivid: #22c55e;
  --clr-green-pale:  #86efac;

  /* ── Indigo (release page feature accent) ──────────────── */
  --clr-indigo:       #6366f1;
  --clr-indigo-light: #eef2ff;

  /* ── History-card accent hues (data-type színek, frontend.md) ── */
  --clr-violet:          #8b5cf6;
  --clr-violet-alpha-10: rgba(139, 92, 246, 0.10);
  --clr-violet-alpha-20: rgba(139, 92, 246, 0.20);
  --clr-violet-alpha-18: rgba(139, 92, 246, 0.18);
  --clr-violet-alpha-32: rgba(139, 92, 246, 0.32);
  --clr-pink:            #ec4899;
  --clr-pink-alpha-10:   rgba(236, 72, 153, 0.10);
  --clr-pink-alpha-20:   rgba(236, 72, 153, 0.20);
  --clr-pink-alpha-18:   rgba(236, 72, 153, 0.18);
  --clr-pink-alpha-32:   rgba(236, 72, 153, 0.32);
  --clr-teal:            #0d9488;
  --clr-teal-alpha-10:   rgba(13, 148, 136, 0.10);
  --clr-teal-alpha-20:   rgba(13, 148, 136, 0.20);
  --clr-teal-alpha-18:   rgba(13, 148, 136, 0.18);
  --clr-teal-alpha-32:   rgba(13, 148, 136, 0.32);
  --clr-user-history:          #ec4848;
  --clr-user-history-alpha-10: rgba(236, 72, 72, 0.10);
  --clr-user-history-alpha-20: rgba(236, 72, 72, 0.20);
  --clr-user-history-alpha-18: rgba(236, 72, 153, 0.18);

  /* ── Zöld "glow" árnyék a lebegő CTA gombokon ────────────── */
  --shadow-green-glow:       0 1px 4px rgba(45, 189, 104, 0.25);
  --shadow-green-glow-hover: 0 2px 8px rgba(45, 189, 104, 0.35);

  /* ── Gomb hover árnyék (semleges) ────────────────────────── */
  --shadow-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.10);

  /* ── Nav sáv él-árnyéka (felül/alul) ──────────────────────── */
  --shadow-nav-top:    0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-nav-bottom: 0 -1px 3px rgba(0, 0, 0, 0.04);

  /* ── Fehér overlay további alfa-fokozatok (button/modal-akcentus) ── */
  --overlay-white-15: rgba(255, 255, 255, 0.15);
  --overlay-white-28: rgba(255, 255, 255, 0.28);
  --overlay-white-40: rgba(255, 255, 255, 0.40);
  --overlay-white-70: rgba(255, 255, 255, 0.70);

  /* ── Release-oldal telefon-makett (mindig sötét, témától független) ── */
  --clr-phone-bezel: #111827;
  --shadow-phone:    0 2rem 4rem rgba(15, 23, 42, 0.28);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-fast:  0.12s ease;
  --ease-base:  0.2s ease;
  --ease-slow:  0.3s ease;

  /* ── Scrollbar ─────────────────────────────────────────── */
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f5f7fa;
}

/* ===== Dark Mode Override ===== JS állítja: document.documentElement.dataset.theme = 'dark' ===== */
[data-theme="dark"] {
  /* Surfaces */
  --bg-page:    #0f172a;
  --bg-surface: #1e293b;
  --bg-muted:   #293548;
  --bg-card:    #1e293b;
  --bg-input:   #1e293b;
  --bg-nav:     #1a2438;
  --bg-menu:    #1e293b;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Borders */
  --border:       #2d3f57;
  --border-light: #1e293b;
  --border-input: #3a4f68;

  /* Shadows — stronger in dark to maintain visual depth */
  --shadow-xs:         0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:         0 1px 2px rgba(0,0,0,.25);
  --shadow-card:       0 1px 2px rgba(0,0,0,.2);
  --shadow-card-hover: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md:         0 2px 6px rgba(0,0,0,.25);
  --shadow-lg:         0 4px 12px rgba(0,0,0,.3);
  --shadow-xl:         0 8px 24px rgba(0,0,0,.35);
  --shadow-nav:        0 1px 0 0 #2d3f57;
  --shadow-menu:       0 4px 16px rgba(0,0,0,.35);

  /* Role Badges — green-only accent in dark mode (no pink/purple) */
  --badge-own-bg:         rgba(45, 189, 104, .14);
  --badge-own-text:       #4ade80;
  --badge-shared-bg:      rgba(59, 130, 246, .14);
  --badge-shared-text:    #60a5fa;
  --badge-shared-in-bg:   rgba(45, 189, 104, .10);
  --badge-shared-in-text: #4ade80;

  /* Status */
  --badge-pending-bg: #334155;
  --badge-active-bg:  #2dbd68;

  /* A --clr-red-dark szándékosan NINCS felülírva sötét módban (frontend.md → „Red is the exception"). */
  --clr-yellow-dark: #fbbf24;
  --clr-blue-dark:   #60a5fa;
  --clr-green-dark:  #4ade80;
  --clr-green-medium:#4ade80;
  --clr-orange-dark: #fb923c;

  /* Tinted light backgrounds → semi-transparent so they work on dark surfaces */
  --clr-green-light:   rgba(45, 189, 104, 0.12);
  --clr-green-dim:     rgba(45, 189, 104, 0.22);
  --clr-blue-light:    rgba(59, 130, 246, 0.12);
  --clr-red-light:     rgba(239, 68, 68, 0.12);
  --clr-yellow-light:  rgba(245, 158, 11, 0.12);
  --clr-yellow-pale:   rgba(245, 158, 11, 0.08);
  --clr-purple-light:  rgba(124, 58, 237, 0.12);
  --clr-orange-light:  rgba(249, 115, 22, 0.10);
  --clr-orange-border: rgba(249, 115, 22, 0.25);

  /* Scrollbar */
  --scrollbar-thumb: #3a4f68;
  --scrollbar-track: #1e293b;
}