/* ========================================================================
   ECP CodeBuilder UI — Deduplicated CSS + Color modes
   - Uses CSS custom properties in :root and Bootstrap 5.3 color modes via data-bs-theme.
   - Default theme: dark
   - Light theme: html[data-bs-theme="light"]
   ======================================================================== */

/* Module imports (must be at top of file) */
@import url("style.projects.css");
@import url("style.history.css");
@import url("style.kanban.css");
@import url("style.calendar.css");

@import url("style.modal.css") layer(kanban);

:root {
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --bg-dark: #020617;
    --surface-dark: #0f172a;
    --glass-bg: rgba(15, 23, 42, 0.65);
    --surface-light: rgba(30, 41, 59, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shine: rgba(255, 255, 255, 0.03);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --primary-accent: #3b82f6;
    --secondary-accent: #ec4899;
    --success-accent: #10b981;
    --warning-accent: #f59e0b;
    --primary-glow: rgba(59, 130, 246, 0.5);
    --primary-dark: #0077cc;
    --bg-mesh: radial-gradient(at 0% 0%, rgba(45, 212, 191, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.08) 0px, transparent 50%);
}

html[data-bs-theme="light"] {
    --bg-dark: #f8fafc;
    --surface-dark: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.78);
    --surface-light: rgba(226, 232, 240, 0.65);
    --glass-border: rgba(15, 23, 42, 0.12);
    --glass-shine: rgba(15, 23, 42, 0.03);
    --text-main: #0f172a;
    --text-muted: #475569;
    --primary-glow: rgba(59, 130, 246, 0.25);
    --bg-mesh: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.06) 0px, transparent 50%);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-main);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-dark);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    overflow-x: hidden;
    padding-bottom: 0px;
}



/* ========================================================================
   Theme toggle button
   ======================================================================== */
.btn-theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease-in-out;
}

.btn-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.35);
}

.btn-theme-toggle:active {
    transform: translateY(0px);
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1520px;
    }
}

@media (min-width: 2590px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1920px;
    }
}

/* --- GLASSMORPHISM CARD SYSTEM --- */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--glass-shine), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: 0.5s;
}

/* --- TYPOGRAPHY & LOGO --- */
/* --- INPUTS & FORMS --- */
/* Tom Select Dark Mode Override */
.ts-wrapper.single .ts-control {
    box-shadow: none;
}

.ts-dropdown {
    background: #1e293b !important;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 5px;
}

.ts-dropdown .option {
    border-radius: 8px;
    color: #cbd5e1;
}

.ts-dropdown .active {
    background: var(--primary-accent) !important;
    color: white !important;
}

.item {
    background: var(--primary-accent) !important;
    color: white !important;
    border-radius: 6px;
    padding: 2px 8px;
}

/* --- STATS CARDS --- */
/* --- BUTTONS --- */
.btn-modern {
    background: linear-gradient(135deg, var(--primary-accent), #4f46e5);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
    color: white;
}

.btn-outline-modern {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 10px;
    transition: 0.3s;
}

.btn-outline-modern:hover {
    border-color: white;
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

/* --- TABLE --- */
.table-custom {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.table-custom th {
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 20px;
    font-size: 0.85rem;
    border: none;
}

.table-custom td {
    background: rgba(30, 41, 59, 0.3);
    padding: 16px 20px;
    border: none;
    transition: 0.2s;
}

.table-custom tr td:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.table-custom tr td:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.table-custom tr:hover td {
    background: rgba(30, 41, 59, 0.6);
    transform: scale(1.01);
}

/* --- FAB --- */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.fab-btn {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--secondary-accent), #db2777);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-btn:hover {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.6);
}

/* --- UTILS --- */
.modal-header,
.modal-footer {
    border-color: var(--glass-border);
}

/* Checkbox Switch Custom */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}

/* Badge */
.badge-glow {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.badge-glow.etat {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.2);
}

/* Dodatkowe style dla tego widoku */
/* Kolejność na mobile */
@media (max-width: 991px) {
    .order-mobile-1 {
        order: 1;
    }

    /* Ostatnia aktywność */
    .order-mobile-2 {
        order: 2;
    }

    /* KPI (Godziny itp) */
    .order-mobile-3 {
        order: 3;
    }

    /* Tabela Finansowa */
}

/* Selecty Czasu */
.time-select:focus {
    outline: 2px solid var(--primary-accent);
}

/* Flatpickr Custom */
.flatpickr-day.selected {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
}

@media (max-width: 991px) {
    .order-mobile-1 {
        order: 1;
    }

    /* Zadanie */
    .order-mobile-2 {
        order: 2;
    }

    /* Ostatnia aktywność */
    .order-mobile-3 {
        order: 3;
    }

    /* KPI */
    .order-mobile-4 {
        order: 4;
    }

    /* Finanse */
}

.time-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.flatpickr-calendar {
    background: #1e293b;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Styl przekreślenia i Accordion */
/* Search Input */
.search-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    width: 350px;
    font-size: 0.85rem;
}

.search-input:focus {
    outline: 1px solid var(--primary-accent);
}

/* --- ACTION BAR (Pasek na górze) --- */
.action-bar {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 15px 25px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.daily-summary {
    display: flex;
    gap: 20px;
    align-items: center;
}

.summary-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.summary-val {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.summary-lbl {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* --- NOWY MODAL CZASU --- */
.time-input-group {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    position: relative;
}

.time-input-modern {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--glass-border);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    padding: 5px;
    transition: 0.3s;
}

.time-input-modern:focus {
    outline: none;
    border-color: var(--primary-accent);
}

.time-input-modern::placeholder {
    color: rgba(255, 255, 255, 0.1);
}

.cost-preview {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    margin-top: 15px;
}

/* --- TABELE FINANSOWE (PER FIRMA) --- */
.company-finance-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.finance-footer {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

/* --- ACTION BAR (Wzorowany na screenie) --- */
.action-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Niebieski Baner (Przycisk) */
.action-banner-btn h3 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1.5rem;
}

.action-banner-btn p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Białe Kafelki (Statystyki) */
.stat-card-white {
    flex: 1;
    min-width: 150px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-card-white .label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 5px;
}

.stat-card-white .value {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.stat-card-white .value.blue {
    color: #0099ff;
}

/* --- GLASS CARD (Reszta aplikacji) --- */
/* --- TABELE FINANSOWE (Styl per firma) --- */
.company-section {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

.company-header {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    padding: 15px 15px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-header h5 {
    margin: 0;
    font-weight: 700;
    color: #fff;
    font-size: 15px
}

.summary-text-box {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.summary-highlight {
    color: #10b981;
    font-weight: 700;
}

/* --- CZAS (Teams-like) --- */
.time-sep {
    font-weight: bold;
    margin: 0 5px;
    color: var(--text-muted);
}

/* --- UTILS --- */
.text-strike {
    text-decoration: line-through;
    opacity: 0.5;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary-accent);
    color: white;
    border-color: var(--primary-accent);
}

/* Inne */
.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
    color: white;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-accent);
    box-shadow: none;
    color: white;
}

/* Style specyficzne dla Accordiona i Układu */
.mobile-container {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .order-mobile-1 {
        order: 1;
    }

    /* Action Bar */
    .order-mobile-2 {
        order: 2;
    }

    /* Historia */
    .order-mobile-3 {
        order: 3;
    }

    /* KPI */
    .order-mobile-4 {
        order: 4;
    }

    /* Finanse */
}

/* Accordion Custom */
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Date Picker w Headerze */
/* Styl przycisku - Gradient pasujący do motywu */
.action-banner-btn {
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: 1px solid var(--glass-border);
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 0 25px;
    border-radius: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    cursor: pointer;
    flex: 2;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    position: relative;
}

.action-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.4);
}

.btn-content h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-content p {
    margin: 4px 0 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Styl kart - Ciemny, pasujący do "Netto/VAT" */
/* --- FOOTER (Pkt 4) --- */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(2, 6, 23, 0.95);
    border-top: 1px solid var(--glass-border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* --- SELECTS TIME (Pkt 5) --- */
.time-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 5px;
}

/* Ujednolicenie wyglądu dla Start i End */
.time-select-modern {
    background: #090d19;
    border: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    appearance: none;
    cursor: pointer;
    padding: 5px 2px;
}

.time-select-modern:focus {
    outline: none;
    color: var(--primary-accent);
}

/* Style dla trybu podglądu (read-only) */
.modal-locked .form-control,
.modal-locked .form-select,
.modal-locked .ts-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: transparent !important;
    pointer-events: none;
    opacity: 0.7;
}

.modal-locked .time-select-modern {
    pointer-events: none;
    opacity: 0.7;
}

.modal-locked .btn-check+label {
    pointer-events: none;
    opacity: 0.6;
}

/* Stylizacja dużego widgetu */
.btn-large-action .action-banner-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

/* Ulepszenie kolumn statystyk */
.small,
small {
    font-size: .775em;
}

/* Chrome, Safari, Edge, Opera */
/* Firefox */
/* RESET I BAZA */
/* UKRYWANIE STRZAŁEK W INPUTACH NUMBER (Kluczowe) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* SYSTEM SZKŁA (GLASSMORPHISM) */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* HEADER & LOGO */
.logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-accent), #2563eb);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 0 15px var(--primary-glow);
}

/* INPUTY I FORMULARZE */
.form-control,
.form-select,
.ts-control {
    background: rgba(2, 6, 23, 0.6) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: all 0.2s;
    height: 60px;
}

/* Header Date Picker - Wygląd */
.header-date-picker {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid var(--glass-border) !important;
    font-weight: 500;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    color: white !important;
    width: 220px;
}

/* DUŻY PRZYCISK (WIDGET ACTION) */
.btn-large-action::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.btn-large-action:hover::after {
    transform: translateX(100%);
}

.btn-large-action h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.btn-large-action p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 80%;
    line-height: 1.4;
}

.action-banner-icon {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    opacity: 0.2;
    transition: 0.3s;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.btn-large-action:hover .action-banner-icon {
    opacity: 0.4;
    transform: translateY(-50%) scale(1.1);
}

/* KAFELKI STATYSTYK (DZIŚ) */
.stat-col-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.stat-card-dark {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    backdrop-filter: blur(16px);
    height: 100%;
    padding: 15px;
    text-align: center;
    min-height: 100px;
}

.stat-card-dark .label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.stat-card-dark .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
}

.stat-card-dark .value.blue {
    color: #60a5fa;
}

/* MAŁE KAFELKI KPI (Netto, VAT itp) */
.kpi-card {
    padding: 1.2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kpi-icon {
    font-size: 1.2rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

/* HISTORIA */
.history-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(3px);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ACCORDION (Finanse) */
.accordion-button::after {
    filter: invert(1) grayscale(100%);
    opacity: 0.5;
    margin-left: auto;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-accent) !important;
}

/* TABLES */
.table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    border: none;
    padding-bottom: 12px;
}

