/* ============================================================
   1. FUNDAMENT I RESET
   ============================================================ */
:root {
    --primary: #769dc7;
    --success: #4CAF50;
    --info: #77a9b1;
    --warning: #a2bcd8;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --border: #dee2e6;
    --sidebar-bg: #2c3e50;
    --dark-header: #1a252f;
}
html {
    /* Rezerwuje miejsce na pasek, ale go nie wymusza wizualnie */
    scrollbar-gutter: stable; 
}
/* --- STYLIZACJA PASKA PRZEWIJANIA (Nowoczesny wygląd) --- */
::-webkit-scrollbar {
    width: 10px; /* Węższy pasek */
}

/* Tło paska (szyna) - przezroczyste lub bardzo jasne */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* Suwak (to co łapiesz myszką) */
::-webkit-scrollbar-thumb {
    background: #cbd5e0; /* Jasny szary, dyskretny */
    border-radius: 3px;   /* Zaokrąglony */
}

/* Suwak po najechaniu */
::-webkit-scrollbar-thumb:hover {
    background: #769dc7; /* Twój niebieski kolor po najechaniu */
}

* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.5;
}

.content {
    flex-grow: 1;
    margin-left: 265px; /* Szerokość Sidebaru */
    padding: 0 30px; /* Odstęp treści głównej od krawędzi i Sidebaru */
}
.col-12 {
    padding: 0 !important;
}
.col-12.mb-4 {
    max-width: 1150px;
    min-width: 1150px;
    padding: 0;
}
.col-12.mb-5 {
    padding: 0 30px;
}

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }
.container-narrow {
    max-width: 900px !important;
    margin: 0 auto;
    padding: 0px 20px !important; 
}
.col-lg-5 {
    display: flex;
    margin-bottom: 16px;
    justify-content: center;
}


/* ============================================================
   2. SYSTEM SIATKI I NARZĘDZIA (LAYOUT)
   ============================================================ */
.row { display: flex; flex-wrap: wrap; }
[class*="col-"] { padding: 0 7px; width: 100%; }

.container, .container-narrow {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}
.container-narrow.py-5 {
    margin-top: 50px;
}

@media (min-width: 768px) {
    .col-md-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-lg-8 { flex: 0 0 66.66%; max-width: 850px; }
}

/* Flex Utilities */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.mb-4 .flex-column {
    flex-direction: row-reverse !important;
}
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

/* Spacing Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-3 { margin-bottom: 1rem !important; margin-right: 1rem !important; }
.mb-4 { margin-bottom: 1.0rem !important; }
.mt-auto { margin-top: auto !important; }
.ms-2 { margin-left: 0.5rem !important; }
.p-3 {/* padding: 0.5rem 1rem 0.5rem 1rem !important; */}
.p-4 { padding: 0 2rem 2rem 2rem !important; text-align: center;}

span.text-primary {
    font-weight: bold;
}
span.custom-tooltip.text-primary.fs-5 {
    font-weight: normal;
}
span.fs-5 {
    font-size: 1.1rem;
}


/* ============================================================
   3. KOMPONENTY (Karty, Przyciski, Formularze)
   ============================================================ */
