/* ============================================
   ABCare — editorial-utility design system
   (paleta AB + mockup-style components)
   ============================================ */

/* ── Reset bazowy — ZASTĘPUJE bootstrap.min.css ────────────────────────────────────────────────
   Bootstrap ważył 227 KB, czyli 29% wszystkiego, co przeglądarka pobiera przy pierwszym wejściu,
   a ABCare używał z niego WYŁĄCZNIE reguł poniżej. Żadna klasa typowa dla Bootstrapa
   (container, d-flex, form-control, navbar, col-*) nie występuje w kodzie ani razu, a
   .btn-primary / .card-body / .modal / .table / .badge / .row ABCare definiuje samo niżej.

   ⚠ Zestaw NIE jest zgadywany — powstał z pomiaru: scenariusz `abcare-bootstrap-probe` porównuje
   położenie i styl KAŻDEGO elementu na 8 ekranach w dwóch szerokościach (~9 600 elementów)
   przed i po usunięciu Bootstrapa. Warunek stopu: ZERO różnic. Zmieniając cokolwiek tutaj,
   przepuść to przez `--compare-baseline`, bo te reguły dotykają każdego ekranu naraz. */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* ⚠ #212529 to DOKŁADNIE kolor, który dawał Bootstrap — app.css nigdy nie ustawiał koloru tekstu
       na body, więc cała aplikacja dziedziczyła go stamtąd. Zostaje 1:1, żeby usunięcie Bootstrapa
       niczego nie przemalowało. Przejście na paletę AB (--text) to osobna decyzja wyglądowa:
       dotknęłaby każdego ekranu, na którym element nie ma własnego koloru. */
    color: #212529;
    line-height: 1.5;
}

/* Nagłówki: przeglądarka domyślnie daje im bold i duże marginesy — Bootstrap to normował. */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
dl, dd { margin-top: 0; margin-bottom: 0.5rem; }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: 0.25; }

/* Pola i przyciski dziedziczą typografię — bez tego przeglądarka wraca do własnych 13.3333px
   i formularze robią się mniejsze od reszty interfejsu. */
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
button { border-radius: 0; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
[role="button"] { cursor: pointer; }
textarea { resize: vertical; }
label { display: inline-block; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }

table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }

img, svg { vertical-align: middle; }
small { font-size: 0.875em; }
strong, b { font-weight: bolder; }
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* Stos DOKLADNIE jak w Bootstrapie — inna kolejnosc daje inna czcionke w blokach `code`. */
code, kbd, samp, pre { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; }
/* `code` był stylowany przez Bootstrapa (mniejszy stopień + różowy) i tak wygląda dziś w Ustawieniach. */
code { font-size: 0.875em; color: #d63384; word-wrap: break-word; }
a > code { color: inherit; }
pre code { font-size: inherit; color: inherit; word-break: normal; }
kbd { padding: 0.1875rem 0.375rem; font-size: 0.875em; color: #fff; background-color: #212529; border-radius: 0.25rem; }
kbd kbd { padding: 0; font-size: 1em; }
a { color: inherit; }
summary { display: list-item; cursor: pointer; }
[hidden] { display: none !important; }

:root, [data-theme="light"] {
    /* AB brand colors — stałe (taki sam zielony i limonkowy w obu motywach) */
    --global-palette1: #009244;
    --global-palette2: #c1d11c;
    --global-palette3: #111317;
    --global-palette4: #022c32;
    --global-palette5: #1e4c53;
    --global-palette6: #4a6a6e;
    --text-light: #ffffff;
    --p1: #009244; --p2: #c1d11c; --p3: #111317; --p4: #022c32; --p5: #1e4c53; --p6: #4a6a6e;

    /* Channel marks — stałe per kanał */
    --ch-allegro: #ff5a00;
    --ch-erli:    #00a78e;
    --ch-amazon:  #232f3e;
    --ch-email:   #6b46c1;
    --ch-ebay:    #e53238;

    /* Sizing — stałe */
    --sidebar-w: 230px;
    --topbar-h:  3.5rem;
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;

    /* === LIGHT MODE PALETA (default) === */
    --cream:       #faf9f5;
    --cream-2:     #f4f2ea;
    --paper:       #ffffff;
    --line:        #e8e5db;
    --line-strong: #d3d0c4;
    --text:        #111317;
    --text-soft:   #5e6671;
    --text-faint:  #8b9099;
    --bg-light:    #faf9f5;
    --border-color:#e8e5db;

    --danger:    #c4392f; --danger-bg: #fbe9e6;
    --warn:      #c98a14; --warn-bg:   #fbf2dc;
    --info:      #2563eb; --info-bg:   #e2ebff;
    --ok:        var(--p1); --ok-bg:   #e3f4eb;

    --shadow-sm:    0 1px 2px rgba(17,19,23,0.04), 0 1px 3px rgba(17,19,23,0.06);
    --shadow-md:    0 4px 12px rgba(17,19,23,0.06), 0 2px 4px rgba(17,19,23,0.04);
    --shadow-lg:    0 12px 32px rgba(17,19,23,0.08), 0 4px 8px rgba(17,19,23,0.04);
    --shadow-inset: inset 0 0 0 1px var(--line);
    --card-shadow:  0 1px 2px rgba(17,19,23,0.04), 0 1px 3px rgba(17,19,23,0.06);
    --hover-shadow: 0 4px 12px rgba(17,19,23,0.06), 0 2px 4px rgba(17,19,23,0.04);

    --grad-brand: linear-gradient(95deg, #009244 0%, #c1d11c 100%);
    --grad-dark:  linear-gradient(180deg, #022c32 0%, #1e4c53 100%);

    /* Grain overlay opacity — w dark mode wygaszony */
    --grain-opacity: 1;
}

/* === DARK MODE PALETA === */
[data-theme="dark"] {
    --cream:       #0e1014;            /* primary background */
    --cream-2:     #181b22;            /* secondary background (table headers, alt rows) */
    --paper:       #1a1d23;            /* card body */
    --line:        #2a2e35;
    --line-strong: #3a3e45;
    --text:        #e8e5db;
    --text-soft:   #a8acb3;
    --text-faint:  #6c707a;
    --bg-light:    #0e1014;
    --border-color:#2a2e35;

    --danger:    #ef6055; --danger-bg: #3a1a17;
    --warn:      #e0a13d; --warn-bg:   #3a2c10;
    --info:      #5a8aff; --info-bg:   #1a2440;
    --ok:        #2eb068; --ok-bg:     #142f1f;

    --shadow-sm:    0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
    --shadow-lg:    0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
    --shadow-inset: inset 0 0 0 1px var(--line);
    --card-shadow:  0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    --hover-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);

    /* grain w dark mode rozpraszany — białe szumy na ciemnym tle nie wygladają dobrze */
    --grain-opacity: 0.15;
}

/* Auto-prefers (jeśli user NIE wybrał ręcznie, weź system preference) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --cream:       #0e1014;
        --cream-2:     #181b22;
        --paper:       #1a1d23;
        --line:        #2a2e35;
        --line-strong: #3a3e45;
        --text:        #e8e5db;
        --text-soft:   #a8acb3;
        --text-faint:  #6c707a;
        --bg-light:    #0e1014;
        --border-color:#2a2e35;

        --danger:    #ef6055; --danger-bg: #3a1a17;
        --warn:      #e0a13d; --warn-bg:   #3a2c10;
        --info:      #5a8aff; --info-bg:   #1a2440;
        --ok:        #2eb068; --ok-bg:     #142f1f;

        --shadow-sm:    0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
        --shadow-md:    0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
        --shadow-lg:    0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
        --card-shadow:  0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
        --hover-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
        --grain-opacity: 0.15;
    }
}

html, body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--cream);
    background-image:
        radial-gradient(at 0% 0%, rgba(193,209,28,0.045) 0px, transparent 40%),
        radial-gradient(at 100% 100%, rgba(1,147,68,0.04) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtle grain overlay (mockup vibe) — w dark mode wygaszony przez var(--grain-opacity) */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: var(--grain-opacity, 1);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 9999;
}

/* Editorial / utility typography helpers */
.serif      { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.mono       { font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }
.italic     { font-style: italic; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; }

a, .btn-link { color: var(--global-palette1); }

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0,146,68,0.5);
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--global-palette1); }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #dc3545; font-size: 0.85rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "Wystąpił błąd."; }

/* Globalny default hide dla Blazor reconnect/error UI.
   Blazor JS wstrzykuje inline `style="display: block"` gdy realny circuit error,
   więc default hidden = bezpieczny stan. Bez tego scoped CSS layout-u nie matchuje
   #blazor-error-ui w innym layoucie (np. EditorialLayout) i UI pokazuje się stale. */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #856404;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
#blazor-error-ui .reload {
    color: #009244;
    text-decoration: underline;
    margin: 0 0.25rem;
}

/* ---------- Layout helpers ---------- */
.modern-container {
    width: 100%;
    padding: 0.75rem;
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-section {
    background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    color: white;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 400px; height: 400px;
    background: var(--global-palette1);
    opacity: 0.08;
    border-radius: 50%;
}
.hero-section h1 { color: white; margin: 0; }
.hero-section p { color: rgba(255,255,255,0.85); margin: 0.5rem 0 0; }

/* ---------- Cards ---------- */
.modern-card {
    background: var(--paper);
    color: var(--text);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--global-palette1);
    transition: all 0.3s ease;
}
.modern-card:hover { box-shadow: var(--hover-shadow); }