.table td {
    vertical-align: middle;
    border-color: var(--glass-border);
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* MODAL */
.modal-content {
    background: #0f172a;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}

.modal-header {
    border-bottom: 1px solid var(--glass-border);
}

.modal-footer {
    border-top: 1px solid var(--glass-border);
}

/* RESPONSIVE UTILS */
@media (max-width: 768px) {
    body {
        padding-bottom: 40px;
    }

    .btn-large-action {
        min-height: 150px;
        padding: 20px;
    }

    .btn-large-action h2 {
        font-size: 1.4rem;
    }

    .stat-card-dark .value {
        font-size: 1.5rem;
    }

    .glass-card {
        border-radius: 16px;
    }

    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Utilities */
.text-xs {
    font-size: 0.75rem;
}

.fw-600 {
    font-weight: 600;
}

.opacity-75 {
    opacity: 0.75;
}

.pt-25 {
    padding-top: 25px;
}

/* Zachowane dla kompatybilności */
/* Date Range Picker Dark Override */
.daterangepicker {
    background-color: #1e293b;
    border: 1px solid var(--glass-border);
    color: white;
}

.daterangepicker .calendar-table {
    background-color: #1e293b;
    border: none;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: #1e293b;
    color: #475569;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--glass-border);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary-accent);
}

/* STYLIZACJA LOGO (Responsywna) */
.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo-area:hover .logo-img {
    transform: scale(1.05) rotate(-5deg);
    /* Efekt przy najechaniu */
}

.logo-text {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    color: white;
    line-height: 1;
}

.logo-suffix {
    font-weight: 300;
    color: var(--brand-main);
    /* Słowo "Ultra" w kolorze logo */
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* AKTUALIZACJA DUŻEGO PRZYCISKU (Żeby pasował do logo) */
.btn-large-action {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-main) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    min-height: 180px;
    padding: 30px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(13, 148, 136, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.btn-large-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(45, 212, 191, 0.5);
    border-color: white;
}

/* TŁO STRONY (Dopasowane "meshe" w tle) */
/* FOCUS W INPUTACH (Też na kolor logo) */
.form-control:focus,
.form-select:focus,
.ts-control.focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2) !important;
    background: rgba(2, 6, 23, 0.9) !important;
}

/* CUSTOM CHECKBOX/SWITCH */
.form-check-input:checked {
    background-color: var(--brand-main);
    border-color: var(--brand-main);
}

/* ... reszta pliku bez zmian ... */
/* BLOKADA DLA TRYBU PODGLĄDU */
.modal-locked .form-control,
.modal-locked .form-select,
.modal-locked .ts-control,
.modal-locked .time-select-modern,
.modal-locked .form-check-input,
.modal-locked .form-switch {
    pointer-events: none !important;
    opacity: 0.6;
}

/* Animacja pulsująca dla zadań w toku */
@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Styling tabs in Admin Modal */
.nav-pills .nav-link {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.nav-pills .nav-link.active {
    background: var(--primary-accent);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Styl dla pulsującej kropki zadania W TOKU */
@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* --- ULEPSZENIE TABELI FINANSOWEJ --- */
/* Odstępy dla nagłówków i komórek */
.company-section .table th,
.company-section .table td {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Pierwsza kolumna (Data) odsunięta bardziej od krawędzi */
.company-section .table th:first-child,
.company-section .table td:first-child {
    padding-left: 15px !important;
}

/* Ostatnia kolumna (Akcje) odsunięta bardziej od krawędzi */
.company-section .table th:last-child,
.company-section .table td:last-child {
    padding-right: 15px !important;
}

/* Subtelna linia oddzielająca wiersze */
.company-section .table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Usunięcie obramowania z ostatniego wiersza, żeby było ładnie */
.company-section .table tbody tr:last-child {
    border-bottom: none;
}

#locked-time-display {
    /* Szklane tło z lekkim czerwonym zabarwieniem (sygnał blokady) */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(220, 53, 69, 0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Subtelne obramowanie */
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    /* Cień wewnętrzny dla głębi */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;
}

/* Efekt po najechaniu myszką - delikatne rozświetlenie */
#locked-time-display:hover {
    border-color: rgba(220, 53, 69, 0.3);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(220, 53, 69, 0.1) 100%);
}

/* Stylowanie znaku wodnego (ikona kłódki w tle) */
#locked-time-display .opacity-10 {
    opacity: 0.05 !important;
    /* Bardzo delikatna widoczność */
    pointer-events: none;
    /* Żeby nie przeszkadzała w klikaniu */
    transform: rotate(-15deg) translate(-20%, -50%);
}

/* --- KONTENER (DOCK) --- */
.hud-toggle-dock {
    background: rgba(10, 10, 10, 0.4);
    /* Bardzo ciemne tło */
    border-radius: 50px;
    /* Pełna pigułka */
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Ledwo widoczna krawędź */
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.5),
        /* Wewnętrzny cień góry (wklęsłość) */
        0 10px 20px rgba(0, 0, 0, 0.2);
    /* Cień pod całym paskiem */
    backdrop-filter: blur(10px);
    display: inline-flex;
    padding: 6px !important;
    /* Odstęp od krawędzi do przycisków */
}

/* --- PRZYCISK (STAN SPOCZYNKU) --- */
.hud-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 40px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    /* Wygaszony tekst */
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Ikona */
.hud-btn .icon-box {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* Hover na nieaktywnym */
.hud-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
}

.hud-btn:hover .icon-box {
    transform: scale(1.1);
}

/* Kontener przełącznika - ciemna rynna */
.glass-toggle-group {
    background: rgba(0, 0, 0, 0.4);
    /* Bardzo ciemne tło */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtelna ramka */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Cień wewnętrzny (wklęsłość) */
    position: relative;
    display: inline-flex;
    /* Dopasowanie szerokości do zawartości */
    gap: 4px;
    /* Odstęp między przyciskami */
}

/* Podstawowy wygląd przycisku (nieaktywny) */
.toggle-btn {
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    /* Wygaszony tekst */
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.toggle-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

/* --- STANY AKTYWNE (Neonowe podświetlenie) --- */
/* 1. B2B - Niebieski (Primary) */
#t-b2b:checked+label {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    transform: scale(1.02);
    /* Lekkie powiększenie */
}

/* 2. ETAT - Pomarańczowy/Żółty (Warning) */
#t-etat:checked+label {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    transform: scale(1.02);
}

/* 3. W TOKU - Zielony/Morski (Success/Teal) */
#t-nolimit:checked+label {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    transform: scale(1.02);
}

/* Animacja ikonek wewnątrz */
.toggle-btn i {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.btn-check:checked+label i {
    opacity: 1;
}

/* --- GLOBAL SUMMARY CARD --- */
#global-summary-text {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 0 !important;
    /* Reset paddingu, obsłużymy go wewnątrz */
    overflow: hidden;
    position: relative;
    color: #fff;
    margin-top: 1.5rem;
}

/* Dekoracyjny pasek na górze */
#global-summary-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

/* Sekcja Główna */
.summary-main {
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Ikona w kole */
.summary-icon-box {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    /* Warning color */
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

/* Etykiety i wartości */
.stat-value-lg {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.stat-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Pionowa linia separatora */
.summary-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 15px;
}

/* Pasek statusu na dole */
.summary-footer {
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 25px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

/* Warianty footera */
.summary-footer.warning {
    color: #fca5a5;
    /* Jasny czerwony */
    border-top-color: rgba(220, 38, 38, 0.2);
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.1) 0%, transparent 100%);
}

.summary-footer.success {
    color: #86efac;
    /* Jasny zielony */
    border-top-color: rgba(22, 163, 74, 0.2);
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.1) 0%, transparent 100%);
}

/* --- WSPÓLNE STYLE NAGŁÓWKÓW --- */
/* Styl tytułów */
.glass-header-title {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

/* Ikona z poświatą (Glow) */
.icon-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
}

/* --- WYSZUKIWARKA (HISTORY) --- */
.glass-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 250px;
}

.glass-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 12px 8px 38px;
    /* Padding z lewej na ikonę */
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.glass-search-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(59, 130, 246, 0.5);
    /* Primary blue focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.glass-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    font-size: 0.85rem;
}

/* --- LICZNIK (HISTORY) --- */
.glass-counter-badge {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-family: monospace;
    font-size: 1rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- FILTRY (FINANSE) --- */
.glass-filter-group {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex;
    gap: 2px;
}

.filter-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Aktywny filtr */
.filter-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- ACCORDION BUTTON (FINANSE) --- */
/* Ukrywamy domyślny przycisk bootstrapa */
.accordion-button {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    font-size: 1.1rem;
    padding: 10px 0;
}

/* Nasz własny przycisk */
.glass-accordion-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.glass-accordion-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Animacja strzałki */
.glass-accordion-btn .transition-icon {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
    /* Domyślnie rozwinięte - strzałka w górę (opcjonalnie) */
}

/* Jeśli accordion jest zwinięty (collapsed) */
.glass-accordion-btn.collapsed .transition-icon {
    transform: rotate(0deg);
}

/* --- MODERN FLOATING GRID --- */
.modern-grid-container {
    margin-top: 0px;
    margin-bottom: -13px;
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    /* Kluczowe dla odstępów między wierszami */
    border-spacing: 0 12px;
    /* 12px odstępu pionowego między wierszami */
    color: #e2e8f0;
}

/* --- NAGŁÓWEK --- */
.modern-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    padding: 0 20px 10px 20px;
    /* Padding tylko na dole */
    border: none;
    text-align: left;
}

/* --- WIERSZE (Karty) --- */
.modern-row {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Cień pod wierszem */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Zaokrąglanie rogów wiersza (trik dla tabeli) */
/* Komórki */
.modern-row td {
    padding: 20px;
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modern-row td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
}

.modern-row td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}

/* --- EFEKT HOVER --- */
.modern-row:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px) scale(1.01);
    /* Unoszenie wiersza */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

