/* ==========================================================================
   MAIN (refactored) — structured, deduplicated, and commented
   Source: merged from your current main.css
   ========================================================================== */
/* sjednocení výchozí typografie ovládacích prvků */
button, input, select, textarea { 
  font: inherit; 
  color: inherit;
}

/* ==========================================================================
   1) DESIGN TOKENS (light)
   ========================================================================== */

:root{
  /* Brand palette */
  --primary:#4a6fa5;
  --primary-light:#5d8bc6;
  --secondary:#166088;
  --accent:#4fc3f7;
  --accent-light:#80d6ff;

  /* Neutrals */
  --light:#f8f9fa;
  --light-gray:#eef2f6;
  --dark:#212529;
  --gray:#6c757d;

  /* Semantic */
  --success:#28a745;
  --success-light:#3dd15d;
  --warning:#ffc107;
  --warning-light:#ffd54f;
  --danger:#dc3545;
  --danger-light:#ff6b72;

  /* Effects */
  --box-shadow:0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow:var(--box-shadow);

  /* Surface & text */
  --bg:#f6f7fb;
  --bg-gradient:
    radial-gradient(900px 400px at 80% -10%, rgba(74,111,165,.14), transparent 55%),
    radial-gradient(700px 300px at 10% -10%, rgba(79,195,247,.10), transparent 60%);
  --card:#ffffff;
  --border:var(--light-gray);
  --text:var(--dark);
  --muted:#5b6b80;

  /* Brand bridge */
  --brand:var(--primary);
  --brand-2:var(--primary-light);
  --accent-bridge:var(--accent);

  /* Table head */
  --head:#134d6b;      /* darker of secondary */
  --head-text:#ffff;

  /* Table zebra/hover */
  --zebra:#eaf4ff;
  --hover:#eaf4ff;
  --chip:#eef3f8;

  /* Misc */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --radius-1:10px; --radius-2:12px; --radius-3:18px;
  --container:1400px; --ease:cubic-bezier(.22,1,.36,1);
  --speed-1:140ms; --speed-2:240ms;
}

/* ==========================================================================
   2) DESIGN TOKENS (dark)
   ========================================================================== */
html[data-theme="dark"], body.dark-mode{
  --primary:#6f95c7;
  --primary-light:#86a9d8;
  --secondary:#1e6f9c;
  --accent:#6fd2ff;
  --accent-light:#8ae2ff;

  --bg:#0b0f19;
  --bg-gradient:
    radial-gradient(1000px 420px at 70% -10%, rgba(110,171,230,.20), transparent 60%),
    radial-gradient(800px 340px at 0% -10%, rgba(111,210,255,.12), transparent 65%);
  --text:#e6e8ef;
  --muted:#9aa3b2;
  --card:#0f1525;
  --border:#212a3c;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);

  --head:#11354b;
  --head-text:#e6e8ef;

  --zebra:#eaf4ff0;
  --hover:#101a2c;
  --chip:#101834;
}

/* ==========================================================================
   3) RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:var(--font); line-height:1.6;
  background: var(--bg-gradient), var(--bg); font-size:16px;
}
h1,h2,h3{line-height:1.2;margin:0 0 .6em}
h1{
  font-size:1.8rem; margin-bottom:5px; font-weight:700;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
h2{font-size:clamp(20px,2.2vw,26px)}
h2h1{
  font-size:1.8rem; margin-bottom:5px; font-weight:700;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
h3{font-size:clamp(18px,2vw,22px)}
a{color:var(--brand);text-decoration:none;transition:color var(--speed-1) var(--ease)}
a:hover{color:var(--brand-2)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:18px}

/* ==========================================================================
   4) HEADER (dashboard vibe)
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100; /* ať je nad obsahem */
  border-bottom:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--head) 70%, transparent), transparent 100%),
    color-mix(in oklab, var(--head) 35%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
}
.header-inner{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--head-text);font-weight:800;letter-spacing:.2px;text-decoration:none;transition:opacity var(--speed-1) var(--ease)}
.brand:hover{opacity:.9}
.brand-mark{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:linear-gradient(135deg, var(--brand), var(--accent-bridge));color:#0b0f19;font-weight:900;
  box-shadow: 0 6px 16px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.35)
}
nav.primary{display:flex;align-items:center;gap:12px}
.nav-list{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.nav-list a{
  display:inline-flex;align-items:center;gap:.5rem;padding:10px 12px;border-radius:12px;color:var(--head-text);
  transition: background var(--speed-1) var(--ease), transform var(--speed-1) var(--ease)
}
.nav-list a:hover{background:color-mix(in oklab, var(--head-text) 12%, transparent)}
.nav-list a:active{transform:translateY(1px)}
.nav-list a.active{
  background:linear-gradient(135deg, var(--brand), var(--accent-bridge));color:#0b0f19;font-weight:700;
  box-shadow: 0 6px 18px rgba(0,0,0,.18)
}
.nav-toggle{
  display:none;background:color-mix(in oklab, var(--head-text) 8%, transparent);color:var(--head-text);
  border:1px solid color-mix(in oklab, var(--head-text) 18%, transparent);padding:8px 12px;border-radius:12px;cursor:pointer
}



/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1px 5px;border-radius:5px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;font-weight:700;
  transition: transform var(--speed-1) var(--ease), filter var(--speed-1) var(--ease)
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--ghost{
  background:color-mix(in oklab, var(--head-text) 0%, transparent);color:var(--head-text);
  border:1px solid color-mix(in oklab, var(--head-text) 22%, transparent);box-shadow:none
}
.btn--ghost:hover{background:color-mix(in oklab, var(--head-text) 10%, transparent)}

/* Logout button – bere barvy z danger palety, zbytek z .btn */
.btn.btn-logout{
  background: linear-gradient(135deg, var(--danger), var(--danger-light));
  color:#fff;
  border-color: color-mix(in oklab, var(--danger), var(--danger-light) 40%, transparent);
}
.btn.btn-logout:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.btn.btn-logout:active{ transform:translateY(0) scale(.99); }

/* Theme toggle – 3 stavy: light (sun), dark (moon), auto (hybrid) */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:38px; padding:0; border-radius:12px; position:relative;
}
.theme-toggle .icon {
  position:absolute;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  opacity:0; transform: scale(.9);
}

