/* ==========================================================================
   TriggerDoc UI — Główny arkusz stylów
   ========================================================================== */

/* Alpine.js — ukryj elementy przed inicjalizacją */
[x-cloak] {
    display: none !important;
}

/* --- Tokeny / zmienne --- */
/* Paleta: Premium UI — Modern Professional (ui/DESIGN_APPROACH_PREMIUM.md) */
:root {
    /* Akcent — niebieski dominujący kolor systemu */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-primary-border: rgba(37, 99, 235, 0.3);
    --gradient-primary: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --gradient-primary-hover: linear-gradient(135deg, #2563eb, #1e3a8a);
    /* Akcent — zielony */
    --color-secondary: #059669;
    --color-secondary-dark: #047857;
    --color-secondary-light: #ecfdf5;
    /* Akcent — czerwony */
    --color-tertiary: #dc2626;
    --color-tertiary-dark: #b91c1c;
    --color-tertiary-light: #fef2f2;
    /* Tła i powierzchnie — ciepłe neutralne zamiast zimnego slate */
    --color-bg: #f5f5f2;
    --color-surface: #ffffff;
    --color-surface-raised: #f5f5f3;
    /* Tekst — ciepła czerń zamiast zimnego slate */
    --color-text: #111110;
    --color-text-muted: #6b6b68;
    --color-text-subtle: #9b9b98;
    /* Obramowania — ciepłe zamiast zimnych */
    --color-border: #e8e8e5;
    --color-border-hover: #d4d4d1;
    /* Akcent koszyka — ujednolicony z primary */
    --color-cart: #2563eb;
    --color-cart-dark: #1d4ed8;
    /* Stan błędu */
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    /* Stan sukcesu */
    --color-success: #16a34a;
    --color-success-light: #f0fdf4;
    /* Semantyczne tokeny sukcesu */
    --color-success-text: #059669;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    /* Semantyczne tokeny błędu/danger */
    --color-danger-text: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    /* Stan błędu (walidacja formularzy) */
    --color-error: #ef4444;
    /* Ostrzeżenie */
    --color-warning: #d97706;
    --color-warning-text: #b45309;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;
    /* Score / trend */
    --color-score-green: #059669;
    --color-score-orange: #ea580c;
    --color-score-yellow: #d97706;
    --color-score-gray: #64748b;
    /* Gwiazdki */
    --color-star: #f59e0b;
    /* Inne */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(17, 17, 16, 0.08), 0 1px 2px rgba(17, 17, 16, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(17, 17, 16, 0.10), 0 2px 4px -2px rgba(17, 17, 16, 0.06);
    --shadow-lg: 0 12px 24px -4px rgba(17, 17, 16, 0.12), 0 4px 8px -2px rgba(17, 17, 16, 0.06);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);
    --transition: 150ms ease;
}

/*  Breakpointy (mobile-first):
    sm:  640px
    md:  768px
    lg: 1024px
    xl: 1280px
*/

/* --- Inline SVG icon sizing --- */
.icon-xs {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    flex-shrink: 0;
}

.icon-sm {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    flex-shrink: 0;
}

.icon-md {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    flex-shrink: 0;
}

.icon-lg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
    flex-shrink: 0;
}

/* --- Ciemny motyw — automatyczne wykrywanie --- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #4a90f5;
        --color-primary-dark: #2d78f4;
        --color-primary-light: #1e3a5f;
        --color-primary-border: rgba(74, 144, 245, 0.3);
        --gradient-primary: linear-gradient(135deg, #4a90f5, #2d78f4);
        --gradient-primary-hover: linear-gradient(135deg, #3b82f6, #1d4ed8);
        --color-secondary: #34d399;
        --color-secondary-dark: #10b981;
        --color-secondary-light: rgba(5, 150, 105, 0.15);
        --color-tertiary: #f87171;
        --color-tertiary-dark: #ef4444;
        --color-tertiary-light: rgba(220, 38, 38, 0.12);
        --color-bg: #111110;
        --color-surface: #1c1c1a;
        --color-surface-raised: #272725;
        --color-text: #f5f5f3;
        --color-text-muted: #a8a8a5;
        --color-text-subtle: #737370;
        --color-border: #363634;
        --color-border-hover: #454543;
        --color-cart: #4a90f5;
        --color-cart-dark: #2d78f4;
        --color-danger: #f87171;
        --color-danger-light: #2a1515;
        --color-success: #4ade80;
        --color-success-light: #152a15;
        --color-success-text: #6ee7b7;
        --color-success-bg: rgba(5, 150, 105, 0.15);
        --color-success-border: rgba(21, 128, 61, 0.3);
        --color-danger-text: #f87171;
        --color-danger-bg: rgba(220, 38, 38, 0.12);
        --color-danger-border: rgba(239, 68, 68, 0.25);
        --color-error: #f87171;
        --color-warning: #fbbf24;
        --color-warning-text: #fcd34d;
        --color-warning-bg: rgba(180, 83, 9, 0.12);
        --color-warning-border: rgba(180, 83, 9, 0.3);
        --color-score-green: #6ee7b7;
        --color-score-orange: #fb923c;
        --color-score-yellow: #fbbf24;
        --color-score-gray: #94a3b8;
        --color-star: #fbbf24;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.25);
        --shadow-focus: 0 0 0 3px rgba(74, 144, 245, 0.2);
    }
}

/* --- Ręczny przełącznik motywu (data-theme na <html>) --- */
[data-theme="light"] {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-primary-border: rgba(37, 99, 235, 0.3);
    --gradient-primary: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --gradient-primary-hover: linear-gradient(135deg, #2563eb, #1e3a8a);
    --color-secondary: #059669;
    --color-secondary-dark: #047857;
    --color-secondary-light: #ecfdf5;
    --color-tertiary: #dc2626;
    --color-tertiary-dark: #b91c1c;
    --color-tertiary-light: #fef2f2;
    --color-bg: #f5f5f2;
    --color-surface: #ffffff;
    --color-surface-raised: #f5f5f3;
    --color-text: #111110;
    --color-text-muted: #6b6b68;
    --color-text-subtle: #9b9b98;
    --color-border: #e8e8e5;
    --color-border-hover: #d4d4d1;
    --color-cart: #2563eb;
    --color-cart-dark: #1d4ed8;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-success: #16a34a;
    --color-success-light: #f0fdf4;
    --color-success-text: #059669;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-danger-text: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-error: #ef4444;
    --color-warning: #d97706;
    --color-warning-text: #b45309;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;
    --color-score-green: #059669;
    --color-score-orange: #ea580c;
    --color-score-yellow: #d97706;
    --color-score-gray: #64748b;
    --color-star: #f59e0b;
    --shadow-sm: 0 1px 3px rgba(17, 17, 16, 0.08), 0 1px 2px rgba(17, 17, 16, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(17, 17, 16, 0.10), 0 2px 4px -2px rgba(17, 17, 16, 0.06);
    --shadow-lg: 0 12px 24px -4px rgba(17, 17, 16, 0.12), 0 4px 8px -2px rgba(17, 17, 16, 0.06);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[data-theme="dark"] {
    --color-primary: #4a90f5;
    --color-primary-dark: #2d78f4;
    --color-primary-light: #1e3a5f;
    --color-primary-border: rgba(74, 144, 245, 0.3);
    --gradient-primary: linear-gradient(135deg, #4a90f5, #2d78f4);
    --gradient-primary-hover: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --color-secondary: #34d399;
    --color-secondary-dark: #10b981;
    --color-secondary-light: rgba(5, 150, 105, 0.15);
    --color-tertiary: #f87171;
    --color-tertiary-dark: #ef4444;
    --color-tertiary-light: rgba(220, 38, 38, 0.12);
    --color-bg: #111110;
    --color-surface: #1c1c1a;
    --color-surface-raised: #272725;
    --color-text: #f5f5f3;
    --color-text-muted: #a8a8a5;
    --color-text-subtle: #737370;
    --color-border: #363634;
    --color-border-hover: #454543;
    --color-cart: #4a90f5;
    --color-cart-dark: #2d78f4;
    --color-danger: #f87171;
    --color-danger-light: #2a1515;
    --color-success: #4ade80;
    --color-success-light: #152a15;
    --color-success-text: #6ee7b7;
    --color-success-bg: rgba(5, 150, 105, 0.15);
    --color-success-border: rgba(21, 128, 61, 0.3);
    --color-danger-text: #f87171;
    --color-danger-bg: rgba(220, 38, 38, 0.12);
    --color-danger-border: rgba(239, 68, 68, 0.25);
    --color-error: #f87171;
    --color-warning: #fbbf24;
    --color-warning-text: #fcd34d;
    --color-warning-bg: rgba(180, 83, 9, 0.12);
    --color-warning-border: rgba(180, 83, 9, 0.3);
    --color-score-green: #6ee7b7;
    --color-score-orange: #fb923c;
    --color-score-yellow: #fbbf24;
    --color-score-gray: #94a3b8;
    --color-star: #fbbf24;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.25);
    --shadow-focus: 0 0 0 3px rgba(74, 144, 245, 0.2);
}

/* --- Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scrollbar-gutter: stable;
}

/* --- Typografia i baza --- */
body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

/* --- Typografia nagłówków --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

/* --- Layout --- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 4rem;
}

.site-header__left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--color-text);
    transition: opacity var(--transition);
}

.site-header__brand:hover {
    opacity: 0.85;
    color: var(--color-text);
}

.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.brand-text {
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1;
}

.brand-text strong {
    font-weight: 700;
}

.site-header__greeting {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 4rem;
}

/* Aktywna porada w pasku tytułu — pacjent (klikalny) + zegar */
.site-header__visit {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    margin-left: 4rem;
}

.site-header__visit-patient {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}

.site-header__visit-patient svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.site-header__visit-patient:hover {
    color: var(--color-primary);
    background: var(--color-bg);
}

.site-header__visit-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.site-header__visit-timer svg {
    flex-shrink: 0;
}

.site-header__visit-timer .sub-nav__visit-timer {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    color: var(--color-text-muted);
}

.site-header__visit-end {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
}

.site-header__visit-end svg {
    flex-shrink: 0;
}

.site-header__visit-end:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-danger-bg);
}

.site-main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 2rem;
}

/* --- Page breadcrumb header --- */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin: -1rem 0 1rem;
    padding-top: 1.75rem;
    font-size: 1.25rem;
    background: var(--color-bg);
    position: sticky;
    top: 4rem;
    z-index: 89;
}

