/* =========================================
   1. SYSTEM & GLOBAL (Walidacja, Błędy, Loader)
   ========================================= */
   * {
    -webkit-tap-highlight-color: transparent;
   }
   *, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #191C1F;
    margin: 0; /* Usuwa domyślne marginesy przeglądarki */
    padding: 0;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none
}
input, textarea {
    user-select: text;
    -webkit-user-select: text;
}
html,body {
    overscroll-behavior-y: none;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
body,.page, .main {
    touch-action: pan-y;
}
code { color: #c02d76; }

/* Walidacja Formularzy */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #FF3B30; }

.validation-message {
    color: #FF3B30;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 4px;
    margin-left: 4px;
}

/* Blazor Error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Global Loader Circle */
.loading-progress {
    position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none; stroke: #e0e0e0; stroke-width: 0.6rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* =========================================
   2. UKŁAD FORMULARZY (Layout)
   ========================================= */

/* Kontener wewnątrz Sheet/Modal */
.sheet-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 4px;
    padding-bottom: 24px;
    /* Pozwalamy na wyskakujące dropdowny */
    overflow-y: visible; 
}

/* Grupy i Grid */
.row-2, .row-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.form-group, .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

/* Wewnątrz grida usuwamy margines dolny */
.row-2 .form-group, .row-2 .form-field {
    margin-bottom: 0;
}

.specific-settings-group {
    display: flex; flex-direction: column; gap: 16px;
}

.divider {
    height: 1px; background-color: #F1F5F9; width: 100%; margin: 8px 0;
}

/* =========================================
   3. TYPOGRAFIA (Labels & Titles)
   ========================================= */

/* Label inputa */
label, .field-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

/* Tytuł sekcji w formularzu */
.section-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: -8px;
}

/* =========================================
   4. INPUTY (Unified Style)
   Obsługuje: r-input, classic-input, clean-input, modern-input
   ========================================= */

.r-input, 
.classic-input, 
.clean-input, 
.modern-input {
    width: 100%;
    height: 50px;
    background: #FFFFFF;
    border: 2px solid #E8EAEF;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #191C1F;
    outline: none;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    font-family: inherit;
    max-width: 100%;
}

.r-input:focus, 
.classic-input:focus, 
.clean-input:focus, 
.modern-input:focus {
    border-color: #0075EB;
    box-shadow: 0 4px 12px rgba(0, 117, 235, 0.1);
    background-color: #FFFFFF;
}

.r-input::placeholder, 
.classic-input::placeholder, 
.clean-input::placeholder, 
.modern-input::placeholder {
    color: #C4C8D0;
    font-weight: 500;
}

.r-input:disabled {
    background-color: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
    border-color: #E2E8F0;
}

/* Wersja z paddingiem na ikonę po lewej */
.r-input.with-icon, 
.clean-input.with-search-icon, 
.modern-input.with-icon {
    padding-left: 44px;
}

/* --- Input Wrapper z Ikoną (dla Dat/Szukania) --- */
.icon-input-wrapper, .search-wrapper {
    position: relative;
    width: 100%;
}

.input-icon, .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 22px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s;
}

/* Koloruj ikonę gdy input ma focus */
.icon-input-wrapper:focus-within .input-icon,
.search-wrapper:focus-within .search-icon {
    color: #0075EB;
}

/* Wyszukiwarka - ikona po prawej (opcjonalnie) */
.search-icon-right {
    left: auto; right: 14px;
}


/* =========================================
   5. CUSTOM DROPDOWNS (Div Based)
   ========================================= */