/* výchozí skrytí */
.theme-toggle .icon-sun  { opacity:0; transform: scale(.9); }
.theme-toggle .icon-moon { opacity:0; transform: scale(.9); }
.theme-toggle .icon-auto { opacity:0; transform: scale(.9); }

/* uložený mód = light → slunce */
.theme-toggle[data-mode="light"] .icon-sun  { opacity:1; transform: scale(1); }
/* uložený mód = dark  → měsíc */
.theme-toggle[data-mode="dark"]  .icon-moon { opacity:1; transform: scale(1); }
/* uložený mód = auto → hybrid */
.theme-toggle[data-mode="auto"]  .icon-auto { opacity:1; transform: scale(1); }

/* vzhled ghost tlačítka */
.theme-toggle.btn--ghost {
  background: color-mix(in oklab, var(--head-text) 0%, transparent);
  border: 1px solid color-mix(in oklab, var(--head-text) 22%, transparent);
}
.theme-toggle.btn--ghost:hover {
  background: color-mix(in oklab, var(--head-text) 10%, transparent);
}
/* ==========================================================================
   5) LAYOUT & CARDS
   ========================================================================== */
.section{padding:28px 0}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-2); box-shadow:var(--shadow); padding:20px
}
/* Work report page uses flat outer card */
.page-work-report .section.card{border:none;box-shadow:none}

/* ==========================================================================
   6) FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--border);background: color-mix(in oklab, var(--head) 8%, transparent);margin-top:24px}
.footer-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-nav{display:flex;gap:14px}
.footer-nav a{color:var(--muted)}
.footer-nav a:hover{color:var(--text)}

/* ==========================================================================
   7) FILTERS (boxy)
   ========================================================================== */
#toggleFilters{display:none}
#filtersForm{
  max-width: 1600px;
  width: 100%;
  margin: 12px auto 20px 0; /* top right bottom left → levý = auto */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: max-height .3s, padding .3s;
}
#filtersForm.expanded{max-height:800px;padding:16px}
#filtersForm div:first-child{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
#filtersForm button,
#filtersForm a.btn{
  padding: 2px 5px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 0px 0px rgba(99, 76, 255, .25);

  margin-top: 10px;              /* ← posun o 5 px dolů */
 margin-bottom: 10px;
}
#filtersForm button:hover,#filtersForm a.btn:hover{filter:brightness(1.03)}
.flex-row{display:flex;flex-wrap:wrap;gap:12px}
fieldset{flex:1 1 200px;border:1px solid var(--border);border-radius:12px;background:var(--chip);padding:10px}
legend{font-weight:700;color:var(--brand-2)}
.scroll-box{max-height:140px;overflow-y:auto;padding:4px}
.checkbox-label{display:block;margin-bottom:6px;font-size:.95rem}

/* ==========================================================================
   8) TABLES (desktop)
   ========================================================================== */
.table-container{max-width:1600px;margin:0 auto 30px;overflow-x:auto}
.table td { overflow-wrap:anywhere; word-break:break-word; }
.table { table-layout: fixed; }
.table th, .table td { white-space: normal; } /* ať může lámat text */
.table {
  table-layout: fixed; /* pevné rozdělení šířek */
  width: 100%;         /* drž se v rodiči */
}

.table th, .table td {
  word-break: break-word; /* zalomí i dlouhá slova/jména */
  overflow-wrap: anywhere;
}

/* Shared table base */
.table, .reports-table{
  width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow);font-size:.95rem
}
.table thead th, .reports-table thead th{
  background:var(--head);color:var(--head-text);font-weight:700;text-align:left;padding:12px 14px;position:sticky;top:0;z-index:1
}
.table tbody td, .reports-table tbody td{
  padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);
  font-variant-numeric: tabular-nums;
}
.table tbody tr:nth-child(even) td, .reports-table tbody tr:nth-child(even) td{background:var(--zebra)}
.table tbody tr:hover td, .reports-table tbody tr:hover td{background:var(--hover)}