.page-breadcrumb::after {
    content: "";
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: linear-gradient(to bottom, var(--color-bg), transparent);
    pointer-events: none;
}

.page-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}

.page-breadcrumb__link:hover {
    color: var(--color-primary);
}

.page-breadcrumb__sep {
    color: var(--color-text-tertiary);
    font-size: 1rem;
}

.page-breadcrumb__current {
    font-weight: 700;
    color: var(--color-text);
}

/* --- Reusable panel components --- */
.panel-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.panel-filters__search {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.panel-filters__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.panel-filters__input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
}

.panel-filters__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.panel-filters__group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-filters__select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.panel-filters__select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.panel-filters__dates {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.panel-filters__date {
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-family: inherit;
}

.panel-filters__date:focus {
    outline: none;
    border-color: var(--color-primary);
}

.panel-filters__date-sep {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.panel-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 1rem 1.25rem;
}

.panel-card--empty {
    padding: 2rem 1.25rem;
    text-align: center;
}

.panel-loader {
    text-align: center;
    padding: 1.5rem;
}

@media (max-width: 640px) {
    .panel-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-filters__group {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-filters__select {
        width: 100%;
    }

    .panel-filters__dates {
        flex-direction: column;
    }

    .panel-filters__date {
        width: 100%;
    }
}

.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    border-top: 1px solid var(--color-border);
    transition: border-color 0.3s ease;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}

/* --- Facility switcher (header nav) --- */
.site-header__facility {
    position: relative;
}

.facility-label,
.facility-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: none;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
}

.facility-switcher {
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.facility-switcher:hover {
    background: var(--color-bg);
}

.facility-label__icon,
.facility-switcher__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-primary);
}

.facility-label__name,
.facility-switcher__name {
    max-width: clamp(7rem, 16vw, 16rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facility-switcher__chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.5;
}

.facility-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.375rem;
    z-index: 1100;
}

[data-theme="dark"] .facility-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.facility-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: none;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.facility-dropdown__item:hover {
    background: var(--color-bg);
}

.facility-dropdown__item--active {
    color: var(--color-primary);
    font-weight: 600;
}

.facility-dropdown__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facility-dropdown__check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .facility-switcher__name,
    .facility-label__name {
        max-width: 10rem;
    }
}

@media (max-width: 640px) {
    .site-header__facility {
        display: none;
    }
}

/* --- Pasek podstron (Sub-navigation tabs) --- */
.sub-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: sticky;
    top: 4rem;
    z-index: 900;
}

.sub-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 3rem;
}

.sub-nav__nav-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sub-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0;
    border-top: 1px solid var(--color-border);
}

.sub-nav__hamburger {
    display: none;
}

.sub-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition);
}

.sub-nav__tab:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .sub-nav__tab:hover {
    background: rgba(96, 165, 250, 0.1);
    color: #fff;
}

.sub-nav__tab--active {
    background: var(--gradient-primary);
    color: #ffffff;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.sub-nav__tab--active:hover {
    background: var(--gradient-primary-hover);
    color: #ffffff;
}

.sub-nav__tab--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.sub-nav__tab svg {
    flex-shrink: 0;
}

/* Dropdown użytkownika w nagłówku */
.nav-user-menu-wrapper {
    position: relative;
}

.nav-user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    transition: background var(--transition);
}

.nav-user-menu-toggle:hover {
    background: var(--color-bg);
}

.nav-user-menu-toggle__info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.nav-user-menu-toggle__name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

.nav-user-menu-toggle__role {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    padding: 0.5rem 0;
}

[data-theme="dark"] .nav-user-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nav-user-dropdown__divider {
    height: 1px;
    background: var(--color-border);
    margin: 0.25rem 0;
}

.nav-user-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background var(--transition);
}

.nav-user-dropdown__item:hover {
    background: var(--color-bg);
}

.nav-user-dropdown__item--danger {
    color: var(--color-danger-text);
}

.nav-user-dropdown__item--danger:hover {
    background: var(--color-danger-bg);
}

.nav-doc-index--inline {
    cursor: default;
}

.nav-doc-index--inline:hover {
    background: transparent;
}

/* Smartfon poziomo / tablet (641–900px) — hamburger nawigacji, akcje w osobnym wierszu */
@media (max-width: 900px) {
    .sub-nav__inner {
        padding: 0 1rem;
        gap: 0.375rem;
    }

    .sub-nav__spacer {
        display: none;
    }

    .sub-nav__actions {
        justify-content: flex-end;
    }

    .sub-nav__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--transition);
    }

    .sub-nav__hamburger:hover {
        background: var(--color-bg);
        color: var(--color-text);
    }

    .sub-nav__nav-group {
        display: none;
        width: 100%;
        order: 10;
        flex-direction: column;
        gap: 0.25rem;
        padding-top: 0.375rem;
        border-top: 1px solid var(--color-border);
    }

    .sub-nav__nav-group--open {
        display: flex;
    }

    .sub-nav__nav-group .sub-nav__tab {
        padding: 0.625rem 1rem;
        font-size: 0.9375rem;
        border-radius: var(--radius);
        width: 100%;
    }

}

/* Desktop — akcje w tym samym wierszu */
@media (min-width: 901px) {
    .sub-nav__actions {
        width: auto;
        border-top: none;
        padding: 0;
        margin-left: auto;
    }
}

/* Smartfon pionowo (<=640px) — taby widoczne, akcje icon-only */
@media (max-width: 640px) {
    /* Taby nawigacji widoczne (nie w hamburgerze) */
    .sub-nav__hamburger {
        display: none;
    }

    .sub-nav__nav-group {
        display: flex;
        flex-direction: row;
        width: auto;
        order: 0;
        border-top: none;
        padding-top: 0;
        gap: 0.125rem;
        overflow-x: auto;
    }

    .sub-nav__nav-group .sub-nav__tab {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        width: auto;
    }

    .sub-nav__inner {
        padding: 0.375rem 0.5rem;
        gap: 0.25rem;
    }

    /* Akcje w osobnym wierszu */
    .sub-nav__actions {
        flex-wrap: wrap;
        order: 5;
    }

    .sub-nav__actions .sub-nav__visit-info {
        width: 100%;
        justify-content: center;
    }

    /* Przyciski wizyta/wybrane — tylko ikona */
    .sub-nav__tab-label {
        display: none;
    }

    .sub-nav__tab--visit,
    .sub-nav__tab--visit-end {
        padding: 0.375rem;
    }
}

/* Przełącznik motywu w menu — ikony sun/moon */
.theme-toggle-menu .icon-sun {
    display: none;
}

.theme-toggle-menu .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle-menu .icon-sun {
    display: block;
    color: #facc15;
}

[data-theme="dark"] .theme-toggle-menu .icon-moon {
    display: none;
}

/* --- HTMX --- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* --- Nawigacja --- */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Button system
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform 50ms ease;
}

.btn:active {
    transform: scale(0.98);
}

/* Primary — niebieski z wypełnieniem */
.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--gradient-primary-hover);
    color: #ffffff;
}

/* Secondary — niebieski tekst i obwódka */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(96, 165, 250, 0.1);
}

/* Danger — czerwony z wypełnieniem */
.btn-danger {
    background: var(--color-danger-text);
    color: #ffffff;
    border-color: transparent;
}

.btn-danger:hover {
    filter: brightness(0.9);
    color: #ffffff;
}

/* ==========================================================================
   /Button system
   ========================================================================== */

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition), transform 50ms ease;
}

.nav-btn:active {
    transform: scale(0.98);
}

.nav-btn i {
    width: 20px;
    height: 20px;
}

.nav-btn--primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.nav-btn--primary:hover {
    background-color: var(--color-primary-dark);
    color: #ffffff;
}

.nav-btn--danger {
    background-color: transparent;
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-text);
}

.nav-btn--danger:hover {
    background-color: var(--color-danger-bg);
}

/* --- DOC Index badge w nagłówku (centered) --- */
.nav-doc-index {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.875rem;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

[data-theme="dark"] .nav-doc-index {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.nav-doc-index__link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
}

.nav-doc-index__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

[data-theme="dark"] .nav-doc-index__label {
    color: var(--color-text-muted);
}

.nav-doc-index__value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
}

[data-theme="dark"] .nav-doc-index__value {
    color: var(--color-primary);
}

.nav-doc-index__value--green  { color: var(--color-score-green); }
.nav-doc-index__value--blue   { color: var(--color-primary); }
.nav-doc-index__value--orange { color: var(--color-score-orange); }
.nav-doc-index__value--yellow { color: var(--color-score-yellow); }
.nav-doc-index__value--red    { color: var(--color-danger-text); }
.nav-doc-index__value--gray   { color: var(--color-score-gray); }

@media (max-width: 768px) {
    .nav-doc-index__label {
        display: none;
    }
    .nav-doc-index {
        padding: 0.25rem 0.5rem;
    }
    .nav-doc-index--inline .nav-doc-index__label {
        display: inline;
    }
}

@media (max-width: 768px) {
    .site-header__greeting,
    .site-header__visit {
        display: none;
    }
}

@media (max-width: 600px) {
    .site-header__inner {
        grid-template-columns: auto auto 1fr;
        gap: 0.5rem;
    }
}

/* --- Avatar użytkownika --- */
.nav-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

a.nav-user-avatar {
    text-decoration: none;
    color: #ffffff;
}

.nav-user-avatar--green  { background: var(--color-score-green); }
.nav-user-avatar--blue   { background: var(--color-primary); }
.nav-user-avatar--orange { background: var(--color-score-orange); }
.nav-user-avatar--yellow { background: var(--color-score-yellow); }
.nav-user-avatar--red    { background: var(--color-danger-text); }
.nav-user-avatar--gray   { background: var(--color-score-gray); }

@media (max-width: 640px) {
    .nav-user-menu-toggle__info {
        display: none;
    }
}

.nav-form {
    display: inline;
    margin: 0;
}

/* --- Strona powitalna (Welcome View) --- */
.welcome-section {
    text-align: center;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text);
    line-height: 1.2;
}

@media (min-width: 640px) {
    .welcome-title {
        font-size: 2.5rem;
    }
}

.welcome-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

@media (min-width: 640px) {
    .welcome-desc {
        font-size: 1.125rem;
    }
}

.welcome-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Pozwala zawijać na bardzo małych / zzoomowanych ekranach */
}

