/* ================= BAZOWE STYLE APLIKACJI ================= */
body { font-family: var(--app-font, sans-serif); background: #f4f7f6; margin: 0; padding: 20px; color: #333; box-sizing: border-box; overflow-x: hidden; }
/* Czcionka aplikacji wymuszona także na formularzach (nie dziedziczą jej domyślnie) */
button, input, select, textarea, .view-switch button, .nav-btn { font-family: var(--app-font, sans-serif); }
.wrap { max-width: none; margin: 0; width: 100%; box-sizing: border-box; padding: 0 0px; }
.view-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; }
.view-switch button { flex-grow: 1; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; color: #2c3e50; transition: 0.2s; padding: 15px; outline: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.view-switch button:hover { background: #e9ecef; }
.view-switch:not(.layout-grid) button .nav-txt,
.view-switch:not(.layout-compact) button .nav-txt { margin-left: 4px; }

/* ZMIANA: Wygląd przycisku Konkurs na stałe */
.btn-gold { background: #f1c40f !important; color: #2c3e50 !important; border-color: #f1c40f !important; }
.btn-gold:hover { background: #d4ac0d !important; border-color: #d4ac0d !important; }

.nav-btn { cursor: grab !important; }
.nav-btn:active { cursor: grabbing !important; }
/* Aktywny przełącznik trybu procesu (Szybki/Pełny) — tryb jasny */
#crmModeQuickBtn.active,
#crmModeFullBtn.active {
    background: #3498db !important;
    border-color: #3498db !important;
    color: #fff !important;
}

.card { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.toolbar { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar button { padding: 8px 15px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; background: #fff; color: #333; font-weight: bold;}
.toolbar button.reset-btn { background: #e74c3c; color: white; border-color: #c0392b;}
.toolbar button.add-btn { background: #27ae60; color: white; border-color: #219653; }
.search { border: 1px solid #ccc; border-radius: 5px; width: 100%; max-width: 280px; padding: 10px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th { background: #f4f4f4; padding: 12px; text-align: left; border-bottom: 2px solid #ddd; cursor: pointer; }
td { padding: 10px; border-bottom: 1px solid #eee; }

/* Wrapper na tabele — poziomy scroll zamiast wylewania się poza ekran */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.todo-item { display: flex; align-items: center; padding: 12px; background: #fff; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); gap: 10px; cursor: grab; }

/* ================= STYLE AKCJI W TABELI ================= */
.action-btn { padding: 5px 10px; margin-right: 5px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.action-edit { background: #f39c12; color: white; }
.action-delete { background: #e74c3c; color: white; }

/* ================= STYLE OKNA MODALNEGO ================= */
.modal-overlay { display: none; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; overflow: hidden; }
.modal-content { background: #fff; padding: 20px; border-radius: 8px; width: calc(100% - 30px); max-width: 500px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }

@keyframes crudModalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes crudModalFadeInDown { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#crudModal.modal-overlay { animation: crudModalOverlayFadeIn 0.2s ease-out; }
#crudModal .modal-content { animation: crudModalFadeInDown 0.25s ease-out; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.modal-header h3 { margin: 0; color: #2c3e50; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #888; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: bold; color: #555; }
.form-group input:not([type="checkbox"]) { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.form-group textarea { width: 100%; max-width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; }
.form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eee; padding-top: 15px; margin-top: 10px; }
.modal-footer button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-save { background: #3498db; color: white; }
.btn-cancel { background: #ecf0f1; color: #333; }

/* Zmodernizowany ekran logowania */
#loginOverlay { 
    background-color: #2c3e50 !important; /* Przywracamy bezpieczny granatowy kolor */
    background-image: none !important; /* Usuwamy problematyczne tło ze zdjęcia */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; 
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.login-box {
    background: rgba(255, 255, 255, 0.9); /* Lekka przezroczystość */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 40px; 
    border-radius: 16px; /* Bardziej miękkie, nowoczesne kąty */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
    text-align: center; 
    width: 320px;
    transition: transform 0.4s ease;
}

/* Nowoczesne pola tekstowe */
.login-box input {
    width: 100%; 
    padding: 12px 15px; 
    margin-bottom: 15px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    font-size: 15px;
    background: #fdfdfd;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box; /* Zapobiega wystawaniu inputów poza box */
}

.login-box input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
    background: #fff;
}

/* Przycisk z gradientem i efektem uniesienia */
.login-box button {
    width: 100%; 
    padding: 14px; 
    background: linear-gradient(135deg, #3498db, #2980b9); 
    color: #fff; 
    border: none; 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-box button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* ================= KLASY DO ANIMACJI JS ================= */
.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* Przepalenie przy znikaniu */
    filter: brightness(2) !important; 
    
    /* PŁYNNY ZOOM OUT: Aplikacja delikatnie się oddala przy wyjściu */
    transform: scale(1.04) !important; 
    
    /* Czas wydłużony do 0.7s, przejście 'ease-in-out' dla miękkiego startu i końca */
    transition: opacity 0.7s ease-in-out, filter 0.7s ease-in-out, transform 0.7s ease-in-out, visibility 0.7s !important;
}

#mainApp {
    opacity: 0;
    
    /* Przepalenie na starcie */
    filter: brightness(2); 
    
    /* PŁYNNY ZOOM IN (Start): Zaczyna niżej i pomniejszona (92% rozmiaru) */
    transform: translateY(15px) scale(0.96); 
    
    /* Czas wydłużony do 0.7s, przejście 'ease-out' dla łagodnego lądowania (wyhamowania) */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
}

#mainApp.visible {
    opacity: 1 !important;
    
    /* Powrót do naturalnych barw (none zamiast brightness(1), by nie tworzyć
       kontekstu dla position:fixed — inaczej lightbox zaciemnia tylko aplikację) */
    filter: none !important; 
    
    /* PŁYNNY ZOOM IN (Koniec): none zamiast translateY(0) scale(1) — efekt wizualny
       identyczny, ale element nie staje się kontenerem odniesienia dla fixed */
    transform: none !important; 
}

/* Opcjonalne: wygładzenie przejścia kolorów dla samego tła body */
body {
    transition: background-color 0.2s ease;
}
/* ================= EFEKTY LOGOWANIA (BŁĄD I ŁADOWANIE) ================= */

/* 1. Animacja trzęsienia się (błędne hasło) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}

/* 2. Kółeczko ładowania na przycisku */
.btn-loading {
    position: relative;
    color: transparent !important; /* Ukrywa napis "Zaloguj" */
    pointer-events: none; /* Blokuje podwójne kliknięcie */
}

.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin-top: -10px; margin-left: -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ================= CZAT ================= */
.chat-container { display: flex; height: clamp(400px, 60vh, 546px); background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }

/* Uchwyt zmiany wysokości okna czatu */
.chat-resizer { height: 12px; cursor: ns-resize; display: flex; align-items: center; justify-content: center;
    user-select: none; margin-top: 2px; border-radius: 0 0 8px 8px; transition: background 0.15s; }
.chat-resizer::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: #cbd5e1; transition: background 0.15s; }
.chat-resizer:hover::before, .chat-resizer.dragging::before { background: #3498db; }
body.dark-theme .chat-resizer::before { background: #4a4a4a; }
body.dark-theme .chat-resizer:hover::before, body.dark-theme .chat-resizer.dragging::before { background: #60a5fa; }
body.chat-resizing { cursor: ns-resize !important; user-select: none !important; }
/* Zmodyfikowany pasek boczny (Kontakty) */
.chat-sidebar { 
    width: 280px; 
    flex-shrink: 0; 
    background: #f9f9f9; 
    border-right: 1px solid #ddd; 
    display: flex; 
    flex-direction: column;
    min-height: 0;
}
.chat-sidebar h3 { padding: 8px 12px; margin: 0; background: #2c3e50; color: #fff; font-size: 14px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
.chat-sidebar h3 button { background: #3498db; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; transition: 0.2s; }
.chat-sidebar h3 button:hover { background: #2980b9; }
.chat-user-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
.chat-user-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.chat-user-item:hover { background: #f0f8ff; }
.chat-user-item.active { background: #e8f4f8; border-left: 4px solid #3498db; font-weight: bold; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-online { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.status-offline { background: #bdc3c7; }
.unread-badge { background: #e74c3c; color: white; border-radius: 10px; padding: 2px 6px; font-size: 10px; font-weight: bold; margin-left: 5px; }
.chat-main { 
    flex-grow: 1; 
    
    /* NOWE: Wymusza na kontenerze flex obliczanie szerokości od 0, co zapobiega rozpychaniu go przez długie ciągi znaków */
    min-width: 0; 
    
    display: flex; 
    flex-direction: column; 
    background: #fff; 
}
.chat-header { padding: 15px; background: #ecf0f1; border-bottom: 1px solid #ddd; font-weight: bold; color: #2c3e50; }
/* Zmodyfikowany kontener wiadomości czatu */
.chat-messages { 
    flex-grow: 1; 
    padding: 20px; 
    overflow-y: auto; 
    
    /* NOWE: Blokuje poziome rozpychanie kontenera przez Flexbox */
    overflow-x: hidden; 
    min-width: 0; 
    
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    background: #fdfdfd; 
}

/* Zmodyfikowany dymek wiadomości */
.chat-bubble { 
    padding: 10px 15px; 
    border-radius: 15px; 
    max-width: 100%; 
    line-height: 1.4; 
    font-size: 14px; 
    position: relative; 
    word-wrap: break-word; 
    word-break: break-word; 
    overflow-wrap: break-word; 
    white-space: pre-wrap; 
    overflow: hidden;
}
.chat-mine { background: #3498db; color: white; border-bottom-right-radius: 2px; }
.chat-theirs { background: #ecf0f1; color: #333; border-bottom-left-radius: 2px; }
.chat-meta { font-size: 10px; margin-bottom: 4px; display: block; font-weight: bold; }
.chat-mine .chat-meta { color: #bce0fd; text-align: right; }
.chat-theirs .chat-meta { color: #7f8c8d; }
.chat-input-area { padding: 15px; border-top: 1px solid #ddd; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.chat-input-area input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; outline: none; }
.chat-input-area > div:last-child { display: flex; gap: 10px; }
.chat-input-area button { padding: 10px 15px; background: #27ae60; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.2s; }

/* ================= STYLE SZKICOWNIKA ================= */
#drawingSpace { position: relative; flex-direction: column; overflow: hidden; background: #fff; padding: 0; height: auto; max-width: 100%; box-sizing: border-box; }
#sketch-toolbar { background: #2c3e50; padding: 8px 15px; display: flex; align-items: center; gap: 10px; color: #eee; border-bottom: 1px solid #1a252f; border-top-left-radius: 10px; border-top-right-radius: 10px; flex-wrap: wrap; }
#sketch-toolbar button { height: 28px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; line-height: 1; transition: all 0.2s ease; }
#sketch-toolbar button.sketch-mode-btn { background: #fff; color: #2c3e50; border: 1px solid #ddd; }
#sketch-toolbar button.sketch-mode-btn.active { background: #2980b9; color: #fff; border-color: #2980b9; }
#sketch-canvas { display: block; background: white; cursor: crosshair; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1000 / 560; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#sketch-text-container { position: absolute; display: none; z-index: 100; }
#sketch-text-container input { background: rgba(255, 255, 255, 0.85); color: #111; border: 1px dashed #2980b9; border-radius: 4px; font-size: 14px; padding: 4px 8px; outline: none; min-width: 150px; }
#sketch-text-container .buttons { display: none; }
.sketch-info { font-size: 12px; }
#sketch-status { margin-left: auto; font-size: 11px; opacity: 0.9; }

/* ================= STYLE KONKURSU ================= */
.contest-card { position: relative; border: 2px solid #f1c40f; border-radius: 12px; padding: 25px; margin-bottom: 20px; background: #fff; box-shadow: 0 4px 15px rgba(241,196,15,0.1); transition: 0.3s; }
.contest-card.time-up { border-color: #3498db !important; box-shadow: 0 4px 15px rgba(52,152,219,0.1) !important; }
.contest-card.results-published { border-color: #e74c3c !important; box-shadow: 0 4px 15px rgba(231,76,60,0.15) !important; }
.contest-card.archived-gray { border-color: #bdc3c7 !important; filter: grayscale(1) !important; opacity: 0.7 !important; }
.contest-timer { position: absolute; top: 15px; right: 15px; background: #2c3e50; color: #fff; padding: 8px 15px; border-radius: 20px; font-weight: bold; font-family: monospace; font-size: 14px; }
.contest-reward-box { margin-bottom: 15px; padding: 15px; background: #fff9db; border-radius: 8px; border-left: 5px solid #f1c40f; }
.contest-progi { font-weight: bold; color: #d35400; margin-bottom: 5px; display: block; }

/* ================= STYLE ZAKŁADKI KONTO ================= */
.account-card { background: #fff; padding: 30px; border-radius: 8px; border: 1px solid #ddd; margin-top: 20px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

/* ══════════════ NOWE KONTO v3 ══════════════ */
.acc-shell { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; margin-top: 10px; }
body.dark-theme .acc-shell { background: #1e1e1e; border-color: #333; }

.acc-hero { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #e2e8f0; }
body.dark-theme .acc-hero { border-bottom-color: #333; }
.acc-avatar { width: 52px; height: 52px; border-radius: 50%; background: #FBEAF0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #72243E; flex-shrink: 0; }
body.dark-theme .acc-avatar { background: #2d1a2e; color: #ED93B1; }
.acc-hero-name { font-size: 18px; font-weight: 700; color: #1e293b; }
body.dark-theme .acc-hero-name { color: #f1f5f9; }
.acc-hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.acc-role-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: #E6F1FB; color: #0C447C; }
body.dark-theme .acc-role-badge { background: #0c2340; color: #60a5fa; }
.acc-version { font-size: 11px; color: #94a3b8; }
.acc-hero-stats { display: flex; gap: 10px; margin-left: auto; }
.acc-stat-box { background: #f8fafc; border-radius: 8px; padding: 10px 16px; min-width: 80px; text-align: center; }
body.dark-theme .acc-stat-box { background: #252525; }
.acc-stat-num { font-size: 22px; font-weight: 700; color: #1e293b; line-height: 1.1; }
body.dark-theme .acc-stat-num { color: #f1f5f9; }
.acc-stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }

.acc-section { border-bottom: 1px solid #e2e8f0; }
body.dark-theme .acc-section { border-bottom-color: #333; }
.acc-section:last-child { border-bottom: none; }
.acc-section-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; user-select: none; transition: background 0.15s; }
.acc-section-bar:hover { background: #f8fafc; }
body.dark-theme .acc-section-bar:hover { background: #252525; }
.acc-section-drag { font-size: 16px; color: #cbd5e1; cursor: grab; margin-right: 2px; }
.acc-section-drag:hover { color: #3498db; }
.todo-drag { font-size: 16px; color: #cbd5e1; cursor: grab; user-select: none; }
.todo-drag:hover { color: #3498db; }
.acc-section-accent { width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.acc-section-icon { font-size: 16px; flex-shrink: 0; }
.acc-section-title { flex: 1; font-size: 14px; font-weight: 600; color: #334155; }
body.dark-theme .acc-section-title { color: #e2e8f0; }
.acc-chevron { font-size: 14px; color: #94a3b8; transition: transform 0.2s; }
.acc-section.collapsed .acc-chevron { transform: rotate(-90deg); }
.acc-section.collapsed .acc-section-body { display: none; }
.acc-section-body { padding: 4px 24px 20px 52px; display: flex; flex-direction: column; gap: 10px; }
.acc-section-desc { font-size: 12px; color: #94a3b8; margin: 0; }
body.dark-theme .acc-section-desc { color: #64748b; }

.acc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-row-wrap { flex-wrap: wrap; }
.acc-input { flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background: #f8fafc; color: #1e293b; }
body.dark-theme .acc-input { background: #252525; border-color: #444; color: #e0e0e0; }
.acc-select { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background: #f8fafc; color: #1e293b; }
body.dark-theme .acc-select { background: #252525; border-color: #444; color: #e0e0e0; }

.acc-btn { padding: 8px 14px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; }
.acc-btn:hover { opacity: 0.88; }
.acc-btn:active { transform: scale(0.97); }
.acc-btn-danger { background: #fee2e2; color: #991b1b; }
.acc-btn-success { background: #dcfce7; color: #166534; }
.acc-btn-info { background: #dbeafe; color: #1e40af; }
.acc-btn-warning { background: #fef3c7; color: #92400e; }
body.dark-theme .acc-btn-danger { background: #3f1010; color: #fca5a5; }
body.dark-theme .acc-btn-success { background: #052e16; color: #86efac; }
body.dark-theme .acc-btn-info { background: #0c1a3a; color: #93c5fd; }
body.dark-theme .acc-btn-warning { background: #2d1a00; color: #fcd34d; }

.acc-boss-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #dcfce7; color: #166534; margin-left: 6px; vertical-align: middle; }
body.dark-theme .acc-boss-badge { background: #052e16; color: #86efac; }
.acc-section-boss { border-left: 3px solid #27ae60; }
body.dark-theme .acc-section-boss { border-left-color: #166534; }

.acc-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip-toggle { border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.acc-chip-toggle.acc-chip-on { border-color: #85B7EB; background: #E6F1FB; color: #0C447C; }
body.dark-theme .acc-chip-toggle { border-color: #444; background: #252525; color: #94a3b8; }
body.dark-theme .acc-chip-toggle.acc-chip-on { border-color: #1e4a7a; background: #0c2340; color: #60a5fa; }
.company-net-dropdown { background: #fff; border: 1px solid #e2e8f0; }
body.dark-theme .company-net-dropdown { background: #2d2d2d; border-color: #444; }

.company-detail-field { height: 36px; box-sizing: border-box; font-size: 13px; }
input.company-detail-field, select.company-detail-field { padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
body.dark-theme input.company-detail-field, body.dark-theme select.company-detail-field { background: #2d2d2d; border-color: #555; color: #e2e8f0; }
button.company-detail-field { display: inline-flex; align-items: center; }
.acc-status-text { font-size: 13px; font-weight: 600; color: #334155; }
body.dark-theme .acc-status-text { color: #e2e8f0; }

.acc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 768px) {
    .acc-shell { border-radius: 8px; }
    .acc-hero { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
    .acc-hero-info { flex: 1; min-width: 0; }
    .acc-hero-stats { margin-left: 0; width: 100%; justify-content: flex-start; }
    .acc-stat-box { flex: 1; min-width: 80px; padding: 8px 10px; }
    .acc-stat-num { font-size: 18px; }
    .acc-section-bar { padding: 12px 14px; gap: 7px; }
    .acc-section-body { padding: 4px 14px 16px 14px; }
    .acc-row { flex-direction: column; align-items: stretch; }
    .acc-row .acc-btn { width: 100%; justify-content: center; }
    .acc-row .acc-input { width: 100%; }
    .acc-row .acc-select { width: 100%; }
    .acc-row label.acc-btn { text-align: center; }
    .acc-two-col { grid-template-columns: 1fr; gap: 16px; }
    .acc-chips-wrap { gap: 5px; }
    .acc-section-title { font-size: 13px; }
    .acc-hero-name { font-size: 15px; }
    .acc-avatar { width: 42px; height: 42px; font-size: 16px; }
}

@media (max-width: 480px) {
    .acc-hero { padding: 12px; }
    .acc-section-bar { padding: 10px 12px; }
    .acc-section-body { padding: 4px 12px 14px 12px; }
    .acc-section-drag { display: none; }
    .todo-drag { display: none; }
    .acc-stat-num { font-size: 16px; }
    .acc-stat-box { padding: 6px 8px; }
    .acc-btn { font-size: 12px; padding: 7px 10px; }
    .acc-input { font-size: 12px; }
    .acc-users-list { max-height: 200px; }
    .acc-chips-wrap { gap: 4px; }
    .acc-chips-wrap label { font-size: 11px !important; padding: 4px 8px !important; }
}
.acc-sub-title { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 10px; }
body.dark-theme .acc-sub-title { color: #e2e8f0; }
.acc-form-group { margin-bottom: 10px; }
.acc-label { display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.acc-msg { font-size: 12px; font-weight: 700; text-align: center; margin-top: 8px; color: #27ae60; }
.acc-users-list { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; max-height: 280px; overflow-y: auto; padding: 8px; }
body.dark-theme .acc-users-list { background: #252525; border-color: #444; }

/* Drag & drop */
.acc-section.acc-dnd-dragging { opacity: 0.4; }
.acc-section.acc-dnd-over { box-shadow: inset 0 2px 0 #3498db; }
.user-list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
.role-badge { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.role-boss { background: #e74c3c; color: white; }
.role-menager { background: #e67e22; color: white; }
.role-magazyn { background: #16a085; color: white; }

/* Przełącznik statystyk Menagera/Admina: Zespół / Moje statystyki.
   Wygląd jak filtr w Realizacjach (.roofer-filter-btn), w obecnym rozmiarze i z ikonką. */
.mgr-stats-btn {
    padding: 8px 18px;
    cursor: pointer;
    border: 1px solid #d8dee5;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}
.mgr-stats-btn:hover { background: #3498db; color: #fff; border-color: #3498db; }
.mgr-stats-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
body.dark-theme .mgr-stats-btn { background: #2d2d2d; color: #ccc; border-color: #444; }
body.dark-theme .mgr-stats-btn:hover { background: #2980b9; color: #fff; border-color: #2980b9; }
body.dark-theme .mgr-stats-btn.active { background: #2980b9; color: #fff; border-color: #2980b9; }
.role-kolega, .role-handlowiec { background: #3498db; color: white; }

/* Przełącznik statystyk Menagera/Admina: Zespół / Moje statystyki.
   Wygląd jak filtr w Realizacjach (.roofer-filter-btn), ale w obecnym rozmiarze
   przełącznika (większy padding) i z ikonką w treści przycisku. */
.mgr-stats-btn {
    padding: 8px 18px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}
.mgr-stats-btn:hover { background: #e9ecef; }
.mgr-stats-btn.active { background: #3498db; color: #fff; }

body.dark-theme .mgr-stats-btn { background: #2d2d2d; color: #ccc; }
body.dark-theme .mgr-stats-btn:hover { background: #3a3a3a; }
body.dark-theme .mgr-stats-btn.active { background: #2980b9; color: #fff; }
.sharing-table th { padding: 10px; background: #ecf0f1; border-bottom: 2px solid #bdc3c7; text-align: center; font-size: 13px; color: #2c3e50;}
.sharing-table td { padding: 10px; border-bottom: 1px solid #ecf0f1; text-align: center; }
.sharing-table td:first-child { text-align: left; }
.sharing-table input[type="checkbox"] { transform: scale(1.3); cursor: pointer; }

.acc-profile-field {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    color: #2c3e50;
    background: #fff;
}
body.dark-theme .acc-profile-field {
    background: #2d2d2d;
    border-color: #555;
    color: #e2e8f0;
}

/* Animacje dla Emoji w panelu czatu */
.emoji-item:hover {
    transform: scale(1.5) rotate(15deg); /* Emotikon się powiększa i podskakuje z przechyleniem */
    background: #f1f2f6;
    border-radius: 8px;
    z-index: 10;
}
body.dark-theme .emoji-item:hover {
    background: #3a3a3a;
}

.chat-reaction-chip, .chat-reaction-count {
    color: #2c3e50;
}

/* ================= CRM / KANBAN ================= */
.crm-container { display: flex; gap: 15px; align-items: stretch; margin-top: 20px; overflow-x: auto; overflow-y: hidden; padding-bottom: 20px; height: 640px; min-height: 300px; cursor: grab; }
.crm-sidebar { width: 300px; flex-shrink: 0; background: #fff; border-radius: 8px; border: 1px solid #ddd; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-height: 0; }
.crm-kanban { display: flex; gap: 15px; flex-grow: 1; min-width: 800px; }
.kanban-column { background: #f4f7f6; border-radius: 8px; width: 250px; flex-shrink: 0; display: flex; flex-direction: column; border: 1px solid #e0e0e0; }
.kanban-header { padding: 12px 15px; font-weight: bold; border-bottom: 2px solid #ddd; display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; cursor: grab; user-select: none; }
.kanban-cards { padding: 12px; flex-grow: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.kanban-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 4px solid #3498db; }
.kanban-card:active { cursor: grabbing; opacity: 0.8; }
.kanban-card:hover { border-color: #bdc3c7; }
.kanban-card-title { font-weight: bold; color: #2c3e50; font-size: 14px; margin-bottom: 5px; }
.kanban-card-contact { font-size: 11px; color: #7f8c8d; margin-bottom: 8px; display: block; line-height: 2; }
.kanban-card-value { font-size: 13px; color: #27ae60; font-weight: bold; margin-bottom: 5px; }
.kanban-card-date { font-size: 11px; color: #e74c3c; font-weight: bold; background: #fdeaea; display: inline-block; padding: 2px 6px; border-radius: 4px; }
.crm-reminder-item { padding: 10px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: background 0.2s; }
.crm-reminder-item:hover { background: #f9f9f9; }
.crm-reminder-item:last-child { border-bottom: none; }

/* ==========================================================================
   RESPONSYWNOŚĆ (TABLETY I SMARTFONY)
   ========================================================================== */

/* TABLETY (ekrany mniejsze niż 1024px) */
@media (max-width: 1024px) {
    /* Przebudowa siatek na jedną kolumnę (Panel Bossa, Profil) */
    .account-grid { 
        grid-template-columns: 1fr; 
    }

    /* Siatki statystyk - 2 kolumny zamiast 4 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Wykresy admina - 1 kolumna na tablecie */
    .stats-charts-dnd-container {
        grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    }
    /* Tabela porównawcza - scroll poziomy na tablecie */
    #bossStatsContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    
    /* Kalkulator obróbek - parametry łamią się jeden pod drugim */
    #flashingsCalculator > div > div[style*="grid-template-columns"] { 
        grid-template-columns: 1fr !important; 
    }
    /* Kalkulator - miejsca na podpisy na dole */
    #pdfSignatures { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
    }

    /* Tabele - przewijalne poziomo na tabletach */
    .card table,
    .card .sharing-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* SMARTFONY (ekrany mniejsze niż 768px) */
@media (max-width: 768px) {
    /* Zmniejszenie bocznych marginesów na telefonach */
    body { padding: 10px; }
    
    /* Górny pasek (Logo, Zalogowany użytkownik, Wyloguj) - układ pionowy */
    #mainApp > div:first-child { 
        flex-direction: column; 
        gap: 10px; 
        text-align: center; 
        padding: 10px 0 !important;
    }
    #mainApp > div:first-child > div { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 8px; 
    }
    #mainApp > div:first-child button { 
        margin-left: 0 !important; 
    }
    
    /* Menu nawigacyjne - przyciski 2 w rzędzie, padding nadpisany przez !important */
    .view-switch { gap: 6px; }
    .view-switch button,
    .view-switch button[style] { 
        padding: 10px 4px !important; 
        font-size: 12px !important; 
        flex-basis: calc(33% - 6px);
        flex-grow: 1;
        line-height: 1.3;
    }
    
    /* Pasek narzędzi (Dodaj wpis, Wyszukiwarka, Excel) - układ pionowy */
    .toolbar { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 10px; 
        height: auto; 
        padding: 10px; 
    }
    .toolbar button, .toolbar input { 
        width: 100%; 
        box-sizing: border-box;
        margin: 0; 
    }
    #toolbarDivider { 
        display: none !important; 
    }
    
    /* Pasek wyszukiwarki - 100% szerokości */
    #searchContainer input { 
        width: 100% !important; 
        box-sizing: border-box; 
    }
    
    /* Wszystkie tabele - przewijalne poziomo zamiast wylewania się */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Wiersze tabeli z treścią mogą zawijać tekst */
    td { white-space: normal; min-width: 80px; }
    /* Kolumna akcji - nie łamie przycisków */
    td:last-child { white-space: nowrap; }

    /* Czat - lista kontaktów nad oknem czatu, a nie z lewej strony */
    #chatWrapper {
        height: auto !important;
        min-height: 500px;
    }
    #chatWrapper > .chat-container { 
        flex-direction: column;
        height: auto;
    }
    .chat-sidebar { 
        width: 100% !important; 
        flex: 0 0 auto;
        max-height: 200px;
        border-right: none; 
        border-bottom: 3px solid #2c3e50; 
        overflow-y: auto; 
    }
    .chat-main { 
        flex: 1;
        min-height: 350px;
        height: auto; 
    }
    
    /* Modale (Okienka wyskakujące) - dopasowanie do ekranu komórki */
    .modal-content { 
        max-width: 95vw !important; 
        width: 95vw !important;
        margin: 10px auto; 
        padding: 15px; 
        box-sizing: border-box;
    }
    .modal-footer { 
        flex-direction: column; 
        gap: 10px; 
    }
    .modal-footer button { 
        width: 100%; 
        margin: 0; 
    }
    
    /* Szkicownik - responsywne płótno */
    #sketch-canvas { 
        width: 100% !important; 
        height: auto !important; 
    }
    #sketch-toolbar { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 5px; 
        padding: 10px; 
    }
    .sketch-mode-btn { 
        flex-grow: 1; 
        text-align: center; 
    }
    
    /* Baza Dokumentów - Kafelki na całą szerokość ekranu telefonu */
    #documentsGrid { 
        grid-template-columns: 1fr !important; 
    }

    /* Statystyki - 1 kolumna na telefonie */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stats-charts-row {
        flex-direction: column;
    }
    .stats-charts-dnd-container {
        grid-template-columns: 1fr;
    }
    .stats-chart-box {
        min-width: unset;
        width: 100%;
        padding: 14px;
    }
    .stats-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .stats-chart-switcher {
        flex-wrap: wrap;
    }
    /* Tabela porównawcza admina - scroll poziomy */
    #bossStatsContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #bossStatsContent table { min-width: 560px; }
    /* Przyciski pracowników - zawijanie */
    #bossWorkerToggles { flex-wrap: wrap; gap: 6px; }
    /* Pasek okresu - select pełna szerokość */
    #statsPeriodBar { flex-wrap: wrap; }
    #statsPeriodBar select { width: 100%; box-sizing: border-box; }
    /* KPI karty - mniejszy padding na mobile */
    .stats-card { padding: 14px; gap: 12px; }
    .stats-card-icon { font-size: 26px; }
    .stats-card-value { font-size: 18px; }

    /* CRM - mniejsza minimalna wysokość */
    .crm-container {
        min-height: 400px;
    }

    /* Karta - mniejszy padding */
    .card {
        padding: 12px;
    }
}

/* BARDZO MAŁE TELEFONY (ekrany mniejsze niż 480px) */
@media (max-width: 480px) {
    body { padding: 6px; }

    .view-switch button,
    .view-switch button[style] {
        font-size: 11px !important;
        padding: 8px 2px !important;
        flex-basis: calc(33% - 6px);
    }

    /* Na bardzo małym ekranie modale zajmują prawie cały ekran */
    .modal-content {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh;
        border-radius: 8px 8px 0 0 !important;
    }

    /* Login box dopasowany do wąskiego ekranu */
    .login-box {
        width: calc(100vw - 30px);
        padding: 20px;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   TŁO EKRANU LOGOWANIA (ZDJĘCIE)
   ========================================================================== */
#loginOverlay {
    /* Nakłada lekko przyciemniający filtr i ładuje zdjęcie */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('tlo-logowanie.jpg') !important; 
    
    /* Sprawia, że zdjęcie idealnie pokrywa ekran */
    background-size: cover !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important; 
}
/* ================= TRYB CIEMNY (DARK MODE) ================= */
body.dark-theme { 
    background-color: #121212 !important; 
    color: #e0e0e0 !important; 
}

/* 1. Główne kontenery i karty (bez kanban-card!) */
body.dark-theme .card, 
body.dark-theme .modal-content, 
body.dark-theme .login-box,
body.dark-theme #chatWrapper,
body.dark-theme .chat-main,
body.dark-theme .chat-sidebar,
body.dark-theme .chat-messages,
body.dark-theme .kanban-column,
body.dark-theme .crm-sidebar,
body.dark-theme table,
body.dark-theme th,
body.dark-theme td,
body.dark-theme .view-switch button,
body.dark-theme .todo-item,
body.dark-theme #drawingSpace,
body.dark-theme .contest-card,
body.dark-theme fieldset,
body.dark-theme #summarySection {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
    box-shadow: none !important;
}

/* 1.1 Precyzyjna łatka dla Kart CRM (Kanban) - Zachowanie lewej ramki */
body.dark-theme .kanban-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-top-color: #333 !important;
    border-right-color: #333 !important;
    border-bottom-color: #333 !important;
    /* Zostawiamy w spokoju border-left-color, by działały kolory statusów! */
    box-shadow: none !important;
}

/* Automatyczne nadpisywanie sztywnych stylów (Białe tła -> Ciemne) */
body.dark-theme [style*="background: #fff"],
body.dark-theme [style*="background:#fff"],
body.dark-theme [style*="background: #f9f9f9"],
body.dark-theme [style*="background: #f4f4f4"],
body.dark-theme [style*="background: #ecf0f1"],
body.dark-theme [style*="background: #fafafa"],
body.dark-theme [style*="background: #fdfdfd"] {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

/* Automatyczne nadpisywanie sztywnych tekstów (Ciemne litery -> Jasne) */
body.dark-theme [style*="color: #2c3e50"],
body.dark-theme [style*="color:#2c3e50"],
body.dark-theme [style*="color: #333"],
body.dark-theme [style*="color:#333"],
body.dark-theme [style*="color: #555"],
body.dark-theme [style*="color: #666"],
body.dark-theme [style*="color: #888"] {
    color: #f1f1f1 !important;
}

/* Pola tekstowe i formularze */
body.dark-theme input:not([type="color"]):not([type="checkbox"]):not([type="radio"]), 
body.dark-theme textarea, 
body.dark-theme select {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Drobne poprawki */
body.dark-theme .kanban-column { background-color: #121212 !important; border-color: #333 !important; }
body.dark-theme .chat-theirs { background-color: #2d2d2d !important; color: #e0e0e0 !important; }
body.dark-theme .chat-header { background-color: #1a1a1a !important; border-color: #333 !important; }
body.dark-theme .chat-user-item:hover { background-color: #2d2d2d !important; }

/* Animacja ikonki przycisku */
#themeToggleBtn:hover { transform: scale(1.2) rotate(15deg); }
/* Magiczna inwersja oryginalnego logo w trybie ciemnym na białe */
body.dark-theme #mainLogo {
    filter: brightness(0) invert(1) !important;
}
/* Gdy wgrano osobne logo dla trybu ciemnego — nie odwracaj kolorów */
body.dark-theme #mainLogo.logo-custom-dark {
    filter: none !important;
}
/* ================= ŁATKA: ZAKŁADKA ZADANIA ================= */

/* 1. Górny panel (szare tło z polami dodawania) oraz pasek rozwijania archiwum */
body.dark-theme #todoListView > div:first-child,
body.dark-theme div[onclick="toggleArchive()"] {
    background-color: #252525 !important;
    border-color: #444 !important;
}

/* 2. Główne tło pojedynczych zadań (Aktywne i Archiwum) */
body.dark-theme #todoList li,
body.dark-theme #archiveList li {
    background-color: #1e1e1e !important;
    border-top-color: #444 !important;
    border-right-color: #444 !important;
    border-bottom-color: #444 !important;
    /* Usunęliśmy ogólne border-color, żeby lewa ramka odzyskała swój kolor priorytetu! */
    box-shadow: none !important;
}

/* 3. Wymuszenie jasnych tekstów na tytułach i opisach zadań */
body.dark-theme #todoList li div,
body.dark-theme #archiveList li div,
body.dark-theme div[onclick="toggleArchive()"] h3 {
    color: #e0e0e0 !important;
}

/* 4. Naprawa przycisków ze strzałkami (góra/dół), które miały wpisane białe tło */
body.dark-theme #todoList li button[style*="background: white"],
body.dark-theme #todoList li button[style*="background:white"] {
    background-color: #333 !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}
/* ================= ŁATKA: AKTYWNA ZAKŁADKA (NIEBIESKA) ================= */
body.dark-theme .view-switch button[style*="background: rgb(52, 152, 219)"],
body.dark-theme .view-switch button[style*="background: #3498db"],
body.dark-theme .view-switch button[style*="background:#3498db"] {
    background-color: #2980b9 !important; /* Elegancki, głębszy niebieski dla trybu ciemnego */
    color: #ffffff !important;
    border-color: #2980b9 !important;
}
/* ================= ŁATKA: POWIADOMIENIA NA PRZYCISKACH ================= */

/* 1. Aktywny konkurs (Żółty) */
body.dark-theme .view-switch button[style*="background: rgb(241, 196, 15)"],
body.dark-theme .view-switch button[style*="background: #f1c40f"],
body.dark-theme .view-switch button[style*="background:#f1c40f"] {
    background-color: #d4ac0d !important; /* Nieco zgaszony złoty, by nie raził w nocy */
    color: #121212 !important; /* Ciemny tekst dla czytelności na żółtym tle */
    border-color: #d4ac0d !important;
}

/* 2. Nieodebrana wiadomość na czacie (Czerwony) */
body.dark-theme .view-switch button[style*="background: rgb(231, 76, 60)"],
body.dark-theme .view-switch button[style*="background: #e74c3c"],
body.dark-theme .view-switch button[style*="background:#e74c3c"] {
    background-color: #c0392b !important; /* Głęboka, elegancka czerwień dla trybu ciemnego */
    color: #ffffff !important;
    border-color: #c0392b !important;
}
/* ================= ŁATKA: ARCHIWUM KONKURSÓW ================= */

/* 1. Pasek rozwijania archiwum konkursów */
body.dark-theme div[onclick="toggleContestArchive()"] {
    background-color: #252525 !important;
    border-color: #444 !important;
}

body.dark-theme div[onclick="toggleContestArchive()"] h3 {
    color: #e0e0e0 !important;
}

/* 2. Pojedyncze wpisy w archiwum (generowane przez JS) */
body.dark-theme #contestsArchiveList > div {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

/* 3. Wymuszenie jasnych tekstów wewnątrz zarchiwizowanego konkursu */
body.dark-theme #contestsArchiveList > div strong,
body.dark-theme #contestsArchiveList > div span,
body.dark-theme #contestsArchiveList > div div {
    color: #e0e0e0 !important;
}
/* ================= ŁATKA: PANEL BOSSA (TWORZENIE KONKURSU) ================= */
body.dark-theme #bossContestPanel {
    background-color: #1e1e1e !important;
    border-color: #d4ac0d !important; /* Przyciemniona złota ramka, żeby nie raziła */
    color: #e0e0e0 !important;
}

/* Kreska oddzielająca podgląd konkursu */
body.dark-theme #contestPreviewContainer {
    border-top-color: #444 !important;
}
/* ================= ŁATKA: TŁO "PROGI I NAGRODY" W KONKURSIE ================= */
body.dark-theme .contest-reward-box {
    background-color: #252525 !important; /* Ciemne tło, żeby nie raziło */
    border-left-color: #d4ac0d !important; /* Zachowana, delikatnie zgaszona żółta ramka */
}

/* Wymuszenie jasnego tekstu wewnątrz tego bloku */
body.dark-theme .contest-reward-box div {
    color: #e0e0e0 !important;
}
/* ================= ŁATKA: WYNIKI KONKURSU ================= */

/* Ciemne tło i czerwona ramka dla bloku z wynikami */
body.dark-theme div[style*="background: #fff0f0"] {
    background-color: #252525 !important;
    border: 1px solid #e74c3c !important; /* Czerwona ramka */
}

/* Wymuszenie jasnych liter w wynikach (miejsca 1, 2, 3) */
body.dark-theme div[style*="background: #fff0f0"] div {
    color: #e0e0e0 !important;
}

/* Rozjaśnienie samego nagłówka "WYNIKI KONKURSU", żeby był czytelny na ciemnym tle */
body.dark-theme div[style*="background: #fff0f0"] h3 {
    color: #e74c3c !important; 
}

/* ================= ŁATKA: TYTUŁY I DATY W CRM (STRUKTURALNA) ================= */

/* 1. Tytuł: Wybielamy pierwszą linijkę karty, linki i mocne pogrubienia */
body.dark-theme .kanban-card > div:first-child,
body.dark-theme .kanban-card a,
body.dark-theme .kanban-card > strong,
body.dark-theme .kanban-card > b {
    color: #ffffff !important;
}

/* 2. Data: Ciemne tło dla wszystkich drobnych elementów i etykiet */
body.dark-theme .kanban-card small,
body.dark-theme .kanban-card span {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    padding: 2px 4px; /* Opcjonalnie, żeby data ładniej wyglądała w ramce */
    border-radius: 3px;
}
/* Etykieta "szybki proces" — bez tła i ramki, jak zwykły tekst (tryb ciemny) */
body.dark-theme .kanban-card span.crm-quick-tag {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #999 !important;
}
/* ================= ŁATKA: POJEDYNCZE KARTY ARCHIWUM CRM (OSTATECZNA) ================= */

/* 1. Przyciemnienie tła i usunięcie jasnego obramowania/cienia na elemencie <li> */
body.dark-theme #crmArchiveList li {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
    box-shadow: none !important;
}

/* 2. Wymuszenie jasnego tekstu głównego (nazwa, autor) */
body.dark-theme #crmArchiveList li div,
body.dark-theme #crmArchiveList li strong {
    color: #ffffff !important;
}

/* 3. Rozjaśnienie szarego, drobnego tekstu, żeby był czytelny na ciemnym tle */
body.dark-theme #crmArchiveList li span[style*="color: #888"],
body.dark-theme #crmArchiveList li span[style*="color:#888"] {
    color: #bbbbbb !important;
}

/* ================= ŁATKA: DATA PLANOWANIA W CRM (ZIELONA) ================= */
body.dark-theme .kanban-card-date {
    background-color: #1e2a23 !important; /* Bardzo ciemna zieleń, prawie czarna */
    color: #2ecc71 !important;           /* Jasny, czytelny zielony */
    border: 1px solid #27ae60 !important; /* Delikatna zielona ramka dla kontrastu */
    box-shadow: none !important;
}
/* ================= ŁATKA: SEKCJA "DODAJ KONTAKT" (JASNONIEBIESKIE TŁO) ================= */

/* 1. Zmiana jasnoniebieskiego tła na ciemne i przyciemnienie ramki */
body.dark-theme div.form-group[style*="background: #f0f8ff"],
body.dark-theme div.form-group[style*="background:#f0f8ff"],
body.dark-theme div.form-group[style*="rgb(240, 248, 255)"] {
    background-color: #1e1e1e !important; 
    border-color: #2980b9 !important; /* Ciemniejszy, stonowany niebieski dla ramki */
    color: #e0e0e0 !important;
}

/* 2. Wybielenie tytułów (h3, h4) oraz etykiet (label) wewnątrz tej konkretnej ramki */
body.dark-theme div.form-group[style*="background"] h3,
body.dark-theme div.form-group[style*="background"] h4,
body.dark-theme div.form-group[style*="background"] label,
body.dark-theme div.form-group[style*="background"] strong {
    color: #ffffff !important;
}
/* ================= ŁATKA: POLE WPROWADZANIA CZATU, EMOTIKONY I ZAŁĄCZNIKI ================= */

/* 1. Podgląd wybranego załącznika (ciemne tło zamiast jasnoniebieskiego) */
body.dark-theme #chatAttachmentPreview {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

body.dark-theme #chatAttachmentPreview strong {
    color: #ffffff !important; /* Nazwa pliku na biało */
}

/* 2. Okienko z wyborem emotikon (ciemne tło zamiast białego) */
body.dark-theme #emojiPicker {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5) !important; /* Ciemniejszy cień */
}

/* 3. Główne pole tekstowe do wpisywania wiadomości */
body.dark-theme #chatInputField {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #555 !important;
}

body.dark-theme #chatInputField::placeholder {
    color: #888 !important; /* Zgaszony kolor dla tekstu "Napisz wiadomość..." */
}

/* 4. Tło całego dolnego paska (jeśli było jasne) */
body.dark-theme #chatInputArea {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
}
/* ================= ŁATKA: LISTA CZATÓW I TYTUŁY (AKTYWNY CZAT) ================= */

/* 1. Elementy listy czatów (lewy pasek) - stan normalny */
body.dark-theme .chat-user-item {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #333 !important;
}

/* 2. Podświetlenie AKTYWNEGO czatu (klasa .active) */
body.dark-theme .chat-user-item.active {
    background-color: #2d2d2d !important; /* Nieco jaśniejszy szary dla wyróżnienia */
    border-left: 4px solid #3498db !important; /* Zostawiamy pasek boczny dla orientacji */
}

/* 3. Efekt najechania myszką na użytkownika na liście */
body.dark-theme .chat-user-item:hover {
    background-color: #252525 !important;
}

/* 4. Tekst wewnątrz elementów listy (span) */
body.dark-theme .chat-user-item span {
    color: #ffffff !important;
}

/* 5. Zamiana NIEBIESKICH tytułów (Czat grupowy, Czat Admin itp.) na BIAŁE */
/* Celujemy w nagłówki i elementy, które mają wstrzyknięty kolor niebieski */
body.dark-theme .chat-sidebar h3,
body.dark-theme .chat-header h3,
body.dark-theme .chat-header h2,
body.dark-theme .chat-main h2,
body.dark-theme [style*="color: #3498db"],
body.dark-theme [style*="color: blue"],
body.dark-theme [style*="color:rgb(52, 152, 219)"] {
    color: #ffffff !important;
}

/* 6. Naprawa ikonek/emotek na liście, aby nie były zbyt ciemne */
body.dark-theme .chat-user-item span {
    filter: brightness(1.2);
}
/* ================= ŁATKA: TYTUŁ NAGŁÓWKA CZATU ================= */

/* Wymuszenie białego koloru dla konkretnego tytułu czatu na górze */
body.dark-theme #chatHeaderTitle {
    color: #ffffff !important;
    font-weight: bold; /* Opcjonalnie: pogrubienie, żeby lepiej wyglądało */
}

/* Na wypadek, gdyby w środku były inne elementy (np. spany z nazwami) */
body.dark-theme #chatHeaderTitle * {
    color: #ffffff !important;
}
/* ================= ŁATKA: PRZYCISK ZAŁĄCZNIKA (SPINACZ) ================= */

/* 1. Wersja JASNA (nadpisanie szarego koloru) */
button[onclick*="chatFileInput"] {
    background-color: #e8f0fe !important; /* Bardzo jasny niebieski */
    color: #1967d2 !important;           /* Wyrazisty niebieski tekst/ikonka */
    border: 1px solid #d2e3fc !important;
    transition: background-color 0.2s;
}

button[onclick*="chatFileInput"]:hover {
    background-color: #d2e3fc !important;
}

/* 2. Wersja CIEMNA */
body.dark-theme button[onclick*="chatFileInput"] {
    background-color: #2d3238 !important; /* Ciemny stalowy */
    color: #8ab4f8 !important;           /* Jasny, "świecący" błękit */
    border: 1px solid #3c4043 !important;
}

body.dark-theme button[onclick*="chatFileInput"]:hover {
    background-color: #3c4043 !important;
}
/* ================= ŁATKA: ZAKŁADKA KONTAKT I TYTUŁY MODALI ================= */

/* 1. Zmiana koloru linków na szary (telefony, maile w kontaktach) */
body.dark-theme a, 
body.dark-theme #contactList a, 
body.dark-theme .contact-item a {
    color: #aaaaaa !important; /* Elegancki szary */
    text-decoration: none;    /* Usuwamy podkreślenie, żeby wyglądało nowocześniej */
}

/* Efekt po najechaniu myszką na link - niech się lekko rozjaśnia */
body.dark-theme a:hover, 
body.dark-theme #contactList a:hover {
    color: #ffffff !important;
}

/* 2. Stylizacja tytułu w oknie modalnym (Dodaj nowy wpis) */
body.dark-theme #crudModalTitle {
    color: #ffffff !important;
    font-weight: bold;
    /* Dodatkowo upewniamy się, że całe tło nagłówka modalu jest ciemne, jeśli nie było */
}

/* 3. Jeśli modal ma jasne tło nagłówka, wymuszamy ciemne */
body.dark-theme .modal-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

/* 4. Przycisk zamknięcia modalu (ikona X) */
body.dark-theme .modal-header .close,
body.dark-theme .modal-header .btn-close {
    color: #ffffff !important;
    filter: invert(1); /* Jeśli to ikona obrazkowa */
}
/* ================= ŁATKA: LINKI Z SZARYM PODKREŚLENIEM ================= */

/* 1. Wygląd linków w trybie ciemnym */
body.dark-theme a, 
body.dark-theme #contactList a, 
body.dark-theme .contact-item a {
    color: #aaaaaa !important;
    text-decoration: none !important; /* Usuwamy standardowe, cienkie podkreślenie */
    border-bottom: 1px solid #555555 !important; /* Dodajemy własną szarą kreskę */
    padding-bottom: 1px; /* Delikatny odstęp między tekstem a kreską */
    transition: all 0.2s ease;
}

/* 2. Efekt najechania (Hover) - kreska i tekst stają się jaśniejsze */
body.dark-theme a:hover, 
body.dark-theme #contactList a:hover {
    color: #ffffff !important;
    border-bottom-color: #aaaaaa !important;
    background-color: rgba(255, 255, 255, 0.05); /* Subtelne podświetlenie tła pod linkiem */
}
/* ================= ŁATKA: PRZYCISKI FILTRÓW (NADPYSYWANIE STYLÓW INLINE) ================= */

/* 1. Globalna zmiana jasnych przycisków na ciemne w trybie ciemnym */
/* Szukamy przycisków, które mają w stylu "background: rgb(255, 255, 255)" lub "#fff" */
body.dark-theme button[style*="background: rgb(255, 255, 255)"],
body.dark-theme button[style*="background:rgb(255, 255, 255)"],
body.dark-theme button[style*="background: white"],
body.dark-theme button[style*="background:#fff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

/* 2. WYJĄTEK: Jeśli przycisk jest aktywny/wybrany (ma kolor niebieski w stylu) */
/* Musimy to zdefiniować oddzielnie, żeby "wygrało" z regułą powyżej */
body.dark-theme button[style*="background: rgb(52, 152, 219)"],
body.dark-theme button[style*="background:#3498db"],
body.dark-theme button[style*="background: #3498db"],
body.dark-theme button.active {
    background-color: #3498db !important;
    color: #ffffff !important;
    border-color: #2980b9 !important;
}



/* 4. Jeśli po kliknięciu system dodaje klasę active (zabezpieczenie) */
body.dark-theme .active {
    background-color: #3498db !important;
    color: #ffffff !important;
}
/* ================= ŁATKA: KALKULATOR OBRÓBEK W TRYBIE CIEMNYM (UI) ================= */

/* Główna karta kalkulatora */
body.dark-theme #flashingsCalculator {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

/* Nagłówek PDF (ten z logo) */
body.dark-theme #pdfHeader {
    border-bottom-color: #444 !important;
}

body.dark-theme #pdfHeader h2 {
    color: #ffffff !important;
}

/* Pola danych i parametry (fieldset) */
body.dark-theme #flashingsCalculator fieldset {
    background-color: #252525 !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

body.dark-theme #flashingsCalculator legend {
    color: #3498db !important; /* Ładny niebieski dla tytułów sekcji */
}

/* Szkicownik i podsumowanie */
body.dark-theme #drawingSpace,
body.dark-theme #summarySection {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

/* Naprawa kolorów w podsumowaniu */
body.dark-theme #summarySection h3 {
    border-bottom-color: #444 !important;
    color: #ffffff !important;
}

body.dark-theme #rowDoZaplaty {
    border-top-color: #444 !important;
}

/* Inputy wewnątrz kalkulatora */
body.dark-theme #flashingsCalculator input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}
/* ================= ŁATKA: SZKICOWNIK W TRYBIE CIEMNYM ================= */

/* 1. Tło całego paska narzędzi szkicownika */
body.dark-theme #sketch-toolbar {
    background: #252525 !important;
    border-bottom: 1px solid #444 !important;
    color: #e0e0e0 !important;
    padding: 10px !important;
    gap: 8px !important;
    align-items: center !important;
}

/* 2. Tekst statusu (Prawy = Cofnij...) */
body.dark-theme #sketch-status {
    color: #888 !important;
    font-size: 11px !important;
}

/* 3. Przyciski trybów (Rysuj, Tekst, Kąt, Przesuń) */
body.dark-theme .sketch-mode-btn {
    background: #333 !important;
    color: #bbb !important;
    border: 1px solid #555 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* 4. Aktywny przycisk trybu */
body.dark-theme .sketch-mode-btn.active {
    background: #3498db !important;
    color: white !important;
    border-color: #2980b9 !important;
}

/* 5. Przyciski funkcyjne (Wyczyść/Cofnij) - lekkie przyciemnienie, by nie "biły" po oczach */
body.dark-theme #sketch-clear-btn { background: #c0392b !important; }
body.dark-theme #sketch-undo-btn { background: #d35400 !important; }
body.dark-theme #sketch-canvas {
    background-color: #1a1a1a !important; /* Bardzo ciemne tło pod białe linie */
    border-color: #444 !important;
}
/* ================= ŁATKA: BIAŁE LOGO W TRYBIE CIEMNYM ================= */

/* Zamiana standardowego logo na białe (jasne) tylko gdy aktywna jest klasa dark-theme */
body.dark-theme #pdfHeader img:not(.logo-custom-dark) {
    filter: brightness(0) invert(1) !important;
}
body.dark-theme #pdfHeader img.logo-custom-dark {
    filter: none !important;
}

/* Opcjonalnie: upewnijmy się, że logo ma odpowiednią wielkość */
body.dark-theme #pdfHeader img {
    height: 70px !important;
    width: auto !important;
    max-width: 60mm !important;
    object-fit: contain !important;
}
/* ================= ŁATKA: PRZYCISK POBIERANIA (LINK JAKO PRZYCISK) ================= */

/* Celujemy w linki, które prowadzą do Google Drive i mają wyglądać jak przyciski */
body.dark-theme a[href*="drive.google.com"] {
    color: #ffffff !important;         /* Wymuszamy biały kolor czcionki */
    border-bottom: none !important;    /* Usuwamy szarą kreskę spod linku */
    background-color: #3498db !important; /* Upewniamy się, że tło zostaje niebieskie */
    opacity: 1 !important;
}

/* Efekt po najechaniu dla tego konkretnego przycisku */
body.dark-theme a[href*="drive.google.com"]:hover {
    background-color: #2980b9 !important; /* Nieco ciemniejszy niebieski */
    color: #ffffff !important;
    text-decoration: none !important;
}
/* ================= ŁATKA: KOLORY DAT W CRM (KANBAN) ================= */

/* 1. PO TERMINIE (Czerwony) */
/* Szukamy jasnoczerwonego tła #fdeaea i zamieniamy na ciemny burgund */
body.dark-theme .kanban-card-date[style*="background: #fdeaea"],
body.dark-theme .kanban-card-date[style*="background: rgb(253, 234, 234)"] {
    background-color: #442727 !important; 
    color: #ff6b6b !important;
    border: 1px solid #632a2a !important;
}

/* 2. NA DZISIAJ (Pomarańczowy) */
/* Szukamy jasnoczerwonego tła #fdeaea i zamieniamy na ciemny burgund */
body.dark-theme .kanban-card-date[style*="background: #fdeaea"],
body.dark-theme .kanban-card-date[style*="background: rgb(253, 234, 234)"] {
    background-color: #442727 !important; 
    color: #ff6b6b !important;
    border: 1px solid #632a2a !important;
}

/* 3. NADCHODZĄCE (Zielony) */
/* Zakładam, że używasz jasnej zieleni w JS */
body.dark-theme .kanban-card-date[style*="background: #eafaf1"],
body.dark-theme .kanban-card-date[style*="background: rgb(234, 250, 241)"] {
    background-color: #27442d !important;
    color: #50fa7b !important;
    border: 1px solid #2a6335 !important;
}

/* Ogólne poprawki dla dat w kanbanie (tryb ciemny) */
body.dark-theme .kanban-card-date {
    font-weight: bold !important;
    text-shadow: none !important;
}
/* ================= ŁATKA: KONTO I ZARZĄDZANIE KONTEM ================= */

/* 1. Główne tło sekcji i kart wewnątrz zarzadzania kontem */
body.dark-theme #accountSection,
body.dark-theme .account-management,
body.dark-theme #profileSettings,
body.dark-theme .user-profile-card {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* 2. Stylowanie formularzy (inputy, selecty) w ustawieniach konta */
body.dark-theme #accountSection input,
body.dark-theme #accountSection select,
body.dark-theme #accountSection textarea {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    padding: 8px !important;
}

/* 3. Etykiety (labels) i nagłówki */
body.dark-theme #accountSection label,
body.dark-theme #accountSection h2,
body.dark-theme #accountSection h3 {
    color: #ffffff !important;
}

/* 4. Specyficzne tło dla "Moje dane" lub "Zmiana hasła" */
body.dark-theme .settings-block,
body.dark-theme .account-info-box {
    background-color: #252525 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
}
/* ================= ŁATKA: KARTA PROFILU I BEZPIECZEŃSTWA ================= */

/* 1. Tło głównej karty konta */
body.dark-theme .account-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* 2. Naprawa białego bloku "Bezpieczeństwo konta" */
body.dark-theme .account-card div[style*="background: #fff"],
body.dark-theme .account-card div[style*="background:#fff"],
body.dark-theme .account-card div[style*="background: rgb(255, 255, 255)"] {
    background-color: #252525 !important; /* Ciemniejsze tło sekcji */
    border-color: #c0392b !important;    /* Nieco ciemniejszy czerwony dla ramki */
}

/* 3. Poprawa czytelności tekstów */
body.dark-theme .account-card h2 {
    color: #ffffff !important;
}

body.dark-theme .account-card p[style*="color: #666"],
body.dark-theme .account-card p[style*="color:#666"] {
    color: #bbb !important; /* Rozjaśniony szary opis */
}

/* 4. Stylowanie pola hasła (input) */
body.dark-theme .account-card input[type="password"] {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    padding: 8px !important;
    border-radius: 4px !important;
}
/* ================= ŁATKA: PANEL ADMINA - TRYB PRACY (WYMUSZENIE) ================= */

/* 1. Kontener główny (szukamy po specyficznym kolorze tła #e8f4f8) */
body.dark-theme div[style*="background: #e8f4f8"],
body.dark-theme div[style*="background:#e8f4f8"] {
    background-color: #16242d !important; /* Bardzo ciemny błękit/granat */
    border-color: #243b4a !important;    /* Dopasowana ramka */
}

/* 2. Nagłówek H3 w tym kontenerze */
body.dark-theme div[style*="background: #e8f4f8"] h3 {
    color: #5dade2 !important; /* Jaśniejszy, czytelny niebieski */
}

/* 3. Opis (paragraf) - zmiana z ciemnoszarego #555 na jasny */
body.dark-theme div[style*="background: #e8f4f8"] p[style*="color: #555"],
body.dark-theme div[style*="background:#e8f4f8"] p[style*="color:#555"] {
    color: #bdc3c7 !important;
}

/* 4. Lista rozwijana (Select) - workingAsSelect */
body.dark-theme #workingAsSelect {
    background-color: #1c2833 !important;
    color: #ffffff !important;
    border-color: #34495e !important;
}

/* 5. Opcje wewnątrz Selecta (dla niektórych przeglądarek) */
body.dark-theme #workingAsSelect option {
    background-color: #1c2833 !important;
    color: #ffffff !important;
}

/* ================= NAPRAWA HOVERA W PRZYPOMNIENIACH (DARK MODE) ================= */

/* 1. Tło wiersza po najechaniu (białe) */
body.dark-theme .crm-reminder-item:hover {
    background-color: #ffffff !important;
}

/* 2. Tekst (tytuł i data) zmienia się na czarny po najechaniu */
/* !important jest tu kluczowe, aby przebić "style=..." z HTML */
body.dark-theme .crm-reminder-item:hover div {
    color: #000000 !important;
}

/* 3. Opcjonalnie: Zabezpieczenie zielonego tagu [PLAN] */
/* Gwarantuje, że etykieta się nie zepsuje i zostanie zielona na białym tle */
body.dark-theme .crm-reminder-item:hover div span {
    color: #27ae60 !important;
}

/* ==========================================
   EFEKT NAJECHANIA W CRM (TRYB CIEMNY - BIAŁY)
   ========================================== */

/* 1. Białe tło dla przypomnień na liście bocznej (Tryb Ciemny) */
body.dark-theme .crm-reminder-item:hover {
    background-color: #ffffff !important; 
    transition: background-color 0.2s ease;
}

/* Wymuszenie czarnego tekstu na białym tle (dla czytelności) */
body.dark-theme .crm-reminder-item:hover div,
body.dark-theme .crm-reminder-item:hover span {
    color: #000000 !important;
}

/* Ochrona kolorowych etykiet [PLAN], [DZISIAJ], [ZALEGŁE], by nie zrobiły się czarne */
body.dark-theme .crm-reminder-item:hover div span[style*="color:#27ae60"] { color: #27ae60 !important; }
body.dark-theme .crm-reminder-item:hover div span[style*="color:#f39c12"] { color: #f39c12 !important; }
body.dark-theme .crm-reminder-item:hover div span[style*="color:#e74c3c"] { color: #e74c3c !important; }


/* 2. Białe tło dla kart procesów (Kanban) w Trybie Ciemnym */
body.dark-theme .kanban-card:hover {
    background-color: #ffffff !important; 
    border-color: #ee00ff !important; /* Rozjaśniamy też ramkę */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important; /* Delikatny, biały cień "Glow" */
    transition: all 0.2s ease;
}

/* Odwrócenie kolorów tekstów na czarny na białej karcie */
body.dark-theme .kanban-card:hover div,
body.dark-theme .kanban-card:hover strong,
body.dark-theme .kanban-card:hover a {
    color: #000000 !important;
}

/* Usunięcie ciemnego tła z małych etykiet z datą podczas podświetlenia */
body.dark-theme .kanban-card:hover .kanban-card-date,
body.dark-theme .kanban-card:hover span[style*="background"] {
    background-color: transparent !important;
    border-color: #000000 !important;
}

/* ==========================================
   NAPRAWA PRZYCISKU ZMIANY MOTYWU (SŁOŃCE/KSIĘŻYC)
   ========================================== */
   
/* Zabezpieczenie przed domyślnym obrysem */
#themeToggleBtn {
    outline: none !important;
}

/* Stan po najechaniu kursorem (hover), kliknięciu (active) i zaznaczeniu (focus) */
#themeToggleBtn:hover, 
#themeToggleBtn:focus, 
#themeToggleBtn:active {
    outline: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================
   EFEKT NAJECHANIA W CRM (TRYB JASNY - BŁĘKITNY)
   ========================================== */

/* 1. Błękitne tło dla przypomnień na liście bocznej */
body:not(.dark-theme) .crm-reminder-item:hover {
    background-color: #e8f4f8 !important; /* Przyjemny błękit */
    transition: background-color 0.2s ease; /* Płynne przejście koloru */
}

/* 2. Błękitne tło dla kart procesów (Kanban) */
body:not(.dark-theme) .kanban-card:hover {
    background-color: #e8f4f8 !important; /* Przyjemny błękit */
    border-color: #5362b2 !important; /* Dodatkowo zmieniamy ramkę na niebieską, by pasowała */
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.15) !important; /* Delikatny, niebieskawy cień */
    transition: all 0.2s ease; /* Płynne przejście */
}
/* ==========================================
   POPRAWKI DLA PRZEGLĄDARKI SAFARI (TRYB CIEMNY)
   ========================================== */

/* 1. Naprawa czarnej ikonki kalendarza w polach typu "date" i "datetime-local" */
body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-theme input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important; /* Negatyw: czarny kolor staje się biały */
    cursor: pointer;
}

/* 2. Wymuszenie białego tła dla kart procesów (Kanban) po najechaniu w Safari */
body.dark-theme .kanban-card:hover {
    background-color: #ffffff !important; 
    border-color: #ff00e1 !important; 
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important; 
    
    /* Wymuszenie sprzętowej akceleracji, by Safari zauważyło zmianę tła */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Poprawne przypisanie animacji dla silnika WebKit */
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
}

/* Odwrócenie kolorów tekstów na czarny na białej karcie (zachowane z poprzedniej wersji) */
body.dark-theme .kanban-card:hover div,
body.dark-theme .kanban-card:hover strong,
body.dark-theme .kanban-card:hover a {
    color: #000000 !important;
}

/* Usunięcie ciemnego tła z małych etykiet z datą podczas podświetlenia */
body.dark-theme .kanban-card:hover .kanban-card-date,
body.dark-theme .kanban-card:hover span[style*="background"] {
    background-color: transparent !important;
    border-color: #000000 !important;
}
/* ==========================================
   EFEKT NAJECHANIA NA AKTYWNE ZADANIA (TODO)
   ========================================== */

/* 1. Tryb Jasny - Błękitne tło po najechaniu na zadanie */
body:not(.dark-theme) #todoList li:hover {
    background-color: #e8f4f8 !important; /* Delikatny, jasny błękit */
    transition: background-color 0.2s ease; /* Płynne przejście */
}

/* 2. Tryb Ciemny - Zatrzymanie tła, kolorowa ramka priorytetu i blask */
body.dark-theme #todoList li:hover {
    background-color: #1e1e1e !important; /* Pozostawiamy eleganckie ciemne tło */
    
    /* Wszystkie boki ramki świecą w kolorze wyciągniętym ze zmiennej */
    border-top-color: var(--prio-color) !important;
    border-right-color: var(--prio-color) !important;
    border-bottom-color: var(--prio-color) !important;
    
    /* Dodatkowy efekt świetlny dookoła */
    box-shadow: 0 0 10px var(--prio-color) !important; 
    
    transition: all 0.2s ease;
}

/* ==========================================
   1. RUCH I CIEŃ DLA WSZYSTKICH PRZYCISKÓW
   ========================================== */
body:not(.dark-theme) button:hover {
    /* Tylko podskakiwanie i cień - kolor zostaje oryginalny! */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

body.dark-theme button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(247, 0, 255, 0.15) !important;
    transition: all 0.2s ease !important;
}

/* ==========================================
   2. NAKŁADKA KOLORYSTYCZNA (TYLKO ZAKŁADKI I FILTRY)
   ========================================== */
/* Tryb Jasny */
body:not(.dark-theme) .nav-btn:hover,
body:not(.dark-theme) #filters button:hover {
    background-color: #3498db !important;
    border-color: #3498db !important;
    color: #ffffff !important;
}

/* Tryb Ciemny */
body.dark-theme .nav-btn:hover,
body.dark-theme #filters button:hover {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

/* ==========================================
   OCHRONA KOLORÓW - WSPÓŁPRACA (DEKARZE) W TRYBIE CIEMNYM
   ========================================== */

/* 1. Ochrona koloru Czerwonego (Brak współpracy) */
body.dark-theme td[style*="color: #ff4d4d"],
body.dark-theme td[style*="color:#ff4d4d"] {
    color: #ff6b6b !important; /* Lekko rozjaśniony pastelowy czerwony dla lepszego czytania w nocy */
}

/* 2. Ochrona koloru Pomarańczowego (Współpraca okazjonalna) */
body.dark-theme td[style*="color: #ffa500"],
body.dark-theme td[style*="color:#ffa500"] {
    color: #f39c12 !important; /* Czytelny, głęboki pomarańczowy */
}

/* 3. Ochrona koloru Zielonego (Współpraca stała) */
body.dark-theme td[style*="color: #2ecc71"],
body.dark-theme td[style*="color:#2ecc71"] {
    color: #2ecc71 !important; /* Pozostawiamy jasny, neonowy zielony */
}
/* ==========================================
   BIAŁY NAPIS DLA AKTYWNEGO GUZIKA KONKURS (TRYB CIEMNY)
   ========================================== */

/* 1. Wymuszenie białego tekstu, gdy guzik Konkurs jest wciśnięty (posiada cień 'inset' z JS) */
body.dark-theme #btnContests[style*="inset"] {
    color: #ffffff !important; 
}

/* 2. Jeśli aktywny guzik jest żółty (ma powiadomienia), delikatnie go przyciemniamy, by biały napis był idealnie czytelny */
body.dark-theme #btnContests[style*="inset"][style*="196, 15"],
body.dark-theme #btnContests[style*="inset"][style*="#f1c40f"] {
    background-color: #b5920b !important; /* Ciemniejszy, szlachetny złoty */
    border-color: #b5920b !important;
}
/* ==========================================
   EFEKT "POWER" DLA WYBORU LEJKÓW W CRM
   ========================================== */

/* 1. MIEJSCE NA TWOJE KOLORY DLA LEJKÓW */
:root {
    /* Kolor tła lejka po najechaniu w TRYBIE JASNYM */
    --pipeline-hover-light: #2980b9; 
    
    /* Kolor tła lejka po najechaniu w TRYBIE CIEMNYM */
    --pipeline-hover-dark: #2980b9;  
}

/* 2. EFEKT DLA TRYBU JASNEGO */
body:not(.dark-theme) .crm-pipeline-item:hover {
    /* Zostawiamy uniesienie i cień */
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    
    /* BRAK reguły background-color - przycisk zachowa swój oryginalny kolor! */
}

/* 3. EFEKT DLA TRYBU CIEMNEGO */
body.dark-theme .crm-pipeline-item:hover {
    /* Zostawiamy uniesienie i cień dopasowany do trybu ciemnego */
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(255, 0, 251, 0.15) !important;
    transition: all 0.2s ease !important;
    
    /* BRAK reguły background-color - przycisk zachowa swój oryginalny kolor! */
}

/* Usunięcie obrysu przy przeciąganiu (Drag & Drop) */
.crm-pipeline-item:active {
    transform: scale(0.98) !important; /* Lekkie wciśnięcie, gdy złapiemy lejek myszką */
}


/* Wymuszenie pełnego ekranu TYLKO dla opornego okna procesu */
div#crmDealModal.modal-overlay {
    display: none; /* Domyślnie ukryty - JS ustawia display:flex przy otwieraniu */
    position: fixed !important;
    inset: 0 !important; /* Nowoczesny skrót na top:0, left:0, right:0, bottom:0 */
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important; /* Usuwa efekty, które mogły uwięzić tło */
}
/* ==========================================
   NIEBIESKI EFEKT DLA PRZYCISKU WYLOGUJ
   ========================================== */
/* Tryb Jasny - po najechaniu (:hover) i w trakcie kliknięcia (:active) */
body:not(.dark-theme) button[onclick*="logout"]:hover,
body:not(.dark-theme) button[onclick*="logout"]:active,
body:not(.dark-theme) #logoutBtn:hover,
body:not(.dark-theme) #logoutBtn:active {
    background-color: #3498db !important;
    border-color: #3498db !important;
    color: #ffffff !important;
}

/* Tryb Ciemny - po najechaniu (:hover) i w trakcie kliknięcia (:active) */
body.dark-theme button[onclick*="logout"]:hover,
body.dark-theme button[onclick*="logout"]:active,
body.dark-theme #logoutBtn:hover,
body.dark-theme #logoutBtn:active {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}
/* ==========================================
   BIAŁY KOLOR TYTUŁÓW W OKNACH CRM (TRYB CIEMNY)
   ========================================== */
/* 1. Naprawa nagłówków <h2> (np. "Dodaj proces", "Dodaj lejek") */
body.dark-theme #crmDealModal h2,
body.dark-theme #crmDealModalTitle,
body.dark-theme #crmPipelineModal h2,
body.dark-theme #crmPipelineModalTitle {
    color: #ffffff !important;
}

/* 2. Naprawa wpisywanego tekstu w polu tytułu (na wypadek, gdyby to input był niebieski) */
body.dark-theme #crmDealModal input[type="text"],
body.dark-theme #crmPipelineModal input[type="text"] {
    color: #ffffff !important;
}
/* ==========================================
   BIAŁY KOLOR W OKNIE "DODAJ LEJEK" (TRYB CIEMNY)
   ========================================== */
body.dark-theme [id*="ipelineModal"] *:not(button) {
    color: #ffffff !important;
}
/* ==========================================
   GALERIA ZDJĘĆ (LIGHTBOX)
   ========================================== */
.lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.show {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #e74c3c;
    text-decoration: none;
    cursor: pointer;
}

@keyframes zoomIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}
/* Klasa dodawana przez JS podczas przeciągania tablicy CRM */
.is-dragging {
    user-select: none !important;
}

/* ==========================================
   MODUŁ DEKARZE — WIDOK KART
   ========================================== */
.roofers-toolbar-bar { margin-bottom: 14px; }
.roofers-search { padding: 9px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; width: 260px; outline: none; background: #fff; color: #333; }
.roofers-btn-add  { padding: 9px 14px; background: #27ae60; color: #fff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.roofers-btn-excel{ padding: 9px 14px; background: #3498db; color: #fff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.roofers-btn-reset{ padding: 9px 14px; background: #e74c3c; color: #fff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.roofers-btn-more { padding: 11px 28px; border: 2px solid #3498db; background: #fff; color: #3498db; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; }
.roofers-btn-more:hover { background: #3498db; color: #fff; }

.roofers-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; }
.roofer-filter-btn { margin-right: 5px; padding: 8px 12px; cursor: pointer; border: none; border-radius: 4px; background: #fff; color: #333; font-size: 13px; font-weight: bold; transition: 0.2s; }
.roofer-filter-btn:hover { background: #e9ecef; }
.roofer-filter-btn.active { background: #3498db; color: #fff; }
.roofer-filter-sep { flex: 1; }
.roofer-layout-btn { font-size: 16px; padding: 6px 10px; }
body.dark-theme .roofer-filter-btn { background: #2d2d2d; color: #ccc; }
body.dark-theme .roofer-filter-btn:hover { background: #3a3a3a; }
body.dark-theme .roofer-filter-btn.active { background: #2980b9; color: #fff; }

.roofers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: stretch; }

.roofer-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 9px; transition: box-shadow 0.15s, border-color 0.15s; }
.roofer-card:hover { border-color: #b0c4de; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

.roofer-card-header { display: flex; align-items: center; gap: 11px; }
.roofer-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.roofer-card-title { flex: 1; min-width: 0; }
.roofer-name  { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roofer-powiat{ font-size: 12px; color: #64748b; margin: 2px 0 0; }

.roofer-ws-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ws-stala       { background: #EAF3DE; color: #2e7d32; border: 1px solid #97C459; }
.ws-okazjonalna { background: #fff3e0; color: #8b4a00; border: 1px solid #EF9F27; }
.ws-brak        { background: #fdecea; color: #b71c1c; border: 1px solid #F09595; }

.roofer-badge-spec { align-self: flex-start; padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; background: #f4f4f4; color: #333; border: none; }
body.dark-theme .roofer-badge-spec { background: #2d2d2d; color: #ccc; }

.roofer-stars { display: flex; align-items: center; gap: 2px; }
.roofer-star  { font-size: 15px; }
.roofer-star.on  { color: #f59e0b; }
.roofer-star.off { color: #e2e8f0; }
.roofer-star-label { font-size: 12px; color: #94a3b8; margin-left: 5px; }

.roofer-row { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: #475569; padding: 4px 0; }
.roofer-row a { color: #3498db; text-decoration: none; }
.roofer-icon { font-size: 14px; flex-shrink: 0; line-height: 1.4; }

.roofer-opis { font-size: 12px; color: #64748b; line-height: 1.55; margin: 0; overflow: hidden; max-height: 6.2em; }

/* Stopka — spójna z roofing-specs z OPD */
.roofer-specs { margin-top: auto; border-top: 1px dashed #e2e8f0; padding-top: 9px; display: flex; flex-direction: column; }
.roofer-specs-row { display: flex; justify-content: flex-start; align-items: center; gap: 8px; font-size: 13px; color: #64748b; border-bottom: 1px dashed #e2e8f0; padding: 5px 0; }
.roofer-autor { color: #3498db; font-weight: 600; }
.roofer-specs-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 8px; }
.roofer-btn-edit { font-size: 12px; padding: 5px 10px; background: #fff; border: 1px solid #f39c12; color: #f39c12; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.15s; }
.roofer-btn-edit:hover { background: #f39c12; color: #fff; }
.roofer-btn-del  { font-size: 12px; padding: 5px 10px; background: #fff; border: 1px solid #e74c3c; color: #e74c3c; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.15s; }
.roofer-btn-del:hover  { background: #e74c3c; color: #fff; }
/* ---- KARTY REALIZACJI - zdjęcie ---- */
.project-card-photo { position: relative; width: 100%; height: 180px; overflow: hidden; background: #f1f5f9; cursor: zoom-in; flex-shrink: 0; }
.project-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; display: block; }
.project-card-photo:hover img { transform: scale(1.05); }
/* ---- TABELA RABATÓW W KARCIE ---- */
.discount-table { display: flex; flex-direction: column; gap: 4px; }
.discount-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 4px; background: #f8fafc; font-size: 13px; }
.discount-label { color: #64748b; font-weight: 500; }
.discount-value { font-weight: 700; color: #1e293b; }
body.dark-theme .discount-row { background: #2a2a2a; }
body.dark-theme .discount-label { color: #94a3b8; }
body.dark-theme .discount-value { color: #f1f5f9; }
.supplier-wh-text { font-size: 13px; color: #475569; padding: 4px 0; line-height: 1.5; }
body.dark-theme .supplier-wh-text { color: #f1f5f9; }
body.dark-theme .supplier-wh-text strong { color: #f1f5f9; }
body.dark-theme .supplier-wh-text em { color: #f1f5f9; }
.project-card-photo:hover .project-card-photo-overlay { display: none; }
.project-card-photo--empty { display: flex; align-items: center; justify-content: center; font-size: 48px; color: #cbd5e1; cursor: default; }
body.dark-theme .project-card-photo { background: #2d2d2d; }
body.dark-theme .project-card-photo--empty { color: #444; }
/* ---- STATYSTYKI ---- */
.stats-charts-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.stats-charts-dnd-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; margin-bottom: 24px; }
.stats-chart-dnd-item { cursor: default; transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s; }
.stats-chart-dnd-item.dnd-dragging { opacity: 0.4; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: scale(0.98); }
.stats-chart-dnd-item.dnd-over { box-shadow: 0 0 0 3px #3498db, 0 4px 18px rgba(52,152,219,0.18); }
.dnd-handle { cursor: grab; font-size: 18px; color: #b0bec5; margin-right: 6px; user-select: none; display: inline-block; vertical-align: middle; transition: color 0.15s; }
.dnd-handle:hover { color: #3498db; }
.dnd-handle:active { cursor: grabbing; }
body.dark-theme .dnd-handle { color: #555; }
body.dark-theme .dnd-handle:hover { color: #3498db; }
.stats-chart-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.stats-chart-switcher { display: flex; gap: 4px; }
.stats-chart-type-btn { padding: 3px 10px; font-size: 11px; font-weight: 600; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.stats-chart-type-btn:hover { background: #3498db; color: #fff; border-color: #3498db; }
.stats-chart-type-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
body.dark-theme .stats-chart-type-btn { background: #2d2d2d; color: #94a3b8; border-color: #444; }
body.dark-theme .stats-chart-type-btn:hover { background: #2980b9; color: #fff; border-color: #2980b9; }
body.dark-theme .stats-chart-type-btn.active { background: #2980b9; color: #fff; border-color: #2980b9; }
.stats-chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.stats-chart-title { font-size: 13px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
body.dark-theme .stats-chart-box { background: #252525; border-color: #333; }
body.dark-theme .stats-chart-title { color: #94a3b8; }
.stats-period-btn { padding: 8px 18px; border: 1px solid #ddd; background: #fff; color: #2c3e50; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.15s; }
.stats-period-btn:hover { background: #3498db; color: #fff; border-color: #3498db; }
.stats-period-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.stats-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); transition: box-shadow 0.15s; }
.stats-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.stats-card-icon { font-size: 32px; flex-shrink: 0; }
.stats-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats-card-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.stats-card-label { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.stats-card-sub { font-size: 12px; color: #94a3b8; }
body.dark-theme .stats-period-btn { background: #2d2d2d; color: #ccc; border-color: #444; }
body.dark-theme .stats-period-btn.active { background: #2980b9; color: #fff; border-color: #2980b9; }
body.dark-theme .stats-card { background: #252525; border-color: #333; }
body.dark-theme .stats-card-label { color: #94a3b8; }
body.dark-theme .stats-card-sub { color: #555; }
.btn-delete-modal { padding: 8px 14px; background: #e74c3c; border: 1px solid #e74c3c; color: #fff; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.15s; }
.body.dark-theme .btn-delete-modal { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.roofer-readonly { font-size: 11px; color: #aaa; font-weight: bold; }

/* ---- DARK MODE ---- */
body.dark-theme .roofers-search { background: #2d2d2d; color: #e0e0e0; border-color: #444; }
body.dark-theme .roofer-pill { background: #2d2d2d; color: #94a3b8; border-color: #444; }
body.dark-theme .roofer-pill:hover { background: #3a3a3a; }
body.dark-theme .roofer-pill.active { background: #2980b9; border-color: #2980b9; color: #fff; }
body.dark-theme .roofer-card { background: #252525; border-color: #333; }
body.dark-theme .roofer-card:hover { border-color: #555; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
body.dark-theme .roofer-name  { color: #f1f5f9; }
body.dark-theme .roofer-powiat { color: #94a3b8; }
body.dark-theme .roofer-badge-spec { background: #2d2d2d; color: #94a3b8; border-color: #444; }
body.dark-theme .roofer-star.off { color: #444; }
body.dark-theme .roofer-row { color: #94a3b8; }
body.dark-theme .roofer-opis { color: #94a3b8; }
body.dark-theme .roofer-specs { border-top-color: #444; }
body.dark-theme .roofer-specs-row { color: #94a3b8; border-bottom-color: #444; }
body.dark-theme .roofer-autor { color: #60a5fa; }
body.dark-theme .roofer-btn-edit { background: #2d2d2d; color: #f39c12; border-color: #f39c12; }
body.dark-theme .roofer-btn-edit:hover { background: #f39c12; color: #1a1a1a; }
body.dark-theme .roofer-btn-del  { background: #2d2d2d; color: #e74c3c; border-color: #e74c3c; }
body.dark-theme .roofer-btn-del:hover  { background: #e74c3c; color: #fff; }
body.dark-theme .roofers-btn-more { background: #252525; color: #3498db; border-color: #3498db; }
body.dark-theme .roofers-btn-more:hover { background: #3498db; color: #fff; }
body.dark-theme .ws-stala       { background: #1a2e1a; color: #6fcf97; border-color: #2e7d32; }
body.dark-theme .ws-okazjonalna { background: #2e1f00; color: #fbbf24; border-color: #92400e; }
body.dark-theme .ws-brak        { background: #2e0f0f; color: #f87171; border-color: #7f1d1d; }

/* ---- RESPONSIVE ---- */
@media (min-width: 601px) and (max-width: 900px) {
    .roofers-grid { grid-template-columns: repeat(2, 1fr); }
    .roofers-search { width: 100%; }
    .roofer-card-header { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .roofers-grid { grid-template-columns: 1fr; }
    .roofers-search { width: 100%; }
    .roofer-card-header { flex-wrap: wrap; }
}

/* Tryb poziomy — jedna karta na wiersz, identyczny układ jak pionowy */
.roofers-list-mode { grid-template-columns: 1fr !important; }
.roofers-list-mode .supplier-card-tabs { width: fit-content; }
.roofers-list-mode .supplier-tab-btn { flex: none; min-width: 120px; }
.roofers-list-mode .project-card-photo { height: px; }
body.dark-theme .supplier-tab-btn:not(.active) { background: transparent !important; color: #94a3b8 !important; border-color: #444 !important; }

/* Tagi dekarza */
.roofer-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.roofer-tag { padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; background: #dbeafe; color: #1d4ed8; border: none; cursor: default; }
body.dark-theme .roofer-tag { background: #2d2d2d; color: #ccc; }
body.dark-theme .roofer-tag { background: #1a2e3a; color: #60a5fa; border-color: #2c5f7a; }

/* Dynamiczna ikona dzisiejszego dnia na przycisku Kalendarz */
.cal-day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 0;
    box-sizing: border-box;
    background: none;
    border: none;
}
.cal-day-icon svg { display: block; width: 24px; height: 24px; }
.cal-day-icon .cal-day-icon-top {
    width: 100%;
    height: 0.3em;
    background: #e74c3c;
    flex-shrink: 0;
}
.cal-day-icon .cal-day-icon-num {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    font-weight: 700;
    color: #2c3e50;
    width: 100%;
}
.cal-day-icon .cal-day-icon-top {
    width: 100%;
    height: 6px;
    background: #e74c3c;
    flex-shrink: 0;
}
.cal-day-icon .cal-day-icon-num {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #2c3e50;
    width: 100%;
}

/* === Korekta przełącznika statystyk: ramka + niebieski hover === */
.mgr-stats-btn {
    border: 1px solid #d8dee5 !important;
    border-radius: 4px;
}
.mgr-stats-btn:hover {
    background: #3498db !important;
    color: #fff !important;
    border-color: #3498db !important;
}
.mgr-stats-btn.active {
    background: #3498db !important;
    color: #fff !important;
    border-color: #3498db !important;
}
body.dark-theme .mgr-stats-btn { border-color: #444 !important; }
body.dark-theme .mgr-stats-btn:hover,
body.dark-theme .mgr-stats-btn.active {
    background: #2980b9 !important;
    color: #fff !important;
    border-color: #2980b9 !important;
}
/* Jednostka nakładana na pole liczbowe (kalkulator obróbek) */
.calc-input-wrap { position: relative; display: block; width: 95%; }
.calc-input-wrap input { width: 100%; box-sizing: border-box; padding-right: 42px; margin: 0; }
.calc-input-wrap .calc-unit { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #999; font-size: 12px; pointer-events: none; }

/* ===== Personalizacja: wybór układu menu ===== */
.menu-layout-opt { padding: 8px 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #2c3e50; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.menu-layout-opt:hover { background: #e9ecef; }
.menu-layout-opt.active { background: #3498db; color: #fff; border-color: #3498db; }
body.dark-theme .menu-layout-opt { background: #2d2d2d; color: #ddd; border-color: #444; }
body.dark-theme .menu-layout-opt.active { background: #2980b9; color: #fff; border-color: #2980b9; }

/* UKŁAD: Siatka — kafelki, ikona nad podpisem (uproszczone: równe kafelki) */
.view-switch.layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.view-switch.layout-grid button { flex-grow: 0; padding: 16px 8px; }

/* UKŁAD: Kompakt — mniejsze przyciski */
.view-switch.layout-compact { gap: 6px; }
.view-switch.layout-compact button { flex-grow: 0; padding: 7px 11px; font-size: 13px; }

/* UKŁAD: Boczne zawijane — pionowa kolumna, ikony, rozwijanie po najechaniu */


/* ===== Layout dwukolumnowy: menu boczne + treść ===== */
/* Domyślnie (poziome/siatka/kompakt): kontener pionowy — menu nad treścią jak oryginał */
.app-body { display: block; }
.app-content { width: 100%; }

/* Tylko gdy wybrano układ BOCZNY: dwie kolumny (menu z boku + treść) */
.app-body:has(#mainNavigation.layout-side) { display: flex; align-items: flex-start; gap: 20px; }
.app-body:has(#mainNavigation.layout-side) .app-content { flex: 1; min-width: 0; width: auto; }

/* Menu boczne: pionowa kolumna z ikonami, rozwijana po najechaniu */
.app-body #mainNavigation.layout-side {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 60px;
    flex-shrink: 0;
    gap: 6px;
    margin-bottom: 0;
    overflow: hidden;
    transition: width 0.25s ease;
    position: sticky;
    top: 10px;
}
.app-body #mainNavigation.layout-side.expanded { width: 200px; }

.app-body #mainNavigation.layout-side .nav-btn {
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 0 !important;
    height: 50px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    justify-content: flex-start;
    font-size: 15px;
    border-radius: 8px;
}
.app-body #mainNavigation.layout-side .nav-ico {
    flex: 0 0 58px;
    width: 58px;
    min-width: 58px;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}
.app-body #mainNavigation.layout-side .nav-txt {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.app-body #mainNavigation.layout-side.expanded .nav-txt {
    opacity: 1;
    transform: translateX(0);
}
/* Badge powiadomienia */
.app-body #mainNavigation .nav-badge {
    background: #fff;
    color: #c0392b;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 14px;
}
/* Menu boczne: badge powiadomienia z obwódką 1px */
.app-body #mainNavigation.layout-side .nav-badge {
    border: 1px solid #c0392b;
}
/* Zwinięte menu: badge jako mała kropka/liczba przy ikonie */
.app-body #mainNavigation.layout-side:not(.expanded) .nav-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    margin: 0;
    padding: 0 5px;
    background: #e74c3c;
    color: #fff;
    border: 1px solid #fff;
}
.app-body #mainNavigation.layout-side .nav-btn { position: relative; }
.app-body #mainNavigation.layout-side .nav-btn[style*="display: none"] { display: none !important; }

/* Na wąskich ekranach menu wraca nad treść (pełna szerokość) */
@media (max-width: 768px) {
    .app-body:has(#mainNavigation.layout-side) { display: block; }
    .app-body #mainNavigation.layout-side { width: 100% !important; flex-direction: row; flex-wrap: wrap; position: static; }
    .app-body #mainNavigation.layout-side .nav-btn { flex-grow: 1; height: auto; justify-content: center; padding: 12px !important; }
    .app-body #mainNavigation.layout-side .nav-ico { flex: 0 0 auto; width: auto; min-width: 0; }
    .app-body #mainNavigation.layout-side .nav-txt { opacity: 1; transform: none; }
}
/* Wyrównanie tytułu strony do pierwszego przycisku menu */
.app-content .hero { margin: 0; }
.app-content #mainTitle {
    margin: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
}
/* Tylko układ BOCZNY: ukryj wspólny tytuł i wyrównaj treść do pierwszej ikony */
.app-body:has(#mainNavigation.layout-side) #mainTitleContainer { display: none !important; }
.app-body:has(#mainNavigation.layout-side) .app-content { padding-top: 0 !important; margin-top: 0 !important; }
.app-body:has(#mainNavigation.layout-side) .app-content > div[id$="View"],
.app-body:has(#mainNavigation.layout-side) .app-content > #todoListView,
.app-body:has(#mainNavigation.layout-side) .app-content > #flashingsCalculator,
.app-body:has(#mainNavigation.layout-side) .app-content > #crmView,
.app-body:has(#mainNavigation.layout-side) .app-content > #suppliersView,
.app-body:has(#mainNavigation.layout-side) .app-content > #statsView,
.app-body:has(#mainNavigation.layout-side) .app-content > #documentsView,
.app-body:has(#mainNavigation.layout-side) .app-content > #boardView,
.app-body:has(#mainNavigation.layout-side) .app-content > #opdView {
    margin-top: 0 !important;
}
/* Konto w menu bocznym: wyrównanie do pierwszej ikony */
.app-body:has(#mainNavigation.layout-side) #accountView .acc-shell { margin-top: 0; }

/* Tryb POZIOMY (domyślny): większy odstęp między menu a tytułem zakładki (+20px) */
.app-body:not(:has(#mainNavigation.layout-side)) #mainNavigation {
    margin-bottom: 50px;
}

/* Tryb POZIOMY: mniejszy odstęp między tekstem tytułu a poziomą kreską (−10px) */
.app-body:not(:has(#mainNavigation.layout-side)) #mainTitle {
    padding-bottom: 0 !important;
}

/* Tryb POZIOMY: ujednolicony odstęp linii pod tytułem do treści (jak w CRM = 20px) */
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #todoListView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #contestsView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #roofersView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #contactsView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #suppliersView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #projectsView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #statsView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #documentsView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #flashingsCalculator,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #chatView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #opdView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #calView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #boardView,
.app-body:not(:has(#mainNavigation.layout-side)) .app-content > #crmView {
    margin-top: 20px !important;
}
body.dark-theme #btnClearObrobki {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #fca5a5 !important;
}
/* Efekt najechania na przyciski w zakładce Dokumenty */
.doc-btn, a.doc-btn { transition: filter 0.2s, transform 0.1s, box-shadow 0.2s; }
.doc-btn:hover, a.doc-btn:hover { filter: brightness(0.92); box-shadow: 0 2px 6px rgba(0,0,0,0.18); transform: translateY(-1px); }
.doc-btn:active, a.doc-btn:active { transform: translateY(0); box-shadow: none; }
body.dark-theme a.doc-btn { color: #fff !important; }
.roofer-contact-block { margin-bottom: 6px; }
.roofer-contact-block + .roofer-contact-block { border-top: 1px solid #eee; padding-top: 6px; }
body.dark-theme .roofer-contact-block + .roofer-contact-block { border-top-color: #333; }
/* CRM - wyszukiwarka kontaktów: tryb ciemny */
body.dark-theme #crmContactSearchResults { background: #2a2a2a !important; border-color: #444 !important; }
body.dark-theme #crmContactSearchResults .crm-search-row { border-bottom-color: #3a3a3a !important; }
body.dark-theme #crmContactSearchResults .crm-search-row > div > div:first-child { color: #e8e8e8 !important; }
body.dark-theme #crmContactSearchResults .crm-search-row > div > div { color: #b0b0b0 !important; }
body.dark-theme #crmContactSearchResults .crm-search-row > span { color: #888 !important; }

/* ===== TABLICA ===== */
#boardView[style*="block"] { display: flex !important; }
#boardView { overflow: visible; }

/* Uchwyt zmiany wysokości tablicy */
.board-resizer { height: 12px; cursor: ns-resize; display: flex; align-items: center; justify-content: center;
    user-select: none; margin-top: 2px; flex: 0 0 auto; border-radius: 0 0 8px 8px; transition: background 0.15s; }
.board-resizer::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: #cbd5e1; transition: background 0.15s; }
.board-resizer:hover::before, .board-resizer.dragging::before { background: #3498db; }
body.dark-theme .board-resizer::before { background: #4a4a4a; }
body.dark-theme .board-resizer:hover::before, body.dark-theme .board-resizer.dragging::before { background: #60a5fa; }
body.board-resizing { cursor: ns-resize !important; user-select: none !important; }
#chatView[style*="block"] { display: block !important; }

#crmView[style*="block"] { display: block !important; }

/* Uchwyt zmiany wysokości kanbana CRM */
.crm-resizer { height: 12px; cursor: ns-resize; display: flex; align-items: center; justify-content: center;
    user-select: none; margin-top: 2px; border-radius: 0 0 8px 8px; transition: background 0.15s; }
.crm-resizer::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: #cbd5e1; transition: background 0.15s; }
.crm-resizer:hover::before, .crm-resizer.dragging::before { background: #3498db; }
body.dark-theme .crm-resizer::before { background: #4a4a4a; }
body.dark-theme .crm-resizer:hover::before, body.dark-theme .crm-resizer.dragging::before { background: #60a5fa; }
body.crm-resizing { cursor: ns-resize !important; user-select: none !important; }

/* Uchwyt zmiany wysokości kalendarza */
.cal-view-resizer { height: 2px; cursor: ns-resize; display: flex; align-items: center; justify-content: center;
    user-select: none; margin-top: 2px; border-radius: 0 0 8px 8px; transition: background 0.15s; }
.cal-view-resizer::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: #cbd5e1; transition: background 0.15s; }
.cal-view-resizer:hover::before, .cal-view-resizer.dragging::before { background: #3498db; }
body.dark-theme .cal-view-resizer::before { background: #4a4a4a; }
body.dark-theme .cal-view-resizer:hover::before, body.dark-theme .cal-view-resizer.dragging::before { background: #60a5fa; }
body.cal-view-resizing { cursor: ns-resize !important; user-select: none !important; }

/* Wysokość tablicy nie jest wymuszana — steruje nią .board-wrap (uchwyt + localStorage). */
#boardView .toolbar,
#boardView #boardPills,
#boardView #boardPanel { flex: 0 0 auto; }

.board-wrap { border: 1px solid #e2e8f0; border-radius: 12px; overflow: auto;
    background: #fff; flex: 0 0 auto; height: 640px; min-height: 0; }
.board-canvas { position: relative; width: 100%; min-width: 900px; min-height: 100%; height: 700px;
    cursor: default;
    background-image: radial-gradient(#d8dee7 1px, transparent 1px); background-size: 24px 24px; }

.board-note { position: absolute; padding: 9px 11px; border: 1px solid; border-radius: 8px;
    cursor: move; transform-origin: center center; box-sizing: border-box; }
.board-note-head { display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-size: 11px; font-weight: 700; opacity: 0.9; margin-bottom: 5px; }
.board-note-meta { font-weight: 400; font-size: 10px; opacity: 0.75; }
.board-note-body { outline: none; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; cursor: text; }

.board-tip { position: absolute; top: 10px; right: 14px; z-index: 1;
    font-size: 12px; color: #cbd5e1; pointer-events: none; user-select: none;
    text-align: right; line-height: 1.5; }

/* Tryb Alt: im wyżej notatka, tym bardziej blednie — widać, co jest pod spodem.
   Najechanie myszą podnosi notatkę na wierzch (obsługa w JS). */
.board-canvas.board-xray .board-note { transition: opacity 0.12s; }
.board-canvas.board-xray .board-note:hover { outline: 2px solid #3498db; outline-offset: 1px; }
.board-canvas.board-xray { cursor: pointer; }
body.dark-theme .board-tip { color: #555; }

.board-resize { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #64748b; opacity: 0; transition: opacity 0.15s; user-select: none; z-index: 2; }
.board-resize-l { left: -7px; }
.board-resize-r { right: -7px; }
.board-note:hover .board-resize { opacity: 0.85; }
.board-resize:hover { opacity: 1 !important; color: #2c3e50; }
body.dark-theme .board-resize { color: #999; }
body.dark-theme .board-resize:hover { color: #fff; }

.board-note-plain { background: transparent !important; border: 1px dashed transparent; color: #1e293b;
    padding: 6px 8px; width: auto; max-width: none; white-space: nowrap; }
.board-note-plain:hover { border-color: #cbd5e1; }

.board-note-head-plain { opacity: 0; transition: opacity 0.15s;
    pointer-events: none; color: #94a3b8; }
.board-note-plain:hover .board-note-head-plain { opacity: 1; }
body.dark-theme .board-note-head-plain { color: #888; }

/* Tryb edycji: ramka i nagłówek widoczne na sztywno */
.board-note-plain.board-editing { border-color: #cbd5e1; border-style: dashed; }
.board-note-plain.board-editing .board-note-head-plain { opacity: 1; }
body.dark-theme .board-note-plain.board-editing { border-color: #555; }
.board-note-body-plain { white-space: pre; word-wrap: normal; overflow-wrap: normal;
    min-width: 20px; display: inline-block; }
body.dark-theme .board-note-plain { color: #e2e8f0; }
body.dark-theme .board-note-plain:hover { border-color: #555; }

.board-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 0 12px; margin-top: 0; margin-bottom: 0; background: #fff;
    border: 1px solid #e2e8f0; border-color: transparent; border-radius: 8px;
    max-height: 0; opacity: 0; overflow: hidden;
    transform: translateY(-6px);
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1), opacity 0.22s ease,
                transform 0.28s cubic-bezier(.4,0,.2,1),
                padding 0.28s cubic-bezier(.4,0,.2,1), margin-bottom 0.28s cubic-bezier(.4,0,.2,1),
                border-color 0.28s ease; }
.board-panel.open { max-height: 140px; opacity: 1; padding: 10px 12px;
    margin-top: 0; margin-bottom: 16px;
    transform: translateY(0);
    border-color: #e2e8f0; }

.board-color-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 99999; }
.board-color-box { background: #fff; border-radius: 12px; padding: 18px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25); width: 280px; }
.board-color-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; color: #1e293b; font-size: 14px; }
.board-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.board-color-custom { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; border-top: 1px solid #e2e8f0; padding-top: 12px; }

body.dark-theme .board-wrap { border-color: #444; background: #232323; }
body.dark-theme .board-canvas { background-image: radial-gradient(#3a3a3a 1px, transparent 1px); }
body.dark-theme .board-panel { background: #2d2d2d; border-color: transparent; color: #ccc; }
body.dark-theme .board-panel.open { border-color: #444; }
body.dark-theme .board-color-box { background: #2d2d2d; }
body.dark-theme .board-color-head { color: #e2e8f0; }
body.dark-theme .board-color-custom { border-top-color: #444; }
/* ===== TABELE UPRAWNIEŃ (moduły w wierszach, pracownicy w kolumnach) ===== */
.perm-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.perm-table { border-collapse: separate; border-spacing: 0; width: 100%; }

.perm-table th, .perm-table td { padding: 0; }

.perm-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
.perm-head-mod { z-index: 3 !important; }

.perm-head-mod, .perm-cell-mod {
    text-align: left; padding: 8px 12px !important; min-width: 150px;
    border-right: 1px solid #e2e8f0; }
.perm-head-mod { font-size: 12px; font-weight: bold; color: #64748b;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

.perm-cell-mod { border-bottom: 1px solid #f1f5f9; }
.perm-mod-label { font-size: 13px; color: #2c3e50; font-weight: 500; }
.perm-mod-count { font-size: 11px; color: #94a3b8; margin-left: 6px; }

.perm-head-all { width: 34px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.perm-cell-all { text-align: center; border-bottom: 1px solid #f1f5f9; }
.perm-btn-all { width: 22px; height: 22px; padding: 0; cursor: pointer; line-height: 1;
    border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #64748b;
    font-weight: bold; font-size: 14px; }
.perm-btn-all:hover { background: #3498db; color: #fff; border-color: #3498db; }

.perm-head-user { min-width: 58px; padding: 6px 4px !important; text-align: center;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.perm-user-name { display: block; font-size: 12px; font-weight: bold; color: #2c3e50; }
.perm-user-role { display: block; font-size: 9px; color: #94a3b8; margin-top: 1px; }

.perm-cell { text-align: center; padding: 7px 4px !important; border-bottom: 1px solid #f1f5f9; }
.perm-cell input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }
.perm-table tbody tr:hover .perm-cell,
.perm-table tbody tr:hover .perm-cell-all { background: #f8fafc; }
.perm-table tbody tr:hover .perm-cell-mod { background: #f1f5f9; }

body.dark-theme .perm-wrap { border-color: #444; background: #2d2d2d; }
body.dark-theme .perm-sticky { background: #2d2d2d; }
body.dark-theme .perm-head-mod,
body.dark-theme .perm-head-all,
body.dark-theme .perm-head-user { background: #333; border-bottom-color: #444; }
body.dark-theme .perm-head-mod, body.dark-theme .perm-cell-mod { border-right-color: #444; }
body.dark-theme .perm-cell-mod, body.dark-theme .perm-cell,
body.dark-theme .perm-cell-all { border-bottom-color: #3a3a3a; }
body.dark-theme .perm-mod-label, body.dark-theme .perm-user-name { color: #e2e8f0; }
body.dark-theme .perm-btn-all { background: #2d2d2d; border-color: #555; color: #ccc; }
body.dark-theme .perm-table tbody tr:hover .perm-cell,
body.dark-theme .perm-table tbody tr:hover .perm-cell-all { background: #333; }
body.dark-theme .perm-table tbody tr:hover .perm-cell-mod { background: #383838; }
/* ===== SEKCJA UŻYTKOWNICY: pasek + filtry ===== */
.users-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.users-search { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 5px;
    font-size: 13px; outline: none; }
.users-search:focus { border-color: #3498db; }
.users-seats { font-size: 12px; color: #7f8c8d; white-space: nowrap; }
.users-seats strong { color: #2c3e50; }
.users-pills { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 10px; }

body.dark-theme .users-search { background: #2d2d2d; border-color: #444; color: #ccc; }
body.dark-theme .users-seats { color: #999; }
body.dark-theme .users-seats strong { color: #e2e8f0; }
/* ===== SEKCJA UŻYTKOWNICY: wiersz konta ===== */
.acc-users-list { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    max-height: 340px; overflow-y: auto; padding: 0; }

#companiesListContainer.acc-users-list { max-height: none; overflow: visible; }

.urow { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9; }
.urow:last-child { border-bottom: none; }
.urow:hover { background: #f8fafc; }

.urow-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: bold;
    background: #F1F5F9; color: #64748B; }
.urow-av-boss       { background: #FCEBEB; color: #A32D2D; }
.urow-av-superadmin { background: #EEEDFE; color: #534AB7; }
.urow-av-menager    { background: #FAEEDA; color: #854F0B; }
.urow-av-handlowiec { background: #E6F1FB; color: #185FA5; }
.urow-av-magazyn    { background: #E1F5EE; color: #0F6E56; }

.urow-name { font-size: 14px; font-weight: bold; color: #2c3e50; min-width: 90px; }
.urow-badge { margin: 0; }
.urow-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.urow-locked { font-size: 11px; color: #95a5a6; font-style: italic; }

.urow-btn { padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: 12px;
    font-weight: bold; border: 1px solid #cbd5e1; background: #fff; color: #475569;
    transition: 0.15s; }
.urow-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.urow-btn-del { color: #e74c3c; padding: 5px 9px; }
.urow-btn-del:hover { background: #FCEBEB; border-color: #e74c3c; }

body.dark-theme .acc-users-list { border-color: #444; background: #2d2d2d; }
body.dark-theme .urow { border-bottom-color: #3a3a3a; }
body.dark-theme .urow:hover { background: #333; }
body.dark-theme .urow-name { color: #e2e8f0; }
body.dark-theme .urow-btn { background: #2d2d2d; border-color: #555; color: #ccc; }
body.dark-theme .urow-btn:hover { background: #383838; }
/* ===== MODAL: nowe konto ===== */
.newacc-overlay { display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(15,23,42,0.45); align-items: center; justify-content: center; }
.newacc-overlay.open { display: flex; }
.newacc-box { background: #fff; border-radius: 12px; padding: 22px 24px; width: 380px;
    max-width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.newacc-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0;
    color: #2c3e50; font-size: 15px; }
.newacc-close { border: none; background: none; cursor: pointer; font-size: 20px;
    color: #94a3b8; line-height: 1; padding: 0 4px; }
.newacc-close:hover { color: #2c3e50; }

.newacc-box .acc-form-group { margin-bottom: 14px; }
.newacc-box .acc-label { display: block; margin-bottom: 5px; font-size: 11px;
    letter-spacing: 0.03em; color: #64748b; }
.newacc-box .acc-input,
.newacc-box .acc-select { width: 100%; box-sizing: border-box; padding: 9px 11px;
    border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; background: #fff; }
.newacc-box .acc-input:focus,
.newacc-box .acc-select:focus { outline: none; border-color: #3498db; }

.newacc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px;
    padding-top: 14px; border-top: 1px solid #e2e8f0; }
.newacc-actions .acc-btn { padding: 8px 16px; font-size: 13px; }

body.dark-theme .newacc-head,
body.dark-theme .newacc-actions { border-color: #444; }
body.dark-theme .newacc-box .acc-input,
body.dark-theme .newacc-box .acc-select { background: #2d2d2d; border-color: #555; color: #ccc; }

.users-add-btn { white-space: nowrap; padding: 8px 14px !important; font-size: 13px !important; }

body.dark-theme .newacc-box { background: #2d2d2d; }
body.dark-theme .newacc-head { color: #e2e8f0; }

/* Plakietki ról — stonowane */
.role-badge { padding: 3px 10px !important; border-radius: 20px !important;
    font-size: 11px !important; font-weight: bold !important; }
.role-badge.role-boss       { background: #FCEBEB !important; color: #A32D2D !important; }
.role-badge.role-menager    { background: #FAEEDA !important; color: #854F0B !important; }
.role-badge.role-handlowiec { background: #E6F1FB !important; color: #185FA5 !important; }
.role-badge.role-magazyn    { background: #E1F5EE !important; color: #0F6E56 !important; }

body.dark-theme .role-badge.role-boss       { background: #501313 !important; color: #F7C1C1 !important; }
body.dark-theme .role-badge.role-menager    { background: #412402 !important; color: #FAC775 !important; }
body.dark-theme .role-badge.role-handlowiec { background: #042C53 !important; color: #B5D4F4 !important; }
body.dark-theme .role-badge.role-magazyn    { background: #04342C !important; color: #9FE1CB !important; }
/* Placeholder logo — czarna ramka, widoczny dopóki firma nie wgra własnego */
.logo-placeholder { display: none; cursor: pointer; color: #1e293b; transition: color 0.15s; }
.logo-placeholder:hover { color: #3498db; }
body.dark-theme .logo-placeholder { color: #e2e8f0; }
body.dark-theme .logo-placeholder:hover { color: #5dade2; }
/* Tablica: zdjęcie w notatce — skaluje się proporcjonalnie do szerokości notatki,
   bez przycinania (żadnego object-fit: cover ani max-height). */
.board-note-img { margin-top: 8px; border-radius: 6px; overflow: hidden; line-height: 0; cursor: zoom-in; }
.board-note-img img { width: 100%; height: auto; display: block; }
/* Tablica: linki w notatkach — czytelne w obu motywach.
   !important, bo inline style z boardLinkify() inaczej by wygrał. */
.board-note-body a {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
body.dark-theme .board-note-body a {
    color: #1d4ed8 !important;
}
/* ===== Kafelki zapisanych obróbek — obsługa trybu jasny/ciemny ===== */
.obrobka-preview-row {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}
.obrobka-preview-info { color: #333; }
.obrobka-preview-title { color: #2c3e50; }
.obrobka-preview-thumb {
    background: #fff;
    border: 1px solid #ddd;
}

body.dark-theme .obrobka-preview-row {
    background: #2a2a2a !important;
    border-color: #444 !important;
}
body.dark-theme .obrobka-preview-info { color: #e0e0e0 !important; }
body.dark-theme .obrobka-preview-title { color: #7fb8e6 !important; }
body.dark-theme .obrobka-preview-thumb {
    background: #f5f5f5 !important;
    border-color: #555 !important;
}


/* ============================================================
   IKONA LUPY W POLACH WYSZUKIWANIA
   SVG (Lucide „search") jako tło — bez zmian w strukturze HTML.
   ============================================================ */
.search,
.users-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
    padding-left: 32px !important;
}
/* Ciemny motyw nadpisuje `background` skrótowo — przywracamy ikonę */
body.dark-theme .search,
body.dark-theme .users-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
}

/* ============================================================
   IKONY SVG — spójne wyrównanie w całej aplikacji
   ============================================================ */

/* Menu główne (poziome / grid / compact) */
.view-switch#mainNavigation:not(.layout-side) button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.view-switch#mainNavigation:not(.layout-side) .nav-ico,
.view-switch#mainNavigation:not(.layout-side) .nav-txt,
.view-switch#mainNavigation:not(.layout-side) .nav-badge {
    align-self: center !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
.view-switch#mainNavigation:not(.layout-side) .nav-ico {
    width: 24px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.view-switch#mainNavigation:not(.layout-side) .nav-ico svg {
    display: block !important;
    margin-top: 1px;
}

/* Ikona w menu bocznym (zwiniętym i rozwiniętym) */
.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 0;
}
.nav-ico svg { display: block; }

/* Ikony w kartach i panelu Konta */
.roofer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.acc-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Pasek szkicownika: same ikony, równa szerokość przycisków */
#sketch-toolbar button svg { display: block; }
#sketch-next-obrobka span:empty,
#sketch-podglad-obrobek span:empty { display: none; }

/* Przycisk „+" w nagłówku kolumny CRM */
.crm-add-in-stage-btn:hover {
    background: rgba(0,0,0,0.12) !important;
    color: #2c3e50 !important;
}
/* ============================================================
   POWRÓT DO EKRANU LOGOWANIA (wylogowanie) — zoom out
   ============================================================ */
@keyframes loginZoomOut {
    from {
        opacity: 0;
        transform: scale(1.06);
        filter: brightness(1.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}
#loginOverlay.zoom-in {
    animation: loginZoomOut 0.55s ease-out forwards;
}
/* ============================================================
   EKRAN LOGOWANIA — zawsze czcionka domyślna
   Wybór czcionki użytkownika dotyczy wyłącznie samej aplikacji.
   ============================================================ */
#loginOverlay,
#loginOverlay button,
#loginOverlay input,
#loginOverlay select,
#loginOverlay textarea,
#loginOverlay .login-box,
#loginOverlay .login-box * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}