/* Import czcionki Sora */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

/* === GŁÓWNE ZMIENNE KOLORYSTYCZNE I SKALOWANIA === */
:root {
    --font-family: 'Sora', sans-serif;
    
    /* --- SKALA INTERFEJSU (Domyślna - Mobile/Laptop) --- */
    --body-font-size: 14px;
    --nav-height: 74px;
    --panel-padding: 24px;
    --panel-padding-x: 32px;
    --card-padding: 1.25rem; /* ~20px */
    --gap-base: 16px;
    --gap-large: 32px;
    --input-height: 45px;
    --btn-height: 38px;
    --radius: 12px;
    
    /* Kolory */
    --accent-primary: #FFD700; /* Złoty */
    --accent-primary-rgb: 255, 215, 0;
    --accent-primary-darker: #D4AF37;
    --accent-primary-darker-rgb: 212, 175, 55;
    --accent-success: #3DDC97;
    --accent-warning: #FFD54F;
    --accent-danger: #ff0000;
    --accent-inprogress: #BE66FF;
    
    --bg-body: #121212;
    --bg-surface: rgba(30, 30, 30, 0.6);
    --bg-inset: rgba(45, 45, 45, 0.7);
    
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-tertiary: #707070;
    --text-on-accent: #111111;
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-strong: rgba(255, 255, 255, 0.2);

    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.5);
    
    --radius: 12px;
}

/* === AUTOMATYCZNE SKALOWANIE DLA EKRANÓW POWYŻEJ 1366px === */
@media (min-width: 1367px) {
    :root {
        --body-font-size: 13px; /* Zmniejszenie czcionki o ok. 7-10% */
        --nav-height: 64px; /* Zmniejszenie wysokości nawigacji */
        --panel-padding: 20px;
        --panel-padding-x: 24px;
        --card-padding: 1rem; /* 16px */
        --gap-base: 12px;
        --gap-large: 24px;
        --input-height: 38px; /* Mniejsze inputy */
        --btn-height: 34px; /* Mniejsze przyciski */
        --radius: 10px; /* Nieco mniejsze zaokrąglenia */
        --table-cell-padding: 10px; /* Mniejszy padding w tabelach */
    }
    
    /* Zwiększenie gęstości siatki */
    .permits-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; /* Węższe karty */
        gap: 1.25rem !important; /* Mniejszy odstęp między kartami */
    }
    
    /* Zmniejszenie nagłówków */
    .dashboard-header h1 {
        font-size: 1.8rem !important;
    }
    
    .permit-group-header .permit-info h3 {
        font-size: 1.15rem !important;
    }
    
    /* Bardziej kompaktowe listy */
    .permit-summary {
        padding: 12px 20px 12px 0 !important;
        gap: 12px !important;
    }
    
    /* Mniejsze marginesy w kartach */
    .permit-card-body p {
        margin-bottom: 0.5rem !important;
    }
}

/* === RESET I PODSTAWOWE STYLE === */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-secondary);
    font-size: var(--body-font-size); /* ZMIANA NA ZMIENNĄ */
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    /* Płynne skalowanie */
    transition: font-size 0.3s ease, zoom 0.3s ease;
}

/* === EFEKT TŁA "AURORA" === */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    animation: moveAurora 25s infinite alternate ease-in-out;
    will-change: background;
    z-index: -1;
}

@keyframes moveAurora {
    0% { background-position: 0% 50%, 50% 100%; }
    100% { background-position: 100% 50%, 0% 0%; }
}

/* === STYLIZACJA PASKA PRZEWIJANIA === */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background-color: var(--text-tertiary);
  border-radius: 10px;
  border: 3px solid #000000;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}
* {
  scrollbar-width: auto;
  scrollbar-color: var(--text-tertiary) #000000;
}


/* --- STRONA LOGOWANIA --- */
.login-page-body { overflow: auto; height: auto; }
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.login-box { 
    background: var(--bg-surface); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px; 
    border-radius: 16px; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-medium); 
    text-align: center; 
    width: 100%; 
    max-width: 420px; 
}
.login-box .logo { width: 80px; height: 80px; margin-bottom: 20px; }
.login-title { color: var(--text-primary); font-weight: 600; margin-bottom: 8px; font-size: 1.5rem; }
.login-subtitle { color: var(--text-secondary); margin-bottom: 30px; }
.login-box .form-group { margin-bottom: 20px; text-align: left; }
.login-box .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-secondary); }
.login-box .form-control { 
    width: 100%; padding: 12px; 
    background-color: var(--bg-inset); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius); 
    color: var(--text-primary); 
    font-size: 1rem; 
    transition: all 0.2s ease;
}
.login-box .form-control:focus { 
    outline: none; 
    border-color: var(--accent-primary); 
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.3);
}
.error-message { color: var(--accent-danger); margin-top: 15px; font-weight: 500; min-height: 20px; }
.w-100 { width: 100% !important; }

/* === GŁÓWNA STRUKTURA === */
.main-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr; /* Wymuszenie wysokości wiersza na dostępną przestrzeń */
    /* height: calc(100vh - var(--nav-height));  USUNIĘTE NA RZECZ FLEX-GROW */
    flex-grow: 1; /* Wypełnia resztę ekranu */
    min-height: 0; /* Ważne dla flexboxa, aby kontener nie rozciągał się poza ekran */
    overflow: hidden;
    transition: grid-template-columns 0.5s ease-in-out;
}
.main-container.map-hidden { grid-template-columns: 1fr 0px; }
.content-panel {
    padding: var(--panel-padding) var(--panel-padding-x); /* ZMIANA NA ZMIENNĄ */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* === GÓRNA NAWIGACJA === */
.top-nav {
    background-color: var(--bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--panel-padding-x);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
}
.nav-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.home-btn { color: var(--text-secondary); font-size: 1.3rem; text-decoration: none; transition: color 0.2s, transform 0.2s; display: flex; align-items: center; }
.home-btn:hover { color: var(--accent-primary); transform: scale(1.15); }
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.logo-img {
    height: 20px;
    width: auto;
    margin-bottom: 0px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}
.logo:hover .logo-img {
    transform: scale(1.05);
}
.logo-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: #ffd700;
}
.main-menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}
.main-menu a {
    text-decoration: none; color: var(--text-secondary); font-weight: 500;
    padding: 8px clamp(4px, 1.0cqi, 18px);
    border-radius: var(--radius);
    transition: all 0.3s ease;
    display: flex; align-items: center; gap: clamp(3px, 0.6cqi, 10px);
    position: relative;
    white-space: nowrap;
    font-size: clamp(0.6rem, 1.2cqi, 0.95rem);
}
.main-menu a i { font-size: clamp(0.8rem, 1.6cqi, 1.5rem); transition: transform 0.3s ease; flex-shrink: 0; }
.main-menu a span { transition: all 0.2s ease; }
.main-menu a:hover { background-color: var(--border-color); color: var(--text-primary); }
.main-menu a:hover i { transform: scale(1.1); }
.main-menu a.active { 
    color: var(--text-primary); 
    background-color: rgba(255, 255, 255, 0.05);
}
.main-menu a.active::after {
    content: ''; position: absolute; bottom: -1px; left: 10%; right: 10%;
    height: 3px; background: linear-gradient(90deg, var(--accent-primary-darker), var(--accent-primary));
    border-radius: 3px; box-shadow: 0 0 8px var(--accent-primary);
    animation: slide-in 0.4s ease;
}
@keyframes slide-in { from { width: 0; left: 50%;} to { width: 80%; left: 10%; } }

.nav-separator {
    width: 1px;
    align-self: stretch;
    background-color: var(--border-color);
    margin: 10px 4px;
    flex-shrink: 0;
}
.nav-right { display: flex; align-items: center; gap: clamp(4px, 0.7vw, 12px); flex-shrink: 0; }
.nav-right .btn-icon-link {
    width: clamp(26px, 1.9vw, 34px);
    height: clamp(26px, 1.9vw, 34px);
    font-size: clamp(0.9rem, 1vw, 1.3rem);
}
.nav-right .btn {
    font-size: clamp(0.55rem, 0.7vw, 0.8rem);
    height: clamp(24px, 1.9vw, 32px);
    padding: 4px clamp(6px, 0.7vw, 14px);
}
.nav-right .user-menu { font-size: clamp(0.6rem, 0.8vw, 0.875rem); }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-menu .logout-link { color: var(--text-secondary); font-size: clamp(1rem, 1.2vw, 1.5rem); text-decoration: none; transition: color 0.2s; }
.user-menu .logout-link:hover { color: var(--accent-danger); }

.language-dropdown {
    position: relative;
}
.language-dropdown .dropdown-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    height: clamp(26px, 1.9vw, 34px);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 clamp(5px, 0.6vw, 10px);
    transition: all 0.2s ease-in-out;
}
.language-dropdown .dropdown-toggle img.flag-icon {
    width: clamp(12px, 1vw, 16px);
    height: auto;
}
.language-dropdown .dropdown-toggle i {
    font-size: clamp(0.6rem, 0.7vw, 0.875rem);
}
.language-dropdown .dropdown-toggle:hover {
    background-color: var(--bg-inset);
    border-color: var(--border-color-strong);
}
.language-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius);
    min-width: 150px;
    box-shadow: var(--shadow-medium);
    padding: 5px;
    z-index: 1100;
    backdrop-filter: blur(10px);
}
.language-dropdown .dropdown-menu.show {
    display: block;
}
.language-dropdown .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 8px;
}
.language-dropdown .dropdown-menu a img.flag-icon {
    width: 20px;
    height: auto;
}
.language-dropdown .dropdown-menu a:hover {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

/* === PRZYCISKI === */
.btn {
    padding: var(--btn-padding-y, 5px) var(--btn-padding-x, 20px); /* ZMIANA NA ZMIENNE */
    border-radius: var(--radius); font-weight: 600;
    border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center;
    gap: 10px; transition: all 0.3s ease; font-family: var(--font-family);
    justify-content: center; text-decoration: none;
    position: relative; overflow: hidden; font-size: 14px;
    height: var(--btn-height, auto); /* Opcjonalna wysokość */
}
.btn i { font-size: 1.2rem; }
.btn-primary { 
    background: linear-gradient(45deg, var(--accent-primary-darker), var(--accent-primary)); 
    color: var(--text-on-accent); border-color: var(--accent-primary-darker);
    box-shadow: 0 4px 15px rgba(var(--accent-primary-darker-rgb), 0.3);
}
.btn-secondary { background-color: var(--bg-inset); color: white; border: 1px solid var(--border-color-strong); }
.btn-danger { background-color: var(--accent-danger); color: white; }
.btn-success { background-color: var(--accent-success); color: white; }
.btn-warning { background-color: var(--accent-warning); color: var(--text-on-accent); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-30deg); transition: left 0.6s ease;
}
.btn:hover::before { left: 150%; }

/* === NAGŁÓWEK DASHBOARDU === */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dashboard-header .header-left { display: flex; align-items: center; gap: 16px; }
.dashboard-header h1 { 
    font-size: 2.2rem; margin: 0; color: var(--text-primary); font-weight: 700;
}
.dashboard-header .item-count { font-size: 1rem; font-weight: 600; color: var(--text-secondary); background-color: var(--border-color); padding: 2px 10px; border-radius: 99px; }
.header-icon {
    font-size: 2.5rem; color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-inset), var(--bg-body));
    padding: 16px; border-radius: 16px;
    box-shadow: var(--shadow-soft); border: 1px solid var(--border-color);
}
.header-title-group { display: flex; align-items: baseline; gap: 12px; }