/* Dodatkowa klasa zwiększająca znacznie klikalność przycisku zachęcającego */
.nav-btn--large {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    border-radius: 12px;
}

/* --- Stopka --- */
.site-footer__links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.site-footer__links a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.site-footer__links a:hover {
    color: var(--color-primary);
}

/* --- Modal potwierdzenia (hx-confirm) --- */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 150ms ease;
}

.confirm-modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl, 18px);
    padding: 2rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: slideUp 200ms ease;
}

.confirm-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-warning-bg, #fffbeb);
    color: var(--color-warning-text, #d97706);
    margin-bottom: 1rem;
}

.confirm-modal__text {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.confirm-modal__actions {
    display: flex;
    gap: 0.75rem;
}

.confirm-modal__btn {
    flex: 1;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition);
}

.confirm-modal__btn--cancel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.confirm-modal__btn--cancel:hover {
    background: var(--color-border);
}

.confirm-modal__btn--confirm {
    background: var(--color-error);
    border: none;
    color: #fff;
}

.confirm-modal__btn--confirm:hover {
    filter: brightness(1.1);
}

/* --- Modale --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 200ms ease;
    backdrop-filter: blur(2px);
}

.modal-backdrop--hidden {
    display: none;
}

.modal-body__text {
    margin: 0;
    color: var(--color-text-muted);
}

.modal-box {
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    max-width: 950px;
    max-height: 90vh;
    /* Zapobiega wychodzeniu poza ekran */
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    animation: slideUp 200ms ease;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.modal-header__title-block {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-header__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--color-surface-raised);
    color: var(--color-primary);
    flex-shrink: 0;
}

.modal-header__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.modal-header__icon--warning {
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-text, #d97706);
}

.modal-header__icon--packages {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.modal-header__icon--calc {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.modal-header__icon--fav {
    background: var(--color-danger-bg);
    color: var(--color-error);
}

.modal-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}

.modal-close i {
    width: 24px;
    height: 24px;
}

.modal-close:hover {
    color: var(--color-error);
    /* Czerwony przy najechaniu zamykania */
}

.modal-header__tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-print {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}

.modal-print:hover {
    color: var(--color-text);
}

.modal-search {
    padding: 0.75rem 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    background: var(--color-surface);
    color: var(--color-text);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-footer .btn {
    min-width: 10rem;
    flex: 1;
}

.modal-footer__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.modal-footer__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.modal-body p {
    margin-bottom: 0.25rem;
}

/* Listy w treści dokumentów (regulamin/polityka) — wcięcie punktów pod tekstem */
.modal-body ul,
.modal-body ol {
    padding-inline-start: 1.75rem;
    margin: 0.25rem 0 0.75rem;
}

.modal-body br+br {
    display: none;
}

/* ── WIP modal ── */
.modal-body--wip {
    text-align: center;
    padding: 2rem 1.5rem;
}

.wip-icon {
    width: 48px;
    height: 48px;
    color: var(--color-wip, #7c3aed);
    margin: 0 auto 1rem;
}

.wip-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.wip-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Dialog wyboru folderu ulubionych --- */
.folder-dialog {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
    max-width: 24rem;
    width: 100%;
    margin: 0 1rem;
    padding: 1.5rem;
    animation: slideUp 200ms ease;
}

.folder-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.folder-dialog__title {
    font-size: 1.125rem;
    font-weight: 600;
}

.folder-dialog__new {
    margin-bottom: 1rem;
}

.folder-dialog__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem;
    border-radius: 0.75rem;
    border: 2px dashed var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition);
}

.folder-dialog__new-btn:hover {
    background: rgba(37, 99, 235, 0.06);
}

[data-theme="dark"] .folder-dialog__new-btn:hover {
    background: rgba(99, 102, 241, 0.12);
}

.folder-dialog__new-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.folder-dialog__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition);
}

.folder-dialog__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.folder-dialog__create-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition);
}

.folder-dialog__create-btn:hover {
    background: var(--color-primary-dark);
}

.folder-dialog__cancel-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--transition);
}

.folder-dialog__cancel-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .folder-dialog__cancel-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.folder-dialog__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.folder-dialog__folder {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background-color var(--transition);
}

.folder-dialog__folder:hover {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .folder-dialog__folder:hover {
    background: rgba(99, 102, 241, 0.1);
}

.folder-dialog__folder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--color-primary);
    flex-shrink: 0;
}

.folder-dialog__folder-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
    stroke: #fff;
}

.folder-dialog__folder-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.folder-dialog__folder-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.folder-dialog__folder-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.folder-dialog__empty {
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.folder-dialog__footer {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.folder-dialog__no-folder-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 2px dashed var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.folder-dialog__no-folder-btn:hover {
    border-color: var(--color-danger-border);
    color: var(--color-error);
    background: var(--color-danger-bg);
}

[data-theme="dark"] .folder-dialog__no-folder-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

.folder-dialog__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.folder-dialog__actions .folder-dialog__cancel-btn,
.folder-dialog__actions .folder-dialog__create-btn {
    flex: 1;
    padding: 0.625rem 1rem;
}

.folder-dialog__input--full {
    width: 100%;
}

.folder-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.folder-create-form__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

/* --- Strona Ulubione (Favorites) --- */
.favorites-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.favorites-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.favorites-header__subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.favorites-header__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: opacity var(--transition), box-shadow var(--transition);
}

.favorites-header__btn:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
}

/* --- Siatka folderów --- */
.folder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .folder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .folder-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .folder-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Karta folderu --- */
.folder-card {
    background: var(--color-surface);
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow var(--transition);
}

[data-theme="dark"] .folder-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.folder-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .folder-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.folder-card__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}

.folder-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--color-surface-raised);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.folder-card:hover .folder-card__icon {
    transform: scale(1.08);
}

.folder-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    stroke: var(--color-text-muted);
}

.folder-card__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.folder-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition);
}

.folder-card:hover .folder-card__name {
    color: var(--color-primary);
}

.folder-card__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.folder-card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.25rem 1rem;
}

.folder-card__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition);
}

.folder-card__action-btn:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
    background: rgba(37, 99, 235, 0.06);
}

[data-theme="dark"] .folder-card__action-btn:hover {
    background: rgba(96, 165, 250, 0.1);
}

.folder-card__action-btn--primary {
    flex: 1;
    width: auto;
    padding: 0.35rem 0.75rem;
    gap: 0.3rem;
    background: var(--color-primary);
    border-color: transparent;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.folder-card__action-btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: transparent;
    color: #fff;
}

.folder-card__action-btn--danger {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.folder-card__action-btn--danger:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
    background: rgba(37, 99, 235, 0.06);
}

[data-theme="dark"] .folder-card__action-btn--danger:hover {
    background: rgba(96, 165, 250, 0.1);
}

/* --- Inline rename --- */
.folder-card__rename {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
}

.folder-card__rename-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.folder-card__rename-save,
.folder-card__rename-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition);
}

.folder-card__rename-save {
    background: var(--color-primary);
    color: #fff;
}

.folder-card__rename-save:hover {
    background: var(--color-primary-dark);
}

.folder-card__rename-cancel {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.folder-card__rename-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* --- Stan pusty --- */
.folder-empty {
    text-align: center;
    padding: 4rem 1rem;
}

.folder-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background: var(--color-bg);
    margin: 0 auto 1rem;
}

.folder-empty__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-text-muted);
    opacity: 0.4;
}

.folder-empty__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.folder-empty__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* --- Folder detail --- */
.folder-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.folder-detail__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.folder-detail__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    color: var(--color-text-muted);
    transition: background-color var(--transition), color var(--transition);
}

.folder-detail__back:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.folder-detail__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--color-primary);
    flex-shrink: 0;
}

.folder-detail__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    stroke: #fff;
}

.folder-detail__info {
    flex: 1;
    min-width: 0;
}

.folder-detail__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.folder-detail__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.folder-detail__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.folder-detail__rename {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.folder-detail__rename-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-text);
}

.folder-detail__rename-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* --- Lista materiałów w folderze --- */
.folder-materials {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.folder-material {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color var(--transition);
}

.folder-material:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.folder-material:hover {
    background: var(--color-bg);
}

.folder-material__thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg);
}

.folder-material__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.folder-material__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-material__thumb--placeholder svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    opacity: 0.4;
}

.folder-material__info {
    flex: 1;
    min-width: 0;
}

.folder-material__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-material__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.result-tag--sm {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

.folder-material__actions {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.folder-material:hover .folder-material__actions {
    opacity: 1;
}

.folder-material__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.folder-material__remove:hover {
    color: var(--color-error);
    background: var(--color-danger-bg);
}

/* Na mobile — zawsze widoczny przycisk usuwania */
@media (max-width: 640px) {
    .folder-material__actions {
        opacity: 1;
    }
}

/* --- Kompaktowe oceny na liście materiałów --- */
.folder-material__ratings {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: auto;
}

.mini-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.mini-star {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-text-muted);
    opacity: 0.35;
}

.mini-star--filled {
    color: var(--color-star);
    opacity: 1;
}

.mini-star--user {
    color: var(--color-primary);
}

.mini-patients {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
}

.mini-patient-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-text-muted);
}

.mini-patient-count {
    min-width: 0.75rem;
    text-align: center;
}

.mini-patient-count--pos {
    color: var(--color-cart);
}

.mini-patient-count--neg {
    color: var(--color-danger-text);
}

@media (max-width: 640px) {
    .folder-material__ratings {
        display: none;
    }
}

/* ── Favorites Modal — two-column layout ── */
.fav-modal {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 65vh;
}

@media (min-width: 768px) {
    .fav-modal {
        flex-direction: row;
        gap: 0;
    }
}

.fav-modal__sidebar {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-border);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .fav-modal__sidebar {
        width: 260px;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }
}

.fav-modal__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.fav-modal__sidebar-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.fav-modal__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.fav-modal__new-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.fav-modal__folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fav-modal__folder-item {
    border-bottom: 1px solid var(--color-border);
}

.fav-modal__folder-item--active {
    background: var(--color-primary-light);
}

.fav-modal__folder-item--active .fav-modal__folder-btn {
    color: var(--color-primary);
    font-weight: 600;
}

.fav-modal__folder-item--dragover {
    border-top: 2px solid var(--color-primary);
}

.fav-modal__folder-item--dragging {
    opacity: 0.4;
}

.fav-modal__folder-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.fav-modal__folder-btn:hover {
    background: var(--color-bg);
}