.card-header-modern {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--global-palette2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Forms ---------- */
.modern-input, select.modern-input, textarea.modern-input {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--paper);
    color: var(--text);
    width: 100%;
    font-family: inherit;
}
.modern-input:focus {
    border-color: var(--global-palette1);
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.1);
    outline: none;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.form-label-modern {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.label-badge {
    background: var(--global-palette1);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 28px;
    transition: 0.3s;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px; width: 22px;
    left: 3px; bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .toggle-slider { background: var(--global-palette1); }
input:checked + .toggle-slider:before { transform: translateX(28px); }

.readonly-value {
    padding: 0.6rem 0.85rem;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #495057;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    word-break: break-word;
}

/* ---------- Buttons ---------- */
.modern-btn {
    padding: 0.7rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}
.modern-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modern-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-gradient-success { background: var(--global-palette1); color: white; }
.btn-gradient-success:hover { background: #007a38; color: white; }

.btn-gradient-primary { background: var(--global-palette5); color: white; }
.btn-gradient-primary:hover { background: var(--global-palette4); color: white; }

.btn-gradient-info { background: var(--global-palette6); color: white; }
.btn-gradient-info:hover { background: var(--global-palette5); color: white; }

.btn-gradient-warning { background: #dc3545; color: white; }
.btn-gradient-warning:hover { background: #c82333; color: white; }

.btn-gradient-secondary { background: #6c757d; color: white; }
.btn-gradient-secondary:hover { background: #5a6268; color: white; }

/* ---------- Banners ---------- */
.warning-banner, .success-banner, .info-banner, .error-banner {
    border-radius: 4px;
    padding: 0.85rem 1.25rem;
    margin: 0.75rem 0;
    font-weight: 500;
}
.warning-banner { background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; }
.success-banner { background: #d4edda; border-left: 4px solid var(--global-palette1); color: #155724; }
.info-banner    { background: #f1f5f9; border-left: 4px solid #cbd5e1; color: #475569; }
.error-banner   { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }

/* ---------- Toast ---------- */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0;
    border-radius: 4px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    animation: slideInRight 0.4s ease-out;
    max-width: 500px;
    min-width: 280px;
}
@keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.toast-success { background: var(--global-palette1); }
.toast-error   { background: #dc3545; }
.toast-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    gap: 1rem;
}
.toast-content span {
    flex: 1;
    word-break: break-word;
    line-height: 1.5;
}
.toast-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.85;
}
.toast-close-btn:hover { opacity: 1; }

/* ---------- Spinner ---------- */
.spinner-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 19, 23, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}
.spinner-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.spinner {
    width: 50px; height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--global-palette1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tables ---------- */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}
.modern-table th {
    background: var(--global-palette4);
    color: white;
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modern-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}
.modern-table tr:last-child td { border-bottom: none; }
.modern-table tr:hover td { background: rgba(0,146,68,0.05); }

.table-wrap { overflow-x: auto; }

/* ---------- Worker checklist (rejestruj czas) ---------- */
.worker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.worker-row {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
    transition: all 0.2s ease;
}
.worker-row.checked {
    background: rgba(0, 146, 68, 0.08);
    border-color: var(--global-palette1);
}
.worker-row label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}
.worker-row input[type=checkbox] {
    width: 22px; height: 22px;
    accent-color: var(--global-palette1);
    cursor: pointer;
    flex-shrink: 0;
}
.worker-row .ot-input {
    width: 80px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
    font-size: 0.95rem;
}
.worker-row .ot-input:disabled { background: #f1f1f1; opacity: 0.6; }
.worker-row .ot-suffix { font-size: 0.8rem; color: var(--global-palette6); white-space: nowrap; }

/* ---------- Button row ---------- */
.btn-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.btn-row .modern-btn { min-width: 160px; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640.98px) {
    .modern-container { padding: 0.5rem; }
    .modern-card { padding: 0.85rem; }
    .modern-btn { padding: 0.7rem 1rem; font-size: 0.85rem; }
    .toast-notification { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; max-width: none; }
    .btn-row .modern-btn { flex: 1 1 100%; min-width: 0; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive toggles ----------
   Bez bazowego `display`, bo wewnętrzne klasy (np. `.data-card-list { display: flex }`)
   ustawiają własny tryb i nie chcemy ich nadpisywać. Toggle wyłącznie w media query
   z !important — kontrola na poziomie bandwidth. */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
    .mobile-only  { display: none !important; }
}

/* ---------- Reconnect blocked overlay ----------
   `body.abc-disconnected` ustawia JS reconnect handler gdy SignalR circuit jest down.
   Strona w tle przyciemniona + pointer-events: none — user widzi wyraźnie że nie może
   działać, NIE pisze w textarea „w pustkę" przez 30 sekund. Reconnect modal sam ma
   wyższy z-index i pointer-events: auto, więc „Połącz teraz" pozostaje klikalny. */
body.abc-disconnected main,
body.abc-disconnected .sidebar,
body.abc-disconnected .topbar {
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.3) brightness(0.92);
    opacity: 0.65;
    transition: opacity 0.2s, filter 0.2s;
}
body.abc-disconnected input,
body.abc-disconnected textarea,
body.abc-disconnected select,
body.abc-disconnected button:not(.abc-reconnect-btn) {
    pointer-events: none !important;
}

/* ---------- Key-value row (label + value) ----------
   Default layout: label po lewej (uppercase), value po prawej. Value mozemy mieć dlugi
   (subject konwersacji, URL, long token) — musi sie zawijac, nie wystawac z karty. */
.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line);
    gap: 0.75rem;
}
.kv-row:last-child { border-bottom: none; }
.kv-label {
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.kv-val {
    color: var(--text);
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;  /* dlugi GUID / subject się zawinie */
    word-break: break-word;
}
.kv-val.mono {
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
}

/* ---------- Form grid responsive (e.g. invite agent) ----------
   Default 3 col na desktop (label-pair-pair-button). Mobile: 1 col stack — button na końcu pełnej szerokości. */
.agents-invite-grid {
    display: grid;
    grid-template-columns: 1fr 220px auto;
    gap: 0.75rem;
    align-items: end;
}
@media (max-width: 768px) {
    .agents-invite-grid {
        grid-template-columns: 1fr;
    }
    .agents-invite-grid > button {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Outbox detail responsive grid ----------
   Desktop: payload 2/3 + aside 1/3 obok siebie. Mobile (<880px): full-width stack —
   aside (Powiązanie/Timeline) WYŻEJ niż payload, bo „przejdź do dyskusji" + customer chip
   są ważniejsze dla agenta na mobile niż raw JSON payload. */
.outbox-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 880px) {
    .outbox-detail-grid {
        grid-template-columns: 1fr;
    }
    .outbox-detail-grid > aside {
        order: -1;  /* aside (powiązanie/timeline) pierwsze na mobile */
    }
}

/* ----------------------------------------------------------------------
   Theme toggle button — CSS-only icon visibility per active mode
   ----------------------------------------------------------------------
   Pokazuje TYLKO ikone aktualnego motywu (nie obu naraz). CSS reaguje na
   <html data-theme="..."> ustawiane przez SSR (App.razor z cookie).
   Gdy brak data-theme → follow prefers-color-scheme (auto effective).
   Zaden JS nie ustawia display - eliminuje race conditions po enhanced nav.
*/
.abc-theme-toggle .abc-theme-icon {
    line-height: 1;
    font-size: 16px;
    display: none;
}
/* Default (brak data-theme, system light) → slonce */
.abc-theme-toggle .abc-theme-icon-light { display: inline; }
/* System dark + brak override → ksiezyc */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .abc-theme-toggle .abc-theme-icon-light { display: none; }
    :root:not([data-theme="light"]) .abc-theme-toggle .abc-theme-icon-dark  { display: inline; }
}
/* Explicit data-theme override */
:root[data-theme="light"] .abc-theme-toggle .abc-theme-icon-light { display: inline; }
:root[data-theme="light"] .abc-theme-toggle .abc-theme-icon-dark  { display: none; }
:root[data-theme="dark"]  .abc-theme-toggle .abc-theme-icon-light { display: none; }
:root[data-theme="dark"]  .abc-theme-toggle .abc-theme-icon-dark  { display: inline; }

/* ---------- Mobile table safety net ----------
   Każda <table> bez explicit `.desktop-only` / `.mobile-only` strategy dostaje horizontal scroll
   na mobile zamiast wypchnięcia treści poza viewport. Strony które już mają card-list mobile
   fallback opakowują table w `.table-wrap.desktop-only` — ten reset ich nie dotyka (są ukryte). */
@media (max-width: 768px) {
    .card > table,
    .content > table,
    table:not(.table-wrap *):not(.no-mobile-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---------- Conversation strip collapse (mobile) ----------
   Pasek statusu/agenta/tagów zajmuje dużo miejsca na mobile. Defaultnie chowamy go
   pod button "▼ Szczegóły", trigger pokazuje mini-podgląd Status + SLA + tag count. */
.conv-strip-toggle {
    /* Visibility kontrolowane przez klasę `mobile-only` na elemencie (display:none na desktop via media query). */
    display: flex;
    align-items: center; gap: 0.4rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
}
.conv-strip-toggle:hover { background: var(--cream-2); }
.conv-strip-toggle-more { margin-left: auto; color: var(--text-faint); font-weight: 600; }
.conv-strip-tags-count { color: var(--text-faint); font-size: 11px; }
@media (max-width: 768px) {
    .conv-strip { display: none !important; }
    .conv-strip.mobile-open {
        display: flex !important;
        flex-wrap: wrap; gap: 0.4rem 0.5rem;
        margin-top: 0.4rem; padding: 0.6rem; border-radius: 8px;
        background: var(--paper); border: 1px solid var(--line);
    }
}

/* ---------- Data cards (mobile alternative to tables) ---------- */
.data-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.data-card {
    background: var(--paper);
    color: var(--text);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--global-palette1);
}
.data-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.data-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
    gap: 0.5rem;
}
.data-card-row:last-of-type { border-bottom: none; }
.data-card-row .label {
    color: var(--text-faint);
    font-weight: 500;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}
.data-card-row .value {
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
    flex: 1 1 auto;
}
.data-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.data-card-actions .modern-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-badge.on  { background: rgba(0,146,68,0.15); color: var(--global-palette1); }
.status-badge.off { background: rgba(220,53,69,0.12); color: #b91c1c; }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 19, 23, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.25s ease;
    padding: 1rem;
    /* Overlay bez pointer-events (nie ma close-on-outside-click) — żeby buttony w dialogu
       były klikalne bez problemu „overlay intercepts pointer events". */
    pointer-events: none;
}
.modal-dialog {
    background: var(--paper);
    color: var(--text);
    border-radius: 10px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    /* Włącz interaktywność z powrotem dla samego dialogu i wszystkich jego dzieci. */
    pointer-events: auto;
}
@keyframes modalSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.modal-header {
    background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    color: white;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--global-palette1);
}
.modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    flex: 1;
    word-break: break-word;
}
.modal-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.25); }

/* Mały kółkowy "×" do usuwania rzędów w listach (warunki/akcje automation, taski, itp).
   Inny niż .modal-close (który jest w nagłówku, na ciemnym tle) — neutralny, hover czerwony. */
.btn-icon-close {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid var(--line, #e8e5db);
    color: var(--text-faint, #8b9099);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.btn-icon-close:hover {
    background: var(--danger-bg, #fbe9e6);
    border-color: var(--danger, #c4392f);
    color: var(--danger, #c4392f);
}
.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: 0.85rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.modal-footer .modern-btn { min-width: 110px; }

@media (max-width: 640px) {
    /* Full-screen modal na mobile — nie sheet, lecz cała wysokość ekranu od topu.
       User feedback: bottom-sheet z 70% wysokości zostawia widoczny brzeg tła
       który myli (Image #17). Lepiej pełen ekran + duży obszar treści. */
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-dialog {
        max-height: 100vh;
        height: 100vh;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }
    .modal-footer { padding: 0.75rem 1rem; }
    .modal-footer .modern-btn { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
}

/* ============================================
   ABCare mockup components (editorial-utility)
   ============================================ */

/* Cards */
.card {
    /* display:flex + kierunek kolumnowy szły dotąd z Bootstrapa — bez nich karty rozjeżdżają się
       na całej aplikacji (pomiar: `abcare-bootstrap-probe`). */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* Bootstrap ustawiał na .card JAWNY kolor tekstu, więc karty NIE dziedziczyły palety AB.
       Zostaje 1:1 — inaczej usunięcie Bootstrapa przemalowałoby tekst we wszystkich kartach. */
    color: #212529;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header {
    padding: 1.1rem 1.25rem 0.6rem;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem;
}
.card-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.card-title em { font-style: italic; color: var(--p1); }
.card-subtitle {
    color: var(--text-soft);
    font-size: 12.5px;
    margin-top: 0.35rem;
}
.card-body { padding: 0.5rem 1.25rem 1.25rem; }

/* ============================================
   Shared .data-table — globalna tabela ABCare (replace inline <table style="...">)
   Wszystkie strony settings/admin/raporty MUSZA uzywac tej klasy zamiast inline stylow.
   Dark mode dziala automatycznie przez tokens (var(--paper)/var(--line)/var(--text)).
   ============================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    color: var(--text);
}
.data-table thead {
    background: var(--cream-2);
}
.data-table thead tr {
    text-align: left;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
.data-table th {
    padding: 0.65rem 1rem;
    font-weight: 500;
}
.data-table th:first-child { padding-left: 1.25rem; }
.data-table th:last-child  { padding-right: 1.25rem; }
.data-table td {
    padding: 0.85rem 1rem;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.data-table td:first-child { padding-left: 1.25rem; }
.data-table td:last-child  { padding-right: 1.25rem; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--cream-2); transition: background 0.12s; }
.data-table .row-actions { text-align: right; white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────────────
   .data-table.responsive — CSS-only auto-cards na mobile (≤768px)
   ──────────────────────────────────────────────────────────────────────
   Usage:
       <table class="data-table responsive">
           <thead><tr><th>Email</th><th>Rola</th></tr></thead>
           <tbody>
               <tr>
                   <td data-label="Email">anna@firma.pl</td>
                   <td data-label="Rola">Admin</td>
               </tr>
           </tbody>
       </table>

   - Każdy `<td>` MUSI mieć `data-label` (tekst z `<th>`).
   - Pierwszy `<td>` (data-card-title) renderowany jako headline bez labela.
   - Eliminuje konieczność dual markup `desktop-only` + `mobile-only`.
   ────────────────────────────────────────────────────────────────────── */
/* ⚠ SIATKA BEZPIECZEŃSTWA dla tabel BEZ klasy `responsive`.
   Sam `data-label` nic nie daje — reguła kart niżej łapie wyłącznie `.data-table.responsive`.
   Tabela bez tej klasy była na telefonie PRZYCINANA na krawędzi karty razem z ostatnią kolumną,
   czyli zwykle z przyciskami „Edytuj"/„Usuń" — nie dało się ich ani zobaczyć, ani kliknąć
   (sprawdzone na /settings/brands i /settings/email-channels). Poziome przewijanie to nie jest
   docelowy wygląd (dom­yślnie chcemy kart), ale gwarantuje, że nic nie zniknie bezpowrotnie.
   Zamiana konkretnej tabeli na karty = dodanie `responsive` + `data-label` na każdym `<td>`. */
@media (max-width: 768px) {
    .data-table:not(.responsive) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        /* ⚠ Samo przewijanie NIE wystarczy: obcieta kolumna wyglada jak koniec tabeli
           i nikt nie zgaduje, ze cos jest dalej. Cien przy prawej krawedzi pojawia sie
           tylko wtedy, gdy faktycznie jest co przewijac, i znika po dojechaniu do konca
           (`background-attachment: local` na warstwach tla — bez JS-a i bez nasluchow). */
        background:
            linear-gradient(to right, var(--paper) 30%, transparent) left center,
            linear-gradient(to left,  var(--paper) 30%, transparent) right center,
            radial-gradient(farthest-side at 0 50%,   rgba(17,19,23,.16), transparent) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(17,19,23,.16), transparent) right center;
        background-repeat: no-repeat;
        background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

@media (max-width: 768px) {
    .data-table.responsive {
        display: block;
        background: transparent;
        min-width: 0 !important;
    }
    .data-table.responsive thead { display: none; }
    .data-table.responsive tbody { display: block; }
    .data-table.responsive tr {
        display: block;
        background: var(--paper);
        color: var(--text);
        border: 1px solid var(--line);
        border-left: 4px solid var(--p1);
        border-radius: 6px;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        box-shadow: var(--shadow-sm);
    }
    .data-table.responsive tr:hover { background: var(--paper); }
    .data-table.responsive td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
        text-align: right;
    }
    .data-table.responsive td:first-child,
    .data-table.responsive td:last-child {
        padding-left: 0;
        padding-right: 0;
    }
    .data-table.responsive td:last-child { border-bottom: none; }
    .data-table.responsive td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--text-faint);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex: 0 0 auto;
        text-align: left;
    }
    /* Headline row (first td) — bez labela, full width, większy font */
    .data-table.responsive td.cell-title,
    .data-table.responsive td[data-cell-title] {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text);
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line);
        justify-content: flex-start;
        text-align: left;
    }
    .data-table.responsive td.cell-title::before,
    .data-table.responsive td[data-cell-title]::before { display: none; }

    /* Komórka z BLOKIEM treści (kilka akapitów, podgląd wiadomości), a nie pojedynczą wartością.
       ⚠ Domyślny wiersz karty to `justify-content: space-between` — etykieta z lewej, wartość
       z prawej. Przy kilku elementach w komórce każdy z nich staje się osobnym elementem flex
       i walczą o tę samą szerokość: teksty nachodzą na siebie i są przycinane. Tutaj etykieta
       idzie NAD treść, a treść dostaje całą szerokość karty. */
    .data-table.responsive td.cell-block {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.3rem;
    }
    .data-table.responsive td.cell-block::before { text-align: left; }
}

/* Section headings */
.section { margin-top: 1.5rem; }
.section-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 0.85rem; gap: 1rem;
}
.section-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.005em;
    margin: 0;
}
.section-title em { font-style: italic; color: var(--p1); }