/* === SEKCJA AKTYWNEGO PERSONELU === */
.active-personnel-section {
    padding: 24px; background-color: var(--bg-surface);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 32px;
}
.active-personnel-section h4 {
    margin: 0 0 20px 0; font-size: 1.3rem; color: var(--text-primary);
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--border-color); padding-bottom: 16px;
}
.active-personnel-section h4 i { color: var(--accent-primary); }
.personnel-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.personnel-card {
    display: flex; align-items: center; gap: 16px; padding: 12px;
    background-color: var(--bg-inset); border-radius: var(--radius);
    border: 1px solid transparent; transition: all 0.3s ease; position: relative;
}
.personnel-card:hover { transform: translateY(-4px); border-color: var(--border-color-strong); box-shadow: var(--shadow-soft); }
.personnel-card .avatar { font-size: 3rem; }
.personnel-card .avatar.authorizer { color: var(--accent-warning); }
.personnel-card .avatar.issuer { color: var(--accent-success); }
.personnel-info { display: flex; flex-direction: column; }

/* === MODERN TOAST NOTIFICATIONS (Toastify Override) === */
.toastify.modern-toast {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    background: var(--bg-surface) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    box-shadow: var(--shadow-medium) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
    max-width: 350px;
    transform: translateY(0); /* Ensure visibility */
}

/* Success Variant */
.toastify.modern-toast.success {
    border: 1px solid rgba(61, 220, 151, 0.3);
    border-left: 4px solid var(--accent-success);
}

.toastify.modern-toast.success::before {
    content: '\eb7a'; /* ri-checkbox-circle-line */
    font-family: 'remixicon';
    font-size: 1.5rem;
    color: var(--accent-success);
    margin-right: 4px;
}

/* Error Variant */
.toastify.modern-toast.error {
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-left: 4px solid var(--accent-danger);
}

.toastify.modern-toast.error::before {
    content: '\eb96'; /* ri-error-warning-line */
    font-family: 'remixicon';
    font-size: 1.5rem;
    color: var(--accent-danger);
    margin-right: 4px;
}

/* Info Variant */
.toastify.modern-toast.info {
    border: 1px solid rgba(0, 98, 255, 0.3);
    border-left: 4px solid #0062FF;
}

.toastify.modern-toast.info::before {
    content: '\eb99'; /* ri-information-line */
    font-family: 'remixicon';
    font-size: 1.5rem;
    color: #0062FF;
    margin-right: 4px;
}

/* Warning Variant (Optional) */
.toastify.modern-toast.warning {
    border: 1px solid rgba(255, 213, 79, 0.3);
    border-left: 4px solid var(--accent-warning);
}

.toastify.modern-toast.warning::before {
    content: '\ea20'; /* ri-alert-line */
    font-family: 'remixicon';
    font-size: 1.5rem;
    color: var(--accent-warning);
    margin-right: 4px;
}


/* === STYLE DLA LISTY PRACOWNIKÓW W KREATORZE (WSPÓLNE DLA WEWNĘTRZNYCH I ZEWNĘTRZNYCH) === */

.holder-group-section { margin-bottom: 15px; }
.holder-group-details {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 10px;
}
.holder-group-summary {
    padding: 10px 15px;
    background: var(--bg-inset);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.holder-group-summary:hover { background: rgba(255,255,255,0.05); }
.holder-group-summary::-webkit-details-marker { display: none; }
.holder-group-summary::after {
    content: '\ea4e'; font-family: 'remixicon'; transition: transform 0.2s;
}
.holder-group-details[open] .holder-group-summary {
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
}
.holder-group-details[open] .holder-group-summary::after { transform: rotate(90deg); color: var(--accent-primary); }

.holder-toggle-container { padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.holder-toggle-button { margin-bottom: 0 !important; width: 100%; }
.holder-toggle-button label {
    display: flex; align-items: center; width: 100%; padding: 8px 12px;
    background: var(--bg-inset); border: 1px solid var(--border-color); border-radius: 8px;
    cursor: pointer; transition: all 0.2s;
}
.holder-toggle-button input:checked + label {
    background: rgba(255,215,0, 0.15); border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

/* Styl dla aktywnych na zmianie */
.holder-toggle-button.active-on-shift label {
    border-color: var(--accent-success);
    background: rgba(61, 220, 151, 0.08);
}
.holder-toggle-button.active-on-shift input:checked + label {
    background: rgba(61, 220, 151, 0.2);
    border-color: var(--accent-success);
    box-shadow: 0 0 0 1px var(--accent-success);
}

.shift-badge {
    margin-left: auto;
    font-size: 0.7em;
    font-weight: 700;
    background: var(--accent-success);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.holder-search-input {
    width: 100%; padding: 10px 12px 10px 40px;
    border-radius: var(--radius); border: 1px solid var(--border-color);
    background: var(--bg-body); color: var(--text-primary);
}
.holder-search-wrapper { position: relative; margin-bottom: 15px; }
.holder-search-wrapper i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary);
}

/* Coordinator Styles */
.coordinator-selection {
    display: flex; /* Domyślnie flex, ukrywane przez JS */
}

.coordinator-label { cursor: pointer; color: var(--text-tertiary); font-size: 1.2rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; }
.coordinator-label:hover { color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.1); }
.coordinator-radio:checked + .coordinator-label { color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.2); }
.coordinator-radio:checked + .coordinator-label i { font-weight: 900; }
.coordinator-label.disabled { opacity: 0.3; cursor: not-allowed; }

/* Wyróżnienie całego wiersza gdy jest koordynatorem */
.holder-toggle-button.coordinator-selected label {
    background: rgba(var(--accent-primary-rgb), 0.1) !important;
}
.holder-toggle-button.coordinator-selected .name {
    font-weight: 700;
}

/* === MODERN RISK ASSESSMENT STYLES === */
.risk-assessment-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-row-modern {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-soft);
}

.risk-row-modern:hover {
    border-color: var(--border-color-strong);
    background-color: rgba(255, 255, 255, 0.03);
}

.risk-label-col {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.risk-label-col .form-control {
    width: 100%;
}

.risk-toggle-group {
    display: flex;
    background-color: var(--bg-body);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    gap: 4px;
}

.risk-option-btn {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.risk-option-btn input {
    display: none;
}

.risk-option-btn .btn-content {
    display: block;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    min-width: 50px;
}

.risk-option-btn:hover .btn-content {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.risk-option-btn.option-yes input:checked + .btn-content {
    background-color: var(--accent-success);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.risk-option-btn.option-no input:checked + .btn-content {
    background-color: var(--accent-danger);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.risk-option-btn.option-na input:checked + .btn-content {
    background-color: var(--text-tertiary);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove row button style */
.btn-remove-risk {
    padding: 6px;
    border-radius: 4px;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 8px;
}

.btn-remove-risk:hover {
    color: var(--accent-danger);
}

@media (max-width: 576px) {
    .risk-row-modern {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .risk-actions-col {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    .risk-toggle-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .risk-option-btn .btn-content {
        width: 100%;
    }
}

/* --- Loading & Connection Status --- */
.map-panel {
    position: relative;
}
/* Premium Loader (SAFEHUB) */
.premium-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.loading-label {
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}
.loader-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.letters-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-90deg);
    animation: initial-spin 1s linear infinite;
}
.letter {
    position: absolute;
    color: #ffd700;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 26px;
    transform-origin: center 85px;
    top: calc(50% - 85px);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.l1 { transform: rotate(0deg); }
.l2 { transform: rotate(51deg); }
.l3 { transform: rotate(102deg); }
.l4 { transform: rotate(153deg); }
.l5 { transform: rotate(204deg); }
.l6 { transform: rotate(255deg); }
.l7 { transform: rotate(306deg); }
@keyframes initial-spin {
    0% { transform: rotate(-90deg); }
    100% { transform: rotate(270deg); }
}
.fast-spin {
    animation: warp-speed 0.5s forwards cubic-bezier(1, 0, 0, 1) !important;
}
@keyframes warp-speed {
    0% { filter: blur(0); opacity: 1; }
    100% {
        transform: rotate(1800deg);
        filter: blur(45px);
        opacity: 0;
        scale: 1.1;
    }
}
.final-spinner {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease-out;
}
.premium-loader.ready .final-spinner {
    opacity: 1;
    transform: scale(1);
}
.spinner-svg {
    animation: rotate-forever 0.5s linear infinite;
    width: 200px;
    height: 200px;
    will-change: transform;
    transform: translateZ(0);
}
.path {
    stroke: #ffd700;
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
    animation: dash-logic 0.6s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    will-change: stroke-dasharray, stroke-dashoffset;
}
@keyframes rotate-forever {
    100% { transform: rotate(360deg); }
}
@keyframes dash-logic {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 150, 200; stroke-dashoffset: -40; }
    100% { stroke-dasharray: 150, 200; stroke-dashoffset: -180; }
}
.panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}
.panel-loading-block {
    background: transparent;
    border: none;
}
.panel-loading-block.loading-full {
    min-height: 520px;
}
.panel-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    background: #0a0a0f;
    backdrop-filter: none;
    z-index: 200;
}
.global-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #0a0a0f;
    z-index: 9998;
    transition: opacity 0.5s ease;
}
.content-panel-loading {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
width: 100%;
background: var(--bg-page, #0a0a0f);
}
.map-loading-spinner {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #0a0a0f;
transition: opacity 0.6s ease;
pointer-events: none;
}
.map-loading-spinner .premium-loader-wrap {
    transform: scale(0.62);
    transform-origin: center center;
}
.building-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.building-loader svg {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
.bld-top    { stroke-dasharray: 145; animation: draw-bld 2.4s ease-in-out infinite; will-change: stroke-dashoffset; }
.bld-left   { stroke-dasharray: 130; animation: draw-bld 2.4s ease-in-out 0.35s infinite; will-change: stroke-dashoffset; }
.bld-right  { stroke-dasharray: 130; animation: draw-bld 2.4s ease-in-out 0.7s infinite; will-change: stroke-dashoffset; }
.bld-roof1  { stroke-dasharray: 60;  animation: draw-bld 2.4s ease-in-out 1.0s infinite; will-change: stroke-dashoffset; }
.bld-roof2  { stroke-dasharray: 60;  animation: draw-bld 2.4s ease-in-out 1.15s infinite; will-change: stroke-dashoffset; }
@keyframes draw-bld {
    0%   { stroke-dashoffset: 145; opacity: 0; }
    8%   { opacity: 1; }
    55%  { stroke-dashoffset: 0; opacity: 1; }
    80%  { opacity: 0.15; }
    100% { stroke-dashoffset: 145; opacity: 0; }
}
.connection-status {
position: fixed;
right: 24px;
bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-surface);
border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
border-radius: 12px;
box-shadow: var(--shadow-medium);
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: all 0.25s ease;
z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 9999;
}
.connection-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.connection-status .title {
    font-weight: 600;
    color: var(--text-primary);
}
.connection-status .subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
@keyframes pulse-gold-border {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.0); border-color: var(--border-color); }
    40% { box-shadow: 0 0 0 6px rgba(var(--accent-primary-rgb), 0.25); border-color: rgba(var(--accent-primary-rgb), 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.0); border-color: var(--border-color); }
}
.pulse-on-load {
    animation: pulse-gold-border 1.1s ease-out;
}
@keyframes pulse-screen-glow {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.0);
        border-color: rgba(var(--accent-primary-rgb), 0.0);
    }
    40% {
        opacity: 1;
        box-shadow: 0 0 25px rgba(var(--accent-primary-rgb), 0.8), 0 0 60px rgba(var(--accent-primary-rgb), 0.45);
        border-color: rgba(var(--accent-primary-rgb), 0.95);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.0);
        border-color: rgba(var(--accent-primary-rgb), 0.0);
    }
}
body.pulse-on-load::after {
    content: '';
    position: fixed;
    inset: 8px;
    border: 2px solid rgba(var(--accent-primary-rgb), 0.0);
    border-radius: 18px;
    pointer-events: none;
    z-index: 10000;
    animation: pulse-screen-glow 1.2s ease-out;
    /* FIX: Kompensacja zoomu 0.9 na body, aby ramka była na krawędziach ekranu */
    transform: scale(1.11111);
    transform-origin: center center;
}
.personnel-info .name { font-weight: 600; color: var(--text-primary); }
.personnel-info .role { font-size: 0.85rem; color: var(--text-secondary); }
.status-indicator {
    width: 10px; height: 10px; border-radius: 50%; margin-left: auto;
    align-self: flex-start; margin-top: 4px; transition: all 0.3s ease;
}
.status-indicator.active {
    background-color: var(--accent-success); box-shadow: 0 0 8px var(--accent-success);
    animation: pulse-green 2s infinite;
}
.status-indicator.unread {
    background-color: var(--accent-danger) !important;
    width: 22px !important; height: 22px !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    font-size: 12px !important; font-weight: bold !important;
    color: white !important; box-shadow: 0 0 10px var(--accent-danger) !important;
    animation: pulse-red 2s infinite !important;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

/* === FILTRY ARCHIWUM I PAGINACJA === */
.archive-filters {
    display: flex; gap: 16px; align-items: flex-end;
    background-color: var(--bg-surface);
    padding: 16px; border-radius: var(--radius);
    margin-bottom: 24px; box-shadow: var(--shadow-soft);
}
.archive-filters .filter-group { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.archive-filters label { font-size: 0.8rem; font-weight: 500; }
.archive-filters input[type="datetime-local"], .archive-filters input[type="text"] {
    padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius);
    font-family: var(--font-family); background-color: var(--bg-inset);
    color: var(--text-primary);
}
.archive-filters .btn.active-filter {
    background: var(--accent-success); color: var(--text-on-accent);
    box-shadow: 0 0 10px var(--accent-success);
}
.archive-filters .btn.active-filter::before { display: none; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(85%) sepia(61%) saturate(1352%) hue-rotate(325deg) brightness(105%) contrast(101%);
    cursor: pointer;
}
.pagination-nav {
    display: flex; justify-content: center;
    margin-top: 2rem; padding-bottom: 1rem;
}
.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 0.5rem; }
.page-item .page-link {
    display: block; padding: 0.75rem 1rem; min-width: 44px;
    text-align: center; text-decoration: none; color: var(--text-secondary);
    background-color: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius); transition: all 0.2s ease-in-out; cursor: pointer;
}
.page-item .page-link:hover {
    background-color: var(--bg-inset); color: var(--text-primary);
    border-color: var(--border-color-strong);
}
.page-item.active .page-link {
    background-color: var(--accent-primary); color: var(--text-on-accent);
    border-color: var(--accent-primary); font-weight: 700;
}
.page-item.disabled .page-link {
    color: var(--text-tertiary); pointer-events: none;
    background-color: var(--bg-inset);
}


