/* Základní vzhled FakNab — sdílený layout, navigace, formuláře, tabulky, tlačítka,
   našeptávače, mobilní režim. Barevné proměnné (:root) jsou v base.html jako malý inline
   <style nonce> (nesou hodnoty z Jinja tématu firmy). */
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Segoe UI, Arial, sans-serif; background:var(--bg); color:#1a202c; }
header { background:var(--dark); color:var(--hdr); padding:9px 16px; display:flex; gap:14px;
         align-items:center; flex-wrap:wrap; border-bottom:3px solid var(--pri);
         position:sticky; top:0; z-index:50; }   /* napevno nahoře, neroluje se */
header img.logo { height:30px; width:auto; display:block; }
header a { color:var(--hdr); text-decoration:none; font-weight:600; font-size:14px; }
header a:hover { color:var(--pri); }
.nav { display:flex; align-items:center; gap:16px; flex:1; flex-wrap:wrap; }
.nav .navsep { margin-left:auto; }            /* pravá skupina doprava (desktop) */
.nav .navgap { width:1px; align-self:stretch; margin:3px 6px;
               background:rgba(255,255,255,.22); }   /* oddělovač skupin (Zaměstnanci | Klienti) */
.nav .firm { opacity:.85; font-size:13px; }
.nav-toggle { display:none; margin-left:auto; background:transparent; border:0; color:var(--hdr);
              font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; }
header .switch { font-size:13px; background:var(--pri); color:var(--pri-text); padding:4px 10px; border-radius:6px; }
header .switch:hover { color:var(--pri-text); background:var(--pri-d); }
/* rozbalovací „Nastavení" (details/summary) */
.nav details.menu { position:relative; }
.nav details.menu > summary { list-style:none; cursor:pointer; font-weight:600; font-size:14px;
  color:var(--hdr); user-select:none; }
.nav details.menu > summary::-webkit-details-marker { display:none; }
.nav details.menu > summary::after { content:" ▾"; opacity:.8; }
.nav details.menu > summary:hover { color:var(--pri); }
.nav .menu-pop { position:absolute; right:0; top:calc(100% + 8px); background:var(--card);
  border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  min-width:190px; padding:6px; z-index:60; display:flex; flex-direction:column; }
