/* ============================================================================
   PIM V4 — SKÓRKA v2 — warstwa design-tokenów + spójność jasny/ciemny
   ============================================================================
   CEO 2026-06-13: panel ma DWIE pełne wersje (jasną i ciemną) przełączane JEDNYM
   globalnym przełącznikiem w profilu. Motyw ustawia <html data-theme="..."> na
   każdej stronie (mechanizm w dashboard_app.py). Ten plik:
     1) DOSTARCZA nowe tokeny marki/odstępów/cieni/rogów, których stary styles.css
        nie ma (brand #005FAD, rogi 2px, --surface-*, --shadow-*) — CZYSTO DODAJE,
        nie nadpisuje istniejących tokenów motywu → tryb ciemny zostaje nietknięty.
     2) W TRYBIE JASNYM dodaje DEFINICJĘ (kontrast pasków, cienie/ramki paneli),
        żeby gęste ekrany nie były wyblakłe. Zakres: html[data-theme="light"] —
        czyli tryb ciemny w 100% bez zmian.
   Kanon: jasny = wzorzec /orders, rogi 2px, kolory marki. Kill-switch: ?skin=off.
   Pełny przewodnik: docs/skills/design_system_canon.md
   ============================================================================ */

/* ============================================================================
   1. NOWE TOKENY (których styles.css nie definiuje) — DODAJEMY, nie nadpisujemy
   ============================================================================ */
:root {
    --brand-primary-600: #005FAD;
    --brand-primary-700: #004B8A;
    --brand-primary-100: #F3F9FF;
    --brand-primary-200: #C9E5FC;
    --brand-primary-opacity-04: rgba(0, 95, 173, 0.04);
    --brand-primary-opacity-06: rgba(0, 95, 173, 0.06);
    --brand-success-700: #147042;
    --brand-success-100: #EDF8F2;
    --brand-success-200: #BFE6CE;
    --brand-warning-600: #EB840F;
    --brand-warning-100: #FEF5EB;
    --brand-warning-200: #FAD9A8;
    --brand-danger-800:  #B9453A;
    --brand-danger-100:  #FEF2F0;
    --brand-danger-200:  #F4C7C0;
    /* ── FIOLET + TURKUS (2026-06-22): brakujące rodziny dla badge'y konfiguracji
       marketplace (Allegro/eMAG). Wcześniej te kolory były hardkodowane (#7c3aed,
       #0f766e itd.) i NIE zmieniały się z motywem → w trybie ciemnym tekst znikał.
       Soft(100)=tło, 200=ramka, 700=tekst/solid. Dark = jasne wersje, czytelne. ── */
    --brand-purple-100:  #f3e8ff;
    --brand-purple-200:  #d8b4fe;
    --brand-purple-700:  #6d28d9;
    --brand-teal-100:    #ccfbf1;
    --brand-teal-200:    #99f6e4;
    --brand-teal-700:    #0f766e;

    --gray-100: #f3f4f6;
    --gray-300: #d1d5db;
    --gray-700: #5f6f86;

    --surface-page:     #eef3f9;
    --surface-card:     #ffffff;
    --surface-elevated: #f4f8fc;
    --surface-inverse:  #1e293b;
    --surface-input:    #ffffff;
    --surface-divider:  #d7e0ec;

    --text-primary:   #172435;
    --text-secondary: #4E565F;
    --text-muted:     #5f6f86;
    --text-on-brand:  #ffffff;

    /* Narzędzia pozostają fioletowe, z jasnym tłem i czytelnym tekstem. */
    --nav-tools-bg-start: color-mix(in srgb, var(--brand-purple-700) 30%, var(--text-on-brand));
    --nav-tools-bg-end: color-mix(in srgb, var(--brand-purple-700) 20%, var(--text-on-brand));
    --nav-tools-text: color-mix(in srgb, var(--brand-purple-700) 70%, var(--text-primary));

    --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px;
    --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

    /* ROGI 2px WSZĘDZIE — kanon CEO (kanciaste, jak /orders), także pigułki/badge. */
    --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-full: 2px;

    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                        'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px;
    --font-size-lg: 16px; --font-size-xl: 20px;
    --line-height-tight: 1.25; --line-height-normal: 1.5;

    --table-head-bg:      rgba(0, 0, 0, 0.05);
    --table-row-hover:    rgba(0, 95, 173, 0.05);
    --table-row-selected: rgba(0, 95, 173, 0.09);
    --pim-nav-top-offset: 44px;

    /* Wiersz WYPŁATY DO NAS w rachunku portfela (R302125) — własna para tokenów,
       nie recykling „zaznaczonego wiersza": zaznaczenie robi człowiek klikając,
       a to jest trwała cecha pozycji. Odcień niebieskiego, żeby wypłaty rzucały
       się w oczy na tle białych wierszy; `-active` to wypłata, na którą właśnie
       skoczył guzik nawigacji. */
    --ledger-payout-row-bg:     rgba(0, 95, 173, 0.11);
    --ledger-payout-row-active: rgba(0, 95, 173, 0.26);

    /* ── LEGACY ALIASY (systemowy fix 2026-06-14): te nazwy były NIEZDEFINIOWANE,
       więc var(--card-bg, #1e1e2e) wpadał w CIEMNY fallback na jasnej stronie
       (~150 użyć = główne źródło ciemnych kafli). Mapujemy na tokeny → themed. ── */
    --card-bg: var(--surface-card);
    --bg-card: var(--surface-card);
    --panel-bg: var(--surface-card);
    --modal-bg: var(--surface-card);
    --row-bg: var(--surface-card);
    --card-bg-2: var(--surface-card);
    --input-bg: var(--surface-input);
    --header-bg: var(--surface-elevated);
    --surface-secondary: var(--surface-elevated);
    --bg-secondary: var(--surface-elevated);
    --bg-elevated: var(--surface-elevated);
    --bg-primary: var(--surface-page);
    --bg-tertiary: var(--surface-divider);
    --text-light: var(--text-secondary);
    --fg: var(--text-primary);

    /* ── 2. RUNDA aliasów (2026-06-14): te NIE są zdefiniowane NIGDZIE, więc
       var(--table-header-bg, #333) itp. zawsze wpadały w CIEMNY fallback (także
       w jasnym). Mapujemy na themed tokeny → poprawne w obu motywach. ── */
    --table-header-bg: var(--table-head-bg);   /* 153× — ciemne nagłówki tabel */
    --border: var(--border-color);             /* 21× */
    --input-border: var(--surface-divider);
    --nav-input-border: var(--surface-divider);
    --pk-border: var(--surface-divider);       /* price tiers */
    --zwg-text: var(--text-primary);           /* ZakupyWGodzine */
    --text: var(--text-primary);
    --hover-bg: var(--table-row-hover);
    --secondary-bg: var(--surface-elevated);
    --admin-ai-bg: var(--surface-card);
    --admin-ai-border: var(--surface-divider);

    /* ── 3. RUNDA (2026-06-14, z walidatora audit_skin_dark_fallbacks): aliasy
       używane WYŁĄCZNIE jako tło, niezdefiniowane → ciemny fallback. ── */
    --bg-active: var(--table-row-selected);
    --secondary-color: var(--surface-elevated);
    --admin-ai-input-bg: var(--surface-input);
    --widget-bg: var(--surface-card);
    --bg-body: var(--surface-page);

    /* ── 4. RUNDA (CEO 2026-06-21): te 4 były NADAL niezdefiniowane mimo masowego użycia
       (--text-color 2567×, --border-color 16226×, --bg-color 696×, --accent-color 371×).
       var(--text-color, #eee) dawał JASNY tekst na JASNYM tle = nieczytelne na wielu
       zakładkach (Ustawienia itd.). Mapujemy na themed tokeny → poprawne w jasnym i ciemnym. ── */
    --text-color: var(--text-primary);
    --bg-color: var(--surface-page);
    --border-color: var(--surface-divider);
    --accent-color: var(--brand-primary-600);

    /* ── PALETA KPI (2026-06-14): jasne neony flat-UI (zielony/pomarańcz/niebieski...)
       miały kontrast <3 na BIAŁYM. Tu = ciemniejsze, czytelne na jasnym. W ciemnym
       motywie (blok html[data-theme="dark"]) wracają jasne neony. Używać dla TEKSTU
       liczb/statusów na kartach — NIE dla teł wykresów (canvas nie czyta var()). ── */
    --kpi-green:  #15803d;
    --kpi-orange: #c2410c;
    --kpi-blue:   #1d6fa5;
    --kpi-purple: #7e3a9e;
    --kpi-red:    #c0392b;
    --kpi-gray:   var(--text-secondary);
    --kpi-teal:   #0f766e;

    /* ── KONSOLA LOGÓW (CEO 2026-07-04, R77749): podgląd logów PODĄŻA za motywem —
       jasny motyw = jasna konsola, ciemny = terminalowa. Kolory poziomów logów mają
       osobne warianty per motyw (jasne neony są nieczytelne na białym). Używają:
       Szybkie Logi Demonów (/technika), /system_logs. ── */
    --console-bg:            #f6f8fa;
    --console-text:          #1f2328;
    --console-line-default:  #1f2328;
    --console-line-info:     #1a7f37;
    --console-line-warning:  #9a6700;
    --console-line-error:    #d1242f;
    --console-line-critical: #a40e26;
    --console-line-debug:    #59636e;
    --console-line-muted:    #6e7781;
}