/* --- TYPOGRAFIA I DETALE --- */
.grid-month {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.grid-year-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.grid-stat-val {
    font-family: var(--font-main), sans-serif;
    /* Bardziej nowoczesna niż mono */
    font-weight: 700;
    font-size: 1rem;
}

.grid-stat-label {
    display: block;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

/* Kolorowy pasek statusu po lewej stronie wiersza */
.status-indicator {
    width: 4px;
    height: 25px;
    background: #3b82f6;
    /* Domyślny niebieski */
    border-radius: 4px;
    display: inline-block;
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    /* Glow */
}

/* --- STAN ROZLICZONY (Wygaszony) --- */
.modern-row.is-settled {
    opacity: 0.6;
    background: transparent;
    box-shadow: none;
    filter: grayscale(0.8);
}

.modern-row.is-settled:hover {
    transform: none;
    opacity: 0.8;
}

.modern-row.is-settled .status-indicator {
    background: #475569;
    box-shadow: none;
}

/* Przycisk drukarki w nowym stylu */
.btn-print-floating {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-print-floating:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

/* --- MINIMALIST COMPANY HEADER --- */
.company-header-minimal {
    padding: 15px 0px 0px 20px;
    /* Identyczny padding jak w .modern-row td */
    margin-bottom: 5px;
    /* Mały odstęp od tabeli */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ch-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mała kropka/ikona przy nazwie */
.ch-icon {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

.ch-total-wrapper {
    display: flex;
    align-items: baseline;
    /* Wyrównanie do linii tekstu */
    background: rgba(255, 255, 255, 0.03);
    /* Bardzo subtelne tło */
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ch-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-right: 8px;
    font-weight: 600;
}

.ch-value {
    font-family: var(--font-main), sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #10b981;
}

/* --- CYBER CARD CONTAINER --- */
.cyber-card {
    position: relative;
    background: rgba(18, 24, 39, 0.7);
    /* Bardzo ciemny granat/czarny */
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Setup zmiennych dla flexa */
    display: flex;
    align-items: stretch;
}

/* Poświata na hover */
.cyber-card:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--status-rgb), 0.1);
    /* Delikatna poświata kolorem statusu */
}

/* --- PASEK STATUSU (Lewa krawędź) --- */
.status-bar {
    width: 6px;
    background: var(--status-color);
    box-shadow: 2px 0 15px var(--status-color);
    /* "Świecący" pasek */
    z-index: 2;
}

/* --- UKŁAD WEWNĘTRZNY --- */
.cyber-card-body {
    display: flex;
    width: 100%;
    z-index: 2;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* --- SEKCJA TREŚCI (LEWA - Max 85%) --- */
.content-section {
    flex: 1;
    max-width: 85%;
    padding: 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header */
.content-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.badge-pill {
    background: rgba(255, 255, 255, 0.05);
    color: var(--status-color);
    border: 1px solid var(--status-color);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.company-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.date-pill {

    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Opis */
.content-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

/* Tagi */
.cyber-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- SEKCJA HUD (PRAWA - Meta) --- */
.hud-panel {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Wyrównanie do prawej */
    height: 100%;
}

/* PIENIĄDZE */
.hud-money {

    /* Mocny, wysoki font */
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1;
    text-align: right;
    /* Neonowy cień tekstu */
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.hud-money.billable {
    color: #4ade80;
}

.hud-money.disabled {
    color: #64748b;
    text-shadow: none;
    text-decoration: line-through;
    font-size: 1.1rem;
}

.hud-money small {
    font-size: 0.6rem;
    opacity: 0.7;
    font-weight: 300;
}

.hud-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 10px 0;
}

/* CZAS */
.hud-timer {
    text-align: right;
    width: 100%;
}

.hud-timer.finished .ranges {

    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}

.hud-timer.finished .total-hours {

    font-size: 1rem;
    font-weight: 700;
    color: #cbd5e1;
}

/* AKTYWNY TIMER */
.hud-timer.active {

    font-size: 1.2rem;
    color: #facc15;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.blink-dot {
    width: 8px;
    height: 8px;
    background-color: #facc15;
    border-radius: 50%;
    margin-right: 8px;
    animation: blinker 1s linear infinite;
    box-shadow: 0 0 8px #facc15;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* PRZYCISK STOP (High tech) */
.cyber-btn-stop {
    margin-top: auto;
    /* Dopychamy do dołu */
    width: 100%;
    background: linear-gradient(45deg, rgba(220, 38, 38, 0.2), rgba(153, 27, 27, 0.4));
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.1);
}

.cyber-btn-stop:hover {
    background: rgba(220, 38, 38, 0.8);
    color: white;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
    border-color: red;
}

/* --- TŁO GLOW --- */
.glow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 20%);
    pointer-events: none;
    z-index: 1;
}

/* --- Responsywność dla mobile --- */
@media (max-width: 768px) {
    .content-section {
        max-width: 65%;
    }

    /* Mniej miejsca na tekst na telefonie */
    .hud-section {
        min-width: auto;
        flex: 1;
    }

    .hud-money {
        font-size: 1.1rem;
    }

    .company-title {
        font-size: 0.95rem;
    }
}

/* --- LEWA STRONA: TAGI Z SEPARATOREM --- */
.tag-section-wrapper {
    margin-top: auto;
    /* Dopycha tagi do dołu sekcji */
}

/* Subtelna, zanikająca linia oddzielająca */
.tag-separator {
    height: 1px;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    /* Gradient od jasnego (z lewej) do przezroczystego (w prawo) */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
}

.content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cyber-tag {
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.3px;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.2s;
}

/* --- PRAWA STRONA: HUD CLEAN & TECH --- */
.hud-section {
    width: 22.8%;
    min-width: 130px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

/* SEKCJA PIENIĘDZY (GÓRA) */
.hud-value-group {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hud-value-group .currency {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-bottom: -2px;
    /* Przytulamy do kwoty */
    letter-spacing: 1px;
}

.hud-value-group .amount {

    /* Wysoki, techniczny font */
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.2);
}

.hud-value-group .amount.billable {
    color: #4ade80;
}

.hud-value-group.disabled .amount {
    color: #64748b;
    text-decoration: line-through;
    font-size: 1.2rem;
    text-shadow: none;
}

/* SEKCJA CZASU (DÓŁ) */
.hud-metric-group {
    text-align: right;
}

.metric-value {

    font-size: 1rem;
    font-weight: 700;
    color: #cbd5e1;
}

.metric-label {

    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
}

/* W TOKU (ACTIVE) */
.hud-timer-active {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 204, 21, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(250, 204, 21, 0.2);
}

.timer-digits {
    color: #facc15;

    font-weight: 700;
    font-size: 0.9rem;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #facc15;
    border-radius: 50%;
    box-shadow: 0 0 8px #facc15;
    animation: blinker 1s linear infinite;
    background-color: #10b981;
    display: inline-block;
    margin-right: 6px;
}

/* PRZYCISK STOP (Zastępuje czas gdy zadanie trwa) */
.btn-cyber-action {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fca5a5;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cyber-action:hover {
    background: rgba(220, 38, 38, 0.8);
    color: #fff;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* --- GLASS FOOTER SYSTEM BAR --- */
/* 1. Gradientowa linia na górze stopki */
.footer-top-line {
    height: 1px;
    width: 100%;
    /* Świecący środek, zanikające boki */
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 50%, transparent 100%);
    box-shadow: 0 -1px 5px rgba(59, 130, 246, 0.2);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    /* Stała wysokość paska */
}

/* 2. Lewa strona (Branding) */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.75rem;
}

.brand-name {

    /* Jeśli masz, lub standardowy bold */
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 1px;
}

.ver-badge {

    font-size: 0.6rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    letter-spacing: 0.5px;
}

.copyright-year {
    opacity: 0.5;
    font-size: 0.7rem;
    margin-left: 5px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 10px;
}

/* 3. Prawa strona (Przycisk Admin) */
.btn-sys-admin {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

/* Efekt Hover na przycisku */
.btn-sys-admin:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.settings-icon {
    transition: transform 0.5s ease;
    opacity: 0.7;
}

/* Ikona zębatki obraca się przy najechaniu */
.btn-sys-admin:hover .settings-icon {
    transform: rotate(90deg);
    opacity: 1;
    color: #3b82f6;
    /* Niebieski akcent */
}

/* Opcjonalnie: responsywność */
@media (max-width: 576px) {
    .copyright-year {
        display: none;
    }

    /* Ukrywamy rok na bardzo małych ekranach */
    .ver-badge {
        display: none;
    }
}

.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 8px var(--brand-glow));
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-badge {
    font-size: 0.6rem;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    padding: 2px 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;

    letter-spacing: 1px;
}

/* Date Picker */
/* Shutdown Button */
.btn-shutdown {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-shutdown:hover {
    background: rgba(220, 38, 38, 0.8);
    color: #fff;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
    transform: scale(1.05);
}

/* --- 2. HERO BUTTON (Start) --- */
/* --- 3. DAY STATS (Stacked) --- */
.day-stats-container {
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-stat-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 15px;
}

.icon-box.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

.icon-box.purple {
    background: rgba(168, 85, 247, 0.1);
    color: #c084fc;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right, #fff, #94a3b8);
    background-clip: text;
}

.stat-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 5px 0;
}

/* --- 4. KPI HUD CARDS --- */
.hud-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 3px solid #64748b;
    /* Default color */
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hud-card:hover {
    transform: translateY(-3px);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Kolory ramek */
.hud-card.hud-info {
    border-top-color: #0ea5e9;
}

.hud-card.hud-primary {
    border-top-color: #3b82f6;
}

.hud-card.hud-warning {
    border-top-color: #f59e0b;
}

.hud-card.hud-success {
    border-top-color: #10b981;
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hud-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 800;
    letter-spacing: 1px;
}

.hud-icon {
    font-size: 1.2rem;
    opacity: 0.3;
    transition: 0.3s;
}

.hud-card:hover .hud-icon {
    opacity: 0.8;
    transform: scale(1.1);
}

.hud-info .hud-icon {
    color: #0ea5e9;
}

.hud-primary .hud-icon {
    color: #3b82f6;
}

.hud-warning .hud-icon {
    color: #f59e0b;
}

.hud-success .hud-icon {
    color: #10b981;
}

.hud-value {

    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
}

.hud-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
    text-transform: uppercase;
}

/* Ozdobna linia na dole karty */
.hud-decor-line {
    width: 30px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 12px;
    border-radius: 2px;
}

/* Specjalny efekt dla karty 'Na Rękę' */
.hud-bg-effect {
    position: absolute;
    bottom: -20%;
    right: -20%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
    filter: blur(20px);
}

/* --- KONTENER PANELU --- */
.control-panel {
    background: rgba(255, 255, 255, 0.02);
    /* Bardzo subtelne tło pod całym panelem */
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

/* --- SEPARATOR --- */
.panel-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* --- CYBER INPUT (KALENDARZ) --- */
/* Stan aktywny inputa */
/* Ikona */
.input-icon-wrapper {
    color: #94a3b8;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: 0.3s;
}

.cyber-input-group:focus-within .input-icon-wrapper {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
}

/* Input właściwy */
.cyber-input {
    background: transparent;
    border: none;
    color: #e2e8f0;
    width: 100%;
    font-size: 0.85rem;

    outline: none;
    font-weight: 500;
}

.cyber-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

/* Mała dioda LED statusu po prawej stronie inputa */
.input-status-led {
    width: 8px;
    height: 7px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
    margin-left: -20px;
    opacity: 0.5;
    transition: 0.3s;
}

.cyber-input-group:focus-within .input-status-led {
    opacity: 1;
    background-color: #3b82f6;
    /* Zmienia na niebieski przy pisaniu */
    box-shadow: 0 0 8px #3b82f6;
}

/* --- PRZYCISK POWER (SHUTDOWN) --- */
.btn-power-off {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    /* Czerwony gradient w tle, bardzo delikatny */
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Sprężysty efekt */
    position: relative;
    overflow: hidden;
}

.power-icon-glow {
    position: relative;
    z-index: 2;
    transition: 0.3s;
}

/* Hover - rozświetlenie */
.btn-power-off:hover {
    background: rgba(220, 38, 38, 0.9);
    border-color: #ef4444;
    color: #fff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

.btn-power-off:hover .power-icon-glow {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* Kliknięcie */
.btn-power-off:active {
    transform: scale(0.95);
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.8);
}

/* --- HERO START BUTTON (Styl Deep Dark / Clean) --- */
.hero-start-btn {
    width: 100%;
    min-height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    background: linear-gradient(145deg, #0f172a 0%, #020617 100%);
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
}

/* Efekt Hover - delikatne podniesienie i rozjaśnienie ramki */
.hero-start-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Kontener treści (Flexbox) */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    position: relative;
    z-index: 2;
}

/* Teksty */
.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-weight: 400;
}

/* Ikona Play (Kółko po prawej) */
.hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-size: 2.5rem;
}

/* Hover na ikonę - lekko jaśniejsza */
.hero-start-btn:hover .hero-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

/* Poświata w tle (Ten zielonkawo-niebieski poblask z lewej strony na screenie) */
.hero-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 0% 50%, rgba(20, 184, 166, 0.08) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
    bottom: 0;
    right: 0;
}

.hero-start-btn:hover .hero-bg-glow {
    opacity: 0.8;
    /* Lekka zmiana przy najechaniu */
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
    .hero-content {
        padding: 20px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-icon {
        width: 50px;
        height: 50px;
    }

    .hero-icon i {
        font-size: 20px !important;
    }
}

/* --- KONTENER GŁÓWNY (Cały ekran) --- */
.login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Głębokie tło jak w przycisku START */
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    overflow: hidden;
}

.login-container.hidden {
    display: none !important;
}

/* Subtelna poświata w tle */
.login-bg-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05), transparent 60%);
    animation: rotateBg 20s linear infinite;
    pointer-events: none;
}

@keyframes rotateBg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- KARTA LOGOWANIA --- */
.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: rgba(15, 23, 42, 0.6);
    /* Półprzezroczysty ciemny */
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    /* Rozmycie tła pod kartą */
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Ozdobne narożniki (Tech Look) */
.corner-decor {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    transition: all 0.5s ease;
}

.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 10px 0 0 0;
}

.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-radius: 0 10px 0 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 10px;
}

.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 10px 0;
}

.login-card:hover .corner-decor {
    border-color: #3b82f6;
    width: 30px;
    height: 30px;
}

/* --- NAGŁÓWEK --- */
.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.login-title {

    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
}

.login-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- POLA FORMULARZA (Cyber Inputs) --- */
.cyber-field-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 2px 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.field-icon {
    color: #475569;
    font-size: 1rem;
    margin-right: 10px;
    width: 20px;
    text-align: center;
    transition: 0.3s;
}

.cyber-input-login {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 0;
    outline: none;

    font-size: 0.95rem;
}