/* === LISTA ZLECEŃ === */
.permit-list { display: flex; flex-direction: column; gap: var(--gap-large, 32px); }

@keyframes slide-fade-in {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.permit-item {
    background-color: rgba(30, 30, 30, 0.92);
    border-radius: 16px; border: 1px solid var(--border-color);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative; margin-top: var(--gap-base, 20px);
    animation: slide-fade-in 0.7s ease-out forwards;
    overflow-x: clip;
}

.permit-item:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-primary-rgb), 0.4);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 30px rgba(var(--accent-primary-rgb), 0.2);
}

.permit-item.needs-action {
    animation: pulse-stronger 2s infinite;
}
@keyframes pulse-stronger {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.7);
        border-color: rgba(var(--accent-primary-rgb), 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(var(--accent-primary-rgb), 0);
        border-color: rgba(var(--accent-primary-rgb), 1.0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0);
        border-color: rgba(var(--accent-primary-rgb), 0.6);
    }
}
@keyframes shake-subtle {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.permit-summary {
    display: grid; 
    grid-template-columns: 24px 50px 80px 2fr 1.2fr 1.2fr 1fr 1fr 1.2fr 120px 50px;
    align-items: center; padding: 20px 28px 20px 0;
    cursor: pointer; gap: 16px;
    position: relative;
}
.permit-item.expanded .permit-summary .value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
}

.permit-type-label-wrapper {
    grid-column: 1 / 2; grid-row: 1 / 2;
    display: flex; justify-content: center; align-items: center;
    height: 100%;
}
.permit-type-label {
    writing-mode: vertical-lr; transform: rotate(180deg);
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; padding: 10px 5px; border-radius: 6px;
    color: var(--text-on-accent);
}
.permit-type-label.type-internal { background-color: var(--accent-success); }
.permit-type-label.type-external { background-color: var(--accent-inprogress); }
.permit-type-label.type-offline { background-color: var(--accent-warning); }

.summary-col { display: flex; flex-direction: column; min-width: 0; }
.summary-col .label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
.summary-col .value { font-weight: 500; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.summary-col .value.description { font-weight: 600; font-size: 1rem; }
.summary-col .value .inactive { color: var(--text-tertiary); text-decoration: line-through; }

.locate-btn {
    background: #000; border: 1px solid var(--border-color);
    color: #999; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem;
    cursor: pointer; transition: all 0.3s ease;
}
.locate-btn:hover { background-color: var(--accent-primary); color: var(--text-on-accent); transform: scale(1.1) rotate(90deg); }

.status-badge {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: center;
    border: 1px solid;
}
.status-Oczekuje-na-ocenę { color: #FF9800; border-color: #FF9800; background-color: rgba(255, 152, 0, 0.1); }
.status-Oczekuje-na-autoryzację, .status-Autoryzacja { color: #9E9E9E; border-color: #9E9E9E; background-color: rgba(158, 158, 158, 0.1); }
.status-Autoryzowane { color: #FFEB3B; border-color: #FFEB3B; background-color: rgba(255, 235, 59, 0.1); }
.status-Rozpoczęcie-Issuera, .status-W-trakcie-prac-Holderów { color: var(--accent-warning); border-color: var(--accent-warning); background-color: rgba(255, 213, 79, 0.1); }
.status-W-trakcie { color: var(--accent-inprogress); border-color: var(--accent-inprogress); background-color: rgba(190, 102, 255, 0.1); }
.status-Zakończone-przez-Holdera-ów-, .status-Prace-Holderów-zakończone, .status-Zakończenie-przez-Issuera { color: var(--accent-success); border-color: var(--accent-success); background-color: rgba(61, 220, 151, 0.1); }
.status-Zamknięte { color: var(--text-tertiary); border-color: var(--text-tertiary); background-color: rgba(112, 112, 112, 0.1); }
.status-Zakończono { color: var(--accent-success); border-color: var(--accent-success); background-color: rgba(61, 220, 151, 0.15); }
.status-Anulowane { color: var(--accent-danger); border-color: var(--accent-danger); background-color: rgba(255, 107, 107, 0.15); }

.permit-timer {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(45deg, var(--accent-inprogress), #d881ff);
    color: white; padding: 8px 20px; border-radius: 99px;
    font-size: 0.95rem; font-weight: 600;
    box-shadow: 0 4px 15px rgba(190, 102, 255, 0.3);
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,0.2);
}

.expand-icon { justify-self: flex-end; font-size: 1.5rem; color: var(--text-tertiary); transition: transform 0.3s ease; }
.permit-item.expanded .expand-icon { transform: rotate(180deg); }

.permit-details { max-height: 0; overflow: hidden; transition: max-height 0.7s ease-in-out; }
.permit-item.expanded .permit-details { max-height: 2500px; }
.details-content { padding: 24px; border-top: 1px solid var(--border-color); margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.details-section h4 {
    margin: 0 0 20px 0; padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 1.2rem; display: flex; align-items: center;
    gap: 12px; font-weight: 600;
}
.details-section h4 i { color: var(--accent-primary); font-size: 1.6rem; }


.details-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-color); }

/* === MAPA === */
.map-panel {
    background-color: var(--bg-body); padding: 24px; display: flex; flex-direction: column;
    transition: all 0.5s ease-in-out; overflow: hidden;
}
.map-header { margin-bottom: 16px; min-width: 200px; }
.map-header h3 { margin: 0; font-size: 1.2rem; color: var(--text-primary); }
#interactive-map {
    border-radius: var(--radius); background-color: #1a1a1a;
    border: 1px solid var(--border-color); width: 100%; height: 100%;
}
.custom-marker-icon {
    font-size: 1.8rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.leaflet-popup-content-wrapper {
    background-color: rgba(30,30,30,0.8); backdrop-filter: blur(10px);
    color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius); box-shadow: var(--shadow-medium);
}
.leaflet-popup-content-wrapper .leaflet-popup-content { font-family: var(--font-family); }
.leaflet-popup-content h4 { font-size: 1rem; font-weight: 600; margin: 0 0 8px 0; color: var(--text-primary); }
#map-toggle-bar {
    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
    width: 24px; height: 80px; background-color: var(--bg-surface);
    border: 1px solid var(--border-color); border-right: none;
    border-radius: var(--radius) 0 0 var(--radius); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 1001; box-shadow: var(--shadow-soft);
}
#map-toggle-bar:hover { background-color: var(--bg-inset); }
#map-toggle-bar i { transition: transform 0.5s ease; font-size: 1.5rem; }
.main-container.map-hidden #map-toggle-bar i { transform: rotate(180deg); }
.leaflet-map-pane {
    z-index: 1 !important;
}

/* === WIDOKI UŻYTKOWNIKÓW I KATEGORII (TABELE) === */
.generic-list-table {
    width: 100%; border-collapse: separate; border-spacing: 0 8px;
}
.generic-list-table th {
    color: var(--text-secondary); font-weight: 600; font-size: 0.8rem;
    text-transform: uppercase; text-align: left; padding: 12px var(--table-cell-padding);
}
.generic-list-table td { 
    padding: var(--table-cell-padding); color: var(--text-primary); 
    background-color: var(--bg-surface);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.generic-list-table tr:hover td { background-color: rgba(45,45,45,0.8); }
.generic-list-table td:first-child { border-left: 1px solid var(--border-color); border-radius: var(--radius) 0 0 var(--radius); }
.generic-list-table td:last-child { border-right: 1px solid var(--border-color); border-radius: 0 var(--radius) var(--radius) 0; }
.generic-list-table tr.role-group-header td:first-child,
.generic-list-table tr.subgroup-header td:first-child { border-radius: var(--radius); } /* Zapewnia radius z lewej strony dla colspan */
.table-actions { display: flex; gap: 8px; justify-content: flex-end; }
.table-actions .btn { padding: 6px 10px; }

/* === PANEL FORMULARZA (DRAWER) === */
.form-drawer-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
.form-drawer-backdrop.is-visible { opacity: 1; visibility: visible; }
.form-drawer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background-color: var(--bg-surface); border-top: 1px solid var(--border-color-strong); box-shadow: 0 -5px 25px rgba(0,0,0,0.25); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); max-height: 90vh; overflow-y: auto; }
.form-drawer.is-visible { transform: translateY(0); }
.form-drawer-content { max-width: 800px; margin: 0 auto; padding: 2rem 2.5rem 2.5rem 2.5rem; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.drawer-header .drawer-title { font-size: 1.8rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.drawer-close-btn { background: var(--bg-inset); border: none; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; display: grid; place-items: center; cursor: pointer; transition: all 0.2s ease; }
.drawer-close-btn:hover { background: var(--accent-danger); color: var(--text-on-accent); transform: rotate(90deg); }
.drawer-body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.form-drawer .form-group { display: flex; flex-direction: column; gap: 0.75rem; }
.form-drawer .form-label { font-weight: 500; font-size: 1rem; color: var(--text-primary); }
.form-drawer .form-control, .form-drawer .form-select, .form-drawer textarea, .form-drawer input[type="date"], .form-drawer input[type="datetime-local"] { padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--bg-inset); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius); transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: var(--font-family); }
.form-drawer .form-control:focus, .form-drawer .form-select:focus, .form-drawer textarea:focus, .form-drawer input[type="date"]:focus, .form-drawer input[type="datetime-local"]:focus { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.3); outline: none; }
.form-hr { border: none; height: 1px; background-color: var(--border-color); margin: 1.5rem 0; }