.custom-select-container {
    position: relative;
    width: 100%;
    z-index: 99;
    user-select: none;
}
.custom-select-container.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Trigger (to co wygląda jak input) */
.select-trigger, 
.clean-select-trigger {
    height: 50px;
    background: #FFFFFF;
    border: 2px solid #E8EAEF;
    border-radius: 14px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.select-trigger.active, 
.clean-select-trigger.active {
    border-color: #0075EB;
    box-shadow: 0 4px 12px rgba(0, 117, 235, 0.1);
}

.selected-text {
    font-weight: 600;
    color: #191C1F;
    font-size: 0.95rem;
}

.select-arrow, .trigger-icon {
    color: #94A3B8;
    font-size: 24px;
    transition: transform 0.2s;
}
.select-trigger.active .select-arrow { transform: rotate(180deg); color: #0075EB; }

/* Lista Opcji */
.options-dropdown, 
.custom-options-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #E8EAEF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 100;
}

.option-item, .custom-option {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4B5563;
    transition: background 0.1s;
}

.option-item:hover, .custom-option:hover {
    background: #F8FAFC;
    color: #191C1F;
}

.option-item.selected, .custom-option.selected {
    background: #EFF6FF;
    color: #0075EB;
    font-weight: 600;
}

.opt-icon { font-size: 18px; color: #CBD5E1; }
.option-item.selected .opt-icon, .custom-option.selected .opt-icon { color: #0075EB; }
.check { margin-left: auto; font-size: 18px; color: #0075EB; }

/* Backdrop do zamykania */
.dropdown-backdrop, .backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 98; cursor: default;
}

/* =========================================
   6. NATIVE SELECT (Stylizowany)
   ========================================= */
.select-wrapper { position: relative; width: 100%; }

.native-select, select.r-input {
    appearance: none; -webkit-appearance: none;
    padding-right: 44px; /* Miejsce na strzałkę */
    cursor: pointer;
    background-image: none !important; /* Usuwamy domyślne tła */
}
/* Strzałka dla Native Select */
.select-wrapper .select-arrow {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: #64748B;
}
.native-select:focus + .select-arrow { color: #0075EB; transform: translateY(-50%) rotate(180deg); }


/* =========================================
   7. DATY I KALENDARZE (Custom Wrapper)
   ========================================= */
.custom-date-wrapper {
    position: relative; height: 50px; background: #FFFFFF;
    border: 2px solid #E8EAEF; border-radius: 14px;
    display: flex; align-items: center; padding: 0 12px; gap: 10px;
    overflow: hidden; transition: 0.2s;
}
.custom-date-wrapper:focus-within {
    border-color: #0075EB; box-shadow: 0 4px 12px rgba(0, 117, 235, 0.1);
}
.date-icon { color: #94A3B8; font-size: 22px; pointer-events: none; }

.clean-date-input {
    border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 0.95rem; font-weight: 600; color: #191C1F;
    width: 100%; height: 100%; cursor: text;
}
.clean-date-input::-webkit-calendar-picker-indicator {
    position: absolute; top:0; left:0; width:100%; height:100%; opacity: 0; cursor: pointer;
}


/* =========================================
   8. WYSZUKIWARKA & KARTA PRACOWNIKA
   ========================================= */
.search-results-list, .search-results-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; width: 100%;
    background: white; border: 1px solid #E8EAEF; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); z-index: 100;
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.search-item, .dropdown-item {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 10px; cursor: pointer;
}
.search-item:hover, .dropdown-item:hover { background: #F8FAFC; }
.search-item.info, .dropdown-item.info { justify-content: center; color: #94A3B8; cursor: default; }

.avatar, .u-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #E0E7FF; color: #4338CA;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
}
.info, .u-info { flex: 1; display: flex; flex-direction: column; }
.name, .u-name { font-size: 0.9rem; font-weight: 600; color: #191C1F; }
.email, .u-email { font-size: 0.75rem; color: #64748B; }

/* Karta wybranego pracownika */
.worker-card, .selected-viewer-card {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border: 2px solid #E0E7FF; border-radius: 14px; background: white; height: 60px; box-sizing: border-box;
}
.wc-icon, .svc-icon {
    width: 40px; height: 40px; border-radius: 10px; background: #EEF2FF; color: #4F46E5;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.worker-bg { background-color: #FFF7ED !important; color: #F97316 !important; }

.wc-content, .svc-info { flex: 1; overflow: hidden; }
.wc-name, .svc-name { font-weight: 700; font-size: 0.9rem; color: #191C1F; }
.wc-email, .svc-email { font-size: 0.8rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wc-remove, .svc-remove {
    background: transparent; border: none; color: #9CA3AF; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.wc-remove:hover, .svc-remove:hover { background: #FEF2F2; color: #EF4444; }


/* =========================================
   9. BUTTONS
   ========================================= */
.actions {
    display: flex; gap: 12px; margin-top: 32px; width: 100%;
}
.sheet-footer { margin-top: 16px; width: 100%; }

.actions button, .btn-primary, .btn-secondary {
    height: 50px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0 16px;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, #0075EB, #0060C2);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 117, 235, 0.2);
    width: 100%;
}
.btn-primary:hover { box-shadow: 0 6px 14px rgba(0, 117, 235, 0.3); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: #93C5FD; cursor: not-allowed; box-shadow: none; }

.btn-secondary { background-color: #F1F5F9; color: #475569; width: 100%; }
.btn-secondary:hover { background-color: #E2E8F0; color: #191C1F; }

/* =========================================
   10. UTILITIES & ANIMATIONS
   ========================================= */
.fade-in, .fade-in-dropdown, .fade-in-field, .fade-in-item { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.spin { animation: spin 1s linear infinite; font-size: 18px; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* =========================================
   11. CHECKBOX WRAPPER
   ========================================= */
.checkbox-wrapper {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    user-select: none; position: relative; padding: 4px 0; margin-bottom: 15px;
}
.checkbox-wrapper input { position: absolute; opacity: 0; width: 0; height: 0; }
.custom-checkmark {
    height: 24px; width: 24px; background: #FFFFFF;
    border: 2px solid #D1D5DB; border-radius: 8px;
    transition: all 0.25s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.custom-checkmark::after {
    content: ""; width: 6px; height: 10px; border: solid white;
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
    opacity: 0; transition: all 0.2s; margin-top: -2px;
}
.checkbox-wrapper:hover input ~ .custom-checkmark { border-color: #0075EB; background: #F8FAFC; }
.checkbox-wrapper input:checked ~ .custom-checkmark { background: #0075EB; border-color: #0075EB; }
.checkbox-wrapper input:checked ~ .custom-checkmark::after { opacity: 1; transform: rotate(45deg) scale(1); }
.label-text { font-size: 0.95rem; font-weight: 600; color: #191C1F; }

/* =========================================
   12. SKELETON LOADER
   ========================================= */
.skeleton-wrapper { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; animation: fadeIn 0.3s ease-out; }
.sk-group { display: flex; flex-direction: column; gap: 6px; }

.sk-label, .sk-input, .sk-card, .sk-btn {
    background-color: #F1F5F9; position: relative; overflow: hidden;
}
.sk-label::after, .sk-input::after, .sk-card::after, .sk-btn::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 1.5s infinite;
}
.sk-label { height: 14px; border-radius: 4px; margin-left: 2px; }
.sk-input { width: 100%; height: 50px; border-radius: 14px; }
.sk-card { width: 100%; height: 60px; border-radius: 14px; }
.sk-btn { flex: 1; height: 48px; border-radius: 12px; }

@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Kontener dla toggli */
.toggles-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #F8FAFC;
    border: 1px solid #E8EAEF;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
}

/* Wiersz pojedynczego toggle */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

/* Teksty */
.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.t-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #191C1F;
}
.t-desc {
    font-size: 0.75rem;
    color: #64748B;
}

/* --- SWITCH COMPONENT (iOS Style) --- */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #E2E8F0;
    transition: .3s;
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Stan zaznaczony */
input:checked + .slider {
    background-color: #0075EB;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Animacja pojawiania się pola punktów */
.fade-in-field {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.active-z {
    z-index: 1000 !important;
}

/* --- GLOBAL CALENDAR COMPONENT --- */

/* Wrapper udający Input */
.custom-date-wrapper {
    position: relative;
    height: 50px;
    background: #FFFFFF;
    border: 2px solid #E8EAEF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

/* Stan błędu (gdy Blazor doda klasę invalid) */
.custom-date-wrapper.invalid {
    border-color: #FF3B30;
    background-color: #FFF5F5;
}

.custom-date-wrapper:hover {
    border-color: #CBD5E1;
}

/* Tekst wewnątrz */
.date-display-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #191C1F;
}
.date-display-text.placeholder {
    color: #94A3B8;
    font-weight: 500;
}

.date-icon, .chevron {
    color: #94A3B8;
    font-size: 20px;
}

/* --- POPUP KALENDARZA --- */
.calendar-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px; /* Stała szerokość dla ładnej siatki */
    background: #FFFFFF;
    border: 1px solid #E8EAEF;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    padding: 16px;
    z-index: 1001; /* Ponad wszystko */
    cursor: default;
}

/* Header (Miesiąc + Strzałki) */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.cal-title {
    font-weight: 700;
    color: #191C1F;
    text-transform: capitalize;
}
.cal-nav-btn {
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover {
    background: #F1F5F9;
    color: #191C1F;
}

/* Dni Tygodnia */
.cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
    text-align: center;
}
.cal-days-header span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
}

/* Siatka Dni */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 4px;
}

.cal-day {
    height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4B5563;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.1s;
}

.cal-day:hover:not(.empty) {
    background: #F1F5F9;
    color: #191C1F;
}

.cal-day.selected {
    background: #0075EB;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 117, 235, 0.3);
}

.cal-day.today {
    border: 1px solid #0075EB;
    color: #0075EB;
}
.cal-day.today.selected {
    color: white; /* Żeby na niebieskim tle był biały tekst */
}

/* Backdrop */
.calendar-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1000;
    cursor: default;
}

/* Responsywność na mobile: Centrowanie */
@media (max-width: 600px) {
    .calendar-popup {
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }
}

/* Kontener musi być relative, żeby input mógł być absolute wewnątrz niego */
    .file-dropzone.relative-container {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    /* Rozciągamy input na cały kafelek i robimy go niewidocznym */
    .absolute-fill-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;       /* TO JEST KLUCZOWE - ukrywa standardowy przycisk */
        z-index: 10;      /* Musi być na wierzchu, żeby złapać kliknięcie */
        cursor: pointer;
    }

    /* Siatka miniaturek */
    .thumbnails-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; /* Zwiększony odstęp */
        margin-top: 20px;
    }

    /* ZWIĘKSZONE MINIATURKI */
    .thumb-item {
        width: 120px;  /* Było 80px */
        height: 120px; /* Było 80px */
        border-radius: 12px; /* Ładniejsze zaokrąglenie */
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.2);
        position: relative; /* Kluczowe dla pozycjonowania nakładki */
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: transform 0.2s;
        /* NOWE: Domyślnie ukrywamy nowe elementy, animacja je pokaże */
        opacity: 0; 
        /* NOWE: Aplikujemy animację wejścia */
        animation: zoomInBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    thumb-item.deleting {
        /* Nadpisujemy animację wejścia animacją wyjścia */
        animation: zoomOutQuick 0.3s ease-in forwards !important;
        /* Ważne: blokujemy interakcje podczas znikania */
        pointer-events: none; 
    }
    
    /* Lekki efekt hover na całej miniaturce */
    .thumb-item:hover {
        transform: translateY(-2px);
    }
    
    .thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* NOWE: Styl nakładki (domyślnie niewidoczna) */
    .thumb-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* Półprzezroczyste czarne tło */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0; /* Ukryte */
        transition: opacity 0.2s ease-in-out;
    }

    /* Pokazujemy nakładkę po najechaniu na .thumb-item */
    .thumb-item:hover .thumb-overlay {
        opacity: 1;
    }

    /* NOWE: Styl przycisku usuwania */
    .btn-thumb-delete {
        background-color: #ff4757; /* Czerwony */
        color: white;
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s;
        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    }

    .btn-thumb-delete:hover {
        background-color: #e84118;
        transform: scale(1.1);
    }

    .btn-thumb-delete .material-symbols-rounded {
        font-size: 24px;
    }

    @keyframes zoomInBounce {
        0% { transform: scale(0); opacity: 0; }
        70% { transform: scale(1.1); opacity: 0.8; } /* Lekki "bounce" */
        100% { transform: scale(1); opacity: 1; }
    }

    @keyframes zoomOutQuick {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(0); opacity: 0; }
    }

    /* PUSTY KAFELEK ŁADOWANIA */
    .thumb-item.loading-skeleton {
        background: #f0f0f0; /* Kolor tła */
        background: linear-gradient(
            110deg,
            #ececec 8%,
            #f5f5f5 18%,
            #ececec 33%
        );
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite, zoomInBounce 0.4s forwards;
        border: 1px solid rgba(0,0,0,0.05);
        pointer-events: none; /* Blokujemy klikanie w trakcie ładowania */
    }

    /* ANIMACJA PRZESUWANIA ŚWIATŁA */
    @keyframes shine {
        to {
            background-position-x: -200%;
        }
    }

    /* Ikona w środku loadera (opcjonalnie) */
    .loading-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    
    .spin {
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin { 100% { transform: rotate(360deg); } }

    div, section, main, article, aside {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
}

.revolut-row, 
.liquid-row-card, 
.surveys-stream, 
.sheet-content {
    transform: translateZ(0);
}