html[data-theme="dark"] {
    --brand-primary-600: #3b82f6;
    --brand-primary-700: #60a5fa;
    --brand-primary-100: #1e2d44;
    --brand-primary-200: #1e3a5f;
    --brand-primary-opacity-04: rgba(59, 130, 246, 0.08);
    --brand-primary-opacity-06: rgba(59, 130, 246, 0.12);
    --brand-success-700: #22c55e;
    --brand-success-100: #052e1b;
    --brand-success-200: #0f4a2e;
    --brand-warning-600: #f59e0b;
    --brand-warning-100: #422006;
    --brand-warning-200: #6b3a0c;
    --brand-danger-800:  #ef4444;
    --brand-danger-100:  #450a0a;
    --brand-danger-200:  #6e1f1f;
    --brand-purple-100:  #2e1065;
    --brand-purple-200:  #5b21b6;
    --brand-purple-700:  #8b5cf6;   /* średnio-nasycony: biały tekst na solidnym tle czytelny + jako tekst na ciemnym OK */
    --brand-teal-100:    #042f2e;
    --brand-teal-200:    #0f5a55;
    --brand-teal-700:    #14b8a6;

    --gray-100: #334155;
    --gray-300: #475569;
    --gray-700: #94a3b8;

    --surface-page:     #0f172a;
    --surface-card:     #1e293b;
    --surface-elevated: #334155;
    --surface-inverse:  #020617;
    --surface-input:    #1e293b;
    --surface-divider:  #334155;

    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-on-brand:  #ffffff;

    --nav-tools-bg-start: color-mix(in srgb, var(--brand-purple-700) 40%, var(--text-on-brand));
    --nav-tools-bg-end: color-mix(in srgb, var(--brand-purple-700) 30%, var(--text-on-brand));
    --nav-tools-text: var(--brand-purple-100);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.40);

    --table-head-bg:      rgba(255, 255, 255, 0.06);
    --table-row-hover:    rgba(59, 130, 246, 0.10);
    --table-row-selected: rgba(59, 130, 246, 0.16);

    /* Wiersz wypłaty w rachunku portfela — na ciemnym tle ten sam błękit musi
       być mocniejszy, żeby w ogóle było go widać. */
    --ledger-payout-row-bg:     rgba(59, 130, 246, 0.20);
    --ledger-payout-row-active: rgba(59, 130, 246, 0.42);

    /* Paleta KPI — w ciemnym motywie jasne neony (czytelne na ciemnym tle). */
    --kpi-green:  #2ecc71;
    --kpi-orange: #e67e22;
    --kpi-blue:   #3498db;
    --kpi-purple: #9b59b6;
    --kpi-red:    #e74c3c;
    --kpi-gray:   #95a5a6;
    --kpi-teal:   #5eead4;

    /* Konsola logów — ciemny motyw = klasyczny terminal (jasne neony czytelne). */
    --console-bg:            #0d1117;
    --console-text:          #e6edf3;
    --console-line-default:  #e2e8f0;
    --console-line-info:     #4ade80;
    --console-line-warning:  #fbbf24;
    --console-line-error:    #f87171;
    --console-line-critical: #ff6b6b;
    --console-line-debug:    #94a3b8;
    --console-line-muted:    #8b949e;
}

/* ============================================================================
   2. TRYB JASNY — DEFINICJA (żeby gęste ekrany nie były wyblakłe).
      Zakres tylko html[data-theme="light"] → TRYB CIEMNY NIETKNIĘTY.
   ============================================================================ */

/* Paski monitoringu (CPU/RAM/dysk) — mocniejszy kontrast na białym */
html[data-theme="light"] {
    --bar-bg-color: #dde7f2;
    --bar-color-normal: #2f80ed;
    --bar-color-high: #1f6feb;
    --bar-color-crit: #005FAD;
}