/* === DASHBOARD HOLDERA === */
.dashboard-body { overflow-y: auto; height: auto; }
.dashboard-shell { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.dashboard-main { padding: 2.5rem 0; }
.dashboard-main .header-title-group { margin-bottom: 8px; }
.dashboard-subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; margin-bottom: 2.5rem; }
.permits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; }
.permit-card {
    background: var(--bg-surface); backdrop-filter: blur(15px); border-radius: var(--radius);
    border: 1px solid var(--border-color); box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.permit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--border-color-strong); }
.permit-card-header { padding: 1.25rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.permit-card-header h3 { margin: 0; font-size: 1.2rem; color: var(--text-primary); }
.permit-card-body { padding: 1.25rem; flex-grow: 1; }
.permit-card-body p { margin: 0 0 0.75rem 0; color: var(--text-secondary); }
.permit-card-body p:last-child { margin-bottom: 0; }
.permit-card-body p strong { color: var(--text-primary); font-weight: 600; }
.permit-card-footer {
    padding: 1rem 1.25rem; background-color: var(--bg-inset);
    border-top: 1px solid var(--border-color); display: flex; justify-content: center;
}
.no-permits-card { text-align: center; background: var(--bg-surface); padding: 3rem; border-radius: var(--radius); grid-column: 1 / -1; }
.no-permits-card i { font-size: 3rem; color: var(--accent-success); }

/* === KREATOR ZEZWOLEŃ === */
.wizard-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.wizard-page-title { color: var(--text-secondary); font-weight: 500; font-size: 1.2rem; margin: 0; padding: 0; border: none; flex-grow: 1; text-align: center; }
.wizard-container { flex-grow: 1; overflow-y: auto; padding: 2rem 3rem; max-width: 1276px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.wizard-progress { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3rem; width: 100%; }
.progress-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; position: relative; color: var(--text-tertiary); transition: color 0.4s ease; }
.progress-step .step-icon { width: 40px; height: 40px; border-radius: 50%; background-color: var(--bg-surface); border: 2px solid var(--border-color); display: grid; place-items: center; font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; transition: all 0.4s ease; }
.progress-step .step-label { font-size: 0.85rem; font-weight: 500; }
.progress-step.active .step-icon { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); box-shadow: 0 0 10px var(--accent-primary); }
.progress-step.active { color: var(--text-primary); }
.progress-line { flex-grow: 1; height: 2px; background-color: var(--border-color); margin-top: 19px; }
.wizard-form { background-color: var(--bg-surface); padding: 2.5rem; border-radius: var(--radius); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); }
.wizard-step { display: none; animation: fadeIn 0.5s ease-in-out; }
.wizard-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.step-title { font-size: 1.8rem; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.step-subtitle { font-size: 1rem; color: var(--text-secondary); margin: 0 0 2.5rem 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.75rem; }
.form-group-full { grid-column: 1 / -1; }
.form-label { font-weight: 500; font-size: 1rem; color: var(--text-primary); }
.form-control, textarea { padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--bg-inset); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius); transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: var(--font-family); }
.form-select {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-family);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    cursor: pointer;
}
.map-wizard-container { height: 50vh; min-height: 400px; border-radius: var(--radius); overflow: hidden; border: none; position: relative; background: #0a0a0f; }
#wizard-map { width: 100%; height: 100%; background-color: #262626; }
.map-prompt { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.8); color: white; padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.9rem; z-index: 1000; pointer-events: none; }
.summary-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.holder-toggle-container { display: flex; flex-wrap: wrap; gap: 10px; }
.holder-toggle-button input[type="checkbox"] { opacity: 0; position: absolute; width: 0; height: 0; }
.holder-toggle-button label:not(.coordinator-label) { display: flex; align-items: center; width: 100%; padding: 8px 12px; background: var(--bg-inset); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all 0.2s; gap: 8px; color: var(--text-primary); font-weight: 500; margin: 0; }
.holder-toggle-button label .permission-status { font-size: 1.2rem; }
.holder-toggle-button label .permission-status.valid { color: var(--accent-success); }
.holder-toggle-button label .permission-status.invalid { color: var(--accent-danger); }
.holder-toggle-button label:hover { background-color: #4C4C4C; border-color: #666; }
.holder-toggle-button input[type="checkbox"]:checked + label { background-color: var(--accent-primary) !important; color: var(--text-on-accent) !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 2px rgba(var(--accent-primary-darker-rgb), 0.3); }
.holder-toggle-button input[type="checkbox"]:disabled + label { background-color: rgba(112, 112, 112, 0.2); border-color: var(--text-tertiary); color: var(--text-tertiary); cursor: not-allowed; }
.holder-toggle-button input[type="checkbox"]:disabled + label:hover { background-color: rgba(112, 112, 112, 0.2); }
.summary-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; padding: 15px; background-color: var(--bg-inset); border-radius: var(--radius); }
.summary-item { padding: 15px; background-color: var(--bg-surface); border-radius: var(--radius); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.summary-label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.summary-value { font-size: 1rem; font-weight: 600; color: var(--text-primary); }

/* === MODALE === */
.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; visibility: hidden; }
.modal-backdrop.is-visible { opacity: 1; visibility: visible; }
.modal { background: var(--bg-surface); border-radius: var(--radius); box-shadow: var(--shadow-medium); width: 100%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s ease; border: 1px solid var(--border-color); }
.modal-backdrop.is-visible .modal { transform: scale(1); }
.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 1.5rem; color: var(--text-primary); }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 1rem; background-color: var(--bg-inset); border-radius: 0 0 var(--radius) var(--radius); }
.evaluation-modal .modal-body { display: flex; flex-direction: column; gap: 1.5rem; }
.evaluation-question { padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.evaluation-question:last-child { border-bottom: none; padding-bottom: 0; }
.evaluation-question p { margin: 0 0 1rem 0; color: var(--text-primary); font-weight: 500; }
.rating-group { display: flex; justify-content: space-between; align-items: center; }
.rating-group input[type="radio"] { display: none; }
.rating-group label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--bg-inset); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease-in-out; border: 2px solid transparent; }
.rating-group label .rating-value { font-size: 1.2rem; font-weight: 700; }
.rating-group label:hover { transform: scale(1.1); border-color: var(--accent-primary); }
.rating-group input[type="radio"]:checked + label { transform: scale(1.1); }
.rating-group input[type="radio"]:checked + label.rating-1, .rating-group input[type="radio"]:checked + label.rating-2 { background-color: var(--accent-danger); color: white; border-color: #c0392b; }
.rating-group input[type="radio"]:checked + label.rating-3 { background-color: var(--accent-warning); color: var(--text-on-accent); border-color: #f39c12; }
.rating-group input[type="radio"]:checked + label.rating-4, .rating-group input[type="radio"]:checked + label.rating-5 { background-color: var(--accent-success); color: white; border-color: #27ae60; }


/* === CZAT === */
#chat-windows-container { position: fixed; bottom: 0; right: 20px; z-index: 1100; display: flex; gap: 15px; align-items: flex-end; }
.chat-window { width: 320px; height: 450px; background-color: var(--bg-surface); border: 1px solid var(--border-color-strong); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-medium); overflow: hidden; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.chat-window .main-container { display: flex; flex-direction: column; height: 100%; }
.chat-header { background-color: var(--bg-inset); padding: 10px 15px; font-weight: 600; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; cursor: grab; flex-shrink: 0; }
.chat-header .partner-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.close-btn { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; flex-shrink: 0; }
.close-btn:hover { color: var(--accent-danger); }
.message-list { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message { padding: 8px 12px; border-radius: 18px; max-width: 80%; word-wrap: break-word; }
.message.incoming { background-color: var(--bg-inset); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 4px; }
.message.outgoing { background-color: var(--accent-primary); color: var(--text-on-accent); align-self: flex-end; border-bottom-right-radius: 4px; }
.message-input { display: flex; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.message-input input { flex-grow: 1; border: none; background: transparent; padding: 15px; color: var(--text-primary); font-size: 1rem; outline: none; }
.message-input button { background: var(--accent-primary); border: none; color: var(--text-on-accent); font-size: 1.5rem; padding: 0 20px; cursor: pointer; transition: background-color 0.2s; }
.message-input button:hover { background-color: var(--accent-primary-darker); }

/* === INSTRUKCJE I PODPISY === */
.signature-pad-container { height: 300px; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background-color: #fff; }
#signature-pad { width: 100%; height: 100%; display: block; }
.instruction-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; margin-bottom: 1rem; background-color: var(--bg-inset); padding: 1rem; border-radius: var(--radius); }
.file-upload-wrapper { display: flex; align-items: center; gap: 1rem; }
.file-upload-wrapper .file-input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.file-upload-wrapper .file-label { cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.file-upload-wrapper .file-name-display { font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-name-display a { color: var(--accent-primary); text-decoration: none; }
.file-name-display a:hover { text-decoration: underline; }
.remove-instruction-btn { padding: 6px 10px; }
.drawer-body .instructions-section { margin-bottom: 1.5rem; }
.drawer-body .instruction-list { list-style: none; padding: 1rem; margin: 0; background-color: var(--bg-body); border-radius: var(--radius); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.75rem; }
.drawer-body .instruction-item a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); text-decoration: none; color: var(--text-primary); background-color: var(--bg-inset); transition: background-color 0.2s ease; }
.drawer-body .instruction-item a:hover { background-color: var(--accent-primary); color: var(--text-on-accent); }
.drawer-body .instruction-item i { font-size: 1.5rem; color: var(--accent-primary); }
.drawer-body .instruction-item a:hover i { color: var(--text-on-accent); }
.form-prompt { font-size: 1rem; color: var(--text-secondary); margin: 1.5rem 0 1rem 0; text-align: center; padding: 1rem; background-color: var(--bg-inset); border-radius: var(--radius); }
.signature-group { border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 1rem; background-color: var(--bg-surface); transition: background-color 0.2s ease; }
.signature-group[open] { background-color: var(--bg-inset); }
.signature-group-header { padding: 1rem 1.5rem; cursor: pointer; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.signature-group-header::-webkit-details-marker { display: none; }
.signature-group-header::after { content: '\ea4e'; font-family: 'remixicon'; font-size: 1rem; transition: transform 0.3s ease; }
.signature-group[open] > .signature-group-header::after { transform: rotate(180deg); }
.signatures-grid-enhanced { padding: 0 1.5rem 1.5rem 1.5rem; }

/* === ZDARZENIA NIEBEZPIECZNE (ICE) === */
.btn-ice { background-color: var(--accent-danger); color: white; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); }
.btn-ice:hover { background-color: #ff4d4d; transform: translateY(-3px) scale(1.05); }
.ice-marker-icon { font-weight: 900; color: var(--accent-danger); text-shadow: 0 0 5px rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; font-size: 2.5rem; line-height: 1; }
.map-filter-controls { position: absolute; top: 10px; right: 10px; z-index: 1000; background: var(--bg-surface); border-radius: var(--radius); padding: 5px; display: flex; gap: 5px; border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); }
.map-filter-btn { background: transparent; border: none; color: var(--text-secondary); padding: 8px 12px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-weight: 500; transition: all 0.2s ease; }
.map-filter-btn:hover { background: var(--bg-inset); color: var(--text-primary); }
.map-filter-btn.active { background: var(--accent-primary); color: var(--text-on-accent); }
.map-filter-btn i { font-size: 1.2rem; }
.map-filter-btn .ice-icon { color: var(--accent-danger); }
.map-filter-btn.active .ice-icon { color: var(--text-on-accent); }
.event-item.type-ice_event { border-left-color: var(--accent-danger) !important; padding: 0; background-color: rgba(255, 107, 107, 0.05); border-radius: var(--radius); }
.event-item.type-ice_event > summary { padding: 16px; cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 16px; position: relative; }
.event-item.type-ice_event > summary::-webkit-details-marker { display: none; }
.event-item.type-ice_event > summary::after { content: '\ea4e'; font-family: 'remixicon'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease; }
.event-item[open].type-ice_event > summary::after { transform: translateY(-50%) rotate(180deg); }
.event-item.type-ice_event > summary .icon { color: var(--accent-danger); font-size: 1.6rem; margin-top: 2px; }
.ice-details-content { padding: 0 16px 16px 56px; display: flex; flex-direction: column; gap: 1rem; }
.ice-attachments { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ice-attachment-item { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-inset); padding: 5px 10px; border-radius: var(--radius); color: var(--text-primary); text-decoration: none; transition: background-color 0.2s ease; }
.ice-attachment-item:hover { background-color: var(--accent-primary); color: var(--text-on-accent); }
.involved-person-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.involved-person-row .form-control { flex-grow: 1; }
.upload-progress-container { width: 100%; background-color: var(--bg-inset); border-radius: 8px; overflow: hidden; margin-top: 10px; height: 24px; border: 1px solid var(--border-color); }
.upload-progress-bar { width: 0%; height: 100%; background: linear-gradient(45deg, var(--accent-success), #6cffb5); text-align: center; line-height: 24px; color: white; font-weight: 600; transition: width 0.4s ease-in-out; }

/* === MODAL AKTUALIZACJI WERSJI === */
.version-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9998; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.version-modal-backdrop.is-visible { opacity: 1; visibility: visible; }
.version-modal { background: var(--bg-surface); border: 1px solid var(--border-color-strong); border-radius: var(--radius); box-shadow: var(--shadow-medium); padding: 2.5rem; width: 100%; max-width: 550px; text-align: center; transform: scale(0.95); transition: transform 0.3s ease; }
.version-modal-backdrop.is-visible .version-modal { transform: scale(1); }
.version-modal h2 { color: var(--text-primary); font-size: 1.8rem; margin-top: 0; margin-bottom: 1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; }
.version-modal h2 .icon { font-size: 2.5rem; color: var(--accent-warning); }
.version-modal .update-lead { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 2rem; }
.version-modal .version-notes { background-color: var(--bg-inset); border-radius: var(--radius); padding: 1rem 1.5rem; margin-top: 2rem; margin-bottom: 2.5rem; text-align: left; }
.version-modal .version-notes h3 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--text-secondary); }
.version-modal .version-notes p { margin: 0; color: var(--text-primary); font-weight: 500; }
.version-modal .update-button { font-size: 1.2rem; padding: 1rem 2rem; width: 100%; }

/* === STYLE OFFLINE I POLA STATYCZNE === */
.offline-badge { color: var(--accent-warning); font-weight: bold; margin-left: 8px; font-size: 0.9em; }
.form-select-static { padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius); cursor: not-allowed; display: block; width: 100%; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.checkbox-group > div {
    position: relative;
}
.checkbox-group input[type="checkbox"] { opacity: 0; position: absolute; width: 0; height: 0; }
.checkbox-group label { cursor: pointer; padding-left: 32px; position: relative; display: inline-block; line-height: 22px; color: var(--text-primary); font-weight: 500; transition: color 0.2s ease-in-out; }
.checkbox-group label::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 2px solid var(--border-color-strong); border-radius: 6px; background-color: var(--bg-inset); transition: all 0.2s ease-in-out; }
.checkbox-group label::after { content: ''; position: absolute; left: 7px; top: 4px; width: 6px; height: 12px; border: solid var(--text-on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.checkbox-group label:hover::before { border-color: var(--accent-primary); }
.checkbox-group input[type="checkbox"]:checked + label::before { background-color: var(--accent-primary); border-color: var(--accent-primary-darker); }
.checkbox-group input[type="checkbox"]:checked + label::after { transform: rotate(45deg) scale(1); }
.checkbox-group input[type="checkbox"]:focus + label::before { box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.4); }

.custom-select-container { position: relative; width: 100%; user-select: none; }
.custom-select-button { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--bg-inset); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius); transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: var(--font-family); display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; }
.custom-select-button:hover { border-color: var(--border-color-strong); }
.custom-select-container.open .custom-select-button { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.3); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.custom-select-button .arrow { transition: transform 0.3s ease; }
.custom-select-container.open .custom-select-button .arrow { transform: rotate(180deg); }
.custom-select-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-surface); border: 1px solid var(--accent-primary); border-top: none; border-radius: 0 0 var(--radius) var(--radius); z-index: 1010; max-height: 300px; overflow-y: auto; padding: 0.5rem; backdrop-filter: blur(10px); }
.custom-select-container.open .custom-select-dropdown { display: block; }
.area-tree-level { list-style: none; padding-left: 1rem; margin: 0; }
.area-tree-item { padding: 0.25rem 0; }
.area-tree-item.is-parent > details > summary { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; list-style: none; color: var(--text-primary); font-weight: 600; transition: background-color 0.2s; }
.area-tree-item.is-parent > details > summary:hover { background-color: var(--bg-inset); }
.area-tree-item.is-parent .area-name { flex-grow: 1; }
.area-tree-item.is-parent .area-name::before { content: '\ea6e'; font-family: 'remixicon'; display: inline-block; margin-right: 8px; transition: transform 0.2s ease; font-weight: normal; }
.area-tree-item.is-parent > details[open] > summary .area-name::before { transform: rotate(90deg); }
.btn-select-parent { padding: 4px 8px !important; font-size: 0.75rem !important; line-height: 1; margin-left: 1rem; flex-shrink: 0; opacity: 1; visibility: visible; }
.area-tree-item.is-selectable > span { display: block; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--text-secondary); transition: background-color 0.2s, color 0.2s; }
.area-tree-item.is-selectable > span:hover { background-color: var(--accent-primary); color: var(--text-on-accent); }
.btn-icon-link { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); text-decoration: none; font-size: 1.5rem; transition: all 0.2s ease-in-out; }
.btn-icon-link:hover { background-color: var(--bg-inset); color: var(--accent-primary); border-color: var(--border-color-strong); transform: scale(1.05); }