/* Sorting indicators */
.reports-table th.sorted-asc::after, .reports-table th.sorted-desc::after{opacity:.8;margin-left:.25rem}
.reports-table th.sorted-asc::after{content:"▲"}
.reports-table th.sorted-desc::after{content:"▼"}

/* Alignment helpers */
td.num, th.num{ text-align:right }
td.center, th.center{ text-align:center }

/* Work report – group rows & visible columns */
.reports-table tr.group-header td{
  background:color-mix(in oklab, var(--brand) 32%, var(--card))!important;
  color:var(--text)!important; font-weight:700; border-bottom:1px solid var(--border);
}
.reports-table tr.group-aggregate td{
  background:color-mix(in oklab, var(--brand) 22%, var(--card))!important;
  color:var(--text)!important; font-weight:700;
}
/* === WR: viditelné sloupce + šířka tabulky (fix prázdného pruhu) === */
.table-container{
  max-width:1600px;
  margin:0 auto 30px;
  overflow-x:auto;
  width:100%;
}
.reports-table{
  width:100%;
  table-layout:auto;         /* dovol prohlížeči rozdělit šířky podle obsahu */
  border-collapse:collapse;
}

/* defaultně skryj vše a povol jen potřebné sloupce */
.reports-table :is(th,td){ display:none; }
.reports-table :is(th,td):nth-child(2),  /* Událost */
.reports-table :is(th,td):nth-child(3),  /* Práce (datum/čas) */
.reports-table :is(th,td):nth-child(4),  /* hod/Kč (klikací hod/min) */
.reports-table :is(th,td):nth-child(8),  /* celkem */
.reports-table :is(th,td):nth-child(10){ /* Pracovník */
  display:table-cell;
}

/* varianta bez sloupce "Pracovník" – dej na <table> class="no-worker-col" */
.reports-table.no-worker-col :is(th,td):nth-child(10){ display:none; } /* neexistuje */
.reports-table.no-worker-col :is(th,td):nth-child(9){  display:table-cell; } /* "celkem" je poslední viditelný */

/* zalamování a šířky */
.reports-table :is(th,td):nth-child(2){
  max-width:none;            /* zruší původní 300px, ať se může roztáhnout */
  white-space:normal;
  word-break:break-word;
}
.reports-table :is(th,td):nth-child(3){ white-space:nowrap; }

/* pojistky – ať nic neurčuje pevné šířky buněk */
.reports-table th, .reports-table td{ width:auto; }

/* ==========================================================================
   9) MOBILE CARDS (responsive)
   ========================================================================== */
@media (max-width: 767px){
  #filtersForm.expanded{max-height:none!important;height:auto!important;overflow:visible!important}
  #filtersForm.expanded{
    background:var(--card)!important;padding:16px!important;border:1px solid var(--border)!important;
    border-radius:12px!important;margin-bottom:1.5rem!important
  }
  #toggleFilters{
    display:block;margin:12px auto 16px;padding:10px 20px;background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;
    border:1px solid color-mix(in oklab, var(--border) 70%, transparent);border-radius:12px;font-size:1rem;cursor:pointer;font-weight:700;box-shadow: 0 8px 18px rgba(99, 76, 255, .25)
  }
  #filtersForm:not(.expanded){display:none}

  .table-container,.reports-table{display:none}
  html,body{margin:0;padding:0;overflow-x:hidden}

  .report-cards{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0;margin:0 auto;width:100%}
  .report-card-table{
    width:100%;max-width:360px;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;
    background:var(--card);box-shadow:var(--shadow);font-size:.95rem;color:var(--text);overflow:hidden
  }
  .report-card-table tr:first-child td{
    background:var(--head);color:var(--head-text);font-weight:700;text-align:left;padding:14px 16px;
    white-space:normal;word-break:break-word
  }
  .report-card-table td{
    padding:12px 14px;border-bottom:1px solid var(--border);
    background:var(--card);text-align:left;white-space:nowrap;word-break:break-word
  }
  .report-card-table tr:last-child td{border-bottom:none}
  .report-card-table tr:last-child td:first-child{border-bottom-left-radius:12px}
  .report-card-table tr:last-child td:last-child{border-bottom-right-radius:12px}
}

/* ==========================================================================
   10) PRINT & ANIMATIONS
   ========================================================================== */