/* Karty/panele — dodaj cień i wyraźniejszą ramkę, żeby "odbijały" się od tła */
html[data-theme="light"] .widget-section,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .report-chart,
html[data-theme="light"] .report-table,
html[data-theme="light"] .proc-card,
html[data-theme="light"] .product-lookup-card,
html[data-theme="light"] .modal-content {
    box-shadow: var(--shadow-sm);
    border-color: var(--surface-divider) !important;
    background-color: var(--surface-card) !important;
}

/* Nagłówki widżetów / sekcji — subtelne tło, żeby były czytelne */
html[data-theme="light"] .widget-header,
html[data-theme="light"] .widget-footer {
    background-color: #f5f8fc;
    color: var(--text-primary);
}

/* Nagłówki tabel monitoringu — widoczne na białym (były rgba białe = nikłe) */
html[data-theme="light"] .proc-table thead th,
html[data-theme="light"] thead th {
    background-color: rgba(0, 95, 173, 0.06);
    color: var(--text-secondary);
}

/* Subtelne paski naprzemienne rzędów (były białe-przezroczyste = niewidoczne) */
html[data-theme="light"] tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.025); }
html[data-theme="light"] .proc-table tbody tr:hover { background-color: var(--table-row-hover); }

/* ============================================================================
   3. KOMPONENTY — bezpieczny polish (rogi 2px + fokus + scrollbar).
      BEZ nadpisywania kolorów motywu (tła/tekstu) → nie psuje żadnego motywu.
   ============================================================================ */
html.skin-v2 :focus-visible {
    outline: 2px solid var(--brand-primary-600);
    outline-offset: 1px;
}
html.skin-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.skin-v2 select,
html.skin-v2 textarea,
html.skin-v2 button,
html.skin-v2 .btn,
html.skin-v2 .card,
html.skin-v2 .panel,
html.skin-v2 .widget-section,
html.skin-v2 .modal-content {
    border-radius: var(--radius-sm);
}
/* Paski przewijania — spójne i subtelne */
html.skin-v2 ::-webkit-scrollbar { width: 10px; height: 10px; }
html.skin-v2 ::-webkit-scrollbar-thumb {
    background: rgba(127, 140, 160, 0.5);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background-clip: content-box;
}
html.skin-v2 ::-webkit-scrollbar-thumb:hover { background: rgba(127, 140, 160, 0.75); }
html.skin-v2 ::-webkit-scrollbar-track { background: transparent; }
html.skin-v2 ::selection { background: var(--brand-primary-200); color: #172435; }

/* ============================================================================
   4. KAFLE NAWIGACJI — ZAWSZE WIDOCZNE (CEO 2026-06-14)
   Strony quasi-standalone (np. /zurnal) NIE ładują styles.css, więc zmienne
   --nav-* są niezdefiniowane → kafle były przezroczyste bez ramki ("same napisy").
   Skórka jest wstrzykiwana WSZĘDZIE — tu fallback gwarantuje widoczny kafel
   (biały + ramka w jasnym, ciemny + ramka w ciemnym) niezależnie od --nav-*.
   ============================================================================ */
html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn,
html.skin-v2 .global-navigation-header .nav-grid-item {
    background: var(--nav-tile-bg, var(--surface-card));
    color: var(--nav-text, var(--text-primary));
    border: 1px solid var(--nav-border, var(--surface-divider));
    font-weight: 600;
}
/* Menu MA wyglądać identycznie wszędzie (CEO): strony-samodzielne (calendar/zurnal/czat)
   miały podkreślony tekst z domyślnego `a` — zdejmujemy je tu (skórka = wszędzie). */
html.skin-v2 .global-navigation-header a,
html.skin-v2 .global-navigation-header .nav-item-label,
html.skin-v2 .global-navigation-header .action-button {
    text-decoration: none !important;
}
html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn:hover {
    background: var(--nav-hover-bg, var(--brand-primary-100));
    color: var(--nav-text, var(--text-primary));
}
html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn.active {
    background: var(--nav-accent, var(--brand-primary-600));
    color: #fff;
    border-color: transparent;
}

/* CEO 2026-06-21: pasek wykorzystania limitu kupieckiego w raporcie dostawcy.
   Tylko tokeny skorki v2 (ZASADA #-58): jasny default + ciemny przez data-theme. */
.si-credit-bar {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.si-credit-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.si-credit-bar-head span:last-child {
    font-weight: 700;
    color: var(--text-primary);
}
.si-credit-bar-track {
    height: 10px;
    background: var(--surface-page);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.si-credit-bar-fill {
    height: 100%;
    width: 0;
    background: var(--brand-primary-600);
    border-radius: var(--radius-sm);
    transition: width .3s ease;
}
.si-credit-bar.warn .si-credit-bar-fill { background: var(--brand-warning-600); }
.si-credit-bar.over .si-credit-bar-fill { background: var(--brand-danger-800); }

/* ═══════════════════════════════════════════════════════════════════════
 * POWIĘKSZANIE MINIATUR PRODUKTU (pim_image_zoom.js) — CEO 2026-07-01
 * Lekki sygnał „da się kliknąć" na miniaturach zamówień. Kanon: kursor-lupa
 * + subtelny hover (ramka marki + delikatny cień). Spójne light + dark.
 * ═══════════════════════════════════════════════════════════════════════ */
img.order-product-thumb,
img[data-zoom],
[data-zoom] > img {
    cursor: zoom-in;
    transition: box-shadow .15s ease, transform .15s ease, outline-color .15s ease;
    outline: 2px solid transparent;
    outline-offset: 1px;
}
img.order-product-thumb:hover,
img[data-zoom]:hover,
[data-zoom]:hover > img {
    outline-color: var(--brand-primary-600);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

/* Lupa 🔍 w rogu miniatury na głównej liście produktów zamówienia
 * (kontener td.products-cell-thumb ma position:relative). Subtelna,
 * pojawia się przy najechaniu — „lekkie oznaczenie" wg CEO. */
td.products-cell-thumb {
    position: relative;
}
td.products-cell-thumb::after {
    content: "🔍";
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 12px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
td.products-cell-thumb:hover::after {
    opacity: 1;
}
/* Placeholder „📦" (brak zdjęcia) nie udaje klikalnego */
td.products-cell-thumb:hover:has(.order-product-thumb-placeholder)::after {
    opacity: 0;
}

/* Overlay powiększenia — celowo ciemny (jak lightbox sortowni). */
.pim-img-zoom-overlay { -webkit-tap-highlight-color: transparent; }

/* ============================================================================
   KONSOLA LOGÓW (CEO 2026-07-04, R77749) — podgląd logów podąża za motywem.
   Jasny motyw = jasna konsola z ciemnym tekstem; ciemny = terminal.
   Linie logów kolorowane KLASAMI (poziom loga), nie inline hexami.
   ============================================================================ */
.system-log-view,
.system-log-view-body {
    background: var(--console-bg);
    color: var(--console-text);
}
.log-line--default  { color: var(--console-line-default); }
.log-line--info     { color: var(--console-line-info); }
.log-line--warning  { color: var(--console-line-warning); }
.log-line--error    { color: var(--console-line-error); }
.log-line--critical { color: var(--console-line-critical); font-weight: 700; }
.log-line--debug    { color: var(--console-line-debug); }
.log-line--muted    { color: var(--console-line-muted); }

/* Chipy wyniku Image Intelligence (Weryfikacja zdjęć AI, /technika) — tokeny brand-*
   mają gotowe warianty jasny/ciemny, więc chip jest czytelny w OBU motywach. */
.ii-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; white-space: nowrap; }
.ii-badge--match    { background: var(--brand-success-100); color: var(--brand-success-700); border: 1px solid var(--brand-success-200); }
.ii-badge--mismatch { background: var(--brand-danger-100);  color: var(--brand-danger-800);  border: 1px solid var(--brand-danger-200); }
.ii-badge--supplier { background: var(--brand-primary-100); color: var(--brand-primary-700); border: 1px solid var(--brand-primary-200); }
.ii-badge--unsure   { background: var(--brand-warning-100); color: var(--brand-warning-600); border: 1px solid var(--brand-warning-200); }

/* ============================================================================
   NAPRAWY JASNEGO MOTYWU (CEO 2026-07-04, R77749) — elementy, które u CEO
   renderowały się CIEMNE na jasnym panelu (karta demona, konsola logów).
   Selektor :not([data-theme="dark"]) łapie też stan BEZ atrybutu motywu
   (wtedy stare dark-first tokeny styles.css dawały czarne tła). !important
   zgodnie z precedensem warstwy napraw jasnego motywu wyżej w tym pliku.
   ============================================================================ */
html:not([data-theme="dark"]) .tech-daemon-card,
html:not([data-theme="dark"]) .daemon-stats {
    background: var(--surface-card) !important;
    border-color: var(--surface-divider) !important;
    color: var(--text-secondary) !important;
}
html:not([data-theme="dark"]) .daemon-stats strong,
html:not([data-theme="dark"]) .daemon-info h4 { color: var(--text-primary) !important; }
html:not([data-theme="dark"]) .daemon-toggle-btn {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--surface-divider) !important;
}
html:not([data-theme="dark"]) .system-log-view,
html:not([data-theme="dark"]) .system-log-view-body {
    background: var(--console-bg) !important;
    color: var(--console-text) !important;
}

/* Szybkie Logi: demon bez wpisów w dzienniku (∅) — przygaszony, ale klikalny (tooltip wyjaśnia). */
.log-daemon-btn.no-journal { opacity: 0.55; }

/* ============================================================================
   WYBIERAK FOLDERU DOKUMENTACJI (.cdfp) — wspólny komponent okna „Zapisz w
   dokumentach" (CEO 2026-08-14: podział firmowe / moje prywatne / udostępnione
   + szukanie, bo płaska lista 1257 folderów ukrywała foldery prywatne).
   Tylko tokeny — działa w jasnym i ciemnym motywie, rogi 2px (#-58).
   ============================================================================ */
.cdfp { display: flex; flex-direction: column; gap: 8px; }
.cdfp-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.cdfp-scope {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer;
    background: var(--surface-elevated); color: var(--text-secondary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-scope:hover:not(:disabled) { color: var(--text-primary); border-color: var(--brand-primary-600); }
.cdfp-scope.active {
    background: var(--brand-primary-100); color: var(--brand-primary-700);
    border-color: var(--brand-primary-600); font-weight: 600;
}
.cdfp-scope:disabled { opacity: .45; cursor: not-allowed; }
.cdfp-scope.has-hits { border-color: var(--brand-primary-600); color: var(--text-primary); }
.cdfp-badge { font-size: 11px; color: var(--text-muted); }
.cdfp-scope.active .cdfp-badge { color: var(--brand-primary-700); }
.cdfp-search {
    width: 100%; padding: 7px 10px; font: inherit; font-size: 13px;
    background: var(--surface-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-search:focus { outline: none; border-color: var(--brand-primary-600); }
.cdfp-suggest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cdfp-suggest[hidden] { display: none; }
.cdfp-suggest-lbl { font-size: 12px; color: var(--text-muted); }
.cdfp-suggest-chip {
    max-width: 100%; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: var(--brand-primary-100); color: var(--brand-primary-700);
    border: 1px solid var(--brand-primary-600); border-radius: var(--radius-sm);
}
.cdfp-suggest-chip:hover { background: var(--surface-elevated); }
.cdfp-tree {
    max-height: 340px; overflow: auto; padding: 4px;
    background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-searchbox { display: block; }
.cdfp-row { display: flex; align-items: center; gap: 2px; }
.cdfp-row-hit { align-items: stretch; }
.cdfp-ico { flex: 0 0 auto; }
.cdfp-toggle {
    flex: 0 0 auto; width: 20px; height: 22px; padding: 0; cursor: pointer;
    background: transparent; border: 0; color: var(--text-muted); font-size: 11px; line-height: 1;
    transition: transform .12s ease;
}
.cdfp-toggle:hover { color: var(--text-primary); }
.cdfp-toggle.open { transform: rotate(90deg); }
.cdfp-toggle-space { flex: 0 0 auto; width: 20px; }
.cdfp-folder {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
    padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; font-size: 13px;
    background: transparent; color: var(--text-primary);
    border: 1px solid transparent; border-radius: var(--radius-sm);
}
.cdfp-folder:hover { background: var(--surface-elevated); border-color: var(--border-color); }
.cdfp-folder.selected {
    background: var(--brand-primary-100); border-color: var(--brand-primary-600);
    color: var(--brand-primary-700); font-weight: 600;
}
.cdfp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdfp-hit { display: flex; flex-direction: column; min-width: 0; }
.cdfp-hit-path { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdfp-lock, .cdfp-count { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }
.cdfp-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--text-muted); }
/* Okno „Zapisz w dokumentach" wspólne dla panelu zamówienia, ticketów i poczty */
.cds-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
          background: rgba(15, 23, 42, .45); }
.cds-ov[hidden] { display: none; }
.cds-modal { width: min(680px, 94vw); max-height: 92vh; overflow: auto; padding: 0 0 14px;
             background: var(--surface-card); color: var(--text-primary);
             border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.cds-modal h2 { margin: 0; padding: 14px 18px; font-size: 16px; color: var(--brand-primary-700);
                border-bottom: 1px solid var(--border-color); }
.cds-body { padding: 14px 18px; }
.cds-hint { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.cds-file { margin: 0 0 12px; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere;
            background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.cds-foot { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.cds-status { flex: 1 1 auto; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.cds-status.ok { color: var(--brand-success-700); font-weight: 600; }
.cds-btn { padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
           background: var(--surface-elevated); color: var(--text-primary);
           border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.cds-btn.primary { background: var(--brand-primary-600); color: var(--text-on-brand);
                   border-color: var(--brand-primary-600); font-weight: 600; }
.cds-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Guzik „zapisz w dokumentach" przy załączniku (zamówienie, ticket, poczta) */
.cds-att-btn { padding: 3px 7px; font: inherit; font-size: 12px; cursor: pointer; line-height: 1;
               background: var(--surface-elevated); color: var(--text-primary);
               border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.cds-att-btn:hover { border-color: var(--brand-primary-600); }
/* Zakładanie folderu wprost w oknie zapisu (CEO 2026-08-14) */
.cdfp-newbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.cdfp-new-open, .cdfp-new-save, .cdfp-new-cancel {
    padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer;
    background: var(--surface-elevated); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-new-open:hover:not(:disabled), .cdfp-new-cancel:hover { border-color: var(--brand-primary-600); }
.cdfp-new-open:disabled { opacity: .5; cursor: not-allowed; }
.cdfp-new-save {
    background: var(--brand-primary-600); color: var(--text-on-brand); border-color: var(--brand-primary-600); font-weight: 600;
}
.cdfp-new-save:hover { background: var(--brand-primary-700); border-color: var(--brand-primary-700); }
.cdfp-rename-open, .cdfp-move-open, .cdfp-move-root, .cdfp-move-cancel {
    padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer;
    background: var(--surface-elevated); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-rename-open:hover:not(:disabled), .cdfp-move-open:hover:not(:disabled),
.cdfp-move-root:hover, .cdfp-move-cancel:hover { border-color: var(--brand-primary-600); }
.cdfp-rename-open:disabled, .cdfp-move-open:disabled { opacity: .5; cursor: not-allowed; }
.cdfp-movebar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px;
    font-size: 12px; color: var(--text-primary);
    background: var(--brand-primary-100); border: 1px solid var(--brand-primary-600);
    border-radius: var(--radius-sm);
}
.cdfp-movebar[hidden] { display: none; }
.cdfp-move-info { flex: 1 1 200px; font-weight: 600; overflow-wrap: anywhere; }
/* W trybie przenoszenia cała lista jest celem — pokazujemy to kursorem i obwódką */
.cdfp-tree.cdfp-picking { border-color: var(--brand-primary-600); }
.cdfp-tree.cdfp-picking .cdfp-folder { cursor: copy; }
.cdfp-new-where { overflow-wrap: anywhere; }
.cdfp-newform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* atrybut ukrycia musi wygrać z display:flex — inaczej formularz widać, zanim go otworzysz */
.cdfp-newbar[hidden], .cdfp-newform[hidden] { display: none; }
.cdfp-new-name {
    flex: 1 1 220px; min-width: 160px; padding: 6px 9px; font: inherit; font-size: 13px;
    background: var(--surface-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cdfp-new-name:focus { outline: none; border-color: var(--brand-primary-600); }
.cdfp-new-status { flex: 1 1 100%; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.cdfp-new-status.err { color: var(--brand-danger-800); font-weight: 600; }
.cdfp-path {
    padding: 7px 10px; font-size: 12px; color: var(--text-muted);
    background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}
.cdfp-path.chosen { color: var(--text-primary); font-weight: 600; }
.cdfp-busy { opacity: .6; pointer-events: none; }

/* R581807 — wspólny wybór rachunku w obu paskach eksportu faktur. */
.bank-payer-picker {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-2); min-width: 0; max-width: min(25rem, calc(100vw - 6rem));
    padding: var(--spacing-1) var(--spacing-2); font: inherit; cursor: pointer;
    color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.bank-payer-picker > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-payer-picker:disabled { color: var(--text-secondary); cursor: default; }
.bank-payer-picker:focus-visible, .bank-payer-picker[aria-expanded="true"] {
    outline: 2px solid var(--brand-primary-600); outline-offset: 1px;
}
.bank-payer-menu {
    position: fixed; z-index: 1100; box-sizing: border-box;
    width: min(34rem, calc(100vw - 16px)); overflow: auto;
    font-family: var(--font-family-base); font-size: var(--font-size-sm);
    color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.bank-payer-menu[hidden] { display: none; }
.bank-payer-columns {
    display: grid; grid-template-columns: minmax(0, 1fr) 3rem 4.8rem minmax(0, 1.4fr);
    align-items: center; gap: var(--spacing-2); padding: 0 var(--spacing-3); min-width: 0;
}
.bank-payer-columns > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-payer-columns > span:nth-child(2), .bank-payer-columns > span:nth-child(3) {
    font-variant-numeric: tabular-nums;
}
.bank-payer-menu-heading {
    position: sticky; top: 0; padding: var(--spacing-2) 2.5rem var(--spacing-2) 0;
    background: var(--surface-elevated); color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color); font-size: var(--font-size-xs); font-weight: 600;
}
.bank-payer-menu-body { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; }
.bank-payer-option, .bank-payer-help-slot { box-sizing: border-box; height: 40px; border-bottom: 1px solid var(--border-color); }
.bank-payer-option { cursor: pointer; outline: none; }
.bank-payer-option > span:first-child { font-weight: 600; }
.bank-payer-option[aria-selected="true"] { background: var(--brand-primary-100); color: var(--text-primary); box-shadow: inset 3px 0 var(--brand-primary-600); }
.bank-payer-option:hover, .bank-payer-option:focus { background: var(--surface-elevated); box-shadow: inset 3px 0 var(--brand-primary-600); }
.bank-payer-option[aria-disabled="true"] { color: var(--text-secondary); cursor: not-allowed; }
.bank-payer-help-slot { display: flex; justify-content: center; align-items: center; }
.bank-payer-menu .pim-help { font-family: var(--font-family-base); }
@media (max-width: 480px) {
    .bank-payer-columns { grid-template-columns: minmax(0, 1fr) 2.5rem 4rem minmax(0, 1.4fr); gap: var(--spacing-1); padding: 0 var(--spacing-2); }
    .bank-payer-menu { font-size: var(--font-size-xs); }
}
.bank-payment-mode {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
}
.bank-payment-mode label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .45rem;
  border-radius: var(--radius-sm);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.bank-payment-mode label.is-selected {
  border-bottom-color: var(--brand-primary-600);
  font-weight: 700;
}
.bank-payment-mode label:has(input:disabled) { opacity: .6; cursor: default; }
.bank-payment-mode input { accent-color: var(--brand-primary-600); }
.bank-payment-hint { color: var(--text-primary); font-size: .75rem; }

/* R630853 — spokojne karty ChatGPT i raporty: ta sama hierarchia w obu motywach. */
.pim-chat-widget {
  margin: var(--spacing-6) 0; padding: var(--spacing-5);
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: var(--font-size-sm); line-height: 1.5; min-width: 0;
}
.pim-chat-header { display: flex; align-items: center; gap: var(--spacing-3); border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-3); }
/* R688842: wybór kartoteki EAN i pomocniczy, zwijany podgląd tworzenia treści. */
.product-ean-group { position: relative; margin: 0 0 var(--spacing-6); scroll-margin-top: 120px; min-width: 0; }
.product-ean-group::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--spacing-4)); border-bottom: 1px solid var(--border-color); pointer-events: none; }
.lookup-results-shell section.product-ean-group { padding: 0; }
.lookup-results-container.lookup-product-results { gap: var(--spacing-2); }
.product-ean-table-wrap { overflow-x: auto; }
.product-ean-table-wrap table { width: 100%; border-collapse: collapse; }
.product-ean-table-wrap td, .product-ean-table-wrap th { padding: var(--spacing-2) var(--spacing-3); text-align: left; overflow-wrap: anywhere; }
.product-ean-table-wrap tbody td { color: var(--text-primary); }
.product-ean-table-wrap th { background: var(--brand-primary-100); color: var(--brand-primary-600); }
.product-ean-toggle { display: flex; align-items: center; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand-primary-600); font: inherit; font-weight: 600; text-align: left; }
.product-ean-toggle > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.product-ean-table-wrap th:last-child, .product-ean-table-wrap td:last-child { white-space: nowrap; }
.product-ean-table-wrap code { white-space: normal; overflow-wrap: anywhere; }
.product-ean-current { background: var(--brand-primary-100); }
.product-ean-show-all { display: inline-block; font-size: var(--font-size-sm); white-space: nowrap; }
/* Nagłówek zawija cały pasek akcji; żaden przycisk nie łamie ikony i podpisu. */
.product-sticky-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3) var(--spacing-4); min-width: 0; }
.product-sticky-header .product-header-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3); flex: 1 1 34rem; min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); line-height: var(--line-height-tight); }
.product-header-title #product-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.product-header-ean { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); min-width: 0; }
.product-header-ean .ean-copy-badge { color: var(--kpi-blue); font-weight: 600; font-size: 0.9em; cursor: pointer; user-select: none; padding: 2px var(--spacing-2); border-radius: var(--radius-sm); border: 1px dashed var(--brand-primary-200); white-space: nowrap; }
.product-header-actions { display: flex; flex: 0 0 auto; align-items: stretch; gap: var(--spacing-2); margin-left: auto; }
.product-header-actions .product-header-action { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; margin: 0; padding: var(--spacing-2); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font: 600 var(--font-size-sm)/var(--line-height-tight) var(--font-family-base); white-space: nowrap; color: var(--text-primary); background: var(--surface-card); cursor: pointer; }
.product-header-actions .product-header-action--edit { background: var(--surface-elevated); }
.product-header-actions .product-header-action--operations { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: var(--text-on-brand); }
.product-header-actions .product-header-action:hover { filter: brightness(0.95); }
.product-sticky-header .editable-name-field { box-sizing: border-box; min-width: 0; width: 100%; padding: var(--spacing-2) var(--spacing-3); border: 2px solid var(--brand-purple-700); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface-input); font: inherit; }
body.pim-inline-edit-mode .product-header-title #product-name { flex-basis: 100%; }
.pim-generation-product.pim-chat-widget { padding: 0; margin: 0; }
.pim-generation-toggle { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; list-style: none; }
.pim-generation-toggle::-webkit-details-marker { display: none; }
.pim-generation-toggle::before { content: '▶'; font-size: var(--font-size-xs); }
.pim-generation-product[open] > .pim-generation-toggle::before { transform: rotate(90deg); }
.pim-generation-toggle > .pim-help { margin-left: auto; }
.pim-generation-toggle:focus-visible { outline: 2px solid var(--brand-primary-600); outline-offset: 2px; }
.product-section-toggle { cursor: pointer; user-select: none; }
.product-section-toggle > .section-collapse-arrow { display: inline-block; font-size: var(--font-size-xs); color: var(--text-secondary); margin-right: var(--spacing-2); }
.product-section-toggle:focus-visible { outline: 2px solid var(--brand-primary-600); outline-offset: 2px; }
.product-details-container .details-grid > .info-box[data-product-collapsed="1"] { align-self: start; }
.product-competition-box { margin-top: var(--spacing-4); }
.pim-chat-header h2, .pim-chat-widget .section-header h2 { margin: 0; font-size: var(--font-size-xl); color: var(--text-primary); }
.pim-chat-widget h3 { margin: var(--spacing-5) 0 var(--spacing-3); font-size: var(--font-size-base); color: var(--text-primary); }
.pim-chat-caption { color: var(--text-secondary); font-size: var(--font-size-sm); margin: var(--spacing-2) 0; }
.pim-chat-status { color: var(--text-primary); font-weight: 600; margin: var(--spacing-3) 0; }
.pim-chat-badge { color: var(--text-secondary); background: var(--surface-page); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--font-size-xs); padding: var(--spacing-1) var(--spacing-2); }
.pim-chat-warning { color: var(--brand-warning-600); font-weight: 600; }
.pim-chat-alert { border-left: 3px solid var(--brand-warning-600); padding: var(--spacing-2) var(--spacing-3); margin: var(--spacing-3) 0; background: var(--surface-elevated); color: var(--text-primary); }
.pim-chat-alert p { margin: var(--spacing-1) 0; }
.pim-chat-accounts { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin: var(--spacing-3) 0; }
.pim-chat-accounts > div { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }
.pim-chat-accounts span { color: var(--text-secondary); }
.pim-chat-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--spacing-3); margin: var(--spacing-3) 0; }
.pim-chat-metric { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--spacing-3); background: var(--surface-elevated); }
.pim-chat-metric strong { display: block; font-size: var(--font-size-xl); color: var(--text-primary); }
.pim-chat-metric span { color: var(--text-secondary); }
.pim-chat-table-wrap { overflow-x: auto; max-width: 100%; }
.pim-chat-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--font-size-sm); }
.pim-chat-table th, .pim-chat-table td { padding: var(--spacing-3); border-bottom: 1px solid var(--border-color); vertical-align: top; line-height: 1.5; }
.pim-chat-table th { color: var(--text-secondary); background: var(--surface-elevated); font-weight: 600; }
.pim-chat-table td { color: var(--text-primary); }
.pim-chat-details, .pim-chat-review-job { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--border-color); }
.pim-chat-details > summary, .pim-chat-review-job > summary { cursor: pointer; color: var(--text-primary); font-weight: 600; padding: var(--spacing-2) 0; overflow-wrap: anywhere; }
.pim-chat-details > p { color: var(--text-secondary); overflow-wrap: anywhere; }
.pim-chat-facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--spacing-2) var(--spacing-5); margin: var(--spacing-3) 0; }
.pim-chat-facts > div { display: flex; justify-content: space-between; gap: var(--spacing-3); border-bottom: 1px solid var(--border-color); padding: var(--spacing-2) 0; }
.pim-chat-facts dt { color: var(--text-secondary); }
.pim-chat-facts dd { margin: 0; font-weight: 600; }
.pim-chat-job-list { display: grid; gap: var(--spacing-3); }
.pim-chat-job { padding: var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.pim-chat-job-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-2); }
.pim-chat-job-heading span, .pim-chat-job small { color: var(--text-secondary); }
.pim-chat-job p { margin: var(--spacing-2) 0; }
.pim-chat-report { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.65; color: var(--text-primary); white-space: normal; overflow-wrap: anywhere; }
.pim-chat-report-section { margin: var(--spacing-5) 0; max-width: 78ch; }
.pim-chat-report-section h4 { margin: 0 0 var(--spacing-2); font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); }
.pim-chat-report-section p { margin: var(--spacing-2) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pim-chat-original { white-space: pre-wrap; font-family: var(--font-family-base); line-height: 1.65; overflow-wrap: anywhere; margin: var(--spacing-3) 0; }
.pim-chat-modal-body { margin: 0; padding: var(--spacing-4); overflow: auto; font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--text-primary); }
.eng-session-look { border: 0; padding: 0; background: transparent; color: var(--brand-primary-600); font: inherit; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.eng-session-look:focus-visible, .pim-eng-session-close:focus-visible { outline: 2px solid var(--brand-primary-600); outline-offset: 3px; }
.pim-eng-session-hint { display: block; margin-top: var(--spacing-1); color: var(--text-muted); }
.pim-eng-session-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: none; max-height: none; box-sizing: border-box; margin: 0; border: 0; padding: var(--spacing-5); background: transparent; }
.pim-eng-session-overlay[open] { display: flex; }
.pim-eng-session-overlay::backdrop { background: color-mix(in srgb, var(--surface-inverse) 65%, transparent); }
.pim-eng-session-dialog { display: flex; flex-direction: column; width: 100%; max-width: 900px; max-height: 90dvh; min-width: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-lg); }
.pim-eng-session-header { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border-color); }
.pim-eng-session-header h3 { margin: 0 0 var(--spacing-1); font-size: var(--font-size-lg); }
.pim-eng-session-header small { color: var(--text-secondary); }
.pim-eng-session-close { margin-left: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface-card); font-size: var(--font-size-xl); min-width: 36px; min-height: 36px; cursor: pointer; }
.pim-eng-session-body { overflow: auto; overscroll-behavior: contain; padding: var(--spacing-4); overflow-wrap: anywhere; }
.pim-eng-session-body p { margin: var(--spacing-2) 0; }
.pim-eng-session-body li { margin: var(--spacing-2) 0; }
.pim-eng-session-section { margin: var(--spacing-5) 0; padding-top: var(--spacing-3); border-top: 1px solid var(--border-color); }
.pim-eng-session-section h4, .pim-eng-session-body details h4 { margin: 0 0 var(--spacing-2); font-size: var(--font-size-base); color: var(--text-primary); }
.pim-eng-session-lead { font-size: var(--font-size-lg); }
.pim-eng-session-log { margin: var(--spacing-3) 0; padding: var(--spacing-3); max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-size-sm); line-height: var(--line-height-normal); border: 1px solid var(--border-color); background: var(--surface-elevated); color: var(--text-primary); }
@media (max-width: 600px) {
  .pim-chat-widget { padding: var(--spacing-3); }
  .pim-chat-header h2, .pim-chat-widget .section-header h2 { font-size: var(--font-size-lg); }
  .pim-chat-metrics { grid-template-columns: 1fr; }
  .pim-chat-accounts { flex-direction: column; gap: var(--spacing-2); }
  .pim-chat-table { min-width: 580px; }
  .pim-chat-facts { grid-template-columns: 1fr; }
  #eng-report-modal { padding: var(--spacing-2); }
  .pim-eng-session-overlay { padding: var(--spacing-2); }
  .pim-eng-session-body { padding: var(--spacing-3); }
}