/* Animowany pasek na dole inputa */
.field-border {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 1px;
    background: #3b82f6;
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

/* Stan Focus inputa */
.cyber-field-group:focus-within {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.cyber-field-group:focus-within .field-border {
    width: 100%;
}

.cyber-field-group:focus-within .field-icon {
    color: #60a5fa;
}

/* --- PRZYCISK LOGOWANIA --- */
.btn-login-action {
    position: relative;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

.btn-login-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.btn-glare {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-login-action:hover .btn-glare {
    left: 150%;
    transition: 0.7s;
}

/* --- STOPKA --- */
.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 0.65rem;
    color: #475569;

    opacity: 0.6;
}

/* --- MODAL CONTAINER --- */
.glass-modal-content {
    background: #0f172a;
    /* Bardzo ciemny granat/czarny */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    color: #e2e8f0;
    overflow: hidden;
}

/* HEADER */
.modal-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.cyber-title {

    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
}

.modal-subtitle {
    font-size: 0.75rem;
    color: #64748b;
}

.btn-close-cyber {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.2rem;
    transition: 0.3s;
}

.btn-close-cyber:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* --- HUD RADIO TOGGLE --- */
.hud-radio-container {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hud-radio-btn {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.hud-radio-btn i {
    margin-right: 6px;
}

/* Active States */
.btn-check:checked+.hud-radio-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Specjalny kolor dla W TOKU */
.btn-check:checked+.hud-radio-btn.running-mode {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.3);
}

/* --- INPUTS & LABELS --- */
.cyber-input-group {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
    width: 280px;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    display: flex;
    width: 260px;
}

.width-110 {
    width: 110px;
}

.cyber-input-group:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(59, 130, 246, 0.15);
}

.cyber-label {
    display: block;
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cyber-select,
.cyber-input,
.cyber-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    padding: 4px 0;
}

.cyber-select option {
    background: #1e293b;
    color: #fff;
}

.cyber-textarea {
    min-height: 100px;
    resize: vertical;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Status Bar (Active Input Indicator) */
.field-status-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: #3b82f6;
    transition: 0.3s;
}

.cyber-input-group:focus-within .field-status-bar {
    width: 100%;
}

/* --- TIME CONTROL PANEL --- */
.time-control-panel {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
}

.time-drum {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 4px;
    padding: 4px;

    font-size: 1.1rem;
    cursor: pointer;
}

.time-drum:focus {
    border-color: #3b82f6;
    outline: none;
}

.time-drum option {
    background: #1e293b;
}

.cyber-input-duration {
    background: transparent;
    border: none;
    color: #3b82f6;

    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    outline: none;
}

/* --- RUNNING MODE UI --- */
.pulse-ring {
    width: 12px;
    height: 12px;
    background: #facc15;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(250, 204, 21, 0.4);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
}

.btn-finish-now {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border: 1px solid #ef4444;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
}

.btn-finish-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(185, 28, 28, 0.5);
}

/* --- FOOTER BUTTONS --- */
.btn-cyber-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 8px 20px;
    border-radius: 6px;
    transition: 0.3s;
}

.btn-cyber-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.btn-cyber-accent {
    background: #3b82f6;
    border: none;
    color: #fff;
    padding: 8px 24px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: 0.3s;
}

.btn-cyber-accent:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

.btn-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fff;
}

/* Wymuszenie, żeby modal był zawsze na samej górze */
/* Upewnij się, że .hidden naprawdę ukrywa */
/* --- MODAL CONTAINER --- */
.premium-glass-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    color: #fff;
    overflow: hidden;
}

/* HEADER */
.btn-close-custom {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-custom:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- 1. SEGMENTED CONTROL (Przełącznik Typu) --- */
.segmented-control-wrapper {
    display: flex;
    justify-content: center;
}

.segmented-control {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 12px;
    display: inline-flex;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.segmented-control input {
    display: none;
}

.segment-item {
    flex: 1;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
    border-radius: 8px;
}

.segment-item:hover {
    color: #94a3b8;
}

/* Efekty aktywne */
input:checked+.segment-item {
    color: #fff;
}

/* Logika "Pływaka" (wymaga JS lub statycznego CSS per ID) - tutaj uproszczona wersja statyczna CSS */
input#t-b2b:checked~.segment-item[for="t-b2b"],
input#t-etat:checked~.segment-item[for="t-etat"],
input#t-nolimit:checked~.segment-item[for="t-nolimit"] {
    background: rgba(59, 130, 246, 0.8);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

input#t-nolimit:checked~.segment-item[for="t-nolimit"] {
    background: rgba(234, 179, 8, 0.9);
    /* Żółty dla W TOKU */
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.4);
    color: #000;
}

/* --- 2. GLASS INPUTS --- */
.glass-input-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 8px 12px;
    transition: 0.3s;
    position: relative;
}

.glass-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

.input-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    display: block;
}

.input-inner {
    display: flex;
    align-items: center;
}

.input-icon {
    color: #475569;
    margin-right: 10px;
    font-size: 0.9rem;
}

.arrow-icon {
    color: #475569;
    font-size: 0.7rem;
    pointer-events: none;
    position: absolute;
    right: 12px;
}

.glass-input,
.glass-select,
.glass-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    font-weight: 500;
}

/* Ukrycie domyślnej strzałki selecta */
.glass-select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.glass-select option {
    background: #1e293b;
    color: #fff;
}

.glass-textarea {
    min-height: 80px;
    resize: none;
    line-height: 1.5;
    margin-top: 5px;
}

/* --- 3. TIME MODULE (Dashboard Style) --- */
.time-module-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 4px;
    /* Padding na zewnątrz */
}

.time-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 20px;
}

.time-block {
    text-align: center;
}