/* Buttons (mockup style — different namespace than .modern-btn) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    /* vertical-align dawal Bootstrap (.btn) — bez tego przyciski osadzone w tekscie siadaja
       na linii bazowej zamiast na srodku (pomiar zlapal to jako przesuniecie o pol piksela). */
    vertical-align: middle;
    height: 36px; padding: 0 0.95rem;
    border-radius: var(--radius);
    font-weight: 500; font-size: 13px;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn-primary {
    background: var(--global-palette1);
    color: #fff;
    box-shadow: 0 1px 2px rgba(1,147,68,0.25);
}
.btn-primary:hover { background: #007a38; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(1,147,68,0.28); color: #fff; }

.btn-secondary {
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--cream-2); border-color: var(--p3); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-soft); padding: 0 0.7rem; }
.btn-ghost:hover { background: var(--cream-2); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a3261d; color: #fff; }

/* Soft danger — subtle background z danger text + border (mniej krzyczący niż solid btn-danger).
   Używany dla destructive akcji w drugiej kolejności (np. "Ukryj" obok "Usuń trwale"). */
.btn-soft-danger {
    background: #fbe9e6;
    color: var(--danger);
    border: 1px solid #f1c5be;
}
.btn-soft-danger:hover { background: #f5d4ce; color: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .btn-soft-danger { background: rgba(196,57,47,0.12); border-color: rgba(196,57,47,0.32); color: #f08a82; }
[data-theme="dark"] .btn-soft-danger:hover { background: rgba(196,57,47,0.22); color: #f5a8a1; }

.btn-sm { height: 28px; padding: 0 0.65rem; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 1.4rem; font-size: 14px; }

/* Ekran dotykowy — 28 px to wysokość dobra pod kursor, nie pod palec. Przy przeglądzie interfejsu
   na telefonie wyszło ponad dwadzieścia ekranów, gdzie „Edytuj", „Usuń" czy „Zapisz" mają 28 px
   i trafienie w nie jest loterią. Podnosimy TYLKO na urządzeniach wskazujących niedokładnie
   (pointer: coarse) — na komputerze gęstość interfejsu zostaje bez zmian.
   Zostaje poniżej zalecanych 44 px, żeby nie rozepchnąć pasków akcji, ale 38 px to już palec,
   a nie szpilka. */
@media (pointer: coarse) {
    .btn-sm { height: 38px; padding: 0 0.85rem; }
    /* ⚠ Sam padding dawal 31 px — o jeden pod progiem i o siedem pod nasza wlasna regula.
       Chipy filtrow i pozycje list rozwijanych sa NAJCZESCIEJ klikanymi elementami na
       telefonie (kazdy filtr, kazdy status, kazdy tag), wiec `min-height` wprost. */
    .f-chip { padding: 0.55rem 0.85rem; min-height: 38px; display: inline-flex; align-items: center; }
    /* Przyciski z sama ikona (strzalki nawigacji, „+") maja dobra wysokosc, ale 28 px szerokosci.
       `min-width` dotyka wylacznie ich — przyciski z tekstem sa i tak szersze. */
    .btn { min-width: 38px; }
    .ms-option, .ms-group-head { min-height: 38px; }
    .btn-link-sm { display: inline-flex; align-items: center; min-height: 38px; }
}

/* Chips / badges */
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    line-height: 1.5;
}
.chip-ok      { background: var(--ok-bg);     color: var(--ok); }
.chip-warn    { background: var(--warn-bg);   color: var(--warn); }
.chip-danger  { background: var(--danger-bg); color: var(--danger); }
.chip-info    { background: var(--info-bg);   color: var(--info); }
.chip-neutral { background: var(--cream-2);   color: var(--text-soft); }
.chip .dot-mini { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Tags (channel/conversation labels) */
.tag {
    display: inline-flex; align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--cream-2);
    color: var(--text-soft);
    font-weight: 500;
}
.tag.tone-1 { background: #fdecd9; color: #a4541a; }
.tag.tone-2 { background: #e0f0e8; color: #1e6a3f; }
.tag.tone-3 { background: #ebe5f8; color: #5a36a8; }
.tag.tone-4 { background: #fcdbe0; color: #a72c4b; }

/* Channel pill (Allegro/Erli/Amazon/Email/eBay) */
.channel {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 12px; font-weight: 500;
}
.channel-icon {
    width: 22px; height: 22px;
    border-radius: 5px;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700; font-size: 11px;
    box-shadow: var(--shadow-sm);
}
.channel-icon.allegro { background: linear-gradient(135deg, #ff8c42, #ff5a00); }
.channel-icon.erli    { background: linear-gradient(135deg, #00d4b0, #00a78e); }
.channel-icon.amazon  { background: linear-gradient(135deg, #ffae47, #ff9900); color: #232f3e; }
.channel-icon.email   { background: linear-gradient(135deg, #8b62d8, #6b46c1); }
.channel-icon.ebay    { background: linear-gradient(135deg, #ff7b7b, #e53238); }

/* SLA progress bar */
.sla-bar {
    position: relative;
    width: 64px; height: 5px;
    background: var(--cream-2);
    border-radius: 999px;
    overflow: hidden;
}
.sla-bar .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
    transition: width 0.3s;
}
.sla-bar.ok     .fill { background: var(--p1); }
.sla-bar.warn   .fill { background: var(--warn); }
.sla-bar.danger .fill { background: var(--danger); }
.sla-bar.breach .fill { background: var(--danger); animation: pulse-bar 1.2s infinite; }
@keyframes pulse-bar { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Avatars (user/agent/customer) */
.avatar-circle {
    border-radius: 50%;
    display: inline-grid; place-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    flex: none;
}
.avatar-circle.sz-22 { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-circle.sz-28 { width: 28px; height: 28px; font-size: 11px; }
.avatar-circle.sz-36 { width: 36px; height: 36px; font-size: 13px; }
.avatar-circle.sz-48 { width: 48px; height: 48px; font-size: 16px; }
.avatar-circle.c-1 { background: linear-gradient(135deg, #ff8a4c, #c4392f); }
.avatar-circle.c-2 { background: linear-gradient(135deg, #6ec3a8, #1e7a5a); }
.avatar-circle.c-3 { background: linear-gradient(135deg, #d8b86a, #7a5a1e); }
.avatar-circle.c-4 { background: linear-gradient(135deg, #b884e8, #6b3ec7); }
.avatar-circle.c-5 { background: linear-gradient(135deg, #5dade2, #2874a6); }
.avatar-circle.c-6 { background: linear-gradient(135deg, #e07a9e, #ad3768); }

/* Agent avatar — solid color (hash z UserId), inicjały białe, kompaktowy. Tło z inline style.
   Mniejsza wersja niż .avatar-circle bo używany w wierszach inboxa (gęsta lista). */
.agent-avatar {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    flex: none;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    border: 1.5px solid var(--paper);
}

/* Page-load stagger fade */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stagger > * { opacity: 0; animation: fade-up 0.4s ease-out forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.40s; }

/* Generic content wrapper — full width minus padding. Na szerszych monitorach (1600+)
   większy boczny padding żeby tabele/karty nie były rozjechane na 2000px linijek tekstu. */
.content {
    padding: 1.5rem 2.5rem 3rem;
    width: 100%;
    max-width: none;
}
@media (min-width: 1600px) { .content { padding: 1.75rem 3rem 3rem; } }
@media (max-width: 1100px) { .content { padding: 1.25rem 1.25rem 3rem; } }
@media (max-width: 768px)  { .content { padding: 0.85rem 0.85rem 2rem; } }

/* Editorial display heading (hero) */
.display-heading {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.6rem;
}
.display-heading em { font-style: italic; color: var(--p1); }

.lede {
    font-size: 1.05rem;
    color: var(--text-soft);
    max-width: 56ch;
    line-height: 1.55;
}

/* Centered single-card page (auth landing, onboarding, accept invitation) */
.page-centered {
    min-height: calc(100vh - var(--topbar-h));
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}
.page-centered > .card { width: min(540px, 100%); }

/* ============================================
   Wyciągnięte ze scoped razor.css — Blazor scope-attr nie matchuje
   elementów wstawianych dynamicznie / w details > summary popoverach.
   Trzymaj te selektory tutaj — żeby działały wszędzie.
   ============================================ */

/* Form input — używane w wielu miejscach (Tags, Templates, Customers) */
.form-input {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 13px;
    font-family: inherit;
    background: var(--paper);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--p1);
    box-shadow: 0 0 0 2px rgba(1,147,68,0.15);
}
.form-input::placeholder { color: var(--text-faint); }

/* Filter bar / chips (Inbox, Outbox, Audit, ApiLimits) */
.filter-bar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.55rem;
    margin-bottom: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    /* overflow: visible — dropdown panels (.ms-panel) muszą wystawać poza bar.
       Wrap zamiast horizontal scroll wystarczy na wąskich viewportach. */
    overflow: visible;
    position: relative;
    z-index: 20;
}
.f-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.f-chip:hover { background: var(--cream-2); color: var(--text); }
.f-chip.active { background: var(--p1); color: #fff; border-color: var(--p1); }
.f-chip.danger.active { background: var(--danger); border-color: var(--danger); }
.f-chip-premium { opacity: 0.45; cursor: not-allowed; background: var(--cream-2); }
.f-chip-premium:hover { background: var(--cream-2); color: var(--text-soft); }
.f-chip-premium:disabled { cursor: not-allowed; }
.f-sep { width: 1px; height: 18px; background: var(--line); margin: 0 0.25rem; }

/* Sort listy (native select) — spójny z paskiem filtrów (editorial-utility). */
.f-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    background: transparent;
    transition: all 0.12s;
}
.f-sort:hover { background: var(--cream-2); color: var(--text); }
.f-sort-ico { flex: none; color: var(--text-faint); }
.f-sort-select {
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.15rem;
}
.f-sort-select:focus { outline: none; }

/* ───────────────────────── Multi-select dropdown (filters) ─────────────────────────
   Editorial-utility style — używany w Inbox + każdej liście z filtrami.
   Markup: <details data-ms-dropdown><summary class="ms-trigger">…</summary><div class="ms-panel">…</div></details>
   Click-outside zamyka przez abc-ms-dropdown.js. */
.ms-dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.ms-dropdown[open] {
    /* Hard wybicie nad topbar (z-index: 50) — żeby panel nie chował się pod sticky nagłówkiem. */
    z-index: 200;
}
.ms-dropdown > summary {
    list-style: none;
    cursor: pointer;
}
.ms-dropdown > summary::-webkit-details-marker { display: none; }
.ms-dropdown > summary::marker { display: none; }

.ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
    user-select: none;
}
.ms-trigger:hover { background: var(--cream-2); color: var(--text); }
.ms-dropdown.has-selection > .ms-trigger {
    background: rgba(1, 147, 68, 0.08);
    color: var(--p1);
    border-color: rgba(1, 147, 68, 0.18);
}
.ms-dropdown[open] > .ms-trigger {
    background: var(--paper);
    color: var(--text);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}
.ms-trigger-label { font-weight: 500; }
.ms-trigger-icon {
    display: inline-grid; place-items: center;
    color: var(--text-faint);
}
.ms-trigger-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-dropdown.has-selection > .ms-trigger .ms-trigger-icon { color: var(--p1); }
.ms-trigger-count {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--p1);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    font-family: 'Geist Mono', ui-monospace, monospace;
    line-height: 1;
}
.ms-trigger-chevron {
    color: var(--text-faint);
    transition: transform 0.15s;
}
.ms-dropdown[open] > .ms-trigger .ms-trigger-chevron { transform: rotate(180deg); color: var(--text-soft); }

.ms-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: min(420px, 90vw);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
    animation: msFadeIn 0.12s ease-out;
}
@keyframes msFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ms-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}
.ms-panel-title {
    font-family: 'Instrument Serif', serif;
    font-size: 14.5px;
    color: var(--text);
}
.ms-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.1s;
}
.ms-clear-btn:hover { background: var(--paper); color: var(--danger); }

.ms-panel-body {
    overflow-y: auto;
    padding: 0.25rem;
}
.ms-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
    font-style: italic;
}

.ms-group { padding: 0.15rem 0; }
.ms-group + .ms-group { border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.4rem; }

.ms-group-head {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    text-transform: uppercase;
}
.ms-group-head:hover { background: var(--cream-2); }
.ms-group-label { flex: 1; }
.ms-group-hint {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.ms-group-icon {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: var(--cream-2);
    color: var(--text-soft);
}

.ms-group-options { display: flex; flex-direction: column; }
.ms-group-options.is-nested { padding-left: 0.3rem; }

/* Wiersz opcji: sama opcja rozpycha się na całą szerokość, akcja (np. „schowaj") stoi z prawej
   i pokazuje się dopiero pod kursorem — na dotyku jest widoczna zawsze, bo hovera tam nie ma. */
.ms-option-row { display: flex; align-items: center; gap: 0.15rem; }
.ms-option-row > .ms-option { flex: 1; min-width: 0; }

.ms-option-act {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0;
    transition: all 0.12s;
}
.ms-option-row:hover .ms-option-act,
.ms-option-act:focus-visible { opacity: 1; }
.ms-option-act:hover { background: var(--cream-2); color: var(--text); border-color: var(--line-strong); }
@media (pointer: coarse) {
    .ms-option-act { opacity: 1; width: 32px; height: 32px; }
}

/* Szukajka nad listą — pokazywana tylko przy Searchable="true". */
.ms-panel-search {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-faint);
}
.ms-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    outline: none;
}
.ms-search-input::placeholder { color: var(--text-faint); }
.ms-search-input::-webkit-search-cancel-button { display: none; }
.ms-search-clear {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-faint); font-size: 15px; line-height: 1;
    padding: 0 2px; border-radius: 4px;
}
.ms-search-clear:hover { color: var(--text); }

/* Stopka panelu — przełączniki dotyczące całej listy (np. „Pokaż ukryte"). */
.ms-panel-foot {
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--line);
    background: var(--cream-2);
    font-size: 11.5px;
    color: var(--text-soft);
}

.ms-option {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%;
    padding: 0.42rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.ms-option:hover { background: var(--cream-2); }
.ms-option.is-selected { color: var(--text); font-weight: 500; }
.ms-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-option-hint {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--text-faint);
}
.ms-option-swatch {
    width: 10px; height: 10px; border-radius: 50%;
    flex: none;
    border: 1px solid rgba(17,19,23,0.12);
}
.ms-option-icon {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--cream-2);
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    flex: none;
}

/* Faux checkbox (3 stany: empty, mixed, all) — bez <input> bo browser nie eksponuje indeterminate w pure CSS. */
.ms-cbx {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px;
    flex: none;
    border: 1.4px solid var(--line-strong);
    border-radius: 4px;
    background: var(--paper);
    color: transparent;
    transition: all 0.1s;
}
.ms-cbx .ms-cbx-check, .ms-cbx .ms-cbx-dash { display: none; }
.ms-cbx.is-some {
    background: var(--p1);
    border-color: var(--p1);
    color: #fff;
}
.ms-cbx.is-some .ms-cbx-dash { display: block; }
.ms-cbx.is-all {
    background: var(--p1);
    border-color: var(--p1);
    color: #fff;
}
.ms-cbx.is-all .ms-cbx-check { display: block; }
.ms-option:hover .ms-cbx:not(.is-all):not(.is-some) { border-color: var(--p1); }

/* Smaller variant for compact filter bars */
.ms-dropdown.is-compact .ms-trigger { height: 26px; font-size: 12px; padding: 0.2rem 0.55rem; }

/* Dark mode */
[data-theme="dark"] .ms-trigger:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .ms-dropdown[open] > .ms-trigger { background: var(--paper); border-color: var(--line-strong); }
[data-theme="dark"] .ms-dropdown.has-selection > .ms-trigger {
    background: rgba(193, 209, 28, 0.10);
    color: var(--p2);
    border-color: rgba(193, 209, 28, 0.25);
}
[data-theme="dark"] .ms-trigger-count { background: var(--p2); color: var(--p4); }
[data-theme="dark"] .ms-cbx.is-some, [data-theme="dark"] .ms-cbx.is-all { background: var(--p2); border-color: var(--p2); color: var(--p4); }

/* Responsive: na mobile dropdown rozszerza się do całego viewport */
@media (max-width: 640px) {
    .ms-panel {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        max-width: calc(100vw - 2rem);
        min-width: 0;
    }
}

/* Kind badge — wiadomość/dyskusja/reklamacja na liście konwersacji.
   Default kolory; w Faza B będą nadpisywane per-user. */
.kind-badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    font-family: inherit;
    background: var(--kind-bg, #e2ebff);
    color: var(--kind-fg, #2563eb);
    white-space: nowrap;
}
.kind-badge.kind-message    { --kind-bg: #e2ebff; --kind-fg: #2563eb; }
.kind-badge.kind-discussion { --kind-bg: #fef0d8; --kind-fg: #b66a14; }
.kind-badge.kind-claim      { --kind-bg: #fbe9e6; --kind-fg: #c4392f; }
.kind-badge.kind-return     { --kind-bg: #ebe5f8; --kind-fg: #5a36a8; }

/* EmailChannel chip — kolor z DB, inline w wierszu inboxa obok kind/status badge. */
.email-channel-chip {
    display: inline-flex; align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}
[data-theme="dark"] .kind-badge.kind-message    { --kind-bg: rgba(37,99,235,0.18);  --kind-fg: #93b4ff; }
[data-theme="dark"] .kind-badge.kind-discussion { --kind-bg: rgba(201,138,20,0.18); --kind-fg: #f5c98f; }
[data-theme="dark"] .kind-badge.kind-claim      { --kind-bg: rgba(196,57,47,0.18);  --kind-fg: #f4a39c; }
[data-theme="dark"] .kind-badge.kind-return     { --kind-bg: rgba(90,54,168,0.22);  --kind-fg: #c2a6ee; }

/* Source-color stripe on conversation row (Faza B per-user override target) */
.t-row.source-tinted::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--row-source-color, transparent);
    border-radius: 3px 0 0 3px;
}

/* Snooze dropdown (Conversation) */
.snooze-dropdown { position: relative; display: inline-block; }
.snooze-dropdown > summary { list-style: none; cursor: pointer; }
.snooze-dropdown > summary::-webkit-details-marker { display: none; }
.snooze-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
    z-index: 50;
    min-width: 200px;
}
.snooze-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
}
.snooze-item:hover { background: var(--cream-2); }
.snooze-item[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Chip "wysłane bezpośrednio z panelu Allegro" — oznacza wiadomości od sprzedawcy zsynchronizowane przez polling,
   żeby agent wiedział że to NIE jego wysyłka z ABCare. */
.chip-source-external {
    background: rgba(255, 102, 0, 0.08);
    color: #c45a00;
    border: 1px solid rgba(255, 102, 0, 0.25);
}
.snooze-item-danger { color: var(--danger, #c0392b); }
.snooze-section {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint, #8a8a85);
    padding: 0.45rem 0.7rem 0.2rem;
    border-top: 1px solid var(--line);
    margin-top: 0.2rem;
}
.snooze-section:first-child { border-top: none; margin-top: 0; }
/* Mobile actions menu — popup wjeżdża "od prawej i w dół" zamiast wąskiego dropdownu */
.mobile-actions-menu > .snooze-list {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Templates dropdown (composer) */
.tpl-dropdown { position: relative; display: inline-block; }
.tpl-dropdown > summary { list-style: none; cursor: pointer; }
.tpl-dropdown > summary::-webkit-details-marker { display: none; }
.tpl-dropdown-list {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
    z-index: 50;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
}
.tpl-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    line-height: 1.35;
    font-family: inherit;
}
.tpl-dropdown-item:hover { background: var(--cream-2); }
.tpl-dropdown-item strong { font-size: 12.5px; }
.tpl-dropdown-item small { color: var(--text-soft); font-size: 11.5px; }

/* Customer notes (Conversation side panel) */
.cust-notes {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}
.cust-notes-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.cust-notes-body {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--cream-2);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--warn, #c98a14);
}
.cust-notes-empty {
    font-size: 11.5px;
    color: var(--text-faint);
    font-style: italic;
}
.btn-link-sm {
    background: transparent;
    border: none;
    color: var(--p1, #019344);
    font-size: 11.5px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.btn-link-sm:hover { color: var(--text); }

/* Bulk action bar (Inbox) */
.bulk-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
    background: var(--info-bg, #e2ebff);
    border: 1px solid var(--info, #2563eb);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 13px;
}
.bulk-cb {
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--p1, #019344);
}
.bulk-tag-dropdown { position: relative; }
.bulk-tag-dropdown > summary { list-style: none; cursor: pointer; }
.bulk-tag-dropdown > summary::-webkit-details-marker { display: none; }
.bulk-tag-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
    z-index: 50;
    min-width: 200px;
    max-height: 240px;
    overflow-y: auto;
}
.bulk-tag-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
}
.bulk-tag-item:hover { background: var(--cream-2); }

/* Inbox search input */
.inbox-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    color: var(--text-soft);
}
.inbox-search input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13.5px;
    outline: none;
    color: var(--text);
    font-family: inherit;
}
.inbox-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.btn-icon-clear {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 18px;
    cursor: pointer;
    padding: 0 0.4rem;
    line-height: 1;
}
.btn-icon-clear:hover { color: var(--text); }

/* Response templates editor (Settings) */
.tpl-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    background: var(--cream-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}
.tpl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.tpl-item {
    padding: 0.85rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.tpl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}
.tpl-body {
    background: var(--cream-2);
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: 'Geist', sans-serif;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
}

/* Tone-swatch dot for color-coded tags */
.tone-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.tone-swatch.tone-neutral { background: #aaa; }
.tone-swatch.tone-success { background: var(--p1, #019344); }
.tone-swatch.tone-warning { background: var(--warn, #c98a14); }
.tone-swatch.tone-danger { background: var(--danger, #c4392f); }
.tone-swatch.tone-info { background: var(--info, #2563eb); }
.form-input-sm { padding: 4px 8px; font-size: 13px; }

/* Native color picker — zachowuje mockup styling (mała kafelka + cienka ramka) */
.color-input {
    width: 56px;
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    cursor: pointer;
    padding: 2px;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: none; border-radius: 4px; }

.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* Sync spinner — w chipie info na karcie integracji gdy poller pracuje */
.sync-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Tags-management table (Settings) */
.tags-table { width: 100%; border-collapse: collapse; }
.tags-table thead { background: var(--cream-2); }
.tags-table th {
    text-align: left;
    padding: 0.65rem 1rem;
    font-weight: 500;
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tags-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

/* Audit log timeline + table (used in /audit) */
.audit-table { width: 100%; border-collapse: collapse; }
.audit-table thead { background: var(--cream-2); }
.audit-table th {
    text-align: left;
    padding: 0.65rem 1rem;
    font-weight: 500;
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line);
}
.audit-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    vertical-align: top;
}
.audit-table tr:last-child td { border-bottom: none; }
.audit-table td.col-time { white-space: nowrap; color: var(--text-soft); font-size: 12px; font-family: 'Geist Mono', monospace; }
.audit-table td.col-actor { font-size: 12px; color: var(--text-soft); font-family: 'Geist Mono', monospace; white-space: nowrap; }
.audit-table td.col-payload { max-width: 480px; }
.audit-payload-pre {
    background: var(--cream-2);
    border-radius: 4px;
    padding: 0.4rem 0.55rem;
    font-size: 11.5px;
    font-family: 'Geist Mono', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 140px;
    overflow-y: auto;
}
.audit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    background: var(--text-faint);
    vertical-align: middle;
}
.audit-dot.tone-ok { background: var(--p1); }
.audit-dot.tone-warn { background: var(--warn); }
.audit-dot.tone-danger { background: var(--danger); }
.audit-dot.tone-info { background: var(--info); }

/* Composer internal-note variant (yellow background) */
.composer-area.composer-internal {
    background: var(--warn-bg, #fbf2dc);
    border-color: rgba(201,138,20,0.35);
}
.composer-area.composer-internal:focus {
    border-color: var(--warn, #c98a14);
    box-shadow: 0 0 0 2px rgba(201,138,20,0.15);
}

/* Snippet autocomplete (#71 phase 2) — float pickera nad composerem.
   composer-area-wrap musi byc position:relative zeby picker dropowal sie tylko nad textareą,
   nie nad calym composerem. */
.composer-area-wrap { position: relative; }
.snippet-picker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    background: var(--cream-1, #fffdf7);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
}
.snippet-picker-hint {
    font-size: 10.5px;
    color: var(--text-faint);
    padding: 0.25rem 0.75rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.02em;
}
.snippet-picker-item {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.45rem 0.75rem;
    display: grid;
    grid-template-columns: minmax(auto, max-content) 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.06s ease;
}
.snippet-picker-item:hover,
.snippet-picker-item.selected {
    background: var(--cream-2, #f8f3e8);
    border-left-color: var(--global-palette1, #009244);
}
.snippet-picker-trigger {
    grid-column: 1;
    grid-row: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--global-palette1, #009244);
    min-width: 0;
}
.snippet-picker-desc {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snippet-picker-preview {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-soft);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Geist Mono', monospace;
}

/* Dashboard — connector health card grid */
.health-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.health-row .health-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--danger);
}
.health-row .health-line.warn { border-left-color: var(--warn); }
.health-row .health-line .h-name {
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.health-row .health-line .h-name .channel-icon { width: 22px; height: 22px; font-size: 10.5px; }
.health-row .health-line .h-msg {
    color: var(--danger);
    font-size: 11.5px;
    font-family: 'Geist Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin: 0 0.4rem;
}
.health-row .health-line.warn .h-msg { color: var(--warn); }

/* Karta „Kontakt" w szczegółach klienta hostuje picker tagów (dropdown absolutny).
   .card ma overflow:hidden → picker byłby przycięty przez kartę i chowałby się pod sekcją
   „Statystyki". Tu przywracamy overflow:visible, żeby dropdown wychodził poza kartę. */
.cdetail-contact-card { overflow: visible; }

/* Customer-level tagi (cross-conv kontekst — wspólna pula z conv tags) */
.cust-tags {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}
.cust-tags-head {
    margin-bottom: 0.4rem;
}
.cust-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

/* Tag picker + add button + remove × — wspólne dla Conversation modal i CustomerDetail.
   Wcześniej żyły tylko w Conversation.razor.css (scoped) → CustomerDetail wyglądał jak rozjazd. */
.tag-add-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: transparent;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--text-faint);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: all 0.12s;
}
.tag-add-btn:hover { border-style: solid; color: var(--text); background: var(--cream-2); }
.tag-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0.15rem;
    margin-left: 0.25rem;
    font-size: 14px;
    line-height: 1;
    opacity: 0.55;
    border-radius: 50%;
}
.tag-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }

.tag-picker-anchor { position: relative; display: inline-flex; }
.tag-picker-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tag-picker-input {
    font-size: 12px;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--paper);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.tag-picker-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tag-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}
.tag-picker-item:hover { background: var(--cream-2); }
.tag-picker-new {
    color: var(--p1);
    border-top: 1px solid var(--line);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}
@media (max-width: 600px) {
    .tag-picker-pop {
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* Lista innych otwartych spraw klienta (side panel Conversation) */
.other-convs {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.other-conv {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.other-conv:hover {
    background: var(--cream);
    border-color: var(--text-faint);
}
.other-conv-link {
    display: block;
    padding: 0.55rem 0.7rem;
    color: var(--text);
    text-decoration: none;
}
.other-conv-link:hover { text-decoration: none; }
.other-conv-head {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
    min-width: 0;
}
.other-conv-head .chip { flex-shrink: 0; }
.other-conv-subj {
    font-size: 13px;
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.other-conv-meta {
    color: var(--text-faint);
    font-size: 11px;
    margin-top: 0.25rem;
}
.avatar-circle.sz-18 {
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* Customers list table (domyślnie 7 kolumn z 36px checkboxem).
   Modyfikator `--6col` dla list bez checkbox (Returns, SLA settings).
   `min-width: 0` na komórkach jest KRYTYCZNE — bez tego flex/grid items mają
   automatyczny minimum-size równy content-size i text-overflow:ellipsis nie działa
   (długie login Allegro np. "Client:111182502" wylewają się poza komórkę zachodząc
   na sąsiednie kolumny — efekt widoczny na screenshocie /returns iter 87). */
.cust-table {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
    overflow: hidden;
}
.cust-head {
    display: grid;
    grid-template-columns: 36px minmax(180px,1.4fr) minmax(160px,1.2fr) minmax(160px,1.2fr) 90px 90px 130px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1rem;
    font-size: 11.5px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.cust-head .sortable {
    cursor: pointer;
    user-select: none;
}
.cust-head .sortable:hover {
    color: var(--text);
}
.cust-row {
    display: grid;
    grid-template-columns: 36px minmax(180px,1.4fr) minmax(160px,1.2fr) minmax(160px,1.2fr) 90px 90px 130px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--text);
    transition: background 0.1s ease;
}
.cust-row:last-child { border-bottom: none; }
.cust-row:hover { background: var(--cream); text-decoration: none; }
.cust-row.selected { background: rgba(1, 147, 68, 0.06); }
.cust-row .cr-clickable { color: inherit; text-decoration: none; cursor: pointer; }
.cust-row .cr-clickable:hover { text-decoration: none; }
.cust-row .cr-cb, .cust-head .ch-cb { display: flex; align-items: center; justify-content: center; }

/* 6-kolumnowy wariant — Returns list, SLA settings. Layout: name 1.6fr | contact 1.3fr | tags 1.1fr | num 80 | num 90 | last 130 */
.cust-table--6col .cust-head,
.cust-table--6col .cust-row {
    grid-template-columns: minmax(180px,1.6fr) minmax(160px,1.3fr) minmax(140px,1.1fr) 80px 90px 130px;
}
.cust-table--6col .cust-row > div,
.cust-table--6col .cust-head > div { min-width: 0; }
.cust-table--6col .cr-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-table--6col .cr-name span,
.cust-table--6col .cr-contact div {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-table--6col .cr-tags { overflow: hidden; }

.cr-name strong { font-size: 13.5px; display: block; }
.cr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}
.cust-pager {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* Returns list — barcode-friendly search input z ikoną skanera */
.returns-search-wrap { position: relative; flex: 1 1 280px; max-width: 360px; }
.returns-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--text-faint);
    pointer-events: none;
}
.returns-search-input { padding-left: 2rem; width: 100%; }
.returns-search-input:focus { border-color: var(--p1); outline: none; }

/* ─────────── Return Detail Page (rd-*) ───────────
   Editorial-utility layout. Hero header + status timeline + 2-col grid (main items + sticky sidebar).
   Naming convention: `rd-` prefix dla wszystkiego, scope contained. */

/* Fit available width — z .content (100% width parent). 1440 jest dobry breakpoint:
   shorter screens się fit'ują naturalnie, big ultrawide nie rozjeżdżają items na 4 monitora. */
.rd-shell { max-width: 1480px; margin: 0 auto; padding-bottom: 2rem; }

.rd-crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: 12px; color: var(--text-faint); margin-bottom: 0.5rem; }
.rd-back { color: var(--text-faint); text-decoration: none; }
.rd-back:hover { color: var(--p1); text-decoration: underline; }
.rd-crumb-sep { color: var(--line-strong); }
.rd-crumb-id { font-size: 11.5px; }

.rd-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    margin-bottom: 1rem;
    border-left: 4px solid var(--p1);
}
.rd-hero-label { font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; margin: 0 0 0.25rem; }
.rd-hero-title {
    font-family: 'Instrument Serif', 'Geist', serif;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.rd-hero-title em { font-style: italic; color: var(--p1); }
.rd-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 12.5px; color: var(--text-soft); }
.rd-meta-sep { color: var(--line-strong); }
.rd-meta-stat strong { color: var(--text); font-weight: 600; }
.rd-hero-actions { display: flex; gap: 0.5rem; align-items: center; }

.rd-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.rd-status-chip .rd-status-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.rd-chip-info { background: var(--info-bg, #e2ebff); color: var(--info, #1d4ed8); }
.rd-chip-info .rd-status-dot { background: var(--info, #2563eb); }
.rd-chip-warn { background: var(--warn-bg, #fbf2dc); color: #92590e; }
.rd-chip-warn .rd-status-dot { background: var(--warn, #c98a14); }
.rd-chip-ok { background: var(--ok-bg, #e3f4eb); color: #14653a; }
.rd-chip-ok .rd-status-dot { background: var(--ok, var(--p1)); }
.rd-chip-danger { background: var(--danger-bg, #fbe9e6); color: #921e16; }
.rd-chip-danger .rd-status-dot { background: var(--danger, #c4392f); }
.rd-chip-neutral { background: #eee; color: #555; }
.rd-chip-neutral .rd-status-dot { background: #888; }

.rd-completed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--ok-bg);
    color: #14653a;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    font-size: 13px;
}
.rd-completed--rejected { background: var(--danger-bg); color: #921e16; }

/* Status timeline (stepper) */
.rd-timeline {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: var(--cream-2);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.rd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 80px;
    flex: 0 0 auto;
}
.rd-step-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--line-strong);
    border: 3px solid var(--cream-2);
    box-shadow: 0 0 0 1px var(--line-strong);
    transition: all 0.2s ease;
}
.rd-step.active .rd-step-dot {
    background: var(--p1);
    box-shadow: 0 0 0 1px var(--p1), 0 0 0 5px rgba(1, 147, 68, 0.18);
    transform: scale(1.1);
}
.rd-step.done .rd-step-dot {
    background: var(--p1);
    box-shadow: 0 0 0 1px var(--p1);
}
.rd-step-label {
    font-size: 11px;
    color: var(--text-faint);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.rd-step.active .rd-step-label { color: var(--p1); font-weight: 600; }
.rd-step.done .rd-step-label { color: var(--text-soft); }
.rd-step-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--line-strong);
    min-width: 24px;
    margin: 0 -4px;
    align-self: flex-start;
    margin-top: 6px;
}
.rd-step-line.done { background: var(--p1); }

/* Flash banner */
.rd-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.95rem;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 1rem;
    font-size: 13px;
    font-weight: 500;
}
.rd-flash.ok { background: var(--ok-bg); color: #14653a; border-left: 3px solid var(--ok); }
.rd-flash.err { background: var(--danger-bg); color: #921e16; border-left: 3px solid var(--danger); }
.rd-flash-icon { font-size: 14px; font-weight: 700; }
.rd-flash-x { margin-left: auto; opacity: 0.5; font-size: 18px; line-height: 1; padding: 0 0.4rem; }
.rd-flash-x:hover { opacity: 1; }

/* Grid layout — sidebar wider na ultra wide screens dla customer activity widget */
.rd-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
}
@media (max-width: 1024px) {
    .rd-grid { grid-template-columns: 1fr; }
}

/* Main column sections */
.rd-main { display: flex; flex-direction: column; gap: 1rem; }
.rd-section {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    overflow: hidden;
}
.rd-section--alt { border-color: rgba(1, 147, 68, 0.25); border-left: 3px solid var(--p1); }
.rd-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.9rem 1.1rem 0.7rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}
.rd-section-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin: 0; }
.rd-section-meta { font-size: 12px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }

/* Items list */
.rd-items { display: flex; flex-direction: column; }
.rd-item {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.rd-item:last-child { border-bottom: none; }
.rd-item-row {
    display: grid;
    grid-template-columns: 1fr 80px 120px;
    gap: 1rem;
    align-items: start;
}
.rd-item-main { min-width: 0; }
.rd-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    word-wrap: break-word;
}
.rd-item-offer {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 11.5px;
    color: var(--text-faint);
    text-decoration: none;
}
.rd-item-offer:hover { color: var(--p1); }
.rd-item-offer svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.rd-item-qty { text-align: center; }
.rd-item-qty-num { display: block; font-size: 18px; font-weight: 600; color: var(--text); }
.rd-item-qty-lbl { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.rd-item-price { text-align: right; }
.rd-item-price-amt { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.rd-item-price-lbl { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.rd-item-reason {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
}
.rd-item-reason-lbl { color: var(--text-faint); }
.rd-reason-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--warn-bg);
    color: #92590e;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
}

/* Parcels */
.rd-parcels { display: flex; flex-direction: column; }
.rd-parcel {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.rd-parcel:last-child { border-bottom: none; }
.rd-parcel-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cream-2);
    display: flex; align-items: center; justify-content: center;
}
.rd-parcel-icon svg { width: 18px; height: 18px; stroke: var(--text-soft); fill: none; stroke-width: 1.5; }
.rd-parcel-waybill { font-size: 13px; font-weight: 600; color: var(--text); }
.rd-parcel-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 0.15rem; }

/* Rejection / Refund sections */
.rd-rejection, .rd-refund { padding: 1rem 1.1rem; }
.rd-rejection-row { display: flex; gap: 0.5rem; align-items: baseline; }
.rd-rejection-lbl { font-size: 12px; color: var(--text-faint); }
.rd-rejection-val { font-size: 13px; color: var(--text); }
.rd-rejection-desc {
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--cream-2);
    border-left: 2px solid var(--line-strong);
    font-style: italic;
    color: var(--text-soft);
    font-size: 13px;
}
.rd-rejection-by, .rd-refund-meta { margin-top: 0.6rem; font-size: 11.5px; color: var(--text-faint); }
.rd-refund-amt { font-size: 22px; font-weight: 700; color: var(--p1); letter-spacing: -0.02em; }
.rd-refund-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.rd-refund-meta code { background: var(--cream-2); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 11px; }

/* Sidebar */
.rd-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
    position: sticky;
    top: 1rem;
}
.rd-side-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    padding: 0.95rem 1rem 1rem;
}
.rd-side-card--accent { border-color: rgba(1, 147, 68, 0.3); border-top: 2px solid var(--p1); }
.rd-side-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 0.7rem 0;
}
.rd-side-customer { display: flex; gap: 0.75rem; align-items: center; }
.rd-side-avatar {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p4), var(--p5));
    color: white;
    font-weight: 600;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.rd-side-customer-info { min-width: 0; }
.rd-side-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-side-login { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-side-email {
    display: block;
    font-size: 12px;
    color: var(--p1);
    margin-top: 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-customer-tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.65rem; padding-top: 0.65rem;
    border-top: 1px dashed var(--line);
}
.rd-customer-notes {
    display: flex; gap: 0.4rem;
    margin-top: 0.65rem; padding: 0.6rem 0.7rem;
    background: var(--cream-2);
    border-left: 2px solid var(--p1);
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: var(--text);
    font-style: italic;
    line-height: 1.4;
}
.rd-customer-notes-icon { flex-shrink: 0; opacity: 0.7; }
.rd-customer-notes-text { word-break: break-word; }
.rd-customer-link {
    display: inline-block;
    margin-top: 0.65rem;
    font-size: 11.5px;
    color: var(--p1);
    text-decoration: none;
}
.rd-customer-link:hover { text-decoration: underline; }
.rd-side-empty { font-size: 12.5px; color: var(--text-faint); margin: 0; }

.rd-side-kv { display: flex; flex-direction: column; gap: 0.4rem; }
.rd-side-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 12px;
}
.rd-side-kv-lbl { color: var(--text-faint); flex-shrink: 0; }
.rd-side-kv-val { color: var(--text); text-align: right; word-break: break-all; min-width: 0; }

.rd-side-bank .rd-bank-iban-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    background: var(--cream-2);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 0.6rem;
}
.rd-bank-iban {
    flex: 1 1 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
    font-feature-settings: 'tnum' 1;
    letter-spacing: 0.02em;
}
.rd-bank-copy {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rd-bank-copy:hover { background: var(--p1); border-color: var(--p1); }
.rd-bank-copy:hover svg { stroke: white; }
.rd-bank-copy svg { width: 14px; height: 14px; stroke: var(--text-soft); fill: none; stroke-width: 2; }
.rd-bank-holder { font-size: 12px; color: var(--text-soft); }

/* Customer history widget (sidebar) — quick win z Responso */
.rd-history { display: flex; flex-direction: column; gap: 0.5rem; }
.rd-history-counts { display: flex; gap: 0.85rem; padding: 0.4rem 0 0.5rem; border-bottom: 1px solid var(--line); }
.rd-history-count { flex: 1; text-align: center; }
.rd-history-count-num { display: block; font-size: 18px; font-weight: 600; color: var(--text); }
.rd-history-count-num.danger { color: var(--danger); }
.rd-history-count-lbl { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.rd-history-flag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    margin-top: 0.5rem;
    background: var(--danger-bg);
    color: #921e16;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
}
.rd-history-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.rd-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.1s ease;
}
.rd-history-item:hover { background: var(--cream-2); }
.rd-history-item-meta { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }

/* Activity widget — kind icon + subject + relative time */
.rd-activity-kind { font-size: 13px; flex-shrink: 0; opacity: 0.8; }
.rd-activity-subject { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Inline chat w return detail sidebar (#75) — kompaktowy thread + reply */
.rd-side-title-link {
    font-size: 11px;
    font-weight: 400;
    color: var(--global-palette1, #009244);
    margin-left: auto;
    text-decoration: none;
}
.rd-side-title-link:hover { text-decoration: underline; }
.rd-side-title { display: flex; align-items: baseline; gap: 0.4rem; }
.rd-inline-thread {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.4rem 0 0.6rem;
    max-height: 320px;
    overflow-y: auto;
}
.rd-inline-msg {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--cream-2, #f8f3e8);
    border-left: 3px solid transparent;
    font-size: 11.5px;
    min-width: 0;
}
.rd-inline-msg.out { border-left-color: var(--global-palette1, #009244); background: rgba(1, 147, 68, 0.05); }
.rd-inline-msg.in { border-left-color: var(--text-faint, #999); }
.rd-inline-msg-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    align-items: baseline;
    min-width: 0;
}
.rd-inline-msg-head strong { font-size: 11px; color: var(--text); }
.rd-inline-msg-head .mono { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.rd-inline-msg-body { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.rd-inline-reply { margin-top: 0.5rem; }

/* External link button (Allegro) */
.rd-link-ext {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.rd-link-ext svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Customer detail page (cross-conv) */
.cdetail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}
.cdetail-side, .cdetail-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 900px) {
    .cdetail-grid { grid-template-columns: 1fr; }
    .cust-head, .cust-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .cust-head { display: none; }
    .cust-row { padding: 1rem; }

    /* Nagłówek kolumn znika na telefonie, więc wartości liczbowe zostawały bez żadnego opisu —
       pod nazwiskiem szła kolumna „0 / 0 / —" i nie dało się zgadnąć, co znaczy która.
       Komórka z atrybutem data-label dokleja sobie podpis; komórki bez atrybutu (nazwa, kontakt,
       tagi) mówią same za siebie i zostają bez zmian. */
    .cust-row > [data-label] {
        display: flex;
        gap: 0.4rem;
        align-items: baseline;
    }
    .cust-row > [data-label]::before {
        content: attr(data-label);
        flex: none;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-faint);
    }
    /* Zaznaczenie wiersza ląduje wtedy nad nazwą, wyśrodkowane — wygląda jak zgubiony kwadrat.
       Na telefonie dosuwamy je do lewej, do jednej linii z resztą. */
    .cust-row .cr-cb { justify-content: flex-start; }
}

/* Customer merge modal */
.cust-merge-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}
.cust-merge-modal {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    max-width: 640px;
    width: calc(100% - 2rem);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.cust-merge-modal h3 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}
.merge-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}
.merge-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    text-align: left;
}
.merge-choice-card:hover:not(:disabled) {
    border-color: var(--p1);
    background: var(--cream);
}
.merge-choice-card:disabled {
    opacity: 0.5;
    cursor: wait;
}
.merge-choice-card strong {
    font-size: 14px;
}
@media (max-width: 600px) {
    .merge-choice-grid { grid-template-columns: 1fr; }
}

/* Keyword highlight w wiadomościach (Quick-reply suggestion P9.3) */
.msg-text mark.kw-hit {
    background: rgba(193, 209, 28, 0.35);
    border-radius: 3px;
    padding: 0 0.15em;
    color: inherit;
}

/* Dashboard volumes 24h chart */
.vol-chart {
    width: 100%;
    padding: 0.5rem 0;
}
.vol-chart rect:hover {
    opacity: 1 !important;
    cursor: pointer;
}
.vol-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-faint);
    padding: 0.3rem 0 0;
}

/* Reports — per-agent FRT bar chart */
.agent-frt-bars {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    container-type: inline-size;
}
.agent-frt-row {
    display: grid;
    grid-template-columns: 32px minmax(110px, 1.2fr) minmax(120px, 3fr) 70px;
    align-items: center;
    gap: 0.6rem;
}
.agent-frt-text { min-width: 0; }
.agent-frt-name { font-size: 13px; color: var(--text); }
.agent-frt-sub { color: var(--text-faint); font-size: 10.5px; }
.agent-frt-bar-wrap {
    width: 100%;
    height: 12px;
    background: var(--cream-2);
    border-radius: 6px;
    overflow: hidden;
}
.agent-frt-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
    min-width: 4px;
}
.agent-frt-label {
    font-size: 11.5px;
    color: var(--text-soft);
    text-align: right;
}
/* Wąska karta: pasek znika, zostaje czas.
   Cztery kolumny mają razem minimum ~360 px, a na telefonie karta ma ~300 px — nadmiar wychodził
   poza kartę i UCINAŁ ostatnią kolumnę, czyli jedyną liczbę, po którą ktoś tu przychodzi.
   Pasek jest ilustracją tej liczby, więc to on ustępuje.
   ⚠ @container, a NIE @media: szerokość karty wynika z tego, czy siatka raportu stoi w jednej
   czy w dwóch kolumnach — przy szerokim oknie karta i tak bywa wąska. */
@container (max-width: 380px) {
    .agent-frt-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .agent-frt-bar-wrap { display: none; }
}

/* Dashboard day×hour 2D heatmap (P17.5) */
.dayhour-heatmap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0;
    width: 100%;
    overflow-x: auto;
}
.dh-header, .dh-row {
    display: grid;
    grid-template-columns: 30px repeat(24, 1fr);
    gap: 2px;
    align-items: center;
}
.dh-day-label, .dh-hour-label {
    font-size: 10px;
    color: var(--text-faint);
}
.dh-day-label { text-align: right; padding-right: 0.3rem; }
.dh-hour-label { text-align: center; height: 14px; }
.dh-cell {
    height: 18px;
    border-radius: 3px;
    background: var(--p1);
    transition: opacity 0.15s ease, transform 0.08s ease;
    cursor: default;
}
.dh-cell:hover {
    transform: scale(1.2);
    opacity: 1 !important;
    z-index: 2;
}

/* Toast push notifications — wstrzykiwane przez abc-realtime.js po SignalR push.
   Stack u góry-prawo. Auto-dismiss po 8s, manual close X. */
#abc-toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 9999;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.abc-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 0.6rem;
    min-width: 280px; max-width: 380px;
    padding: 0.8rem 1rem;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e0d8c8);
    border-left: 4px solid var(--warn-border, #f0a020);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 13px;
    animation: abc-toast-in 250ms ease-out;
}
.abc-toast-danger { border-left-color: #d04030; }
.abc-toast-icon { font-size: 18px; line-height: 1; padding-top: 1px; }
.abc-toast-content { flex: 1; }
.abc-toast-content strong { display: block; color: var(--text, #1a1a1a); margin-bottom: 0.2rem; }
.abc-toast-body { color: var(--text-soft, #555); font-size: 12px; line-height: 1.4; }
.abc-toast-link {
    display: inline-block; margin-top: 0.4rem;
    color: var(--p1, #009244); font-weight: 500; text-decoration: none;
}
.abc-toast-link:hover { text-decoration: underline; }
.abc-toast-close {
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--text-faint, #999);
    padding: 0 0.2rem;
}
.abc-toast-close:hover { color: var(--text, #1a1a1a); }
.abc-toast-leaving { opacity: 0; transition: opacity 250ms; }
@keyframes abc-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@media print { #abc-toast-container { display: none; } }

/* Presence chip pulse (collision detection — agent typing reply) */
@keyframes presencePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.7); }
}

/* EditorialLayout — minimalistyczny layout dla landing/auth/onboarding pages bez sidebar.
   Styles trzymane w app.css (nie scoped razor.css) bo dynamic @layout w Blazor czasem gubi
   scope attribute b-XXX, przez co scoped CSS nie matchuje. */
.editorial-shell { min-height: 100vh; display: flex; flex-direction: column; }
.editorial-topbar {
    height: var(--topbar-h, 3.5rem);
    padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-bottom: 1px solid var(--line, #e8e5db);
    background: color-mix(in srgb, var(--paper, #fff) 80%, transparent);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 50;
}
.editorial-brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; }
.editorial-logo {
    width: 30px; height: 30px; border-radius: 7px;
    background: #ffffff;
    display: grid; place-items: center;
    border: 1px solid var(--line, #e5e7eb);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex: none;
}
.editorial-logo svg { width: 18px; height: 18px; }
.editorial-brandname { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.4rem; line-height: 1; letter-spacing: -0.01em; color: var(--text, #111317); }
.editorial-brandname em { font-style: italic; color: var(--p1, #019344); }
.editorial-nav { display: flex; align-items: center; gap: 0.4rem; }
.editorial-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1rem; }
.editorial-main > .page-centered { padding: 0; }
.editorial-footer {
    padding: 1rem 1.5rem; border-top: 1px solid var(--line, #e8e5db);
    display: flex; align-items: center; gap: 0.5rem; font-size: 12px; color: var(--text-soft, #5e6671);
}
.editorial-footer a { text-decoration: none; }
.editorial-footer a:hover { color: var(--p1, #019344); }
/* Stopka stron publicznych to NAWIGACJA (Dokumentacja / Polityka / Regulamin), a nie tekst
   w zdaniu — na dotyku odnosniki dostaja pelna wysokosc celu. ⚠ NIE dotyczy adresow e-mail
   i odnosnikow WEWNATRZ akapitow regulaminu: tam 38 px rozwalilby interlinie, a to nie sa
   przyciski, tylko fragmenty zdania. */
@media (pointer: coarse) {
    .editorial-footer a { display: inline-flex; align-items: center; min-height: 38px; }
}
@media (max-width: 600px) {
    .editorial-topbar { padding: 0 0.85rem; }
    .editorial-brandname { font-size: 1.2rem; }
    .editorial-footer { padding: 0.85rem 1rem; flex-wrap: wrap; }
}

/* OAuth re-auth banner — pokazywany gdy ConnectorAccount.Status = Unauthorized.
   Sticky pod topbar; kliknięcie linku przenosi do /integrations gdzie agent re-auth. */
.reauth-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    background: var(--warn-bg, #fff8e6);
    color: var(--warn-text, #7a4a00);
    border-bottom: 1px solid var(--warn-border, #f0d990);
    font-size: 13px;
    line-height: 1.4;
}
.reauth-banner svg { flex-shrink: 0; color: #c08000; }
.reauth-banner span { flex: 1; }
.reauth-banner-btn {
    color: var(--warn-text, #7a4a00);
    text-decoration: underline;
    font-weight: 500;
    white-space: nowrap;
}
.reauth-banner-btn:hover { color: #5a3500; }
/* Baner siedzi w layoucie, czyli na KAZDEJ stronie — a jego odnosnik mial na telefonie
   18 px wysokosci, czyli polowe minimalnego celu dotykowego. Powiekszamy pole klikania
   (nie sam tekst) i tylko na dotyku, zeby gestosc interfejsu na komputerze zostala. */
@media (pointer: coarse) {
    .reauth-banner-btn {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 0.25rem;
    }
}
@media print { .reauth-banner { display: none; } }

/* ── Metrics help — rozwijany panel „Co oznaczają te wskaźniki?" na raportach.
   Native <details> (dostępny, działa bez JS). Editorial-utility: subtelna karta,
   niebieski akcent info na ikonie. Reużywalny na /reports/*. ── */
.metrics-help {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.metrics-help > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 1rem;
    font-size: 13px; font-weight: 500;
    color: var(--text);
    user-select: none;
}
.metrics-help > summary::-webkit-details-marker { display: none; }
.metrics-help > summary::marker { content: ""; }
.metrics-help > summary:hover { background: var(--cream-2); }
.metrics-help > summary:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.metrics-help .mh-icon {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--info-bg); color: var(--info);
    font-weight: 700; font-size: 13px; line-height: 1;
}
.metrics-help .mh-chevron {
    margin-left: auto; flex: none;
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-faint);
    transition: transform 0.18s ease;
}
.metrics-help[open] > summary .mh-chevron { transform: rotate(180deg); }
.metrics-help-body {
    padding: 0.25rem 1rem 1rem;
    border-top: 1px solid var(--line);
}
.metrics-help-body dl { margin: 0; }
.metrics-help-body dl > div {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--cream-2);
}
.metrics-help-body dl > div:last-of-type { border-bottom: none; }
.metrics-help-body dt {
    font-weight: 600; font-size: 13px; color: var(--text);
    margin-bottom: 0.2rem;
}
.metrics-help-body dd {
    margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft);
}
.metrics-help-body dd .mh-ex {
    display: block; margin-top: 0.25rem;
    color: var(--text-faint); font-style: italic;
}
.metrics-help-more {
    display: inline-block; margin-top: 0.85rem;
    font-size: 12.5px; color: var(--p1); text-decoration: none; font-weight: 500;
}
.metrics-help-more:hover { text-decoration: underline; }

/* Inline „?" przy etykiecie wskaźnika — tooltip przez title=, znaczenie przez aria-label. */
.info-dot {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: var(--info-bg); color: var(--info);
    font-size: 10px; font-weight: 700; line-height: 1;
    cursor: help; vertical-align: middle;
    text-decoration: none; user-select: none;
}
.info-dot:hover { filter: brightness(0.96); }
.info-dot:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }

/* Print stylesheet — przy "Drukuj / PDF" ukrywamy nav/menu/topbar i drukujemy
   sam content raportu. Białe tło.
   WAŻNE (fix pustych stron): layout ma `main { height: 100vh; overflow-y: auto }`,
   czyli kontener przewijania o stałej wysokości. Przy druku taki kontener przycina
   treść do jednego ekranu, a przeglądarka rezerwuje kolejne strony jako PUSTE.
   Dlatego w druku zdejmujemy stałe wysokości i overflow z całego łańcucha layoutu
   (html → body → .page → main → .content-wrapper → .content), żeby raport płynął
   naturalnie przez wszystkie strony. */
@media print {
    /* App chrome do ukrycia: sidebar, topbar (uwaga: to KLASA .app-topbar, nie #id),
       banery, kontrolki filtrów oraz przyciski akcji raportu (.no-print). */
    #page-sidebar, #app-topbar, .app-topbar, .app-burger, .alert-actions, .filter-bar,
    .conv-side-toggle, .conv-side-toggle-mobile, .conv-side-backdrop,
    .snooze-dropdown, .composer-area-wrap, .composer-actions, .composer-tabs,
    .tenant-switcher-wrap, .nav-section, .sidebar-brand, .nav-account,
    .reauth-banner, .sidebar-backdrop, .no-print {
        display: none !important;
    }
    /* Zdejmij stałą wysokość + scroll z łańcucha layoutu — inaczej puste strony. */
    html, body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
        color: black !important;
    }
    .page, #page-shell {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
    main {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .content-wrapper {
        display: block !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .content {
        max-width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* Stagger fade-in startuje z opacity:0 — gdyby animacja nie dobiegła przed drukiem,
       treść byłaby niewidoczna. Wymuszamy pełną widoczność. */
    .stagger > * {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .card, .kpi {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    /* Wykresy/heatmapa/paski są rysowane tłem (background) — domyślnie druk pomija tła.
       Wymuszamy dokładne kolory na całej stronie, żeby wizualizacje faktycznie się wydrukowały. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Email — external images blocked placeholder + show button bar */
.email-images-blocked-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    margin: 0.4rem 0;
    background: var(--cream-2, #f5f3ed);
    border: 1px dashed var(--line, #d8d3c4);
    border-radius: 6px;
    font-size: 12.5px;
}
img.external-image-blocked {
    display: inline-block;
    min-width: 80px;
    min-height: 80px;
    background: #f1f5f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23f1f5f9'/><circle cx='40' cy='35' r='10' fill='%23cbd5e1'/><path d='M28 60h24l-6-12-6 8-3-4z' fill='%23cbd5e1'/><text x='40' y='75' text-anchor='middle' fill='%2364748b' font-size='9' font-family='sans-serif'>obrazek</text></svg>") no-repeat center;
    border: 1px dashed #94a3b8;
    border-radius: 4px;
    color: transparent;
}
img.external-image-loaded {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* ── Natywna powloka mobilna (Android): chowa elementy topbara zdublowane przez natywny dolny pasek.
   Klasa `abcare-native` dokladana na <html> przez WebView (MainPage.OnNavigated). Desktop nigdy jej
   nie ma -> zero wplywu. Dzwonek -> zakladka Alerty; user chip -> zakladka Konto. ── */
html.abcare-native .notif-dropdown,
html.abcare-native .app-user-chip {
    display: none;
}

/* Pusty pas pod paskiem akcji watku — TYLKO w apce, na mobilnym webie go nie ma.
   Powod: .reader-actionbar rezerwuje miejsce na dolny obszar bezpieczny
   (env(safe-area-inset-bottom)), ale w natywnej powloce to miejsce zajmuje juz natywny
   dolny pasek (Poczta/Zadania/Alerty/Konto) — rezerwacja liczyla sie DRUGI raz.
   W przegladarce nie ma natywnego paska, wiec tam zapas zostaje.
   Specyficznosc: html.abcare-native .reader-actionbar (0,2,1) bije scoped
   .reader-actionbar[b-xxx] (0,2,0), wiec nadpisanie zadziala mimo scoped CSS. */
html.abcare-native .reader-actionbar {
    padding-bottom: 0.55rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Pull-to-refresh (mobile) — wskaznik gestu "przeciagnij od gory, by odswiezyc".
   Element .abc-ptr tworzony w abc-pull-refresh.js => styl MUSI byc globalny (scoped
   .razor.css nie obejmuje elementow spoza markupu komponentu). Wskaznik = kolko ze
   strzalka; po przekroczeniu progu strzalka sie obraca (.ready), podczas odswiezania
   spinner (.spin). Pozycja/opacity sterowane inline z JS (transform translateY).
   ══════════════════════════════════════════════════════════════════════ */
.abc-ptr {
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 6px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4e7eb);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    color: var(--p1, #009244);
    opacity: 0;
    transform: translateX(-50%) translateY(-46px);
    pointer-events: none;
    z-index: 6;
}
.abc-ptr.anim { transition: transform 0.24s ease, opacity 0.24s ease; }
.abc-ptr svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.18s ease;
}
.abc-ptr.ready svg { transform: rotate(180deg); }
.abc-ptr.spin svg { display: none; }
.abc-ptr.spin::after {
    content: '';
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--p1, #009244) 25%, transparent);
    border-top-color: var(--p1, #009244);
    animation: abc-ptr-spin 0.7s linear infinite;
}
@keyframes abc-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .abc-ptr svg { transition: none; }
    .abc-ptr.spin::after { animation-duration: 1.4s; }
}

/* ── K3-2 — dropdown podpowiadania adresów e-mail (abc-address-suggest.js, montowany w body → global) ── */
.abc-addr-suggest {
    position: fixed;
    z-index: 100000;
    max-height: 240px;
    overflow-y: auto;
    background: var(--paper, #fff);
    border: 1px solid var(--line-strong, #d3d0c4);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(17, 19, 23, 0.16);
    padding: 4px;
    font-size: 13px;
}
.abc-addr-opt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.abc-addr-opt.on,
.abc-addr-opt:hover { background: var(--cream-2, #f4f2ea); }
.abc-addr-opt .aao-email { color: var(--text, #111317); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.abc-addr-opt .aao-name { color: var(--text-faint, #8b9099); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

/* ── K3-3 — podświetlenie edytora przy przeciąganiu pliku (drag&drop załącznika) ── */
.abc-drag-over {
    outline: 2px dashed var(--p1, #019344);
    outline-offset: -4px;
    background: var(--ok-bg, #e3f4eb) !important;
}

/* ── Paski przewijania — jeden wygląd w całej apce ───────────────────────────────────────────
   Menu boczne dostało cienki, wtopiony pasek już dawno (MainLayout.razor.css), ale reszta apki
   została z systemowym: szerokim, szarym, z kwadratowymi strzałkami. Widać go wszędzie tam, gdzie
   coś się przewija — listy, tabele, panele — i to on rzucał się w oczy jako „brzydki".

   Reguła jest GLOBALNA i celowo o najniższej sile: własne paski (sidebar, czytnik wiadomości,
   mini-audyt) mają wyższą specyficzność i zostają nietknięte.

   Thumb rysujemy przez border + background-clip: content-box — daje wrażenie wąskiego paska
   z odstępem od krawędzi, zamiast przyklejonego do niej prostokąta. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 19, 23, 0.18) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(17, 19, 23, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 19, 23, 0.32);
    background-clip: content-box;
}

/* Bez tego róg między poziomym a pionowym paskiem zostaje systemowo szary. */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Kafelek wskaznika (KPI) ────────────────────────────────────────────────────
   Uzywany na /dashboard ORAZ w raportach (/reports/sla, /reports/messages).
   ⚠ Te reguly siedzialy wczesniej WYLACZNIE w Dashboard.razor.css, czyli w scoped CSS —
   a ten dziala tylko w swoim komponencie. Skutek: w raportach kafelki byly golym tekstem
   na tle strony, bez ramki i bez tla, i nikt tego nie zauwazyl, bo sonda ukladu mierzy
   przepelnienie i lamanie tekstu, a nie „brak stylu". Uklad kolumn zostal w Dashboardzie
   (jest jego wlasny); tutaj jest sam wyglad kafelka. */
.kpi {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--p1);
    border-radius: var(--radius-lg);
    padding: 1.05rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi.tone-danger { border-left-color: var(--danger); }
.kpi.tone-warn { border-left-color: var(--warn); }

.kpi-label {
    font-size: 11.5px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}

.kpi-sub {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 0.4rem;
}

@media (max-width: 640px) {
    .kpi-value { font-size: 2rem; }
}

/* ── Karta zwijana TYLKO na telefonie (.collapse-mobile) ────────────────────────
   Dluga sciagawka (np. lista zmiennych w szybkich odpowiedziach) zjada na waskim
   ekranie pol strony, a jest potrzebna dopiero przy pisaniu. Na telefonie zwijamy
   ja do jednego wiersza, na komputerze pokazujemy jak zwykla karte — bez naglowka
   do klikania, tak jak bylo.

   ⚠ NIE uzywamy <details>: przegladarka chowa jego tresc wewnetrznym slotem, ktorego
   nie da sie odslonic autorskim CSS-em. Proba "na telefonie zwiniete, na komputerze
   rozwiniete" konczyla sie tym, ze na komputerze karta znikala w calosci.
   Stan trzyma komponent (klasa `is-open`), tutaj jest sama widocznosc. */
.collapse-mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .9rem 1.15rem;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.collapse-mobile-hint { color: var(--text-faint); font-size: 11.5px; margin-left: .45rem; }
.collapse-mobile-chevron { color: var(--text-faint); transition: transform .15s; flex: none; }
.collapse-mobile.is-open .collapse-mobile-chevron { transform: rotate(180deg); }

/* Telefon: tresc widoczna dopiero po rozwinieciu. */
@media (max-width: 768px) {
    .collapse-mobile:not(.is-open) > .collapse-mobile-body { display: none; }
    .collapse-mobile-summary { min-height: 44px; }
}

/* Komputer: karta jak przedtem — naglowek zwijania znika, tresc zawsze widoczna. */
@media (min-width: 769px) {
    .collapse-mobile > .collapse-mobile-summary { display: none; }
}

/* ── Pola wyboru na telefonie ──────────────────────────────────────────────────
   Domyslny checkbox ma 13x13 px (a `.bulk-cb` 14x14) — jedna czwarta tego, w co
   da sie trafic palcem. Zaznaczanie watkow na liscie bylo w praktyce loteria.
   Powiekszamy sam kontrolkę do 20 px i dokladamy niewidoczne pole dotyku do 40 px
   przez ::after — bez ruszania ukladu wiersza (element zajmuje dalej tyle samo). */
@media (pointer: coarse) {
    /* ⚠ NIE probuj powiekszac pola dotyku pseudoelementem (::after) — pola formularza sa
       elementami zastepowanymi i pseudoelementow NIE renderuja. Taka regula wyglada w kodzie
       jak zabezpieczenie, a nie robi zupelnie nic. Jedyne, co dziala bez zmiany znacznikow,
       to powiekszenie samej kontrolki. 32 px to na telefonie normalny rozmiar pola wyboru. */
    input[type="checkbox"] { width: 32px; height: 32px; }
}

/* Nazwa klienta na liscie to GLOWNA akcja wiersza (otwiera karte), a ma 20 px wysokosci —
   miedzy dwoma innymi liniami tekstu palec trafia obok. Powiekszamy pole klikania,
   nie czcionke; wiersz i tak ma zapas w pionie. */
@media (pointer: coarse) {
    .cust-row .cr-clickable {
        display: flex;
        align-items: center;
        min-height: 38px;
    }
}

/* Odnosnik w wierszu karty (np. temat wiadomosci w kolejce wysylki) to glowna akcja
   tego wiersza, a mial 19 px wysokosci. Powiekszamy pole klikania, nie czcionke.
   ⚠ Dotyczy TYLKO odnosnikow — zwykla wartosc tekstowa nie jest celem dotyku. */
@media (pointer: coarse) {
    .data-card-row a.value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 38px;
    }
    /* Logo w naglowku stron publicznych (30 px) — jedyny odnosnik nawigacyjny na tych ekranach. */
    .editorial-brand { min-height: 38px; }
}