/* R632318: jedna typografia dossier RD-N w Centrum i na karcie zamówienia. */
.claim-dossier { position: fixed; inset: 0; z-index: 10000; display: flex; justify-content: center; align-items: center; padding: var(--spacing-4); box-sizing: border-box; background: color-mix(in srgb, var(--text-primary) 45%, transparent); font: var(--font-size-base)/1.55 var(--font-family-base); color: var(--text-primary); }
html[data-theme="dark"] .claim-dossier { background: color-mix(in srgb, var(--surface-page) 70%, transparent); }
.claim-dossier .claim-dossier-panel { display: flex; flex-direction: column; width: 100%; max-width: 1120px; max-height: calc(100dvh - 32px); min-width: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-lg); overflow: hidden; }
.claim-dossier .claim-dossier-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-4); border-bottom: 1px solid var(--border-color); }
.claim-dossier .claim-dossier-heading { margin: 0; font-size: var(--font-size-lg); font-weight: 600; line-height: 1.5; color: var(--text-primary); text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.claim-dossier .claim-dossier-body { padding: var(--spacing-4); overflow: auto; overscroll-behavior: contain; min-height: 0; overflow-wrap: anywhere; }
.claim-dossier .claim-dossier-section { padding: var(--spacing-4); margin-bottom: var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-card); }
.claim-dossier .claim-dossier-section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.claim-dossier .claim-dossier-meta { font-size: var(--font-size-sm); font-weight: 400; line-height: 1.5; color: var(--text-secondary); margin-top: var(--spacing-1); }
.claim-dossier .claim-dossier-emphasis { font-size: var(--font-size-base); font-weight: 600; line-height: 1.55; margin-top: var(--spacing-1); }
.claim-dossier .claim-dossier-text { font-size: var(--font-size-base); font-weight: 400; line-height: 1.6; white-space: pre-wrap; margin-top: var(--spacing-2); overflow-wrap: anywhere; }
.claim-dossier .claim-dossier-secondary { color: var(--text-secondary); }
.claim-dossier .claim-dossier-body b, .claim-dossier .claim-dossier-body strong { font-size: inherit; font-weight: 600; }
.claim-dossier .claim-dossier-body .badge { font-size: var(--font-size-sm); font-weight: 600; white-space: normal; line-height: 1.5; }
.claim-dossier .muted, .claim-dossier .claim-dossier-body small { font-size: var(--font-size-sm); font-weight: 400; line-height: 1.5; color: var(--text-secondary); }
.claim-dossier .claim-dossier-body table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--font-size-base); }
.claim-dossier .claim-dossier-body th { font-size: var(--font-size-sm); font-weight: 600; padding: var(--spacing-2); white-space: normal; overflow-wrap: anywhere; }
.claim-dossier .claim-dossier-body td { font-size: var(--font-size-base); font-weight: 400; line-height: 1.55; padding: var(--spacing-2); vertical-align: top; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-color); }
.claim-dossier .claim-dossier-facts td:first-child { width: 30%; font-size: var(--font-size-sm); color: var(--text-secondary); }
.claim-dossier .claim-dossier-facts tr:last-child td { border-bottom: 0; }
.claim-dossier .claim-dossier-body details { font-size: var(--font-size-base); line-height: 1.55; }
.claim-dossier .claim-dossier-body summary { font-size: var(--font-size-base); font-weight: 600; color: var(--brand-primary-600); cursor: pointer; line-height: 1.55; }
.claim-dossier .claim-dossier-details { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--border-color); }
.claim-dossier .claim-dossier-details .claim-dossier-text { white-space: normal; }
.claim-dossier .claim-dossier-details p { margin: 0 0 var(--spacing-3); font-size: inherit; font-weight: 400; }
.claim-dossier .claim-dossier-details p:last-child { margin-bottom: 0; }
.claim-dossier .claim-dossier-body button, .claim-dossier .claim-dossier-close { font: var(--font-size-sm)/1.5 var(--font-family-base); font-weight: 600; cursor: pointer; }
.claim-dossier .claim-dossier-close { flex: 0 0 auto; min-height: 36px; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--brand-primary-600); }
.claim-dossier button:focus-visible, .claim-dossier a:focus-visible, .claim-dossier summary:focus-visible { outline: 2px solid var(--brand-primary-600); outline-offset: 2px; }
.claim-dossier .order-link { font-size: inherit; font-weight: 600; color: var(--brand-primary-600); }
@media (max-width: 700px) {
  .claim-dossier { padding: var(--spacing-2); }
  .claim-dossier .claim-dossier-panel { max-height: calc(100dvh - 16px); }
  .claim-dossier .claim-dossier-header, .claim-dossier .claim-dossier-body, .claim-dossier .claim-dossier-section { padding: var(--spacing-3); }
  .claim-dossier .claim-dossier-facts td:first-child { width: 38%; }
}