.nav .menu-pop a { color:#1a202c; padding:9px 12px; border-radius:6px; font-size:14px; font-weight:500; }
.nav .menu-pop a:hover { background:#fff3e9; color:var(--pri-d); }
main { max-width:980px; margin:24px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
h2, h3 { color:var(--dark); }
a { color:var(--pri-d); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th { font-size:13px; color:#4a5568; }
table.compact th, table.compact td { padding:3px 8px; font-size:13px; }
table.compact input, table.compact select { padding:3px 6px; font-size:13px; }
/* Sloupce na míru (viz ui.js): tažením za pravý okraj = šířka, tažením hlavičky = pořadí. */
.resizable-table thead th { position:relative; cursor:grab; touch-action:none; }
.resizable-table thead th.dragging { opacity:.35; }
.resizable-table thead th.drop-target { background:rgba(249,115,22,.15); }
.resizable-table thead th .col-resizer { position:absolute; top:0; right:-4px; width:8px; height:100%;
  cursor:col-resize; z-index:5; touch-action:none; }
.resizable-table thead th .col-resizer:hover { background:rgba(0,0,0,.08); }
.btn { display:inline-block; background:var(--pri); color:var(--pri-text); border:0; border-radius:8px;
       padding:9px 14px; cursor:pointer; text-decoration:none; font-size:14px; font-weight:600; }
.btn:hover { background:var(--pri-d); }
.btn.secondary { background:#edf0f4; color:#2d3748; font-weight:500; }
.btn.secondary:hover { background:#e2e6ec; }
.btn.danger { background:#fbe9e9; color:#b42318; font-weight:500; }
.btn.danger:hover { background:#f6d6d6; }
.btn.small { padding:5px 10px; font-size:13px; }
input, select, textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:6px; font-size:14px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 2px rgba(249,115,22,.18); }
label { font-size:13px; color:#4a5568; display:block; margin:8px 0 3px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > div { flex:1; min-width:120px; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.flash.ok { background:#fff7ed; color:var(--pri-d); border:1px solid #fed7aa; }
.flash.err { background:#fff5f5; color:var(--err); border:1px solid #feb2b2; }
.muted { color:#718096; font-size:13px; }
.right { text-align:right; }
.btn { white-space:nowrap; }
/* našeptávač adres (Mapy.com) */
.addr-pop { position:absolute; left:0; right:0; top:100%; z-index:45; background:#fff;
  border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  max-height:240px; overflow:auto; display:none; margin-top:2px; }
.addr-opt { padding:7px 10px; cursor:pointer; font-size:14px; border-bottom:1px solid #f0f1f4; }
.addr-opt:last-child { border-bottom:0; }
.addr-opt:hover, .addr-opt.active { background:#fff3e9; }
/* našeptávač z <select> (psaní klávesnicí) */
.combo-wrap { position:relative; }
.combo-pop { position:absolute; left:0; right:0; top:100%; z-index:40; background:#fff;
  border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.10);
  max-height:260px; overflow:auto; display:none; margin-top:2px; }
.combo-pop.open { display:block; }
.combo-pop .opt { padding:7px 10px; cursor:pointer; font-size:14px; border-bottom:1px solid #f0f1f4; }
.combo-pop .opt:last-child { border-bottom:0; }
.combo-pop .opt.active, .combo-pop .opt:hover { background:#fff3e9; }
.combo-pop .none { padding:7px 10px; color:#a0aec0; font-size:13px; }
/* vlastní kalendář pro <input type="date"> (viz ui.js) — nahrazuje nativní popover,
   který se v Safari nedal donutit otevřít nahoru. .dp-up = otevře se NAD polem. */
.dp-wrap { position:relative; display:inline-block; width:100%; }
.dp-pop { position:absolute; left:0; top:100%; z-index:45; background:#fff; width:220px;
  border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.14);
  padding:8px; margin-top:4px; display:none; }
.dp-pop.open { display:block; }
.dp-pop.dp-up { top:auto; bottom:100%; margin-top:0; margin-bottom:4px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dp-title { font-size:13px; font-weight:600; color:var(--dark); text-transform:capitalize; }
.dp-nav { background:none; border:0; cursor:pointer; font-size:16px; color:#718096; padding:2px 8px; border-radius:4px; }
.dp-nav:hover { background:#f0f1f4; color:var(--pri-d); }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.dp-dow span { font-size:11px; color:#a0aec0; padding:2px 0; }
.dp-day { background:none; border:0; cursor:pointer; font-size:13px; padding:5px 0; border-radius:5px; color:#1a202c; }
.dp-day:hover { background:#fff3e9; }
.dp-day.dp-today { font-weight:700; color:var(--pri-d); }
.dp-day.dp-selected { background:var(--pri); color:var(--pri-text); }
/* našeptávač textového pole (acField, viz autocomplete.js) — sdílí vizuál s combo-pop */
.ac-input-pad { padding-right:28px !important; }
.field-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:#a0aec0; font-size:15px; line-height:1; display:none; }
.field-clear.open { display:inline; }
.field-clear:hover { color:#718096; }

/* --- Mobil / úzké obrazovky --- */
@media (max-width:760px) {
  /* pevné záhlaví — vždy viditelné při scrollování */
  header { position:sticky; top:0; z-index:50; }
  .nav-toggle { display:block; }
  .nav { display:none; flex-direction:column; align-items:flex-start; width:100%; gap:14px; padding:8px 0 4px; }
  .nav.open { display:flex; }
  .nav .navsep { margin-left:0; }
  /* větší, lépe tappable položky menu na mobilu */
  .nav a { font-size:18px; }
  .nav .firm { font-size:15px; }
  .nav .navgap { display:none; }                /* oddělovač skupin nemá smysl ve svislém menu */
  /* rozbalovací Nastavení na mobilu = inline seznam (ne plovoucí panel) */
  .nav details.menu { width:100%; }
  .nav details.menu > summary { font-size:18px; padding:2px 0; }
  .nav .menu-pop { position:static; box-shadow:none; border:0; background:transparent;
    padding:6px 0 0 16px; min-width:0; gap:10px; }
  .nav .menu-pop a { font-size:17px; padding:4px 0; color:var(--hdr); }
  .nav .menu-pop a:hover { background:transparent; color:var(--pri); }
  header .switch { font-size:16px; padding:7px 14px; }
  main { margin:14px auto; padding:0 10px; }
  .card { padding:14px; }
  /* pole formulářů na celou šířku (místo nacpání vedle sebe) */
  .row { gap:8px; }
  .row > div { flex-basis:100%; min-width:0; }
  /* výjimka: řádek .pairrow nechá dvě pole vedle sebe (2× 50 %) */
  .row.pairrow > div { flex-basis: calc(50% - 6px); }
  /* 16px text v polích = iOS nezoomuje při zaměření; pohodlnější dotyk */
  input, select, textarea { font-size:16px; padding:10px; }
  .btn { padding:11px 15px; }
  .btn.small { padding:8px 12px; font-size:14px; }
  /* tabulky se posouvají vodorovně místo rozbití layoutu */
  .card table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card table th, .card table td { white-space:nowrap; }
  /* akční lišty tlačítek se zalomí a mají mezery */
  .right { flex-wrap:wrap; gap:8px; }
  .row .right { justify-content:flex-start; }
  h2 { font-size:20px; }
}