/* 1. Odstranění mezer v buňkách a příprava pro 100% výšku */
    #dochtest .table-responsive tbody td {
        padding: 0 !important;
        vertical-align: middle;
        height: 1px; /* Trik pro 100% výšku inputů */
    }

    /* 2. Natažení a nastylování inputů pro jasné odlišení */
    #dochtest .table-responsive input[type="text"],
    #dochtest .table-responsive input[type="number"],
    #dochtest .table-responsive input[type="time"],
    #dochtest .table-responsive textarea,
    #tabulkaRozpis .table-responsive input[type="text"],
    #tabulkaRozpis .table-responsive input[type="number"],
    #tabulkaRozpis .table-responsive input[type="time"],
    #tabulkaRozpis .table-responsive textarea {
        width: 100% !important;
        height: 100% !important;
        min-height: 38px;
        box-sizing: border-box;
        margin: 0;
        border-radius: 0; /* Ostré rohy, aby to sedělo v mřížce */
        
        /* NOVÉ: Mírný rámeček a barva pro odlišení od zbytku tabulky */
        border: 1px solid #dee2e6; /* Standardní jemná Bootstrap šedá */
        background-color: #fdfdfe; /* Téměř bílá, lehce odlišená od případného pozadí */
        
        text-align: center;
        color: #212529;
    }

/* 3. Zvýraznění sloupců bez inputů (6, 7, 10, 11) světle šedou barvou */
#dochtest .table-responsive td:nth-child(6),
#dochtest .table-responsive td:nth-child(7),
#dochtest .table-responsive td:nth-child(10),
#dochtest .table-responsive td:nth-child(11),
#tabulkaRozpis .table-responsive td:nth-child(6),
#tabulkaRozpis .table-responsive td:nth-child(7),
#tabulkaRozpis .table-responsive td:nth-child(10),
#tabulkaRozpis .table-responsive td:nth-child(11) {
    background-color: #f8f9fa; /* Velmi jemná světle šedá (Bootstrap standard) */
    color: #6c757d; /* Volitelně: lehce ztlumená barva textu pro lepší efekt */
}

/* 2. Natažení a nastylování inputů pro splynutí s buňkou tabulky */
#dochtest .table-responsive input[type="text"],
#dochtest .table-responsive input[type="number"],
#dochtest .table-responsive input[type="time"],
#dochtest .table-responsive textarea,
#tabulkaRozpis .table-responsive input[type="text"],
#tabulkaRozpis .table-responsive input[type="number"],
#tabulkaRozpis .table-responsive input[type="time"],
#tabulkaRozpis .table-responsive textarea {
    width: 100% !important;
    height: 100% !important;
    min-height: 38px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0; 
    
    /* UPRAVENO: Průhlednost a splynutí s buňkou */
    background-color: transparent; /* Přebere barvu buňky (včetně hover efektů tabulky) */
    border: none; /* Zruší rámeček, aby políčko splynulo s mřížkou tabulky */
    
    text-align: center;
    color: #212529;
}
    /* 3. Specifické nastavení pro textarea (poznámky) */
    #dochtest .table-responsive textarea {
        text-align: left;
        resize: vertical;
        padding: 8px;
    }

    /* 4. Zvýraznění buňky při kliknutí (focus) */
    #dochtest .table-responsive input:focus,
    #dochtest .table-responsive textarea:focus {
        outline: none; /* Skryje výchozí prohlížečový obrys */
        border: 2px solid #0d6efd !important; /* Výrazný modrý rámeček */
        background-color: #ffffff; /* Úplně bílé pozadí při psaní */
        box-shadow: inset 0 0 5px rgba(13, 110, 253, 0.2); /* Jemný stín uvnitř */
        position: relative;
        z-index: 1; /* Zajistí, že rámeček překryje sousední okraje buněk */
    }

/* Zrušení omezení výšky – tabulka se vypíše celá na výšku */
#dochtest .table-responsive {
    max-height: none; /* Zruší limit 75vh, tabulka se natáhne podle obsahu */
    overflow-y: visible; /* Vypne vertikální posuvník uvnitř tabulky */
    overflow-x: auto; /* Ponechá horizontální posuvník pro mobily (pokud má tabulka min-width 1200px) */
}

    /* 2. "Přílepení" hlavičky s názvy sloupců k hornímu okraji */
    #dochtest .table-responsive tr.fixe th {
        position: sticky;
        top: 0; /* Přichytí se úplně nahoře */
        z-index: 10; /* Zajistí, že hlavička bude "nad" ostatními řádky při scrollování */
        
        /* Musíme vynutit barvu pozadí, jinak by přes ni prosvítaly řádky zespodu */
        background-color: #212529 !important; /* Tmavá barva Bootstrap hlavičky (table-dark) */
        color: #fff !important;
        
        /* Jemný stín pod hlavičkou, aby se opticky oddělila od textu pod ní */
        box-shadow: inset 0 -2px 0 #000; 
    }