/* === RESPONSIVE === */
@media (max-width: 1400px) {
    .permit-summary { grid-template-columns: 24px 50px 80px 1.5fr 1fr 1fr 1fr 120px 50px; }
    .summary-col.authorizer-col { display: none; }
}
@media (max-width: 1200px) {
    .main-menu a span { display: none; }
    .permit-summary { grid-template-columns: 24px 50px 80px 1.5fr 1fr 1fr 120px 50px; }
    .summary-col.issuer-col { display: none; }
}
@media (max-width: 992px) {
    body { overflow-y: auto; }
    .main-container { grid-template-columns: 1fr; }
    .map-panel, #map-toggle-bar { display: none; }
    .content-panel { border-right: none; padding: 16px;}
    .permit-summary {
        grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto;
        gap: 8px 16px; padding: 16px;
    }
    .permit-type-label-wrapper { grid-column: 1; grid-row: 1 / -1; align-items: flex-start; padding-top: 4px;}
    .summary-col.description { grid-column: 2 / -1; grid-row: 1; }
    .summary-col.id-col, .summary-col.holder-col, .summary-col.status-col { grid-row: 2; }
    .summary-col.issuer-col, .summary-col.authorizer-col, .summary-col.area-col { display: none; }
    .summary-col.expand-icon { grid-column: 3; grid-row: 2; }
    .details-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .main-menu { display: none; }
    .nav-separator { display: none; }
}
@media (max-width: 576px) {
    .top-nav { padding: 0 16px; gap: 6px; }
    .nav-right { gap: 8px; }
    .permit-summary { grid-template-columns: 24px 1fr auto; }
    .summary-col.id-col, .summary-col.locate-col { display: none; }
    .summary-col.holder-col { grid-column: 2; grid-row: 2; }
    .summary-col.status-col { grid-column: 2; grid-row: 3; }
    .expand-icon { grid-column: 3; grid-row: 3; }
}
/* === NOWE STYLE DLA ROZWIJANEJ LISTY OBSZARÓW === */

/* Ukrywamy domyślny trójkąt/strzałkę w przeglądarkach */
.area-tree-item summary::-webkit-details-marker {
    display: none;
}
.area-tree-item summary {
    list-style: none; /* Dla przeglądarki Firefox */
    cursor: pointer;
    outline: none; /* Usuwamy domyślny obrys po kliknięciu */
}

/* Stylizujemy <summary> tak, jak wcześniej wyglądał div, aby zachować spójność */
.area-tree-item summary.area-item-content,
.area-tree-item div.area-item-content { /* DODANO: Rozszerzenie stylu na kontenery div */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--table-cell-padding, 16px);
    background-color: var(--bg-surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.area-tree-item summary.area-item-content:hover,
.area-tree-item div.area-item-content:hover { /* DODANO: Rozszerzenie stylu na kontenery div */
    background-color: rgba(45,45,45,0.8);
    border-color: var(--border-color-strong);
}

/* ZMIANA: Ikona strzałki dodawana tylko do rozwijalnych <summary> wewnątrz <details> */
.area-tree-item details > summary .area-name::before {
    content: '▶'; /* Trójkąt wskazujący w prawo */
    font-size: 0.9em;
    vertical-align: middle;
    margin-right: 10px;
    color: var(--text-tertiary);
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

/* NOWY STYL: Dodajemy wcięcie dla nierozwijanych elementów, aby wyrównać tekst */
.area-tree-item div.area-item-content .area-name {
    padding-left: 22px; /* Wartość dobrana, by pasowała do miejsca zajmowanego przez ikonę ▶ */
}

/* Obracamy naszą strzałkę o 90 stopni, gdy element jest rozwinięty (bez zmian) */
.area-tree-item details[open] > summary .area-name::before {
    transform: rotate(90deg);
}

/* Dodajemy mały margines dla zagnieżdżonej listy, aby wyglądała lepiej (bez zmian) */
.area-tree-item details > .area-tree-level {
    margin-top: 8px;
    border-left: 1px solid var(--border-color);
    padding-left: 16px; 
}
/* --- NOWE STYLE DODANE NA KOŃCU PLIKU --- */

/* === PANEL AKTYWNYCH BLOKAD LOTOTO === */
.lototo-status-panel {
    padding: 24px;
    background-color: var(--bg-surface);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-warning); /* Akcent kolorystyczny */
    border-radius: 16px;
    margin-bottom: 32px;
}
.lototo-status-panel h4 {
    margin: 0 0 20px 0;
    font-size: 1.3rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}
.lototo-status-panel h4 i {
    color: var(--accent-warning);
}
.lototo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.lototo-status-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background-color: var(--bg-inset);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.lototo-status-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-soft);
}
.lototo-status-card .icon {
    font-size: 2rem;
    color: var(--accent-warning);
}
.lototo-status-card .details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.lototo-status-card .area-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.lototo-status-card .user-name,
.lototo-status-card .time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lototo-status-card .locate-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
}



.blinking-marker {
    /* Usunięto animację z tej klasy */
    /* Zamiast animacji, nadajemy jej stały styl, który jest widoczny */
    color: var(--accent-warning) !important;
    font-weight: bold;
	border: 1px black;
}
.lototo-marker-icon i {
    /* Dopasuj rozmiar ikony kłódki, aby pasowała do kropki */
    font-size: 1.5rem; 
	color: #FFD54F !important;

    /* Dodanie czarnego obrysu i cienia */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0    4px 6px rgba(0, 0, 0, 0.5);
		
}
/* NOWY STYL DLA KONTENERA NAZWY I IKONY */
.area-name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Odstęp między nazwą a ikoną */
}