@media print{
  .site-header, #toggleFilters, #filtersForm, .report-cards{display:none!important}
  .card, .table, .reports-table, .report-card-table{ box-shadow:none!important; border:1px solid #ddd }
}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card, .header-inner, .table, .reports-table{ animation:fadeIn .5s ease-out both }

/* ==========================================================================
   11) UTILITIES & BRIDGE
   ========================================================================== */
/* Participants list */
.participant-list{ margin:0; padding-left:1.2rem; list-style:disc; }
.participant-list li{ margin-bottom:.3rem; }
/* Add participant grid */
.add-participant-wrapper{
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto;
  column-gap:6px; row-gap:4px; align-items:start; margin-top:6px;
}
.ap-btn{ grid-row:1 / span 2; align-self:center; }
/* Month header row */
.month-row{ background: var(--zebra); font-weight:700; }
/* No participants highlight */
.no-parts{ background: color-mix(in oklab, var(--danger-light) 35%, var(--card)); }

/* Fallback styling for plain <table> (when .table/.reports-table aren't used) */
table:not(.reports-table):not(.table):not(.report-card-table){
  width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); font-size:.95rem; margin-top:10px;
}
table:not(.reports-table):not(.table):not(.report-card-table) thead th{
  background:var(--head); color:var(--head-text); font-weight:700; text-align:left;
  padding:12px 14px; position:sticky; top:0; z-index:1;
}
table:not(.reports-table):not(.table):not(.report-card-table) tbody td{
  padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text);
  font-variant-numeric: tabular-nums;
}
table:not(.reports-table):not(.table):not(.report-card-table) tbody tr:nth-child(even) td{ background:var(--zebra); }
table:not(.reports-table):not(.table):not(.report-card-table) tbody tr:hover td{ background:var(--hover); }

/* ==========================================================================
   12) EVENTS PAGE — unified with Work report (single, final block)
   ========================================================================== */
.events-filters{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px; margin-bottom:12px;
}

/* Exact same base as .reports-table */
table.events-table-keep{
  width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); font-size:.95rem;
}
table.events-table-keep thead th{
  background:var(--head); color:var(--head-text); font-weight:700; text-align:left;
  padding:12px 14px; position:sticky; top:0; z-index:1; border:0; border-bottom:1px solid var(--border);
}
table.events-table-keep tbody td{
  padding:12px 14px; border:0; border-bottom:1px solid var(--border);
  vertical-align:middle; color:var(--text); font-variant-numeric: tabular-nums;
}
table.events-table-keep tbody tr:nth-child(even) td{ background:var(--zebra); }
table.events-table-keep tbody tr:hover td{ background:var(--hover); }
/* (inherits .month-row, .no-parts, .participant-list, .add-participant-wrapper from Utilities) */

/* Šipky u aktuálně řazeného sloupce – jen jeden odkaz + jedna šipka */
.table thead th a.sorted-asc::after,
.events-table-keep thead th a.sorted-asc::after{
  content: "▲";
  margin-left: .35rem;
  opacity: .85;
}
.table thead th a.sorted-desc::after,
.events-table-keep thead th a.sorted-desc::after{
  content: "▼";
  margin-left: .35rem;
  opacity: .85;
}

/* volitelně: nezvýrazněné (neaktuální) nadpisy lehce tlumit */
.table thead th a:not(.sorted-asc):not(.sorted-desc),
.events-table-keep thead th a:not(.sorted-asc):not(.sorted-desc){
  opacity: .9;
}
.table thead th a:hover,
.events-table-keep thead th a:hover{
  opacity: 1;
}

/* ukotvit dropdown k nav */
nav.primary { position: relative; }

/* mobilní menu */


nav.primary { position: relative; }            /* kotevní prvek pro absolutní menu */

@media (max-width:860px){
  .nav-list.is-open { display: flex !important; }  /* vynutí zobrazení */
}

.card[role="alert"] { background: var(--chip); border-color: var(--border); }
.card[role="alert"].ok { /* zelenější */ }
.card[role="alert"].err { /* červenější */ }

/* ==========================================
   Add Work Report — scoped styles
   ========================================== */
.wr-add{ max-width:900px; margin:0 auto; }
.wr-head{ margin-bottom:14px; }
.wr-head h2{ margin:0 0 .25rem; }
.wr-head .wr-sub{ margin:0; color:var(--muted); }

/* alert (chyba) v rámci karty */
.wr-alert{
  margin-bottom:12px;
  padding:12px 14px;
  border:1px solid color-mix(in oklab, var(--danger-light) 35%, var(--border));
  background: color-mix(in oklab, var(--danger-light) 18%, var(--card));
  border-radius: var(--radius-2);
}
.wr-alert.err{ color:var(--text); }

/* grid formuláře */
.wr-form{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px 14px;
}
@media (min-width: 760px){
  .wr-form{ grid-template-columns: 1fr 1fr; }
  .wr-form .span-2{ grid-column: 1 / -1; }
}

/* pole */
.wr-form .field{ display:flex; flex-direction:column; gap:6px; }
.wr-form label{ font-weight:600; color:var(--text); }
.wr-form .help{ font-size:.9rem; color:var(--muted); }

/* inputs */
.wr-form input,
.wr-form select,
.wr-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius: var(--radius-2);
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  transition: border-color var(--speed-1) var(--ease), box-shadow var(--speed-1) var(--ease);
}
.wr-form textarea{ min-height:120px; resize:vertical; }
.wr-form input:focus,
.wr-form select:focus,
.wr-form textarea:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* akce */
.wr-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  padding-top:4px;
  border-top:1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  margin-top:4px;
}

/* drobnosti */
.wr-form input[type="number"]{ -moz-appearance:textfield; }
.wr-form input[type="number"]::-webkit-outer-spin-button,
.wr-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#ID_events{ white-space:normal; }