.fav-modal__folder-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.fav-modal__folder-item--active .fav-modal__folder-icon {
    color: var(--color-primary);
}

.fav-modal__folder-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-modal__folder-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.fav-modal__empty-folders {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.fav-modal__new-folder {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.fav-modal__new-form {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fav-modal__new-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.8125rem;
}

.fav-modal__new-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.fav-modal__new-submit,
.fav-modal__new-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.fav-modal__new-submit:hover { color: var(--color-primary); }
.fav-modal__new-cancel:hover { color: var(--color-error); }

.fav-modal__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.fav-modal__content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.fav-modal__content-title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.fav-modal__content-count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.fav-modal__content-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fav-modal__empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

.fav-modal__empty-content svg {
    opacity: 0.4;
    margin-bottom: 1rem;
}

.fav-modal__empty-content p {
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 0.25rem;
}

.fav-modal__empty-content span {
    font-size: 0.8125rem;
}

/* ── Favorites Drawer (legacy) ── */
.fav-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fav-drawer-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.fav-drawer-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.fav-drawer-create-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.fav-drawer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.fav-drawer-back-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.fav-drawer-create-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fav-drawer-create-form__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}

.fav-drawer-create-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.fav-drawer-create-form__submit,
.fav-drawer-create-form__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
}

.fav-drawer-create-form__submit {
    background: var(--color-primary);
    color: #fff;
}

.fav-drawer-create-form__submit:hover {
    background: var(--color-primary-dark);
}

.fav-drawer-create-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fav-drawer-create-form__cancel {
    background: transparent;
    color: var(--color-text-secondary);
}

.fav-drawer-create-form__cancel:hover {
    background: var(--color-surface-hover);
}

.fav-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fav-drawer-folder {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    transition: background 150ms;
}

.fav-drawer-folder:hover {
    background: var(--color-surface-hover);
}

.fav-drawer-folder__drag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    color: var(--color-text-tertiary);
    cursor: grab;
    opacity: 0;
    transition: opacity 150ms;
}

.fav-drawer-folder:hover .fav-drawer-folder__drag {
    opacity: 1;
}

.fav-drawer-folder__drag:active {
    cursor: grabbing;
}

.fav-drawer-folder--dragging {
    opacity: 0.4;
}

.fav-drawer-folder--dragover {
    border-top: 2px solid var(--color-primary);
}

.fav-drawer-folder__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.fav-drawer-folder__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex-shrink: 0;
}

.fav-drawer-folder__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.fav-drawer-folder__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.fav-drawer-folder__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-drawer-folder__count {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.fav-drawer-folder__arrow {
    width: 1rem;
    height: 1rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.fav-drawer-folder__actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-right: 0.75rem;
    flex-shrink: 0;
}

.fav-drawer-folder__actions--hover {
    opacity: 0;
    transition: opacity 150ms;
}

.fav-drawer-folder:hover .fav-drawer-folder__actions--hover {
    opacity: 1;
}

.fav-drawer-folder__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.fav-drawer-folder__action:hover {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.fav-drawer-folder__action--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.fav-drawer-folder__rename--visible {
    display: flex;
}

.fav-drawer-folder__rename {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.5rem 1.25rem;
}

.fav-drawer-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fav-drawer-detail-header__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.fav-drawer-detail-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex-shrink: 0;
}

.fav-drawer-detail-header__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.fav-drawer-detail-header__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.fav-drawer-detail-header__count {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.fav-drawer-detail-header__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.fav-drawer-materials {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fav-drawer-material {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    transition: background 150ms;
}

.fav-drawer-material:hover {
    background: var(--color-surface-hover);
}

.fav-drawer-material__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.fav-drawer-material__thumb {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
}

.fav-drawer-material__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-raised);
    color: var(--color-text-tertiary);
}

.fav-drawer-material__thumb--placeholder svg {
    width: 1.5rem;
    height: 1.5rem;
}

.fav-drawer-material__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.fav-drawer-material__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-drawer-material__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fav-drawer-material__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.fav-drawer-material__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms, color 150ms;
}

.fav-drawer-material__remove:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.fav-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.fav-drawer-empty__icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: var(--color-text-tertiary);
}

.fav-drawer-empty__icon svg {
    width: 100%;
    height: 100%;
}

.fav-drawer-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.fav-drawer-empty__desc {
    font-size: 0.85rem;
    margin: 0;
}