.time-label {
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

.digital-clock-picker {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    /* Ciemniejsze tło pod cyframi */
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Efekt wklęśnięcia */
}

.digit-select:focus {
    color: #3b82f6;
    outline: none;
}

/* Duration Bridge (Środek) */
.duration-bridge {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    position: relative;
    top: 8px;
    /* Wyrównanie optyczne */
}

.duration-bridge .line {
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
}

.duration-badge {
    background: #3b82f6;
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* Ukrycie strzałek input number */
.duration-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 4. PANELS (Active / Etat) --- */
.active-task-panel {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, rgba(234, 179, 8, 0.02) 100%);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.active-anim {
    width: 40px;
    height: 40px;
    background: #eab308;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2px solid #eab308;
    animation: ripple 1.5s infinite;
}

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

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.active-info h6 {
    margin: 0;
    color: #eab308;
    font-size: 0.9rem;
    font-weight: 700;
}

.active-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.btn-terminate {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid #dc2626;
    color: #fca5a5;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    transition: 0.2s;
}

.btn-terminate:hover {
    background: #dc2626;
    color: #fff;
}

.etat-info-panel {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* --- 5. FOOTER & EXTRAS --- */
.description-wrapper {
    padding-bottom: 25px;
}

/* Miejsce na licznik */
.char-count {
    font-size: 0.7rem;
    color: #475569;
}

.cost-badge {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-glass-primary {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: 0.3s;
    letter-spacing: 0.5px;
}

.btn-glass-primary:hover {
    background: #2563eb;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.btn-glass-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    transition: 0.3s;
}

.btn-glass-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.btn-icon-trash {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #64748b;
    transition: 0.2s;
}

.btn-icon-trash:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* --- 1. BACKDROP & OVERLAY (EFEKT PRZYĆMIENIA) --- */
/* Poprawka, żeby bootstrap nie nadpisywał opacity */
.modal-backdrop.show {
    opacity: 1 !important;
}

/* --- 2. MODAL CONTAINER (COMMAND CENTER) --- */
.cyber-modal-window {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, rgba(8, 10, 20, 0.98) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    /* Subtelna niebieska ramka */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        /* Obrys */
        0 20px 50px rgba(0, 0, 0, 0.8),
        /* Cień głębi */
        0 0 100px rgba(59, 130, 246, 0.05);
    /* Delikatna poświata */
    border-radius: 12px;
    color: #e2e8f0;

    overflow: hidden;
    position: relative;
}

/* Dekoracyjny pasek na górze (Scanner Line) */
.cyber-modal-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    box-shadow: 0 0 10px #3b82f6;
    z-index: 5;
}

/* --- 3. HEADER --- */
.cyber-modal-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cyber-modal-title {

    /* Jeśli masz, jak nie to standard */
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-icon {
    color: #3b82f6;
    font-size: 1.2rem;
}

.btn-cyber-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cyber-close:hover {
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* --- 4. TYPE SWITCHER (TAB BAR) --- */
.cyber-tabs {
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.cyber-tab-label {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cyber-tab-label:hover {
    background: rgba(255, 255, 255, 0.02);
    color: #94a3b8;
}

/* Aktywne stany */
.btn-check:checked+.cyber-tab-label {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
    color: #fff;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

/* Wariant W TOKU */
.btn-check[value="running"]:checked+.cyber-tab-label {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.4);
    color: #facc15;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.15);
    text-shadow: 0 0 5px rgba(234, 179, 8, 0.5);
}

/* --- 5. INPUTS (DATA SLOTS) --- */
.data-slot {
    background: rgba(10, 14, 26, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    /* Kreska na dole zamiast ramki */
    padding: 8px 12px;
    transition: 0.3s;
    position: relative;
    margin-bottom: 5px;
}

.data-slot:focus-within {
    background: rgba(15, 23, 42, 0.8);
    border-bottom-color: #3b82f6;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
}

.slot-label {
    font-size: 0.6rem;
    color: #475569;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.slot-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    font-weight: 500;
}

/* --- 6. TIME MODULE (DIGITAL CLOCK) --- */
.time-panel-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.digital-clock-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.clock-segment {
    text-align: center;
}

.digit-box {
    background: #000;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;

    /* Techniczny font */
    font-size: 1.4rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
    display: flex;
    gap: 2px;
}

.digit-select {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    outline: none;
    appearance: none;
    cursor: pointer;
    padding: 0;

    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* Środkowa sekcja trwania */
.duration-display {
    text-align: center;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
    min-width: 80px;
}

.duration-input-field {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    width: 60px;
    outline: none;
}

.duration-unit {
    font-size: 0.8rem;
    color: #64748b;
}

/* Panel W TOKU */
.running-overlay {
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.running-status {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pulse-beacon {
    width: 12px;
    height: 12px;
    background: #eab308;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(234, 179, 8, 0.7);
    animation: beacon 1.5s infinite;
}

@keyframes beacon {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(234, 179, 8, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
    }
}

.btn-stop-action {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #dc2626;
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-stop-action:hover {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
}

/* --- 7. FOOTER & ACTIONS --- */
.cyber-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn-cyber-secondary {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 10px 20px;
    transition: 0.3s;
    cursor: pointer;
}

.btn-cyber-secondary:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.btn-cyber-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #fff;
    padding: 10px 35px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    /* Kształt sci-fi */
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

.btn-cyber-primary:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    transform: translateY(-2px);
}

.cost-display {
    position: absolute;
    left: 25px;
    align-self: center;

    color: #10b981;
    font-weight: 700;
}

/* 3. Poprawka dla selectów w systemie slotów (żeby dało się klikać) */
.slot-input option {
    background-color: #0f172a;
    color: #fff;
    padding: 10px;
    background: #0f172a;
}

/* --- CYBER TABS (Dla Admin Modal) --- */
.cyber-nav-container {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 10px;
}

.cyber-nav-link {
    flex: 1;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    padding: 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.cyber-nav-link:hover {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.02);
}

/* Aktywna zakładka */
.cyber-nav-link.active {
    background: rgba(16, 185, 129, 0.1);
    /* Zielony akcent dla Admina */
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
}

/* --- LISTY W ADMINIE (Generowane dynamicznie) --- */
/* To sprawi, że elementy listy, które ładujesz JS-em, będą wyglądać dobrze */
.cyber-list-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.cyber-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Nowy styl panelu czasu */
.cyber-clock-wrapper {
    background: #0f172a;
    /* Bardzo ciemne tło */
    border: 1px solid #1e293b;
    border-radius: 16px;
    padding: 20px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.clock-label {
    font-family: var(--font-main), sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-align: center;
}

/* Kontenery cyfr */
.digit-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.digit-group:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* Wygląd selectów i inputów */
.cyber-digit {
    background: transparent;
    border: none;
    color: #f8fafc;
    /* Czcionka techniczna */
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
    margin: 0;
    text-align: center;
    appearance: none;
    /* Ukrywa strzałkę selecta */
    cursor: pointer;
    width: 40px;
}

.cyber-digit:focus {
    outline: none;
    color: #3b82f6;
}

.colon {
    color: #475569;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 5px;
    animation: blink 2s infinite;
}

/* Sekcja środkowa (Czas trwania) */
.duration-group {
    background: rgba(59, 130, 246, 0.1);
    /* Lekka niebieska poświata */
    border-color: rgba(59, 130, 246, 0.3);
}

.duration-input {
    width: 80px;
    color: #60a5fa;
    background: transparent;
    border: none;
    font-weight: 700;
    outline: none;
    text-align: right;
}

/* Statusy (Ukryte panele) */
.status-panel {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.status-running {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.status-etat {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    justify-content: center;
    flex-direction: column;
}

@keyframes blink {
    50% {
        opacity: 0.4;
    }
}

/* Gwarantuje ukrywanie elementów nawet gdy mają display: flex */
/* Wymuszenie ciemnego tła dla wszystkich opcji list rozwijanych */
select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Upewnienie się, że działa to również dla specyficznych klas Twojego projektu */
.form-select option,
.digit-select option,
.slot-input option,
.cyber-digit option,
.time-input-modern option {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* --- KANBAN BOARD STYLES --- */
.kanban-board-wrapper {
    display: flex;
    overflow-x: auto;
    padding-bottom: 20px;
    gap: 20px;
    align-items: flex-start;
    min-height: 400px;
}

.kanban-col {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    min-width: 300px;
    width: 300px;
    max-height: 180vh;
    display: flex;
    flex-direction: column;
}

.kanban-col-header {
    padding: 15px;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}

/* KARTA ZADANIA */
/* Priorytety */
.kanban-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 5px;
    line-height: 1.3;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 8px;
}

/* Drag & Drop */
/* Toggle Switcher */
.glass-toggle-group button {
    transition: 0.3s;
    border: 1px solid transparent;
}

.glass-toggle-group button.active {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* --- CYBER NAVIGATION DOCK --- */
.cyber-nav-dock {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    /* Ciemne półprzezroczyste tło */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 6px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    width: 100%;
}

.nav-dock-btn {
    flex: 1;
    /* Rozciągnij przyciski po równo */
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
    /* Wygaszony kolor tekstu */
}

/* Zawartość przycisku */
.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.nav-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.nav-text {
    font-family: var(--font-main), sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* --- STAN HOVER (Nieaktywny) --- */
.nav-dock-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
}

.nav-dock-btn:hover:not(.active) .nav-icon {
    transform: scale(1.1);
    color: #e2e8f0;
}

/* --- STAN AKTYWNY (Wybrana zakładka) --- */
.nav-dock-btn.active {
    color: #fff;
    border-color: rgba(59, 130, 246, 0.3);
    /* Ramka Primary Blue */
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Tło gradientowe dla aktywnego przycisku */
.nav-dock-btn.active .active-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.05) 100%);
    z-index: 1;
}

/* Dodatkowy efekt "Flash" na dole aktywnego przycisku */
.nav-dock-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    width: 40%;
    height: 2px;
    background: #3b82f6;
    box-shadow: 0 0 10px #3b82f6;
    border-radius: 2px 2px 0 0;
    z-index: 3;
    animation: expandWidth 0.4s ease forwards;
}

.nav-dock-btn.active .nav-icon {
    color: #60a5fa;
    /* Jasny niebieski dla ikony */
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

@keyframes expandWidth {
    from {
        width: 0%;
        opacity: 0;
    }

    to {
        width: 40%;
        opacity: 1;
    }
}

/* Responsywność dla mobile */
@media (max-width: 576px) {
    .nav-text {
        display: none;
        /* Ukryj tekst na bardzo małych ekranach, zostaw ikony */
    }

    .nav-dock-btn {
        padding: 12px;
    }

    .nav-icon {
        font-size: 1.3rem;
        margin: 0;
    }
}

/* --- NOWY WYGLĄD KARTY KANBAN (CYBER STYLE) --- */
/* Efekt Hover - Uniesienie i poświata */
.kanban-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(59, 130, 246, 0.1);
    background: rgba(59, 130, 246, 0.1);
}

/* Pasek priorytetu z lewej strony (zamiast kropki, bardziej widoczny) */
.kanban-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--prio-color, #3b82f6);
    box-shadow: 2px 0 10px var(--prio-color);
}

/* Definicje kolorów priorytetów */
.kanban-card.k-prio-low {
    --prio-color: #10b981;
    border-left-color: #10b981;
}

/* Zielony */
.kanban-card.k-prio-medium {
    --prio-color: #3b82f6;
    border-left-color: #3b82f6;
}

/* Niebieski */
.kanban-card.k-prio-high {
    --prio-color: #ef4444;
    border-left-color: #ef4444;
}

/* Czerwony */
/* --- SEKCJA 1: FIRMA + PRIORYTET --- */
.k-header {
    padding: 12px 15px 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.k-company {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
}

/* Pulsująca kropka priorytetu w nagłówku */
.k-prio-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--prio-color);
    box-shadow: 0 0 8px var(--prio-color);
}

.kanban-card.k-prio-high .k-prio-badge {
    animation: pulse-red 1.5s infinite;
}

/* --- SEPARATOR (Kreska) --- */
.k-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    width: 100%;
}

/* --- SEKCJA 2: TREŚĆ (TYTUŁ + OPIS) --- */
.k-body {
    padding: 10px 15px;
}

.k-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 6px;
    line-height: 1.4;
}

.k-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Ucinaj po 3 liniach */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- SEKCJA 3: META (DATA + TAGI) --- */
.k-date {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #cbd5e1;

    /* Techniczny font daty */
}

.k-date i {
    color: #64748b;
    margin-right: 6px;
}

/* Data przeterminowana */
.k-date.overdue {
    color: #fca5a5;
}

.k-date.overdue i {
    color: #ef4444;
}

.k-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.k-tag {
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    font-weight: 600;
    text-transform: uppercase;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* --- LICZNIK ZADAŃ W KOLUMNIE (BADGE) --- */
.col-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    min-width: 23px;
    height: 22px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-right: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 23px;
}

/* --- Główna klasa bazowa dla wszystkich przycisków --- */
.btn-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    /* Więcej przestrzeni wewnątrz */
    font-family: inherit;
    /* Dziedziczenie czcionki z body */
    font-weight: 600;
    /* Lekko pogrubiona czcionka */
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    /* Lekki odstęp między literami */
    border: none;
    border-radius: 8px;
    /* Nowoczesne zaokrąglenie */
    cursor: pointer;
    transition: all 0.2s ease;
    /* Płynna animacja */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Delikatny cień pod spodem */
    text-transform: uppercase;
    /* Opcjonalnie: wielkie litery dla czytelności */
}

/* Efekt najechania myszką (wspólny) */
.btn-app:hover {
    transform: translateY(-2px);
    /* Lekkie uniesienie */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Mocniejszy cień */
}

/* Efekt kliknięcia (wspólny) */
.btn-app:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Wariant 1: Przycisk ZAPISZ (Główny/Niebieski lub Ciemny) --- */
.btn-save {
    background-color: #3b82f6;
    /* Nowoczesny niebieski (zmień na swój główny kolor) */
    color: #ffffff;
}

/* Opcjonalnie: Jeśli wolisz ciemny przycisk "Zapisz" zamiast niebieskiego:
.btn-save {
    background-color: #1f2937;
    color: #fff;
}
*/
/* --- Wariant 2: Przycisk FINALIZUJ (Zielony/Sukces) --- */
.btn-finalize {
    /* Zamiast ostrego gradientu, subtelniejszy i bardziej elegancki */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.btn-finalize:hover {
    /* Rozjaśnienie przy najechaniu */
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

/* Ikony wewnątrz przycisków */
.btn-app i {
    font-size: 1.1em;
    /* Ikona minimalnie większa od tekstu */
}

/* --- Wariant 3: Przycisk ZAMKNIJ / ANULUJ (Neutralny) --- */
/* Opcjonalnie: Jeśli wolisz bardzo jasny, "niewidzialny" przycisk zamknięcia */
/* .btn-cancel {
    background-color: #f1f5f9; 
    color: #475569; 
}
.btn-cancel:hover {
    background-color: #e2e8f0;
}
*/
/* --- Wariant 4: Przycisk SUKCES / ZATWIERDŹ (Zielony Gradient) --- */
/* Użyj tej klasy tam, gdzie miałeś style="background: linear-gradient..." */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* Twój zielony */
    color: #ffffff;
    border: none;
}

.btn-success:hover {
    /* Odrobinę jaśniejszy/żywszy gradient przy najechaniu */
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    /* Zielona poświata */
}

/* --- (Przypomnienie) Wariant 3: Przycisk ANULUJ / WYCZYŚĆ (Szary) --- */
/* Jeśli nie dodałeś tego przy poprzednim pytaniu: */
.btn-cancel {
    background-color: #64748b;
    color: #ffffff;
}

.btn-cancel:hover {
    background-color: #475569;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

/* --- WYKRES CHART.JS --- */
.chart-wrapper {
    position: relative;
    height: 350px;
    /* Kluczowe: Sztywna wysokość */
    width: 100%;
}

#activityChart {
    width: 100% !important;
    height: 100% !important;
}

/* Input daty w nagłówku karty (opcjonalny, jeśli używasz) */
.header-date-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.8rem;
    width: 200px;
    text-align: center;
    cursor: pointer;
}

/* --- POPRAWKI UI --- */
/* 1. Stopka zawsze na dole (Sticky Footer) */
.container-fluid {
    flex: 1;
    /* Wypycha stopkę */
}

.glass-footer {
    margin-top: auto;
    position: relative !important;
    bottom: auto;
    left: auto;
    backdrop-filter: blur(10px);
    background: rgba(10, 15, 30, 0.85);

    padding: 0;
}

/* 2. Z-index naprawa Menu i Modali */
.dropdown-menu {
    z-index: 9999 !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
    backdrop-filter: blur(12px) !important;
    background-color: rgba(5, 8, 16, 0.85) !important;
}

/* Toastr Container najwyżej */
#toast-container {
    z-index: 999999 !important;
}

/* 3. Stylowanie Toastr (Powiadomienia) */
/* 4. SweetAlert2 Custom Style */
div:where(.swal2-container) div:where(.swal2-popup) {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px !important;
    color: #fff !important;
}

div:where(.swal2-icon) {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. Sekcja Zaawansowane (Ukryta domyślnie) */
.advanced-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    margin-top: 15px;
}

/* 6. Formularz edycji firmy (zwijany) */
.admin-collapse-content {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- TOASTR CUSTOM DARK THEME --- */
/* Pasek postępu */
.toast-progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    height: 3px !important;
    bottom: 0;
    top: auto;
}

/* Wariant SUKCES */
#toast-container>.toast-success::before {
    content: "\f00c";
    /* Ikona FontAwesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #10b981;
}

/* Wariant BŁĄD */
#toast-container>.toast-error::before {
    content: "\f071";
    /* Ikona FontAwesome Exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #ef4444;
}

/* Wariant INFO */
#toast-container>.toast-info::before {
    content: "\f05a";
    /* Ikona FontAwesome Info */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #3b82f6;
}

/* Wariant OSTRZEŻENIE */
#toast-container>.toast-warning::before {
    content: "\f12a";
    /* Ikona FontAwesome Exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #f59e0b;
}

/* Tytuł i Wiadomość */
.toast-message {
    font-family: var(--font-main), sans-serif;
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Stylizacja Toastr */
#toast-container>.toast {
    background-color: #0f172a !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    background-image: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 20px 20px 20px 60px !important;
    position: relative;
}

/* Styl dla komunikatu Cross-Day w modalu */
/* Styl dla daty w historii (scalanie) */
.date-pill .fa-arrow-right-long {
    color: #f59e0b;
    /* Warning color */
    opacity: 0.8;
}

/* Ikony akcji (edycja/usuwanie) */
.btn-icon-action {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 5px;
    transition: color 0.2s;
}

.btn-icon-action:hover {
    color: #fff;
}

.btn-icon-action.edit:hover {
    color: #3b82f6;
}

.btn-icon-action.delete:hover {
    color: #ef4444;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Walidacja dynamiczna pod inputami [Pkt 4] */
.validation-msg {
    font-size: 0.7rem;
    color: #ef4444;
    /* Czerwony */
    margin-top: 4px;
    min-height: 14px;
    /* Rezerwuje miejsce żeby nie skakało */
    transition: all 0.2s;
    font-weight: 500;
}

.validation-msg.valid {
    color: #10b981;
    /* Zielony */
}

/* Informacja o ostatniej edycji [Pkt 3] */
.last-update-info {
    font-size: 0.65rem;
    color: #64748b;
    text-align: right;
    margin-top: 5px;
    font-style: italic;
}

/* Ukrywanie elementów w zależności od trybu */
.hidden {
    display: none !important;
}

/* --- IKONY W STOPCE MODALA --- */
.btn-ghost-icon {
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    /* Szary */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* Okrągłe */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    cursor: pointer;
}

.btn-ghost-icon:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transform: scale(1.1);
}

.btn-ghost-icon.delete:hover {
    color: #ef4444;
    /* Czerwony przy hover */
    background: rgba(239, 68, 68, 0.1);
}

.btn-ghost-icon.edit:hover {
    color: #3b82f6;
    /* Niebieski przy hover */
    background: rgba(59, 130, 246, 0.1);
}

/* --- INFO O DACIE (CROSS-DAY) --- */
#modal-date-info {
    font-size: 0.75rem;
    margin-top: 10px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
    border-radius: 4px;
    color: #bfdbfe;
    animation: fadeIn 0.3s;
    text-align: center;
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

/* --- Stylizacja Toastr (Powiadomienia) --- */
#toast-container>div {
    opacity: 0.95;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    width: 320px !important;
    /* Mniejsze okienka */
    padding: 15px 15px 15px 60px;
    /* Miejsce na ikonę */
    border-radius: 12px;
    /* Nowoczesne zaokrąglenie */
    background-color: #1e293b;
    /* Ciemne tło zgodne z motywem */
    color: #fff;
}

/* Kolory typów powiadomień */
#toast-container>.toast-success {
    border-left: 4px solid #10b981;
    background-image: none !important;
}

#toast-container>.toast-error {
    border-left: 4px solid #ef4444;
    background-image: none !important;
}

#toast-container>.toast-info {
    border-left: 4px solid #3b82f6;
    background-image: none !important;
}

#toast-container>.toast-warning {
    border-left: 4px solid #f59e0b;
    background-image: none !important;
}