/* Formulářová tabulka nemá být full-width */
.table--form { 
  width: auto;              /* zruší width:100% z .table */
  border-collapse: separate;
  margin: 0 auto;           /* vycentruj v kartě */
  max-width: 720px;         /* volitelně omez maximum */
}

/* Levý sloupec (popisky) užší a nezalomené */
.table--form td:first-child {
  white-space: nowrap;
  width: 200px;             /* můžeš upravit */
  vertical-align: middle;
  opacity: .9;              /* jemnější styl popisku, volitelně */
}

/* Pravý sloupec – vstupy rozumné šířky, ať nejedou na 100% karty */
.table--form .input,
.table--form input[type="text"],
.table--form input[type="email"],
.table--form input[type="password"],
.table--form input[type="date"] {
  width: clamp(240px, 40ch, 100%);
  box-sizing: border-box;
}

/* Akční řádek s tlačítky */
.table--form .form-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-start;
}

/* Wrapper zúží oblast na velikost obsahu a vycentruje */
.personal-container .form-narrow{
  width: max-content;       /* shrink-to-fit obsah */
  max-width: 100%;          /* ať to nepřeteče na mobilu */
  margin: 0 auto;           /* centrování v kartě */
}

/* Formulářová tabulka – zrušíme 100% šířku z globálu */
.personal-container table.table--form{
  width: max-content !important; /* přebije table{width:100%} */
  display: inline-table;         /* lépe se chová pro shrink-to-fit */
  table-layout: auto;            /* nechť se šířky dopočtou dle obsahu */
  border-collapse: separate;     /* kosmetika; zabraňuje rozlévání */
}

/* Levý sloupec: popisky kompaktní */
.personal-container .table--form td:first-child{
  white-space: nowrap;
  width: 200px;                 /* uprav dle potřeby (180–240px) */
  vertical-align: middle;
}

/* Pravý sloupec: vstupy rozumné šířky (ne 100%) */
.personal-container .table--form .input,
.personal-container .table--form input[type="text"],
.personal-container .table--form input[type="email"],
.personal-container .table--form input[type="password"],
.personal-container .table--form input[type="date"]{
  width: clamp(260px, 40ch, 60ch); /* 260px min, cca 40ch ideál, 60ch max */
  box-sizing: border-box;
}

/* Řádek s tlačítky */
.personal-container .table--form .form-actions{
  display: flex;
  gap: .5rem;
  justify-content: flex-start;
}

/* === PERSONAL FORM === */
.personal-container {
  max-width: 900px;
  margin: 0 auto;
}

.personal-container .success {
  color: #0a7a3c;
}

.personal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: start;
}

.personal-form-row {
  display: contents;
}

.personal-form-row > label {
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.3;
}

.personal-form-row > .field {
  display: flex;
  flex-direction: column;
}

.personal-form-row .input,
.personal-form-row .field input,
.personal-form-row .field select,
.personal-form-row .field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--table-border, #dfe3e8);
  border-radius: var(--border-radius, 10px);
  font: inherit;
}

.personal-form-actions {
  display: flex;
  gap: .6rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}

.personal-form-actions .btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--border-radius, 10px);
  border: 1px solid transparent;
  background: var(--primary, #4a6fa5);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.personal-form-actions .btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.personal-form-grid .full {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .personal-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .personal-form-row {
    display: block;
  }
  .personal-form-row > label {
    display: block;
    margin-bottom: 6px;
  }
}




/* ========== MENU v2 — THEME MATCH to main.css ==========
   - Header visuals mirror .site-header
   - Links mirror .nav-list a hover/active
   - Mobile overlay outside <header> using :has()
========================================================= */
.menu2{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--head) 70%, transparent), transparent 100%),
    color-mix(in oklab, var(--head) 35%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  font-family: var(--font);
}
.menu2__inner{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:18px;max-width:var(--container);margin-inline:auto}
.menu2__brand{display:flex;align-items:center;gap:.6rem;color:var(--head-text);text-decoration:none;font-weight:800}
.menu2__mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-1);
  background:linear-gradient(135deg, var(--brand), var(--accent-bridge));color:#0b0f19;font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35)}
.menu2__name{letter-spacing:.2px}

/* Desktop bar */
.menu2__bar{display:none}
@media (min-width:861px){ .menu2__bar{display:block} }