/* POPRAWIONY STYL IKONY Z GRADIENTEM */
.lototo-icon-tree {
    font-size: 1.1rem;
    
    /* Użycie złotego gradientu zamiast jednolitego koloru */
    background-image: linear-gradient(to bottom, var(--accent-primary-darker), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    
}
/* --- NOWE, POPRAWIONE STYLE OSI CZASU (Wersja 3 - PRO) --- */

.timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Główna linia tła */
.timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--border-color);
    z-index: 0;
}

.timeline-item {
    position: relative;
    padding-bottom: 32px;
    padding-left: 64px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item .timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: absolute;
    top: -2px;
    left: 7px; /* (24px line center) - (18px half width) + 1px adjustment */
    background-color: var(--bg-surface);
    font-size: 1.2rem;
    z-index: 1;
    border: 2px solid var(--border-color);
    box-shadow: 0 0 0 6px var(--bg-surface); /* Margines wokół ikony */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.timeline-item .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-item .timeline-title {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.timeline-item .timeline-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-family: monospace;
}

/* --- STANY --- */

/* 1. UKOŃCZONE (DONE) - Ptaszek zielony na białym tle w zielonym okręgu */
.timeline-item.done .timeline-icon {
    width: 32px;
    height: 32px;
    left: 9px;
    background-color: var(--bg-surface);
    border-color: var(--accent-success);
    color: var(--accent-success);
    font-size: 1.5rem;
    box-shadow: 0 0 0 6px var(--bg-surface), 0 0 15px rgba(61, 220, 151, 0.3);
}
.timeline-item.done .timeline-title {
    color: var(--text-primary);
    font-weight: 600;
}
.timeline-item.done .timeline-meta {
    color: var(--text-tertiary);
}

/* 2. OCZEKUJĄCE (PENDING) - Minimalistyczne kropki */
.timeline-item.pending .timeline-icon {
    width: 14px;
    height: 14px;
    left: 18px; /* Centrowanie mniejszej kropki */
    top: 8px;
    border-width: 2px;
    background-color: var(--bg-surface);
    border-color: var(--text-tertiary);
    color: transparent;
    box-shadow: 0 0 0 4px var(--bg-surface);
}
.timeline-item.pending .timeline-title {
    color: var(--text-tertiary);
    font-weight: 400;
    opacity: 0.7;
}

/* 3. AKTUALNE (CURRENT) - Wyraźne zaznaczenie oczekiwania */
.timeline-item.current .timeline-icon {
    width: 32px;
    height: 32px;
    left: 9px;
    background-color: var(--bg-surface);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
    box-shadow: 0 0 0 6px var(--bg-surface), 0 0 20px rgba(255, 213, 79, 0.25);
    /* Usunięto pulse-border stąd, aby nie kolidowało z obrotem ikony */
    z-index: 2;
    transform: scale(1.1);
}

/* Obroty dla ikony wewnątrz statusu Current */
.timeline-item.current .timeline-icon i {
    animation: rotate-spinner 1.5s linear infinite;
    display: inline-block;
}

.timeline-item.current .timeline-title {
    color: var(--accent-warning);
    font-weight: 700;
    font-size: 1.05rem;
    transform: translateX(5px);
}

/* 4. W TRAKCIE PRAC (IN PROGRESS WORK) - Specjalny styl */
.timeline-item.in-progress-work .timeline-icon {
    background-color: var(--accent-inprogress);
    border-color: var(--accent-inprogress);
    color: #fff;
    box-shadow: 0 0 0 6px var(--bg-surface), 0 0 25px rgba(190, 102, 255, 0.5);
    z-index: 2;
    transform: scale(1.15);
}

.timeline-item.in-progress-work .timeline-title {
    color: var(--accent-inprogress);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: translateX(5px);
}

/* 5. ANULOWANE */
.timeline-item.cancelled .timeline-icon {
    background-color: var(--bg-surface);
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}
.timeline-item.cancelled .timeline-title {
    color: var(--accent-danger);
    text-decoration: line-through;
}

/* --- ANIMACJE --- */
@keyframes rotate-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.4), 0 0 0 6px var(--bg-surface); }
    70% { box-shadow: 0 0 0 12px rgba(255, 213, 79, 0), 0 0 0 6px var(--bg-surface); }
    100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0), 0 0 0 6px var(--bg-surface); }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(190, 102, 255, 0.7), 0 0 0 6px var(--bg-surface); transform: scale(1.15); }
    50% { box-shadow: 0 0 25px rgba(190, 102, 255, 0.4), 0 0 0 6px var(--bg-surface); transform: scale(1.25); }
    100% { box-shadow: 0 0 0 0 rgba(190, 102, 255, 0), 0 0 0 6px var(--bg-surface); transform: scale(1.15); }
}
/* === DASHBOARD HOLDERA (ULEPSZONE GRUPOWANIE V2) - WERSJA PO FINALNYCH POPRAWKACH === */

.permit-group-card {
    background: var(--bg-surface);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    /* NOWOŚĆ: Ustawienie pozycji względnej, aby status mógł być pozycjonowany absolutnie */
    position: relative; 
    padding-top: 1.5rem; /* NOWOŚĆ: Dodatkowe miejsce na status */
}

.permit-group-card:hover {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-medium);
}

/* ZMIANA: Usunięto status z nagłówka, więc uproszczono jego style */
.permit-group-header {
    display: flex;
    padding: 1rem 1.5rem 1.5rem; /* ZMIANA: Dostosowany padding */
    border-bottom: 1px solid var(--border-color);
}

.permit-group-header .permit-info {
    flex-grow: 1;
}

.permit-group-header .permit-info h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 600;
}

.permit-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    background-color: var(--bg-inset);
}

.meta-item i {
    font-size: 1.1rem;
    color: var(--accent-primary);
}

.location-item {
    color: var(--text-primary);
    background-color: rgba(var(--accent-primary-rgb), 0.1);
}

/* NOWOŚĆ: Kompletna zmiana stylów dla statusu, aby umieścić go na górze na środku */
.status-badgeD {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfekcyjne centrowanie na krawędzi */
    padding: 6px 16px;
    border-radius: 20px; /* Zaokrąglona pigułka */
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap; /* Zapobiega łamaniu tekstu statusu */
    border: 1px solid;
}


/* === STYLE KART PRACOWNIKÓW === */

.holder-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.15);
}

.holder-action-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: 3px solid transparent;
    border-radius: var(--radius);
    padding: 1.5rem 1rem; /* ZMIANA: Więcej pionowego paddingu */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px; /* ZMIANA: Zwiększona minimalna wysokość */
    transition: all 0.2s ease-in-out;
    /* NOWOŚĆ: Wyśrodkowanie całej zawartości karty */
    text-align: center; 
}

.holder-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.holder-action-card.is-current-user {
    border-top-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.1);
}

/* ZMIANA: Wyśrodkowanie ikony i imienia poprzez zmianę kierunku flex */
.holder-action-card .holder-info {
    display: flex;
    flex-direction: column; /* Ustawienie ikony nad imieniem */
    align-items: center;   /* Wyśrodkowanie w poziomie */
    gap: 8px;              /* Odstęp między ikoną a imieniem */
    width: 100%;
}

.holder-action-card .holder-info i {
    font-size: 2.2rem; /* ZMIANA: Powiększona ikona */
    color: var(--text-secondary);
}

.holder-action-card .holder-name {
    font-weight: 600;
    font-size: 1.2rem; /* ZMIANA: Powiększone i czytelniejsze imię */
    color: var(--text-primary);
}

.holder-action-card .holder-actions {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
}

/* ZMIANA: Przycisk nie jest już na 100% szerokości i jest wycentrowany */
.holder-action-card .holder-actions .btn {
    width: auto; /* Automatyczna szerokość dopasowana do treści */
    min-width: 150px; /* Minimalna szerokość dla estetyki */
    padding: 12px 24px;
}
.holder-action-card .holder-actions .btn i {
    font-size: 1.4rem;
}

.holder-action-card .holder-actions .action-message {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    text-align: center;
}
/* --- Plik: assets/css/style.css --- */

/* === NOWE STYLE DLA PANELU PODPISU W ZASTĘPSTWIE === */
.proxy-signature-prompt {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: rgba(var(--accent-primary-rgb), 0.08);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius);
}

.proxy-signature-prompt .prompt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.proxy-signature-prompt .prompt-header i {
    font-size: 2rem;
    color: var(--accent-warning);
}

.proxy-signature-prompt .prompt-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.proxy-signature-prompt .prompt-details {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.proxy-signature-prompt .prompt-details strong {
    color: var(--text-primary);
    font-weight: 500;
}

.proxy-signature-prompt .prompt-details .signer-info {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--bg-inset);
    border-radius: 6px;
    border: 1px solid var(--border-color-strong);
}

.proxy-signature-prompt .proxy-confirmation-checkbox {
    background-color: var(--bg-inset);
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}
/* === FORMULARZ UŻYTKOWNIKA - LISTA KATEGORII === */
.category-checkbox-list {
    display: flex;
    flex-direction: column; /* Ustawia elementy w kolumnie (jeden pod drugim) */
    gap: 4px; /* Mały odstęp między elementami */
    background-color: var(--bg-body); /* Ciemniejsze tło dla kontrastu */
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    max-height: 250px; /* Maksymalna wysokość, po przekroczeniu pojawi się pasek przewijania */
    overflow-y: auto; /* Automatyczny pasek przewijania */
}

/* Styl pojedynczego elementu na liście */
.category-checkbox-item label {
    display: block; /* Etykieta zajmuje całą szerokość */
    width: 100%;
    padding: 10px 12px;
    padding-left: 44px; /* Więcej miejsca na niestandardowy checkbox */
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    position: relative; 
}

.category-checkbox-item label:hover {
    background-color: var(--bg-inset); /* Efekt podświetlenia przy najechaniu */
}

/* Ukrycie domyślnego checkboxa */
.category-checkbox-item {
    position: relative;
}
.category-checkbox-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Niestandardowy wygląd checkboxa (kwadracik) */
.category-checkbox-item label::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color-strong);
    border-radius: 6px;
    background-color: var(--bg-inset);
    transition: all 0.2s ease-in-out;
}

/* Niestandardowy wygląd "ptaszka" w checkboxie */
.category-checkbox-item label::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 50%;
    /* Precyzyjne wyśrodkowanie "ptaszka" */
    transform: translateY(-50%) rotate(45deg) scale(0);
    transform-origin: center center;
    width: 6px;
    height: 12px;
    border: solid var(--text-on-accent);
    border-width: 0 3px 3px 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Wygląd po zaznaczeniu */
.category-checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary-darker);
}

.category-checkbox-item input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* Efekt focus dla dostępności */
.category-checkbox-item input[type="checkbox"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.4);
}
/* --- NOWE STYLE DLA TIMERÓW I STATUSU PPOŻ --- */

/* 1. Styl dla nowego statusu "Wygaszanie PPOŻ" */
.status-badge.status-Wygaszanie-PPOŻ {
    color: #FF9800; /* Pomarańczowy */
    border-color: #FF9800;
    background-color: rgba(255, 152, 0, 0.1);
    /* Dodajemy animację, aby zwrócić uwagę */
    animation: pulse-orange 2s infinite;
}

/* 2. Animacja pulsowania dla statusu wygaszania */
@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}


