/* ===== Pracovný výkaz (src/pages/statement.php) =====
 * Vychádza zo spoločného štýlu stránky:
 *   - nadpis a popis ako zoznamy (Projekty, Používatelia)
 *   - oranžová lišta s okrúhlymi tlačidlami ako v Plánovaní
 *   - tabuľka ako .oznacovacia-tabulka / .table / .telo (buttons.css)
 *   - tlačidlo .button-normal
 */
.statement {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 1%;
}

/* Nadpis a popis (ako "Všetky aktívne projekty") */
.statement-title {
    margin-left: 1%;
}
.statement-desc {
    margin: 0 0 24px 1%;
}

/* --- Oranžová lišta (ako .plans-panel-header) --- */
.statement-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
    border-radius: 17px;
    background: linear-gradient(to right,
                rgba(185, 120, 0, 0.7),
                rgba(255, 145, 0, 0.7),
                rgba(255, 136, 0, 0.8),
                rgba(255, 145, 0, 0.7),
                rgba(185, 120, 0, 0.7));
    box-shadow: 0 0 8px #000000;
}
.statement-who {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.statement-name,
.statement-select {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
.statement-select {
    font-family: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}
.statement-position {
    font-size: 14px;
    color: #3a2a00;
}
.statement-period {
    display: flex;
    align-items: center;
    gap: 6px;
}
.statement-month {
    min-width: 150px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
/* Okrúhle tmavé tlačidlá (ako ◀ ▶ Dnes v Plánovaní) */
.statement-nav {
    font-family: inherit;
    font-size: 13px;
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
    border: none;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
}
.statement-nav:hover {
    background: black;
}
.statement-nav.pill {
    padding: 0 12px;
}

/* --- Hlásenia (rovnaké farby ako v editoroch) --- */
.statement-flash,
.statement-errors,
.statement-readonly {
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.statement-flash    { background: rgba(46, 125, 50, 0.2);   border-left: 5px solid #2e7d32; font-weight: bold; }
.statement-errors   { background: rgba(255, 60, 60, 0.15);  border-left: 5px solid red;     color: #900; }
.statement-readonly { background: rgba(255, 255, 255, 0.4); border-left: 5px solid #666;    color: #333; }
.statement-errors ul { margin: 5px 0 0 0; padding-left: 20px; }

/* Stav schválenia mesiaca (neschválený vidí iba zamestnanec) */
.statement-approval {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.statement-approval.pending  { background: rgba(255, 152, 0, 0.18); border-left: 5px solid #ef6c00; color: #333; }
.statement-approval.approved { background: rgba(46, 125, 50, 0.15); border-left: 5px solid #2e7d32; color: #1b3d1d; }
.statement-reopen { margin: 0; }
.statement-approve { background: #2e7d32; }

/* --- Súhrn: dlaždice v štýle riadkov tabuľky (.telo) --- */
.statement-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    padding: 5px;
    margin-bottom: 14px;
    background: rgb(158, 158, 158);
    border-radius: 10px;
}
.statement-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #222;
    font-weight: bold;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.statement-card .value {
    font-size: 24px;
}
.statement-card .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}
/* Rozdiel oproti fondu: plus = nadčas, mínus = chýbajúce hodiny */
.statement-card.plus  .value { color: #1e8e3e; }
.statement-card.minus .value { color: #d32f2f; }
/* Suma za hodiny */
.statement-card.money { cursor: help; }
.statement-card.money .value { color: rgb(205, 105, 0); }

/* --- Tabuľka (ako .oznacovacia-tabulka + .table + .telo) --- */
.statement-table-wrap {
    /* relative: prvky s position: absolute vnútri (prepínače jedál R/O/V, skrytý text .sr-only)
       ostanú v posúvanej tabuľke – inak by na mobile roztiahli celú stránku */
    position: relative;
    overflow-x: auto;
    padding: 5px;
    background: rgb(158, 158, 158);
    border-radius: 10px;
}
.statement-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
    font-size: 14px;
}
/* Hlavička ako .table */
.statement-table thead th {
    text-align: left;
    padding: 12px 5px;
    font-size: 15px;
    text-transform: uppercase;
    color: white;
    text-shadow: 2px 2px black;
    white-space: nowrap;
}
.statement-table thead tr {
    background: linear-gradient(to right,
                rgba(255, 0, 0, 0.2),
                rgba(255, 145, 0, 0.6),
                rgba(255, 145, 0, 0.9),
                rgba(255, 145, 0, 0.6),
                rgba(255, 0, 0, 0.2));
}
/* Riadky ako .telo */
.statement-table tbody td {
    padding: 4px 5px;
    height: 38px;
    vertical-align: middle;
    color: white;
    font-weight: bold;
}
/* Pracovný deň (aj pamätný deň) – jednofarebný sivý riadok bez prechodu */
.statement-table tbody tr {
    background: rgb(118, 118, 118);
}
.statement-table td.date {
    white-space: nowrap;
}
/* Riadok pod myšou */
.statement-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.1);
}
/* Zvislé deliace čiary medzi skupinami Práca / Cesta / Hodiny */
.statement-table .group-start {
    border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}
/* Víkend tmavší a tlmený, sviatok oranžový */
.statement-table tr.day-weekend {
    background: rgb(84, 84, 84);
}
.statement-table tr.day-weekend td {
    color: #d6d6d6;
}
.statement-table tr.day-holiday {
    background: linear-gradient(to right,
                rgba(255, 0, 0, 0.25),
                rgba(255, 145, 0, 0.55),
                rgba(255, 0, 0, 0.25));
}
/* Dnešný deň */
.statement-table tr.today td {
    box-shadow: inset 0 2px 0 orange, inset 0 -2px 0 orange;
}
.statement-table tr.today td:first-child {
    box-shadow: inset 4px 0 0 orange, inset 0 2px 0 orange, inset 0 -2px 0 orange;
}
/* Chybný riadok */
.statement-table tr.row-error {
    background: rgba(200, 30, 30, 0.6);
}

/* Typ dňa ako štítok – bežný pracovný deň je nenápadný */
.statement-table .col-type {
    white-space: nowrap;
}
.day-badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 16px;
}
.day-badge-work {
    padding: 0;
    font-weight: normal;
    opacity: 0.75;
}
.day-badge-weekend {
    background: rgba(0, 0, 0, 0.35);
    color: #e0e0e0;
}
.day-badge-holiday {
    background: rgba(255, 145, 0, 0.9);
    color: #fff;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.day-badge-memorial {
    border: 1px solid rgba(255, 224, 179, 0.8);
    color: #ffe0b3;
}
.statement-holiday {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #ffe0b3;
    margin-top: 2px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.statement-plan {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}
.statement-plan .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 1px white;
}
.statement-none {
    color: rgba(255, 255, 255, 0.5);
}

/* Polia na zápis času */
.statement-table .col-time,
.statement-table .col-break,
.statement-table .col-hours {
    white-space: nowrap;
}
.statement-table .col-hours {
    text-align: center;
    min-width: 90px;
    font-size: 15px;
    text-shadow: 1px 1px black;
}
/* Suma za odpracované hodiny */
.statement-table .col-money {
    text-align: right;
    min-width: 100px;
    white-space: nowrap;
    font-size: 15px;
    text-shadow: 1px 1px black;
}
.statement-table .money-rate {
    display: block;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.85;
}
/* Diéty: prepínače zabezpečeného jedla R / O / V a suma */
.statement-table .col-diet {
    min-width: 165px;
    white-space: nowrap;
    text-align: right;
    cursor: help;
}
.statement-card.diet { cursor: help; }
.statement-card.diet .value { color: #1e7a32; }
.meal-toggles {
    display: inline-flex;
    gap: 2px;
    float: left;
    margin: 2px 10px 0 0;
    opacity: 0.35;
    transition: opacity 0.15s;
}
/* Prepínače sú výraznejšie iba v dni s nárokom na diéty (alebo pod myšou) */
.statement-table td.has-diet .meal-toggles,
.statement-table tr:hover .meal-toggles {
    opacity: 1;
}
.meal-toggle {
    cursor: pointer;
}
.meal-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.meal-toggle span {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
}
.meal-toggle input:checked + span {
    background: orange;
    border-color: orange;
    color: #222;
}
.meal-toggle input:focus-visible + span {
    outline: 2px solid white;
    outline-offset: 1px;
}
.meal-toggle input:disabled + span {
    cursor: default;
}
.statement-table .diet-amount {
    display: block;
    font-size: 15px;
    text-shadow: 1px 1px black;
}
.statement-table .diet-info {
    display: block;
    clear: both;
    font-size: 11px;
    font-weight: normal;
    opacity: 0.85;
}
/* Priehľadné polia s podčiarknutím (ako polia v editoroch profilu a projektu) */
.statement-table input[type="time"],
.statement-table input[type="number"],
.statement-table input[type="text"] {
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    height: 30px;
    padding: 0 4px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    background: transparent;
    color: white;
    text-shadow: 1px 1px black;
    box-sizing: border-box;
    color-scheme: dark;              /* biela ikona hodín a tmavý výber času */
    transition: border-color 0.2s, background-color 0.2s;
}
.statement-table input[type="time"] {
    width: 78px;
}
.statement-table input[type="number"] {
    width: 64px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Bez šípok pri čísle (prestávka sa píše alebo mení kolieskom) */
.statement-table input[type="number"]::-webkit-inner-spin-button,
.statement-table input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Krajina – text s výberom zo zoznamu (datalist) */
.statement-table input[type="text"] {
    /* zmestí sa aj najdlhší názov ("Konžská demokratická republika") */
    width: 248px;
    font-size: 14px;
}
/* Naplánovaný projekt – menšie písmo, jeden riadok */
.statement-table .col-plan {
    font-size: 13px;
    max-width: 210px;
}
.statement-table input[type="text"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}
.statement-table input[type="text"]::placeholder,
.statement-table input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
}
.statement-table input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}
.statement-table tr:hover input:not(:disabled)::-webkit-calendar-picker-indicator,
.statement-table input:focus::-webkit-calendar-picker-indicator {
    opacity: 0.6;
}
.statement-table input:hover {
    border-bottom-color: white;
}
.statement-table input:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}
.statement-table input:focus {
    outline: none;
    border-bottom: 2px solid orange;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px 6px 0 0;
}
/* Prázdne pole je tlmené, vyplnené časy sa vynímajú */
.statement-table input.is-empty:not(:focus) {
    color: rgba(255, 255, 255, 0.35);
    text-shadow: none;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.statement-table tr:hover input.is-empty:not(:focus) {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
/* Iba na čítanie */
.statement-table input:disabled {
    border-bottom-color: transparent;
    cursor: default;
}
.statement-table input:disabled.is-empty {
    visibility: hidden;
}
.statement-table input:disabled::-webkit-calendar-picker-indicator {
    display: none;
}
/* Dvojriadková hlavička: skupiny Práca / Cesta */
.statement-table thead th.group {
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
}
.statement-table thead th.sub {
    font-size: 12px;
    padding-top: 4px;
}
/* Úchyt na kopírovanie hodnoty ťahaním (ako v Exceli) */
.statement-table td.fillable {
    position: relative;
}
.statement-table .fill-handle {
    display: none;
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    background: rgb(77, 163, 255);
    border: 1px solid white;
    box-sizing: border-box;
    cursor: crosshair;
    z-index: 2;
    touch-action: none;
}
.statement-table td.fillable:hover .fill-handle,
.statement-table td.fillable:focus-within .fill-handle,
.statement-table td.fill-source .fill-handle {
    display: block;
}
.statement-table td.fill-source {
    outline: 2px solid rgb(77, 163, 255);
    outline-offset: -2px;
}
.statement-table td.fill-target {
    outline: 2px dashed rgb(77, 163, 255);
    outline-offset: -2px;
    background: rgba(77, 163, 255, 0.18) !important;
}
body.filling, body.filling * {
    cursor: crosshair !important;
    user-select: none;
}
/* Označené bunky (ťahanie myšou / Shift + klik), Delete ich vymaže */
.statement-table td.cell-selected {
    background: rgba(77, 163, 255, 0.3) !important;
    box-shadow: inset 0 0 0 1px rgb(77, 163, 255);
}
body.selecting, body.selecting * {
    user-select: none;
}
/* Tlačidlo "skopírovať predchádzajúci deň" v stĺpci Dátum */
.statement-table .row-copy {
    margin-left: 4px;
    padding: 0 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: white;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;
}
.statement-table tr:hover .row-copy,
.statement-table .row-copy:focus-visible {
    opacity: 0.8;
}
.statement-table .row-copy:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}
/* žiadny skorší vyplnený deň */
.statement-table .row-copy.row-copy-none {
    opacity: 1;
    background: rgba(255, 60, 60, 0.6);
}
/* Stĺpce cesty jemne odlíšené */
.statement-table td.travel {
    background: rgba(0, 0, 0, 0.12);
}
/* Čas cesty pod odpracovanými hodinami */
.statement-table .travel-hours {
    display: block;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.85;
}
/* Ikonky dennej / nočnej práce v stĺpci Hodiny */
.statement-table .work-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shift-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    cursor: help;
}
.shift-icons svg {
    width: 17px;
    height: 17px;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}
.shift-sun {
    fill: #ffd54f;
    stroke: #ffd54f;
}
.shift-moon {
    fill: #cfe3ff;
}
.shift-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 6px;
}
.shift-icons.legend {
    background: rgba(65, 65, 65, 0.6);
    border-radius: 6px;
    padding: 2px 5px;
    cursor: default;
}
.statement-approved {
    margin-left: 6px;
    color: #8dff8d;
}

/* --- Lišta výkazu: ostane hore pri posúvaní, vpravo Uložiť / Uložiť a schváliť (ako v profile) --- */
.statement-main-bar {
    position: sticky;
    top: 8px;
    z-index: 40;
}
.statement-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.statement-nav.accent { background: #fff; color: #000; font-weight: bold; }
.statement-nav.accent:hover { background: #000; color: #fff; }
.statement-nav.approve { background: #2e7d32; font-weight: bold; }
.statement-nav.approve:hover { background: #1b5e20; }
.statement-unsaved {
    font-size: 13px; font-weight: bold; color: #4a1f00;
    background: rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 4px 10px;
    animation: statement-pulse 1.6s ease-in-out infinite;
}
@keyframes statement-pulse { 50% { background: rgba(255, 255, 255, 0.9); } }
@media (prefers-reduced-motion: reduce) { .statement-unsaved { animation: none; } }

/* --- Filter záznamov nad tabuľkou (scripts/js/statement.js – region Filter) --- */
.statement-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgb(158, 158, 158);
}
.statement-filter.active { box-shadow: inset 4px 0 0 #ff8800; }
.statement-filter-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.statement-filter-chip {
    --tone: #9e9e9e;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 2px solid #fff;
    border-radius: 15px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: #222;
    cursor: pointer;
}
.statement-filter-chip::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tone);
}
.statement-filter-chip .n {
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
}
.statement-filter-chip:hover { border-color: #000; }
.statement-filter-chip.type-work     { --tone: #2e7d32; }
.statement-filter-chip.type-weekend  { --tone: #424242; }
.statement-filter-chip.type-holiday  { --tone: #ff9100; }
.statement-filter-chip.type-memorial { --tone: #ffcc80; }
.statement-filter-chip.off {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
    text-decoration: line-through;
}
.statement-filter-chip.off::before { background: transparent; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45); }
.statement-filter-select {
    height: 30px;
    padding: 0 10px;
    border: 2px solid #fff;
    border-radius: 15px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.statement-filter-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: bold;
    color: #222;
}
.statement-table tr[hidden] { display: none; }

/* --- Tlačidlo a poznámky --- */
.statement-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.statement-hint,
.statement-note {
    font-size: 13px;
    color: #333;
}
.statement-note {
    margin: 14px 0 0 1%;
}

@media (max-width: 700px) {
    .statement-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .statement-period {
        justify-content: center;
        flex-wrap: wrap;
    }
    /* na mobile je lišta v stĺpci vysoká – nelepí sa hore, aby nezakrývala tabuľku */
    .statement-main-bar { position: static; }
    .statement-save { justify-content: center; }
}

/* Tlač: iba výkaz, svetlé farby, bez ovládania */
@media print {
    body * { visibility: hidden; }
    .statement, .statement * { visibility: visible; }
    .statement { position: absolute; left: 0; top: 0; margin: 0; width: 100%; }
    .statement-toolbar .statement-period, .statement-save, .statement-filter, .statement-actions, .statement-flash,
    .statement-errors, .statement-readonly, .statement-desc, .statement-approval { display: none; }
    .statement-toolbar, .statement-summary, .statement-table-wrap { box-shadow: none; background: none; }
    .statement-table thead tr, .statement-table tbody tr { background: none !important; }
    .statement-card, .statement-table thead th, .statement-table tbody td {
        background: none !important; color: #000 !important; text-shadow: none !important;
        border-bottom: 1px solid #ccc !important;
    }
    .statement-table .fill-handle, .statement-table .row-copy { display: none !important; }
    .statement-table input { border: none !important; background: transparent !important; box-shadow: none !important; color: #000 !important; }
    .statement-table input::-webkit-calendar-picker-indicator { display: none; }
    .shift-moon { fill: #5c7fb8; }
    .shift-sun { fill: #e0a800; stroke: #e0a800; }
    .shift-icons svg { filter: none; }
}

/* Tlač vždy celý mesiac – filter záznamov je iba na obrazovke (rovnako ako export do Excelu a PDF) */
@media print {
    .statement-table tr[hidden] { display: table-row !important; }
}
.statement-filter-empty {
    margin: 0;
    padding: 18px;
    text-align: center;
    font-weight: bold;
    color: #fff;
}
.statement-filter-empty[hidden] { display: none; }