/* Base list styling (mirrors .nav-list) */
.menu2__list{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.menu2__list--column{flex-direction:column}
.menu2__list > li > a{
  display:inline-flex;align-items:center;gap:.5rem;padding:10px 12px;border-radius:12px;color:var(--head-text);
  text-decoration:none;
  transition: background var(--speed-1) var(--ease), transform var(--speed-1) var(--ease);
}
.menu2__list > li > a:hover{background:color-mix(in oklab, var(--head-text) 12%, transparent)}
.menu2__list > li > a:active{transform:translateY(1px)}
.menu2__list > li > a.active{
  background:linear-gradient(135deg, var(--brand), var(--accent-bridge));color:#0b0f19;font-weight:700;
  box-shadow: 0 6px 18px rgba(0,0,0,.18)
}

/* Submenu (same pill look as links) */
.menu2__sub{position:relative}
.menu2__sub > summary{
  display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;color:var(--head-text);
  list-style:none; transition: background var(--speed-1) var(--ease);
}
.menu2__sub > summary::-webkit-details-marker{display:none}
.menu2__sub > summary::after{content:"▸";margin-left:.35rem;transition:transform .18s ease;opacity:.9}
.menu2__sub[open] > summary::after{transform:rotate(90deg)}
.menu2__sub > summary:hover{background:color-mix(in oklab, var(--head-text) 12%, transparent)}

/* Dropdown (desktop) */
@media (min-width:861px){
  .menu2__sub > .menu2__list{
    position:absolute;left:0;top:calc(100% + 6px);min-width:220px;
    background:color-mix(in oklab, var(--card) 95%, transparent);border:1px solid var(--border);
    border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;flex-direction:column;z-index:1100
  }
  .menu2__sub > .menu2__list a{color:var(--text)}
  .menu2__sub > .menu2__list a:hover{background:color-mix(in oklab, var(--head-text) 12%, transparent);border-radius:10px}
}

/* Mobile toggle button (matching pills) */
.menu2__root{display:block}
.menu2__toggle{
  display:inline-flex;align-items:center;gap:.5rem;padding:10px 12px;border-radius:12px;cursor:pointer;color:var(--head-text);
  border:1px solid color-mix(in oklab, var(--head-text) 18%, transparent);
  background:color-mix(in oklab, var(--head-text) 8%, transparent);
  list-style:none;
}
.menu2__toggle::-webkit-details-marker{display:none}
.menu2__toggle::after{content:"▾";opacity:.9;transition:transform .18s ease}
.menu2__root[open] > .menu2__toggle::after{transform:rotate(180deg)}
@media (min-width:861px){ .menu2__root{display:none} }

/* === BODY-LEVEL OVERLAY PANEL (mimo header) === */
.menu2__panel{position:fixed;inset:0;display:none;z-index:1600;background:var(--card);color:var(--text)}
.menu2__panel-inner{padding:20px;overflow:auto;height:100%;max-width:var(--container);margin-inline:auto}

@media (max-width:860px){
  body:has(.menu2__root[open]) .menu2__panel{display:block}
  body:has(.menu2__root[open]){overflow:hidden}
  body:has(.menu2__root[open])::before{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1500
  }

  /* Vertical menu styling inside panel (use dark text) */
  .menu2__panel .menu2__list > li > a,
  .menu2__panel .menu2__sub > summary{
    color:var(--text);padding:14px 12px;border-radius:10px;background:transparent
  }
  .menu2__panel .menu2__list > li > a:hover,
  .menu2__panel .menu2__sub > summary:hover{
    background:color-mix(in oklab, var(--head) 10%, transparent)
  }
  .menu2__panel .menu2__sub > .menu2__list{
    position:static;min-width:auto;border:0;box-shadow:none;padding:4px 0 4px 12px;background:transparent
  }
}

.menu2__close{
  position:fixed;top:10px;right:10px;z-index:1700;border:0;background:rgba(0,0,0,.5);
  color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer
}

/* === v3 tweaks: align menu right + icon buttons === */
.menu2__bar{ margin-left:auto; }
.menu2__bar .menu2__list{ justify-content:flex-end; }

.menu2__actions{ display:flex; align-items:center; gap:8px; margin-left:12px; }
.icon-btn{
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:12px; border:1px solid color-mix(in oklab, var(--head-text) 18%, transparent);
  background:color-mix(in oklab, var(--head-text) 8%, transparent); color:var(--head-text);
  cursor:pointer; text-decoration:none;
}
.icon-btn:hover{ background:color-mix(in oklab, var(--head-text) 14%, transparent); }
.icon-btn:active{ transform:translateY(1px); }

/* theme toggle: show only one icon based on data-effective */
.theme-toggle .icon{ display:none; }
.theme-toggle[data-effective="light"] .icon-sun{ display:block; }
.theme-toggle[data-effective="dark"] .icon-moon{ display:block; }
.theme-toggle[data-effective="auto"] .icon-auto{ display:block; }

/* Smaller, cleaner look */
.theme-toggle svg{ display:block; }

/* === v4 fixes === */
/* 1) Right-align desktop menu (and keep actions at far right) */
.menu2__inner{ justify-content:flex-start; } /* override older space-between */
.menu2__bar{ margin-left:auto; order:2; }
.menu2__bar .menu2__list{ justify-content:flex-end; }
.menu2__actions{ order:3; } /* legacy, if present */

/* 2) Quick actions capsule (theme + logout in one "kostička") */
.menu2__qa{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid color-mix(in oklab, var(--head-text) 18%, transparent);
  background:color-mix(in oklab, var(--head-text) 8%, transparent);
  border-radius:12px; overflow:hidden; margin-left:12px;
}
.menu2__qa .qa__btn{
  display:inline-grid; place-items:center; width:38px; height:38px;
  color:var(--head-text); text-decoration:none; cursor:pointer;
  background:transparent; border:0; padding:0;
}
.menu2__qa .qa__btn + .qa__btn{
  border-left:1px solid color-mix(in oklab, var(--head-text) 18%, transparent);
}

/* show only one theme glyph */
#theme-toggle .icon{ display:none; }
#theme-toggle[data-effective="light"] .icon-sun{ display:block; }
#theme-toggle[data-effective="dark"]  .icon-moon{ display:block; }
#theme-toggle[data-effective="auto"]  .icon-auto{ display:block; }





/* === MENU: extra-bold jen pro menu (desktop + mobil) === */
.menu2 .menu2__list > li > a,
.menu2 .menu2__sub > summary,
.menu2 .menu2__toggle{
  font-weight: 700 !important; /* jistota proti starším pravidlům */
}

/* ===== Submenu: dark interior + #47748D border ===== */
.menu2{
  --submenu-border: #47748D;
  /* tmavý podklad odvozený z tvé hlavičky */
  --submenu-bg:    color-mix(in oklab, var(--head) 85%, #000);
  --submenu-text:  var(--head-text);
  --submenu-hover: color-mix(in oklab, #ffffff 10%, var(--submenu-bg));
}

/* ===== Submenu (desktop + mobil) + typografie menu (scoped na .menu2) ===== */

/* proměnné jen pro menu */
.menu2{
  --font: sans-serif;                 /* jen menu má sans-serif */
  --submenu-border: #47748D;          /* barva rámečku submenu */
  --submenu-bg: color-mix(in oklab, var(--head) 40%, #FFFF); /* tmavý podklad */
  --submenu-text: var(--head-text);
  --submenu-hover: color-mix(in oklab, #ffffff 10%, var(--submenu-bg));
}

/* typografie a tracking jen v menu */
.menu2 .menu2__list > li > a,
.menu2 .menu2__sub > summary,
.menu2 .menu2__toggle,
.menu2 .menu2__qa .qa__btn,
.menu2 .menu2__brand,
.menu2 .menu2__name {
  font-family: var(--font) !important;
  font-weight: 600;          /* extra-bold pro menu */
  letter-spacing: -0.01em;   /* lehce přitáhnout */
}

/* Desktop dropdown (bublina pod položkou) */
@media (min-width:861px){
  .menu2 .menu2__sub > .menu2__list{
    background: var(--submenu-bg) !important;
    color: var(--submenu-text) !important;
    border: 2px solid var(--submenu-border) !important;
    /* 1px „stroke“, aby se hranice neztratila ve stínu */
    box-shadow: 0 0 0 1px var(--submenu-border), 0 8px 24px rgba(0,0,0,.24) !important;
  }
  .menu2 .menu2__sub > .menu2__list a{
    color: var(--submenu-text) !important;
  }
  .menu2 .menu2__sub > .menu2__list a:hover{
    background: var(--submenu-hover) !important;
  }
}

/* Mobilní akordeon (uvnitř panelu) */
.menu2 .menu2__panel .menu2__sub > .menu2__list{
  background: var(--submenu-bg) !important;
  color: var(--submenu-text) !important;
  border: 2px solid var(--submenu-border) !important;
  border-left: none !important;
  padding: 6px 6px 6px 12px !important;
  border-radius: 10px !important;
}
.menu2 .menu2__panel .menu2__list > li > a,
.menu2 .menu2__panel .menu2__sub > summary{
  color: var(--submenu-text) !important;
}
.menu2 .menu2__panel .menu2__list > li > a:hover,
.menu2 .menu2__panel .menu2__sub > summary:hover{
  background: var(--submenu-hover) !important;
}

/* MENU: opticky vyšší text (jen v menu) */
.menu2 .menu2__list > li > a,
.menu2 .menu2__sub > summary,
.menu2 .menu2__toggle {
  display: inline-block;         /* aby šel použít transform */
  line-height: 1;                /* ať se nepřidává svislá mezera */
  transform: scaleY(1.3);       /* ~8% vyšší (zkus 1.06–1.12 podle chuti) */
  transform-origin: center;
}

/* Udrž stejné „pilulky“ – lehce uber vertikální padding */
.menu2 .menu2__list > li > a,
.menu2 .menu2__sub > summary {
  padding-top: 8px !important;
  padding-bottom: 8px !important;  /* původně 10px */
}

/* ============================
   Monthly Overview – mobile cards
   Cíl: hezké „karty“ místo tabulek na mobilu
   ============================ */

/* Desktop / default beze změny */
.mo-table-container{
  max-width:16 00px;
  margin:0 auto 30px;
  overflow-x:auto;
}

/* --- MOBILE --- */
@media (max-width: 767px){
  /* nikdy NESCHOVÁVAT měsíční přehled */
  .mo-table-container{ display:block !important; overflow-x:visible !important; }

  /* tabulku „rozbijeme“ na karty */
  .mo-table{
    width:100% !important;
    border:0; border-collapse:separate;
  }
  .mo-table thead{ display:none; }
  .mo-table tbody{ display:block; }
  .mo-table tfoot{ display:block; margin-top:10px; }

  /* základní karta pro každý řádek (pair: hlavní + detail) */
  .mo-table tbody tr{
    display:grid; 
    grid-template-columns: 1fr auto;  /* titulek vlevo, šipka vpravo */
    gap:8px 12px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:12px 14px;
    margin:0 0 12px;
  }

  /* 1. sloupec je šipka – nahoře vpravo */
  .mo-table td.toggle-icon{
    grid-column: 2 / 3;
    grid-row: 1;
    align-self:center;
    justify-self:end;
    padding:0;
    opacity:.75;
    font-weight:700;
  }
  .mo-table td.toggle-icon.expanded{ opacity:1; }

  /* 2. sloupec (název) je hlavička karty */
  #prace    td:nth-child(2),
  #naklady  td:nth-child(2){
    grid-column: 1 / 2;
    grid-row: 1;
    font-weight:700;
    font-size:1rem;
    line-height:1.3;
    margin-right:38px; /* prostor pro šipku */
  }
  /* potlač „label“ u názvu (viz JS níže) */
  #prace    td:nth-child(2)::before,
  #naklady  td:nth-child(2)::before{ display:none; }

  /* ostatní hodnoty jako „čipy“ pod titulkem – 2 sloupce */
  #prace    td:nth-child(n+3),
  #naklady  td:nth-child(n+3){
    grid-column: 1 / -1; /* na celou šířku */
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    background:var(--chip);
    border-radius:10px;
    border:1px solid color-mix(in oklab, var(--border) 60%, transparent);
  }

  /* malé štítky nad hodnotami (doplní JS) */
  .mo-table td::before{
    content: attr(data-label);
    font-size:.8rem;
    color:var(--muted);
    letter-spacing:.01em;
  }

  /* ceny a čísla lehce zvýraznit */
  #prace   td:nth-child(4), /* Hodin */
  #prace   td:nth-child(5), /* Celkem Kč */
  #naklady td:nth-child(3), /* Počet */
  #naklady td:nth-child(4)  /* Cena celkem */
  {
    font-variant-numeric: tabular-nums;
    font-weight:600;
  }

  /* DETAILNÍ ŘÁDEK (načtený AJAXem) – naváže stylem na kartu nad ním */
  .mo-table tbody tr.user-detail,
  .mo-table tbody tr.cost-detail{
    grid-template-columns: 1fr; 
    padding:0;
  }
  .mo-table tbody tr.user-detail > td,
  .mo-table tbody tr.cost-detail > td{
    display:block !important;
    white-space:normal !important;
    padding:12px 14px;
    border:0;
  }
}
/* ===== EVENT DETAIL layout ===== */

.event-detail .site-header { display:none !important; }

/* Horní blok */
.event-top { margin-bottom:20px; }

/* Flexbox pro spodní dvě tabulky */
.event-flex {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;              /* na mobilu se složí pod sebe */
}

.event-box {
  flex: 1 1 380px;              /* min šířka, jinak se roztáhnou */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow);
  padding: 14px;
}

.event-box h2 {
  margin: 0 0 .6rem;
  font-size: clamp(18px, 2vw, 22px);
}





/* ===== Work report: natažení viditelných sloupců přes celou šířku ===== */
#reportsTable{
  width:100% !important;
  table-layout: fixed !important;   /* respektuje šířky níže */
  border-collapse: collapse;
}

/* skrývané sloupce zůstanou display:none, šířku rozdělíme jen mezi viditelné:
   2 = Událost, 3 = Práce, 4 = hod/Kč, 8 = celkem, 10 = Pracovník */
#reportsTable th, #reportsTable td{ box-sizing: border-box; }

/* Událost — nejdelší text */
#reportsTable th:nth-child(2), #reportsTable td:nth-child(2){ width: 35%; }

/* Práce (datum/čas) – úzké, ale čitelné */
#reportsTable th:nth-child(3), #reportsTable td:nth-child(3){ width: 20%; white-space: nowrap; }

/* hod/Kč */
#reportsTable th:nth-child(4), #reportsTable td:nth-child(4){ width: 15%;text-align: center; }

/* celkem Kč – může být užší, zarovnat vpravo pokud chceš */
#reportsTable th:nth-child(8), #reportsTable td:nth-child(8){ width: 15%; text-align: center; }

/* Pracovník */
#reportsTable th:nth-child(10), #reportsTable td:nth-child(10){ width: 15%;text-align: center; }

/* Pracovník */
#reportsTable th:nth-child(9), #reportsTable td:nth-child(9){ width: 15%;text-align: center; }

/* Když na stránce schováváš "Pracovník" (no-worker-col), přerozděl %:
   36 + 22 + 16 + 26 = 100 */
#reportsTable.no-worker-col th:nth-child(2),
#reportsTable.no-worker-col td:nth-child(2){ width: 32%; }
#reportsTable.no-worker-col th:nth-child(3),
#reportsTable.no-worker-col td:nth-child(3){ width: 15%; }
#reportsTable.no-worker-col th:nth-child(4),
#reportsTable.no-worker-col td:nth-child(4){ width: 15%; }
#reportsTable.no-worker-col th:nth-child(8),
#reportsTable.no-worker-col td:nth-child(8){ width: 13%; }
#reportsTable.no-worker-col th:nth-child(9),
#reportsTable.no-worker-col td:nth-child(9){ width: 25%; }