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

body { font-family: 'Inter', sans-serif; }



.nav-tab { transition: all 0.2s; border-bottom: 3px solid transparent; color: #64748b; font-weight: 600; cursor: pointer; }

.nav-tab:hover { color: #334155; }

.nav-tab.active { border-color: #4f46e5; color: #4f46e5; background: #f8fafc; }



/* --- KALENDÁŘ --- */

.calendar-header-row { display: grid; grid-template-columns: 28px repeat(7, 1fr); border-bottom: 1px solid #f1f5f9; }

.calendar-month-grid { display: grid; grid-template-columns: 28px repeat(7, 1fr); border-bottom: 1px solid #f1f5f9; }



.week-num-cell {

    background-color: #f8fafc; color: #94a3b8; font-size: 0.65rem; font-weight: 900;

    display: flex; align-items: center; justify-content: center;

    border-right: 1px solid #e2e8f0; border-top: 1px solid #f1f5f9; user-select: none;

}

.day-cell { 

    aspect-ratio: 1/1; border-right: 1px solid #f1f5f9; border-top: 1px solid #f1f5f9;

    background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; 

    position: relative; cursor: pointer; transition: transform 0.1s; user-select: none; 

}

.day-cell:hover:not(.day-empty) { z-index: 50; transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; border: 1px solid #cbd5e1; }

.day-num { font-weight: 600; color: #64748b; font-size: 0.85rem; margin-bottom: 2px; }

.day-code { font-weight: 900; font-size: 0.7rem; text-transform: uppercase; line-height: 1; }

.day-empty { background: #fcfcfc; pointer-events: none; }



/* --- TOOLTIPY (S šipkami a inteligentním pozicováním) --- */

.tooltip-trigger { position: relative; }



/* Tělo tooltipu (Bublina) */

.tooltip-trigger::after {

    content: attr(data-tooltip);

    position: absolute;

    /* Výchozí pozice: Nahoře, na středu */

    bottom: 120%; 

    left: 50%; 

    transform: translateX(-50%);

    

    background: #1e293b; 

    color: #fff; 

    padding: 8px 12px; 

    border-radius: 6px; 

    font-size: 0.75rem; 

    font-weight: 500;

    white-space: pre; 

    z-index: 100; 

    opacity: 0; 

    visibility: hidden; 

    transition: all 0.1s ease-in-out;

    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4); 

    min-width: 140px; 

    text-align: center; 

    pointer-events: none; 

    line-height: 1.4;

}



/* Šipka tooltipu (Trojúhelník) */

.tooltip-trigger::before {

    content: '';

    position: absolute;

    /* Výchozí šipka: Ukazuje dolů (je nahoře) */

    bottom: 110%; /* Těsně pod bublinou */

    left: 50%;

    transform: translateX(-50%);

    border-width: 6px;

    border-style: solid;

    border-color: #1e293b transparent transparent transparent; /* Šipka dolů */

    z-index: 100;

    opacity: 0;

    visibility: hidden;

    transition: all 0.1s ease-in-out;

    pointer-events: none;

}



/* Zobrazení při najetí */

.tooltip-trigger:hover::after,

.tooltip-trigger:hover::before { opacity: 1; visibility: visible; }





/* --- VARIANTY POZIC --- */



/* Pozice: DOLE (pro první řádek kalendáře) */

.tooltip-pos-bottom::after { bottom: auto; top: 120%; }

.tooltip-pos-bottom::before { 

    bottom: auto; top: 110%; 

    border-color: transparent transparent #1e293b transparent; /* Šipka nahoru */

}



/* Pozice: VLEVO (pro Po, Út - zarovná levou hranu tooltipu s levou hranou buňky) */

.tooltip-pos-left::after { left: 0; transform: none; text-align: left; }

.tooltip-pos-left::before { left: 20%; transform: translateX(-50%); } /* Šipka zůstává nad buňkou */



/* Pozice: VPRAVO (pro So, Ne - zarovná pravou hranu tooltipu s pravou hranou buňky) */

.tooltip-pos-right::after { left: auto; right: 0; transform: none; text-align: right; }

.tooltip-pos-right::before { left: auto; right: 20%; transform: translateX(50%); }



/* Kombinace: DOLE + VLEVO */

.tooltip-pos-bottom.tooltip-pos-left::after { bottom: auto; top: 120%; left: 0; transform: none; }

.tooltip-pos-bottom.tooltip-pos-left::before { bottom: auto; top: 110%; left: 20%; transform: translateX(-50%); }



/* Kombinace: DOLE + VPRAVO */

.tooltip-pos-bottom.tooltip-pos-right::after { bottom: auto; top: 120%; left: auto; right: 0; transform: none; }

.tooltip-pos-bottom.tooltip-pos-right::before { bottom: auto; top: 110%; left: auto; right: 20%; transform: translateX(50%); }





/* Nástroje */

.active-tool { border-color: #6366f1 !important; }



/* --- TABULKY PŘEHLEDU --- */

#table-overview { font-size: 0.75rem; border-collapse: separate; border-spacing: 0; }

#table-overview th, #table-overview td { border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }



/* Sticky elementy */

.sticky-col { position: sticky; left: 0; z-index: 20; background-color: #fff; border-right: 2px solid #cbd5e1 !important; }

.sticky-header-1 { position: sticky; top: 0; z-index: 30; background-color: #1e293b; color: white; }

.sticky-header-2 { position: sticky; top: 37px; z-index: 25; background-color: #f1f5f9; color: #475569; }

.sticky-corner { position: sticky; left: 0; top: 0; z-index: 50 !important; background-color: #1e293b !important; color: white; border-right: 2px solid #475569 !important; }



th.week-col { padding: 4px 2px !important; min-width: 28px; width: 28px; font-size: 0.7rem; }

td.week-cell { padding: 2px !important; font-size: 0.75rem; }

td.name-col { padding: 6px 8px; min-width: 180px; max-width: 220px; text-align: left; font-weight: bold; }



/* Příručka */

.handbook-content h1, .handbook-content h2, .handbook-content h3 { font-family: 'Inter', sans-serif; }

.handbook-content p { margin-bottom: 1rem; line-height: 1.6; }



/* Drag and Drop */

.draggable-source { opacity: 0.4; background-color: #f1f5f9; border: 2px dashed #94a3b8; }

.draggable-over { border-top: 2px solid #4f46e5; background-color: #eef2ff; transition: all 0.2s; }

.cursor-grab { cursor: grab; }

.cursor-grab:active { cursor: grabbing; }



::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }