:root {
  --color-primary: #241a7f;
  --color-primary-dark: #180f5c;
  --color-accent: #00b7ea;
  --color-text: #334155;
  --color-text-muted: #64748b;
  --color-bg: #f4f5f7;
  --color-border: #dfe3ea;
  --color-danger: #e11d3f;
  --color-success: #0aa66e;
  --color-warn: #d97706;
  --radius: 4px;
  --header-h: 64px; /* výška hornej hlavičky - pod ňu sa lepí lišta so záložkami */
  --bottom-nav-h: 60px; /* výška mobilnej spodnej lišty */
  --font-heading: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Roboto", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(36, 26, 127, 0.12); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Označený (vybraný) text - biele písmo na tmavomodrom, nech je vždy čitateľný.
   Bez tohto bol modrý text na modrom zvýraznení nečitateľný. */
::selection { background: var(--color-primary); color: #fff; }
::-moz-selection { background: var(--color-primary); color: #fff; }

h1, h2, h3, .tab-btn, th, button {
  font-family: var(--font-heading);
}

.hidden { display: none !important; }
[hidden] { display: none !important; }

.screen { min-height: 100vh; }

/* úvodná obrazovka (kým sa overí prihlásenie) - rovnaké pozadie ako prihlásenie, len logo */
.boot-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  background-image: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* --- Login --- */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  background-image: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.login-logo { width: 84px; height: auto; }
.login-box {
  background: white;
  padding: 2rem 2.5rem;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  width: 320px;
}
.login-box h1 { margin: 0 0 0.1rem; font-size: 1.5rem; font-weight: 700; }
.login-box .subtitle { margin: 0 0 1.5rem; color: var(--color-text-muted); font-size: 0.9rem; }
.login-box label { display: block; margin-bottom: 1rem; font-size: 0.9rem; }
.login-box input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-body);
}
.login-box button { width: 100%; }

/* --- App shell --- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  background: var(--color-primary);
  color: white;
  padding: 0.7rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-brand { display: flex; align-items: center; gap: 0.7rem; }

.celebration-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  color: white;
  font-weight: 600;
  padding: 0.6rem 1rem;
  text-align: center;
}
.celebration-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Jednotne okruhle ikony v hlavicke (avatar, nudza, Spravca/Moj ucet, zvoncek, odhlasenie) */
.hdr-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
}
.hdr-btn:hover { background: rgba(255, 255, 255, 0.24); }
.hdr-btn svg { width: 21px; height: 21px; display: block; }
.hdr-btn.hidden { display: none; }
.hdr-avatar { overflow: hidden; }
.hdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hdr-bell { color: #facc15; }
.hdr-emergency { color: #ff4d4f; }
/* v režime "Môj účet" je prepínač výrazný (biely), aby bolo jasné, že si v obmedzenom zobrazení */
#view-mode-toggle.is-employee-view { background: #fff; color: var(--color-primary); border-color: #fff; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .header-right { gap: 0.45rem; }
  .hdr-btn { width: 36px; height: 36px; }
  .hdr-btn svg { width: 19px; height: 19px; }
}
.header-logo { height: 32px; width: auto; }
/* Na úzkom mobile by logo + fotka + meno vedľa seba boli natlačené - meno sa schová,
   logo a fotka spolu majú dosť miesta. */
@media (max-width: 420px) {
  #whoami-name { display: none; }
  .header-brand { gap: 0.5rem; }
}
.avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-size: 1.2rem;
}
.avatar-circle:hover { background: rgba(255,255,255,0.25); }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

.tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.8rem 1.5rem 0;
  background: white;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* lišta so záložkami ostáva zamrznutá hneď pod hlavičkou (desktop; na mobile je skrytá) */
  position: sticky;
  top: calc(var(--header-h) - 1px);
  z-index: 49;
}
.tab-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
}
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
/* .tab-btn je <button>, takze bez tohto by prevzal tmavomodre pozadie z generickeho
   "button:hover" - na aktivnej zalozke (modry text) by to vyslo takmer necitatelne. */
.tab-btn:hover { background: #f1f2f5; }

.tab-content { padding: 1.5rem; max-width: 900px; margin: 0 auto; }

/* Na sirokych obrazovkach (PC/notebook) nech pracovna plocha vyuziva cele okno namiesto
   uzkeho pruhu v strede - mobilna appka (uzsi viewport) ostava bez zmeny. */
@media (min-width: 1024px) {
  .tab-content { max-width: none; padding: 1.75rem 3rem; }
}

/* --- Mobilna spodna navigacia --- */
/* Skryta na desktope defaultne (bez media query) - poistka navyse k media query nizsie. */
.bottom-nav { display: none; }
.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem 0.2rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  cursor: pointer;
}
.bottom-nav-icon { font-size: 1.5rem; line-height: 1; }
/* .bottom-nav-btn je zaroven .tab-btn, ktory pri :hover dostava svetle pozadie - na tmavej
   spodnej lište (a po ťuknutí na dotykovom displeji, kde hover ostáva) by biely text zmizol. */
.bottom-nav-btn:hover { background: rgba(255, 255, 255, 0.1); }
.bottom-nav-btn.active,
.bottom-nav-btn.active:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.bottom-nav-btn.active .bottom-nav-label { font-weight: 700; }