/* Dodanie własnych ikon FontAwesome zamiast domyślnych obrazków */
#toast-container>.toast-success:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 20px;
    color: #10b981;
}

#toast-container>.toast-error:before {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 20px;
    color: #ef4444;
}

/* Efekt paska postępu */
#toast-container .toast-progress {
    background: linear-gradient(90deg, #3b82f6, #10b981);
    height: 3px;
    opacity: 0.8;
    bottom: 0;
    top: auto;
}

/* Hover effect */
#toast-container>div:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.kanban-col-title {
    outline: none;
    border-radius: 8px;
    padding: 2px 6px;
}

.kanban-col-title[contenteditable="true"]:focus {
    background: rgba(59, 130, 246, 0.12);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35) inset;
}

.att-wrap {
    width: 100%;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    padding: 10px;
}

.att-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
}

.att-row:hover {
    background: rgba(148, 163, 184, 0.08);
}

.att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-meta {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.9);
    white-space: nowrap;
}

.att-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* .glass-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999 !important;
} */
/* body {
    padding-bottom: 90px;
} */
.btn-attach {
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(2, 132, 199, 0.12);
    color: #e2e8f0;
    font-size: 0.72rem;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s ease-in-out;
}

.btn-attach:hover {
    background: rgba(2, 132, 199, 0.22);
    border-color: rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
}

.kanban-col .dropdown-menu,
.dropdown-menu.dropdown-menu-dark {
    z-index: 9999 !important;
}

.toast-slim {
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    min-width: 280px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.toast-title {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: var(--font-main), sans-serif;
    margin-bottom: 5px;
}

.toast-close {
    color: rgba(226, 232, 240, 0.8) !important;
}

.swal2-timer-progress-bar {
    background: rgba(56, 189, 248, 0.7) !important;
}

.k-footer {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px;
}

.k-att {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.75rem;
    opacity: .85;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    padding: 3px 7px;
}

.dragging-kanban .kanban-card {
    cursor: grabbing !important;
}

.kanban-col-body {
    min-height: 60px;
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}

.sortable-ghost {
    opacity: 0.35;
    background: #3b82f6;
}

.sortable-chosen {
    opacity: 0.85;
}

.sortable-drag {
    opacity: 0.9;
    cursor: grabbing;
}

.k-drag-handle:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.35);
}

.kanban-card {
    position: relative;
    border-left: 3px solid transparent;
    padding: 12px;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sortable-drag,
.sortable-chosen,
.sortable-ghost,
.dragging-kanban .kanban-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.k-drag-handle {
    cursor: grab;
    background: rgba(15, 23, 42, 0.25);
    border-radius: 8px;
    font-size: .85rem;
    opacity: .65;
    padding: 4px 6px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.sortable-drag .k-drag-handle {
    cursor: grabbing !important;
}


.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    overflow: hidden;
}

.auth-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 15% 20%, rgba(59, 130, 246, 0.22), transparent 60%),
        radial-gradient(900px 600px at 85% 70%, rgba(16, 185, 129, 0.18), transparent 55%),
        radial-gradient(700px 500px at 60% 20%, rgba(236, 72, 153, 0.10), transparent 55%),
        #070b14;
}

.auth-grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 75%);
    opacity: .65;
}

.auth-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
    transform: translateZ(0);
    animation: authFloat 10s ease-in-out infinite;
}

.auth-glow-1 {
    left: -120px;
    top: -140px;
    background: rgba(59, 130, 246, 0.25);
}

.auth-glow-2 {
    right: -140px;
    bottom: -160px;
    background: rgba(16, 185, 129, 0.20);
    animation-duration: 12s;
}

@keyframes authFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0)
    }

    50% {
        transform: translate3d(0, 18px, 0)
    }
}

.auth-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
    opacity: .12;
    mix-blend-mode: overlay;
}

.auth-shell {
    position: relative;
    width: min(1020px, 100%);
}

.auth-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.auth-left {
    padding: 28px 28px 24px;
    background:
        radial-gradient(700px 420px at 20% 10%, rgba(59, 130, 246, 0.22), transparent 55%),
        radial-gradient(640px 420px at 70% 90%, rgba(16, 185, 129, 0.16), transparent 55%),
        rgba(15, 23, 42, 0.60);
    border-right: 1px solid rgba(148, 163, 184, 0.14);
}

.auth-right {
    padding: 28px 28px 24px;
    background: rgba(15, 23, 42, 0.72);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.28);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.18);
}

.auth-title {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 1.1rem;
    color: #f1f5f9;
}

.auth-subtitle {
    font-size: .82rem;
    color: rgba(226, 232, 240, 0.70);
    margin-top: 2px;
}

.auth-bullets {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-bullet {
    display: flex;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.auth-bullet-ico {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.auth-bullet-h {
    font-weight: 700;
    color: #e2e8f0;
    font-size: .9rem;
}

.auth-bullet-p {
    font-size: .78rem;
    color: rgba(226, 232, 240, 0.68);
    margin-top: 2px;
}

.auth-foot {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-pill {
    font-size: .72rem;
    color: rgba(226, 232, 240, 0.78);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.26);
}

.auth-mini {
    font-size: .75rem;
    color: rgba(148, 163, 184, 0.85);
}

.auth-headline {
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: .2px;
    color: #f8fafc;
}

.auth-hint {
    margin-top: 4px;
    font-size: .86rem;
    color: rgba(226, 232, 240, 0.65);
}

.auth-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-label {
    font-size: .78rem;
    color: rgba(226, 232, 240, 0.72);
    margin-bottom: 6px;
    display: block;
}

.auth-input-wrap {
    position: relative;
}

.auth-input {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 42px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #f1f5f9;
    outline: none;
    transition: .15s ease;
}

.auth-input:focus {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    background: rgba(2, 6, 23, 0.42);
}

.auth-input::placeholder {
    color: rgba(148, 163, 184, 0.65);
}

.auth-input-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.85);
    font-size: .95rem;
}

.auth-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(148, 163, 184, 0.9);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .12s ease;
}

.auth-eye:hover {
    background: rgba(148, 163, 184, 0.12);
}

.auth-btn {
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(6, 182, 212, 0.75));
    color: #fff;
    font-weight: 800;
    letter-spacing: .9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .15s ease;
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.20);
}

.auth-meta {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(226, 232, 240, 0.62);
    font-size: .76rem;
}

.auth-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-bottom {
    margin-top: 18px;
    color: rgba(148, 163, 184, 0.78);
    font-size: .74rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-dot {
    opacity: .5;
}

@media (max-width: 920px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-left {
        display: none;
    }

    .auth-right {
        background: rgba(15, 23, 42, 0.76);
    }
}

.last-update-info {
    font-size: 0.6rem;
    color: #64748b;
    text-align: right;
    margin-top: 15px;
    font-style: italic;
}

.cost-display {
    position: absolute;
    left: 25px;
    align-self: center;
    color: #10b981;
    font-weight: 700;
    margin-top: -20px;
}



/* --- UPLOAD OVERLAY (PROGRESS BAR) --- */
#upload-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    /* Ciemne tło */
    backdrop-filter: blur(10px);
    /* Rozmycie tego co pod spodem */
    z-index: 9999999 !important;
    /* Musi być najwyżej */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#upload-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.upload-box {
    background: #1e293b;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}

/* Pasek postępu */
.upload-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 20px 0 10px 0;
    overflow: hidden;
    position: relative;
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.upload-spinner {
    font-size: 3rem;
    color: #3b82f6;
    margin-bottom: 15px;
    animation: spin 1s linear infinite;
}

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

/* ========================================================================
   Light mode component overrides (v2) — does NOT affect dark mode
   ======================================================================== */

html[data-bs-theme="light"] body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
}

/* Core surfaces (cards, panels, boards) */
html[data-bs-theme="light"] .glass-card,
html[data-bs-theme="light"] .cyber-header,
html[data-bs-theme="light"] .day-stats-container,
html[data-bs-theme="light"] .cyber-nav-dock,
html[data-bs-theme="light"] .modern-grid-container,
html[data-bs-theme="light"] .modern-table,
html[data-bs-theme="light"] .time-panel-wrapper,
html[data-bs-theme="light"] .company-section,
html[data-bs-theme="light"] .summary-main,
html[data-bs-theme="light"] .summary-footer,
html[data-bs-theme="light"] .kanban-col,
html[data-bs-theme="light"] .kanban-col-header,
html[data-bs-theme="light"] .kanban-col-body,
html[data-bs-theme="light"] .kanban-card,
html[data-bs-theme="light"] .cyber-card,
html[data-bs-theme="light"] .hud-card {
    background: rgba(255, 255, 255, 0.86) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Modal */
html[data-bs-theme="light"] .cyber-modal-window,
html[data-bs-theme="light"] .modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16) !important;
}

html[data-bs-theme="light"] .cyber-modal-header {
    background: rgba(15, 23, 42, 0.03) !important;
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

html[data-bs-theme="light"] .cyber-modal-title {
    color: #0f172a !important;
    text-shadow: none !important;
}

html[data-bs-theme="light"] .btn-cyber-close {
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: rgba(15, 23, 42, 0.65) !important;
}

html[data-bs-theme="light"] .btn-cyber-close:hover {
    border-color: rgba(239, 68, 68, 0.55) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.18) !important;
}

/* Slots / labels */
html[data-bs-theme="light"] .data-slot {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-bs-theme="light"] .data-slot:focus-within {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: rgba(59, 130, 246, 0.55) !important;
}

html[data-bs-theme="light"] .slot-label {
    color: #64748b !important;
}

