/*
 * theme.css — Medidesk Integrator
 * Kierunek: "KLINIKA INK" (wysoki kontrast, jeden głęboki teal) + font Hanken Grotesk.
 * ----------------------------------------------------------------------------
 * Drop-in zamiennik obecnego static/theme.css. Zachowuje WSZYSTKIE dotychczasowe
 * nazwy tokenów (w tym backward-compat) — dokładamy tylko nowe (oznaczone [NOWY]).
 * Zmiana wartości przepływa do całej apki, która już czyta var(--…).
 *
 * Co jest nowego względem starego pliku:
 *   • paleta przeniesiona z generycznego blue/indigo/violet na ink + deep teal,
 *   • status-fille jako tokeny (--green-soft, --red-soft …) → koniec hexów w JS,
 *   • --primary / --primary-grad (primary jako pełny kolor, gradient na CTA),
 *   • --radius-*, --font-sans, skala typografii/odstępów, z-index, podbite shadow.
 */

:root {
  /* ── Font [NOWY] ── */
  --font-sans: 'Hanken Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Tła ── */
  --bg-primary: #F4F6F8;       /* główne tło body */
  --bg-secondary: #FFFFFF;     /* backward compat */
  --bg-surface: #FFFFFF;       /* karty, sidebar, modale */
  --bg-surface-hover: #F1F4F7; /* flow-box, lead-detail */
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(7,12,20,0.50);

  /* ── Tekst (wysoki kontrast) ── */
  --text-primary: #0A1424;
  --text-secondary: #31415A;
  --text-muted: #51637E;
  --text-dim: #6E7F98;

  /* ── Obramowania ── */
  --border-color: #DCE2E9;       /* backward compat */
  --border-color-hover: #BBC5D1; /* backward compat */
  --border-primary: #D5DCE5;
  --border-subtle: #E7ECF1;

  /* ── Primary [NOWE] — pełny kolor + gradient na CTA/aktywne ── */
  --primary: #0E6F84;            /* deep teal-cyan — jedyny akcent */
  --primary-hover: #0A5C6E;
  --primary-contrast: #FFFFFF;
  --primary-grad: linear-gradient(135deg, #0E6F84 0%, #0A5161 100%);
  --primary-soft: rgba(14,111,132,0.08);
  --primary-soft-border: rgba(14,111,132,0.26);
  --primary-ring: rgba(14,111,132,0.26);

  /* ── Akcenty (kolor tekstu/ikon statusów) ── */
  --accent-primary: #0E6F84;        /* backward compat (= --primary) */
  --accent-primary-hover: #0A5C6E;  /* backward compat */
  --accent-blue: #0E6F84;
  --accent-green: #15803D;
  --accent-red: #C2342B;            /* desaturowana cegła — poważnie */
  --accent-yellow: #9A6700;
  --accent-purple: #6D4AA8;
  --accent-violet: #0E6F84;
  --accent-violet-light: #2E94A8;
  --accent-indigo: #0E6F84;
  --accent-indigo-light: #2E94A8;

  /* ── Status-fille [NOWE] — tła badge/kafelków/bannerów (zamiast hexów w JS) ── */
  --green-soft: rgba(21,128,61,0.10);  --green-line: rgba(21,128,61,0.30);
  --red-soft:   rgba(194,52,43,0.10);  --red-line:   rgba(194,52,43,0.30);
  --amber-soft: rgba(154,103,0,0.12);  --amber-line: rgba(154,103,0,0.32);
  --blue-soft:  rgba(14,111,132,0.10); --blue-line:  rgba(14,111,132,0.30);
  --slate-soft: rgba(81,99,126,0.10);  --slate-line: rgba(81,99,126,0.28);

  /* ── Nawigacja ── */
  --nav-active: #0A5C6E;
  --nav-active-bg: rgba(14,111,132,0.10);
  --row-hover-bg: rgba(14,111,132,0.04);

  /* ── Marka — gradient logo „7" zostaje wierny niezależnie od motywu [NOWE] ── */
  --brand-from: #06C28E;
  --brand-to:   #157BD0;

  /* ── Promienie [NOWE] — Ink = mniejsze zaokrąglenia ── */
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;

  /* ── Skala typografii [NOWE] — floor podniesiony 0.65rem → 0.75rem (czytelność) ── */
  --fs-micro: 0.75rem;   /* 12px — najmniejszy dozwolony (meta, podpisy tabel) */
  --fs-xs:    0.8125rem; /* 13px */
  --fs-sm:    0.875rem;  /* 14px — domyślny tekst */
  --fs-md:    0.9375rem; /* 15px */
  --fs-lg:    1.0625rem; /* 17px — tytuły kart */
  --fs-xl:    1.375rem;  /* 22px — nagłówki sekcji */
  --fs-2xl:   1.75rem;   /* 28px */
  --fs-kpi:   2.125rem;  /* 34px — liczby KPI */

  /* ── Odstępy [NOWE] ── */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;

  /* ── Czas animacji [NOWE] ── */
  --dur: 0.16s;

  /* ── Rozmiary ikon (kanoniczny system Lucide) ── */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;

  /* ── z-index — jedna skala [NOWE] (koniec 9999/999/200/100) ── */
  --z-banner: 50;
  --z-sticky: 100;
  --z-dropdown: 400;
  --z-overlay: 800;   /* modale + dialog wspólnie */
  --z-toast: 1000;

  /* ── Cienie ── */
  --shadow-sm: 0 1px 2px rgba(10,20,36,0.07);
  --shadow-md: 0 3px 10px -2px rgba(10,20,36,0.12);
  --shadow-lg: 0 16px 36px -12px rgba(10,20,36,0.22);

  /* ── Scrim [NOWY] — półprzezroczyste tło pod loaderami (busy-overlay, splash) ── */
  --scrim: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

[data-theme='dark'] {
  --bg-primary: #070B12;
  --bg-secondary: #0F1622;      /* backward compat */
  --bg-surface: #0F1622;
  --bg-surface-hover: #161F2D;
  --bg-input: #0A111B;
  --bg-overlay: rgba(0,0,0,0.70);

  --text-primary: #EEF2F7;
  --text-secondary: #B2BCCB;
  --text-muted: #8A95A6;
  --text-dim: #6B7688;

  --border-color: #1F2A3A;       /* backward compat */
  --border-color-hover: #2E3B4F; /* backward compat */
  --border-primary: #1F2A3A;
  --border-subtle: #18222F;

  --primary: #2BB6C9;            /* podbity teal — czytelny na ciemnym */
  --primary-hover: #45C8D9;
  --primary-contrast: #06222A;
  --primary-grad: linear-gradient(135deg, #2BB6C9 0%, #1A8497 100%);
  --primary-soft: rgba(43,182,201,0.13);
  --primary-soft-border: rgba(43,182,201,0.32);
  --primary-ring: rgba(43,182,201,0.32);

  --accent-primary: #2BB6C9;        /* backward compat */
  --accent-primary-hover: #45C8D9;  /* backward compat */
  --accent-blue: #2BB6C9;
  --accent-green: #4ADE80;
  --accent-red: #F2756B;
  --accent-yellow: #E0A93B;
  --accent-purple: #A78BFA;
  --accent-violet: #2BB6C9;
  --accent-violet-light: #5FCFDD;
  --accent-indigo: #2BB6C9;
  --accent-indigo-light: #5FCFDD;

  --green-soft: rgba(74,222,128,0.13);  --green-line: rgba(74,222,128,0.30);
  --red-soft:   rgba(242,117,107,0.13); --red-line:   rgba(242,117,107,0.32);
  --amber-soft: rgba(224,169,59,0.14);  --amber-line: rgba(224,169,59,0.32);
  --blue-soft:  rgba(43,182,201,0.14);  --blue-line:  rgba(43,182,201,0.32);
  --slate-soft: rgba(138,149,166,0.14); --slate-line: rgba(138,149,166,0.30);

  --nav-active: #45C8D9;
  --nav-active-bg: rgba(43,182,201,0.16);
  --row-hover-bg: rgba(255,255,255,0.03);

  --brand-from: #14D69E;   /* logo rozjaśnione na ciemnym */
  --brand-to:   #2DA6E8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,0.55);
  --shadow-lg: 0 22px 48px -12px rgba(0,0,0,0.65);

  /* na ciemnym tle baza jest niemal czarna — mocniejsze krycie daje czytelny scrim */
  --scrim: color-mix(in srgb, var(--bg-primary) 82%, transparent);
}

/* Wstępne ustawienie globalne czerpiące ze zmiennych CSS */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);   /* [NOWE] — wcześniej Inter wpisany w każdym szablonie */
  transition: background-color 0.15s, color 0.15s;
}

/* Scrollbar tematyczny (dark) */
[data-theme='dark'] { scrollbar-color: #2E3B4F #0F1622; }
[data-theme='dark'] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme='dark'] ::-webkit-scrollbar-track { background: #0F1622; }
[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #2E3B4F; border-radius: 6px; border: 2px solid #0F1622; }
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #3C4C63; }

/* Wzmocnienie .btn-outline (jak w starym pliku — działa light i dark) */
.btn-outline {
  border-color: var(--border-color-hover) !important;
  color: var(--text-primary) !important;
}
.btn-outline:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}