/*
 * MARKA BIURA W STREFIE KLIENTA — tokeny zestawu marki (--pp-…, wwwroot/marki/{id}/marka.css: kolory, kroje,
 * promienie; warianty data-styl, data-akcent i klasa dark) przełożone na zmienne, na których stoją komponenty portalu.
 *
 * Arkusz dołącza App.razor tylko w instancji z ApprovalPortal:Marka i tylko poza /Admin; wszystkie reguły są pod
 * html[data-marka]. Trzy grupy:
 * 1. --dxbl-* — tła, tekst, linie i skala akcentu, których komponenty używają od zawsze (site.css, .razor.css).
 * 2. --strefa-* — zmienne definiowane WYŁĄCZNIE tutaj. Komponenty piszą var(--strefa-x, <dotychczasowa wartość>),
 *    więc bez marki nic się nie zmienia. Rozdzielają to, czego skala --dxbl-accent-color nie rozróżnia: przycisk
 *    główny (w marce ciemny albo jasny zależnie od motywu, z własnym kolorem tekstu) od linku i akcentu, krój
 *    i grubość nagłówków, etykiety mono, promienie przycisków i kart.
 * 3. Reguły globalne: krój tekstu i pól formularzy, zaznaczenie, kreskowanie tła obok kolumny treści.
 * 4. Komponenty DevExpress (motyw Fluent, np. grid listy faktur) — paleta akcentu --dxds-primary-* z akcentu marki,
 *    tło, tekst, linie i krój z tokenów marki; tryb jasny/ciemny z klasy dxbl-theme-fluent-mode-* na <html>
 *    (SkryptWygladu.TrybPortalu), więc DX nadąża za przełącznikiem wyglądu bez przeładowania strony.
 */

html[data-marka] {
    /* Powierzchnie i tekst */
    --dxbl-page-bg: var(--pp-tlo);
    --dxbl-page-color: var(--pp-tekst);
    --dxbl-bg: var(--pp-tlo);                                  /* karta, pole */
    --dxbl-content-bg: var(--strefa-powierzchnia);             /* pas, panel, menu */
    --dxbl-page-border-color: var(--pp-linia-mocna);
    --dxbl-border-color: var(--pp-linia-mocna);

    /* Skala akcentu DevExpress (oklch z jednego koloru, ta sama w obu trybach) → akcent marki.
       Niskie stopnie: tła i obrysy wyróżnień; 60: linie i akcent dekoracyjny; 100: linki i akcent
       (--pp-akcent ma kontrast tekstu na tle motywu); wyższe: tekst na tłach akcentu (bliżej koloru tekstu). */
    --dxbl-accent-color: var(--pp-akcent);
    --dxbl-accent-color-10: var(--pp-akcent-tlo);
    --dxbl-accent-color-20: color-mix(in oklab, var(--pp-akcent-jasny) 14%, var(--pp-tlo));
    --dxbl-accent-color-30: color-mix(in oklab, var(--pp-akcent-jasny) 24%, var(--pp-tlo));
    --dxbl-accent-color-40: color-mix(in oklab, var(--pp-akcent-jasny) 38%, var(--pp-tlo));
    --dxbl-accent-color-60: var(--pp-akcent-jasny);
    --dxbl-accent-color-100: var(--pp-akcent);
    --dxbl-accent-color-110: color-mix(in oklab, var(--pp-akcent) 75%, var(--pp-tekst));
    --dxbl-accent-color-120: color-mix(in oklab, var(--pp-akcent) 68%, var(--pp-tekst));
    --dxbl-accent-color-130: color-mix(in oklab, var(--pp-akcent) 60%, var(--pp-tekst));
    --dxbl-accent-color-150: color-mix(in oklab, var(--pp-akcent) 50%, var(--pp-tekst));

    /* Zmienne marki dla komponentów (bez marki — wartości zastępcze w komponentach) */
    --strefa-powierzchnia: color-mix(in oklab, var(--pp-tekst) 3%, var(--pp-tlo));   /* nieprzezroczyste --pp-tlo-2 */
    --strefa-przycisk: var(--pp-przycisk);
    --strefa-przycisk-hover: var(--pp-przycisk-hover);
    --strefa-przycisk-tekst: var(--pp-przycisk-tekst);
    --strefa-promien-przycisku: var(--pp-promien-przycisku);
    --strefa-promien-karty: 0.75rem;
    --strefa-promien-pola: 0.5rem;
    --strefa-link: var(--pp-akcent);
    --strefa-tekst-2: var(--pp-tekst-2);
    --strefa-tekst-3: var(--pp-tekst-3);
    --strefa-linia: var(--pp-linia);
    --strefa-font-naglowki: var(--pp-font-naglowki);
    --strefa-waga-naglowkow: var(--pp-waga-naglowkow);
    --strefa-swiatlo-naglowkow: var(--pp-swiatlo-naglowkow);
    --strefa-waga-srodtytulow: var(--pp-waga-srodtytulow);
    --strefa-font-mono: var(--pp-font-mono);
    --strefa-fokus: var(--pp-akcent);
}