/* Panel se zaměstnanci k přetažení */
.employee-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 20px;
}
.draggable-emp {
    background: #0d6efd;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: grab;
    font-weight: bold;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.draggable-emp:active { cursor: grabbing; }


/* Buňka pro časovou osu ve dni s přesnou 24hodinovou mřížkou */
.timeline-cell {
    position: relative;
    min-height: 50px;
    background: #fff;
    padding: 5px 0;
    /* Dynamicky rozpočítá 24 dílků (100% / 24) */
    background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% / 24 - 1px), #e9ecef calc(100% / 24));
}

/* Samotný blok směny vložený do dne (Modrý plovoucí rámeček) */
.shift-block {
    height: 32px;
    background-color: #fff; /* Bílé pozadí */
    border: 2px solid #0d6efd; /* Modrý rámeček */
    color: #0d6efd; /* Modrý text */
    border-radius: 20px; /* Zakulacené rohy jako u výběru nahoře */
    margin-bottom: 5px;
    margin-top: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Jemný stín pro efekt vznášení */
    transition: box-shadow 0.2s, background-color 0.2s;
}
.shift-block:hover {
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    background-color: #f8fbff; /* Lehce zmodrá při najetí myší */
}

/* Zajištění, aby text nepřekážel úchytům při malém okně */
.shift-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 22px; /* Dostatek místa pro tahátka */
    pointer-events: none; /* Myš klikne vždy na rámeček, ne na text */
}

/* VIDITELNÁ Tahátka pro změnu času zleva/zprava */
.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    cursor: ew-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 110, 253, 0.08);
}
.resize-handle:hover {
    background-color: rgba(13, 110, 253, 0.25);
}
.resize-handle::after {
    content: "⋮"; /* Vizuální tečky naznačující "chytni a táhni" */
    color: #0d6efd;
    font-weight: bold;
    font-size: 14px;
}
.resize-handle.left { left: 0; border-radius: 18px 0 0 18px; border-right: 1px solid rgba(13, 110, 253, 0.2); }
.resize-handle.right { right: 0; border-radius: 0 18px 18px 0; border-left: 1px solid rgba(13, 110, 253, 0.2); }

/* Křížek pro smazání (červený s bílým okrajem) */
.delete-shift {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 14px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 5;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.shift-block:hover .delete-shift { display: block; }
/* Křížek pro smazání */
.delete-shift {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    display: none;
}
.shift-block:hover .delete-shift { display: block; }

/* 1. Propustí barvu z řádku <tr> přímo do buněk <td> a <th> */
table tbody tr[style*="background-color"] td,
table tbody tr[style*="background-color"] th {
    background-color: inherit !important;
    color: inherit !important;
}

/* 2. Zprůhlední i inputy v těchto obarvených řádcích, aby barva řádku prosvítala a text (např. bílý u chyby) byl správně vidět */
table tbody tr[style*="background-color"] input,
table tbody tr[style*="background-color"] textarea {
    background-color: transparent !important;
    color: inherit !important;
}

/* 1. Obarví pozadí a text POUZE u první buňky (název dne) */
tr[style*="--row-color"] td:first-child,
.grid-row[style*="--row-color"] > div:first-child {
    background-color: var(--row-color) !important;
    color: var(--row-text) !important;
}

/* 2. Vytvoří rámeček nahoře a dole pro VŠECHNY buňky v tomto řádku */
tr[style*="--row-color"] td,
.grid-row[style*="--row-color"] > div {
    border-top: 2px solid var(--row-color) !important;
    border-bottom: 2px solid var(--row-color) !important;
}

/* 3. Uzavře rámeček z levé strany (u první buňky) */
tr[style*="--row-color"] td:first-child,
.grid-row[style*="--row-color"] > div:first-child {
    border-left: 2px solid var(--row-color) !important;
}

/* 4. Uzavře rámeček z pravé strany (u poslední buňky) */
tr[style*="--row-color"] td:last-child,
.grid-row[style*="--row-color"] > div:last-child {
    border-right: 2px solid var(--row-color) !important;
}


.trest {

background-color:#8ae4fa;
color:#000000;
background-color:#fab436;
color:#000000;
background-color:#ec1d1d;
color:#800000;


}