/* Inputs */
html[data-bs-theme="light"] .slot-input,
html[data-bs-theme="light"] .glass-search-input,
html[data-bs-theme="light"] .cyber-input,
html[data-bs-theme="light"] .cyber-digit,
html[data-bs-theme="light"] .cyber-input-login,
html[data-bs-theme="light"] .search-input,
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-bs-theme="light"] .slot-input::placeholder,
html[data-bs-theme="light"] .glass-search-input::placeholder,
html[data-bs-theme="light"] .cyber-input::placeholder,
html[data-bs-theme="light"] .search-input::placeholder {
    color: rgba(15, 23, 42, 0.45) !important;
}

/* Switches */
html[data-bs-theme="light"] .form-check-input {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-bs-theme="light"] .form-check-input:checked {
    background-color: var(--success-accent) !important;
    border-color: var(--success-accent) !important;
}

/* Dropdowns (even if you use dropdown-menu-dark) */
html[data-bs-theme="light"] .dropdown-menu.dropdown-menu-dark {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
}

html[data-bs-theme="light"] .dropdown-menu.dropdown-menu-dark .dropdown-item {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .dropdown-menu.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.10) !important;
}

/* TomSelect */
html[data-bs-theme="light"] .ts-wrapper .ts-control,
html[data-bs-theme="light"] .ts-wrapper.single .ts-control {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}

html[data-bs-theme="light"] .ts-control input {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .ts-dropdown {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-bs-theme="light"] .ts-dropdown .option {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .ts-dropdown .option:hover {
    background: rgba(59, 130, 246, 0.10) !important;
}

/* Flatpickr (you include dark.css — this forces it to look light anyway) */
html[data-bs-theme="light"] .flatpickr-calendar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
}

html[data-bs-theme="light"] .flatpickr-months .flatpickr-month,
html[data-bs-theme="light"] .flatpickr-weekdays,
html[data-bs-theme="light"] span.flatpickr-weekday {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-bs-theme="light"] .flatpickr-day {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .flatpickr-day:hover {
    background: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(59, 130, 246, 0.20) !important;
}

html[data-bs-theme="light"] .flatpickr-day.today {
    border-color: rgba(59, 130, 246, 0.45) !important;
}

html[data-bs-theme="light"] .flatpickr-day.selected,
html[data-bs-theme="light"] .flatpickr-day.startRange,
html[data-bs-theme="light"] .flatpickr-day.endRange {
    background: rgba(59, 130, 246, 0.90) !important;
    border-color: rgba(59, 130, 246, 0.90) !important;
    color: #ffffff !important;
}

/* History cards (cyber) */
html[data-bs-theme="light"] .cyber-card-body {
    background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.03) 100%) !important;
}

html[data-bs-theme="light"] .company-title,
html[data-bs-theme="light"] .content-desc,
html[data-bs-theme="light"] .hud-value {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .badge-pill {
    background: rgba(15, 23, 42, 0.04) !important;
}

/* Tags */
html[data-bs-theme="light"] .cyber-tag,
html[data-bs-theme="light"] .k-tag {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: rgba(15, 23, 42, 0.85) !important;
}

/* Kanban footer icon */
html[data-bs-theme="light"] .k-footer {
    position: relative;
}

html[data-bs-theme="light"] .k-att {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: rgba(15, 23, 42, 0.75) !important;
}

/* Small text colors */
html[data-bs-theme="light"] .hud-title,
html[data-bs-theme="light"] .hud-sub,
html[data-bs-theme="light"] .stat-label,
html[data-bs-theme="light"] .text-muted {
    color: rgba(15, 23, 42, 0.65) !important;
}


/* ========================================================================
   ☀️ AURORA LIGHT MODE (Clean, High Contrast, No Shadows)
   ======================================================================== */

html[data-bs-theme="light"] body {
    background-color: #f1f5f9 !important;
    background-image: none !important;
    color: #0f172a !important;
}

/* --- GŁÓWNY KONTENER MODALA (JASNY) --- */
html[data-bs-theme="light"] .aurora-modal {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
    animation: none !important;
    /* Wyłączamy pływanie w jasnym trybie dla ostrości */
}

/* Usuwamy górną poświatę (ambient light) w trybie jasnym */
html[data-bs-theme="light"] .aurora-modal::before {
    display: none !important;
}

/* --- HEADER --- */
html[data-bs-theme="light"] .aurora-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-bs-theme="light"] .aurora-icon {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--accent-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

html[data-bs-theme="light"] .aurora-title-text h4 {
    color: #0f172a !important;
    text-shadow: none !important;
    /* Kluczowe: usuwa rozmycie tekstu */
    font-weight: 800 !important;
}

html[data-bs-theme="light"] .aurora-title-text span {
    color: #64748b !important;
    font-weight: 600 !important;
}

html[data-bs-theme="light"] .btn-aurora-close {
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-bs-theme="light"] .btn-aurora-close:hover {
    background: #fee2e2 !important;
    /* Jasny czerwony */
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

/* --- BODY & CARDS --- */
html[data-bs-theme="light"] .aurora-body {
    background: #ffffff !important;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

html[data-bs-theme="light"] .aurora-card {
    background: #f8fafc !important;
    /* Bardzo jasny szary */
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* --- INPUTY (Kluczowe dla czytelności) --- */
html[data-bs-theme="light"] .aurora-label {
    color: #475569 !important;
    font-weight: 700 !important;
}

html[data-bs-theme="light"] .aurora-input,
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .ts-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    /* Ciemny tekst */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html[data-bs-theme="light"] .aurora-input:focus,
html[data-bs-theme="light"] .form-control:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    background: #ffffff !important;
}

html[data-bs-theme="light"] .aurora-input::placeholder {
    color: #94a3b8 !important;
}

/* Select option fix */
html[data-bs-theme="light"] option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* --- CZAS (Time Box) --- */
html[data-bs-theme="light"] .aurora-time-box {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-bs-theme="light"] .digit-pill {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-bs-theme="light"] .aurora-digit {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .aurora-duration {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0f172a !important;
    /* Ciemny, wyraźny tekst */
    text-shadow: none !important;
}

/* --- TABS --- */
html[data-bs-theme="light"] .aurora-tabs {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-bs-theme="light"] .aurora-tab-lbl {
    color: #64748b !important;
}

html[data-bs-theme="light"] .btn-check:checked+.aurora-tab-lbl {
    background: #ffffff !important;
    color: var(--accent-color) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* --- FOOTER & BUTTONS --- */
html[data-bs-theme="light"] .aurora-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-bs-theme="light"] .btn-aurora-ghost {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

html[data-bs-theme="light"] .btn-aurora-ghost:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Ikony akcji */
html[data-bs-theme="light"] .btn-aurora-icon {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}

html[data-bs-theme="light"] .btn-aurora-icon:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

html[data-bs-theme="light"] .btn-aurora-icon.danger:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* --- SWITCH & FILE ZONE --- */
html[data-bs-theme="light"] .aurora-switch-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-bs-theme="light"] .aurora-switch-box .text-muted {
    color: #64748b !important;
}

html[data-bs-theme="light"] .aurora-switch-box .fw-bold {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .aurora-file-zone {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-bs-theme="light"] .aurora-file-zone:hover {
    background: #f0f9ff !important;
    border-color: var(--accent-color) !important;
}

/* --- ACCORDION (ADMIN) --- */
html[data-bs-theme="light"] .accordion-button {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background: #f0fdf4 !important;
    /* Bardzo jasny zielony */
    color: #166534 !important;
    /* Ciemny zielony tekst */
    border-color: #bbf7d0 !important;
    box-shadow: none !important;
}

/* --- TEXT UTILS --- */
html[data-bs-theme="light"] .text-muted {
    color: #64748b !important;
}

html[data-bs-theme="light"] .text-white {
    color: #0f172a !important;
}

/* Odwrócenie białego tekstu na ciemny */
html[data-bs-theme="light"] .text-info {
    color: #0284c7 !important;
}

/* Ciemniejszy niebieski */

/* --- DATE INFO BOX (Dwudniowe zadanie) --- */
html[data-bs-theme="light"] #modal-date-info {
    background: #eff6ff !important;
    /* Jasny niebieski */
    border: 1px solid #bfdbfe !important;
    box-shadow: none !important;
}

html[data-bs-theme="light"] #modal-date-info .text-white {
    color: #1e3a8a !important;
    /* Ciemny granat */
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

html[data-bs-theme="light"] #modal-date-info .text-muted {
    color: #64748b !important;
}

html[data-bs-theme="light"] #modal-date-info .text-info {
    color: #2563eb !important;
    border-top-color: #dbeafe !important;
}

/* --- ETAT BADGE --- */
html[data-bs-theme="light"] #etat-msg .badge {
    background: #fef3c7 !important;
    /* Jasny żółty */
    color: #b45309 !important;
    /* Ciemny bursztyn */
    border: 1px solid #fcd34d !important;
}

/* --- TOASTR (Powiadomienia w trybie jasnym) --- */
html[data-bs-theme="light"] #toast-container>div {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

html[data-bs-theme="light"] .toast-message {
    color: #334155 !important;
}

html[data-bs-theme="light"] .toast-title {
    color: #0f172a !important;
}

/* ========================================================================
   💎 AURORA GLASS PREMIUM V2 (Lighter & Cleaner)
   ======================================================================== */

:root {
    /* Zmiana: Lżejsze, bardziej przejrzyste tło bazowe */
    --aurora-bg: rgba(13, 17, 28, 0.92);
    --aurora-border: rgba(255, 255, 255, 0.15);
    --aurora-highlight: rgba(255, 255, 255, 0.08);

    /* Dynamic colors (nadpisywane w HTML) */
    --accent-color: #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.5);
}

/* --- ANIMACJE (Subtelniejsze pływanie) --- */
@keyframes aurora-float {
    0% {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--aurora-border);
    }

    50% {
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-glow);
    }

    100% {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--aurora-border);
    }
}

/* --- GŁÓWNY KONTENER --- */
.modal-content.aurora-modal {
    /* Zmiana: Jaśniejszy gradient tła */
    background: linear-gradient(160deg, var(--aurora-bg) 0%, rgba(10, 12, 18, 0.98) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--aurora-border);
    border-radius: 24px;
    overflow: hidden;
    color: #e2e8f0;
    animation: aurora-float 8s infinite ease-in-out;
}

/* Górna poświata (Ambient Light) - mocniejsza */
.modal-content.aurora-modal::before {
    content: '';
    position: absolute;
    top: -150px;
    left: -20%;
    right: -20%;
    height: 300px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* --- HEADER (Znacznie jaśniejszy) --- */
.aurora-header {
    position: relative;
    z-index: 1;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Zmiana: Jasny, czysty gradient zamiast ciemnego */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aurora-title-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.aurora-icon {
    width: 52px;
    height: 52px;
    /* Zmiana: Jaśniejsze tło ikony */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent-color);
    /* Mocniejszy wewnętrzny glow */
    box-shadow: inset 0 0 25px var(--accent-glow);
    transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Sprężysta animacja */
}

/* Efekt po najechaniu na modal */
.aurora-modal:hover .aurora-icon {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 35px var(--accent-glow), 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.1) rotate(-3deg);
    border-color: transparent;
}

.aurora-title-text h4 {
    font-family: var(--font-main), sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.aurora-title-text span {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    opacity: 0.9;
}

.btn-aurora-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-aurora-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: #ef4444;
    transform: rotate(90deg);
}

/* --- BODY --- */
.aurora-body {
    position: relative;
    z-index: 1;
    padding: 32px;
    /* Subtelny wzór w tle */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- KARTY I SLOTY (Jaśniejsze) --- */
.aurora-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    transition: 0.3s;
}

.aurora-slot {
    position: relative;
    margin-bottom: 5px;
}

.aurora-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: block;
    padding-left: 4px;
}

.aurora-input {
    width: 100%;
    /* Zmiana: Znacznie jaśniejsze tło inputów */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 18px;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    transition: 0.3s;
    height: 60px;
}

.aurora-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
    background: rgba(255, 255, 255, 0.12);
}