/* --- Animacje --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Formularze i Autoryzacja --- */
.auth-container {
    max-width: 400px;
    margin: 4rem auto;
    background: var(--color-surface);
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.auth-desc {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    transition: border-color var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.error-text {
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.form-errors {
    background-color: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1.25rem;
}

.field-errors {
    list-style: none;
    margin: 0.25rem 0 0 0;
    padding: 0;
    color: var(--color-error);
    font-size: 0.875rem;
}

.w-100 {
    width: 100%;
}

.mt-2 {
    margin-top: 1.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.auth-form-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.auth-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.auth-link:hover {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Strona wyszukiwania
   ========================================================================== */

.site-main:has(.search-section) {
    max-width: 1440px;
}

.search-section {
    width: 100%;
    padding-top: 0;
    transition: padding-top 0.4s ease;
}

.search-section--home {
    padding-top: 0;
}

/* --- Herobox: tło + wyszukiwarka + filtry kategorii + selekty --- */
.search-herobox {
    max-width: 100%;
    margin-inline: auto;
    transition: max-width 0.4s ease;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
}

[data-theme="dark"] .search-herobox {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Search bar row — input + optional ICD-10 button */
.search-bar-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.search-bar-row .search-bar {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* Filters row — dropdowns + shortcut buttons */
.search-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.125rem;
}

.search-selects-group {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.search-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.search-shortcut-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.search-shortcut-btn svg {
    flex-shrink: 0;
}

.search-shortcut-btn--icd {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

.search-shortcut-btn--icd:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.search-shortcut-btn--calc {
    background: var(--color-warning-bg);
    border-color: rgba(180, 83, 9, 0.25);
    color: var(--color-warning-text);
}

.search-shortcut-btn--calc:hover {
    border-color: var(--color-warning-text);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.search-shortcut-btn--fav {
    background: var(--color-danger-bg);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--color-error);
}

.search-shortcut-btn--fav:hover {
    border-color: var(--color-error);
    background: var(--color-danger-bg);
    color: var(--color-error);
}

.search-filters-separator {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    margin: 0.125rem 0.25rem;
}

.search-herobox .search-input-wrapper {
    border-color: var(--color-border);
}

[data-theme="dark"] .search-herobox .search-input-wrapper {
    border-color: #475569;
    background: var(--color-bg);
}

/* --- Category pills --- */
.category-pills {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.category-pills::-webkit-scrollbar {
    display: none;
}

/* Secondary — niebieski tekst i obwódka */
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.category-pill:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .category-pill:hover {
    background: rgba(96, 165, 250, 0.1);
}

.category-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

/* Primary — niebieski fill */
.category-pill--active {
    background: var(--color-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.category-pill--active:hover {
    background: var(--color-primary-dark);
    color: #fff;
    border-color: transparent;
}

.category-pill--active .category-pill__count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

/* "Wszystkie" aktywne = brak filtru — primary jak pozostałe */
.category-pill--all.category-pill--active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

/* --- Search selects (dropdowny) --- */
.search-selects {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .search-selects {
        grid-template-columns: 1fr;
    }
}

.search-select-wrapper {
    position: relative;
}

.search-select {
    appearance: none;
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.search-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.search-select:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .search-select {
    border-color: var(--color-border);
    background: rgba(26, 24, 22, 0.3);
}

[data-theme="dark"] .search-select:hover {
    background: rgba(26, 24, 22, 0.5);
}

[data-theme="dark"] .search-select:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.search-select__chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* --- ICD-10 multi-select --- */
.icd10-multi {
    position: relative;
    flex: 1 1 10rem;
    min-width: 0;
}

.icd10-multi__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.icd10-multi__trigger .search-select__chevron {
    position: static;
    transform: none;
    flex-shrink: 0;
}

.icd10-multi__chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.icd10-multi__dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    min-width: 20rem;
    max-height: 24rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.icd10-multi__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.icd10-multi__search-input {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
}

.icd10-multi__search-input:focus {
    border-color: var(--color-primary);
}

.icd10-multi__list {
    overflow-y: auto;
    flex: 1;
}

.icd10-multi__group-title {
    position: sticky;
    top: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.icd10-multi__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background var(--transition);
}

.icd10-multi__item:hover {
    background: var(--color-surface-raised);
}

.icd10-multi__item input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.icd10-multi__code {
    font-weight: 700;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #1d4ed8;
    flex-shrink: 0;
    min-width: 2.5rem;
}

[data-theme="dark"] .icd10-multi__code {
    color: #60a5fa;
}

.icd10-multi__name {
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icd10-multi__item--radio {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
}

.icd10-multi__item--selected {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.icd10-multi__item--selected .icd10-multi__name {
    font-weight: 600;
    color: var(--color-primary);
}

.icd10-multi__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.icd10-multi__clear {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-top: 1px solid var(--color-border);
    background: none;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: color var(--transition), background var(--transition);
}

.icd10-multi__clear:hover {
    color: var(--color-danger-text);
    background: var(--color-surface-raised);
}

.icd10-multi--fit {
    flex: 0 0 auto;
}

.icd10-multi__dropdown--compact {
    min-width: 14rem;
    max-height: 18rem;
}

/* Responsywność */
@media (max-width: 640px) {
    .search-herobox {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }

    .search-filters-row {
        gap: 0.375rem;
    }

    .search-selects-group {
        flex-wrap: wrap;
    }

    .search-shortcut-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
}

.search-title {
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

@media (min-width: 640px) {
    .search-title {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
}

/* --- Pasek wyszukiwania --- */
.search-bar {
    margin: 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    padding: 0.25rem 0.75rem;
    min-height: 2.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* --- Search chips (inside input) --- */
#search-chips {
    display: contents;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: var(--radius-pill, 9999px);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.search-chip--icd10 {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.search-chip--specialty {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.search-chip--cat {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.search-chip--age {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.search-chip--tag {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .search-chip--icd10 {
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--color-primary-border);
    color: #93c5fd;
}

[data-theme="dark"] .search-chip--specialty {
    background: rgba(22, 163, 74, 0.15);
    border-color: rgba(22, 163, 74, 0.3);
    color: #86efac;
}

[data-theme="dark"] .search-chip--cat {
    background: rgba(109, 40, 217, 0.15);
    border-color: rgba(109, 40, 217, 0.3);
    color: #c4b5fd;
}

[data-theme="dark"] .search-chip--age {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.3);
    color: #fcd34d;
}

.search-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    transition: opacity var(--transition), background var(--transition);
}

.search-chip__x:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .search-chip__x:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Search suggest dropdown --- */
.search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 20rem;
    overflow-y: auto;
}

.search-bar {
    position: relative;
}

.suggest-group {
    padding: 0.25rem 0;
}

.suggest-group + .suggest-group {
    border-top: 1px solid var(--color-border);
}

.suggest-group__label {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.suggest-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.suggest-item:hover,
.suggest-item--active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.suggest-item--material {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggest-item__icon {
    flex-shrink: 0;
    opacity: 0.5;
}

[data-theme="dark"] .search-input-wrapper {
    background: var(--color-bg);
    border-color: #475569;
}

.search-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[data-theme="dark"] .search-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    margin-right: 0.5rem;
}

[data-theme="dark"] .search-icon {
    color: var(--color-primary);
}

.search-survey-btn {
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.8125rem;
    /* secondary style */
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.search-survey-btn:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .search-survey-btn:hover {
    background: rgba(96, 165, 250, 0.1);
}

.search-input {
    flex: 1 1 8rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
    padding: 0.25rem 0;
    outline: none;
    min-width: 8rem;
    line-height: 1.5;
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.25rem;
    border-radius: 0.375rem;
    border: none;
    background-color: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--transition), transform 50ms ease;
}

.search-submit:hover {
    background-color: var(--color-primary-dark);
}

.search-submit:active {
    transform: scale(0.95);
}

.search-submit i {
    width: 16px;
    height: 16px;
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Spinner wyszukiwania --- */
.search-spinner {
    display: none;
    justify-content: center;
    padding: 3rem 0;
    color: var(--color-primary);
}

.search-spinner.htmx-request {
    display: flex;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-spinner__icon {
    width: 2rem;
    height: 2rem;
    animation: spin 0.7s linear infinite;
}

/* --- Strona startowa: polecane tagi --- */
.search-home-tags {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* --- Strona startowa: 3 kolumny --- */
/* ── Strona startowa — wiersze materiałów ── */
.search-home-rows {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    transition: max-width 0.4s ease;
}

@media (max-width: 900px) {
    .search-home-rows {
        gap: 1rem;
    }
}

.search-home-row {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.search-home-row__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-border);
}

.search-home-row__title .icon-sm {
    flex-shrink: 0;
    color: var(--color-primary);
}

.search-home-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.search-home-row__header .search-home-row__title {
    margin-bottom: 0;
}

.search-home-row__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .search-home-row__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .search-home-row__list {
        grid-template-columns: 1fr;
    }
}

.search-home-row__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
    white-space: nowrap;
}

.search-home-row__more:hover {
    color: var(--color-primary-dark);
}

.search-home-row__more svg {
    transition: transform var(--transition);
}

.search-home-row__more:hover svg {
    transform: translateX(3px);
}

/* --- Tagi / szybkie filtry --- */
.search-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.search-tags__label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-right: 0.25rem;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.search-tag:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
    background-color: var(--color-surface-raised);
}

.search-tag.tag-animate {
    animation: tag-bounce 0.3s ease-out both;
}

@keyframes tag-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}


.search-tag--active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.search-tag--active:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

.search-tag__icon {
    width: 14px;
    height: 14px;
}

/* --- Grid layout z sidebarem --- */

/* Formularz filtrów opakowuje sidebar — display:contents
   sprawia, że grid widzi <aside> jako bezpośrednie dziecko. */
#filter-form {
    display: contents;
}

.search-layout {
    width: 100%;
}

.search-main {
    min-width: 0;
}

/* --- Grupa filtrów --- */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.filter-group__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group__title i {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.filter-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.filter-group__clear {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    z-index: 1;
}

.filter-group__clear:hover {
    color: var(--color-danger, #dc2626);
    background: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
}

.filter-group__items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Checkbox filtra --- */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color var(--transition);
    user-select: none;
}

.filter-checkbox:hover {
    background-color: var(--color-bg);
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.filter-checkbox__label {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.3;
}

/* --- Rozwijana lista (specjalizacje secondary) --- */
.filter-expand {
    margin-top: 0.5rem;
}

.filter-expand__toggle {
    font-size: 0.8125rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.filter-expand__toggle:hover {
    text-decoration: underline;
}

.filter-expand__toggle::marker {
    content: '';
}

.filter-expand[open] .filter-expand__toggle {
    display: none;
}

.filter-expand__collapse {
    background: none;
    border: none;
    font-size: 0.8125rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    user-select: none;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.filter-expand__collapse:hover {
    text-decoration: underline;
}

.filter-expand__content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* --- Aktywne filtry (pasek pod herobox) --- */
.active-filters-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1rem;
    padding: 0.25rem 0 0.5rem;
}

.active-filters-bar[hidden] {
    display: none;
}

.active-filters-bar__label {
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 9999px;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.active-filter-chip:hover {
    opacity: 0.85;
}

/* Domyślny kolor chipa — neutralny */
.active-filter-chip {
    background-color: var(--color-surface-raised);
    color: var(--color-text-muted);
}

/* ICD-10 — kształt tagu jak na karcie materiału */
.active-filter-chip--icd10 {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
}

[data-theme="dark"] .active-filter-chip--icd10 {
    background-color: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border-color: var(--color-primary-border);
}

.active-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.active-filter-chip__remove:hover {
    opacity: 1;
}

.active-filters-bar__clear {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 0.25rem;
    transition: color var(--transition);
}

.active-filters-bar__clear:hover {
    color: var(--color-danger-text);
}

/* --- Pakiety materiałów NFZ --- */
.nfz-packages-bar {
    padding: 0.75rem 0;
}

.nfz-packages-bar__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.nfz-packages-bar__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.nfz-packages-bar__arrow svg {
    width: 1rem;
    height: 1rem;
}

.nfz-packages-bar__arrow:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.nfz-packages-bar__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.nfz-packages-bar__list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    padding-bottom: 0.5rem;
}

.nfz-packages-bar__list::-webkit-scrollbar {
    height: 6px;
}

.nfz-packages-bar__list::-webkit-scrollbar-track {
    background: transparent;
}

.nfz-packages-bar__list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.nfz-packages-bar__list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.nfz-packages-bar__list > .nfz-package-card {
    min-width: 22rem;
    max-width: 26rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* --- Package card --- */
.nfz-package-card {
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.nfz-package-card:hover {
    box-shadow: var(--shadow-md);
}

.nfz-package-card__body {
    padding: 1.25rem 1.25rem 1rem;
}

.nfz-package-card__top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.nfz-package-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: var(--color-surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nfz-package-card__icon svg {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--color-text-muted);
}

.nfz-package-card__info {
    flex: 1;
    min-width: 0;
}

.nfz-package-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.nfz-package-card__desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Meta: material count + ICD-10 badges --- */
.nfz-package-card__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.nfz-package-card__count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.nfz-package-card__count svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-text-muted);
}

.nfz-package-card__icd {
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* --- NFZ value box --- */
.nfz-package-card__nfz {
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .nfz-package-card__nfz {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}

.nfz-package-card__nfz-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #065f46;
}

[data-theme="dark"] .nfz-package-card__nfz-header {
    color: #6ee7b7;
}

.nfz-package-card__nfz-header svg {
    width: 0.875rem;
    height: 0.875rem;
    color: #10b981;
    flex-shrink: 0;
}

.nfz-package-card__nfz-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nfz-package-card__nfz-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.625rem;
    color: #059669;
}

[data-theme="dark"] .nfz-package-card__nfz-row {
    color: #6ee7b7;
}

.nfz-package-card__nfz-code {
    opacity: 0.6;
}

.nfz-package-card__nfz-rate {
    font-weight: 600;
    color: #065f46;
}

[data-theme="dark"] .nfz-package-card__nfz-rate {
    color: #6ee7b7;
}

/* --- Action buttons --- */
.nfz-package-card__actions {
    display: flex;
    gap: 0.5rem;
}

.nfz-package-card__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.nfz-package-card__btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.nfz-package-card__btn--list:hover {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.nfz-package-card__actions .card-footer__icon-btn {
    flex: none;
}

.nfz-package-card__added {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* --- Package material groups --- */
.nfz-package-card__group {
    border-bottom: 1px solid var(--color-border);
}

.nfz-package-card__group:last-child {
    border-bottom: none;
}

.nfz-package-card__group-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
}

.nfz-package-card__group-count {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* --- Expandable materials list --- */
.nfz-package-card__materials {
    border-top: 1px solid var(--color-border);
}

.nfz-package-card__material {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
    text-decoration: none;
    cursor: pointer;
}

.nfz-package-card__material:last-child {
    border-bottom: none;
}

.nfz-package-card__material:hover {
    background: var(--color-surface-raised);
}

.nfz-package-card__material-thumb {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.nfz-package-card__material-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.nfz-package-card__material-thumb--empty svg {
    width: 1.125rem;
    height: 1.125rem;
}

.nfz-package-card__material-title {
    font-size: 0.8125rem;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .nfz-packages-bar__list > .nfz-package-card {
        min-width: 18rem;
    }
}

/* --- Wyniki wyszukiwania --- */
.search-results {
    margin-top: 0.5rem;
}

.search-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.search-results__count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    flex-shrink: 0;
}

/* --- Akcje wyników (sortowanie + przełącznik widoku) --- */
.search-results__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* --- Przełącznik widoku list/grid --- */
.view-toggle {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.view-toggle__btn:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

.view-toggle__btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.view-toggle__btn--active {
    background: var(--color-primary);
    color: #ffffff;
}

.view-toggle__btn--active:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
}

/* --- Sortowanie --- */
.search-sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.search-sort__label {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

.search-sort__label i {
    width: 16px;
    height: 16px;
}

.search-sort__select {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
    outline: none;
}

.search-sort__select:focus {
    border-color: var(--color-primary);
}

.search-sort__select:hover {
    border-color: var(--color-border);
}

.search-results__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    cursor: pointer;
}

.search-result-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -5px rgba(0, 0, 0, 0.08);
}

.search-result-card__thumb {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    background: var(--color-bg);
}

.card-fav-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.card-fav-btn svg {
    width: 18px;
    height: 18px;
}

.card-fav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
}

.card-fav-btn.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary-border);
}

.card-fav-btn.is-active svg {
    fill: none;
}

[data-theme="dark"] .card-fav-btn {
    background: rgba(15, 23, 42, 0.6);
    color: var(--color-text-muted);
}

[data-theme="dark"] .card-fav-btn:hover {
    background: rgba(74, 144, 245, 0.15);
    color: var(--color-primary);
}

[data-theme="dark"] .card-fav-btn.is-active {
    background: var(--color-primary);
    border-color: transparent;
    color: #fff;
}

.search-result-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.search-result-card:hover .search-result-card__thumb img {
    transform: scale(1.03);
}


@media (min-width: 640px) {
    .search-result-card__thumb {
        width: 100px;
        height: 100px;
    }
}

.search-result-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.search-result-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.search-result-card__desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.search-result-card__tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-result-card__tags::-webkit-scrollbar {
    display: none;
}

.search-result-card__tags > .result-tag {
    flex-shrink: 0;
    white-space: nowrap;
}

.search-result-card__tags--icd10 + .search-result-card__tags--other {
    margin-top: 0.25rem;
}

/* W kafelkach (grid): pinuj wiersze tagów do dołu body (działa też z wrapperem strzałek) */
.search-result-card--grid .search-result-card__body > .search-result-card__tags:first-of-type,
.search-result-card--grid .search-result-card__body > .tags-scroll-wrap:first-of-type {
    margin-top: auto;
}

/* Wrapper dla tagów ze strzałkami przewijania */
.tags-scroll-wrap {
    position: relative;
}

.tags-scroll-wrap + .tags-scroll-wrap {
    margin-top: 0.25rem;
}

/* Fade gradient ukrywa krawędzie tagów pod strzałkami */
.tags-scroll-wrap--has-left::before,
.tags-scroll-wrap--has-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2rem;
    pointer-events: none;
    z-index: 1;
}

.tags-scroll-wrap--has-left::before {
    left: 0;
    background: linear-gradient(to right, var(--color-surface) 40%, transparent);
}

.tags-scroll-wrap--has-right::after {
    right: 0;
    background: linear-gradient(to left, var(--color-surface) 40%, transparent);
}

/* Strzałka — sama ikona, bez tła i ramki, lekko odsunięta od krawędzi tagów */
.tags-scroll-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 2;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.tags-scroll-btn:hover {
    color: var(--color-text);
}

.tags-scroll-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.tags-scroll-btn--left {
    left: -0.75rem;
}

.tags-scroll-btn--right {
    right: -0.75rem;
}

.tags-scroll-wrap--has-left .tags-scroll-btn--left,
.tags-scroll-wrap--has-right .tags-scroll-btn--right {
    display: inline-flex;
}

.result-tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.result-tag--icd10 {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .result-tag--icd10 {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border-color: var(--color-primary-border);
}

/* specialty/prevention/diagnostics/vaccinations dziedziczą styl z .result-tag */

.search-result-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.search-result-card__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* --- Grid view --- */
.search-results__list--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .search-results__list--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .search-results__list--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.search-result-card--grid {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.search-result-card--grid .search-result-card__thumb {
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
    border-radius: 0;
}

.search-result-card--grid .search-result-card__body {
    padding: 0.75rem 1rem 1rem;
    flex: 1;
}

.search-result-card--grid .search-result-card__title {
    font-size: 1rem;
}

.search-result-card--grid .search-result-card__desc {
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-card--grid .search-result-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.card-footer__stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.card-footer__stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-footer__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-footer__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: auto;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-footer__icon-btn svg {
    width: 18px;
    height: 18px;
}

.card-footer__icon-btn:hover {
    border-color: var(--color-cart);
    color: var(--color-cart);
}

/* --- Ad card (search results) --- */
.search-ad-card {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: box-shadow 0.15s ease;
}

.search-ad-card:hover {
    box-shadow: var(--shadow-md);
}

.search-ad-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.search-ad-card__image {
    width: 100%;
    line-height: 0;
}

.search-ad-card__image img {
    width: 100%;
    height: auto;
    display: block;
}

.search-ad-card__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    opacity: 0.85;
}

/* Ad card — grid view: span full row */
.search-ad-card--grid {
    grid-column: 1 / -1;
    border-radius: 1rem;
}

/* Ad card — kafelek: zajmuje jedną komórkę siatki (zamiast materiału) */
.search-ad-card--grid-tile {
    grid-column: auto;
    align-self: start;
    border-radius: 1rem;
}


.card-footer__icon-btn.is-active[id^="fav-btn"] {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

[data-theme="dark"] .card-footer__icon-btn.is-active[id^="fav-btn"] {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

/* Serduszko w modal footer i card footer — reset absolute positioning */
.modal-footer__actions .card-fav-btn,
.card-footer__actions .card-fav-btn,
.modal-footer__actions .card-fav-btn {
    position: static;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: none;
    color: var(--color-text-muted);
}

@keyframes fav-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.card-footer__actions .card-fav-btn.is-active,
.modal-footer__actions .card-fav-btn.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
    box-shadow: none;
}

.card-footer__actions .card-fav-btn.fav-animate,
.modal-footer__actions .card-fav-btn.fav-animate {
    animation: fav-bounce 0.35s ease-out both;
}

.card-footer__icon-btn.sel-animate {
    animation: fav-bounce 0.35s ease-out both;
}

@keyframes sel-shrink {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.82); }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.card-footer__icon-btn.sel-deselect-animate {
    animation: sel-shrink 0.35s ease-out both;
}

@keyframes cart-arrive {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

#selection-tab.cart-arrive {
    animation: cart-arrive 0.35s ease-out both;
}

@keyframes cart-leave {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.65); }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#selection-badge.cart-leave {
    animation: cart-leave 0.35s ease-out both;
}

.card-footer__actions .card-fav-btn.is-active svg,
.modal-footer__actions .card-fav-btn.is-active svg {
    fill: none;
}

.card-footer__actions .card-fav-btn.is-active:hover,
.modal-footer__actions .card-fav-btn.is-active:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.card-footer__actions .card-fav-btn:hover,
.modal-footer__actions .card-fav-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .card-footer__actions .card-fav-btn:hover,
[data-theme="dark"] .modal-footer__actions .card-fav-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .card-footer__actions .card-fav-btn.is-active,
[data-theme="dark"] .modal-footer__actions .card-fav-btn.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

[data-theme="dark"] .card-footer__actions .card-fav-btn.is-active:hover,
[data-theme="dark"] .modal-footer__actions .card-fav-btn.is-active:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

/* Przycisk Udostępnij (karty, stopka i nagłówek modala) jako primary/CTA gdy jeszcze nie dodany */
.card-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active),
.modal-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active),
.modal-header__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active) {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.card-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active):hover,
.modal-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active):hover,
.modal-header__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active):hover {
    background: var(--gradient-primary-hover);
    border-color: transparent;
    color: #fff;
}

.card-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active) svg,
.modal-footer__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active) svg,
.modal-header__actions .card-footer__icon-btn:not(.card-footer__icon-btn--active) svg {
    color: #fff;
}

/* Modal preview: klony przycisków w nagłówku (przed X) */
.modal-header__actions .card-fav-btn,
.modal-header__actions .card-footer__icon-btn,
.modal-header__actions .modal-close {
    height: 2.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: none;
    flex-shrink: 0;
}

.modal-header__actions .card-fav-btn,
.modal-header__actions .modal-close {
    position: static;
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header__actions .card-fav-btn svg,
.modal-header__actions .card-footer__icon-btn svg,
.modal-header__actions .modal-close svg {
    width: 18px;
    height: 18px;
}

.modal-header__actions .card-fav-btn:hover,
.modal-header__actions .card-footer__icon-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.modal-header__actions .modal-close:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
    background: var(--color-surface);
}

.modal-header__actions .card-fav-btn.is-active,
.modal-header__actions .card-footer__icon-btn.card-footer__icon-btn--active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

.modal-header__actions .card-fav-btn.is-active svg {
    fill: none;
}

/* --- Stan pusty --- */
.search-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.search-empty__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.search-empty__text {
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Infinite scroll loader --- */
.search-loader {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Podgląd materiału (modal) --- */
.material-preview__image {
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
}

.material-preview__image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius);
}

.material-preview__desc {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.material-preview__text {
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.material-preview__text p {
    margin-bottom: 0.75rem;
}

.material-preview__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

/* --- Ocena gwiazdkowa --- */
.star-rating {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.star-rating__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    margin-right: 0.4rem;
    white-space: nowrap;
}

.star-rating__star {
    background: none;
    border: none;
    padding: 0.1rem;
    cursor: pointer;
    color: var(--color-text);
    transition: color var(--transition), transform 100ms ease;
    display: inline-flex;
    align-items: center;
}

.star-rating__star:hover,
.star-rating__star:hover~.star-rating__star {
    transform: scale(1.15);
}

.star-rating__star--avg {
    color: #facc15;
}

.star-rating__star--user {
    color: var(--color-star);
}

.star-rating__star:hover {
    color: var(--color-star);
}

.star-rating__info {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.star-rating__separator {
    flex: 1;
}

.star-rating__patient {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.star-rating__patient-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    margin-right: 0.2rem;
}

.star-rating__patient-count {
    font-size: 0.85rem;
    font-weight: 700;
}

.star-rating__patient-count--pos {
    color: var(--color-score-green);
}

.star-rating__patient-count--neg {
    color: var(--color-error);
}

/* --- Selection (header badge + card button active state) --- */

.sub-nav__spacer {
    flex: 1;
}

.sub-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.sub-nav__tab--active .sub-nav__badge {
    background: rgba(255, 255, 255, 0.25);
}

/* Selection tab — secondary (empty) */
.sub-nav__tab--selection {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.sub-nav__tab--selection .sub-nav__badge {
    background: var(--color-primary);
    color: #fff;
}

.sub-nav__tab--selection:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Selection tab — filled (has items) */
.sub-nav__tab--selection-filled {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.sub-nav__tab--selection-filled:hover {
    background: var(--gradient-primary-hover);
    border-color: transparent;
    color: #fff;
}

.sub-nav__tab--selection-filled .sub-nav__badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

[data-theme="dark"] .sub-nav__tab--selection {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .sub-nav__tab--selection:hover {
    background: rgba(96, 165, 250, 0.1);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .sub-nav__tab--selection-filled {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

[data-theme="dark"] .sub-nav__tab--selection-filled:hover {
    background: var(--gradient-primary-hover);
    border-color: transparent;
    color: #fff;
}

/* Selection button — active (filled) */
.card-footer__icon-btn--active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
    box-shadow: none;
}

.card-footer__icon-btn.card-footer__icon-btn--active:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.card-footer__icon-btn.card-footer__icon-btn--active:hover svg {
    opacity: 1;
    color: var(--color-primary-dark);
}

/* --- Selection Drawer (slide-in panel) --- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 200ms ease;
    backdrop-filter: blur(2px);
}

.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    animation: slideInRight 250ms ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drawer-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius);
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
}

.drawer-clear:hover {
    border-color: var(--color-danger-text);
    background: var(--color-danger-bg);
}

.drawer-save {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.5);
    border-radius: var(--radius);
    background: rgba(37, 99, 235, 0.07);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
}

[data-theme="dark"] .drawer-save {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.08);
    color: var(--color-primary);
}

.drawer-save:hover {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.13);
}

[data-theme="dark"] .drawer-save:hover {
    border-color: var(--color-primary);
    background: rgba(96, 165, 250, 0.15);
}

.drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
}

.drawer-footer__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.drawer-save-form {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised, var(--color-surface));
}

.drawer-save-form__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.drawer-save-form__input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    transition: border-color var(--transition);
}

.drawer-save-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.drawer-save-form__submit {
    padding: 0.45rem 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.drawer-save-form__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.drawer-save-form__cancel {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
}

.drawer-save-form__cancel:hover {
    border-color: var(--color-border);
    color: var(--color-text);
}

.drawer-save-success {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-cart);
}

.drawer-save-success a {
    color: inherit;
    text-decoration: underline;
}

.drawer-save--saved {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.08);
    text-decoration: none;
}

[data-theme="dark"] .drawer-save--saved {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(96, 165, 250, 0.1);
}

.drawer-save-error {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-error);
}

.drawer-title {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-cart);
}

.drawer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.drawer-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}

.drawer-close:hover {
    color: var(--color-error);
    background: var(--color-bg);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    min-height: 0;
}

.drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    gap: 0.75rem;
}

.drawer-empty p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.drawer-empty span {
    font-size: 0.9rem;
}

.drawer-group {
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.drawer-group__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem;
    margin: 0;
    width: 100%;
    border: none;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-surface);
}

[data-theme="dark"] .drawer-group__title {
    background: var(--color-surface);
}

.drawer-group__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-muted);
}

.drawer-group__dot--prevention  { background: #0f766e; }
.drawer-group__dot--diagnostics { background: #b45309; }
.drawer-group__dot--vaccinations { background: #6d28d9; }
.drawer-group__dot--other       { background: #6b7280; }

[data-theme="dark"] .drawer-group__dot--prevention  { background: #5eead4; }
[data-theme="dark"] .drawer-group__dot--diagnostics { background: #fcd34d; }
[data-theme="dark"] .drawer-group__dot--vaccinations { background: #c4b5fd; }
[data-theme="dark"] .drawer-group__dot--other       { background: #9ca3af; }

.drawer-group__count {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-text-muted);
    color: var(--color-surface);
    line-height: 1;
    margin-left: auto;
}

.drawer-group__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 0.375rem;
    transition: transform 0.15s ease;
    transform: rotate(-90deg);
}

.drawer-group__chevron--open {
    transform: rotate(0deg);
}

.drawer-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.25rem;
}

.drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.65rem 0.5rem;
    border-radius: var(--radius);
    transition: background var(--transition);
}

.drawer-item:hover {
    background: var(--color-bg);
}

.drawer-item__info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.drawer-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
}

.drawer-item__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.drawer-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.drawer-item__title {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.drawer-item__info:hover .drawer-item__title {
    color: var(--color-primary);
}

.drawer-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.drawer-item__meta {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 0.15rem;
}

.drawer-item__icd {
    font-weight: 700;
    color: #be123c;
}

[data-theme="dark"] .drawer-item__icd {
    color: #fda4af;
}

.drawer-item__remove {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}

.drawer-item__remove svg {
    width: 16px;
    height: 16px;
}

.drawer-item__remove:hover {
    color: var(--color-error);
    background: var(--color-bg);
}

/* --- Share section (top of drawer) --- */
.drawer-share {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer-share__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.625rem;
}

.drawer-share__buttons {
    display: flex;
    gap: 0.75rem;
}

.drawer-share-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.drawer-share-btn svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.drawer-share-btn:hover:not(.drawer-share-btn--active):not(.drawer-share-btn--disabled) {
    background: var(--gradient-primary-hover);
}

/* Active = przycisk klikniety → widoczny toggle (panel otwarty) */
.drawer-share-btn--active {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: none;
}

.drawer-share-btn--active svg {
    color: var(--color-primary);
}

.drawer-share-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.drawer-share__visit-required {
    text-align: center;
    padding: 0.75rem 0.5rem 0;
}

.drawer-share__visit-required p {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.drawer-share__start-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    background: var(--gradient-primary);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--transition);
    box-shadow: var(--shadow-primary);
}

.drawer-share__start-visit-btn:hover {
    filter: brightness(1.05);
    color: #fff;
}

/* --- Share panels --- */
.share-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

[data-theme="dark"] .share-panel {
    background: rgba(255, 255, 255, 0.03);
}

/* QR frame */
.share-panel__qr-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 1rem;
}

.share-panel__qr-generate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-cart);
    background: #f0fdf4;
    border: 2px solid var(--color-cart);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

[data-theme="dark"] .share-panel__qr-generate {
    background: rgba(74, 222, 128, 0.08);
}

.share-panel__qr-generate:hover {
    background: #dcfce7;
}

[data-theme="dark"] .share-panel__qr-generate:hover {
    background: rgba(74, 222, 128, 0.15);
}

.share-panel__qr-icon {
    width: 48px;
    height: 48px;
}

#qr-code-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

#qr-code-img img {
    border-radius: 4px;
}

/* Consent checkbox */
.share-panel__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: 1rem;
}

.share-panel__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-cart);
    cursor: pointer;
}

/* Input field */
.share-panel__field {
    margin-bottom: 0.75rem;
}

.share-panel__field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.share-panel__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition);
}

.share-panel__input:focus {
    outline: none;
    border-color: var(--color-cart);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

[data-theme="dark"] .share-panel__input:focus {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.share-panel__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Submit button */
.share-panel__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-cart);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.share-panel__submit span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-panel__submit:hover:not(:disabled) {
    background: var(--color-cart-dark);
}

.share-panel__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Input wrapper with inline clear button */
.share-panel__input-wrap {
    position: relative;
}

.share-panel__input-wrap .share-panel__input {
    padding-right: 2.5rem;
}

.share-panel__clear {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.share-panel__clear svg {
    width: 1rem;
    height: 1rem;
}

.share-panel__clear:hover:not(:disabled) {
    background: var(--color-border);
    color: var(--color-text);
}

.share-panel__clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading spinner */
.share-panel__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.share-panel__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-cart);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.share-panel__spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success / Error messages */
.share-success {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-cart);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
}

[data-theme="dark"] .share-success {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
}

.share-success__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.share-error {
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius);
}

.share-panel__error {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-error);
}

.share-panel__qr-result {
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-panel__qr-result img {
    border-radius: 4px;
}

.share-panel__qr-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.share-panel__qr-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
}

.share-panel__qr-action:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .share-panel__qr-action:hover {
    background: rgba(37, 99, 235, 0.1);
}

@media (max-width: 540px) {
    .drawer-panel {
        max-width: 100%;
    }

    .drawer-body {
        padding: 1rem;
    }

    .drawer-header {
        padding: 1rem;
    }

    .drawer-share {
        padding: 1rem;
    }

    .drawer-share__buttons {
        gap: 0.5rem;
    }

    .drawer-share-btn {
        padding: 0.625rem 0.375rem;
        font-size: 0.75rem;
    }

    .drawer-share-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   VISIT START MODAL & FORM
   ============================================================ */

/* Przycisk w sub-nav */
.sub-nav__tab--visit {
    background: var(--gradient-primary);
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    gap: 0.375rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.sub-nav__tab--visit:hover {
    background: var(--gradient-primary-hover);
    border-color: transparent;
    color: #fff;
}


/* Przycisk "Zakończ wizytę" — czerwony, wypełniony */
.sub-nav__tab--visit-end {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    gap: 0.375rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all var(--transition);
}

.sub-nav__tab--visit-end:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: transparent;
    color: #fff;
}

[data-theme="dark"] .sub-nav__tab--visit-end {
    background: linear-gradient(135deg, #f87171, #ef4444);
    border-color: transparent;
    color: #fff;
}

[data-theme="dark"] .sub-nav__tab--visit-end:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
}

/* Informacje o wizycie na pasku — bez ramki */
.sub-nav__visit-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.sub-nav__visit-info[hidden] {
    display: none;
}

.sub-nav__visit-info--hidden {
    display: none;
}

.sub-nav__visit-patient {
    font-weight: 600;
    color: var(--color-text);
}

.sub-nav__visit-timer {
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    font-size: 0.875rem;
    color: var(--color-danger-text);
    font-weight: 600;
}

@keyframes timer-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.visit-timer--pulse {
    animation: timer-pulse 0.6s ease;
}

/* Mniejszy modal */
.modal-box--sm {
    max-width: 520px;
}

.modal-box--md {
    max-width: 640px;
}

.modal-box--lg {
    max-width: 800px;
}

.modal-box--xl {
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-body--pi {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-body--fav {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0;
}

/* --- Survey modal --- */
.survey-modal__desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.survey-modal__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 0;
}

/* --- Search input clear button (reusable) --- */
.search-input-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    margin-left: 0.25rem;
}

.search-input-clear:hover {
    color: var(--color-text);
}

/* --- Survey disease list --- */
.survey-disease-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.survey-disease-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.survey-disease-section--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.survey-disease-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition);
}

.survey-disease-header:hover {
    filter: brightness(0.97);
}

[data-theme="dark"] .survey-disease-header:hover {
    filter: brightness(1.1);
}

.survey-disease-section--active .survey-disease-header {
    background: var(--color-primary-light);
    border-bottom-color: var(--color-primary);
}

.survey-disease-header__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.survey-disease-section--active .survey-disease-header__icon {
    color: var(--color-primary);
}

.survey-disease-header__name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.survey-disease-header__count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.survey-disease-header__check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}

.survey-disease-header__check--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.survey-disease-codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1.5rem;
    padding: 0.875rem 1rem;
}

.survey-disease-codes__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.375rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--transition);
}