/* R632318: wspólne tabele wszystkich zakładek reklamacji. */
.pim-claim-scroll { width:100%; max-height:min(68dvh, calc(100dvh - 180px)); overflow:auto; overscroll-behavior:contain; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--surface-card); }
.pim-claim-scroll > .pim-claim-table { width:100%; border-collapse:separate; border-spacing:0; font:var(--font-size-base)/1.5 var(--font-family-base); color:var(--text-primary); }
.pim-claim-scroll > .pim-claim-table > thead { position:sticky; top:0; z-index:20; background:var(--surface-elevated); }
.pim-claim-scroll > .pim-claim-table > thead > tr > th { position:static; font-size:var(--font-size-sm); text-transform:none; letter-spacing:normal; white-space:normal; vertical-align:top; background:var(--surface-elevated); color:var(--text-primary); padding:var(--spacing-2); border-bottom:1px solid var(--border-color); }
.pim-claim-table .pim-claim-sort { display:flex; gap:var(--spacing-1); justify-content:space-between; align-items:center; width:100%; min-height:32px; padding:var(--spacing-1) 0; border:0; background:transparent; color:var(--text-primary); font:var(--font-size-sm)/1.5 var(--font-family-base); font-weight:600; text-align:left; cursor:pointer; }
.pim-claim-filter-box { display:grid; gap:var(--spacing-1); }
.pim-claim-filter-box label { display:flex; align-items:center; gap:var(--spacing-1); min-width:0; font-size:var(--font-size-sm); font-weight:400; color:var(--text-secondary); }
.pim-claim-filter-box label > span { flex:0 0 18px; }
.pim-claim-table .pim-claim-filter { width:100%; min-width:0; max-width:100%; min-height:32px; padding:var(--spacing-1); box-sizing:border-box; border:1px solid var(--border-color); border-radius:var(--radius-sm); font:var(--font-size-sm)/1.5 var(--font-family-base); font-weight:400; color:var(--text-primary); background:var(--surface-input); }
.pim-claim-filter[aria-invalid="true"] { border-color:var(--brand-danger-800); }
.pim-claim-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--spacing-2); padding:var(--spacing-2) 0; font:var(--font-size-sm)/1.5 var(--font-family-base); color:var(--text-secondary); }
.pim-claim-toolbar button { min-height:32px; padding:var(--spacing-1) var(--spacing-2); border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--brand-primary-600); font:inherit; cursor:pointer; }
.pim-claim-toolbar button:disabled { opacity:.6; cursor:default; }
.pim-claim-sort:focus-visible, .pim-claim-filter:focus-visible, .pim-claim-toolbar button:focus-visible { outline:2px solid var(--brand-primary-600); outline-offset:2px; }
.pim-claim-table .pim-claim-date { white-space:nowrap; font-variant-numeric:tabular-nums; }
.pim-claim-table .pim-claim-date-history { margin-top:var(--spacing-2); font-size:var(--font-size-sm); }
.pim-claim-date-history summary { cursor:pointer; color:var(--brand-primary-600); }
.pim-claim-date-history div { margin-top:var(--spacing-1); overflow-wrap:anywhere; }
#cc-table > .pim-claim-table { min-width:2480px; table-layout:fixed; }
#cc-table > .pim-claim-table td { font-size:var(--font-size-base); padding:var(--spacing-3) var(--spacing-2); overflow-wrap:anywhere; }
#tr-claims-list > .pim-claim-table { min-width:1250px; }
#tr-claims-list > .pim-claim-table th { min-width:140px; }