/* Ciemny: stopnie 30–40 grają w regułach ciemnych komponentów rolę TEKSTU akcentu (jasny odcień na ciemnym tle). */
html[data-marka].dark {
    --dxbl-accent-color-20: color-mix(in oklab, var(--pp-akcent-jasny) 18%, var(--pp-tlo));
    --dxbl-accent-color-30: var(--pp-akcent);
    --dxbl-accent-color-40: var(--pp-akcent);
    --strefa-powierzchnia: color-mix(in oklab, var(--pp-tekst) 5%, var(--pp-tlo));
    color-scheme: dark;
}

/* --- Tekst i pola --- */

html[data-marka],
html[data-marka] body {
    font-family: var(--pp-font-sans);
    font-feature-settings: var(--pp-font-cechy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-marka] :where(input, select, textarea, button) {
    font-family: inherit;
    font-feature-settings: inherit;
}

html[data-marka] :where(code, kbd, samp, pre) {
    font-family: var(--pp-font-mono);
}

html[data-marka] ::selection {
    background-color: color-mix(in oklch, var(--pp-akcent-jasny) 25%, transparent);
}

html[data-marka] body {
    scrollbar-color: color-mix(in srgb, var(--pp-tekst-3) 50%, transparent) transparent;
}

/* Nagłówki stron (h1) i sekcji (h2) krojem i grubością marki (styl „siatka” — Inter, „papier” — Newsreader);
   rozmiar zostaje z komponentu. Podwójny atrybut podnosi specyficzność (0,2,3) ponad reguły komponentów
   z izolacją CSS (np. .page-header h1[b-…] = 0,2,1), bez wyliczania każdej klasy nagłówka z osobna. */
html[data-marka][data-styl] main h1 {
    font-family: var(--pp-font-naglowki);
    font-weight: var(--pp-waga-naglowkow);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

html[data-marka][data-styl] main h2 {
    font-family: var(--pp-font-naglowki);
    font-weight: var(--pp-waga-srodtytulow);
    letter-spacing: -0.02em;
}

/* Linki w treści: akcent marki z cienkim podkreśleniem jak w artykułach witryny. */
html[data-marka] main :where(a:not([class])) {
    color: var(--pp-akcent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Kreskowanie marginesów obok kolumny treści (motyw witryny z tailwindcss.com) — tło stron klienta. */
html[data-marka] .strefa-kreskowanie {
    background-image: repeating-linear-gradient(
        315deg,
        var(--pp-linia) 0,
        var(--pp-linia) 1px,
        transparent 0,
        transparent 50%
    );
    background-size: 10px 10px;
}

/* Akcent biura (wygląd biura z TM, data-akcent-biura): zastępuje akcent własny stylu, dopóki odwiedzający nie wybierze
   w przełączniku własnego koloru (data-akcent). Wartości = kolory akcentu z marka.css (sekcja KOLORY AKCENTU). */

html[data-akcent-biura="niebieski"]:not([data-akcent]) {
    --pp-akcent: #0369a1;
    --pp-akcent-jasny: #0ea5e9;
    --pp-akcent-tlo: rgb(14 165 233 / 0.1);
}

html[data-akcent-biura="indygo"]:not([data-akcent]) {
    --pp-akcent: #4338ca;
    --pp-akcent-jasny: #6366f1;
    --pp-akcent-tlo: rgb(99 102 241 / 0.1);
}

html[data-akcent-biura="morski"]:not([data-akcent]) {
    --pp-akcent: #0f766e;
    --pp-akcent-jasny: #14b8a6;
    --pp-akcent-tlo: rgb(20 184 166 / 0.1);
}

html[data-akcent-biura="granatowy"]:not([data-akcent]) {
    --pp-akcent: #1e3a8a;
    --pp-akcent-jasny: #3b82f6;
    --pp-akcent-tlo: rgb(59 130 246 / 0.1);
}

html[data-akcent-biura="terakota"]:not([data-akcent]) {
    --pp-akcent: #c2410c;
    --pp-akcent-jasny: #ea580c;
    --pp-akcent-tlo: rgb(234 88 12 / 0.1);
}

html[data-akcent-biura="niebieski"].dark:not([data-akcent]) {
    --pp-akcent: #38bdf8;
    --pp-akcent-jasny: #38bdf8;
    --pp-akcent-tlo: rgb(56 189 248 / 0.12);
}

html[data-akcent-biura="indygo"].dark:not([data-akcent]) {
    --pp-akcent: #a5b4fc;
    --pp-akcent-jasny: #818cf8;
    --pp-akcent-tlo: rgb(129 140 248 / 0.12);
}

html[data-akcent-biura="morski"].dark:not([data-akcent]) {
    --pp-akcent: #2dd4bf;
    --pp-akcent-jasny: #2dd4bf;
    --pp-akcent-tlo: rgb(45 212 191 / 0.12);
}

html[data-akcent-biura="granatowy"].dark:not([data-akcent]) {
    --pp-akcent: #93c5fd;
    --pp-akcent-jasny: #60a5fa;
    --pp-akcent-tlo: rgb(96 165 250 / 0.12);
}

html[data-akcent-biura="terakota"].dark:not([data-akcent]) {
    --pp-akcent: #fb923c;
    --pp-akcent-jasny: #f97316;
    --pp-akcent-tlo: rgb(249 115 22 / 0.12);
}

/*
 * 4. KOMPONENTY DEVEXPRESS (motyw Fluent) — grid listy faktur i jego okna (menu filtra, wybór kolumn).
 * Fluent ma własne zmienne (--dxds-*): paletę akcentu primary-10…170 (stopień 90 = kolor podstawowy) i zmienne
 * znaczeniowe tła, tekstu i linii zależne od trybu. Skala --dxbl-accent-color-* z grupy 1 służy komponentom portalu
 * (w ciemnym stopnie 30–40 to TEKST akcentu), więc paleta DX idzie osobno: jasne stopnie — akcent zmieszany z bielą,
 * ciemne — z czernią, tak jak paleta Fluent (ta sama w obu trybach; tryb wybiera stopnie). Podstawą jest
 * --pp-akcent-jasny (średni ton akcentu marki w obu trybach).
 */
html[data-marka] {
    --dxds-primary-10: color-mix(in oklab, var(--pp-akcent-jasny) 8%, #fff);
    --dxds-primary-20: color-mix(in oklab, var(--pp-akcent-jasny) 16%, #fff);
    --dxds-primary-30: color-mix(in oklab, var(--pp-akcent-jasny) 26%, #fff);
    --dxds-primary-40: color-mix(in oklab, var(--pp-akcent-jasny) 38%, #fff);
    --dxds-primary-50: color-mix(in oklab, var(--pp-akcent-jasny) 52%, #fff);
    --dxds-primary-60: color-mix(in oklab, var(--pp-akcent-jasny) 66%, #fff);
    --dxds-primary-70: color-mix(in oklab, var(--pp-akcent-jasny) 80%, #fff);
    --dxds-primary-80: color-mix(in oklab, var(--pp-akcent-jasny) 90%, #fff);
    --dxds-primary-90: var(--pp-akcent-jasny);
    --dxds-primary-100: color-mix(in oklab, var(--pp-akcent-jasny) 90%, #000);
    --dxds-primary-110: color-mix(in oklab, var(--pp-akcent-jasny) 80%, #000);
    --dxds-primary-120: color-mix(in oklab, var(--pp-akcent-jasny) 68%, #000);
    --dxds-primary-130: color-mix(in oklab, var(--pp-akcent-jasny) 56%, #000);
    --dxds-primary-140: color-mix(in oklab, var(--pp-akcent-jasny) 44%, #000);
    --dxds-primary-150: color-mix(in oklab, var(--pp-akcent-jasny) 32%, #000);
    --dxds-primary-160: color-mix(in oklab, var(--pp-akcent-jasny) 22%, #000);
    --dxds-primary-170: color-mix(in oklab, var(--pp-akcent-jasny) 12%, #000);

    /* tło, tekst i linie gridu i jego okien jak karty portalu (tokeny marki przełączają się z klasą dark) */
    --dxds-color-surface-neutral-default-rest: var(--pp-tlo);
    --dxds-color-surface-neutral-default-hovered: color-mix(in oklab, var(--pp-tekst) 4%, var(--pp-tlo));
    --dxds-color-surface-neutral-default-selected: color-mix(in oklab, var(--pp-tekst) 7%, var(--pp-tlo));
    --dxds-color-surface-neutral-subdued-rest: var(--strefa-powierzchnia);
    --dxds-color-content-neutral-default-rest: var(--pp-tekst);
    --dxds-color-content-neutral-default-hovered: var(--pp-tekst);
    --dxds-color-content-neutral-default-selected: var(--pp-tekst);
    --dxds-color-content-highlight-rest: var(--pp-tekst);
    --dxds-color-content-neutral-subdued-rest: var(--pp-tekst-2);
    --dxds-color-border-neutral-default-rest: var(--pp-linia-mocna);
    --dxds-color-border-neutral-subdued-rest: var(--pp-linia);
    --dxds-font-family-sans-serif: var(--pp-font-sans);
}