.survey-disease-codes__item:hover {
    background: var(--color-bg);
}

.survey-disease-codes__check {
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 3px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}

.survey-disease-codes__check svg {
    width: 0.75rem;
    height: 0.75rem;
}

.survey-disease-codes__check--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.survey-disease-codes__badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    flex-shrink: 0;
}

[data-theme="dark"] .survey-disease-codes__badge {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border-color: var(--color-primary-border);
}

.survey-disease-codes__name {
    color: var(--color-text-secondary);
}

.btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 640px) {
    .survey-disease-codes {
        grid-template-columns: 1fr;
    }
}

/* Formularz wizyty */
.visit-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.visit-form__group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.visit-form__group--half {
    flex: 1;
    min-width: 0;
}

.visit-form__row {
    display: flex;
    gap: 1rem;
}

.visit-form__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.visit-form__counter {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.visit-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.visit-form__label-row .visit-form__label {
    margin-bottom: 0;
}

.visit-form__required {
    color: var(--color-error);
}

.visit-form__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.visit-form__input-wrap--icon {
    position: relative;
}

.visit-form__input-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.visit-form__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.visit-form__input--with-icon {
    padding-left: 3.25rem;
}

.visit-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .visit-form__input:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.visit-form__input::placeholder {
    color: var(--color-text-subtle);
    opacity: 0.6;
}

.visit-form__spinner {
    position: absolute;
    right: 0.75rem;
    display: flex;
    color: var(--color-primary);
}

.icon-spin {
    animation: spin 0.8s linear infinite;
}

.visit-form__error {
    font-size: 0.8125rem;
    color: var(--color-error);
    margin-top: 0.375rem;
    font-weight: 500;
}

.visit-form__hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-cart);
    margin-top: 0.375rem;
    font-weight: 500;
}