.card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px !important; /* Większe zaokrąglenie wygląda nowocześniej */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Delikatny cień */
    overflow: visible !important; /* Było hidden. Zmieniamy na visible, żeby dymki mogły wystawać. */
    display: flex;
    flex-direction: column;
}
/* Nagłówek z przyciskami (ten z paddingiem p-3) */
.card-header-custom {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 20px 0 20px !important;
    position: relative;
    z-index: 60 !important; /* Twoje ustawienie */
}
.card-header { padding: 0.75rem 1.25rem; background: #d3ebd5; border-bottom: 1px solid var(--border); }
.card-body { padding: 1.25rem; }

/* Przyciski */
.btn {
    display: inline-block;
    padding: 0.375rem 1.75rem;
    height: 40px;
    font-size: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: 0.15s;
    color: #333333;
}
.btn-primary { background: #e6e6e6; color: #fff; border-radius: 5px;}
.btn-success { background: #cddc39; color: #333333;; border: none; width: 180px; text-shadow: 0px 0px 0px #05050575;
}
.btn-success:hover { background: #769dc7; color: #ffffff;}
button.btn.btn-success.w-100 {
    margin-top: 15px;
    width: 100%;
    text-shadow: 0px 0px 0px #05050575;
}
.btn-warning { background-color: #f8e580; color: #202020; border: none; text-shadow: 0px 0px 0px #05050575;
}
.btn-warning:hover { background: #f3d745;}

.btn-secondary {
    background: var(--secondary);
    color: #394f63;
    letter-spacing: 1.5px;
    border: 1px solid #cbcbcb;
    border-radius: 5px;
}
.btn-secondary:hover {
    background: #769dc7;
    color: white;
}
.btn-outline-secondary { color: #7a8999; background: transparent; }

a.btn.btn-sm.btn-danger.px-3 {
    border: 1px solid #6c757d;
    text-align: center;
    color: #404040;
    display: flex;
    align-items: center;
    width: 120px;
    justify-content: center;
}
a.btn.btn-sm.btn-danger.px-3:hover {
    background-color: #ffffff;
}
.btn-sm {/* padding: 0.5rem; font-size: 0.875rem; */}

/* Grupa Przycisków */
.btn-group { display: flex; border-radius: 0.25rem; overflow: hidden; }
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.btn-check:checked + .btn { filter: brightness(0.95); border: 2px solid #000; }

/* Formularze */
.form-control, .form-select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.stat-box.bg-care, .stat-box.bg-past, .stat-box.bg-uw {
    font-size: 0.8rem;
    text-align: center;
    font-weight: 600;
}

/* ============================================================
   4. TWOJE SPECYFICZNE STYLE (Kalendarz, Kafelki)
   ============================================================ */
/* Zakładki (Tabs) */
.nav-tabs { display: flex; border-bottom: 1px solid var(--border); padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 4px 4px 0 0; cursor: pointer; color: var(--primary); }
.nav-link.active { background: #fff; border-color: var(--border) var(--border) #fff; color: #000; }

/* Kafelki Daty */
.date-tile {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    width: 120px;
    /* min-height: 70px; */
    padding: 8px;
    border-radius: 2px;
    color: #ffffff !important;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
    position: relative;
    overflow: visible !important; /* POPRAWKA: Pozwala dymkom wychodzić poza kafelek */

    border: 1px solid rgb(222, 226, 230);
    width: 140px;
    height: 70px;
    color: rgb(51, 51, 51) !important;
    display: flex;
    flex-direction: row;
}


.date-tile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
}

.date-tile-label { font-size: 0.7rem; opacity: 0.9; text-transform: uppercase; }
.date-tile-val { font-size: 0.85rem; }

.tile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    bottom: 49px;
    right: 5px;
    overflow: visible !important;
    position: absolute;
    z-index: 1001;
}

.tile-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border:  1px solid rgba(255, 255, 255, 0.5) !important;;
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
button.cal-mini-btn.btn-trash {
    font-size: 20px;
}
.btn-flag {
    background: rgba(255, 255, 255) !important; 
    border: 1px solid rgba(255, 255, 255) !important;

}

.flagged-tile .btn-flag {
    background: #FFC107 !important;
    border: none !important;
    color: #3a3a3a;
    opacity: 1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.btn-flag:hover {
    opacity: 1;
    transform: scale(1.2);
    background: #ffc107 !important;
}
.flagged-tile:hover .btn-flag:hover { background: #FFC107 !important; }

.tile-action-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}
.btn-trash:hover { background: #F44336 !important; border-color: #ffffff; }

/* --- KALENDARZ - SIATKA --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    /* background-color: #e9ecef; */
    
    /* Usuwamy górny border, bo robi go teraz .card-header-custom */
    border-top: none; 
    
    /* Wypełnienie dołu karty */
    flex-grow: 1;
    padding: 4px;
}
.cal-day {
    /* PRZYWRÓCONE: Sztywne proporcje */
    aspect-ratio: 5 / 3.0;
    width: 100%;  /* Wypełnia szerokość kolumny siatki */
    height: auto; /* Wysokość dostosuje się automatycznie do szerokości */
    background-color: #f1f3f5;
    border: none !important; /* Border robi 'gap' z rodzica */
    /* border-radius: 5px 20px 0px 20px; */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 6px;
    transition: background-color 0.2s ease;
/* --- BLOKADA ZAZNACZANIA TEKSTU W KALENDARZU --- */
    -webkit-user-select: none; /* Safari / Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
    user-select: none;         /* Standard */
}
/* Nagłówki dni tygodnia (Pn, Wt...) */
.cal-day-header {
    background: #f1f5f9;
    color: #374859;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid #769dc7;
}
/* Pokazujemy przyciski po najechaniu na dzień LUB gdy dzień jest oflagowany/ma notatkę */
.cal-day:hover .cal-actions,
.cal-day.has-meta .cal-actions {
    opacity: 1;
}
/* Efekt po najechaniu na dzień */
.cal-day:hover {
    background-color: #CDDC39 !important;
    color: #126d15 !important;
    z-index: 70 !important;
    transform: none;
    /* outline: 2.5px solid #c86d66 !important; */
    box-shadow: inset 0 0 0 2px #8b9810 !important;
    border: none !important;
}
.cal-day.weekend:hover {
    background-color: #ffffff;
    /* outline: 1px solid #595a5a !important; */
}

/* Pusty dzień (spoza miesiąca) */
.cal-day.empty {
    background-color: #ffffff !important;
    
    /* Tworzymy gradient, który jest przezroczysty, a w środku ma pasek */
    /* background-image: linear-gradient(
31deg, transparent calc(50% - 0px), #cbcbcb calc(50% - 1px), #cbcbcb calc(50% + 1px), transparent calc(50% + 1px)) !important; */
    
    /* WAŻNE: Zmieniamy z 10px na 100%, aby kreska była jedna na cały kafelek */
    background-size: 100% 100%; 
    opacity: 0.6;
    outline: 2.5px solid #ffffff00 !important;
}

.cal-day.empty:hover {
    box-shadow: none !important;
}

/* Styl dla flagi "!" w kalendarzu */
.cal-day.is-flagged::after {
    content: '!';
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000000; 
    background: #FFC107;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    line-height: 1;
    /* border: 1px solid #fff; */
    z-index: 5;
}

/* Badge w nagłówku pracowników */
.badge-custom { padding: 5px 15px; border-radius: 50px; font-size: 0.9rem; }
.vacation-left { font-weight: bold; }
.vacation-limit { opacity: 0.7; font-size: 0.8em; }

/* Historia (Tabele) */
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.table td, .table th { text-align: left; padding: 0.5rem; border: 1px solid var(--border); }

/* Notatki */
.note-area { background-color: #fff3cd; border: 1px solid #ffe69c; min-height: 120px; }

/* Autoryzacja */
.auth-card { max-width: 450px; margin: 50px auto; }
.full-height-center { min-height: 80vh; display: flex; align-items: center; }

/* UKŁAD ADMINA */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f1f5f9;
}
.admin-sidebar {
    width: 250px;
    background: #2c3e50;
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
}
.admin-main {
    flex-grow: 1;
    margin-left: 250px;
    padding: 30px;
    background: #f4f7f6;
}

/* LISTA PRACOWNIKÓW */
.user-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}
.user-link {
    text-decoration: none;
    color: #333;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: 0.2s;
}
.user-link:hover { background-color: #f8fafc; color: #769dc7; }
.user-link.active {
    background-color: #eef2f7;
    color: #769dc7;
    border-left: 4px solid #769dc7;
    font-weight: 600;
}
.user-name { font-size: 0.95rem; font-weight: 500; }
.user-badge {
    background: #769dc7;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    min-width: 35px;
    text-align: center;
}

.user-list { flex-grow: 1; overflow-y: auto; }

.user-item-btn {
    margin: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-decoration: none;
    color: #ecf0f1;
    gap: 8px;
    transition: 0.2s;
    
    /* NOWOŚĆ: Baza dla obramowania statusu */
    border-left: 7px solid transparent; 
}

/* --- KOLORY STATUSU RCP (BORDER LEFT) --- */

/* Osoba w pracy - limonkowy border */
.user-item-btn.status-in {
    border-left-color: #CDDC39;
}

/* Osoba poza pracą - czerwony border */
.user-item-btn.status-out {
    border-left-color: #c86d66;
}

/* --- NADPISYWANIE DLA DNI WOLNYCH (BACKGROUND + BORDER) --- */

/* Urlop (UW) - Niebieski */
.user-item-btn.today-uw {
    background-color: #374859 !important;
    /* border-left-color: #9eb9d7 !important; */
    color: #fff !important;
}

/* Zaległy - Jasny niebieski/szary */
.user-item-btn.today-past {
    background-color: #374859 !important;
    /* border-left-color: #a2bcd8 !important; */
    color: #fff !important;
}

/* Opieka - Turkusowy */
.user-item-btn.today-care {
    background-color: #374859 !important;
    /* border-left-color: #9ec2c8 !important */;
    color: #fff !important;
}

/* Chorobowe (L4) - Czerwony/Różowy */
.user-item-btn.today-sick {
    background-color: #374859 !important;
    /* border-left-color: #dfa9a5 !important; */
    color: #fff !important;
}

/* Inne - Biały/Jasny szary */
.user-item-btn.today-other {
    background-color: #374859 !important;
    /* border-left-color: #efe9b9 !important; */
    color: #fff !important;
}
/*.user-item-btn.today-other .user-name-text { color: #333 !important; }
.user-item-btn.today-other .used-info-text { color: #666 !important; }*/
/*.user-item-btn.today-other .user-status-badge { background-color: #2c3a47; color: #ffffff;}*/

/* Poprawka kontrastu dla aktywnych elementów z tłem */
.user-item-btn.active.today-uw, 
.user-item-btn.active.today-past, 
.user-item-btn.active.today-care, 
.user-item-btn.active.today-sick {

    /* border-left-color: #fff !important;*/ /* Biały akcent dla aktywnego gdy ma tło */
}
.user-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* Przesuwamy tylko JEŚLI przycisk NIE jest aktywny */
    transform: translateX(4px);
}

/* ZABLOKOWANIE RUCHU DLA AKTYWNEGO */
.user-item-btn.active:hover {
    transform: none !important; /* Aktywny kafelek stoi w miejscu */
    cursor: default; /* Opcjonalnie: kursor domyślny zamiast rączki */
}

.user-item-btn.active {
    /* background-color: #f0f0f0 !important; */
    /* border-color: var(--primary); */
    background-color: #769dc7 !important;
    color: #ffffff;
}

.user-info-side {
    display: flex;
    flex-direction: column; 
    gap: 2px; /* Lekki odstęp między liniami */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding-right: 0px;
}
/* Pierwsza linia: Nazwisko */
.user-name-text { 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #fff; 
    text-align: left; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
/* 2. Kalendarz | Urlop - ROZDZIELONE */
.user-vacation-info {
    font-size: 0.75rem; 
    color: rgba(255, 255, 255, 0.7);
    /* display: none;  <-- USUWAMY TO STARE UKRYWANIE, TERAZ STERUJEMY DZIEĆMI */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Domyślnie ukryj cały kontener jeśli oba dzieci są ukryte (robimy to sprytniej niżej) */
}

/* Style poszczególnych elementów */
.info-cal {
    font-weight: 700;
    color: #fff;
}
.info-sep {
    opacity: 0.4;
    margin: 0 3px;
}
.info-limit {
    /* Styl domyślny */
}

/* --- LOGIKA UKRYWANIA (SHOW/HIDE) --- */

/* Jeśli NIE MA klasy show-opt-calendar -> ukryj kalendarz */
#mainSidebar:not(.show-opt-calendar) .info-cal { display: none !important; }

/* Jeśli NIE MA klasy show-opt-limit -> ukryj licznik */
#mainSidebar:not(.show-opt-limit) .info-limit { display: none !important; }

/* Jeśli UKRYTO kalendarz LUB licznik -> ukryj separator (pionową kreskę) */
/* Separator ma sens tylko, gdy oba są widoczne */
#mainSidebar:not(.show-opt-calendar) .info-sep,
#mainSidebar:not(.show-opt-limit) .info-sep { 
    display: none !important; 
}

/* Jeśli oba są wyłączone, ukryj cały kontener linii (żeby nie robił pustego odstępu) */
#mainSidebar:not(.show-opt-calendar):not(.show-opt-limit) .user-vacation-info {
    display: none !important;
}
.user-vacation-info .cal-status {
    font-weight: 700;
    color: #fff; /* Wyróżnienie statusu kalendarza */
}
.user-vacation-info .sep {
    opacity: 0.4;
    margin: 0 3px;
}
/* Trzecia linia: Status dnia / RCP (Domyślnie ukryta, JS włącza) */
.user-context-info {
    font-size: 0.75rem;
    font-weight: 500;
    display: none; /* Sterowane przez JS */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kolory statusów w tekście kontekstowym */
.ctx-work { color: #CDDC39; font-weight: bold; } /* W pracy */
.ctx-out  { color: #e9cd7b; } /* Poza pracą */
.ctx-uw   { color: #7da8d7; font-weight: bold; }
.ctx-l4   { color: #ffffff; font-weight: bold; }
.ctx-care { color: #85bcc4; font-weight: bold; }

.user-item-btn.active .ctx-work,
.user-item-btn.active .ctx-out,
.user-item-btn.active .ctx-uw ,
.user-item-btn.active .ctx-l4 ,
.user-item-btn.active .ctx-care {
    color: #2c3e50;
    /* text-shadow: 0px 1px 3px #000000b8; */
}
/* --- STYLISTYKA DLA AKTYWNEGO UŻYTKOWNIKA --- */

/* Domyślny kolor (zabezpieczenie) */
.user-item-btn.active .user-name-text { 
    color: #374859; 
} 

/* 1. Aktywny + W pracy (status-in) -> POMARAŃCZOWY */
.user-item-btn.active.status-in .user-name-text {
    color: #d7e63b !important;
}

/* 2. Aktywny + Poza pracą (status-out) -> CZERWONY */
.user-item-btn.active.status-out .user-name-text {
    color: #843d37 !important;
}



.user-item-btn.active .user-vacation-info { color: rgb(241 243 245); }
.user-item-btn.active .user-vacation-info .cal-status { color: #1a252f; }
.user-item-btn.active .ctx-work { color: #2c3e50; } 
.user-item-btn.active .ctx-out { /* color: #963d1c; */ }
.user-item-btn.active .user-hours-badge { color: rgba(55, 72, 89, 0.6); }


.user-item-btn.active span.user-hours-badge {
    color: #f8f8f8;
}
.user-item-btn.active span.user-context-info.ctx-work {
    color: #d5e43b;
}
span.user-context-info.ctx-out {
    color: #c86d66;
}

.user-item-btn.active .user-status-badge, .user-item-btn.active  .user-hours-badge {
    color: #374859;
    /* padding: 5px; */
    border-radius: 6px;
}
.user-item-btn.active .user-status-badge {
    /* border: 1px solid #769dc7; */
    color: #2c3e50;
}

.used-info-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.user-item-btn.active .used-info-text { color: rgba(255, 255, 255, 0.8); }

.user-status-badge {
    display: none; /* Domyślnie ukryte, włącza JS */
    /* border: 1px solid #769dc7a1; */
    color: #f0f4f8;
    padding: 5px;
    border-radius: 5px;
}
/* Badge Godzin (Nowość) */
.user-hours-badge {
    display: flex !important; /* Kluczowe: Zawsze obecny w DOM jako flex */
    flex-wrap: wrap;
    gap: 5px;
    
    /* Ukrywanie wizualne */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    
    /* Płynna animacja */
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease,
                margin 0.3s ease;
}

/* --- KLASY WIDOCZNOŚCI (Nadawane na #mainSidebar przez JS) --- */
#mainSidebar.show-details-day .user-context-info {
    max-height: 50px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 2px;
}
#mainSidebar.show-details-vacation .user-vacation-info { display: block; }
#mainSidebar.show-total-hours .user-hours-badge { display: block; } /* Block, żeby było w nowej linii */
#mainSidebar.show-amount-vacation .user-status-badge {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1px 5px;
    margin: -3px 0px -3px 1px;
}

/* --- NOWE MENU W USTAWIENIACH --- */

.settings-group {
    padding: 10px 15px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.settings-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #769dc7;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.settings-option {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    margin-bottom: 5px;
    cursor: pointer;
}
.settings-option:hover { color: #fff; }

.settings-option input[type="checkbox"] {
    accent-color: #769dc7;
    cursor: pointer;
}

.rem-days-val { font-weight: 700; font-size: 1.1rem; line-height: 1; }
.user-status-badge small { font-size: 0.6rem; letter-spacing: 0.5px; }

.user-item-btn.status-out .user-name-text {
    color: #c86d66;
}
.user-item-btn.status-in .user-name-text {
    color: #cddc39;
}


/* PASEK BOCZNY */
.sidebar {
    width: 280px;
    background: var(--sidebar-bg); /* #2c3e50 */
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1100;
    transition: transform 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050; /* Tuż pod sidebarem, który ma 1100 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}
#mobile-trigger {
    display: none; /* Domyślnie ukryty na komputerze */
}


/* Kontener stopki menu */
/* Stylizacja stopki sidebaru i nowych przycisków */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: #394f63;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto; /* Pcha stopkę na sam dół */
}

.sidebar-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none !important;
    background: transparent !important;
}

/* WSPÓLNY HOVER DLA WSZYSTKICH POZYCJI */
.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding-left: 20px; /* Efekt wysunięcia */
}

/* Specjalny kolor dla wylogowania */
.sidebar-btn.logout:hover {
    background: rgba(220, 53, 69, 0.2) !important;
}

.user-nav {
    flex-grow: 1; /* Nav zajmuje dostępną przestrzeń */
    overflow-y: auto; /* Przewijanie listy pracowników */
}
.sidebar-header {
    padding: 15px;
    background: var(--dark-header);
    color: var(--primary);
    z-index: 100;
}
.header-top {
    display: flex;
    color: #769dc7;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

/* Kontener listy - kluczowe dla przewijania */
.user-nav-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
}

/* Stylizacja scrollbara dla user-nav */
.user-nav-container::-webkit-scrollbar { width: 6px; }
.user-nav-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Hamburger i Dropdown */
.admin-menu-container { position: relative; }
.hamburger-btn {
    background: transparent; border: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px; padding: 5px;
}
.hamburger-btn span { display: block; width: 20px; height: 2px; background: #fff; transition: 0.3s; }

.admin-dropdown-content {
    /* ... twoje obecne style ... */
    display: none;
    position: absolute;
    right: 0;
    top: 45px; /* Obniżenie pod hamburgera */
    background-color: #34495e;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Mocniejszy cień */
}
.admin-dropdown-content.show {
    display: block !important;
    left: 15px;
    width: 200px;
}

.admin-dropdown-content hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 5px 0;
}

.admin-dropdown-content .sidebar-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.admin-dropdown-content .sidebar-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    padding-left: 25px;
}

.sidebar-header h3 { margin: 0; font-size: 1rem; letter-spacing: 1px; display: flex; justify-content: center; }

/* RWD */
@media (max-width: 768px) {
    .admin-sidebar { width: 70px; }
    .admin-main { margin-left: 70px; }
    .user-item .name, .sidebar-header h4 { display: none; }
    body { padding: 0 10px !important; }
    .row {  }
    [class*="col-"] { padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 992px) {

.d-flex.gap-2 label {
    height: 50px;
    margin-top: 5px;
}
.d-flex.gap-2 {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    flex-direction: column !important;
}
.filter-bar.d-flex.flex-wrap.gap-2.mb-3.pb-3.border-bottom {
    display: flex;
    flex-direction: row !important;
}
div#tiles-container {
    display: flex;
    flex-direction: row !important;
}

h2.display-4.text-primary.mb-0 {
    padding-left: 0px;
}
h2 {
    padding-left: 70px;
}
    .sidebar {
        /* Chowa pasek poza lewą krawędź ekranu */
        transform: translateX(-100%);
        
        /* Upewniamy się, że przejście jest płynne */
        transition: transform 0.3s ease-in-out;
        
        /* Szerokość musi być stała, żeby nie "pływała" */
        width: 280px !important;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1100;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    /* Przycisk Menu na mobile */
    #mobile-trigger {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        background-color: #34495e;
        color: white;
        z-index: 1000;
        border: none;
    }
    .content {
        margin-left: 0 !important;
    }
    .user-nav { padding: 10px 5px; }
    .user-item-btn { padding: 8px 5px; /* flex-direction: column; */ /* text-align: center; */}
    .used-info-text, .user-status-badge small { display: none; }
    .user-info-side { width: 100%; /* align-items: center; */ }
    .user-name-text { text-align: center; font-size: 0.8rem; }
    .sidebar-footer .btn {
        display: flex; padding: 10px 5px; align-content: center;
        flex-wrap: wrap; flex-direction: column; align-items: center; text-align: center;
    }
    
    .admin-dropdown-content {
        position: fixed; top: 65px; left: 15px; right: 15px; width: auto;
    }
}

/* Statystyki w nagłówku */
.stat-box {
    padding: 7px 10px;
    border-radius: 8px;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.bg-uw { background-color: #769dc7; }
.bg-past { background-color: #a2bcd8; }
.bg-care { background-color: #77a9b1; }
.stat-box b {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 600;
    margin: 5px 0;
    padding-right: 5px;
    color: #1a252f;
}
.stat-box .small-info {
    font-size: 1.2rem;
    opacity: 0.9;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    color: #ffffff !important;
}

/* User Badge Container */
.user-badge-container { display: flex; flex-direction: column; align-items: flex-end; }
.used-info { font-size: 0.75rem; color: #94a3b8; }
.user-link.active .used-info { color: #769dc7; }

/* Widoczność hasła */
input[type="text"].form-control, input.form-control { background-color: #fff; width: 100%; /* margin-top: 5px; */}

/* PANEL UŻYTKOWNIKA - POPRAWKI */
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-5 { margin-bottom: 1rem !important; }

.form-label { margin-bottom: 8px; display: inline-block; }
.form-control { margin-bottom: 0 !important; }
.btn-group-toggle .btn { border-width: 2px; padding: 10px 5px; font-weight: bold; transition: 0.2s; text-align: center; }
.list-item:last-child { border-bottom: none; }
.list-container { max-height: 500px; overflow-y: auto; padding-right: 5px; }
.btn-lg { /* padding: 15px; font-size: 1.1rem; font-weight: regular; */}
.btn-lg:hover { background-color: #6e6e6e; }
.g-3 { gap: 0.5rem !important; }
.display-4 { font-size: 2.5rem; font-weight: 400; line-height: 1.2; }

/* Kolory po zaznaczeniu (Checked) */
#type_uw:checked + label { background-color: #769dc7 !important; color: white !important; border-color: #769dc7; }
#type_past:checked + label { background-color: #a2bcd8 !important; color: white !important; border-color: #a2bcd8; }
#type_care:checked + label { background-color: #77a9b1 !important; color: white !important; border-color: #77a9b1; }
.btn-outline-primary { border-color: #769dc7; color: #769dc7; }
.btn-outline-warning { border-color: #a2bcd8; color: #a2bcd8; }
.btn-outline-info {
    border-color: #77a9b1;
    color: #77a9b1;
}

#view-list .d-flex.flex-wrap { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-start; padding: 15px 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #fff; border-bottom: 1px solid #eee; }
.list-item .badge { display: inline-block; width: 110px; text-align: center; padding: 8px 0; border-radius: 4px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
.btn-group-toggle { display: flex; gap: 5px; }
body.bg-light { padding: 0 15px; }

/* Drobne poprawki */
.card-stat .small.text-muted { font-size: 0.7rem !important; line-height: 1.2; }
.card-stat .mt-2.pt-2.border-top { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid rgba(0,0,0,0.05) !important; }
.bg-dark .form-control { margin-bottom: 0; }
.d-block { display: block !important; }


/* public_html/style.css */

/* --- NOWA NAWIGACJA IKONOWA --- */

.nav-icon-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px 0px 10px;
}

/* Styl obrazka */
.nav-icon-btn img {
    width: 32px; /* Rozmiar ikony */
    height: 32px;
    object-fit: contain;
    margin: 8px; /* Odstęp od tekstu */
    transition: transform 0.1s ease;
}

/* Styl podpisu */
.nav-icon-btn span {
    font-size: 0.85rem; /* Mały, zgrabny tekst */
    color: #374859; /* Szary tekst */
    letter-spacing: 0.5px;
}

/* Stan po najechaniu (Hover) */
.nav-icon-btn:hover {
    opacity: 1;
}
.nav-icon-btn:hover img {
    transform: translateY(-3px); /* Lekkie uniesienie ikony */
}

/* Stan AKTYWNY (kliknięty) */
.nav-icon-btn.active {
    border-bottom: 3px solid #a2bcd8;
}

.nav-icon-btn.active span {
    color: #769dc7; /* Twój kolor wiodący (niebieski) */
}

/* Specjalny efekt dla aktywnej ikony (opcjonalny cień) */
.nav-icon-btn.active img {
}
.d-flex.justify-content-end.align-items-center.mb-2.mt-3 {
    margin-bottom: 15px;
    justify-content: center;
}

.add-tile-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 120px; min-height: 85px; border: 2px dashed #769dc7; border-radius: 8px;
    background: #f8fafc; color: #769dc7; cursor: pointer; transition: 0.2s;
}
.add-tile-btn:hover { background: #eef2f7; border-style: solid; }
.add-tile-btn i { font-size: 1.5rem; font-style: normal; font-weight: bold; }

input[type="date"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    color: transparent; background: transparent; cursor: pointer;
}

h2.display-4.text-primary.mb-0, h4.text-dark.mb-0 { margin-top: 5px; }
span.badge.bg-primary.text-white, span.badge.bg-warning.text-white, span.badge.bg-info.text-white { color: white; }
a.btn.btn-sm.btn-outline-secondary.px-3 { text-align: center;}
button.btn.btn-sm.btn-primary.w-100 { margin-top: 10px; }

/* PRZYCISKI NOTATEK */
.btn-note {
    background: rgba(255, 255, 255) !important;
    border: 1px solid rgba(255, 255, 255) !important;
    font-size: 0.9rem;
}
.btn-note:hover {
    background: #8BC34A !important;
    color: white !important;
    transform: scale(1.2);
}
.btn-note.has-note {
    background: #4CAF50 !important; color: #dcdcdc;
    border: none !important;
    font-size: 1.1rem;
}

/* OŁÓWEK W KALENDARZU */


.cal-note-marker {
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: 0.9rem;
    color: #ffffff;
    background: #4CAF50;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* border: 1px solid #fff; */
    z-index: 100;
    line-height: 1;
}
.cal-note-marker::after {
    content: attr(data-tooltip); position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
    background-color: #333333; color: #ffffff; padding: 8px 12px; border-radius: 6px;
    font-size: 0.85rem; font-weight: normal; line-height: 1.4; white-space: pre-wrap;
    width: max-content; max-width: 250px; min-width: 120px; text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); pointer-events: none; z-index: 100;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease;
}
.cal-note-marker::before {
    content: ''; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #333333;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.cal-note-marker:hover::after, .cal-note-marker:hover::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px);
}

/* Modal i Inne */

button.btn.btn-sm.btn-danger { background-color: #c9625b; color: #ffffff; }

/* Przycisk L4 */
.btn-outline-sick { color: #dc8882; border-color: #dc8882; }
.btn-check:checked + .btn-outline-sick { background-color:#dc8882 !important; color: white; border-color: #dc8882; }
small.text-muted.fw-bold { padding-left: 10px; }
.card.p-2.text-center.shadow-sm { padding: 5px; border-radius: 12px;}
button.btn.btn-sm.btn-outline-secondary { font-size: 1.5rem; border: none;}

/* ============================================================
   SEKCJA GŁÓWNA: KOLORY DNI I WEEKENDÓW (BARDZO WAŻNE: NA KOŃCU PLIKU)
   ============================================================ */

/* 1. Baza: Wszystkie weekendy są szare */
.cal-day.weekend {
    background-color: #dedede;
    color: #8d8d8d;
}

/* 2. Nadpisywanie: Jeśli dzień ma status (Urlop/Chorobowe), musi przykryć kolor weekendu.
      Używamy !important, aby wymusić priorytet. */

/* Urlop (UW) */
.bg-primary, .type-uw {
    background-color: #769dc7b5 !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Zaległy */
.bg-warning, .type-past {
    background-color: #a2bcd8b5 !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}

/* Opieka */
.bg-info, .type-care {
    background-color: #77a9b1b5 !important;
    border-color: var(--info) !important;
    color: #fff !important;
}

/* Chorobowe (L4) */
.bg-sick, .type-sick {
    background-color: #ffffff96 !important;
    /* border: 1.5px dotted #979797 !important; */
    color: #343a40 !important;
    border: none !important;
    /* outline: 1.5px dotted #4f4f4f !important; */
    transform: scale(0.97);
}
.bg-sick:hover, .type-sick:hover {
    transform: scale(0.97);
}
.marker-trigger.bg-sick {
    outline: none !important;
}

.bg-other, .type-other {
    background-color: #e9cd7b !important;
    border: 1px solid #cbcbcb !important;
    color: #3d3d3d !important;
    border: none !important;
}
span.badge.bg-secondary {
    color: #c86d66;
    font-weight: normal;
    padding-left: 20px;
}

/* Nowy styl markera wewnątrz paska przycisków */
.marker-btn {
    border-radius: 0 !important;
    width: 26px !important;  /* Sztywna szerokość, taka sama jak wysokość */
    height: 26px !important; /* Sztywna wysokość (dziedziczona z .cal-btn) */
    padding: 0 !important;   /* Usuwamy padding, żeby tekst był idealnie na środku kwadratu */
    
    /* Style "nieaktywnego" przycisku (bez zmian) */
    font-weight: 900;
    cursor: default !important;
    pointer-events: none;
    border: none !important;
    background: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Wyłączenie efektów hover dla markera (ma być statyczny) */
.marker-btn:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Kolorowanie tekstu markera w zależności od klasy (dziedziczone z admin.js) */
.marker-btn.marker-uw { color: #769dc7; background: #fff !important; }
.marker-btn.marker-past { color: #a2bcd8; background: #fff !important; }
.marker-btn.marker-care { color: #77a9b1; background: #fff !important; }
.marker-btn.marker-sick { color: #dc8882; background: #fff !important; }
.marker-btn.marker-other { color: #c70000; background: #fff !important; }

/* Kolory liter w zależności od typu (dopasowane do tła kafelka) */

/* U - Urlop (tło niebieskie -> litera niebieska) */
.marker-uw { color: #769dc7; }

/* UZ - Zaległy (tło pomarańczowe -> litera pomarańczowa) */
.marker-past { color: #a2bcd8; }

/* O - Opieka (tło turkusowe -> litera turkusowa) */
.marker-care { color: #77a9b1; }

/* ZL - L4 (tło szare/fioletowe -> litera ciemna) */
.marker-sick { color: #dc8882; }

/* i - Inne (tło czerwone -> litera czerwona) */
.marker-other {
    color: #c70000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

h6#comment-modal-date {
    font-size: 1.5em;
    margin-top: 5px;
    color: #4CAF50;
}
.cal-note-marker:hover {
    background: #dcdcdc;
    color: #000000;
}
/* Wyrównanie przycisków w akcjach */
.table td.text-end {
    vertical-align: middle;
}
#add-type option { padding: 10px; }

.table .text-end .btn-sm {
    height: 32px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* font-size: 1.2rem; */
    margin-left: 4px;
    vertical-align: middle;
    border: none;
    background-color: #c86d66;
    color: white;
    text-shadow: 0px 0px 0px #05050575;
}
.table .text-end .btn-sm:hover {
    background: #769dc7;
    color: #ffffff;
}

/* Zmniejszenie czcionki tylko dla tekstu potwierdzenia w przycisku usuń */
.btn-sm[data-state="counting"], 
.btn-sm[data-state="final"] {
    text-transform: uppercase;
    background-color: #505050;
    color:white;
}
a.btn.btn-secondary.w-100.mb-2 {
    color: #394f63;
    margin-top: 20px;
}
a.btn.btn-sm.btn-secondary.w-100 {
    color: white;
}
#comment-text {
    border: 1.5px solid #769dc7; /* Twoja zmienna --primary */
    border-radius: 6px;
    outline: none; /* Usuwa domyślną poświatę systemową */
}

/* Opcjonalnie: zmiana koloru ramki, gdy administrator klika w pole */
#comment-text:focus {
    box-shadow: 0 0 5px rgba(76, 157, 199, 0.3);
}
textarea#comment-text {
    margin-bottom: 20px !important;
    width: 285px !important;
}

.content-header.mb-4 {
    margin-top: 15px;
}
button.btn.btn-primary.w-100 {
    margin-top: 20px;
    background: #cddc39;
    color: #333333;
    border: none;
    text-shadow: 0px 0px 0px #05050575;
}
button.btn.btn-primary.w-100:hover {
    background: #769dc7;
    color: #ffffff;
    text-shadow: 0px 0px 0px #05050575;
}
.card.p-4.shadow.auth-card form {
    text-align: center;
}
input.form-control {
    font-size: 1.1rem;
}
button.btn.btn-primary.flex-grow-1 {
    background: #CDDC39;
    color: #333333;
}
button.btn.btn-primary.flex-grow-1:hover {
    background: #769dc7;
    color: white;
}

/* --- AKCJE W KALENDARZU --- */







.cal-btn:hover {
    transform: scale(1.15);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Kolory przycisków w zależności od stanu */
.cal-btn.btn-trash:hover { color: red; border-color: red; }

.cal-btn.btn-flag.active { 
    background: #FFC107; 
    border-color: #e0a800; 
}

.cal-btn.btn-note.active {
    background: #4CAF50;
    color: #fff;
    border-color: #388E3C;
}

/* Dostosowanie układu kratki, żeby przyciski nie zasłaniały numeru dnia */


/* Kolorowa niedziela/sobota w nagłówku */
.cal-day-header.text-danger {
    background: #cfcfcf;
    border-bottom: 3px solid #737373;
    color: #374859 !important;
}

/* Ukrywamy stare wskaźniki (ołówek i wykrzyknik CSS), bo teraz są to przyciski */
.cal-day.is-flagged::after { display: none; }
.cal-note-marker { display: none; }

/* public_html/style.css */

/* --- PŁYWAJĄCY NOTATNIK --- */
.floating-notepad {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 500px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border-radius: 8px;
    z-index: 2000; /* Nad wszystkim */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notepad-header {
    background: #374859;
    color: #fff;
    padding: 10px 15px;
    cursor: move; /* Kursor przesuwania */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none; /* Żeby nie zaznaczać tekstu przy przesuwaniu */
}

.notepad-header:active {
    background: #283848;
    cursor: grabbing;
}

.btn-close-white {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}
.btn-close-white:hover { color: #ccc; }

.notepad-body {
    padding: 15px;
    background: #f8f9fa;
}

.note-area {
    font-size: 0.9rem;
    background-color: #fffbe6 !important; /* Kolor żółtej karteczki */
    border-color: #dfd7ca !important;
}
/* public_html/style.css */

/* --- NOWE LOGO NA GÓRZE --- */
.sidebar-logo-container {
    flex-shrink: 0;
    padding: 15px; /* Odstęp od góry i dołu */
    text-align: center;
    background-color: transparent; /* Usuwamy tło */
    border-top: none; /* Usuwamy górną linię, bo teraz jest na górze */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Dodajemy linię oddzielającą od tytułu */
    margin-bottom: 10px;
}

.sidebar-logo-container img {
    max-width: 90%; /* Nieco mniejsze logo na górze wygląda lepiej */
    max-height: 70px;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

/*.sidebar-logo-container img:hover {
    transform: scale(1.05);
}*/

/* --- NAGŁÓWEK "PANEL KADROWY" --- */
.sidebar-header {
    padding: 0; /* Padding przeniósł się do kontenerów wewnątrz */
    background: var(--dark-header);
    color: var(--primary);
    z-index: 100;
}

/* Kontener tytułu i hamburgera */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Tytuł po lewej, hamburger po prawej */
    padding: 0 15px 15px 15px; /* Odstęp od dołu */
}

/* Stylizacja linku "Panel Kadrowy" */
.panel-home-link {
    text-decoration: none;
    color: var(--primary); /* Twój niebieski kolor */
    transition: color 0.2s;
    flex-grow: 1; /* Zajmuje dostępną przestrzeń */
    text-align: center; /* Wyśrodkowanie */
}

.panel-home-link:hover {
    color: #fff; /* Po najechaniu biały */
}

.panel-home-link h3 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Poprawka dla kontenera listy użytkowników */
.user-nav-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
    /* Dodajemy cień u góry listy, żeby oddzielić od nagłówka */
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.3);
}

/* Poprawka dla wersji mobilnej (ukrytego paska) */
@media (max-width: 992px) {
    .sidebar-logo-container {
        padding: 15px 10px;
    }
}

textarea.form-control.note-area {
    resize: none;
    height: 250px;
    width: 100%;
}
/* --- NOWE AKCJE W KALENDARZU (MENU ROZWIJANE) --- */

/* Główny kontener w prawym dolnym rogu */
.cal-floating-menu {
    position: absolute;
    bottom: 3px;
    right: 3px;
    /* Usunąłem flex, bo teraz pozycjonujemy absolutnie */
    z-index: 50; 
}

/* Po najechaniu na kontener dodajemy tło i cień */
.cal-floating-menu:hover {
    /*background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    padding-left: 8px;  Miejsce na przyciski */
}

/* Kontener na ukryte przyciski (Kosz, Notatka, Flaga) */
.cal-hidden-tools {
    display: flex;
    flex-direction: column-reverse; /* Wieża od dołu */
    gap: 5px;
    
    /* Pozycjonowanie "nad" markerem */
    position: absolute;
    bottom: 100%; /* Zaczyna się na górnej krawędzi markera */
    right: 0;     /* Wyrównane do prawej */
    padding-bottom: 6px; /* Odstęp od markera */
    
    /* Stan ukryty */
    opacity: 0;
    transform: translateY(10px); /* Przesunięte w dół (chowa się za markerem) */
    pointer-events: none;        /* Nieklikalne gdy ukryte */
    
    /* Animacja */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    
    /* KLUCZOWE: Brak overflow hidden, żeby dymki były widoczne */
    overflow: visible; 
    z-index: 40;
}

/* Po najechaniu wysuwamy przyciski */
.cal-floating-menu:hover .cal-hidden-tools {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Można klikać */
}

/* Styl przycisków w menu */
.cal-mini-btn {
    width: 28px;
    height: 28px;
    /* border-radius: 50%; */
    border: 1px solid #ddd;
    background: #fff;
    color: #404040;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    position: relative; /* Ważne dla dymka */
}

.cal-mini-btn:hover {
    transform: scale(1.15);
    z-index: 100; /* Wyciągamy na wierzch przy najechaniu */
}

/* Kolory stanów aktywnych */
.cal-mini-btn.btn-flag.active { background: #ffc107 !important; color: #000; border-color: #e0a800; }
.cal-mini-btn.btn-note.active { background: #8BC34A  !important; color: #ffffff; border-color: #388e3c; }
.cal-mini-btn.btn-trash:hover { background: #dc3545 color: #ffffff; color: #fff; }

.cal-floating-menu:hover .marker-trigger {
    transform: scale(1.05);
}

/* MARKER (U, L4) - Zawsze widoczny */
.marker-trigger {
    width: 28px;
    height: 28px;
    /* border-radius: 6px; */
    /* background-color: #93b0d0 !important; */
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.15);*/
    position: relative;
    z-index: 55;
    transition: transform 0.2s;
}

* Kolory Markera */
.marker-trigger.bg-primary { background-color: var(--primary) !important; color: #fff; }
.marker-trigger.bg-primary.has-info, .marker-trigger.bg-primary {
    background-color: #769dc7 !important;
}
.marker-trigger.bg-warning { background-color: #a2bcd8 !important; color: #fff; }
.marker-trigger.bg-info    { background-color: #549ba6 !important; color: #fff; }
.marker-trigger.bg-sick    { background-color: #c86d66 !important; color: #fff !important; }
.marker-trigger.bg-other   { background-color: #e9cd7b !important; color: #c70000; border: 1px solid #ddd; }

/* Kropka informacyjna */
.marker-trigger.has-info::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background-color: #ffc107;
    border-radius: 50%;
    border: 1px solid #979797;
}

/* --- ZNACZNIKI W WIDOKU LISTY --- */
.list-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;       /* Identyczny rozmiar jak w kalendarzu */
    height: 28px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    margin-right: 8px; /* Odstęp od daty */

    position: relative; /* To jest konieczne dla z-index */
    transition: transform 0.2s, z-index 0s; /* Płynna animacja ruchu, natychmiastowa dla warstwy */
}



/* Kolory (te same co w JS/Kalendarzu) */
.list-marker.bg-primary { background-color: #769dc7 !important; }
.list-marker.bg-warning { background-color: #a2bcd8 !important; }
.list-marker.bg-info    { background-color: #549ba6 !important; }
.list-marker.bg-sick    { background-color: #c86d66 !important; color: #ffffff !important; outline: 1px solid #ffffff00 !important; }
.list-marker.bg-other   { background-color: #fff; color: #c70000; border: 1px solid #ddd; }


/* --- UNIWERSALNY STYL DYMKA WIADOMOŚCI (TOOLTIP) --- */
/* To działa i na liście, i w kalendarzu dla elementów z klasą .custom-tooltip */

.custom-tooltip {
    position: relative;
    cursor: help;
}

.custom-tooltip:hover::after {
    content: attr(data-tooltip);
    
    position: absolute;
    bottom: 125%;        /* Troszkę wyżej nad przyciskiem */
    left: 50%;
    transform: translateX(-50%);
    z-index: 19999;       /* Bardzo wysoki indeks, żeby był nad wszystkim */
    
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.4;
    white-space: pre-wrap;
    text-align: left;
    min-width: 150px;
    max-width: 250px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none;
}

.custom-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 105%; /* Dopasowane do dymka */
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    z-index: 9999;
}
/* --- NOWE MENU DODAWANIA (DROPDOWN) --- */
.add-dropdown {
    position: relative;
    display: inline-block;
}

.add-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100 !important; /* Najwyżej wewnątrz nagłówka */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    margin-top: 5px;
}

.add-dropdown-content button {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s;
}

.add-dropdown-content button:hover {
    background-color: #f8f9fa;
    padding-left: 20px; /* Efekt wcięcia */
}

/* Kolorowe paski przy opcjach */
.opt-uw { border-left: 5px solid var(--primary) !important; }
.opt-past { border-left: 5px solid var(--warning) !important; }
.opt-care { border-left: 5px solid var(--info) !important; }
.opt-sick { border-left: 5px solid #dc8882 !important; }
.opt-other { border-left: 5px solid #e9cd7b !important; }

/* --- TRYB DODAWANIA (VISUAL FEEDBACK) --- */
.adding-mode-active .cal-day {
    cursor: crosshair !important; /* Kursor celownika */
    transition: background-color 0.2s;
}

.adding-mode-active .cal-day:hover {
    background-color: #e8f5e9 !important; /* Lekka zieleń po najechaniu */
    /* box-shadow: inset 0 0 0 2px #4CAF50; */
    outline: 1px solid #4CAF50 !important;
}

/* Pasek informacyjny trybu dodawania - Przyklejony na górze */
#add-mode-bar {
    position: fixed;        /* Przyklejony do okna przeglądarki */
    top: 0;
    left: 0;
    width: 100%;            /* Na całą szerokość ekranu */
    height: 60px;           /* Stała wysokość */
    
    background-color: rgba(51, 51, 51, 0.95); /* Lekka przezroczystość */
    backdrop-filter: blur(5px);               /* Efekt rozmycia tła pod spodem */
    color: #fff;
    
    display: none;          /* Domyślnie ukryty */
    justify-content: center; /* Wyśrodkowanie zawartości */
    align-items: center;
    gap: 30px;              /* Odstępy między elementami */
    
    z-index: 10000;         /* Musi być najwyżej ze wszystkiego */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border-bottom: 2px solid #555;
    
    animation: slideDown 0.3s ease;
}
/* Animacja wjazdu z góry */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* --- CZERWONY TEKST DLA AKTYWNEGO UŻYTKOWNIKA --- */
.user-item-btn.active .user-name-text,
.user-item-btn.active .used-info-text {
    color: #1a252f !important; /* Jasny czerwony */
    /* Jeśli chcesz ciemniejszy czerwony, użyj: #dc3545 */
}
input#month-picker {
    color: #1a252f;
    font-size: 20px;
}

/* --- LOGO I NAGŁÓWEK W OKNIE LOGOWANIA --- */

.auth-header {
    background-color: rgb(40 56 72);
    padding: 20px;
    text-align: center;
    border-bottom: 10px solid #a2bcd8; /* Opcjonalny pasek akcentujący (możesz usunąć) */
}

.auth-logo {
    max-width: 300px; /* Nieco większe, bo ma więcej miejsca */
    max-height: 80px;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Poprawka dla karty logowania, żeby rogi były ładnie przycięte */
.auth-card {
    border-radius: 8px; /* Upewniamy się, że karta jest zaokrąglona */
}
/* --- IKONA NOTATNIKA W NAGŁÓWKU --- */
.btn-icon-notepad {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 36px; /* Dopasowana wysokość do paska */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, opacity 0.1s;
}

.btn-icon-notepad img {
    height: 100%; /* Obrazek wypełnia wysokość przycisku */
    width: auto;  /* Szerokość skaluje się proporcjonalnie */
    display: block;
}

.btn-icon-notepad:hover {
    transform: scale(1.2); /* Lekkie powiększenie po najechaniu */
    opacity: 1;
}

.btn-icon-notepad:active {
    transform: scale(0.95); /* Kliknięcie */
}
.d-flex.justify-content-end.align-items-center.w-100 {
    justify-content: space-between;
}
div#view-hr {
    margin: 0 20px;
}
button.btn.btn-primary.px-4 {
    background: #cddc39;
    color: #333333;
    margin: 10px;
    padding: 0px 30px;
    text-shadow: 0px 0px 0px #05050575;
}
button.btn.btn-primary.px-4:hover {
    background: #769dc7;
    color: #ffffff;
}
button.btn.btn-dashed.btn-sm.px-3:hover
{
    background: #769dc7;
    color: #ffffff;
}
/* --- POWIADOMIENIA (TOASTY) --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Dymek pojawi się w prawym dolnym rogu */
    z-index: 10000; /* Zawsze na wierzchu */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Żeby kontener nie blokował kliknięć pod spodem */
}

/* Stylizacja samego komunikatu */
#toast-container .alert {
    background-color: #dfe980 !important; /* Twój wymagany kolor (limonka) */
    color: #333333 !important;               /* Ciemny tekst dla kontrastu */
    border: none !important;
    border-left: 6px solid rgba(0,0,0,0.1) !important; /* Subtelny pasek z boku */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 15px 25px;
    min-width: 300px;
    margin-bottom: 0;
    
    /* Animacja wejścia */
    opacity: 0;
    transform: translateY(50px); /* Przesunięty w dół */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysty efekt */
    pointer-events: auto; /* Sam dymek można kliknąć (np. żeby zamknąć szybciej) */
    cursor: pointer;
}

/* Klasa dodawana przez JS, żeby pokazać dymek */
#toast-container .alert.show {
    opacity: 1;
    transform: translateY(0);
}

/* Jeśli to błąd, możemy (opcjonalnie) zmienić lekko kolor paska bocznego */
#toast-container .alert-danger {
    border-left-color: #dc3545 !important;
    background-color: #e8b4b1 !important;
}
.card.p-4.bg-dark.text-white.shadow {
    text-align: left;
}
h6.text-muted.mb-3.border-bottom.pb-2 {
    font-size: 16px;
    color: #769dc7;
}/* --- KOLOROWE TŁA KAFELKÓW (50% przezroczystości) --- */

/* UW: #769dc7 -> rgba(177, 200, 225, 0.5) */
.date-tile.tile-uw {
    background-color: #769dc7b5 !important;}

/* Zaległy: #a2bcd8 -> rgba(118, 157, 199, 0.5) */
.date-tile.tile-past {
    background-color: #a2bcd8b5 !important}

/* Opieka: #77a9b1 -> rgba(119, 169, 177, 0.5) */
.date-tile.tile-care {
    background-color: #77a9b1b5 !important}

/* L4 (Chorobowe): #dc8882 -> rgba(220, 136, 130, 0.5) */
.date-tile.tile-sick {
    background-color: #ffffff !important;
}

/* Inne: Zostawiamy białe, bo marker też jest biały/szary */
.date-tile.tile-other {
    background-color: #ffffff !important;}

/* public_html/style.css */

/* --- STYL IKON W DOLNYM PASKU KAFELKA --- */

/* Bazowy styl "guzika" na liście */
.list-action-btn {
    width: 25px;       /* Nieco mniejsze niż w kalendarzu (tam 28px), żeby pasowały do paska */
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    cursor: help;      /* Kursor pomocy, bo to informacja */
    line-height: 1;
}

/* Styl dla Flagi (Identyczny jak aktywna w kalendarzu) */
.list-btn-flag {
    background-color: #FFC107 !important;
    color: #000 !important;
}

/* Styl dla Notatki (Identyczny jak aktywna w kalendarzu) */
.list-btn-note {
    background-color: #8BC34A !important;
    color: #fff !important;
}

/* Efekt po najechaniu */
.list-action-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.05);
}
.card.p-4.shadow-lg {
    border-radius: 12px;
}
span.fw-bold.text-dark {
    font-weight: 600;
    font-size: 1rem !important;
    color: #3d3d3d;
}
label.btn.btn-outline-sick.flex-grow-1 {
    /* color: #dc8882; */
}
.btn-group-toggle.d-flex.flex-wrap.gap-2 .btn {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.d-flex.gap-2 {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    flex-direction: row;
}
.card.p-4.shadow-sm {
    padding: 2rem !important;
    border-radius: 12px;
}
.row.mb-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.card.bg-light.border-0.p-3.mb-2, .card.bg-light.border-0.p-3 {
    text-align: left;
    border-radius: 12px;
}

/* --- NOWOCZESNA TABELA PRACOWNIKÓW (Minimalist Ghost Style) --- */

/* 1. Kontener tabeli - usuwamy nadmiarowe ramki */
.table-responsive {
    overflow-x: auto;
    border-radius: 12px; /* Zaokrąglenie całej tabeli */
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* Bardzo delikatny cień pod tabelą */
}

/* 2. Tabela - więcej oddechu */
.table-modern {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important; 
    border-spacing: 0; /* Łączymy krawędzie */
}

.table-modern thead th {
            height: 40px;
            background-color: #f8f9fa !important;
            color: #6c757d;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            border-bottom: 2px solid #dee2e6 !important;
            overflow: visible !important;
}
/* Precyzyjne ustawienie każdej kolumny po indeksie */
        .table-modern th, 
        .table-modern td {
            padding: 3px 6px !important; /* Identyczny padding góra/dół boki */
            vertical-align: middle !important;
            box-sizing: border-box !important;
            overflow: hidden;         /* Ucinaj nadmiar */
            white-space: nowrap;      /* Nie zawijaj tekstu */
            text-overflow: ellipsis;  /* Dodaj kropki (...) jak za długie */
            border-bottom: 1px solid #eee;
        }
/* Wyjątek dla kolumny akcji - musi widzieć przyciski */
.table-modern td:last-child {
    overflow: visible;
    white-space: normal;
}

/* Podświetlenie wiersza po najechaniu */
.table-modern tr:hover td {
    background-color: #fcfcfc;
}



        /* --- DEFINICJA SZEROKOŚCI KOLUMN (SUMA MUSI DAWAĆ 100%) --- */
        
        /* Tabela Aktywni */
        .col-login { width: 15%; }
        .col-name  { width: 22%; }
        .col-rcp   { width: 12%; text-align: center !important; }
        .col-pin   { width: 10%; text-align: center !important; }
        .col-pass  { width: 20%; }
        .col-act   { width: 18%; } /* Kolumna akcji */

        /* Tabela Archiwum */
        .col-arch-login { width: 15%; }
        .col-arch-name  { width: 22%; }
        .col-arch-rcp   { width: 12%; text-align: center !important; }
        .col-arch-pin   { width: 10%; text-align: center !important; }
        .col-arch-act   { width: 18%; }

        /* Wyrównanie tekstu w komórkach danych dla kolumn centralnych */
        .table-modern td:nth-child(3), 
        .table-modern td:nth-child(4) { 
            text-align: center !important; 
        }



/* 3. INPUTY "DUCHY" - Wyglądają jak tekst */
.ghost-input {
    width: 100%;
    height: 50px; /* Wysokość wiersza */
    border: 1px solid transparent; /* Domyślnie brak ramki */
    background: transparent;
    padding: 0 5px;
    font-size: 0.95rem;
    color: #32325d;
    outline: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Po najechaniu myszką - delikatna szara ramka */
.ghost-input:hover {
    background-color: #fff;
    border-color: #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* Po kliknięciu (focus) - Twój kolor wiodący */
.ghost-input:focus {
    background-color: #fff;
    border-color: #769dc7; /* --primary */
    color: #000;
}

/* Select (lista rozwijana) w tym samym stylu */
.ghost-select {
    width: 100%;
    height: 50px;
    border: 1px solid transparent;
    background: transparent;
    padding: 0 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #525f7f;
}
.ghost-select:hover, .ghost-select:focus {
    border-color: #e9ecef;
    background: #fff;
}

/* 4. Przycisk Akcji (Dysk, Kosz) - Minimalistyczne ikony */
.action-btn-minimal {
    width: 45px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #adb5bd;
    font-size: 1.5rem;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.action-btn-minimal:hover {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Kolory po najechaniu */
.btn-save:hover { color: #769dc7; } /* Save -> Niebieski */
.btn-delete:hover { color: #dc3545; } /* Trash -> Czerwony */

/* Styl dla kontenera przycisków, który ma udawać inputa */
        .actions-wrapper {
            display: flex !important;
    justify-content: space-evenly;
    align-items: center !important;
    gap: 4px;
    padding-left: 5px !important;
    height: 50px;
        }

/* Sama komórka TD ma być czysta */
.table-modern td.actions-cell {
    padding: 0 !important; /* Usuwamy padding, żeby wrapper wypełnił komórkę jak input */
    vertical-align: middle !important;
}
button.btn.btn-success.px-4 {
    width: 250px;
}
.d-flex.justify-content-between.align-items-center.mb-4.mt-3 {
    display: flex;
    align-items: flex-end !important;
}
.col-12.mb-2 {
    padding: 0px 0px;
}
header.d-flex.justify-content-between.align-items-center.mb-5.border-bottom.pb-4.mt-2 {
    margin: 20px;
}
.d-flex.justify-content-between.align-items-center {
    /* padding-bottom: 5px; */
    gap: 2px;
}
/* public_html/style.css */

/* --- INFORMACJE KADROWE W NAGŁÓWKU --- */

.hr-info-box {
    text-align: right;
    font-size: 0.9rem; /* Odpowiednik klasy small */
}

/* Etykieta (np. "Umowa do:") */
.hr-label {
    color: #6c757d; /* text-muted */
    margin-left: 15px;
}

/* Data - styl domyślny */
.hr-date {
    font-weight: 700;
    color: #343a40; /* text-dark */
}

/* Data - styl ostrzegawczy (<= 45 dni) */
.hr-date.warning {
    color: #dc3545 !important; /* Czerwony */
    /* font-weight: 800; */ /* Jeszcze grubsza czcionka dla uwagi */
}

/* Separator (pionowa kreska) */
.hr-separator {
    border-left: 1px solid #ccc;
    padding-left: 12px;
    margin-left: 5px; 
}
span.badge.bg-secondary.ms-2 {
    font-size: 0.9em;
}
.hr-status-left {
    color: #6c757d;       /* Ten sam szary co .hr-label */
    font-size: 0.9rem;   /* Ten sam rozmiar tekstu */
    margin-left: 15px;    /* Odstęp od nazwiska */
    font-weight: 400;     /* Normalna grubość etykiety */
}

/* Upewniamy się, że pogrubienie wewnątrz jest identyczne jak po prawej */
.hr-status-left .hr-value {
    color: #343a40;       /* Ten sam ciemny kolor co data */
    font-weight: 700;     /* Ta sama grubość */
    text-transform: uppercase; /* Opcjonalnie: wielkie litery dla 'INNA' */
}
/* --- STYLE DLA TABELI OBECNOŚCI (RCP) --- */

/* Kropka statusu */
.status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* Warianty kolorystyczne */
.status-work {
    background-color: #4CAF50; /* Zielony - W pracy */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    animation: pulse-green 2s infinite;
}

.status-break {
    background-color: #FF9800; /* Pomarańczowy - Przerwa */
}

.status-offline {
    background-color: #dee2e6; /* Szary - Poza pracą */
}

/* Animacja pulsowania dla pracujących */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Wiersz z aktywnym pracownikiem (opcjonalne podświetlenie) */
.row-active td {
    background-color: #f0fdf4 !important; /* Bardzo jasna zieleń */
}

/* --- ZWIJANIE SIDEBARU (DESKTOP) --- */

/* 1. Przycisk strzałki */
.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: #769dc7;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    transition: transform 0.3s ease, color 0.2s;
}
.sidebar-toggle-btn:hover { color: #fff; }

/* 2. Główna klasa zwinięta Szerokość wąskiego menu z lewej*/
.sidebar.collapsed {
    width: 150px !important;
}

/* Dostosowanie treści strony */
body.sidebar-collapsed .content {
    margin-left: 130px !important;
    transition: margin-left 0.3s ease;
}

/* 3. LOGO: Podmiana dużej grafiki na ico.png */
.sidebar.collapsed .logo-full {
    display: none;
}
.sidebar.collapsed .logo-icon {
    display: block !important;
    width: 70px;  /* Dopasuj rozmiar ikony */
    height: auto;
    margin: 0 auto;
}
.sidebar.collapsed .brand-mini {
    display: block !important;
    font-size: 1rem;     /* Bardzo mały tekst */
    color: #d1d1d1;
    text-align: center;
    margin-top: 5px;
    letter-spacing: 0.5px;
    line-height: 1;
}
.sidebar.collapsed .sidebar-logo-container {
    padding: 15px 2px; /* Mniejszy padding */
}

/* 4. NAGŁÓWEK: Ukrywanie tytułu "Panel Kadrowy" */
.sidebar.collapsed .panel-home-link h3 {
    display: none !important;
}
.sidebar.collapsed .header-top {
    display: flex;
    flex-direction: row !important; /* Wymuszamy układ poziomy */
    justify-content: center;        /* Wyśrodkowanie zestawu */
    align-items: center;
    gap: 15px;                      /* Odstęp między strzałką a hamburgerem */
    padding-bottom: 10px;
    flex-wrap: nowrap;
}
/* Obrót strzałki */
.sidebar.collapsed .sidebar-toggle-btn {
    transform: rotate(180deg);
    margin: 0; /* Reset marginesów */
    font-size: 1.4rem;
}
/* Ukrycie menu hamburgera w trybie zwiniętym */
.sidebar.collapsed .admin-menu-container {
    display: block !important; /* Było none, zmieniamy na block */
}
/* Zmniejszamy trochę hamburgera, żeby pasował */
.sidebar.collapsed .hamburger-btn span {
    width: 18px; 
    height: 2px;
    background-color: #769dc7; /* Dopasowanie koloru do strzałki */
}
.sidebar.collapsed .hamburger-btn:hover span {
    background-color: #fff;
}

/* --- WAŻNE: Pozycja rozwijanego menu w trybie zwiniętym --- */
/* Menu musi wyskakiwać "w prawo" poza pasek, bo pasek jest za wąski */
.sidebar.collapsed .admin-dropdown-content.show {
    position: fixed;   /* Pozycjonowanie względem okna, a nie paska */
    top: 130px;        /* Wysokość na oko pod logo i nagłówkiem */
    left: 90px;        /* Odsunięcie od lewej krawędzi (80px pasek + 10px odstęp) */
    width: 200px;
    z-index: 1200;
    
    /* Dodajemy mały "dziubek" (strzałkę) z lewej strony menu
    border-left: 3px solid #769dc7; */
}


/* 5. LISTA PRACOWNIKÓW - ZMIANY (TRYB ZWINIĘTY) */

/* NOWE: Ukrywamy sekcję filtrów w menu hamburgera, gdy pasek jest zwinięty */
.sidebar.collapsed .settings-group {
    display: none !important;
}
.sidebar.collapsed .user-nav {
    gap: 3px;
}
/* Przycisk pracownika w trybie zwiniętym */
.sidebar.collapsed .user-item-btn {
    justify-content: center;
    flex-direction: column; /* Układ pionowy */
    padding: 5px 5px;
    text-align: center;

    /* NOWE: Usuwamy kolorowy border z lewej i resetujemy tło */
    border-left: none !important;
    background-color: #374859 !important;
}
.sidebar.collapsed .user-item-btn.active {
    background-color: #769dc7 !important;
}



/* 3. KOLORY DLA STATUSÓW Z KALENDARZA (Urlopy itp.) */
.sidebar.collapsed .user-item-btn.today-uw .user-name-text { color: #769dc7 !important; }
.sidebar.collapsed .user-item-btn.today-past .user-name-text { color: #a2bcd8 !important; }
.sidebar.collapsed .user-item-btn.today-care .user-name-text { color: #77a9b1 !important; }
.sidebar.collapsed .user-item-btn.today-sick .user-name-text { color: #dc8882 !important; }



/* Aktywny + Dni wolne (zawsze ciemny tekst na jasnym tle kafelka) */
.sidebar.collapsed .user-item-btn.active.today-uw .user-name-text,
.sidebar.collapsed .user-item-btn.active.today-past .user-name-text,
.sidebar.collapsed .user-item-btn.active.today-care .user-name-text,
.sidebar.collapsed .user-item-btn.active.today-sick .user-name-text {
    color: #1a252f !important;
}

/* NOWE: Ukrywamy wszystkie badge i dodatkowe info (godziny, urlop, statusy) */
.sidebar.collapsed .user-status-badge,
.sidebar.collapsed .user-hours-badge,
.sidebar.collapsed .user-vacation-info,
.sidebar.collapsed .user-context-info,
.sidebar.collapsed .used-info-text {
    display: none !important;
}

/* POKAZUJEMY Imię i Nazwisko */
.sidebar.collapsed .user-info-side {
    display: block !important; /* Wymuszamy pokazanie */
    width: 100%;
}

/* 1. Podstawowy reset tekstu w zwiniętym menu */
.sidebar.collapsed .user-name-text {
    font-size: 0.9rem;
    line-height: 1.15;
    display: block;
    word-wrap: break-word;
    width: min-content;
    text-align: left;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.7) !important; /* Domyślny szary */
}

/* 2. NAJWYŻSZY PRIORYTET: W PRACY (Limonka) */
/* Niezależnie od urlopu czy L4 - jeśli status to 'in', nazwa musi być zielona */
.sidebar.collapsed .user-item-btn.status-in .user-name-text {
    color: #CDDC39 !important;
}

/* 3. STATUS: POZA PRACĄ (Czerwony) */
/* Jeśli nie ma odbicia (status-out), nazwa jest czerwona */
.sidebar.collapsed .user-item-btn.status-out .user-name-text {
    color: #c86d66 !important;
}

/* 4. SPECJALNE KOLORY DLA KAFELKA AKTYWNEGO (Wybranego) */
/* Używamy jaskrawszych barw z dużej listy, aby zachować spójność */

/* Aktywny + W pracy */
.sidebar.collapsed .user-item-btn.active.status-in .user-name-text {
    color: #d7e63b !important;
    font-weight: 600;
}
/* Aktywny + Poza pracą */
.sidebar.collapsed .user-item-btn.active.status-out .user-name-text {
    color: #843d37 !important;
    font-weight: 700;
}

/* 5. Ukrywanie zbędnych elementów w trybie zwiniętym */
.sidebar.collapsed .user-status-badge,
.sidebar.collapsed .user-hours-badge,
.sidebar.collapsed .user-vacation-info,
.sidebar.collapsed .user-context-info,
.sidebar.collapsed .used-info-text,
.sidebar.collapsed .settings-group {
    display: none !important;
}

/* Klasa pomocnicza do blokowania animacji przy ładowaniu */
.no-transition * {
    transition: none !important;
}

/* --- FIX MOBILNY DLA ZWINIĘTEGO MENU --- */
@media (max-width: 992px) {
    /* Wymuszamy brak marginesu na małych ekranach, 
       nawet jeśli włączony jest tryb "collapsed" */
    body.sidebar-collapsed .content {
        margin-left: 0 !important;
    }
    
    /* Upewniamy się, że zwykły content też nie ma marginesu */
    .content {
        margin-left: 0 !important;
    }
}
/* ============================================================
   5. POPRAWKI TABELI RCP (ZDJĘCIA I KOLORY)
   ============================================================ */

/* --- KOLOROWANIE WIERSZY TABELI --- */
/* Nadpisujemy domyślne białe tło tabeli używając !important */

/* Wejście - Jasny zielony */
.row-entry td {
    background-color: #9ad19d6e !important;
}

/* Wyjście - Jasny czerwony */
.row-exit td {
    background-color: #f5d4d1 !important;
}

/* --- ZDJĘCIA: KONTENER I ZOOM (NAPRAWA MRUGANIA) --- */

.photo-cell {
    /* Ustawienie relatywne dla komórki, żeby zdjęcie nie uciekło za daleko */
    position: relative;
    vertical-align: middle;
}

/* Wrapper trzymający obszar aktywny dla myszki (40x40) */
.photo-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    cursor: zoom-in;
    z-index: 5; /* Wyższy niż inne elementy w komórce */
}
.photo-wrapper:hover {
    z-index: 1000;
}

/* 1. Mała miniaturka (zawsze widoczna w miejscu) */
.log-photo-thumb {
        width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    border: 1.4px solid #e8e8e8;
    background: #fff;
    display: block;
}

/* 2. Duże zdjęcie (domyślnie ukryte) */
.log-photo-zoom {
    display: none; /* Domyślnie ukryte */
    position: absolute;
    
    /* Pozycjonujemy względem miniaturki */
    top: -75px;
    left: 100%;
    transform: translateY(-50%); /* Centrowanie w pionie względem miniaturki */
    margin-left: 15px; /* Odstęp od krawędzi tabeli */
    
    /* Sztywne wymiary bez możliwości ściskania */
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    
    object-fit: cover !important; /* Zachowanie proporcji zdjęcia */
    border-radius: 5px;
    border: 1px solid #000000;
    background: #fff;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5);
    
    pointer-events: none; /* Myszka "przelatuje" przez duże zdjęcie, co zapobiega mruganiu */
}
#rcp-body-present, #rcp-body-logs {
    position: relative;
}

/* Wyłączenie przycinania w kontenerach tabeli logów rcp */
.admin-layout .card, 
.admin-layout .table-responsive {
    overflow: visible !important;
}

/* Pokaż duże zdjęcie, gdy mysz jest nad wrapperem */
.photo-wrapper:hover .log-photo-zoom {
    display: block;
}

/* Placeholder (ikona aparatu gdy brak zdjęcia) */
.photo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 22px;
    color: #888;
    border: 1.4px solid #f8f9fa;
    margin: 0 auto;
    cursor: default;
}

/* ============================================================
   6. ZEBRA STRIPING (NAPRZEMIENNE KOLORY WIERSZY)
   ============================================================ */

/* Co drugi wiersz (parzysty) otrzymuje lekko szary kolor */
.table-modern tbody tr:nth-child(even) td {
    background-color: #efefef;
}

/* Wiersz nieparzysty zostaje biały (domyślnie), ale dla pewności: */
.table-modern tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

/* WAŻNE: Wiersz dodawania nowego pracownika musi zachować swój zielony kolor */
#new-user-row td {
    /* background-color: #c3cf4c73 !important; */
            background-color: #f0fdf4 !important;
            overflow: visible !important; 
}

/* Efekt HOVER (po najechaniu) musi być silniejszy (ciemniejszy), 
   żeby odróżniał się od szarego paska zebry */
.table-modern tr:hover td {
    background-color: #dce8a8 !important;
    transition: background-color 0.2s ease;
}
/* ============================================================
   7. NOWOCZESNE USTAWIENIA (ADMIN SETTINGS)
   ============================================================ */

/* Kafelki wyboru (zamiast zwykłych radio buttonów) */
.opt-label {
    cursor: pointer;
    width: 100%;
    margin: 0;
}

/* Ukrywamy prawdziwy input radio */
.opt-input {
    display: none;
}

/* Wygląd kafelka */
.opt-card {
    display: flex;
    text-align: left;
    gap: 15px;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: #f1f1f1;
    position: relative;
    overflow: hidden;
}

/* Stan: Najechany */
.opt-label:hover .opt-card {
    background: #fdfdfd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Stan: Zaznaczony (CHECKED) */
.opt-input:checked + .opt-card {
    background: #769dc76e;
    box-shadow: 0 4px 12px rgba(118, 157, 199, 0.2);
}

/* Ikona w kafelku */
.opt-icon {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: background 0.2s;
}

.opt-input:checked + .opt-card .opt-icon {
    background: #769dc7;
    color: #fff;
}

/* Teksty w kafelku */
.opt-info b { display: block; font-size: 1rem; color: #333; margin-bottom: 2px; }
.opt-info span { display: block; font-size: 0.8rem; color: #333333; line-height: 1.3; }

/* Przycisk Terminala */
.btn-terminal {
    background: #374859;
    color: white;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    /* transition: all 0.2s; */
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.3);
}
.btn-terminal:hover {
    background: #769dc7;
}
        .folder-option {
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;	
            align-items: center;
            gap: 15px;
            transition: 0.2s;
        }
        .folder-option:hover { border-color: #769dc7; background: #769dc76e; }
        .folder-option input { width: 20px; height: 20px; cursor: pointer; }

/* ============================================================
   8. ZAKŁADKI RCP I LEWE POWIADOMIENIA
   ============================================================ */

/* Kontener zakładek */
.rcp-tabs {
    display: flex;
    gap: 10px;
}

/* Przycisk zakładki */
.rcp-tab-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

/* Stan aktywny i hover */
.rcp-tab-btn:hover {
    background: #f8f9fa;
    border-color: #769dc7;
}

.rcp-tab-btn.active {
    background: #769dc7;
    color: #fff;
    border-color: #769dc7;
    box-shadow: 0 4px 10px rgba(118, 157, 199, 0.3);
}

/* Kontener na powiadomienia z LEWEJ strony */
#toast-container-left {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Lewy dolny róg */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Styl lewego toasta - BAZA */
.toast-left {
    /* Domyślne wartości, nadpisywane przez .in/.out */
    background-color: #fff !important; 
    color: #333 !important; /* Ciemny tekst dla jasnego tła */
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Delikatniejszy cień */
    min-width: 300px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Wariant WEJŚCIE */
.toast-left.in {
    background-color: #d3ebd5 !important;
    border-left: 8px solid #9fcba3 !important; /* Ciemniejsza zieleń */
}

/* Wariant WYJŚCIE */
.toast-left.out {
    background-color: #f5d4d1 !important;
    border-left: 8px solid #d49a96 !important; /* Ciemniejsza czerwień */
}

.toast-left.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-left-icon {
    font-size: 1.8rem;
}
input#rcp-lookback {
    text-align: end;
    width: 60px;
    height: 30px;
}

/* ============================================================
   9. ZEGAR W PANELU ADMINA
   ============================================================ */

.admin-clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Pozycjonowanie absolutne na środku, żeby nie przesuwało innych elementów */
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
}

.admin-clock-time {
    font-size: 2.5rem;
    font-weight: 500;
    color: #333333;
    font-variant-numeric: tabular-nums; /* Zapobiega skakaniu cyfr */
    letter-spacing: 1px;
}

.admin-clock-sec {
    font-size: 2rem;
    color: #c86d66;
    font-weight: 400;
}

.admin-clock-date {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #769dc7; /* Twój kolor przewodni */
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

/* Ukrywamy zegar na małych ekranach, żeby nie zasłaniał przycisków */
@media (max-width: 992px) {
    .admin-clock-container {
        display: none;
    }
}

.btn-group-toggle.d-flex.flex-wrap.gap-2 label {
    font-size: 15px !important;
    height: 80px;
    width: 100%;
}
span.badge.bg-warning.text-dark.fs-2.px-4.py-2.mt-1.shadow-sm {
    font-size: 20px;
    letter-spacing: 8px;
    font-family: monospace;
    background-color: #ffffff !important;
    color: #333333 !important;
}
/* Stopka z wersją w Sidebarze */
.sidebar-version {
    padding: 6px 3px 25px 3px;
    text-align: center;
    font-size: 0.8rem;
    color: #769dc7;
    /* font-weight: 500; */
    letter-spacing: 0.5px;
    background-color: transparent;
    border-top: 1px solid rgba(118, 157, 199, 0.1);
    flex-shrink: 0;
}

/* Wersja zwinięta (ukrywamy tekst lub zmniejszamy) */
.sidebar.collapsed .sidebar-version {
    font-size: 0.7rem;
    padding: 4px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* --- LICZNIK AUTOWYLOGOWANIA --- */
#logout-timer {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background-color: #c86d66;
    color: #ffffff;
    border: 1px solid #a8524b;
    padding: 2px 15px;
    /* border-radius: 6px; */
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    animation: pulse-timer 1s infinite;
}

@keyframes pulse-timer {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

/* Opcjonalnie: pulsowanie gdy zostało mało czasu */
@keyframes pulse-red {
    0% { color: #769dc7; }
    50% { color: #c86d66; } /* Ostrzegawczy czerwony */
    100% { color: #769dc7; }
}

/* Upewnij się, że rodzic ma position relative (powinien już mieć, ale dla pewności) */
.sidebar-logo-container {
    position: relative; 
}
/* --- PODŚWIETLENIE OBECNEGO DNIA --- */
.cal-day.is-today {
    box-shadow: inset 0 0 0 2px #F44336 !important;
    outline: 1px solid #F44336 !important;
    z-index: 10; /* Żeby ramka była nad sąsiednimi elementami */
}

/* --- GODZINY W KALENDARZU (Prawy Górny Róg) --- */
.cal-rcp-time {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #2c3e50;
    z-index: 6; /* Nad numerem dnia */
    background: rgba(255,255,255,0.9); /* Lekkie tło dla czytelności */
    padding: 0 5px;
}

/* Styl dla aktywnego pracownika (w trakcie pracy) */
.cal-rcp-time.active {
    color: #c86d66;
    font-style: italic;
}



/* --- TABELA RCP (POD KALENDARZEM) - BEZ ZEBRY --- */
#rcp-month-table tr:nth-child(even) td,
#rcp-month-table tr:nth-child(odd) td {
    background-color: transparent; /* Resetujemy tło, żeby działało to ustawione w JS */
}

/* Wymuszamy, aby styl nadany przez JS (weekendy) był widoczny */
#rcp-month-table tr[style*="background-color"] td {
    background-color: inherit;
}
div#calendar-details-panel {
    max-width: 1150px;
    padding-bottom: 50px;
    margin-top: 20px !important;
}
/* --- WYŁĄCZENIE ZAOKRĄGLEŃ DLA TABELI POD KALENDARZEM --- */
#calendar-details-panel .table-responsive {
    border-radius: 0 !important;
}

/* Opcjonalnie: jeśli karta też ma zaokrąglenia na dole, a chcesz je usunąć */
#calendar-details-panel .card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* --- FILTRY W WIDOKU LISTY --- */
.filter-pill {
    border: 1px solid transparent;
    /* border-radius: 20px; */
    padding: 3px 15px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.5;
    background-color: #f1f3f5;
    color: #888;
}

/* Stan aktywny (włączony) */
.filter-pill.active {
    opacity: 1;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Kolory poszczególnych filtrów (gdy aktywne) */
.pill-uw.active   { background-color: #769dc7; border-color: #769dc7; }
.pill-past.active { background-color: #a2bcd8; border-color: #a2bcd8; }
.pill-care.active { background-color: #77a9b1; border-color: #77a9b1; }
.pill-sick.active { background-color: #dc8882; border-color: #dc8882; }
.pill-other.active { background-color: #e9cd7b; border-color: #e9cd7b; color: #555; } /* Inne ma ciemny tekst dla kontrastu */

.filter-pill:hover {
    transform: translateY(-1px);
}

/* --- STYLE DLA MODALA EDYCJI RCP --- */
.rcp-edit-row {
    background: #f8f9fa;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.rcp-edit-row:hover {
    background: #fff;
    border-color: #ccc;
}


/* WEJŚCIE - Kolorujemy TYLKO select i input */
.rcp-row-in select, 
.rcp-row-in input {
    background-color: #d3ebd5 !important; /* Zielony */
    border-color: #8bc34a !important;
    color: #000 !important;
}

/* WYJŚCIE - Kolorujemy TYLKO select i input */
.rcp-row-out select, 
.rcp-row-out input {
    background-color: #f5d4d1 !important; /* Czerwony */
    border-color: #e57373 !important;
    color: #000 !important;
}

/* Przycisk ołówka w tabeli */
button.btn.btn-sm.btn-link.p-0.text-primary {
    text-decoration: none;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: 0.2s;
}
button.btn.btn-sm.btn-link.p-0.text-primary:hover {
    opacity: 1;
    transform: scale(1.2);
}
/* --- STYLIZACJA MODALA RCP --- */



/* 4. PRZYCISK KOSZA - Zawsze standardowy czerwony (niezależny od typu wiersza) */
.rcp-edit-row .btn-outline-danger {
    color: #fff !important;
    border-color: #dc3545 !important;
    background-color: #c9625b !important;
    opacity: 1 !important;
    font-size: 20px;
}

/* 5. Hover dla kosza (taki jak ustalałeś wcześniej) */
.rcp-edit-row .btn-outline-danger:hover {
    color: #dc3545 !important;
    background-color: transparent !important;
    border-color: #c9625b !important;
}


/* 2. Przycisk DODAJ WPIS (Kreskowany) - Hover jak przycisk Zapisz */
.btn-dashed {
    border: 1.5px dashed #ccc;
    background-color: #f8f9fa;
    color: #666;
    transition: all 0.2s ease;
    /* margin: 20px; */
}

.btn-dashed:hover {
    background: #cddc39 !important; /* Limonka (jak Twój btn-success) */
    color: #333333 !important;
    border-style: solid;      /* Linia ciągła */
    border-color: #cddc39;
    text-shadow: 0px 0px 0px #05050575;
}
/* --- NOWY STYL DATY W TABELI RCP --- */

.rcp-date-cell {
    cursor: pointer; /* Kursor rączki na całej komórce */
    transition: background-color 0.2s;
}

/* Kontener trzymający datę i ołówek */
.rcp-date-trigger {
    display: flex;
    align-items: center;
    gap: 5px; /* Odstęp między datą a ołówkiem */
    font-weight: 500;
    color: #6c757d; /* Domyślny kolor (text-muted) */
    transition: all 0.1s ease-in-out;
    padding-left: 5px;
}

/* Ołówek - domyślnie ukryty (lub bardzo blady) */
.rcp-pencil-icon {
    opacity: 0; /* Niewidoczny */
    transform: translateX(-5px); /* Lekko przesunięty w lewo */
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

/* --- EFEKT HOVER (NAJAZD MYSZKĄ) --- */

/* Gdy najedziesz na komórkę tabeli (td): */
.rcp-date-cell:hover .rcp-date-trigger {
    color: #ff5722 !important; /* Twój kolor pomarańczowy */
    font-weight: 600 !important; /* Pogrubienie */
}

/* Pokaż ołówek i przesuń go na miejsce */
.rcp-date-cell:hover .rcp-pencil-icon {
    opacity: 1;
    transform: translateX(0);
    color: #ff5722;
}
select.form-select.form-select-sm.rcp-type {
    width: 100%;
    height: 42px;
}
button.btn-close {
    width: 30px;
    height: 30px;
    margin: 30px 0px 20px 0px;
    background-color: #4d4d4d;
    color: #ffffff;
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid #4d4d4d;
}
button.btn-close:hover {
    background-color: #f0f0f0;
    color: #4d4d4d;
    border: 1px solid #4d4d4d;
}
button.btn.btn-sm.btn-outline-danger.border-0 {
    padding: 0.375rem 0.75rem;
}

/* --- FORMATOWANY NOTATNIK --- */

/* Pasek narzędzi */
.notepad-toolbar {
    background: #f1f3f5;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    display: flex;
    gap: 5px;
}

.notepad-toolbar button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notepad-toolbar button:hover {
    background: #e9ecef;
    border-color: #bbb;
}

.notepad-toolbar button:active {
    background: #dcdcdc;
    transform: translateY(1px);
}

/* Edytowalny obszar (DIV zamiast Textarea) */
.note-area-div {
    background-color: #fffbe6; /* Kolor żółtej kartki */
    border: 1px solid #dfd7ca;
    min-height: 200px;
    max-height: 400px;
    padding: 10px;
    font-size: 0.9rem;
    overflow-y: auto;
    outline: none;
    white-space: pre-wrap; /* Zachowuje entery i spacje */
    cursor: text;
}

/* Kiedy klikniemy w pole */
.note-area-div:focus {
    border-color: #769dc7;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* Dostosowanie body notatnika */
.notepad-body {
    padding: 0 !important; /* Reset, bo padding jest teraz w toolbarze i polu */
}
.notepad-body form {
    padding: 10px; /* Padding dla przycisku Zapisz */
}
.card.shadow-lg.border-0 {
    border: none;
    width: 450px;
    max-width: 95%;
    overflow: hidden !important;
    border-radius: 8px;
}
.alert.alert-secondary.py-2.small.mb-3.text-center {
    margin-top: 1rem !important;
}

/* --- WYŁĄCZENIE EFEKTÓW DLA STATYCZNYCH NAGŁÓWKÓW --- */

.notepad-header.static {
    cursor: default !important; /* Zwykła strzałka zamiast rączki/krzyżyka */
}

/* Blokada zmiany koloru tła po kliknięciu */
.notepad-header.static:active {
    background: #374859 !important; /* Zostaje ten sam kolor co w spoczynku */
    cursor: default !important;
}

div#rcp-rows-container {
    max-height: 443px;
    overflow-y: auto;
    padding-right: 5px;
}
.rcp-alert {
    color: red;  /* Wymuszamy czerwień */
    font-weight: 700;       /* Pogrubienie (Bold) */
}
button.btn.btn-sm.btn-link.text-primary.p-0 {
    padding: 0.375rem 0.75rem;
}
/* --- KOLOROWANIE DNI Z OBECNOŚCIĄ (NADPISUJE URLOPY) --- */
.cal-day.has-rcp {
    background-color: #d3ebd5 !important; /* Twój zielony */
    border-color: #c5d686 !important;     /* Dopasowana ramka */
    color: #333 !important;               /* Ciemny tekst dla czytelności */
}

/* Opcjonalnie: Jeśli najedziesz myszką, też ma zostać zielony (lub lekko ściemnieć) */
.cal-day.has-rcp:hover {
    background-color: #CDDC39 !important;
}

/* Opcjonalnie: Jeśli dzień ma RCP, to marker typu (np. "U", "L4") 
   nadal będzie widoczny, ale tło kafelka będzie zielone. 
   Jeśli chcesz ukryć marker przy obecności, odkomentuj poniższe: */
/* .cal-day.has-rcp .marker-trigger { display: none !important; } */

/* --- ZAZNACZANIE DNI W KALENDARZU --- */

/* Styl zaznaczonego dnia - identyczny jak hover */
.cal-day.is-selected {
    background-color: #CDDC39 !important;
    color: #182429 !important;
    text-shadow: 0 0 0.5px currentColor, 0 0 0px currentColor !important;
    z-index: 60 !important; /* Nieco niżej niż hover (70), żeby hover nadal był "nad" */
    transform: none !important;
    /* box-shadow: inset 0 0 0 2px #4CAF50 !important; */
    border: none !important;
}

/* Jeśli zaznaczony dzień jest jednocześnie najechany myszką, dajemy priorytet hoverowi */
.cal-day.is-selected:hover {
    z-index: 70 !important;
}

/* --- EFEKT KLIKNIĘCIA (NACIŚNIĘCIA) KAFELKA --- */
.cal-day:active {
    /* 1. Zmiana koloru na moment kliknięcia (szaro-niebieski odcień) */
    background-color: #CDDC39 !important;
    
    /* 2. Efekt wciśnięcia (lekki zoom w dół) */
    transform: scale(0.96); 
    
    /* 3. Natychmiastowa reakcja */
    transition: all 0.05s ease-out;
    
    /* 4. Zapewnienie, że wciśnięty kafelek jest na wierzchu */
    z-index: 200 !important; 
    
    /* 5. Opcjonalnie: zmiana ramki na ciemniejszą */
    outline-color: #546e7a !important;
}


.cal-day.empty:active {
    outline-color: #ffffff00 !important;
    background-color: #ffffff00 !important;
}


/* --- ZMNIEJSZENIE PÓL W ZAKŁADCE KADRY --- */
#view-hr input.form-control {
    max-width: 150px !important; /* Wymuszamy szerokość */
    /* display: inline-block; */       /* Żeby nie rozciągało się na siłę */
    text-align: center;
}

/* Opcjonalnie: Zmniejszenie odstępów między etykietą a polem */
#view-hr .col-md-4 {
    /* display: flex; flex-direction: column; align-items: flex-start; */ 
    /* Powyższe odkomentuj tylko jeśli pola uciekną za bardzo w prawo */
}
input.form-control.fw-bold {
    width: 105px;
    padding-left: 10px;
    text-align: left;
}
/* --- PODGLĄD PRZECIĄGANIA (DRAG SELECTION) --- */
.cal-day.drag-preview {
    background-color: #e2e6ea !important; /* Jasnoszary podgląd */
    outline: 2px dashed #374859 !important; /* Przerywana linia */
    cursor: cell !important;
}
.card-body.p-0 {
    padding: 10px;
}

/* Styl dla Przełącznika (Switch) */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            vertical-align: middle;
            margin-right: 15px;
        }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute; content: "";
            height: 18px; width: 18px;
            left: 4px; bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider { background-color: #769dc7; }
        input:checked + .slider:before { transform: translateX(24px); }
        
        /* Kontener opcji */
        .setting-row {
            display: flex;
            align-items: center;
            padding: 20px;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 15px;
            transition: 0.2s;
            text-align: left;
            gap: 5px;
        }
        .setting-row:hover {
            border-color: #769dc7;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .setting-label {
            font-weight: 600;
            color: #343a40;
            font-size: 1rem;
        }
        .setting-desc {
            font-size: 0.85rem;
            color: #c86d66; /* Czerwonawy dla uwagi */
            margin-top: 4px;
        }

.card.shadow-lg {
    width: 900px;
    max-width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

        .actions-cell .action-btn-minimal {
            width: 36px !important;
            height: 36px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            margin: 0 !important;
        }

.actions-cell .action-btn-minimal btn-delete button {
    background-color: #c86d66;
    color: #ffffff;
}
        .actions-cell, th.col-act, th.col-arch-act {
            overflow: visible !important; /* Pozwól tooltipom wystawać */
            padding: 0 !important; /* Pozwala wrapperowi wypełnić komórkę */
        }
.alert.alert-light.border.small.text-center.mb-4.shadow-sm {
    text-align: center;
    font-size: 1.5em;
    padding: 0 30px;
}

/* Submenu rozwijane w prawo */
.settings-option.has-submenu {
    position: relative;
    padding: 0 50px 0 20px;
}
.settings-option.has-submenu::after {
    content: '▶';
    position: absolute;
    right: 10px;
    font-size: 0.6rem;
    opacity: 0.5;
}

.settings-submenu {
    display: none;
    position: absolute;
    left: 100%; /* Rozwijanie w prawo */
    top: 0;
    background: #34495e;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px;
    width: 160px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    z-index: 1000;
}

.settings-option.has-submenu:hover .settings-submenu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-submenu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}

/* Logika widoczności spanów w badge */
.user-hours-badge {
    display: none; /* Pokazujemy tylko gdy choć jeden licznik jest aktywny */
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

/* Pogrubienie samych liczb */
.user-hours-badge span b {
    font-weight: 600; /* Bardzo wyraźne liczby */
    color: inherit;   /* Dziedziczy kolor od spana */
}

/* Opcjonalnie: jeszcze mocniejsze wyróżnienie dla aktywnego pracownika */
.user-item-btn.active .user-hours-badge span b {
    color: #1a252f;      /* Czarny kolor dla samych liczb na jasnej pigułce */
}

.user-item-btn.active .user-hours-badge span {
    background: #a2bcd8;
    color: #1a252fa1;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Wymuszamy pokazanie KONKRETNEGO licznika, gdy włączona jest opcja w menu */
#mainSidebar.show-h-msc .h-msc { display: inline-block !important; }
#mainSidebar.show-h-tyg .h-tyg { display: inline-block !important; }
#mainSidebar.show-h-dzn .h-dzn { display: inline-block !important; }

/* Ukrywanie nowych liczników godzin w trybie zwiniętym */
.sidebar.collapsed .user-hours-badge,
.sidebar.collapsed .h-msc,
.sidebar.collapsed .h-tyg,
.sidebar.collapsed .h-dzn {
    display: none !important;
}

/* Dodatkowo upewnijmy się, że submenu nie wyskakuje na zwiniętym pasku, 
   bo i tak ukrywamy sekcję ustawień listy (settings-group) */
.sidebar.collapsed .settings-option.has-submenu {
    display: none !important;
}

#cal-context-menu {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-radius: 3px;
    
    /* POPRAWKA SZEROKOŚCI */
    width: 230px;         /* Stała, zgrabna szerokość */
    max-width: 230px;
    overflow: hidden;
    padding: 5px 0;      /* Odstęp wewnątrz pionowy */
}

#cal-context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    
    /* POPRAWKA PADDINGU */
    padding: 6px 14px;
    transition: background 0.2s;
}

#cal-context-menu button:hover {
    background-color: #f1f5f9;
    color: #333333;
    font-weight: bold;
}

#cal-context-menu hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* --- NOWE POZYCJONOWANIE W KAFELKU --- */

/* Kontener w lewym górnym rogu */
.day-top-left {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 6px; /* Odstęp między numerem a ikonami */
    z-index: 10;
    pointer-events: none; /* Żeby kliknięcie w numer nie blokowało kliknięcia w kafelek */
}

/* Resetujemy pozycję numeru dnia, bo teraz zarządza nią Flexbox */
.cal-day .day-num {
    position: static !important; /* Wyłączamy absolute */
    margin: 0 !important;
}

/* Kontener na ikonki (koperta, wykrzyknik) */
.day-indicators {
    display: flex;
    align-items: center;
    gap: 3px; /* Odstęp między samymi ikonami */
    pointer-events: auto; /* Ikony (np. z tooltipem) muszą reagować na mysz */
}

/* Stylizacja Wykrzyknika */
.mini-icon-flag {
    background-color: #FFC107 !important; /* Żółty */
    color: #000 !important;               /* Czarny tekst */
    border: 1px solid rgba(0,0,0,0.1);
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

/* Stylizacja Koperty */
.mini-icon-note {
    background-color: #8BC34A !important; /* Zielony */
    color: #fff !important;               /* Biały tekst */
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s;
}
.mini-icon-note:hover {
    color: #769dc7;
    transform: scale(1.2);
}

.mini-icon-flag, .mini-icon-note {
    width: 15px;
    height: 20px;
    display: inline-flex;       /* Żeby układały się obok siebie */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Cień */
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 1px;            /* Drobna korekta wyrównania względem numeru dnia */
}

.mini-icon-flag:hover, .mini-icon-note:hover {
    transform: scale(1.15);
    z-index: 100; /* Wyciągnij na wierzch */
}

/* Uwaga: Nadpisujemy stary hover dla notatki, żeby nie zmieniał koloru tekstu na niebieski */
.mini-icon-note:hover {
    color: #fff !important;
}

/* Upewniamy się, że czas RCP nie wchodzi na ikony (opcjonalne, ale bezpieczne) */
.cal-rcp-time {
    z-index: 5; /* Niżej niż ikony */
}

/* Styl przycisków w menu kontekstowym */
#cal-context-menu button.ctx-opt {
    position: relative;
    border-left: 5px solid transparent; /* Rezerwujemy miejsce na pasek */
    transition: all 0.2s;
}

/* Kolory pasków (identyczne jak w add-dropdown) */
#cal-context-menu button.opt-uw { border-left-color: #769dc7 !important; }
#cal-context-menu button.opt-past { border-left-color: #a2bcd8 !important; }
#cal-context-menu button.opt-care { border-left-color: #77a9b1 !important; }
#cal-context-menu button.opt-sick { border-left-color: #dc8882 !important; }
#cal-context-menu button.opt-other { border-left-color: #e9cd7b !important; }

/* Efekt najechania: lekkie tło i wysunięcie */
#cal-context-menu button.ctx-opt:hover {
    background-color: #f1f3f5;
    padding-left: 20px; /* Dodatkowe wcięcie animowane */
}

button.btn.btn-sm.btn-dashed.w-100.mt-3 {
    margin: 20px;
}

/* --- ŚWIĘTA W KALENDARZU --- */
.cal-day.is-holiday .day-num {
    color: #c86d66 !important; /* Czerwony numer dnia */
    font-weight: bold;
}

.cal-day.is-holiday {
    background-color: #eed3d1; /* Bardzo jasny czerwony tła */
}

/* Jeśli dzień świąteczny jest jednocześnie weekendem, niech czerwony tła wygra z szarym */
.cal-day.weekend.is-holiday {
    background-color: #eed3d1;
}

/* Jeśli na święto nałożymy urlop, urlop ma priorytet tła, ale numer dnia może być czerwony */
.cal-day.is-holiday.has-meta .day-num {
    /* Zachowuje kolor */
}

label.btn.btn-outline-secondary.btn-sm.flex-grow-1 {
    margin-top: 10px;
    height: 70px;
}
h5.mb-0.text-dark {
    margin: 0px;
}

.card-header.bg-white.border-bottom.d-flex.justify-content-between.align-items-center.p-3 {
    background-color: #374859;
    color: white;
}

/* Stylizacja inputa z "??:??" w edycji RCP */
input.rcp-time[type="text"] {
    font-family: monospace;
    letter-spacing: 2px;
    text-align: center;
    color: #6c757d; /* Szary kolor znaków zapytania */
    cursor: text;
}

/* Po kliknięciu zamienia się w time, więc wraca do normy */
input.rcp-time[type="time"] {
    /* Standardowy wygląd */
}
.card-body.p-4 {
    padding: 1rem 2rem 2rem 2rem !important;
}

button.btn.btn-sm.btn-link.text-decoration-none.text-dark.fw-bold.px-2 {
    height: 25px;
    width: 70px;
    padding: 0px;
}

/* Nowy styl tekstu nawigacji */
#calendar-month-display {
    transition: color 0.2s, transform 0.1s;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
}
#calendar-month-display:hover {
    color: #5a8ab5 !important;
    text-decoration: none;
}
#calendar-month-display:active {
    transform: scale(0.96);
}

/* Ukrycie przycisku "Wyczyść" (krzyżyka) w natywnym kalendarzu */
input[type="month"]::-webkit-clear-button,
input[type="month"]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

/* Dodatkowe zabezpieczenie dla inputa w nawigacji */
#month-picker {
    cursor: pointer;
}
/* Efekt najechania na datę */
#calendar-nav label:hover #calendar-month-display {
    color: #5a8ab5 !important;
}

/* Ukrycie przycisku "Wyczyść" i spinnerów w inpucie */
input[type="month"]::-webkit-clear-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-calendar-picker-indicator {
    /* Ukrywamy wszystko w środku inputa, bo i tak jest przezroczysty */
    /* Ale display:none dla indicatora może zablokować kliknięcie w Chrome, więc: */
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top:0; left:0;
}

/* Specjalne ukrycie krzyżyka (Wyczyść) */
input[type="month"]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}
span.badge.bg-sick.text-white {
    background-color: #d1817b !important;
    color: white !important;
}
/* --- STYL STRON BŁĘDÓW (404, 500, itp.) --- */
body.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.error-container {
    background: #fff;
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    max-width: 480px;
    width: 90%;
    border-top: 6px solid #769dc7; /* Twój kolor firmowy */
}

.error-code {
    font-size: 5rem;
    font-weight: 800;
    color: #769dc7;
    margin: 0;
    line-height: 1;
    opacity: 0.8;
}

.error-title {
    font-size: 1.5rem;
    color: #333;
    margin: 15px 0 10px;
    font-weight: 600;
}

.error-desc {
    color: #666;
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.5;
}

.btn-home {
    display: inline-block;
    padding: 12px 24px;
    background-color: #769dc7;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-home:hover {
    background-color: #5a7ea6;
}

/* Wspólne style nagłówka w modalu komentarzy */
#comment-modal-date, #reason-modal-date {
    padding: 12px;
    border-radius: 6px;
    display: block;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 5px;
}

/* Wariant dla Wiadomości RCP */
.modal-header-rcp {
    background-color: #8bc34a !important;
    color: #ffffff !important;
    font-weight: normal !important;
}

/* Wariant dla Tagu Admina */
.modal-header-tag {
    background-color: #ffc107 !important;
    color: #333333 !important;
    font-weight: normal !important;
}

/* Wariant dla Powodu "Inne" */
.modal-header-other {
    background-color: #e9cd7b !important;
    color: #333333 !important;
    font-weight: normal !important;
}

/* Blokada zmiany koloru na ciemnoniebieski po kliknięciu w pasek */
#reasonModal .notepad-header.static:active {
    background-color: #e9cd7b !important;
}

div#calendar-toolbar {
    margin: 5px 10px !important;
}

/* Główny kontener z godzinami */
.cal-range-display {
    display: none; /* Ukryte domyślnie */
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Wyśrodkowanie */
    
    font-weight: 400;
    color: #333; /* Ciemny szary tekst */    
    white-space: nowrap;
    z-index: 20;
    pointer-events: auto;
    
    /* DOMYŚLNA CZCIONKA (Gdy tylko jedna linia) */
    font-size: 0.95rem;
}

/* Wariant POMNIEJSZONY (Gdy są cykle x2, x3...) - dodawana przez JS */
.cal-range-display.is-multi {
    font-size: 0.85rem;
}

/* Klasa włączająca widoczność */
.show-rcp-times .cal-range-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Znacznik Multi (samo x2, x3...) */
.rcp-multi-badge {
    background-color: #374859;
    color: #fff;
    padding: 0 3px 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
    margin-left: 2px;
    cursor: help;
    text-shadow: none;
    transition: transform 0.2s;
}

.rcp-multi-badge:hover {
    transform: scale(1.2);
    background-color: #769dc7;
}

/* Tooltip (Lista szczegółów) */
.custom-tooltip:hover::after {
    white-space: pre-wrap !important;
    text-align: center;
    z-index: 1000;
}

/* Reset markera (żeby nie uciekał) */
.show-rcp-times .marker-trigger {
    bottom: 3px !important;
    right: 3px !important;
    transform: none !important;
}
/* --- IKONA OSTRZEGAWCZA (STATYCZNA, ZAWSZE WIDOCZNA) --- */

/* 1. Poprawka rodzica (Przycisk pracownika) */
/* To sprawia, że ikona "trzyma się" kafelka i jest zawsze widoczna */
.user-item-btn {
    position: relative !important; 
    overflow: visible !important;
    z-index: 1; 
}

/* 2. Styl ikony */
.sidebar-warning-icon {
    margin-right: 3px !important; /* Odstęp od nazwiska */
    margin-top: -5px !important;
}

/* W trybie zwiniętym (wąskim) ikona wraca do rogu, żeby nie psuć układu */
.sidebar.collapsed .sidebar-warning-icon {
    position: absolute !important;
    top: 4px !important;
    right: 5px;
    margin: 0 !important;
    font-size: 0.8rem;
}

/* Ukrycie tooltipów (zabezpieczenie, gdyby jakieś style zostały) */
.sidebar-warning-icon::after,
.sidebar-warning-icon::before {
    display: none !important;
}

/* --- CZERWONE OKNO ALERTÓW KADROWYCH --- */

/* Tło (Overlay) - kliknięcie w nie zamyka okno */
.alert-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Ciemne tło */
    z-index: 99999; /* Najwyżej na stronie */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Rozmycie tła pod spodem */
    animation: fadeIn 0.3s ease;
}

/* Zawartość okna */
.alert-modal-box {
    background-color: #c86d66; /* Czerwone tło (Twój kolor warning) */
    color: #fff;
    width: 100%;
    max-width: 500px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    border: 2px solid #e57373;
    animation: slideInDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 15px;
}

.alert-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.alert-modal-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 1.1rem;
    border-left: 5px solid #fff;
}

.alert-modal-item b {
    color: #ffebee; /* Jasny różowy dla daty */
}

.alert-modal-hint {
    margin-top: 25px;
    font-size: 0.85rem;
    opacity: 0.8;
    cursor: pointer;
}

/* Animacje */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideInDown { from { transform: translateY(-50px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* --- STYLE DLA POWIADOMIEŃ (TOAST) --- */

#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toast-message {
    min-width: 320px;
    max-width: 450px;
    padding: 15px 20px;
    margin-bottom: 12px;
    
    /* Wygląd */
    background-color: #343a40; /* Domyślny ciemny */
    color: #ffffff;
    border-radius: 8px; /* Zaokrąglone rogi */
    box-shadow: 0 8px 24px rgba(0,0,0,0.25); /* Nowoczesny cień */
    
    /* Tekst */
    font-size: 1.2rem;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.1;
    
    /* Animacja startowa (niewidoczny i przesunięty) */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysty efekt */
    
    position: relative;
    z-index: 9999;
}

/* Klasa dodawana przez JS, żeby pokazać dymek */
.toast-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Wariant OSTRZEGAWCZY (Czerwony) */
.toast-message.warning {
    background-color: #c86d66;
    border-left: 5px solid #ef1100;
}

/* Wariant SUKCES (Zielony - opcjonalnie) */
.toast-message.success {
    background-color: #28a745;
}
div#toast-container small {
    font-size: 1.1rem;
    padding-left: 32px;
}
button.btn.btn-sm.btn-light.border.shadow-sm {
    border: 1px solid #78b07e;
    margin-right: -7px;
}
.btn-advance-delete {
    font-size: 1.4rem;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-advance-delete:hover {
    color: #ff0000 !important;
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px rgba(255,0,0,0.3));
}
.mt-3.pt-2.border-top-dashed {
    text-align: center;
    font-weight: 600;
    padding-bottom: 10px;
}

/* Style dla filtrów w nagłówku audytu */
.audit-filter-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 5px;
    min-width: 230px; /* Zapobiega skakaniu przy zmianie miesiąca */
}
.audit-filter-date button {
    background: none;
    border: none;
    cursor: pointer;
    color: #769dc7;
    font-weight: bold;
    padding: 0 8px;
}
.date-selectors {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    position: relative;
    flex-grow: 1;
    justify-content: center; /* Centruje napisy między strzałkami */
}
.date-selectors span {
    display: inline-block;
    min-width: 40px; /* Minimalna szerokość dla Roku */
    text-align: center;
}

#audit-month-label {
    min-width: 90px; /* Stała szerokość pod najdłuższy polski miesiąc */
}

.date-selectors span, .audit-filter-select span {
    cursor: pointer;
    color: #333;
    font-weight: 600;
    font-size: 1.2rem;
}
.date-selectors span:hover { color: #769dc7; }

.audit-filter-select {
    position: relative;
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    text-align: center;
}

/* Zwiększamy wysokość, aby zmieścić 12 miesięcy bez scrolla */
.audit-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 150px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 500px; /* Zwiększone z 300px, żeby nie było scrolla */
    overflow-y: visible; /* Pozwalamy treści się wyświetlić */
    text-align: left;
}

/* Klasa dla wybranego elementu na liście */
.audit-dropdown-list div.selected {
    font-weight: bold !important;
    background-color: #f1f5f9;
    color: #769dc7;
}

.audit-dropdown-list div {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.audit-dropdown-list div {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: normal;
    color: #333;
}
.audit-dropdown-list div:hover {
    background: #f1f5f9;
    color: #769dc7;
}
.audit-dropdown-list .opt-all {
    font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #2c3e50;
}
.audit-filter-select, .audit-filter-date {
    position: relative !important;
    overflow: visible !important;
}

/* KOMPLETNY KOD DLA FILTRÓW AUDYTU 0.75rem */
#audit-table-main .audit-filter-select,
#audit-table-main .audit-filter-select span,
#audit-table-main #filter-user-label,
#audit-table-main #filter-action-label,
#audit-table-main .audit-filter-date,
#audit-table-main .date-selectors span {
    font-size: 0.75rem !important;
    line-height: 1.2;
}

#audit-table-main .audit-filter-select {
    padding: 3px 5px !important;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#audit-table-main .audit-dropdown-list div {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
}

#audit-table-main .audit-filter-date button {
    font-size: 0.7rem;
}
/* Poprawka dla inputa w rzędzie ustawień */
.setting-row .form-control {
    border-color: #ccc;
    background: #f8f9fa;
}
.setting-row .form-control:focus {
    border-color: #769dc7;
    background: #fff;
}
/* KOREKTA WCIĘĆ DLA LIST W NOTATNIKU */
.note-area-div ul, 
.note-area-div ol {
    padding-left: 20px !important; /* Zmniejszamy wcięcie z domyślnych 40px na 20px */
    margin-top: 5px;
    margin-bottom: 5px;
}

.note-area-div li {
    margin-bottom: 2px; /* Drobny odstęp między punktami dla czytelności */
}

/* ==========================================================================
   FINALNA WERSJA STYLIZACJI LISTY - METODA BLOKOWA (STABILNA)
   ========================================================================== */

/* 1. Styl aktywnego linku w menu (SPA) */
.sidebar-btn.active-page {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding-left: 20px;
    border-left: 4px solid #769dc7 !important;
}

/* 2. Pasek postępu ładowania */
#nav-progress-bar {
    box-shadow: 0 0 10px #769dc7;
}

/* 3. BAZA DLA WSZYSTKICH SZCZEGÓŁÓW (W TYM GODZIN) */
.user-vacation-info,
.user-context-info,
.user-hours-badge {
    /* Zawsze w strukturze DOM jako blok - tak jak inne elementy */
    display: block !important;
    
    /* Ukryte "na start" */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    
    /* Reset marginesów/paddingów dla stanu zerowego */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Animacja */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding-top 0.3s ease-out;
}

/* 4. STYLIZACJA WNĘTRZA BADGE'A GODZIN (BEZ FLEXBOXA) */
/* Używamy inline-block, żeby zachowywał się jak tekst - to eliminuje wstrząsy */
.user-hours-badge span {
    font-size: 0.70rem;
    background: rgba(0,0,0,0.2);
    color: #c0c5cb;
    padding: 1px 4px;
    font-weight: 400;
    display: none;
    margin-right: 5px;      /* Zastępuje gap */
    margin-bottom: 2px;
}

/* 5. REGUŁY OTWIERANIA - ZALEŻNE OD MENU */
/* Używamy padding-top: 4px dla odstępu */

/* A. Wejście/Wyjście (RCP) - Tylko z menu */
#mainSidebar.show-details-day .user-context-info {
    max-height: 40px;
    opacity: 1;
    padding-top: 4px;
}

/* B. Urlopy / Kalendarz - Menu LUB Kliknięcie */
.user-item-btn.active .user-vacation-info,
#mainSidebar.show-opt-calendar .user-vacation-info,
#mainSidebar.show-opt-limit .user-vacation-info {
    max-height: 40px;
    opacity: 1;
    padding-top: 4px;
}

/* C. Godziny - Tylko z menu */
#mainSidebar.show-h-msc .user-hours-badge,
#mainSidebar.show-h-tyg .user-hours-badge,
#mainSidebar.show-h-dzn .user-hours-badge {
    max-height: 80px; /* Więcej miejsca */
    opacity: 1;
    padding-top: 5px;
}

/* 6. ZABEZPIECZENIA */
.user-item-btn.active:hover {
    transform: none !important;
    background-color: #769dc7 !important;
}

.sidebar.collapsed .user-vacation-info,
.sidebar.collapsed .user-context-info,
.sidebar.collapsed .user-hours-badge {
    display: none !important;
}

/* Blokada animacji przy starcie, aby uniknąć skakania kafelków */
.sidebar-initializing .user-vacation-info,
.sidebar-initializing .user-context-info,
.sidebar-initializing .user-hours-badge {
    transition: none !important;
}
/* Usuwamy blokady widoczności dla kontenerów RCP */
.table-responsive, 
.card {
    overflow: visible !important;
}

/* Specyficzne ustawienie dla komórki ze zdjęciem, aby nic jej nie ograniczało */
.photo-cell {
    overflow: visible !important;
    position: relative;
}

/* --- KARTA EWIDENCJI CZASU PRACY (PDF PREVIEW) --- */

.rcp-card-header-main {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px;
}

.rcp-card-title {
    font-size: 1.5rem; 
    font-weight: 600; 
    letter-spacing: 2px; 
    color: #374859;
    text-align: center;
    flex-grow: 1;
}

.rcp-card-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1px solid #dee2e6;
    padding-top: 0.5rem;
    font-size: 1.1rem;
}

.rcp-norma-info {
    font-weight: normal; 
    font-size: 1rem; 
    color: #777;
    margin-left: 8px;
}

.rcp-month-label {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}

.rcp-user-label {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary);
}

/* Stylizacja Sumy w Stopce */
.rcp-table-footer-sum {
    font-size: 1.2rem; 
    letter-spacing: 1px; 
    padding: 10px 50px !important; 
    text-align: right;
    background-color: #343a40;
    color: #ffffff;
}

/* --- OSOBNE FORMATOWANIE DLA KARTY EWIDENCJI --- */
.table-ewidencja {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: auto !important; /* Pozwala kolumnom dopasować się do dat i godzin */
    background: #fff;
}

.table-ewidencja thead th {
    background-color: #f8f9fa;
    color: #8898aa;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 20px;
    border-bottom: 2px solid #e9ecef;
}

/* Specyficzne szerokości kolumn dla ewidencji czasu pracy */
.table-ewidencja th:nth-child(1), 
.table-ewidencja td:nth-child(1) { width: 200px; } /* Kolumna z datą */

.table-ewidencja th:nth-child(2), 
.table-ewidencja td:nth-child(2) { width: 400px; }  /* Kolumna dzień (Pn, Wt) */

.table-ewidencja th:nth-child(3), 
.table-ewidencja td:nth-child(3) { width: 200px; text-align: center; }  /* Wejścia / Wyjścia (najszersza) */

.table-ewidencja th:nth-child(4), 
.table-ewidencja td:nth-child(4) { width: 200px; text-align: center; } /* Info (URLOP/L4) */


.table-ewidencja td {
    padding: 6px 12px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

/* Przywrócenie kolorów dla stopki (suma godzin) */
.table-ewidencja tfoot tr.bg-dark td {
    background-color: #343a40 !important;
    color: #ffffff !important;
    padding: 15px 50px !important;
}

/* Styl dla komórki daty z ołówkiem */
.table-ewidencja .rcp-date-cell:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}
/* --- POPRAWKA DLA PRZYCISKU USUWANIA (ODLICZANIE) --- */

/* Gdy przycisk odlicza lub czeka na potwierdzenie - zmień go w normalny przycisk tekstowy */
.action-btn-minimal[data-state="counting"], 
.action-btn-minimal[data-state="final"] {
    width: auto !important;         /* Wyłącza sztywne 36px */
    min-width: 100px;               /* Minimalna szerokość, żeby nie był za chudy */
    padding: 0 12px !important;    /* Dodaje oddech po bokach tekstu */
    white-space: nowrap;           /* Blokuje łamanie tekstu do nowej linii */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.80rem !important;    /* Mała czcionka, żeby zmieścić ARCHIWIZUJ */

}

/* Kolor podczas odliczania (Pomarańczowy / Żółty) */
.action-btn-minimal[data-state="counting"] {
    min-width: 50px;               /* Minimalna szerokość, żeby nie był za chudy */
    background-color: #f0ad4e !important; 
    border: 1px solid #eea236 !important;
    color: black !important; /* Biały tekst */
    font-size: 1rem !important;    /* Mała czcionka, żeby zmieścić ARCHIWIZUJ */
}

/* Kolor gotowości (Czerwony - ARCHIWIZUJ / USUŃ TRWALE) */
.action-btn-minimal[data-state="final"] {
    background-color: #d9534f !important; 
    border: 1px solid #d43f3a !important;
    color: #ffffff !important; /* Biały tekst */
}
.action-btn-minimal.btn-delete {
    font-size: 2rem !important;
}
.d-flex.justify-content-between.align-items-center.w-100.border-top.pt-2 {
    color: #374859;
}
button.btn.btn-sm.btn-light.border.shadow-sm:hover {
    background-color: #fff !important;
}

/* --- KLIKALNE NAZWISKA W TABELI RCP --- */
.user-link-cell {
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-link-cell:hover .user-name-text-table {
    color: #c86d66 !important; /* Twój kolor primary */
    text-decoration: underline;
}
div#desc_in, div#desc_out, div#math-desc {
    padding-left: 10px;
}
div#calendar-details-panel {
    width: 1150px;
}
button.btn.btn-success.px-5.shadow-sm {
    margin-bottom: 20px;
}
/* --- WYBÓR TRYBU (Admin Settings) --- */
.mode-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* RWD */
}

.mode-option {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0.7;
    position: relative;
}

.mode-option:hover {
    border-color: #a2bcd8;
    opacity: 1;
    background-color: #f8fbff;
}

/* Stan aktywny (wybrany) */
.mode-option.active {
    border-color: #769dc7;
    background-color: #f0f7ff;
    opacity: 1;
    box-shadow: 0 4px 10px rgba(118, 157, 199, 0.2);
}

/* Ukrycie kropki radia */
.mode-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.mode-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.mode-title {
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.mode-desc {
    font-size: 0.85rem;
    color: #666;
    display: block;
    line-height: 1.3;
}

/* Klasa pomocnicza do ukrywania sekcji */
.hidden-section {
    display: none !important;
}
.d-flex.align-items-center.justify-content-between.mb-2 {
    gap: 1px;
    justify-content: normal !important;
}
.p-3.bg-white.border.rounded {
    padding-left: 0px !important;
}
h6.text-muted.fw-bold.mb-2 {
    margin: 10px !important;
}
.col-md-4 input.form-control.fw-bold.text-center {
    width: 120px !important;
}
label.d-flex.align-items-center.gap-2 {
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   WEHIKUŁ CZASU (Baner Historyczny)
   ============================================================ */
#historical-banner {
    background-color: #fffbe6;
    border: 1px solid #ffe69c;
    border-left: 5px solid #ff9800;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    /* ZMIANY WYSZCZUPLAJĄCE: */
    margin: 10px;           /* Mniejszy odstęp od krawędzi */
    padding: 8px 15px;      /* Cieńszy pasek (mniej światła góra/dół) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#historical-banner .hist-icon {
    font-size: 1.6rem;      /* Mniejsza kłódka */
    line-height: 1;
}

#historical-banner .hist-title {
    color: #8a6d3b;
    font-size: 0.95rem;     /* Ciut mniejszy tytuł */
    letter-spacing: 0.5px;
}

#historical-banner .hist-desc {
    font-size: 0.8rem;      /* Mniejszy opis */
    color: #8a6d3b;
    opacity: 0.85;
}

#historical-banner .btn-hist-edit,
#historical-banner .btn-hist-reset {
    padding: 4px 12px;      /* Mniejsze i zgrabniejsze przyciski */
    font-size: 0.85rem;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

#historical-banner .btn-hist-edit {
    background: #fff;
    border: 1px solid #ff9800;
    color: #d07c00;
}
#historical-banner .btn-hist-edit:hover { background: #fff3cd; }

#historical-banner .btn-hist-reset {
    background: #c86d66;
    border: 1px solid #c86d66;
    color: #fff;
}
#historical-banner .btn-hist-reset:hover { background: #b05d57; }

@media (max-width: 768px) {
    #historical-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==========================================================================
   ✨ PANEL PRACOWNIKA (DASHBOARD) - CLEAN DESIGN V7 (WYŚRODKOWANIE & L4) ✨
   ========================================================================== */

/* Zwiększamy nieco szerokość i oddech całej strony */
.container-narrow {
    max-width: 1050px !important;
    padding-top: 2rem !important;
}

/* Naprawa uciekających na boki kolumn na telefonie */
.container-narrow .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}
.container-narrow .row > [class*="col-"] {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

/* 1. NOWOCZESNY NAGŁÓWEK */
.container-narrow > header {
    background: #ffffff;
    padding: 20px 30px !important;
    border-radius: 16px;
    border-bottom: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 2.5rem !important;
}
.container-narrow > header h3 {
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: -0.5px;
}

/* 2. NOWE KAFELKI STATYSTYK (Układ Poziomy 25% / 75%) */
.card-stat-modern {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 15px !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-stat-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;
}

/* --- LEWA STRONA (WYŚRODKOWANA, 25% SZEROKOŚCI) --- */
.card-stat-modern .stat-main {
    display: flex;
    flex-direction: column;
    align-items: center; /* Wyśrodkowanie horyzontalne */
    justify-content: center;
    flex: 0 0 25%; /* Dokładnie 25% miejsca */
    min-width: 90px;
    text-align: center;
}

.card-stat-modern .stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    margin-bottom: 2px;
}

/* Zmniejszony napis pod liczbą */
.card-stat-modern .stat-label {
    font-size: 0.75rem; /* Zmniejszone dla elegancji */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    white-space: normal; 
    line-height: 1.2;
    max-width: 110px; /* Gwarantuje łamanie na 2 linijki */
    margin: 0 auto;
}

/* Pionowa kreska rozdzielająca */
.card-stat-modern .stat-divider {
    width: 2px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 0 20px;
    flex-shrink: 0;
}

/* Prawa strona - zajmuje resztę (ok. 75%), tekst do prawej */
.card-stat-modern .stat-details {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    flex: 1;
    text-align: right;
}

.card-stat-modern .stat-used {
    font-size: 1.3rem;
    color: #1e293b;
    opacity: 0.95;
    white-space: normal;
}

.card-stat-modern .stat-used b {
    background: rgba(0, 0, 0, 0.2); 
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 500;
    color: #fff;
    margin: 0 4px;
    display: inline-block;
}

/* --- KAFELEK INFORMACYJNY L4 (CHOROBOWE) --- */
.card-stat-sick {
    padding: 12px 25px !important; 
    justify-content: center !important; /* Wymusza wyśrodkowanie całej zawartości kafelka */
    gap: 15px; /* Tworzy równy, elastyczny odstęp między cyfrą a tekstem */
}
.stat-number-sick {
    font-size: 2rem; 
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    margin: 0 !important; /* Resetujemy marginesy */
}
.stat-label-sick {
    font-size: 0.9rem; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-left: 0 !important; /* Usuwamy stary, sztywny margines */
    text-align: center; /* Wyśrodkowuje sam tekst, jeśli na małym ekranie spadnie do 2 linijek */
}

/* Kolory kafelków */
.card-stat-modern.bg-uw   { background-color: #769dc7 !important; }
.card-stat-modern.bg-past { background-color: #a2bcd8 !important; }
.card-stat-modern.bg-care { background-color: #77a9b1 !important; }
.card-stat-modern.bg-sick { background-color: #c86d66 !important; }


/* 3. WYBÓR URLOPU I INNE KARTY */
.container-narrow .card {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05) !important;
}

.btn-group-toggle {
    background: #f1f5f9 !important; 
    padding: 6px !important;
    border-radius: 14px !important;
    gap: 0 !important;
    display: flex;
    flex-wrap: wrap; 
}
.btn-group-toggle .btn {
    border: none !important; background: transparent !important; color: #64748b !important;
    border-radius: 10px !important; font-weight: 600 !important; min-height: 44px !important; 
    height: auto !important; padding: 8px 10px !important; white-space: normal !important; 
    line-height: 1.2 !important; text-align: center; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-group-toggle .btn-check#type_uw:checked + .btn { background-color: #769dc7 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(118, 157, 199, 0.4) !important; }
.btn-group-toggle .btn-check#type_past:checked + .btn { background-color: #a2bcd8 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(162, 188, 216, 0.4) !important; }
.btn-group-toggle .btn-check#type_care:checked + .btn { background-color: #77a9b1 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(119, 169, 177, 0.4) !important; }
.btn-group-toggle .btn-check#type_sick:checked + .btn { background-color: #c86d66 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(200, 109, 102, 0.4) !important; }

/* 4. POLA NA DATĘ */
.container-narrow input[type="date"].form-control {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 15px !important;
    color: #334155;
    font-weight: 600;
    width: 100%;
}
.container-narrow input[type="date"].form-control:focus {
    background-color: #ffffff !important;
    border-color: #769dc7 !important;
    box-shadow: 0 0 0 3px rgba(118, 157, 199, 0.15) !important;
}

/* 5. GŁÓWNY PRZYCISK ZATWIERDŹ (Styl zielony -> niebieski) */
.container-narrow button[name="add_range"] {
    background-color: #cddc39 !important; /* Domyślny zielony/limonkowy */
    color: #333333 !important;            /* Ciemny tekst */
    border: none !important;
    border-radius: 12px !important;
    /* font-weight: 800 !important; */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 10px !important;
    font-size: 1.05rem !important; 
    box-shadow: 0 4px 15px rgba(205, 220, 57, 0.4) !important; /* Miękki zielony cień */
    transition: all 0.3s ease !important;
    text-shadow: none !important;
    
    /* RWD dla wąskich ekranów */
    white-space: normal !important; 
    word-wrap: break-word !important;
    height: auto !important; 
    min-height: 52px !important;
    line-height: 1.2 !important;
}

/* Efekt najechania myszką (HOVER) - Zmiana na niebieski */
.container-narrow button[name="add_range"]:hover {
    transform: translateY(-2px);
    background-color: #769dc7 !important; /* Zmiana na niebieski */
    color: #ffffff !important;            /* Biały tekst */
    box-shadow: 0 6px 20px rgba(118, 157, 199, 0.5) !important; /* Niebieski cień */
}

/* Efekt wciśnięcia przycisku (ACTIVE) */
.container-narrow button[name="add_range"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(118, 157, 199, 0.4) !important;
}

/* 6. HISTORIA DNI W ROKU */
.list-container { padding-right: 10px; }
.list-container::-webkit-scrollbar { width: 6px; }
.list-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

.list-item {
    border-bottom: none !important; background: #f8fafc !important;
    margin-bottom: 8px; border-radius: 12px; padding: 14px 20px !important;
    transition: transform 0.2s, background-color 0.2s; display: flex;
    align-items: center; justify-content: space-between;
}
.list-item:hover { transform: translateX(4px); background: #f1f5f9 !important; }
.list-item .fw-bold { color: #334155; font-size: 0.95rem; }

.list-item .badge {
    padding: 8px 12px !important; border-radius: 8px !important;
    font-weight: 700 !important; letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); white-space: normal; text-align: center;
}
.list-item .badge.bg-primary { background-color: #769dc7 !important; color: #fff !important; }
.list-item .badge.bg-warning { background-color: #a2bcd8 !important; color: #fff !important; }
.list-item .badge.bg-info { background-color: #77a9b1 !important; color: #fff !important; }
.list-item .badge.bg-sick { background-color: #c86d66 !important; color: #fff !important; }

/* 8. RWD - OPTYMALIZACJE MOBILNE */
@media (max-width: 768px) {
    .container-narrow { padding-top: 1rem !important; }
    
    /* --- NAGŁÓWEK MOBILNY (Wyśrodkowany tekst, rozsunięte przyciski) --- */
    .container-narrow > header {
        flex-direction: column; 
        align-items: center !important; 
        gap: 10px !important; /* Zmniejszony ogólny odstęp między sekcjami */
        padding: 20px 15px !important;
    }
    
    /* Wyśrodkowanie tekstu i kontrola 5px od dołu całej grupy tekstowej */
    .container-narrow > header > div:first-child {
        text-align: center;
        width: 100%;
        margin-bottom: 5px !important; /* Wymuszone 5px odstępu na dole */
    }
    
    /* Dociskamy napis "Zalogowany" do tytułu "Panel Pracownika" */
    .container-narrow > header > div:first-child h3 {
        margin-bottom: 0 !important; 
        line-height: 1.1 !important;
    }
    .container-narrow > header > div:first-child p {
        margin-top: 2px !important; /* Minimalny odstęp od góry */
        margin-bottom: 0 !important; 
    }
    
    /* Przyciski "Zmiana hasła" i "Wyloguj" ułożone w 1 linii i rozsunięte na boki */
    .container-narrow > header > .d-flex.gap-2 {
        width: 100%;
        flex-direction: row !important; /* To przełamuje globalną blokadę! */
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .btn-group-toggle { flex-direction: column; }
    
    /* --- TWARDY RESET DLA PÓL DATY (NAPRAWA WYCHODZENIA Z KARTY) --- */
    .container-narrow form .row.mb-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: column !important; /* Na telefonie układają się pionowo */
        width: 100% !important;
        margin: 0 !important; /* Kasujemy marginesy rozpychające kartę */
    }
    
    .container-narrow form .row.mb-3 > .col-6 {
        width: 100% !important; 
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important; /* Zero bocznego paddingu */
        padding-right: 0 !important;
        padding-bottom: 15px !important; /* Odstęp w dół między "Od" a "Do" */
    }
    
    /* Zmiana układu kafelków na mobilce: zachowujemy proporcje dla lewej strony */
    .card-stat-modern {
        padding: 15px 15px !important;
    }
    .card-stat-modern .stat-main {
        flex: 0 0 35%; /* Dajemy troszkę więcej miejsca liczbie na telefonie */
    }
    .card-stat-modern .stat-number {
        font-size: 2.8rem;
    }
    .card-stat-modern .stat-label {
        font-size: 0.65rem;
    }
    .card-stat-modern .stat-divider {
        margin: 0 10px;
    }
    .card-stat-modern .stat-used {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    .card-stat-modern .stat-used b {
        padding: 3px 8px;
    }

    /* Dopasowanie paska L4 na telefonie */
    .card-stat-sick { gap: 10px; } /* Mniejszy odstęp między liczbą a tekstem na telefonie */
    .stat-number-sick { font-size: 2rem; }
    .stat-label-sick { font-size: 0.8rem; margin-left: 0 !important; }

    .container-narrow button[name="add_range"] { font-size: 0.95rem !important; }
    .list-item { padding: 12px 15px !important; }
    .list-item .fw-bold { font-size: 0.85rem !important; }
    .list-item .badge { font-size: 0.7rem !important; padding: 6px 10px !important; }
}

input.form-control.fw-bold.text-uppercase {
    width: 150px !important;
}
/* Domyślnie ukrywamy licznik SMS */
.sms-status-box {
    display: none !important;
}

/* Pokazujemy licznik tylko, gdy sidebar posiada klasę show-opt-sms */
#mainSidebar.show-opt-sms ~ .content .sms-status-box,
#mainSidebar.show-opt-sms ~ .admin-layout .content .sms-status-box {
    display: block !important;
}

/* --- ZAAWANSOWANY DYMEK (HTML TOOLTIP) --- */
.has-html-tooltip {
    position: relative;
    cursor: help;
}

.html-tooltip {
    display: none;
    position: absolute;
    bottom: 125%; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 19999;
    
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    
    /* Wymuszamy domyślny wygląd czcionki (odcinamy się od markera) */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    
    text-align: left;
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none;
    white-space: normal; /* Usuwamy pre-wrap stąd */
}

.html-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

.has-html-tooltip:hover .html-tooltip {
    display: block;
}

div#char-counter-wrapper {
    margin-bottom: 10px;
}

/* --- EFEKT HOVER DLA PRZYCISKÓW COFNIJ/POWTÓRZ --- */
#btn-undo, #btn-redo {
    transition: color 0.2s ease-in-out !important;
}

#btn-undo:not(:disabled):hover,
#btn-redo:not(:disabled):hover {
    color: #8bc34a !important;
}

input.form-control.form-control-sm.fw-bold.font-monospace {
    width: 250px !important;
}

a.text-white.text-decoration-none {
    font-size: 30px;
    text-decoration: none;
    color: #769dc7;
}