.more-menu {
  display: none;
  position: fixed;
  z-index: 31;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid var(--color-border);
  min-width: 190px;
  overflow: hidden;
}
.more-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--color-text);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #f1f2f5;
  padding: 0.85rem 1.1rem;
  font-weight: 500;
  font-size: 0.9rem;
}
.more-menu-item:last-child { border-bottom: none; }
.more-menu-item:hover { background: #f9fafb; }
.more-menu-item.active { color: var(--color-primary); font-weight: 700; }

@media (max-width: 767px) {
  .tabs { display: none; }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-primary);
    border-top: 1px solid var(--color-primary-dark);
    z-index: 30;
  }
  .more-menu:not(.hidden) {
    display: block;
    right: 0.75rem;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
  /* miesto pre fixnu spodnu listu, nech posledna karta nie je pod nou schovana */
  .tab-content { padding-bottom: calc(var(--bottom-nav-h) + 24px + env(safe-area-inset-bottom, 0px)); }
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  overflow-x: auto; /* siroke tabulky sa posuvaju vnutri karty, nepretekaju von */
}
.card h2 { margin-top: 0; font-size: 1.05rem; color: var(--color-primary); }
/* .card ma overflow-x: auto kvoli sirokym tabulkam, ale to podla CSS specifikacie vynuti aj
   overflow-y: auto na osiach, kde nie je explicitne nastaveny - dôsledkom je zbytocny (prazdny)
   zvisly posuvnik aj na kartach bez tabulky. Karty bez sirokeho obsahu (napr. tlacidla) to vypnu. */
.card-no-scroll { overflow: visible; }

button {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
button:hover { background: var(--color-primary-dark); }
button.secondary { background: white; color: var(--color-text); border: 1px solid var(--color-border); }
button.secondary:hover { background: #f1f2f5; }
button.secondary.active-mode { background: var(--color-primary); color: white; border-color: var(--color-primary); }
button.danger { background: var(--color-danger); }
button.danger:hover { background: #b91c3a; }
button.success { background: var(--color-success); }
button.success:hover { background: #088a5c; }

/* Hlavne akcne tlacidla (odpipnutie dochadzky) - vacsie a oblejsie, nech su na prvy
   pohlad najdolezitejsim prvkom na obrazovke, hlavne na mobile. */
#check-in-btn, #check-out-btn {
  padding: 1.1rem 1.5rem;
  font-size: 1.05rem;
  border-radius: 999px;
  flex: 1;
}
/* "Lekár" - rovnaky pilulkovy tvar ako Prichod/Odchod, len o nieco mensie a modre */
#absence-punch-btn {
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  border-radius: 999px;
}
button.medic { background: #2563eb; }
button.medic:hover { background: #1d4ed8; }
.link-btn {
  background: none;
  color: var(--color-primary);
  text-decoration: underline;
  padding: 0;
  font-weight: 500;
}
.link-btn:hover { background: none; opacity: 0.75; }

/* Kompaktné ikonkové tlačidlo (napr. upraviť ✏️ / deaktivovať ✕ v tabuľkách) */
.icon-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
}
.icon-btn:hover { background: #f1f2f5; }
.icon-btn.danger { background: none; color: var(--color-danger); border-color: var(--color-danger); }
.icon-btn.danger:hover { background: #fdeaee; }

/* Priradení zamestnanci na zákazke - meno vľavo, ✕ odobrať zarovnaný vpravo */
#job-detail-assignments { list-style: none; padding: 0; margin: 0.6rem 0; }
#job-detail-assignments li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
#job-detail-assignments li:last-child { border-bottom: none; }
#job-detail-assignments li .icon-btn { flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; align-items: center; }
.btn-row-center { justify-content: center; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

/* Kompaktna tabulka (napr. "Moj vykaz") - pevne stlpce + zalamovanie textu, aby sa
   nemusela posuvat do strany ani na uzkom mobilnom displeji. */
.compact-table { table-layout: fixed; }
.compact-table th, .compact-table td { white-space: normal; word-break: break-word; vertical-align: top; }
.compact-table th { letter-spacing: 0; font-size: 0.68rem; padding-left: 0.3rem; padding-right: 0.3rem; }

/* "Môj výkaz" - Čas/Miesto/Stav/Pôvod + rozklikavaci detail riadok */
.history-table th:nth-child(1), .history-table td:nth-child(1) { width: 27%; }
.history-table th:nth-child(2), .history-table td:nth-child(2) { width: 33%; }
.history-table th:nth-child(3), .history-table td:nth-child(3) { width: 19%; white-space: nowrap; font-size: 0.78rem; padding-left: 0.2rem; padding-right: 0.2rem; }
.history-table th:nth-child(4), .history-table td:nth-child(4) { width: 21%; }
.history-table tr.detail-row td { background: #fafbfc; font-size: 0.82rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.history-table tr.detail-row div + div { margin-top: 0.25rem; }
.work-log-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--color-border); }

/* Fotky k zaznamom o praci - nahlady, klik zvacsi (lightbox) */
.wl-photos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.wl-photo { position: relative; }
.wl-photo img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #eef0f4;
  cursor: zoom-in;
  display: block;
}
.wl-photo img.wl-photo-error { cursor: default; font-size: 0.6rem; }
.wl-photo-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-danger);
  font-size: 0.65rem;
  line-height: 20px;
}

#work-log-form > p.hint,
#work-log-coworkers { flex-basis: 100%; }

.wl-present {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-success);
  background: #e2f6ee;
  border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
}

/* Zaznam o praci: tlacidlo po odchode a akcie v detaile riadku historie dochadzky */
.checkout-worklog-btn { display: block; margin-top: 0.6rem; }
.wl-history-add { margin-top: 0.6rem; }
.wl-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.wl-delete-link { color: var(--color-danger); font-size: 0.8rem; }

/* Denník prác - prehlad zaznamov po dnoch */
.wl-quick-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.wl-summary-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wl-summary-row .hint { margin: 0; }
.wl-day { margin-top: 1rem; }
.wl-day h3 {
  font-size: 0.95rem;
  color: var(--color-primary);
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--color-border);
}
.wl-day-list { list-style: none; margin: 0; padding: 0; }
.wl-day-list li { padding: 0.6rem 0; border-bottom: 1px solid #f1f2f5; font-size: 0.9rem; }
.wl-day-list li:last-child { border-bottom: none; }
.wl-day-list li .hint { margin-top: 0.15rem; }
.wl-place { font-weight: 600; margin-bottom: 0.15rem; }

/* Denník prác: plán vs. skutočnosť */
.pv-group {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background: white;
}
.pv-group.pv-has-issue { border-left-color: var(--color-danger); }
.pv-cols { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.4rem; }
.pv-col { flex: 1; min-width: 220px; }
.pv-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.pv-list { list-style: none; margin: 0.2rem 0; padding: 0; font-size: 0.88rem; }
.pv-list li { padding: 0.12rem 0; }
.pv-group .hint { margin-top: 0.15rem; }
.pv-note { font-size: 0.92rem; margin-top: 0.25rem; white-space: pre-line; }
.pv-done { margin-top: 0.1rem; }
.pv-done li { padding: 0.25rem 0; }
.pv-people { margin-top: 0.5rem; padding-top: 0.35rem; border-top: 1px dashed var(--color-border); font-size: 0.85rem; }
.pv-people .pv-list { font-size: 0.82rem; color: var(--color-text-muted); }
.pv-ok { color: var(--color-success); font-size: 0.78rem; font-weight: 600; }
.pv-flag { font-size: 0.72rem; font-weight: 600; border-radius: var(--radius); padding: 0.05rem 0.35rem; margin-left: 0.2rem; white-space: nowrap; }
.pv-red { background: #fde2e7; color: var(--color-danger); }
.pv-orange { background: #fef3c7; color: var(--color-warn); }
.pv-warn { background: #fef3c7; color: var(--color-warn); }

/* <label> s file inputom, ktory vyzera ako sekundarne tlacidlo (Odfotiť / Z galérie) */
.btn-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: white;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}
.btn-like:hover { background: #f1f2f5; }
.btn-like.btn-small { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* Vyber fotiek v okne "Záznam o práci" */
.wl-photo-picker {
  width: 100%;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem;
  background: #fafbfc;
}
.wl-photo-picker-title { display: block; font-size: 0.9rem; margin-bottom: 0.5rem; }
.wl-photo-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wl-photo-picker .wl-photos:empty { display: none; }
.wl-photo-picker .wl-photos { margin-top: 0.6rem; }
.wl-progress { margin-top: 0.6rem; }
.wl-progress-track { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.wl-progress-bar { height: 100%; width: 0; background: var(--color-success); transition: width 0.3s; }
.modal-overlay.photo-lightbox { z-index: 80; cursor: zoom-out; background: rgba(0, 0, 0, 0.85); }
.photo-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }

/* "Moje osobné prekážky" - Dôvod/Limit/Čerpané/Plán/Ostáva */
.obstacle-table th:nth-child(1), .obstacle-table td:nth-child(1) { width: 34%; }
.obstacle-table th:nth-child(2), .obstacle-table td:nth-child(2),
.obstacle-table th:nth-child(3), .obstacle-table td:nth-child(3),
.obstacle-table th:nth-child(4), .obstacle-table td:nth-child(4),
.obstacle-table th:nth-child(5), .obstacle-table td:nth-child(5) { width: 16.5%; text-align: center; }
.obstacle-table th { font-size: 0.58rem; white-space: nowrap; padding-left: 0.1rem; padding-right: 0.1rem; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid #eee; }
th { color: var(--color-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f9fafb; }
tr.row-selected { background: #e6f8fd; }
tr.row-selected:hover { background: #d9f2fb; }

/* "Dovolenka zamestnancov" - úzke číselné stĺpce, meno dostane zvyšok šírky */
.vacation-team-table th, .vacation-team-table td { padding-left: 0.25rem; padding-right: 0.25rem; }
.vacation-team-table th:not(:first-child), .vacation-team-table td:not(:first-child) { text-align: center; white-space: nowrap; width: 3rem; }
.vacation-team-table th { font-size: 0.62rem; letter-spacing: 0; }

/* rozšírený editačný riadok pevného miesta (Názov + GPS + okruh cez celú šírku) */
.location-edit-row > td { background: #f4fbfe; }
.location-edit-row .inline-form { margin-bottom: 0; }

/* "Na schválenie (celá firma)" - na desktope plná tabuľka, na mobile len Meno/Typ/Od
   a zvyšok (Do, Poznámka, Stav, tlačidlá) po ťuknutí na riadok v rozbalenom riadku. */
.team-absences-table .ta-detail { display: none; }
.only-mobile-hint { display: none; }
@media (max-width: 767px) {
  .team-absences-table .ta-col-extra { display: none; }
  .team-absences-table td { white-space: normal; word-break: break-word; vertical-align: top; }
  .team-absences-table .ta-detail:not(.hidden) { display: table-row; }
  .team-absences-table .ta-detail td { background: #fafbfc; font-size: 0.85rem; }
  .team-absences-table .ta-detail div + div { margin-top: 0.3rem; }
  .team-absences-table .ta-detail-actions { margin-top: 0.55rem; display: flex; gap: 0.5rem; }
  .only-mobile-hint { display: block; }
}

/* rozbaleny detail (auto - historia servisov / zakazka - detail / zamestnanec) hned pod riadkom */
tr.vehicle-detail-row > td,
tr.job-detail-row > td,
tr.employee-detail-row > td { padding: 0; background: #f4fbfe; border-top: none; }
tr.vehicle-detail-row .card,
tr.job-detail-row .card,
tr.employee-detail-row .card {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: none;
  background: transparent;
}
/* na mobile by bočný okraj karty v rozbalenom detaile vozidla roztiahol zoznam do šírky (posuvník) */
@media (max-width: 767px) {
  tr.vehicle-detail-row .card { padding: 0.9rem 0.35rem; }
}
/* Zoznam vozidiel: pevné rozloženie stĺpcov, aby rozbalený detail (vnorené tabuľky) nerozťahoval
   zoznam do šírky - na mobile by vznikol posuvník. Názov dostane zvyšok šírky. */
.vehicles-list-table { table-layout: fixed; width: 100%; }
.vehicles-list-table th:nth-child(2) { width: 5rem; }
.vehicles-list-table th:nth-child(3) { width: 3.6rem; text-align: center; }
.vehicles-list-table td[data-vehicle-deadline-badge] { text-align: center; }
.vehicles-list-table th:nth-child(4) { width: 3.6rem; }
.vehicles-list-table > tbody > tr:not(.vehicle-detail-row) > td { overflow-wrap: anywhere; }
/* dlhé názvy oprávnení / typov vo výberoch nesmú roztiahnuť detail vozidla */
#vehicle-detail select { max-width: 100%; }

/* dlhý email - radšej sa zalomí za "@" než aby pretekal alebo bol natlačený */
#ev-email, #pv-email { text-align: right; overflow-wrap: anywhere; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.day-range-group { display: flex; flex-direction: row; gap: 0.8rem; align-items: center; }
.day-range-group label:has(input:disabled) { opacity: 0.5; }
.inline-form .full-width { flex-basis: 100%; }
/* Alikvotná časť dovolenky/§141 za rok nástupu - vizuálne oddelený podblok vo formulári zamestnanca */
.prorate-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: #f4fbfe;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
}
.prorate-block .hint { flex-basis: 100%; margin: 0.1rem 0 0.2rem; }
.inline-form input, .inline-form select {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.error { color: var(--color-danger); font-size: 0.85rem; min-height: 1.1em; }
.status-ok { color: var(--color-success); }
.status-warn { color: var(--color-warn); }

/* "Súhrn hodín" - dvojstlpcova tabulka zostatkov a sald */
.summary-table { margin-bottom: 0.8rem; }
.summary-table td { padding: 0.45rem 0.2rem; }
.summary-table td:first-child { color: var(--color-text-muted); }
.summary-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.summary-table tr:last-child td { border-bottom: none; }
.summary-table .summary-row-strong td { font-size: 1rem; }
.summary-table .summary-row-strong td:first-child { color: var(--color-text); font-weight: 600; }
.summary-table td.summary-muted { color: var(--color-text-muted); font-weight: 400; font-size: 0.82rem; }
.has-tooltip { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.hint { color: var(--color-text-muted); font-size: 0.82rem; margin-top: -0.4rem; }

.stat-list { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
}
.stat-row:last-child { border-bottom: none; }
.stat-row span { color: var(--color-text-muted); }

/* Prehľad zákazky - popis vľavo, hodnota zarovnaná vpravo (aj pri zalomení) */
#job-view .stat-row span { flex-shrink: 0; }
#job-view .stat-row strong { text-align: right; }

/* --- Kalendár --- */
.calendar-scroll { overflow-x: auto; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 4px;
  margin-top: 0.8rem;
}
.calendar-daylabel {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.2rem;
}
.calendar-daylabel.is-weekend { color: var(--color-primary); }
.calendar-cell {
  min-height: 90px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.3rem;
  font-size: 0.8rem;
  background: #fafbfc;
}
.calendar-cell.is-weekend { background: #eef0f4; }
.calendar-cell.empty { background: transparent; border-color: transparent; }
.calendar-cell .day-num { font-weight: 700; margin-bottom: 0.25rem; color: var(--color-primary); }
.calendar-cell.is-today { border: 2px solid var(--color-primary); }
.calendar-cell.is-today .day-num {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 0 0.4rem;
}
.day-weekday { display: none; } /* na desktope uz je hlavicka Po/Ut/St.../Ne nad mriezkou */
.day-empty-hint { display: none; }
.calendar-item {
  background: #e6f8fd;
  color: var(--color-primary);
  border-radius: var(--radius);
  padding: 0.15rem 0.35rem;
  margin-bottom: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem;
}
.calendar-item.is-actual { background: #eef0f4; color: var(--color-text); font-weight: 600; }
.calendar-item.absence-ok { background: #e2f6ee; color: var(--color-success); }
.calendar-item.celebration { background: #fdf0e6; color: #b8560f; font-weight: 600; }
.calendar-item.absence-warn { background: #fef3c7; color: var(--color-warn); }
.calendar-item.holiday { background: var(--color-primary); color: white; font-weight: 600; }
.calendar-cell.is-holiday { background: #f3f1fb; }
.calendar-item.holiday-workday { background: #fef3c7; color: var(--color-warn); font-weight: 600; }
.calendar-item.weather { background: transparent; color: var(--color-text-muted); padding-left: 0.1rem; font-size: 0.78rem; }
.calendar-item.event { background: #ede9fe; color: #5b21b6; }
.calendar-item.clickable { cursor: pointer; }
.calendar-item.clickable:hover { background: #d9f2fb; }
.calendar-item .cj-weather { color: var(--color-text-muted); font-size: 0.78rem; white-space: nowrap; }
.cj-list { list-style: none; margin: 0.3rem 0 0.8rem; padding: 0; }
.cj-list li { padding: 0.3rem 0; border-bottom: 1px solid #f1f2f5; font-size: 0.88rem; }
.cj-list li:last-child { border-bottom: none; }
#cj-modal-weather { margin-bottom: 0.6rem; }
#company-job-modal h4 { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; color: var(--color-primary); }
.calendar-cell.is-holiday-workday { background: #fffbeb; }
.calendar-item button {
  background: none;
  color: inherit;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}

/* --- Checkbox zoznam (hromadna uprava dochadzky) --- */
.checkbox-list {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.checkbox-list li { font-size: 0.88rem; display: flex; align-items: center; gap: 0.35rem; }
.shift-check-all { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; }
#shift-form .checkbox-list { margin-top: 0.3rem; margin-bottom: 0.8rem; }

/* Vozidlá a zamestnanci pri plánovaní práce vedľa seba v dvoch stĺpcoch, každý zoznam
   pod sebou (nie zalamovaný do riadkov) - kratsie a prehladnejsie ako cez cely riadok. */
.shift-picker-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.shift-picker-col { flex: 1; min-width: 220px; }
.checkbox-list-col {
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 240px;
  overflow-y: auto;
  gap: 0.35rem;
}

/* --- Odznak povodu zaznamu dochadzky --- */
.source-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  white-space: nowrap;
}
.source-badge.manual { background: #fef3c7; color: var(--color-warn); }
.source-badge.checkin { background: #e2f6ee; color: var(--color-success); }
.source-badge.absence { background: #e7e9fb; color: #4338ca; }

/* --- Gantt prehlad neprítomností celej firmy --- */
.gantt-table { font-size: 0.78rem; }
.gantt-table th, .gantt-table td { padding: 0.3rem 0.15rem; text-align: center; white-space: nowrap; }
.gantt-table th:first-child, .gantt-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  padding-right: 0.8rem;
  min-width: 130px;
}
.gantt-table th.is-weekend { color: var(--color-primary); background: #f3f4f7; }
.gantt-day-cell { width: 22px; min-width: 22px; border-radius: 3px; }
.gantt-day-cell.is-weekend { background: #f3f4f7; }
.gantt-day-cell.absence-ok { background: var(--color-success); color: white; }
.gantt-day-cell.absence-warn { background: var(--color-warn); color: white; }

/* --- Rocna statistika neprítomností - meno zostane pevne pri posune na dalsie mesiace --- */
.yearly-stats-table th, .yearly-stats-table td { white-space: nowrap; }
.yearly-stats-table th:first-child, .yearly-stats-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
  padding-right: 0.8rem;
  min-width: 130px;
  box-shadow: 1px 0 0 var(--color-border);
}

/* --- Prístupové práva --- */
.permissions-table { font-size: 0.82rem; }
.permissions-table th, .permissions-table td { text-align: center; padding: 0.4rem 0.5rem; white-space: nowrap; }
.permissions-table th:first-child, .permissions-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  min-width: 140px;
}
.permissions-table th:nth-child(2), .permissions-table td:nth-child(2) { text-align: left; }
.permissions-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.permissions-table input[type="checkbox"]:disabled { cursor: default; opacity: 0.6; }

/* --- Notifikácie --- */
.header-right { display: flex; align-items: center; gap: 0.6rem; }
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  background: var(--color-danger);
  color: white;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  font-family: var(--font-body);
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: white;
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid var(--color-border);
  z-index: 20;
}
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.notif-panel-header .link-btn { font-size: 0.78rem; }
/* tlacidla v paneli notifikacii su na bielom podklade - hlavickove biele "link-btn" by tu boli neviditelne */
header .notif-panel .link-btn { color: var(--color-primary); }
header .notif-panel .link-btn:hover { color: var(--color-primary-dark); }
header .notif-panel .link-btn:disabled { color: var(--color-text-muted); cursor: default; text-decoration: none; }
#notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f1f2f5;
  font-size: 0.85rem;
  cursor: pointer;
}
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: #f0f9fd; font-weight: 500; }
.notif-item .notif-time { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 400; }
.notif-empty { padding: 1.2rem 0.9rem; color: var(--color-text-muted); font-size: 0.85rem; text-align: center; }

/* krátke zvýraznenie karty, na ktorú ťa preklikla notifikácia */
@keyframes notif-flash { from { background: #fff3bf; } to { background: white; } }
.card.notif-flash { animation: notif-flash 1.6s ease-out; }

/* Na telefóne sa panel notifikácií nezmestí vedľa zvončeka - prilepíme ho pod hlavičku
   cez skoro celú šírku obrazovky. */
@media (max-width: 767px) {
  .notif-panel {
    position: fixed;
    top: calc(var(--header-h) + 4px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 70vh;
  }
  .notif-item { white-space: normal; word-break: break-word; }
}

/* --- Jednoduchy zoznam zamestnancov (bez VIEW_TEAM_DATA) - meno + rozbalitelny kontakt --- */
#employees-simple-list { list-style: none; margin: 0; padding: 0; }
#employees-simple-list li { border-bottom: 1px solid var(--color-border); }
#employees-simple-list li:last-child { border-bottom: none; }
#employees-simple-list .clickable { padding: 0.7rem 0.2rem; cursor: pointer; font-weight: 600; }
#employees-simple-list .clickable:hover { background: #f9fafb; }
.employee-contact-detail {
  padding: 0.4rem 0.2rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.employee-contact-detail div:first-child { color: var(--color-text); font-weight: 600; }

/* --- Modalne okno (vyber zakazky pri prichode, potvrdenie pri odchode) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 60, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 1rem;
}
.modal-box {
  position: relative;
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-box h3 { margin-top: 0; color: var(--color-primary); padding-right: 1.8rem; }
/* "✕" na zavretie modalu vpravo hore */
.modal-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.modal-x:hover { background: none; color: var(--color-danger); }

/* Moja dochádzka - prepínanie mesiacov */
.history-month-nav button:disabled { opacity: 0.4; cursor: default; }

/* Zabudnutý odchod - doplnenie času odchodu */
#forgot-checkout-modal label.full-width { margin-bottom: 0.8rem; }
#forgot-checkout-modal input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
#forgot-checkout-modal .hint { margin-top: 0; }

/* --- Núdzové hlásenie --- */
.emergency-box { border-top: 5px solid var(--color-danger); }
.emergency-box h3.emergency-title, #emergency-detail h3 { color: var(--color-danger); }
.emergency-112 {
  display: block;
  margin: 0.6rem 0 0.8rem;
  padding: 0.55rem 0.7rem;
  background: #fde2e7;
  color: var(--color-danger);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.emergency-types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.emergency-types label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.emergency-types input { margin: 0; }
.emergency-types label:has(input:checked) { border-color: var(--color-danger); background: #fde2e7; color: var(--color-danger); font-weight: 600; }
.emergency-desc { display: block; font-size: 0.9rem; margin-bottom: 0.7rem; }
.emergency-desc textarea { display: block; width: 100%; margin-top: 0.3rem; font-family: var(--font-body); padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
#emergency-form .wl-photo-picker { margin-bottom: 0.7rem; }
#emergency-form .checkbox-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; margin-bottom: 0.8rem; }
.emergency-send, button.emergency-send { width: 100%; padding: 0.9rem; font-size: 1rem; background: var(--color-danger); }
button.emergency-send:hover { background: #b91c3a; }
.emergency-banner {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--color-danger);
  color: white;
  padding: 0.55rem 1rem;
}
.emergency-banner button {
  background: none;
  color: white;
  text-align: left;
  font-weight: 600;
  padding: 0.15rem 0;
  font-size: 0.92rem;
}
.emergency-banner button:hover { text-decoration: underline; background: none; }
.emergency-banner.hidden { display: none; }
.em-meta { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.2rem 0; }
.em-desc { white-space: pre-line; margin: 0.6rem 0; font-size: 0.95rem; }
.em-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; margin: 0.4rem 0; background: #eef0f4; }
.em-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.em-actions a, .em-actions button { flex: 1; min-width: 140px; text-align: center; }
.em-actions a.btn-like { justify-content: center; text-decoration: none; }
.em-respond { background: var(--color-success); }
.em-respond:hover { background: #088a5c; }
.em-responses { list-style: none; margin: 0.3rem 0; padding: 0; font-size: 0.88rem; }
.em-responses li { padding: 0.15rem 0; }
.em-resolved { background: #e2f6ee; color: var(--color-success); border-radius: var(--radius); padding: 0.45rem 0.7rem; font-weight: 600; font-size: 0.9rem; }
.modal-options { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; cursor: pointer; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.modal-options button {
  text-align: left;
  background: #f4f5f7;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 600;
  padding: 0.8rem 1rem;
}
.modal-options button:hover { background: #e9ecf3; }
.modal-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.modal-actions button { flex: 1; }
.modal-box label.full-width { display: block; font-size: 0.9rem; }
.modal-box textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}
/* "Zabudnutý príchod" - riadok v Dochádzke zamestnanca čaká na potvrdenie vedúcim */
.forgot-badge { cursor: help; }
tr.row-needs-fix > td { background: #fff7ed; }

/* dôvod zamietnutia priamo v riadku "Moje žiadosti" (viditeľné aj na mobile, nie len tooltip) */
.reject-reason {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: normal;
}

/* Môj profil - modal */
.profile-photo-row { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0 1rem; }
.avatar-circle.avatar-lg { width: 72px; height: 72px; font-size: 2rem; flex-shrink: 0; border-color: var(--color-border); background: #f1f2f5; color: var(--color-text-muted); }
.profile-photo-row .link-btn { display: block; margin-top: 0.4rem; }

/* Mesacna mriezka kalendara (7 stlpcov) sa na uzkom mobile neda pouzit bez posuvania -
   preto tam prepneme na jednoduchy zoznam dni pod sebou (deň + skratka dňa v tyzdni,
   vedla neho polozky dna). Prazdne "vyplnove" bunky pred 1. dnom mesiaca sa vynechaju.
   Pravidlo je zamerne az na konci suboru, aby v CSS kaskade urcite prebilo zakladne
   (nemedia) .calendar-grid/.calendar-cell pravidla definovane vyssie. */
@media (max-width: 767px) {
  .calendar-daylabel { display: none; }
  .calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-template-columns: none;
  }
  .calendar-cell.empty { display: none; }
  .calendar-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: unset;
    padding: 0.5rem 0.6rem;
  }
  .calendar-cell .day-num {
    flex-shrink: 0;
    width: 3.6rem;
    margin-bottom: 0;
    padding-top: 0.1rem;
    line-height: 1.2;
  }
  .day-weekday {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .calendar-cell .day-items { flex: 1; min-width: 0; }
  .day-empty-hint { display: inline; color: var(--color-text-muted); font-size: 0.85rem; }
  .calendar-item { white-space: normal; }
}

/* --- Push notifikacie (prepinac v paneli notifikacii) --- */
.push-row { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.2rem; }
.push-row .link-btn { align-self: flex-start; font-size: 0.82rem; }
.push-row .hint { margin: 0; font-size: 0.74rem; }

/* --- Naplanovanie prace: velke pole na detail prac a material --- */
.shift-note-field { display: block; margin: 0.6rem 0; font-size: 0.82rem; color: var(--color-text-muted); }
.shift-note-field textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-text);
  resize: vertical;
  min-height: 7rem;
}
/* poznamka v bunke kalendara - viac riadkov, v bunke skratena na 3 riadky, klik ju rozbali */
.shift-note { display: block; white-space: pre-wrap; font-weight: 400; margin-top: 0.15rem; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shift-note.expanded { display: block; overflow: visible; }
.cj-note { white-space: pre-wrap; }

/* --- Detail / uprava naplanovanej prace (klik na pracu v kalendari) --- */
.calendar-item.shift-item { cursor: pointer; }
.calendar-item.shift-item:hover { filter: brightness(0.96); }
.shift-edit-box { max-width: 520px; width: calc(100% - 2rem); max-height: 90vh; overflow-y: auto; }
.shift-edit-box form > label { display: block; margin-bottom: 0.6rem; font-size: 0.82rem; color: var(--color-text-muted); }
.shift-edit-box form > label input, .shift-edit-box form > label select { display: block; width: 100%; margin-top: 0.3rem; }
.shift-note-view { white-space: pre-wrap; background: #f6f7fa; border-radius: var(--radius); padding: 0.7rem 0.8rem; min-height: 3rem; font-size: 0.92rem; }
.shift-edit-danger { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); text-align: right; }
.shift-view-label { margin: 1rem 0 0.4rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
#shift-edit-readonly .stat-row { gap: 1rem; }
#shift-edit-readonly .stat-row strong { text-align: right; }

/* --- Zbalitelne karty (Naplanovat pracu, Vytvorit udalost, Statne sviatky) - rozbalia sa klikom na nadpis --- */
.collapsible-card > h2 { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.collapsible-card > h2::after { content: "▾"; font-size: 0.9rem; color: var(--color-text-muted); transition: transform 0.15s; }
.collapsible-card.collapsed > h2::after { transform: rotate(-90deg); }
.collapsible-card.collapsed > h2 { margin-bottom: 0; }
.collapsible-card.collapsed > :not(h2) { display: none !important; }

/* --- Oprávnenia a školenia --- */
.qual-select-label { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.8rem; }
.qual-select-label select { display: block; margin-top: 0.3rem; min-width: min(260px, 100%); max-width: 100%; }
.qual-status { font-weight: 600; white-space: nowrap; }
.qual-status.ok { color: var(--color-success); }
.qual-status.soon { color: var(--color-warn); }
.qual-status.expired, .qual-status.missing { color: var(--color-danger); }
.qual-status.history { color: var(--color-text-muted); font-weight: 400; }
.vehicle-deadline-hint { margin: 0.7rem 0 0.2rem; }
#vehicle-deadline-form-toggle { margin-top: 0.4rem; }

/* Vozový park - súhrn vlastníkov nad zoznamom */
.vehicle-owner-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.vehicle-owner-summary.hidden { display: none; }
.owner-chip { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.82rem; }

/* Stav termínu ako ikona (tabuľky vozidiel na mobile) */
.qual-status-icon { display: inline-block; min-width: 1.2em; text-align: center; font-size: 1.1rem; line-height: 1; }
.status-legend .qual-status { font-size: 1rem; }

/* --- Dostupnosť (brigádnik/dohodár/živnostník) --- */
.availability-bar { background: #f1f8fd; border: 1px solid #cfe8f6; border-radius: var(--radius); padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.availability-bar.is-editing { background: #fff8e6; border-color: #f3d48b; }
.availability-bar .availability-text { margin: 0 0 0.4rem; font-size: 0.9rem; }
.availability-bar .btn-row { margin: 0; flex-wrap: wrap; gap: 0.4rem; }
.availability-bar .hint { margin: 0.4rem 0 0; }
.calendar-cell.is-unavailable {
  background: repeating-linear-gradient(135deg, #f1f2f5, #f1f2f5 6px, #e7e9ee 6px, #e7e9ee 12px);
  color: var(--color-text-muted);
}
.calendar-cell.is-unavailable .day-num { color: var(--color-text-muted); }
.calendar-item.availability-on { background: #e2f6ee; color: var(--color-success); font-weight: 600; }
.calendar-item.availability-off { background: transparent; color: var(--color-text-muted); font-weight: 600; }
.calendar-cell.avail-editable { cursor: pointer; outline: 1px dashed var(--color-accent); outline-offset: -3px; }
.calendar-cell.avail-editable:hover { box-shadow: inset 0 0 0 2px var(--color-accent); }
.avail-note-btn { float: right; background: none; border: none; padding: 0 0.15rem; font-size: 0.85rem; cursor: pointer; line-height: 1; }

/* značky pri ľuďoch v "Naplánovať prácu" */
.avail-badge { font-size: 0.78rem; font-weight: 700; margin-left: 0.25rem; white-space: nowrap; }
.avail-badge.ok { color: var(--color-success); }
.avail-badge.partial { color: var(--color-warn); }
.avail-badge.no { color: var(--color-danger); }

/* karta Dostupnosť (Firemný kalendár) */
.avail-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin: 0.4rem 0 0.9rem; }
.avail-weekday {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.4rem 0.1rem; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: white; color: var(--color-text); cursor: pointer; font: inherit; min-width: 0;
}
.avail-weekday.is-off { background: #eef0f4; }
.avail-weekday.is-today { border-color: var(--color-primary); }
.avail-weekday.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.avail-weekday .avail-wd { font-weight: 700; font-size: 0.8rem; }
.avail-weekday .avail-date { font-size: 0.72rem; opacity: 0.85; }
.avail-weekday .avail-count { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.avail-weekday .avail-free { font-size: 0.68rem; color: var(--color-success); white-space: nowrap; }
.avail-weekday.is-selected .avail-free { color: #b9f3d9; }
.avail-day h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.avail-group { margin-bottom: 0.7rem; }
.avail-group h4 { margin: 0 0 0.25rem; font-size: 0.88rem; }
.avail-group ul { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.avail-group li { margin: 0.1rem 0; }
.avail-group .avail-job { margin: 0.3rem 0 0.1rem; font-weight: 600; font-size: 0.85rem; }
.avail-tag { font-size: 0.7rem; background: #eef0f4; color: var(--color-text-muted); border-radius: 999px; padding: 0.05rem 0.4rem; }

.avail-section { border-top: 1px solid var(--color-border); padding-top: 0.6rem; margin-top: 0.4rem; }
.avail-section .avail-section-title { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--color-primary); }

/* pomocné triedy (inline style="" blokuje CSP) */
.nowrap { white-space: nowrap; }
.input-narrow { width: 90px; }
@media (max-width: 767px) {
  /* v rozbalenom detaile vozidla na mobile radšej zalomiť (tlačidlá pod seba), inak by vznikol posuvník */
  #vehicle-detail td.nowrap { white-space: normal; }
}

/* Počiatočný stav - tlačidlo na výber súboru a náhľad importu */
.file-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  background: var(--color-primary); color: white; border-radius: var(--radius);
  padding: 0.55rem 1rem; font-weight: 600; font-size: 0.9rem;
}
.file-btn:hover { background: var(--color-primary-dark); }
#opening-preview table td, #opening-current-table td { font-size: 0.85rem; }
tr.row-muted td { color: var(--color-text-muted); }
#opening-current-wrap { margin-top: 0.8rem; }
#opening-current-wrap summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }
@media (max-width: 767px) {
  /* Oprávnenia: tlačidlá ✏️ ✕ v tabuľkách na mobile pod seba, aby nevznikol posuvník */
  #tab-qualifications td.nowrap, #tab-ppe td.nowrap { white-space: normal; }
}
@media (max-width: 767px) {
  /* úprava záznamu oprávnenia v riadku: dlhé názvy vo výbere nesmú roztiahnuť tabuľku */
  #tab-qualifications td .inline-form > *, #tab-ppe td .inline-form > * { max-width: 100%; }
  #tab-qualifications td .inline-form select { width: 100%; }
}

/* automatická dochádzka (doplnené do normy) */
.source-badge.auto { background: #ede9fe; color: #5b21b6; }
tr.row-auto td { color: var(--color-text-muted); }

/* neprítomnosť (dovolenka, PN...) v histórii dochádzky */
.source-badge.leave { background: #e0f2fe; color: #0369a1; }
.source-badge.pending { background: #fef3c7; color: var(--color-warn); }
tr.row-leave td { color: #0369a1; }

/* Prehľad neprítomností: víkend/sviatok v rámci neprítomnosti - svetlejší a šrafovaný (nečerpá sa) */
.gantt-day-cell.absence-ok.is-off-day { background: repeating-linear-gradient(135deg, #b7e6d3, #b7e6d3 3px, #d9f3e8 3px, #d9f3e8 6px); }
.gantt-day-cell.absence-warn.is-off-day { background: repeating-linear-gradient(135deg, #f6d29a, #f6d29a 3px, #fbe8c8 3px, #fbe8c8 6px); }
.gantt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.5rem; }
.gantt-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.gantt-swatch.absence-ok { background: var(--color-success); }
.gantt-swatch.absence-warn { background: var(--color-warn); }
.gantt-swatch.absence-ok.is-off-day { background: repeating-linear-gradient(135deg, #b7e6d3, #b7e6d3 3px, #d9f3e8 3px, #d9f3e8 6px); }

/* Moje úlohy (pod Môj kalendár) */
#my-tasks {
  display: block; width: 100%; min-height: 9rem; resize: vertical; box-sizing: border-box;
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45;
  padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius);
}
#my-tasks:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
#my-tasks-status { min-height: 1.2em; margin: 0.3rem 0 0; }

/* avatar v zozname zamestnancov */
.emp-name-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-bg); border: 1px solid var(--color-border); }
.emp-avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--color-primary); background: #ece9fb; }
/* končiace zmluvy */
#card-contracts.is-empty { display: none; }
.contracts-list { list-style: none; margin: 0; padding: 0; }
.contracts-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); }
.contracts-list li:last-child { border-bottom: none; }
.contract-indefinite-label { display: inline-flex; align-items: center; gap: 0.3rem; }

/* tlačidlo pod tabuľkou v karte - odstup od tabuľky, popis pod ním */
.card-actions { margin-top: 0.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.card-actions .hint { margin: 0; }

/* logo v hlavičke = tlačidlo na obnovenie appky */
.logo-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; border-radius: var(--radius); }
.logo-btn:hover, .logo-btn:focus-visible { background: none; opacity: 0.85; }
.logo-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.logo-btn:active .header-logo { transform: rotate(-12deg); transition: transform 0.15s; }

/* udalosť pre celú firmu - výraznejšia */
.calendar-item.event.company-wide { background: #dbeafe; color: #1e40af; font-weight: 600; }
.event-company-wide-label { font-weight: 600; }

/* deň v kalendári, na ktorý ťa preklikla notifikácia - na chvíľu farebne označený, potom plynulo zmizne */
#calendar-grid .calendar-cell { transition: background-color 1s ease, box-shadow 1s ease; }
#calendar-grid .calendar-cell.day-highlight {
  background: #fff3bf !important;
  box-shadow: inset 0 0 0 3px #f59e0b;
  animation: day-pulse 0.7s ease-in-out infinite alternate;
  transition: none;
}
@keyframes day-pulse {
  from { background-color: #fff3bf; box-shadow: inset 0 0 0 3px #f59e0b; }
  to { background-color: #fde68a; box-shadow: inset 0 0 0 3px #f59e0b, 0 0 0 4px rgba(245, 158, 11, 0.45); }
}
/* bublina hore (kam ťa preklikla notifikácia) */
.app-toast {
  position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: #1f2937; color: #fff; padding: 0.55rem 1rem; border-radius: 999px;
  font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); max-width: calc(100vw - 32px);
}

/* firemný kalendár: viac plánov na tej istej zákazke v ten deň - podnadpis (poznámka / mená) */
.calendar-item:has(.cj-plan-sub) { flex-wrap: wrap; }
.cj-plan-sub { display: block; flex-basis: 100%; font-size: 0.72rem; font-weight: 400; opacity: 0.85; }

/* výrez profilovej fotky */
/* otvára sa z okna Môj profil - musí byť nad ním (všetky okná majú z-index 60) */
#avatar-crop-modal { z-index: 70; }
.avatar-crop-box { max-width: 360px; width: calc(100% - 2rem); text-align: center; }
.avatar-crop-stage {
  position: relative; width: min(280px, 72vw); aspect-ratio: 1 / 1; margin: 0.6rem auto;
  overflow: hidden; border-radius: var(--radius); background: #111; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage canvas { display: block; width: 100%; height: 100%; }
.avatar-crop-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5);
}
.avatar-crop-zoom { display: flex; align-items: center; gap: 0.6rem; justify-content: center; font-size: 0.85rem; color: var(--color-text-muted); }
.avatar-crop-zoom input { flex: 1; max-width: 200px; }

/* núdzové hlásenie: komu */
.emergency-to { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.6rem 0 0.3rem; }
.emergency-to-title { font-weight: 600; }
.emergency-to label { display: inline-flex; align-items: center; gap: 0.3rem; }
.emergency-people { max-height: 220px; overflow-y: auto; margin: 0 0 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.4rem 0.6rem; }

/* profilové fotky: klik = zväčšiť */
img.emp-avatar { cursor: zoom-in; }
.photo-lightbox img.is-avatar { width: min(90vw, 85vh, 600px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ev-head { display: flex; align-items: center; gap: 0.8rem; }
.ev-head h2 { margin: 0; }
#ev-avatar .emp-avatar { width: 64px; height: 64px; font-size: 1.4rem; }

/* prečítanie plánu (Firemný kalendár) */
.cj-read { font-size: 0.72rem; font-weight: 600; color: #b45309; white-space: nowrap; }
.cj-read.all { color: var(--color-success); }
.cj-read-yes { font-size: 0.8rem; color: var(--color-success); white-space: nowrap; }
.cj-read-no { font-size: 0.8rem; color: #b45309; white-space: nowrap; }
.cj-read-hint { margin: -0.3rem 0 0.3rem; font-size: 0.75rem; }