.visit-form__facility-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    font-weight: 500;
}

.visit-form__facility-hint svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.visit-form__facility-hint--suspended {
    color: var(--color-error, #ef4444);
}

.visit-form__facility-hint--pending {
    color: var(--color-warning, #d97706);
}

.visit-facility-option--suspended {
    color: var(--color-text-muted);
}

.visit-form__birthdate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-sizing: border-box;
    min-height: 0;
}

.visit-form__birthdate svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.visit-form__birthdate-placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
    font-style: italic;
}

.visit-form__static {
    font-size: 0.9375rem;
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.visit-form__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.5rem 0;
}

.visit-form__checkbox input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.visit-form__separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.5rem 0 0;
}

/* Przyciski modala */
.visit-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    border: none;
}

.visit-form__btn--cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.visit-form__btn--cancel:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.visit-form__btn--submit {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.visit-form__btn--submit:hover {
    background: var(--color-primary-dark);
}


.visit-form__btn--submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

.visit-form__btn--danger {
    background: var(--color-primary);
    color: #fff;
}

.visit-form__btn--danger:hover {
    background: var(--color-primary-dark);
}

.visit-form__btn--restore {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.visit-form__btn--restore:hover {
    background: var(--color-primary-light);
}

/* ── Podsumowanie wizyty ── */
.modal-body__text--center {
    text-align: center;
}

/* --- Idle modal & countdown --- */
#idle-modal {
    z-index: 10000;
}

.idle-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}

.idle-countdown__time {
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-danger-text);
    letter-spacing: 0.05em;
}

.btn__countdown {
    margin-left: 0.35rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
}

.visit-summary {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.visit-summary__section {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.visit-summary__section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.visit-summary__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.75rem;
}

.visit-summary__heading svg {
    flex-shrink: 0;
}

.visit-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.visit-summary__field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.visit-summary__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.visit-summary__value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

.visit-summary__materials {
    list-style: decimal;
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.visit-summary__material {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.visit-summary__material:last-child {
    border-bottom: none;
}

.visit-summary__material:nth-child(odd) {
    background: var(--color-bg);
    border-radius: var(--radius);
}

.visit-summary__empty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* HIS */
.visit-summary__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.visit-summary__heading-row .visit-summary__heading {
    margin-bottom: 0;
    flex: 1;
}

.visit-summary__summary {
    cursor: pointer;
    list-style: none;
    gap: 0.5rem;
}

.visit-summary__summary::-webkit-details-marker {
    display: none;
}

.visit-summary__summary .visit-summary__heading {
    margin-right: auto;
}

.visit-summary__summary .visit-summary__copy-btn,
.visit-summary__summary .visit-summary__toggle-btn {
    flex-shrink: 0;
}

.visit-summary__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.visit-summary__toggle-btn:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.visit-summary__toggle-btn svg {
    transition: transform 0.2s ease;
}

details[open] > .visit-summary__summary .visit-summary__toggle-btn svg {
    transform: rotate(180deg);
}

.visit-summary__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.visit-summary__copy-btn:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.visit-summary__copy-btn--done {
    color: var(--color-cart);
    border-color: var(--color-cart);
}

.visit-summary__his-content {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-family: monospace;
    color: var(--color-text);
    line-height: 1.6;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 1rem;
}

.visit-summary__his-content ol {
    margin: 0;
    padding-left: 1.75em;
}

.visit-summary__his-content .his-section + .his-section {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--color-border);
}

/* ── HIS modal content ── */
.visit-his {
    font-size: 0.875rem;
    font-family: monospace;
    color: var(--color-text);
    line-height: 1.6;
    word-break: break-word;
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Responsywność formularza wizyty */
@media (max-width: 640px) {
    .visit-form__row {
        flex-direction: column;
        gap: 0;
    }

    .modal-box--sm {
        max-width: 100%;
    }

    .visit-summary__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pasek sesji edukacyjnej
   ========================================================================== */

.session-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 4rem;
    z-index: 90;
}

.session-bar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
}

.session-bar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.session-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.session-bar__back:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.session-bar__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 0;
}

.session-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    text-decoration: none;
}

.session-bar__label:hover {
    opacity: 0.8;
}

.session-bar__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: session-dot-pulse 2s ease-in-out infinite;
}

@keyframes session-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.session-bar__separator {
    width: 1px;
    height: 2rem;
    background: var(--color-border);
    flex-shrink: 0;
}

.session-bar__patient {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.session-bar__patient svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.session-bar__patient .session-bar__patient-icon {
    color: #22c55e;
    animation: session-dot-pulse 3s ease-in-out infinite;
}

.session-bar__timer {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.session-bar__timer svg {
    flex-shrink: 0;
}

.session-bar__analytics {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.session-bar__analytics:hover {
    background: var(--color-primary);
    color: #fff;
}

.session-bar__analytics svg {
    flex-shrink: 0;
}

.session-bar__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.session-bar__action:hover {
    background: var(--color-primary);
    color: #fff;
}

.session-bar__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.session-bar__end {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition);
    box-shadow: var(--shadow-sm);
}

.session-bar__end:hover {
    filter: brightness(1.05);
    color: #fff;
}

[data-theme="dark"] .session-bar__end {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

[data-theme="dark"] .session-bar__end:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

@media (max-width: 900px) {
    .session-bar__inner {
        padding: 0.625rem 1rem;
        gap: 0.75rem;
    }

    .session-bar__label {
        display: none;
    }

    .session-bar__separator {
        display: none;
    }

    .session-bar__back span,
    .session-bar__end span,
    .session-bar__analytics span,
    .session-bar__action span {
        display: none;
    }

    .session-bar__back,
    .session-bar__end,
    .session-bar__analytics,
    .session-bar__action {
        padding: 0.5rem;
    }
}

@media (max-width: 600px) {
    .session-bar__patient {
        display: none;
    }
}

/* ==========================================================================
   Klasy współdzielone — formularze, odznaki, trendy
   ========================================================================== */

/* --- Wspólna klasa pola formularza --- */
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .form-input {
    background: var(--color-surface-raised);
}

/* --- Odznaki statusu --- */
.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* --- Trendy i score --- */
.trend--up,
.score--green  { color: var(--color-score-green); }

.trend--down   { color: var(--color-danger-text); }

.score--orange { color: var(--color-score-orange); }
.score--yellow { color: var(--color-score-yellow); }
.score--gray   { color: var(--color-score-gray); }

/* --- Delta badges (pill shape) --- */
.delta--up {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.delta--down {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   App Nav — navigation links inside page hero (on gradient background)
   ══════════════════════════════════════════════════════════════════════════ */

.app-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: -0.5rem 0 3rem -1rem;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md, 0.5rem);
    font-size: 1.0625rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition), box-shadow var(--transition);
}

.app-nav__link:hover {
    color: #fff;
}

.app-nav__link--active {
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

.app-nav__link--active:hover {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.app-nav__link svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.app-nav__right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.app-nav__sep {
    width: 1px;
    height: 1rem;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .app-nav {
        gap: 0.125rem;
    }

    .app-nav__link {
        font-size: 0.9375rem;
        padding: 0.4375rem 0.625rem;
        gap: 0.25rem;
    }

    .app-nav__link svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   Notification page
   ========================================================================== */

.notification-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.notification-card {
    width: 100%;
    max-width: 480px;
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: var(--shadow-sm);
}

.notification-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    margin-bottom: 1.25rem;
}

.notification-card__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.notification-card--error .notification-card__icon {
    background: var(--color-error-bg, #fef2f2);
    color: var(--color-error, #ef4444);
}

.notification-card--warning .notification-card__icon {
    background: #fffbeb;
    color: #d97706;
}

.notification-card--info .notification-card__icon {
    background: #eff6ff;
    color: var(--color-primary);
}

.notification-card--success .notification-card__icon {
    background: var(--color-success-bg, #f0fdf4);
    color: var(--color-success, #10b981);
}

[data-theme="dark"] .notification-card--error .notification-card__icon {
    background: rgba(239, 68, 68, 0.12);
}

[data-theme="dark"] .notification-card--warning .notification-card__icon {
    background: rgba(217, 119, 6, 0.12);
    color: #fbbf24;
}

[data-theme="dark"] .notification-card--info .notification-card__icon {
    background: rgba(37, 99, 235, 0.12);
}

[data-theme="dark"] .notification-card--success .notification-card__icon {
    background: rgba(16, 185, 129, 0.12);
}

.notification-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.notification-card__message {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.75rem;
}

.notification-card__actions {
    display: flex;
    justify-content: center;
}