.aurora-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.aurora-input option {
    background: #1e293b;
    color: #fff;
    padding: 12px;
}

/* --- CZAS (Dashboard Module) --- */
.aurora-time-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Dekoracja tła czasu */
.aurora-time-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0.7;
}

.time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.digit-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 150px;
}

.aurora-digit {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    width: 60px;
    text-align: center;
    cursor: pointer;
    outline: none;
}

.aurora-digit:focus {
    color: var(--accent-color);
}

.aurora-duration {
    font-family: var(--font-main), sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    background: transparent;
    border: none;
    color: #fff;
    text-align: center;
    width: 120px;
    outline: none;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Gradient text dla trwania */
.aurora-duration {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- TABS (Pills) --- */
.aurora-tabs {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 16px;
    display: flex;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.aurora-tab-lbl {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid transparent;
}

.btn-check:checked+.aurora-tab-lbl {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 8px 20px var(--accent-glow);
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- STOPKA I PRZYCISKI --- */
.aurora-footer {
    padding: 24px 32px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-aurora {
    padding: 9px 35px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-aurora-primary {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 8px 25px var(--accent-glow);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-aurora-primary:hover {
    filter: brightness(1.15);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px var(--accent-glow);
}

.btn-aurora-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-aurora-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-aurora-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}

.btn-aurora-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-3px);
    border-color: var(--accent-color);
}

.btn-aurora-icon.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: #ef4444;
}

/* --- PRZEŁĄCZNIKI (SWITCH) --- */
.aurora-switch-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.aurora-switch-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
}

/* --- ZAŁĄCZNIKI --- */
.aurora-file-zone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.02);
}

.aurora-file-zone:hover {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.08);
}

/* --- ACCORDION (ADMIN) --- */
.accordion-button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none !important;
    padding: 16px;
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2) !important;
}

.accordion-item {
    background: transparent;
    border: none;
}

/* Scrollbar */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}


/* =========================================
   STYLIZACJA INFORMACJI O DATACH (Aurora)
   ========================================= */

#modal-date-info {
    /* Nadpisujemy inline style tła na ładniejszy gradient */
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%) !important;

    /* Dodajemy szklaną ramkę i cień */
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(59, 130, 246, 0.05);

    /* Poprawiamy kształt i odstępy */
    border-radius: 12px !important;
    padding: 12px 16px !important;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

/* Subtelny pasek akcentujący z lewej strony */
#modal-date-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}

/* Górna linia - "ZADANIE DWUDNIOWE" */
#modal-date-info .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.65rem;
    letter-spacing: 1.2px;
}

/* Ikona kalendarza - dodajemy blask */
#modal-date-info .fa-calendar-days {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
    font-size: 0.9rem;
}

/* Środkowa linia - DATY (Roboto Mono) */
#modal-date-info .text-white {
    font-weight: 700 !important;
    font-size: 0.95rem;
    /* Gradientowy tekst dla dat */
    background: linear-gradient(to bottom, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Strzałka pomiędzy datami */
#modal-date-info .fa-arrow-right-long {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.8rem;
}

/* Dolna linia - ŁĄCZNY CZAS */
#modal-date-info .text-info {
    color: #60a5fa !important;
    /* Jaśniejszy niebieski */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    margin-top: 6px !important;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.swal2-container.swal-blur-backdrop {
    backdrop-filter: blur(8px);
    /* Rozmycie tła aplikacji */
}



/* --- ANIMACJE ZAKŁADEK ADMINA --- */

/* Stan wyjściowy (ukryty) */
.tab-pane {
    display: none;
    /* Wymagane przez Bootstrap */
    opacity: 0;
    transform: translateY(10px);
    /* Przesunięcie w dół */
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Stan aktywny (blokowy, ale jeszcze przez chwilę może być opacity 0) */
.tab-pane.active {
    display: block;
}

/* Stan widoczny (animacja zakończona) */
.tab-pane.show {
    opacity: 1;
    transform: translateY(0);
}


/* --- SWEETALERT 2 CYBER THEME OVERRIDE --- */

div:where(.swal2-container) div:where(.swal2-popup) {
    background: #0f172a !important;
    /* var(--bg-dark) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Tytuł */
div:where(.swal2-container) h2:where(.swal2-title) {
    color: #fff !important;
    font-family: var(--font-main), sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Treść */
div:where(.swal2-container) div:where(.swal2-html-container) {
    color: #94a3b8 !important;
    font-size: 0.9rem;
}

/* Input tekstowy (jak aurora-input) */
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
    background: rgba(2, 6, 23, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 0.95rem;
    box-shadow: none !important;
    transition: 0.3s;
}

div:where(.swal2-container) input:where(.swal2-input):focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Przyciski */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-radius: 8px !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

/* --- PRZYCISK UKRYTE ZADANIA (GHOST REVEAL) --- */
.btn-ghost-reveal {
    background: rgba(15, 23, 42, 0.4);
    /* Ciemne, półprzezroczyste tło */
    border: 1px dashed rgba(255, 255, 255, 0.15);
    /* Przerywana linia sugeruje coś ukrytego */
    color: #64748b;
    /* Wygaszony tekst */
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Hover - Efekt rozświetlenia */
.btn-ghost-reveal:hover {
    background: rgba(139, 92, 246, 0.1);
    /* Delikatny fiolet */
    border-color: rgba(139, 92, 246, 0.5);
    border-style: solid;
    /* Zmiana na linię ciągłą */
    color: #fff;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25);
    /* Fioletowa poświata */
    transform: translateY(-2px);
}

/* Animacja ikony */
.btn-ghost-reveal i {
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.btn-ghost-reveal:hover i {
    transform: scale(1.2);
    opacity: 1;
    color: #a78bfa;
    /* Jaśniejszy fiolet ikony */
}


/* --- Stylizacja listy notatek (kontener) --- */
#kb-comments-list {
    /* Cienki pasek przewijania (Webkit: Chrome, Edge, Safari) */
    scrollbar-width: thin;
    scrollbar-color: #495057 transparent;
}

#kb-comments-list::-webkit-scrollbar {
    width: 4px;
    /* Bardzo wąski pasek */
}

#kb-comments-list::-webkit-scrollbar-track {
    background: transparent;
}

#kb-comments-list::-webkit-scrollbar-thumb {
    background-color: #495057;
    /* Ciemnoszary suwak */
    border-radius: 4px;
}

/* --- Stylizacja pojedynczej notatki --- */
.kb-note-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Bardzo subtelna linia oddzielająca */
    padding-bottom: 4px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
}

/* Usuwamy linię pod ostatnią notatką */
.kb-note-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Treść notatki */
.kb-note-content {
    font-size: 0.75rem;
    /* Mały tekst */
    line-height: 1.3;
    /* Zwarte linie */
    color: rgba(255, 255, 255, 0.8);
    /* Lekko zgaszona biel */
    word-break: break-word;
    /* Łamanie długich słów */
}

/* Data i czas */
.kb-note-date {
    font-size: 0.65rem;
    /* Mikroskopijna data */
    color: #6c757d;
    /* Ciemniejszy szary (muted) */
    text-align: left;
    margin-top: 2px;
}

/* ===== Session countdown (header) ===== */
.session-timer-group {
    min-width: 150px;
}

#session-countdown {
    width: 110px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

.session-led {
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, .65);
}

.session-led.warn {
    background: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, .55);
}

.session-led.danger {
    background: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, .55);
}

/* ===== Login overlay (full screen) ===== */
.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-overlay.hidden {
    display: none;
}

.login-overlay-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(20, 24, 40, .92);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    color: #fff;
}

.form-check {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.hr-soft {
    height: 1px;
    width: 100%;
    border: 0;
    margin: 0px 5px 20px 0px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0) 0%, rgba(148, 163, 184, 0.5) 55%, rgba(148, 163, 184, 0) 100%);
    opacity: .9;
}

/* ===== Projekty: Etapy header ===== */
.pm-stages-head {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.pm-stages-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    letter-spacing: .2px;
}

.pm-stages-count {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.pm-btn-add-stage {
    background: rgba(13, 110, 253, .16) !important;
    color: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(13, 110, 253, .35) !important;
    box-shadow: none !important;
}

.pm-btn-add-stage:hover {
    background: rgba(13, 110, 253, .24) !important;
    border-color: rgba(13, 110, 253, .45) !important;
}

.pm-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    text-decoration: none;
    margin-right: 6px;
    margin-top: 6px;
}

.pm-file-pill:hover {
    background: rgba(255, 255, 255, .10);
}

.pm-file-pill i {
    opacity: .85;
}

.pm-empty-map {
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .90);
}


/* Kontener szuflady - pozycjonowanie absolutne, żeby przykryć sąsiadów */
#gs-drawer {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-51%);
    height: 55px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(-51%);
    -moz-transform: translateY(-51%);
    -ms-transform: translateY(-51%);
    -o-transform: translateY(-51%);
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
}

/* Stan zamknięty */
.gs-drawer-closed {
    width: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border: none !important;
}

/* Stan otwarty - szerokość 500px (lub max na mobile) */
.gs-drawer-open {
    width: 959px;
    opacity: 1;
    pointer-events: all;
    padding: 0;
}

@media (max-width: 768px) {
    .gs-drawer-open {
        width: 100%;
        position: fixed;
        top: 70px;
        left: 10px;
        right: 10px;
    }
}

/* Lista wyników - dropdown */
.gs-results-list {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1060;
}

.gs-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-item:last-child {
    border-bottom: none;
}

.gs-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gs-title {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.gs-sub {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
}

.gs-results-list {
    /* ... poprzednie style ... */
    z-index: 9999 !important;
    /* Wymuszenie widoczności na wierzchu */
    background: #1e293b;
    /* Ciemne tło */
    border: 1px solid #334155;
}


#gs-drawer {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 48px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    display: flex;
    align-items: center;

    /* TO JEST KLUCZOWE: */
    overflow: visible !important;
    z-index: 1050;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}


.control-panel {
    position: relative;
    z-index: 1000 !important;
}

#gs-wrapper {
    position: relative;
    z-index: 2001;
}

#gs-drawer {
    overflow: visible !important;
    z-index: 2002;
}

.gs-results-list {
    position: absolute;
    z-index: 2003 !important;

}

.gs-results-list {
    position: fixed;
    top: 50px;
    right: 0%;
    transform: translateX(50%);
    width: 961px;
    max-width: 1000px;
    z-index: 99999 !important;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    max-height: 400px;
    overflow-y: auto;
    margin-left: -483px;
}

#ecp-fab-quickadd {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 999;
    transition: bottom 0.3s ease-in-out;
}

#ecp-fab-quickadd.position-lowered {
    bottom: 85px !important;
}


#qa-tabs {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 8px;
}

#qa-tabs .nav-item {
    flex: 1;
}

#qa-tabs .nav-link {
    width: 100%;
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#qa-tabs .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

#qa-tabs .nav-link.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

#qa-tabs .nav-link i {
    transition: transform 0.2s;
}

#qa-tabs .nav-link.active i {
    transform: scale(1.2);
    color: #60a5fa;
}

.qa-tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    height: 120px;
    transition: all 0.2s;
    cursor: pointer;
}

.qa-tile-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.qa-tile-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #cbd5e1;
}

.qa-tile-btn:hover .qa-tile-icon {
    color: #60a5fa;
}

.qa-tile-text {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Styl przycisku "Wróć" identyczny jak "X" (Close) */
#qa-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

#qa-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-3px);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.aurora-tabs {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 8px;
}

.aurora-tab-lbl {
    flex: 1;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    outline: none !important;
}

.aurora-tab-lbl:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    transform: translateY(-1px);
}

.aurora-tab-lbl.active {
    background: rgba(139, 92, 246, 0.2) !important;
    border: 1px solid rgba(139, 92, 246, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
    transform: translateY(0);
}

/* Styl dla przycisku szybkiego dodawania */
.ecp-fab-quickadd {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c316da2, #0d2049);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    z-index: 1050;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ecp-fab-quickadd:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ecp-fab-quickadd:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

.ecp-fab-quickadd i {
    pointer-events: none;
}