/* 3. Styl dla głównego kontenera timerów na liście zleceń */
.hot-work-timer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, var(--accent-danger), #ff8a8a); /* Czerwony gradient */
    color: white;
    padding: 8px 20px;
    border-radius: 99px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    display: flex;
    align-items: center;
    gap: 24px; /* Większy odstęp między licznikami */
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap; /* Zapobiega łamaniu linii */
}

/* 4. Style dla pojedynczych liczników wewnątrz kontenera */
.hot-work-timer span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hot-work-timer span i {
    font-size: 1.2rem;
}



 #pdf-controls {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 20px;
 background: var(--bg-surface);
 padding: 8px;
 border-radius: var(--radius);
 border: 1px solid var(--border-color);
 }
 #pdf-controls button {
 height: 36px;
 font-size: 1.2rem;
 }
 #pdf-controls span {
 font-weight: 600;
 color: var(--text-primary);
 min-width: 60px;
 text-align: center;
 }
 #pdf-container {
 margin: 0 auto 20px auto;
 width: fit-content;
 max-width: 100%;
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-medium);
 }
 .page-container {
 position: relative;
 margin: 0 auto 20px auto;
 }
 .custom-checkbox {
 position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; cursor: pointer;
 background-color: transparent; border: none;
 box-sizing: border-box; transition: transform 0.1s ease-in-out;
 }
 .custom-checkbox:hover { transform: scale(1.2); }
 .custom-checkbox.checked::after {
 content: ''; position: absolute; left: 50%; top: 45%;
 width: 40%; height: 70%;
 border: solid black; border-width: 0 3px 3px 0;
 transform: translate(-50%, -50%) rotate(45deg);
 }

 /* --- ZMIANA: OSTATECZNA POPRAWKA STYLÓW DRUKOWANIA --- */
 @media print {
 @page {
 /* Zerujemy domyślne marginesy drukowania przeglądarki */
 margin: 0;
 size: A4;
 }

 body, html {
 background: #FFF !important; /* Białe tło dla druku */
 }

 /* Ukrywamy wszystkie elementy interfejsu */
 .top-nav, .dashboard-header, #pdf-controls {
 display: none !important;
 }

 /* Resetujemy kontenery nadrzędne, aby nie ograniczały PDF */
 body, .main-container, .content-panel {
 padding: 0 !important;
 margin: 0 !important;
 border: none !important;
 box-shadow: none !important;
 overflow: visible !important; /* Ważne dla łamania stron */
 }

 /* Kontener PDF i jego strony mają zająć 100% dostępnego miejsca */
 #pdf-container {
 width: 100% !important;
 height: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 border: none !important;
 box-shadow: none !important;
 }
 .page-container {
 width: 100% !important;
 height: 100vh !important; /* 100% wysokości okna drukowania (strony) */
 display: flex;
 justify-content: center;
 align-items: center;
 page-break-after: always; /* Każda strona PDF na nowej kartce */
 margin: 0 !important;
 box-shadow: none !important;
 }
 .page-container:last-child {
 page-break-after: auto;
 }

 /* Płótno (canvas) i warstwa adnotacji mają się wpasować w kontener */
 .page-container canvas, .page-container .annotationLayer {
 width: 100% !important;
 height: 100% !important;
 object-fit: contain; /* Kluczowe: skaluje PDF, aby zmieścił się w 100% wysokości/szerokości, zachowując proporcje */
 }
 /* Wskaźnik postępu podczas przygotowywania wydruku */
body.printing-in-progress::after {
  content: 'Przygotowywanie wydruku w wysokiej jakości...';
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background-color: #0056b3; /* Ciemniejszy niebieski dla lepszej widoczności */
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10000;
  font-size: 1rem;
  font-weight: 500;
  animation: fadeInOut 2.5s ease-in-out;
}
 }

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}
/* --- Poprawki stylów dla pól tekstowych w formularzu PDF --- */

.textWidgetAnnotation textarea,
.textWidgetAnnotation input[type="text"] {
    /* KLUCZOWA ZMIANA: Ustaw większy rozmiar czcionki. Dostosuj wartość do swoich potrzeb. */
    font-size: 14px !important;

    /* (Opcjonalnie, ale zalecane) Poprawia czytelność i wygląd */
    line-height: 1.4 !important; /* Zwiększa odstęp między liniami tekstu */
    padding: 2px 4px !important; /* Dodaje "oddech" wokół tekstu w polu */
    box-sizing: border-box !important; /* Zapobiega zmianie rozmiaru pola przez padding */
    color: #000 !important; /* Upewnij się, że tekst jest czarny */
}
/* === NOWY STYL DLA PRZYCISKU FULLSCREEN === */
.nav-button-public {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    height: 35px;
    width: 35px; /* Kwadratowy przycisk */
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   MODERN MUTE POPOVER & BUTTON STYLES (WKLEJ NA KONIEC PLIKU)
   ========================================================================== */

/* --- 1. PRZYCISK DZWONKA NA KARCIE ZLECENIA --- */
.btn-mute {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

.btn-mute:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Stan aktywny (gdy trwa odliczanie - fioletowy glow) */
.btn-mute.active {
    background: rgba(190, 102, 255, 0.15) !important;
    border-color: var(--accent-inprogress) !important;
    color: var(--accent-inprogress) !important;
    box-shadow: 0 0 15px rgba(190, 102, 255, 0.2) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: auto !important;
    min-width: 80px !important; /* Miejsce na timer */
}

.btn-mute.active:hover {
    background: rgba(190, 102, 255, 0.25) !important;
}

/* Ukryty/Widoczny tekst timera */
.btn-mute .mute-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    font-variant-numeric: tabular-nums !important;
    display: none !important;
}

.btn-mute.active .mute-label {
    display: inline !important;
}


/* --- 2. KONTENER DYMKA (POPOVER) --- */
.mute-popover {
    position: absolute !important; /* Pozycjonowany przez JS */
    z-index: 99999 !important; /* Musi być na samej górze */
    width: 320px !important;
    
    /* Ciemne tło + efekt szkła */
    background-color: #1a1a1a !important;
    background: rgba(30, 30, 30, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    
    /* Cień dający efekt lewitacji */
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8), 
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    
    /* Animacja pojawiania się */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(0.95) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
}

/* Klasa dodawana przez JS, aby pokazać dymek */
.mute-popover.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Tytuł w dymku */
.popover-title {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 10px !important;
}

/* Strzałka dymka (trójkąt) */
.popover-arrow {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    background: #1a1a1a !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    bottom: -8px !important;
    left: 50% !important;
    margin-left: -8px !important;
    transform: rotate(-135deg) !important;
    z-index: -1 !important;
}

/* Jeśli dymek jest pod przyciskiem (obrót strzałki) */
.mute-popover.position-bottom .popover-arrow {
    bottom: auto !important;
    top: -8px !important;
    transform: rotate(45deg) !important;
}


/* --- 3. KAFELKI WYBORU CZASU --- */
.mute-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* Pojedynczy przycisk (kafelek) */
.mute-option-btn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 15px 0 !important;
    cursor: pointer !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    color: var(--text-primary) !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    min-height: 80px !important;
}

.mute-option-btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--accent-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.mute-option-btn:active {
    transform: translateY(-1px) !important;
    background-color: rgba(255, 215, 0, 0.1) !important;
}

/* Czas (duża cyfra) */
.mute-option-btn .time {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Jednostka (min/h) */
.mute-option-btn .unit {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Ikona nieskończoności */
.mute-option-btn i {
    font-size: 1.8rem !important;
    color: var(--accent-primary) !important;
    margin-bottom: 4px !important;
}


/* --- 4. PRZYCISK ANULOWANIA (Włącz powiadomienia) --- */
.unmute-btn-container {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.15) !important;
}

.unmute-btn {
    width: 100% !important;
    padding: 12px !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
    border: 1px solid var(--accent-danger) !important;
    border-radius: 8px !important;
    color: var(--accent-danger) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.unmute-btn:hover {
    background-color: var(--accent-danger) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25) !important;
}


/* === NOWE STYLE: WYBÓR PRACOWNIKA Z GRUPOWANIEM I WYSZUKIWARKĄ === */

/* Kontener paska wyszukiwania */
.holder-search-container {
    position: relative;
    margin-bottom: 15px;
}

.holder-search-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.holder-search-container input {
    padding-left: 40px !important; /* Miejsce na ikonę lupy */
}

/* Sekcja grupy (np. 'Holder - Technik') */
.holder-group-section {
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.holder-group-section h5 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

/* Lista kafelków wewnątrz grupy */
.holder-group-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Pojedynczy kafelek pracownika */
.holder-option {
    position: relative;
}

/* Ukrywamy domyślne radio/checkbox */
.holder-option input[type="radio"],
.holder-option input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Stylizowana etykieta */
.holder-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.holder-option label:hover {
    border-color: var(--border-color-strong);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Stan zaznaczony */
.holder-option input[type="radio"]:checked + label,
.holder-option input[type="checkbox"]:checked + label {
    background-color: rgba(255, 215, 0, 0.15); /* Złote tło */
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.holder-option i {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.holder-option input:checked + label i {
    color: var(--accent-primary);
}

/* Kontener listy z przewijaniem */
#holder-selection-container,
#wizard-holder-list {
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    /* Ładny pasek przewijania */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-strong) var(--bg-body);
}

/* --- 1. Wyszukiwarka w drawerze --- */
.holder-search-container {
    position: relative;
    margin-bottom: 15px;
}

.holder-search-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.1rem;
    pointer-events: none;
}

.holder-search-container input {
    padding-left: 40px !important; /* Miejsce na ikonę lupy */
    background-color: var(--bg-body);
    border-color: var(--border-color-strong);
}

.holder-search-container input:focus {
    background-color: var(--bg-surface);
}

/* --- 2. Kontener listy --- */
#drawer-holder-list {
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 15px;
    max-height: 350px;
    overflow-y: auto;
    /* Styl paska przewijania (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-strong) var(--bg-body);
}

/* --- 3. Sekcje Grup (Role) --- */
.holder-group-section {
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.holder-group-section:last-child {
    margin-bottom: 0;
}

.holder-group-section h5 {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--accent-primary); /* Złoty kolor nagłówka */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.holder-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- 4. Kafelki Pracowników (Opcje) --- */
.holder-option {
    position: relative;
}

/* Ukrywamy domyślne inputy (radio/checkbox) */
.holder-option input[type="radio"],
.holder-option input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Stylizowana etykieta (Label) */
.holder-option label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

/* Efekt Hover */
.holder-option label:hover {
    border-color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

/* Stan ZAZNACZONY (Checked) */
.holder-option input:checked + label {
    background-color: rgba(255, 215, 0, 0.1); /* Delikatne złote tło */
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 12px rgba(0,0,0,0.3);
}

/* Ikona wewnątrz kafelka */
.holder-option i {
    font-size: 1.3rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.holder-option input:checked + label i {
    color: var(--accent-primary); /* Ikona robi się złota */
}

/* Numer SAP/Karty po prawej stronie */
.holder-option span:last-child {
    font-family: monospace;
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- 5. Style dla Przekazania Zmiany (Handover) --- */
.handover-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.handover-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.9rem;
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    box-shadow: var(--shadow-soft);
}

.handover-chip.departing {
    border-left: 3px solid var(--accent-danger);
}

.handover-chip i.red-icon {
    color: var(--accent-danger);
}

.handover-chip i.green-icon {
    color: var(--accent-success);
}
/* ==========================================================================
   POPRAWKA UKŁADU SIATKI (GRID) DLA KAFELKÓW
   ========================================================================== */

/* Główny kontener listy - resetujemy go, aby nie był siatką, 
   tylko kontenerem blokowym trzymającym tytuły i pod-siatki */
#permitsList.permits-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Właściwa siatka dla grup kafelków (wnętrze sekcji) */
.permits-grid {
    display: grid;
    /* To jest kluczowa linia: twórz tyle kolumn ile się zmieści, 
       ale każda musi mieć minimum 340px szerokości */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--gap-base, 1.5rem); /* ZMIANA NA ZMIENNĄ */
    width: 100%;
}

/* Responsywność - na telefonach jedna kolumna */
@media (max-width: 576px) {
    .permits-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   STYLE DLA SEKCJI "MOJE PROŚBY" (DODANE)
   ========================================================================== */

.request-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.request-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: var(--border-color-strong) !important;
}

.request-card .permit-card-body p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.request-card .permit-card-body i {
    margin-right: 6px;
    color: var(--accent-primary);
}

/* Styl dla powodu odrzucenia */
.request-card .rejection-reason {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #ff8a8a;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

/* Nagłówek sekcji w dashboardzie */
.dashboard-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
/* --- STYLE DLA ZLECEŃ ZAPLANOWANYCH (SCHEDULED) --- */

/* Styl samej karty zlecenia */
.permit-item.permit-scheduled {
    border-left: 4px solid #2196F3; /* Niebieski pasek z lewej */
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.05) 0%, rgba(30, 30, 30, 0.6) 100%);
}

/* Styl plakietki (badge) na górze karty */
.scheduled-badge {
    position: absolute;
    top: -15px;
    left: 20px; /* Pozycjonujemy po lewej, ale nie na samym brzegu */
    background: #2196F3; /* Niebieski */
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.2);
}

.scheduled-badge i {
    font-size: 1.1rem;
}

/* Ukrycie kontenera daty w kreatorze domyślnie */
#scheduled_date_container {
    transition: all 0.3s ease;
}
/* ==========================================================================
   STYLE DLA PRZEŁĄCZNIKÓW WIDOKU I POWIADOMIEŃ
   ========================================================================== */

/* --- Kontener przełączników (Twoje obszary / Wszystkie) --- */
.view-toggle-buttons {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 4px;
    gap: 4px;
}

/* --- Przycisk przełącznika (Base) --- */
.toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: var(--font-family);
    line-height: 1;
}

.toggle-btn i {
    font-size: 1.1rem;
}

/* --- Stan po najechaniu (Hover) --- */
.toggle-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- Stan Aktywny (Active) --- */
.toggle-btn.active {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
}

/* --- Stan Zablokowany (Disabled) --- */
.toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* ==========================================================================
   WSKAŹNIK POWIADOMIENIA (DZWONEK / HONKING)
   ========================================================================== */

.honking-indicator {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 15px var(--accent-primary);
    z-index: 25;
    border: 2px solid rgba(255, 255, 255, 0.8);
    will-change: transform;
    /* Animacja dzwonienia */
    animation: bell-ring 1.5s cubic-bezier(.36,.07,.19,.97) both infinite;
}

/* Stan wyciszony — fioletowy pill z timerem (poziomy) */
.honking-indicator.muted {
    background: rgba(22, 10, 38, 0.96);
    color: var(--accent-inprogress);
    border-color: var(--accent-inprogress);
    box-shadow: 0 0 12px rgba(190, 102, 255, 0.45);
    animation: none;
    width: auto;
    min-width: unset;
    height: auto;
    padding: 5px 10px;
    border-radius: 20px;
    flex-direction: row;
    align-items: center;
    font-size: 0.95rem;
    gap: 5px;
    top: -14px;
}
.honking-indicator.muted i {
    font-size: 1rem;
    line-height: 1;
}
.honking-countdown {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-inprogress);
    white-space: nowrap;
}

/* Ukryj wskaźnik, gdy karta zlecenia jest rozwinięta */
.permit-item.expanded .honking-indicator {
    display: none !important;
    animation: none;
}

/* --- Animacja trzęsącego się dzwonka --- */
@keyframes bell-ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(30deg); }
    20% { transform: rotate(-28deg); }
    30% { transform: rotate(34deg); }
    40% { transform: rotate(-32deg); }
    50% { transform: rotate(30deg); }
    60% { transform: rotate(-28deg); }
    70% { transform: rotate(34deg); }
    80% { transform: rotate(-32deg); }
    90% { transform: rotate(30deg); }
    100% { transform: rotate(0); }
}
/* === MODERN 2026 — PRZYCISKI AKCJI W ROZWINIĘCIU ZLECENIA === */
.details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 28px 24px;
    margin-top: 0;
    border-top: 1px solid var(--border-color);
    align-items: center;
}
.details-actions .btn {
    transform: none !important;
    box-shadow: none !important;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
.details-actions .btn i { font-size: 1rem; }
/* Primary — gold */
.details-actions .btn-primary {
    background: rgba(212,160,23,0.1);
    border-color: rgba(212,160,23,0.45);
    color: #f0c040;
    box-shadow: none !important;
}
.details-actions .btn-primary:hover {
    background: rgba(212,160,23,0.2);
    border-color: rgba(212,160,23,0.78);
    box-shadow: 0 0 14px rgba(212,160,23,0.2) !important;
}
/* Success — green */
.details-actions .btn-success {
    background: rgba(46,213,115,0.08);
    border-color: rgba(46,213,115,0.38);
    color: #2ed573;
}
.details-actions .btn-success:hover {
    background: rgba(46,213,115,0.18);
    border-color: rgba(46,213,115,0.7);
    box-shadow: 0 0 12px rgba(46,213,115,0.16) !important;
}
/* Danger — red */
.details-actions .btn-danger {
    background: rgba(255,71,87,0.08);
    border-color: rgba(255,71,87,0.38);
    color: #ff6b81;
}
.details-actions .btn-danger:hover {
    background: rgba(255,71,87,0.18);
    border-color: rgba(255,71,87,0.7);
    box-shadow: 0 0 12px rgba(255,71,87,0.16) !important;
}
/* Warning — amber */
.details-actions .btn-warning {
    background: rgba(255,165,2,0.08);
    border-color: rgba(255,165,2,0.38);
    color: #ffb703;
}
.details-actions .btn-warning:hover {
    background: rgba(255,165,2,0.18);
    border-color: rgba(255,165,2,0.7);
    box-shadow: 0 0 12px rgba(255,165,2,0.16) !important;
}
/* Secondary */
.details-actions .btn-secondary {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-secondary);
}
.details-actions .btn-secondary:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.3);
    color: var(--text-primary);
}
/* ICE */
.details-actions .btn-ice {
    background: rgba(255,71,87,0.08);
    border-color: rgba(255,71,87,0.38);
    color: #ff6b81;
}
.details-actions .btn-ice:hover {
    background: rgba(255,71,87,0.18);
    border-color: rgba(255,71,87,0.7);
    box-shadow: 0 0 12px rgba(255,71,87,0.16) !important;
}
/* Mute */
.details-actions .btn-mute {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-tertiary);
    align-self: center;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.details-actions .btn-mute.active {
    background: rgba(255,165,2,0.08);
    border-color: rgba(255,165,2,0.38);
    color: #ffb703;
}
.details-actions .btn-mute:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.25);
}
.personnel-card .avatar { font-size: 3rem; }
.personnel-card .avatar.authorizer { color: var(--accent-warning); }
.personnel-card .avatar.issuer { color: var(--accent-success); }

/* --- NOWY STYL DLA ADMINISTRATORA (BORDOWY) --- */
.personnel-card .avatar.administrator { 
    color: #800020; /* Bordowy / Burgundy */
    text-shadow: 0 0 10px rgba(128, 0, 32, 0.4); /* Lekka poświata dla lepszej widoczności na ciemnym tle */
}

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

/* === KREATOR ZEZWOLEŃ — STYLE SPECYFICZNE === */

/* Mapa-kreator: overlay ładowania */
.map-wizard-container.map-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0a0a0f;
    z-index: 10;
}
.map-wizard-container .map-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: none;
}
.map-wizard-container.map-loading .map-loading-spinner {
    display: flex;
}
.map-wizard-container .map-loading-spinner .spinner-svg {
    width: 80px;
    height: 80px;
}

/* Przycisk języka w nagłówku kreatora — stałe rozmiary (nadpisuje clamp z nav) */
.wizard-body .language-dropdown .dropdown-toggle {
    height: 40px;
    gap: 8px;
    padding: 0 12px;
}
.wizard-body .language-dropdown .dropdown-toggle img.flag-icon {
    width: 20px;
    height: auto;
}
.wizard-body .language-dropdown .dropdown-toggle i {
    font-size: 1rem;
}

/* === SKALOWANIE 85% — KREATOR (bez scale) === */
.wizard-body {
    --nav-height: 63px;
    --btn-height: 32px;
    --radius: 10px;
    --body-font-size: 12px;
}

.wizard-page-title                       { font-size: 1.02rem; }
.wizard-body .logo-img                   { height: 17px; }
.wizard-body .logo-text                  { font-size: 0.68rem; }

.wizard-container                        { padding: 1.7rem 2.55rem; max-width: 1085px; }
.wizard-progress                         { margin-bottom: 2.55rem; }
.wizard-body .progress-step              { width: 102px; }
.wizard-body .progress-step .step-icon  { width: 34px; height: 34px; font-size: 0.85rem; margin-bottom: 0.42rem; }
.wizard-body .progress-step .step-label { font-size: 0.72rem; }
.wizard-body .progress-line              { margin-top: 16px; }

.wizard-form                             { padding: 2.125rem; }
.step-title                              { font-size: 1.53rem; }
.step-subtitle                           { font-size: 0.85rem; margin: 0 0 2.125rem 0; }
.wizard-body .form-grid                  { gap: 1.275rem 1.7rem; }
.wizard-body .form-label                 { font-size: 0.85rem; }

.wizard-body .form-control,
.wizard-body textarea                    { padding: 0.64rem 0.85rem; font-size: 0.85rem; }
.wizard-body .form-select                { padding: 0.64rem 2.125rem 0.64rem 0.85rem; font-size: 0.85rem; }
.wizard-body .custom-select-button       { padding: 0.64rem 0.85rem; font-size: 0.85rem; }

.map-wizard-container                    { min-height: 340px; }

.wizard-body .summary-grid              { gap: 2.125rem; }
.wizard-body .summary-content           { gap: 12px; padding: 12px; }
.wizard-body .summary-item              { padding: 12px; }
.wizard-body .summary-label             { font-size: 0.68rem; }
.wizard-body .summary-value             { font-size: 0.85rem; }

.wizard-nav                              { margin-top: 2.125rem; padding-top: 1.275rem; }

.wizard-body .signature-pad-container   { height: 255px; }

.wizard-body .btn                        { font-size: 12px; }
.wizard-body .btn-sm                     { font-size: 0.72rem; padding: 5px 10px; }

/* --- Walidacja pól — czerwona ramka --- */
.wizard-body .input-invalid {
    border-color: var(--accent-danger, #ff4757) !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.18) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wizard-body .custom-select-button.input-invalid {
    border-color: var(--accent-danger, #ff4757) !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.18) !important;
}

/* --- Chipy wybranych pracowników (Krok 3) --- */
.selected-holders-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 10px;
    min-height: 38px;
    align-items: center;
}
.holder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--accent-primary-rgb, 212, 160, 23), 0.12);
    border: 1px solid rgba(var(--accent-primary-rgb, 212, 160, 23), 0.35);
    color: var(--text-primary);
    border-radius: 20px;
    padding: 3px 8px 3px 4px;
    font-size: 0.78rem;
    font-weight: 500;
    animation: chip-in 0.15s ease;
}
@keyframes chip-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.holder-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary, #d4a017);
    color: var(--text-on-accent, #000);
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.holder-chip-remove {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0 0 2px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.holder-chip-remove:hover { color: var(--accent-danger, #ff4757); }

/* --- Przycisk Wyczyść podpis — margines od góry --- */
.wizard-body .signature-section #clear-signature-btn {
    margin-top: 10px;
    display: block;
}