/* ===========================================================
   ASTORIE Docházka — Design System v2 (korporátní barvy POVINNÉ)
   =========================================================== */
:root{
  --primary:var(--astorie-petrol); --primary-2:var(--astorie-petrol-2);
  --accent:var(--astorie-orange); --accent-2:var(--astorie-orange-2);
  --cream:var(--astorie-cream); --bg:var(--astorie-bg); --card:#fff;
  --text:var(--astorie-ink); --muted:var(--astorie-muted);
  --border:rgba(0,61,76,.10); --border-2:rgba(0,61,76,.16);
  --ok:var(--stav-ok-text); --ok-bg:var(--stav-ok-tint);
  --warn:var(--stav-pozor-text); --warn-bg:var(--stav-pozor-tint);
  --no:var(--stav-chyba-text); --no-bg:var(--stav-chyba-tint);
  --info:var(--astorie-petrol-2); --info-bg:var(--stav-info-tint);
  /* derived only from brand.css tokens (no new hex) */
  --petrol-deep:color-mix(in srgb,var(--astorie-petrol) 75%,black);
  --petrol-mid:color-mix(in srgb,var(--astorie-petrol-2) 70%,var(--astorie-petrol));
  --accent-tint:color-mix(in srgb,var(--astorie-orange) 9%,white);
  --accent-soft:color-mix(in srgb,var(--astorie-orange-2) 35%,white);
  --cream-soft:color-mix(in srgb,var(--astorie-cream) 45%,white);
  --radius:10px; --radius-lg:16px; --radius-pill:999px;
  --sidebar-w:248px;
  --shadow-sm:0 1px 2px rgba(0,61,76,.06);
  --shadow:0 4px 14px rgba(0,61,76,.08);
  --shadow-lg:0 12px 32px rgba(0,61,76,.14);
  --font:var(--astorie-font);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45; }
a{ color:var(--primary-2); text-decoration:none; }
h1{ font-size:24px; margin:0 0 4px; letter-spacing:-.2px; }
h2{ font-size:18px; margin:0 0 10px; }
h3{ font-size:15px; margin:22px 0 10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.muted{ color:var(--muted); } .small{ font-size:13px; }

.app{ display:flex; min-height:100vh; }
.sidebar{ overflow:hidden; width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:linear-gradient(180deg,var(--primary) 0%,var(--petrol-deep) 100%); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar__brand{ padding:20px 20px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.10); }
.sidebar__brand img{ height:34px; display:block; }
.sidebar__nav{ padding:14px 12px; overflow-y:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; }
.navgroup{ margin-bottom:6px; }
.navgroup__label{ font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.45); font-weight:800; padding:14px 12px 6px; }
.navlink{ display:flex; align-items:center; gap:12px; position:relative; padding:10px 12px; margin:2px 0; border-radius:var(--radius); color:rgba(255,255,255,.82); font-weight:600; font-size:14.5px; transition:background .12s,color .12s; }
.navlink:hover{ background:rgba(255,255,255,.08); color:#fff; }
.navlink.is-active{ background:var(--primary-2); color:#fff; }
.navlink.is-active::before{ content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:4px; border-radius:0 4px 4px 0; background:var(--accent); }
.navlink .ico{ width:19px; height:19px; flex:0 0 19px; display:inline-flex; align-items:center; justify-content:center; }
.navlink .ico svg{ width:19px; height:19px; opacity:.9; }
.navlink.is-active .ico svg{ opacity:1; }
.navlink .badge-count{ margin-left:auto; background:var(--astorie-orange-dark); color:#fff; font-size:11px; font-weight:800; padding:1px 7px; border-radius:var(--radius-pill); }
.sidebar__foot{ flex:none; padding:14px 16px; border-top:1px solid rgba(255,255,255,.10); font-size:12px; font-style:italic; color:rgba(255,255,255,.6); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:62px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; padding:0 24px; position:sticky; top:0; z-index:30; }
.topbar__title{ font-weight:800; font-size:16px; color:var(--primary); }
.topbar__spacer{ flex:1; }
.iconbtn{ width:40px; height:40px; border-radius:var(--radius); border:1px solid var(--border); background:#fff; cursor:pointer; position:relative; font-size:18px; display:flex; align-items:center; justify-content:center; color:var(--primary); text-decoration:none; }
.iconbtn:hover{ background:var(--cream); }
.iconbtn svg{ width:18px; height:18px; }
.tabbar a .ico svg{ width:20px; height:20px; }
.iconbtn .dot{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; background:var(--astorie-orange-dark); color:#fff; border-radius:var(--radius-pill); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid #fff; }
.userchip{ display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--primary-2); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 34px; }
.userchip__name{ font-weight:700; font-size:14px; line-height:1.1; }
.userchip__role{ font-size:12px; color:var(--muted); }
.content{ padding:24px; max-width:1180px; width:100%; margin:0 auto; }
.hamburger{ display:none; } .sidebar__backdrop{ display:none; }

.hero{ background:linear-gradient(120deg,var(--petrol-deep) 0%,var(--primary) 46%,var(--petrol-mid) 100%); color:#fff; border-radius:var(--radius-lg); padding:26px 30px; display:flex; align-items:center; gap:26px; box-shadow:var(--shadow); margin-bottom:20px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--accent),var(--accent-2)); }
.hero::after{ content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:220px; height:220px; border-radius:50%; border:1px solid rgba(255,255,255,.06); box-shadow:0 0 0 26px rgba(255,255,255,.03); }
.hero .hero-l{ position:relative; z-index:1; }
.hero-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.6); font-weight:700; }
.hero h1{ color:#fff; font-size:28px; margin:6px 0 0; letter-spacing:-.5px; } .hero p{ margin:6px 0 0; opacity:.9; }
.hero-rule{ width:46px; height:3px; border-radius:3px; background:var(--accent-2); margin:12px 0 2px; }
/* Jasné odlišení: V PRÁCI = světlý chip, NEJSI = tmavý chip */
.hero__status{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:10px 18px; border-radius:var(--radius-pill); font-weight:900; font-size:15px; letter-spacing:.3px; background:#fff; color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.hero__status .d{ width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(233,78,27,.25); }
.hero__status.out{ background:var(--petrol-deep); color:rgba(255,255,255,.55); box-shadow:none; }
.hero__status.out .d{ background:rgba(255,255,255,.35); box-shadow:none; }
.hero__now{ margin-left:auto; text-align:right; z-index:1; padding-left:26px; border-left:1px solid rgba(255,255,255,.12); }
.hero__now b{ font-size:38px; display:block; font-variant-numeric:tabular-nums; line-height:1; }
.hero__now small{ font-size:11px; color:rgba(255,255,255,.62); margin-top:6px; display:block; }
.punch-big svg{ width:28px; height:28px; }
.punch-big .pt{ letter-spacing:.5px; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm); }
.card + .card{ margin-top:16px; }
.card__head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card__head h2{ margin:0; } .card__head .btn{ margin-left:auto; }
.grid{ display:grid; gap:16px; }
/* Grid items default to min-width:auto, so a wide table inside stretched the whole page sideways (detail zaměstnance 784 px on a 390 px phone). */
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-dash{ grid-template-columns:2fr 1fr; align-items:start; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm); }
.kpi .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.kpi .ic svg{ width:18px; height:18px; }
.kpi .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin:13px 0 4px; font-weight:700; }
.kpi .val{ font-size:27px; font-weight:800; letter-spacing:-.5px; color:var(--primary); font-variant-numeric:tabular-nums; line-height:1; }
.kpi .val small{ font-size:14px; font-weight:600; color:var(--muted); }
.kpi .sub{ font-size:12px; color:var(--muted); margin-top:6px; }
.spark{ display:flex; align-items:flex-end; gap:3px; height:24px; margin-top:11px; }
.spark i{ flex:1; background:var(--border-2); border-radius:2px 2px 0 0; }
.badge svg{ width:13px; height:13px; }
.badge.ico::before{ display:none; }
.pills{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
/* Five tiles on desktop; must stay before the @media(max-width:1000px) rule so phones get 2 columns (inline style overrode it, Mzdy were 596 px wide). */
.pills--5{ grid-template-columns:repeat(5,1fr); }
.pill{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.pill small{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
.pill b{ display:block; font-size:26px; color:var(--primary); font-variant-numeric:tabular-nums; margin-top:4px; }
.pill--accent{ border-left:4px solid var(--accent); } .pill--ok{ border-left:4px solid var(--ok); }
.pill--muted b{ color:var(--muted); }

/* Vysvětlivka „i" – tooltip na hover i dotyk (focus) */
.info{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  background:var(--border-2); color:#fff; font-size:10px; font-weight:800; font-style:normal; cursor:help;
  position:relative; vertical-align:middle; margin-left:5px; flex:none; }
.info::before{ content:"i"; }
/* Bublina s nápovědou. Pozici dopočítává JS v base.html (--tip-x / --tip-y), aby se bublina
   nikdy neusekla o kraj obrazovky a fungovala i na telefonu (klepnutí = otevřít, klepnutí
   jinam nebo Esc = zavřít). Proto position:fixed, ne absolute — jinak ji ořízne kterýkoli
   rodič s overflow (tabulky mají .table-wrap{overflow-x:auto}). */
.info::after{ content:attr(data-tip); position:fixed; left:var(--tip-x,50%); top:var(--tip-y,0);
  transform:translate(-50%,var(--tip-shift,-100%));
  background:var(--primary); color:#fff; padding:10px 13px; border-radius:8px; font-size:12.5px; font-weight:500;
  line-height:1.5; letter-spacing:0; text-transform:none; width:max-content; max-width:min(340px,86vw);
  white-space:normal; text-align:left;
  opacity:0; pointer-events:none; transition:opacity .12s; z-index:200; box-shadow:0 6px 22px rgba(0,0,0,.22); }
.info:hover::after, .info:focus::after, .info.open::after{ opacity:1; }
.info:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.info.open{ background:var(--astorie-orange-dark); }
/* na dotykových zařízeních je terč většíi, ať se dá trefit prstem */
@media (hover:none){ .info{ width:20px; height:20px; font-size:12px; } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; font-weight:700; font-size:14px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; background:var(--astorie-orange-dark); color:#fff; transition:background .12s,transform .05s; text-decoration:none; line-height:1; }
.btn:hover{ background:color-mix(in srgb,var(--astorie-orange-dark) 86%,#000); } .btn:active{ transform:translateY(1px); }
.btn.ghost{ background:#fff; color:var(--primary); border-color:var(--border-2); }
.btn.ghost:hover{ background:var(--cream); }
.btn.secondary{ background:var(--primary); color:#fff; } .btn.secondary:hover{ background:var(--primary-2); }
.btn.danger{ background:#fff; color:var(--no); border-color:var(--stav-chyba-kraj); } .btn.danger:hover{ background:var(--no-bg); }
.btn.sm{ padding:7px 12px; font-size:13px; } .btn.lg{ padding:16px 24px; font-size:16px; } .btn.block{ width:100%; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:700; line-height:1.4; background:var(--cream); color:var(--primary); border:1px solid var(--border); }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge--wait{ background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.badge--ok{ background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.badge--no{ background:var(--no-bg); color:var(--no); border-color:transparent; }
.badge--info{ background:var(--info-bg); color:var(--info); border-color:transparent; }
.badge.plain::before{ display:none; }

.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; }
thead th{ background:var(--cream); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:800; padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); }
tbody td{ padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background:var(--cream-soft); }
tbody tr:hover{ background:var(--cream); }
td.num, th.num{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
tfoot td.num{ text-align:right; }

label{ display:block; font-weight:700; font-size:13px; margin:12px 0 6px; color:var(--text); }
input,select,textarea{ width:100%; padding:11px 12px; border:1px solid var(--border-2); border-radius:var(--radius); font-size:15px; background:#fff; font-family:inherit; color:var(--text); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary-2); box-shadow:0 0 0 3px rgba(10,92,102,.14); }
.field-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.checkline{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.checkline input{ width:auto; }

.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty .ico{ font-size:40px; opacity:.5; } .empty p{ margin:8px 0 14px; }

.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{ background:#fff; border-left:4px solid var(--primary-2); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:14px 16px; min-width:280px; max-width:380px; display:flex; align-items:center; gap:12px; animation:toastIn .25s ease; }
.toast--ok{ border-left-color:var(--ok); } .toast--no{ border-left-color:var(--no); }
.toast b{ display:block; font-size:14px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.notif{ position:relative; }
.notif__panel{ position:absolute; right:0; top:52px; width:340px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:40; overflow:hidden; display:none; }
.notif__panel.open{ display:block; }
.notif__head{ padding:14px 16px; border-bottom:1px solid var(--border); font-weight:800; display:flex; gap:12px; align-items:center; }
.notif__head a{ font-size:13px; font-weight:600; }
.notif__head a.right{ margin-left:auto; }
.notif__list{ max-height:min(60vh,440px); overflow-y:auto; }
.notif__item .x{ margin-left:6px; flex:0 0 auto; color:var(--muted); font-size:18px; line-height:1; padding:0 2px; text-decoration:none; border:0; background:none; cursor:pointer; }
.notif__item .x:hover{ color:var(--no); }
.notif__item{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:flex-start; }
.notif__item:hover{ background:var(--cream); }
.notif__item.unread{ background:var(--cream-soft); }
.notif__item .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:6px; flex:0 0 8px; }
.notif__item .t{ font-weight:700; font-size:14px; }
.notif__item .s{ font-size:12.5px; color:var(--muted); }
.notif__item .time{ font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap; }

/* Stav: V PRÁCI = tmavý petrol (výrazné), NEJSI = světlý cream (utlumené) */
.punch-state{ border-radius:var(--radius-lg); padding:22px 24px; display:flex; align-items:center; gap:16px; margin-bottom:20px; background:var(--primary); color:#fff; }
.punch-state .lamp{ width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(233,78,27,.28); }
.punch-state .txt b{ font-size:20px; display:block; } .punch-state .txt small{ opacity:.85; }
.punch-state.is-out{ background:var(--cream); color:var(--muted); border:1px solid var(--border); }
.punch-state.is-out .txt b{ color:var(--primary); }
.punch-state.is-out .lamp{ background:var(--stav-neutral-kraj); box-shadow:0 0 0 5px rgba(148,163,184,.18); }
.punch-main{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.punch-big{ border:none; border-radius:var(--radius-lg); padding:26px; cursor:pointer; color:#fff; font-size:19px; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .06s, box-shadow .12s; }
.punch-big:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.punch-big .ico{ font-size:26px; font-weight:900; }
.punch-in{ background:var(--primary); } .punch-in:hover{ background:var(--primary-2); }
.punch-out{ background:var(--astorie-orange-dark); } .punch-out:hover{ background:color-mix(in srgb,var(--astorie-orange-dark) 86%,#000); }
.punch-more{ margin:0 0 4px; }
.punch-more > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--border-2); border-radius:var(--radius); background:#fff; color:var(--primary); font-weight:700; font-size:13.5px; }
.punch-more > summary::-webkit-details-marker{ display:none; }
.punch-more > summary::after{ content:"▾"; }
.punch-more[open] > summary::after{ content:"▴"; }
.punch-more .punch-sec{ margin-top:10px; }
.punch-sec{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.punch-mini{ border:1px solid var(--border-2); background:#fff; border-radius:var(--radius); padding:14px 10px; cursor:pointer; text-align:center; font-weight:700; font-size:13px; color:var(--primary); transition:background .1s; }
.punch-mini:hover{ background:var(--cream); }
.punch-mini .ico{ display:block; font-size:22px; margin-bottom:6px; }

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:var(--border-2); }
.timeline li{ position:relative; padding:8px 0 8px 34px; }
.timeline li::before{ content:""; position:absolute; left:5px; top:12px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--primary-2); }
.timeline li.in::before{ border-color:var(--ok); } .timeline li.out::before{ border-color:var(--accent); }
.timeline .tm{ font-weight:800; font-variant-numeric:tabular-nums; margin-right:10px; }

.cal{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.cal__head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); }
.cal__head b{ font-size:16px; }
.cal__grid{ display:grid; font-size:12px; min-width:640px; }
.cal__grid .cell{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px 4px; text-align:center; min-height:34px; }
.cal__grid .name{ text-align:left; padding:8px 12px; font-weight:700; background:#fff; }
.cal__grid .daynum{ background:var(--cream); font-weight:700; color:var(--muted); }
.cal__grid .weekend{ background:var(--cream-soft); }
.cal__grid .cell.holiday{ background:var(--stav-neutral-tint); }
.cal__grid .daynum.holiday{ color:var(--stav-neutral-text); }
.cal__grid .daynum small{ display:block; font-size:8.5px; font-weight:700; letter-spacing:0; line-height:1.1; }
.cal__grid .name{ position:sticky; left:0; z-index:2; }
.cal__grid .daynum.today{ box-shadow:inset 0 0 0 2px var(--astorie-petrol); background:var(--stav-info-tint); color:var(--astorie-petrol); }
.cal__grid .cell.today{ box-shadow:inset 2px 0 0 var(--astorie-petrol), inset -2px 0 0 var(--astorie-petrol); }
.cal .abs{ border-radius:4px; height:22px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px; }
/* absence types: brand category colours in fixed order (kat-1..6); same type = same colour everywhere */
.abs-ho{ background:var(--kat-1); } .abs-vac{ background:var(--kat-2); } .abs-trip{ background:var(--kat-3); }
.abs-lek{ background:var(--kat-4); } .abs-paidleave{ background:var(--kat-5); } .abs-sick{ background:var(--kat-6); } .abs-out{ background:var(--stav-neutral-kraj); }
.abs-comp{ background:repeating-linear-gradient(135deg,var(--kat-5) 0 5px,color-mix(in srgb,var(--kat-5) 70%,black) 5px 8px); }
.abs-unpaid{ background:var(--stav-neutral-text); }
.cal__legend{ display:flex; gap:16px; padding:12px 16px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.cal__legend span{ display:inline-flex; align-items:center; gap:6px; }
.cal__legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

.login-wrap{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-left{ background:linear-gradient(140deg,var(--primary) 0%,var(--primary-2) 100%); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:56px; }
.login-left img.logo{ width:190px; margin-bottom:34px; z-index:1; }
.login-left h1{ font-size:36px; color:#fff; margin:0 0 12px; z-index:1; }
.login-left p{ font-size:16px; opacity:.9; max-width:400px; line-height:1.55; z-index:1; }
.login-left .feat{ margin-top:26px; display:flex; flex-direction:column; gap:12px; z-index:1; }
.login-left .feat span{ display:flex; align-items:center; gap:10px; opacity:.92; }
.login-left .claim{ margin-top:34px; font-style:italic; font-size:17px; opacity:.85; z-index:1; }
.login-stack{ width:100%; max-width:380px; }
.login-logo{ display:none; width:220px; height:auto; margin:0 auto 22px; }
.login-right{ display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg); }
.login-card{ width:100%; max-width:380px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); }

@media(max-width:1000px){ .grid-dash,.grid-2{ grid-template-columns:1fr; } .pills,.kpis{ grid-template-columns:repeat(2,1fr); } }
/* Spodní mobilní lišta – základ (skrytá); na mobilu ji @media níže zapne na flex. MUSÍ být před @media, jinak přebije zobrazení. */
.tabbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--border); height:60px; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px rgba(2,29,37,.06); }
.tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11px; font-weight:700; color:var(--muted); text-decoration:none; }
.tabbar a.is-active{ color:var(--accent); }
.tabbar a .ico svg{ width:21px; height:21px; }
@media(max-width:820px){
  .btn.sm{ min-height:44px; } input[type=month],input[type=number]{ min-height:44px; }
  .sidebar{ position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .sidebar__backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50; }
  .hamburger{ display:flex; }
  .punch-big{ padding:24px 14px; font-size:18px; min-height:96px; justify-content:center; } .punch-sec{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .login-wrap{ grid-template-columns:1fr; } .login-left{ display:none; } .login-logo{ display:block; }
  .content{ padding:16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .tabbar{ display:flex; }
  /* Hlavička na mobilu: stohovat pod sebe, hodiny pod pozdrav bez levé čáry */
  .hero{ flex-direction:column; align-items:flex-start; gap:14px; padding:22px 20px; }
  .hero::after{ display:none; }
  .hero__now{ margin-left:0; padding-left:0; border-left:none; text-align:left; }
  .hero__now b{ font-size:30px; }
  .hero h1{ font-size:23px; }
  /* Horní lišta se na úzkém telefonu nesmí roztáhnout do strany (přetékala o ~40 px). */
  .topbar{ padding:0 12px; gap:8px; }
  .topbar__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .userchip{ min-width:0; gap:6px; }
  .userchip__text{ display:none; }
  body{ overflow-x:hidden; }
}
@media(max-width:560px){ .kpis{ grid-template-columns:1fr 1fr; gap:10px; } .kpi{ padding:13px 14px; } .kpi .val{ font-size:23px; } }

/* Dlaždice typů žádanky – rychlý výběr, bez rozklikávání */
.req-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:8px 0 2px; }
.rt{ border:1.5px solid var(--border); border-radius:15px; padding:16px 10px 13px; text-align:center; font-weight:700;
  font-size:13px; color:var(--ink); background:var(--card); cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:10px; font-family:inherit; position:relative; box-shadow:var(--shadow-sm);
  transition:border-color .13s, box-shadow .13s, transform .06s; }
.rt .ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; transition:transform .13s; }
.rt .ic svg{ width:21px; height:21px; }
.rt:hover{ border-color:var(--primary-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.rt:hover .ic{ transform:scale(1.06); }
.rt.is-sel{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(233,78,27,.14), var(--shadow-sm); }
.rt.is-sel::after{ content:""; position:absolute; top:9px; right:9px; width:18px; height:18px; border-radius:50%;
  background:var(--astorie-orange-dark) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 6'/></svg>") center/11px no-repeat; }
@media(max-width:560px){ .req-tiles{ grid-template-columns:repeat(2,1fr); } }

@media print{
  .sidebar,.topbar,.tabbar,.no-print,.btn{ display:none !important; }
  .app,.main,.content{ display:block; padding:0; margin:0; max-width:none; }
  body{ background:#fff; font-size:12px; }
  .print-doc{ display:block !important; }
  .print-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--primary); padding-bottom:12px; margin-bottom:18px; }
  .print-head img{ height:40px; }
  .print-head .doc-title{ text-align:right; }
  .print-head .doc-title h1{ font-size:18px; color:var(--primary); margin:0; }
  .print-doc table{ border:1px solid var(--astorie-ink); width:100%; border-collapse:collapse; }
  .print-doc th,.print-doc td{ border:1px solid var(--astorie-muted); padding:6px 8px; font-size:12px; }
  .sign-row{ display:flex; justify-content:space-between; margin-top:60px; }
  .sign-box{ width:40%; border-top:1px solid var(--astorie-ink); padding-top:6px; text-align:center; font-size:11px; }
  .propustka{ border:1px solid var(--astorie-ink); padding:12px 14px; page-break-inside:avoid; margin-bottom:10px; }
  @page{ size:A4; margin:16mm; }
}
.print-doc{ display:none; }

/* Profesionální potvrzovací dialog (místo native confirm) */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,29,37,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.modal-backdrop[hidden]{display:none}
.modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(2,29,37,.35);border-top:5px solid var(--accent);animation:modalIn .16s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal__title{font-weight:800;font-size:1.15rem;color:var(--primary);margin-bottom:8px}
.modal__msg{color:var(--astorie-ink);margin:0 0 20px;line-height:1.5}
.modal__actions{display:flex;justify-content:flex-end;gap:10px}

/* Patička (footer) */
.appfoot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding:16px 28px;border-top:1px solid var(--border);margin-top:8px;font-size:.85rem;color:var(--astorie-muted)}
.appfoot__links{display:flex;align-items:center;gap:18px}
.appfoot__links a{color:var(--primary);text-decoration:none;font-weight:600}
.appfoot__links a:hover{text-decoration:underline}
@media(max-width:640px){.appfoot{padding:14px 16px}}

/* ===========================================================
   MŮJ PŘEHLED – nové prvky dle schváleného návrhu
   (pouze nové třídy, nic výše se nemění)
   =========================================================== */

/* Karta odpovědí – tři čísla, která lidé hledají nejčastěji */
.answers{ background:linear-gradient(120deg,var(--petrol-deep) 0%,var(--primary) 52%,var(--petrol-mid) 100%); color:#fff; border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.answers::before{ content:""; position:absolute; left:0; top:20px; bottom:20px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--accent),var(--accent-2)); }
.answers__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.answers__head h2{ color:#fff; margin:0; font-size:19px; }
.answers__head .who{ font-size:12.5px; color:rgba(255,255,255,.7); margin-left:auto; }
.ans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ansbox{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius); padding:15px 16px; }
.ansbox small{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px; font-weight:800; color:rgba(255,255,255,.7); }
.ansbox b{ display:block; font-size:34px; font-weight:800; line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.ansbox b i{ font-style:normal; font-size:17px; font-weight:700; color:rgba(255,255,255,.85); margin-left:3px; }
.ansbox .sub{ display:block; font-size:12px; color:rgba(255,255,255,.72); margin-top:5px; }
.ansbox--accent{ border-color:rgba(233,78,27,.6); background:rgba(233,78,27,.12); }
.ansbox--accent b{ color:var(--accent-soft); }
.answers .acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.answers .acts .btn{ white-space:nowrap; }
.answers .acts .btn svg{ width:16px; height:16px; flex:0 0 16px; }
.answers .btn.ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.25); }
.answers .btn.ghost:hover{ background:rgba(255,255,255,.18); }

/* Pruh „Čeká na tebe" – nikdy se nesbaluje */
.attn{ margin-top:16px; background:#fff; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.attn__head{ display:flex; align-items:center; gap:10px; padding:14px 20px 10px; flex-wrap:wrap; }
.attn__head h2{ margin:0; font-size:16px; color:var(--accent); display:flex; align-items:center; gap:9px; }
.attn__head h2 svg{ width:19px; height:19px; }
.attn__head .count{ background:var(--astorie-orange-dark); color:#fff; font-size:11px; font-weight:800; padding:2px 9px; border-radius:var(--radius-pill); }
.attn__head .never{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.attn__item{ display:flex; gap:14px; align-items:flex-start; padding:14px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.attn__ic{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; }
.attn__ic svg{ width:18px; height:18px; }
.attn__tx{ flex:1; min-width:220px; }
.attn__tx b{ display:block; font-size:14.5px; color:var(--primary); }
.attn__tx p{ margin:3px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
.attn__act{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.attn__act input[type=text]{ width:170px; font-size:13px; padding:8px 10px; }

/* Rozklikávací sekce (nativní details/summary, bez JS) */
.sect{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-top:12px; }
.sect > summary{ list-style:none; cursor:pointer; padding:15px 20px; display:flex; align-items:center; gap:13px; flex-wrap:wrap; border-radius:var(--radius-lg); }
.sect > summary::-webkit-details-marker{ display:none; }
.sect > summary:hover{ background:var(--cream); }
.sect > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sect .chev{ width:20px; height:20px; flex:0 0 20px; color:var(--primary-2); transition:transform .16s ease; }
.sect[open] .chev{ transform:rotate(90deg); }
.sect__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sect__t b{ font-size:16px; font-weight:800; color:var(--primary); }
.sect__t span{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sect__t span em{ font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:10px; padding:1px 7px; border-radius:var(--radius-pill); }
.sect__t span em.open{ background:var(--ok-bg); color:var(--ok); }
.sect__t span em.closed{ background:var(--cream); color:var(--muted); border:1px solid var(--border); }
.sect__peek{ margin-left:auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.sect__peek .pk{ text-align:right; }
.sect__peek .pk u{ display:block; text-decoration:none; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800; }
.sect__peek .pk b{ font-size:19px; color:var(--primary); font-variant-numeric:tabular-nums; }
.sect__peek .pk b.acc{ color:var(--accent); }
.sect__peek .pk b.ok{ color:var(--ok); }
.sect__body{ padding:2px 20px 20px; border-top:1px solid var(--border); }
.sect__body > p:first-child{ margin-top:14px; }
.sect__body h3{ margin:18px 0 8px; }

/* Legenda otevřeno / zavřeno */
.legend{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--muted); margin:20px 2px 4px; }
.legend em{ font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:10px; padding:1px 7px; border-radius:var(--radius-pill); }
.legend em.open{ background:var(--ok-bg); color:var(--ok); }
.legend em.closed{ background:var(--cream); color:var(--muted); border:1px solid var(--border); }

/* Zvýrazněné vysvětlení a drobnosti */
.explain{ margin:10px 0 0; padding:11px 13px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:8px; font-size:13px; color:var(--muted); line-height:1.55; }
.strike{ color:var(--muted); text-decoration:line-through; }
.card__head--wrap{ flex-wrap:wrap; }
.periodbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.periodbar input[type=month]{ width:auto; padding:8px 11px; font-size:14px; }
.periodcard{ margin-top:16px; }
.periodcard .card__head{ margin-bottom:0; }

@media(max-width:820px){
  .answers{ padding:18px 16px; }
  .ans{ grid-template-columns:1fr; gap:10px; }
  .ansbox b{ font-size:29px; }
  .answers .acts .btn{ flex:1 1 100%; }
  .sect__peek{ margin-left:0; width:100%; gap:14px; padding-left:33px; }
  .sect__peek .pk{ text-align:left; }
  .attn__act{ width:100%; }
  .attn__act .btn{ flex:1; }
  .periodbar{ margin-left:0; width:100%; }
  .periodbar .btn{ flex:1; }
}

/* Tabulka jako karty pod sebou na mobilu (Docházka po dnech, Moje žádosti) */
@media(max-width:700px){
  .table-cards thead{ display:none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td{ display:block; width:100%; }
  .table-cards tr{ border-bottom:1px solid var(--border); padding:8px 0; }
  .table-cards tr:last-child{ border-bottom:none; }
  .table-cards tr:nth-child(even){ background:var(--cream-soft); }
  .table-cards td{ border-bottom:none; padding:5px 14px; display:flex; gap:12px; align-items:flex-start; text-align:left; }
  .table-cards td.num{ text-align:left; white-space:normal; }
  .table-cards td::before{ content:attr(data-label); flex:0 0 40%; font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:800; color:var(--muted); line-height:1.6; }
  .table-cards td[data-label=""]::before{ display:none; }
  .table-cards td[data-label=""]{ padding-top:2px; }
  .table-cards td[colspan]::before{ display:none; }
}

/* Předěl na Můj přehled: nad ním je to, co člověk otevře pokaždé, pod ním nástroje,
   které potřebuje, jen když něčemu nevěří nebo byl u lékaře. Bez něj vypadalo všech
   jedenáct bloků stejně důležitě. */
.predel{ display:flex; align-items:center; gap:14px; margin:26px 0 12px; }
.predel span{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--muted); white-space:nowrap; }
.predel::after{ content:""; flex:1; height:1px; background:var(--border); }

/* Volba ráno / odpoledne u napracování – místo rozbalovacího seznamu dvě tlačítka,
   ať je na první pohled vidět, že jsou jen dvě možnosti. */
.choice{ display:flex; gap:8px; flex-wrap:wrap; }
.choice__opt{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; cursor:pointer;
  border:1px solid var(--border-2); border-radius:var(--radius); background:#fff; font-size:14px;
  font-weight:600; color:var(--primary); transition:background .12s,border-color .12s; margin:0; }
.choice__opt:hover{ background:var(--cream); }
.choice__opt:has(input:checked){ border-color:var(--accent); background:var(--cream); box-shadow:inset 0 0 0 1px var(--accent); }
.choice__opt input{ width:auto; margin:0; accent-color:var(--accent); }

/* Zavřená sekce ukazuje hlavní číslo v nadpisu, otevřená ho má uvnitř — a v otevřené se
   proto náhled skryje. Bez toho stálo totéž číslo dvakrát pod sebou (jednou v nadpisu,
   jednou v dlaždici) a lidem to připadalo jako dvě různá čísla, která si odporují.
   Na úzké obrazovce se náhled nevešel vedle nadpisu už dřív, tam se skrývá vždy. */
details.sect[open] > summary .sect__peek{ display:none; }

/* Nabídky k uznání uvnitř karty Lékař. Dřív byly v pruhu úplně nahoře a při více dnech
   zabíraly celou obrazovku — člověk pak dlouho roloval, než se dostal k číslům. */
.nabidky .attn__item{ padding:12px 0; border-bottom:1px solid var(--border); }
.nabidky .attn__item:last-child{ border-bottom:none; padding-bottom:0; }
.nabidky .attn__item b{ font-size:14px; }
.nabidky .attn__item p{ margin:2px 0 0; font-size:13px; color:var(--muted); }
.nabidky .btn{ padding:9px 14px; font-size:13px; }

/* Tým on phones: name + state + saldo visible without sideways scroll */
.tym-m-saldo{ display:none; }
@media(max-width:700px){ .tym-m-saldo{ display:block; font-size:13px; margin-top:2px; } }
@media(max-width:560px){ .pills--order .pill{ padding:10px 8px; } .pills--order .pill small{ font-size:9px; letter-spacing:0; } .pills--order .pill b{ font-size:18px; white-space:nowrap; } }

/* DOCH-036: punch question dialog (two full-width buttons) */
.ask-ov{ position:fixed; inset:0; background:rgba(2,29,37,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.ask-box{ background:#fff; border-radius:var(--radius-lg); width:100%; max-width:420px; padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); }
.ask-q{ margin:0 0 4px; font-size:20px; font-weight:800; text-align:center; color:var(--astorie-ink); }
.ask-btn{ width:100%; min-height:56px; padding:14px 16px; border:none; border-radius:var(--radius-lg); font-size:17px; font-weight:800; color:#fff; cursor:pointer; }
.ask-btn--a{ background:var(--astorie-petrol); }
.ask-btn--b{ background:var(--astorie-orange-dark); }
.ask-cancel{ background:none; border:none; color:var(--astorie-muted); font-size:15px; padding:10px; cursor:pointer; }

/* ===== DOCH-040: nová podoba Nástěnky a Docházky (společný základ: menu, karta stavu, karta pozornosti) ===== */
.pg-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pg-head h1{ margin:0; font-size:22px; color:var(--primary); } .pg-head .pg-date{ margin-left:auto; } .pg-sub{ width:100%; color:var(--muted); font-size:13px; }
.sidebar__foot{ font-style:normal; font-size:12px; color:rgba(255,255,255,.78); }
.sbuser{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .sbuser b{ display:block; font-size:14px; color:#fff; } .sbuser span{ font-size:11.5px; }
.sbuser .avatar{ background:rgba(255,255,255,.16); }
.sbout{ display:block; width:100%; min-height:44px; border:1.5px solid rgba(255,255,255,.55); border-radius:8px; background:none; color:#fff; font-weight:600; font-size:13.5px; font-family:inherit; cursor:pointer; }
.sbout:hover{ background:rgba(255,255,255,.1); }
.mobhead{ display:none; }
.nh-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; margin-bottom:16px; } .nh-grid > *{ min-width:0; }
.nh{ background:var(--primary); color:#fff; border-radius:14px; padding:20px 22px; }
.nh__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.nh__st{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:rgba(255,255,255,.92); }
.nh__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.55); display:inline-block; } .nh__dot.is-on{ background:#fff; }
.nh__big{ font-size:21px; font-weight:600; margin-top:6px; }
.nh__note{ font-size:12.5px; color:rgba(255,255,255,.85); margin:4px 0 0; min-height:1em; }
.nh__clock{ text-align:right; } .nh__clock b{ font-size:52px; font-weight:600; letter-spacing:-.02em; line-height:1; display:block; white-space:nowrap; font-variant-numeric:tabular-nums; } .nh__clock small{ color:rgba(255,255,255,.85); font-size:12px; }
.nh__acts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.nh__bw small{ display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.88); text-align:center; }
.nh__act{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:88px; border-radius:12px; font-weight:600; font-size:20px; font-family:inherit; cursor:pointer; border:2px solid transparent; }
.nh__act svg{ width:26px; height:26px; flex:none; }
.nh__act.is-on{ background:var(--astorie-orange-dark); color:#fff; border-color:var(--astorie-orange-dark); } .nh__act.is-on:hover{ filter:brightness(1.06); }
.nh__act.is-off{ background:var(--stav-neutral-tint); color:var(--astorie-ink); border:1px solid var(--stav-neutral-kraj); } .nh__act.is-off:hover{ background:#fff; }
.nh__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.nh__tile{ display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--border-2); border-radius:12px; padding:0 12px; min-height:56px; color:var(--astorie-ink); font-weight:600; font-size:13.5px; font-family:inherit; cursor:pointer; text-align:left; }
.nh__tile small{ display:block; font-weight:400; color:var(--stav-neutral-text); font-size:11.5px; }
.nh__tile.is-run{ background:var(--stav-info-tint); border-color:var(--astorie-orange-dark); box-shadow:0 0 0 2px rgba(194,58,2,.25); }
.nh__rc{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; flex:none; } .nh__rc svg{ width:19px; height:19px; }
.nh__rc--break{ background:var(--kat-3); } .nh__rc--doc{ background:var(--kat-4); } .nh__rc--oth{ background:var(--stav-neutral-text); }
.nh--big .nh__tile{ min-height:76px; font-size:14.5px; padding:0 16px; gap:12px; } .nh--big .nh__rc{ width:44px; height:44px; } .nh--big .nh__rc svg{ width:24px; height:24px; }
.nh__meta{ display:flex; gap:22px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); font-size:13px; color:rgba(255,255,255,.92); flex-wrap:wrap; }
.nh__meta span{ display:inline-flex; gap:6px; align-items:center; } .nh__meta b{ color:#fff; font-weight:600; } .nh__meta svg{ width:15px; height:15px; }
.att{ background:#fff; border:1px solid var(--border-2); border-radius:12px; overflow:hidden; }
.att__head{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--cream); } .att__head h2{ margin:0; font-size:14px; color:var(--primary); }
.att__cnt{ margin-left:auto; display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; padding:0 5px; background:var(--stav-pozor-tint); color:var(--stav-pozor-text); border:1px solid var(--stav-pozor-kraj); font-size:11.5px; font-weight:700; }
.att__empty{ padding:16px; margin:0; }
.ar{ display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); } .ar:last-child{ border-bottom:0; }
.ar__ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; } .ar__ico svg{ width:16px; height:16px; }
.ar__tt{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:600; } .ar__sb{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.ar--ch{ background:var(--stav-chyba-tint); } .ar--ch .ar__ico{ background:var(--stav-chyba-text); color:#fff; }
.ar--po .ar__ico{ background:var(--stav-pozor-tint); color:var(--stav-pozor-text); border:1px solid var(--stav-pozor-kraj); }
.ar--in .ar__ico{ background:var(--stav-info-tint); color:var(--stav-info-text); border:1px solid var(--stav-info-kraj); }
.ar .btn.sm{ min-height:44px; }
.kp{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.tile{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 16px; min-width:0; }
.tile__k{ color:var(--muted); font-size:12.5px; font-weight:500; display:flex; gap:6px; align-items:center; }
.tile__v{ font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--primary); line-height:1.15; margin:3px 0 1px; }
.tile__v.is-pos{ color:var(--stav-ok-text); } .tile__v.is-neg{ color:var(--stav-chyba-text); }
.tile__n{ font-size:12px; color:var(--muted); }
.who__head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; } .who__head h2{ margin:0; font-size:14.5px; } .who__head .stav{ margin-left:auto; }
.dz-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; } .dz-grid > *{ min-width:0; }
.dz-main > * + *{ margin-top:16px; }
.dz-note{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 14px; }
.dz-note input{ flex:1; min-width:200px; margin:0; }
.dz-how{ margin-top:12px; border-top:1px solid var(--border); padding-top:6px; }
.dz-how summary{ font-size:13px; font-weight:700; cursor:pointer; color:var(--primary); min-height:44px; display:flex; align-items:center; }
.dz-how p{ margin:6px 0 0; line-height:1.5; }
@media(max-width:1000px){ .nh-grid,.dz-grid{ grid-template-columns:1fr; } .kp{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:820px){
  .mobhead{ display:flex; align-items:center; justify-content:space-between; background:var(--primary); padding:10px 14px; }
  .mobhead img{ height:36px; } .mobhead .iconbtn{ background:none; color:#fff; border-color:rgba(255,255,255,.5); width:44px; height:44px; }
  .tabbar{ display:none; }
  .content{ padding:16px 14px 36px; }
  .nh{ padding:16px 14px; } .nh__top{ flex-direction:column; align-items:flex-start; gap:10px; }
  .nh__clock{ text-align:left; } .nh__clock b{ font-size:40px; }
  .nh__acts{ grid-template-columns:1fr; }
  .nh__tile,.nh--big .nh__tile{ padding:0 8px; gap:7px; min-height:60px; font-size:12px; line-height:1.2; } .nh__rc,.nh--big .nh__rc{ width:28px; height:28px; } .nh__rc svg,.nh--big .nh__rc svg{ width:15px; height:15px; }
  .nh__meta{ gap:14px; }
  .ar{ grid-template-columns:28px 1fr; } .ar .btn{ grid-column:2; justify-self:start; }
}

/* DOCH-040 b: Můj měsíc (záložky bez skriptu), Žádosti (skupiny), Nová žádost (dva sloupce) */
.mh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.mh h1{ margin:0; font-size:22px; color:var(--primary); }
.mh__nav{ display:flex; align-items:center; gap:6px; } .mh__nav input[type=month], .mh__nav select{ margin:0; min-width:170px; min-height:44px; }
.mh__nav .btn{ min-width:44px; min-height:44px; padding:0 12px; }
.mh__acts{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.mh__acts .btn{ min-height:44px; }
.mh__cnt{ display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; padding:0 5px; background:var(--stav-pozor-tint); color:var(--stav-pozor-text); border:1px solid var(--stav-pozor-kraj); font-size:11.5px; font-weight:700; }
.mh__sub{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.mh__years{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; } .mh__years .btn{ min-height:44px; }
.mt > input.mt__r{ position:absolute; width:0; height:0; margin:0; padding:0; border:0; opacity:0; pointer-events:none; }
.mt__bar{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; background:var(--cream); border:1px solid var(--border-2); border-radius:12px; padding:6px; margin:16px 0 14px; }
.mt__bar label{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:6px 10px; border-radius:10px; background:#fff; border:1px solid var(--border-2); color:var(--primary); font-weight:600; font-size:14px; cursor:pointer; text-align:center; }
.mt__bar label:hover{ background:var(--cream); }
.mt__p{ display:none; } .mt__p > * + *{ margin-top:14px; }
#mt-dny:checked ~ #p-dny, #mt-lekar:checked ~ #p-lekar, #mt-volno:checked ~ #p-volno, #mt-saldo:checked ~ #p-saldo{ display:block; }
#mt-dny:checked ~ .mt__bar label[for=mt-dny], #mt-lekar:checked ~ .mt__bar label[for=mt-lekar], #mt-volno:checked ~ .mt__bar label[for=mt-volno], #mt-saldo:checked ~ .mt__bar label[for=mt-saldo]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.mt > input.mt__r:focus-visible ~ .mt__bar{ outline:2px solid var(--astorie-orange-dark); outline-offset:2px; }
.mt__h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 6px; } .mt__h h2{ margin:0; font-size:16px; color:var(--primary); }
.ar--ok .ar__ico{ background:var(--stav-ok-tint); color:var(--stav-ok-text); border:1px solid var(--stav-ok-kraj); }
.ar__form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; } .ar__form input[type=text]{ width:190px; margin:0; min-height:44px; } .ar__form .btn{ min-height:44px; }
.att--spaced{ margin:0 0 16px; }
.zg{ background:#fff; border:1px solid var(--border-2); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.zg__h{ display:flex; align-items:center; gap:8px; padding:11px 16px; background:var(--cream); border-bottom:1px solid var(--border); font-weight:700; color:var(--primary); font-size:14px; }
.zr{ display:grid; grid-template-columns:34px 1fr auto auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); } .zr:last-child{ border-bottom:0; }
.zr__ic{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--kat-1); } .zr__ic svg{ width:18px; height:18px; }
.zr__tt{ font-weight:700; } .zr__sb{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.zr__acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .zr__acts .btn{ min-height:44px; }
.zr__empty{ padding:18px 16px; margin:0; color:var(--muted); }
.rq-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start; }
.rq-side{ background:#fff; border:1px solid var(--border-2); border-radius:12px; padding:16px 18px; }
.rq-side h2{ margin:0 0 6px; font-size:14px; color:var(--primary); } .rq-side .big{ font-size:30px; font-weight:600; color:var(--primary); line-height:1.1; font-variant-numeric:tabular-nums; }
.rq-main{ background:#fff; border:1px solid var(--border-2); border-radius:12px; padding:18px 20px; }
.rq-main .req-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } .rq-main .rt{ min-height:44px; padding:10px 8px; }
.rq-err{ border:1px solid var(--stav-chyba-kraj); background:var(--stav-chyba-tint); border-radius:12px; padding:12px 16px; margin-bottom:14px; }
.rq-err b{ color:var(--stav-chyba-text); display:block; }
.rq-ok{ border:1px solid var(--stav-ok-kraj); background:var(--stav-ok-tint); border-radius:12px; padding:12px 16px; margin-bottom:14px; }
@media(max-width:1000px){ .rq-grid{ grid-template-columns:1fr; } .mt__bar{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rq-main .req-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .zr{ grid-template-columns:34px 1fr; } .zr__st,.zr__acts{ grid-column:2; justify-content:flex-start; } .mh__acts{ margin-left:0; width:100%; } .ar__form input[type=text]{ width:100%; } }

/* DOCH-040 b: tabulka Dny v Mém přehledu */
.tdny tfoot td{ border-top:2px solid var(--border-2); background:var(--cream); }
.tdny td.td-hi{ background:var(--stav-info-tint); }
.tdny tr.tr-pozor td{ background:var(--stav-pozor-tint); } .tdny tr.tr-dnes td{ background:var(--stav-info-tint); }
.tdny__d .stav{ margin-left:4px; } .tdny__n{ line-height:1.6; margin:10px 2px 0; }
.tdny td:first-child, .tdny td.num{ white-space:nowrap; }
@media(max-width:700px){ .tdny td:first-child, .tdny td.num{ white-space:normal; } }

/* DOCH-040 d: opravy po kontrole */
.ar__form input[type=text]{ min-width:0; }
@media(max-width:820px){
  .ar .ar__form{ grid-column:2; width:100%; flex-direction:column; align-items:stretch; }
  .ar .ar__form input[type=text]{ width:100%; flex:none; }
  .ar .ar__form .btn{ width:100%; justify-content:center; }
}
.rq-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
.rq-main label{ margin-bottom:4px; }
@media(max-width:600px){ .rq-row{ grid-template-columns:1fr; } }
.seg{ display:flex; flex-wrap:wrap; margin:12px 0 0; padding:0; border:0; min-width:0; }
.seg legend{ padding:0; font-size:13px; font-weight:600; margin-bottom:4px; color:var(--astorie-ink); float:left; width:100%; }
.seg input{ position:absolute; width:0; height:0; opacity:0; margin:0; pointer-events:none; }
.seg label{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; margin:0; border:1px solid var(--border-2); background:#fff; color:var(--primary); font-weight:600; font-size:14px; cursor:pointer; }
.seg label:first-of-type{ border-radius:10px 0 0 10px; } .seg label:last-of-type{ border-radius:0 10px 10px 0; } .seg input + label + input + label{ margin-left:-1px; }
.seg input:checked + label{ background:var(--primary); border-color:var(--primary); color:#fff; }
.seg input:focus-visible + label{ outline:2px solid var(--astorie-orange-dark); outline-offset:2px; position:relative; z-index:1; }
@media(max-width:480px){ .seg label{ flex:1 1 auto; padding:0 8px; font-size:13px; } }
.nh__act.is-off{ color:var(--stav-neutral-text); }
.dz-note input::placeholder{ text-overflow:clip; }
.dz-note input{ min-width:260px; }
.grid.grid-2{ align-items:start; }
@media(max-width:700px){
  .tdny tr{ display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; padding:10px 14px; }
  .tdny td{ padding:0; width:auto; min-width:0; align-items:baseline; gap:6px; }
  .tdny td::before{ flex:0 0 auto !important; text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; }
  .tdny td.td-den{ grid-column:1/-1; font-size:15px; }
  .tdny td.td-den::before, .tdny td.td-konec, .tdny td.td-brk, .tdny td.td-odkud, .tdny td.is-empty, .tdny td:empty{ display:none; }
  .tdny td.tdny__d{ grid-column:1/-1; color:var(--muted); font-size:13px; }
  .tdny td.tdny__d::before{ display:none; }
  .tdny tfoot td[colspan]{ display:none; }
}

/* DOCH-044 správa */
/* ASTORIE Docházka – společný základ obrazovek správy (správce, HR, vedoucí).
   Určeno k doplnění na konec aplikace/app/static/style.css BEZE ZMĚNY.
   Jen proměnné z brand.css a style.css (žádný nový odstín), žádné inline styly, žádné skripty (CSP).
   Předpona sp- = nové třídy; existující třídy (.card .btn .badge .badge--* .zg .zg__h .pills .sect .info .muted .small .empty) se používají dál. */

/* ---------- hlavička obrazovky ---------- */
.sp-ph{ display:flex; align-items:flex-end; gap:12px 16px; flex-wrap:wrap; margin:0 0 16px; }
.sp-ph h1{ margin:0; font-size:22px; color:var(--primary); letter-spacing:-.015em; }
.sp-ph__sub{ flex:1 1 100%; margin:-6px 0 0; font-size:13px; color:var(--muted); }
.sp-ph__acts{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sp-ph .btn,.sp-ph input,.sp-ph select{ min-height:44px; }

/* ---------- stavová karta (co čeká na mě + jedna hlavní akce) ---------- */
.sp-status{ background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:22px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 24px; align-items:center; box-shadow:var(--shadow); }
.sp-status__st{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.92); }
.sp-status__dot{ width:9px; height:9px; border-radius:50%; background:#fff; flex:none; }
.sp-status__big{ font-size:24px; font-weight:600; letter-spacing:-.015em; line-height:1.2; margin-top:6px; }
.sp-status__note{ font-size:12.5px; color:rgba(255,255,255,.85); margin-top:4px; }
.sp-status__act{ display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:240px; }
.sp-status__act .btn{ min-height:56px; font-size:16px; border-radius:12px; }
.sp-status__act small{ font-size:12px; color:rgba(255,255,255,.85); text-align:center; }
.sp-status__chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; border-top:1px solid rgba(255,255,255,.2); }
.sp-chipl{ display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:13px; font-weight:600; }
.sp-chipl:hover{ background:rgba(255,255,255,.2); color:#fff; }
.sp-chipl b{ font-variant-numeric:tabular-nums; }
.sp-status--ok .sp-status__dot{ box-shadow:0 0 0 3px rgba(255,255,255,.25); }

/* ---------- dlaždice s kulatými ikonami ---------- */
.sp-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px; margin:14px 0; }
.sp-tile{ display:block; background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px; color:var(--text); min-width:0; box-shadow:var(--shadow-sm); }
a.sp-tile:hover{ border-color:var(--border-2); box-shadow:var(--shadow); color:var(--text); }
.sp-tile__top{ display:flex; align-items:center; gap:10px; min-width:0; }
.sp-tile .sp-ic{ width:32px; height:32px; } .sp-tile .sp-ic svg{ width:16px; height:16px; }
.sp-tile__k{ font-size:12.5px; font-weight:500; color:var(--muted); display:flex; gap:6px; align-items:center; line-height:1.25; min-width:0; }
.sp-tile__v{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--primary); line-height:1.15; font-variant-numeric:tabular-nums; margin-top:8px; white-space:nowrap; }
.sp-tile__v.is-pos{ color:var(--stav-ok-text); } .sp-tile__v.is-neg{ color:var(--stav-chyba-text); }
.sp-tile__n{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; }
.sp-ic{ grid-row:1 / span 3; }
.sp-tile__k{ font-size:12.5px; font-weight:500; color:var(--muted); display:flex; gap:6px; align-items:center; }
.sp-tile__v{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--primary); line-height:1.15; font-variant-numeric:tabular-nums; }
.sp-tile__v.is-pos{ color:var(--stav-ok-text); } .sp-tile__v.is-neg{ color:var(--stav-chyba-text); }
.sp-tile__n{ font-size:12px; color:var(--muted); }
.sp-ic{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--kat-1); flex:none; }
.sp-ic svg{ width:19px; height:19px; }
.sp-ic--k2{ background:var(--kat-2); } .sp-ic--k3{ background:var(--kat-3); } .sp-ic--k4{ background:var(--kat-4); } .sp-ic--k5{ background:var(--kat-5); } .sp-ic--k6{ background:var(--kat-6); }
.sp-ic--ok{ background:var(--stav-ok-tint); color:var(--stav-ok-text); border:1px solid var(--stav-ok-kraj); }
.sp-ic--po{ background:var(--stav-pozor-tint); color:var(--stav-pozor-text); border:1px solid var(--stav-pozor-kraj); }
.sp-ic--ch{ background:var(--stav-chyba-tint); color:var(--stav-chyba-text); border:1px solid var(--stav-chyba-kraj); }
.sp-ic--in{ background:var(--stav-info-tint); color:var(--stav-info-text); border:1px solid var(--stav-info-kraj); }
.sp-ic--ne{ background:var(--stav-neutral-tint); color:var(--stav-neutral-text); border:1px solid var(--stav-neutral-kraj); }

/* ---------- kompaktní karta hlášek (místo pruhů a odstavců nad tabulkou) ---------- */
.sp-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin:14px 0; align-items:start; }
.sp-note{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; background:var(--stav-info-tint); border:1px solid var(--stav-info-kraj); border-radius:12px; padding:11px 14px; font-size:13px; }
.sp-note__ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--stav-info-text); border:1px solid var(--stav-info-kraj); } .sp-note__ic svg{ width:16px; height:16px; }
.sp-note__t{ font-weight:700; color:var(--text); font-size:13.5px; }
.sp-note__d{ color:var(--text); margin:2px 0 0; line-height:1.4; }
.sp-note details{ margin-top:4px; } .sp-note summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--primary); min-height:28px; display:flex; align-items:center; }
.sp-note details p{ margin:4px 0 0; font-size:12px; color:var(--text); line-height:1.5; }
.sp-note--po{ background:var(--stav-pozor-tint); border-color:var(--stav-pozor-kraj); } .sp-note--po .sp-note__ic{ color:var(--stav-pozor-text); border-color:var(--stav-pozor-kraj); }
.sp-note--ch{ background:var(--stav-chyba-tint); border-color:var(--stav-chyba-kraj); } .sp-note--ch .sp-note__ic{ color:var(--stav-chyba-text); border-color:var(--stav-chyba-kraj); }
.sp-note--ok{ background:var(--stav-ok-tint); border-color:var(--stav-ok-kraj); } .sp-note--ok .sp-note__ic{ color:var(--stav-ok-text); border-color:var(--stav-ok-kraj); }
.sp-hint{ font-size:12px; color:var(--muted); line-height:1.4; margin:4px 0 0; }

/* ---------- skupina žádostí a řádek žádosti ---------- */
.sp-grp{ background:#fff; border:1px solid var(--border-2); border-radius:14px; overflow:hidden; margin-top:16px; box-shadow:var(--shadow-sm); scroll-margin-top:76px; }
.sp-grp__h{ display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--cream); border-bottom:1px solid var(--border); }
.sp-grp__h h2{ margin:0; font-size:15px; color:var(--primary); }
.sp-grp__cnt{ display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:11px; padding:0 6px; background:var(--stav-pozor-tint); color:var(--stav-pozor-text); border:1px solid var(--stav-pozor-kraj); font-size:12px; font-weight:700; }
.sp-grp__h .sp-hint{ margin:0 0 0 auto; }
.sp-grp__tools{ padding:12px 18px; border-bottom:1px solid var(--border); display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; }
.sp-grp__empty{ padding:22px 18px; display:flex; gap:14px 18px; align-items:center; flex-wrap:wrap; color:var(--muted); }
.sp-grp__empty p{ margin:0; flex:1 1 260px; }
.sp-req{ display:grid; grid-template-columns:40px minmax(0,1fr) minmax(250px,300px); gap:10px 14px; align-items:start; padding:14px 18px; border-bottom:1px solid var(--border); }
.sp-req:last-child{ border-bottom:0; }
.sp-req__who{ font-weight:700; color:var(--text); font-size:14.5px; }
.sp-req__who span{ font-weight:500; color:var(--muted); font-size:12.5px; margin-left:6px; }
.sp-req__meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:3px; font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
.sp-req__why{ margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.sp-req__why b{ color:var(--text); }
.sp-req__flags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.sp-req__dec{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.sp-req__dec .sp-btns{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.sp-req__dec .btn{ min-height:40px; }
.sp-req__dec input[type=text]{ min-height:40px; font-size:13.5px; padding:8px 12px; width:100%; }
.sp-req__lock{ font-size:12.5px; color:var(--muted); text-align:right; }
.sp-req--blok{ background:var(--stav-chyba-tint); }
.sp-req--cekal{ background:var(--stav-pozor-tint); }
.sp-req__st{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.sp-req__done{ grid-template-columns:40px minmax(0,1fr) auto auto; }
.sp-req--hist{ grid-template-columns:40px minmax(0,1fr) minmax(150px,220px) auto; align-items:center; }
.sp-btn-wide{ width:100%; }

/* ---------- široká tabulka: viditelné pokračování + zafixovaný první sloupec ---------- */
.sp-tw{ background:#fff; border:1px solid var(--border-2); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; margin-top:16px; }
.sp-tw__h{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:14px 18px 10px; }
.sp-tw__h h2{ margin:0; font-size:16px; color:var(--primary); }
.sp-tw__hint{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.sp-tw__hint svg{ width:16px; height:16px; }
.sp-tw__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--border);
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) 0 0 / 48px 100% no-repeat local,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) 100% 0 / 48px 100% no-repeat local,
    linear-gradient(to right,rgba(0,61,76,.18),rgba(0,61,76,0)) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(to left,rgba(0,61,76,.18),rgba(0,61,76,0)) 100% 0 / 16px 100% no-repeat scroll; }
.sp-t{ border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px; font-variant-numeric:tabular-nums; }
.sp-t th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; text-align:right; padding:10px 12px; border-bottom:1px solid var(--border-2); vertical-align:bottom; white-space:normal; line-height:1.25; min-width:84px; }
.sp-t td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; height:56px; vertical-align:middle; }
.sp-t th.l,.sp-t td.l{ text-align:left; }
.sp-t tbody tr:last-child td{ border-bottom:0; }
.sp-t tbody tr:hover td{ background:rgba(247,244,239,.6); }
.sp-t tbody tr[data-href]{ cursor:pointer; }
.sp-t .sp-sticky{ position:sticky; left:0; z-index:2; background:#fff; text-align:left; min-width:150px; max-width:190px; white-space:normal; box-shadow:1px 0 0 var(--border-2); }
.sp-t thead .sp-sticky{ z-index:3; }
.sp-t tbody tr:hover td.sp-sticky{ background:var(--cream); }
.sp-t td.sp-sticky b{ display:block; font-size:14px; color:var(--text); }
.sp-t td.sp-sticky span{ font-size:12px; color:var(--muted); }
.sp-t__grp th{ text-align:center; font-size:11px; color:var(--primary); border-bottom:1px solid var(--border-2); background:transparent; padding:8px 12px; letter-spacing:.06em; }
.sp-t__grp th.sp-sticky{ background:#fff; }
.sp-t td .sub{ display:block; font-size:12px; color:var(--muted); line-height:1.25; }
.sp-t td.is-pos,.sp-t td.is-pos b{ color:var(--stav-ok-text); } .sp-t td.is-neg,.sp-t td.is-neg b{ color:var(--stav-chyba-text); }
.sp-t td b{ font-weight:700; }
.sp-z{ color:var(--muted); }
.sp-t tfoot td{ font-weight:700; background:var(--cream); border-top:1px solid var(--border-2); border-bottom:0; height:48px; }
.sp-t tfoot td.sp-sticky{ background:var(--cream); }
.sp-low{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill); background:var(--stav-chyba-tint); color:var(--stav-chyba-text); border:1px solid var(--stav-chyba-kraj); font-weight:700; }
.sp-low::before{ content:"!"; font-weight:800; }
.sp-m-saldo{ display:none; font-size:12px; margin-top:2px; line-height:1.3; }
.sp-t--months th,.sp-t--months td{ min-width:0; padding:10px 6px; }
.sp-t--months th.sp-sticky,.sp-t--months td.sp-sticky{ min-width:150px; padding-left:14px; }
.sp-filter .sp-ph__acts{ margin-left:auto; }
.sp-t td.sp-empty{ text-align:center; white-space:normal; height:auto; padding:34px 18px; color:var(--muted); }

/* ---------- filtr (rok, typ, období) ---------- */
.sp-filter{ display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; }
.sp-step{ display:inline-flex; align-items:center; gap:6px; }
.sp-step b{ min-width:76px; text-align:center; font-size:16px; color:var(--primary); }
.sp-step .btn{ min-width:44px; min-height:44px; padding:0 12px; }
.sp-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.sp-chip{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--radius-pill); border:1px solid var(--border-2); background:#fff; color:var(--primary); font-weight:600; font-size:14px; }
.sp-chip:hover{ background:var(--cream); color:var(--primary); }
.sp-chip.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---------- formulář v kartě (akce nad záznamy zaměstnance) ---------- */
.sp-forms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px; margin:14px 0; }
.sp-form{ background:var(--cream-soft); border:1px solid var(--border); border-radius:12px; padding:14px 16px; min-width:0; }
.sp-form__t{ font-weight:700; font-size:14px; color:var(--primary); margin:0 0 2px; }
.sp-form__row{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:10px; }
.sp-form__row label{ margin:0 0 4px; font-size:12px; color:var(--muted); font-weight:600; }
.sp-form__row .f{ flex:1 1 130px; min-width:0; }
.sp-form__row input,.sp-form__row select{ min-height:44px; }
.sp-form__row .btn{ min-height:44px; }

/* ---------- pomocné ---------- */
.sp-back{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13.5px; min-height:44px; }
.sp-back svg{ width:16px; height:16px; }
.sp-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sp-sec{ margin-top:22px; } .sp-sec > h2{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }
.sp-chips-in{ display:flex; flex-wrap:wrap; gap:6px; }
.sp-state-lbl{ margin:34px 0 8px; padding:8px 14px; background:var(--cream); border:1px dashed var(--border-2); border-radius:10px; font-size:13px; color:var(--primary); font-weight:700; }

@media(max-width:1000px){ .sp-status{ grid-template-columns:1fr; } .sp-status__act{ min-width:0; } }
@media(max-width:820px){
  .sp-status{ padding:18px 16px; } .sp-status__big{ font-size:21px; }
  .sp-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .sp-tile{ padding:10px 12px; } .sp-tile__v{ font-size:19px; }
  .sp-notes{ grid-template-columns:1fr; }
  .sp-req,.sp-req--hist{ grid-template-columns:36px minmax(0,1fr); padding:14px; }
  .sp-req .sp-ic{ width:36px; height:36px; }
  .sp-req__dec,.sp-req__st,.sp-req__act{ grid-column:1 / -1; }
  .sp-req__dec .btn{ min-height:44px; flex:1 1 auto; }
  .sp-req__dec .sp-btns{ justify-content:stretch; } .sp-req__lock{ text-align:left; }
  .sp-ph .btn{ flex:1 1 auto; } .sp-ph__acts{ margin-left:0; width:100%; }
  .sp-tw__h{ padding:12px 14px 8px; } .sp-tw__hint{ margin-left:0; width:100%; }
  .sp-t .sp-sticky{ min-width:132px; max-width:140px; } .sp-t td{ height:auto; min-height:56px; } .sp-m-saldo{ display:block; }
  .sp-two{ grid-template-columns:1fr; }
  .sp-forms{ grid-template-columns:1fr; }
  .sp-grp__h{ flex-wrap:wrap; } .sp-grp__h .sp-hint{ margin-left:0; flex:1 1 100%; }
}
/* vysvětlivka „i" v hlavičce tabulky vyjede dolů (nahoru ji ořízne posuvník) */
.sp-t .info::after{ bottom:auto; top:calc(100% + 8px); }
.sp-status .info{ background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.55); }
/* zvýrazněný řádek tabulky, který čeká na rozhodnutí (dnes tr se stavem ČEKÁ) */
.sp-t tr.is-wait td,.sp-t tr.is-wait td.sp-sticky{ background:var(--stav-pozor-tint); }

/* DOCH-044 správa – doplněk k1 (malé pomocné třídy, které spolecne.css nemá) */
.sp-inl{ display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
.sp-inl form{ margin:0; display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
.sp-inl input,.sp-inl select{ width:auto; min-height:40px; }
.sp-inl .btn{ min-height:40px; }
.sp-form .sp-hint{ margin-top:8px; }
.sp-form__row .f.sp-narrow{ flex:0 1 110px; }
.sp-sub-h{ font-size:13px; font-weight:700; color:var(--primary); margin:18px 0 6px; }
.sp-pad{ padding:0 18px 8px; margin:0; }
.sp-mail{ margin-top:16px; }
.sp-t td.sp-sticky .sp-m-saldo b{ display:inline; font-size:inherit; }
.sp-tile__k{ overflow-wrap:anywhere; }

/* DOCH-044 k2 – Mzdy & exporty, Mzdy – složky, Dohody, Nevyužité hodiny, Srovnání dovolené, Statistiky */
.sp-lbl{ display:block; margin:0 0 4px; font-size:12px; color:var(--muted); font-weight:600; }
.sp-year{ width:110px; }
.sp-pad--t{ padding-top:12px; }
.sp-wrap, .sp-t td.sp-wrap, .sp-t th.sp-wrap{ white-space:normal; min-width:180px; } /* vyšší specificita přebije .sp-t td{nowrap} */
.sp-nl{ display:block; }
.sp-grow{ flex:1 1 220px; min-width:0; }
.sp-amt{ width:100px; }
.sp-time{ width:120px; }
.sp-note-in{ width:140px; }
.sp-wide{ min-width:200px; }
.sp-cap, .sp-t th.sp-cap{ text-transform:capitalize; } /* přebije uppercase v hlavičce tabulky */
.sp-code{ font-weight:500; font-size:12.5px; color:var(--muted); margin-left:6px; }
.sp-grp__sum{ margin-left:auto; font-size:13.5px; color:var(--text); }
.sp-line{ display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--border); }
.sp-line:last-child{ border-bottom:0; }
.sp-line > span{ min-width:0; }
.sp-line .sp-hint{ display:block; margin:2px 0 0; }
.sp-line--f{ align-items:flex-start; }
.sp-addrow{ margin-top:8px; flex-wrap:wrap !important; }
.sp-addrow select{ min-height:40px; }
.sp-form__t--2{ margin-top:18px; }
.sp-form--in{ margin:14px 18px 16px; }
.sp-list{ margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:12px; line-height:1.5; }
.sp-chiprm{ display:inline-flex; align-items:center; gap:6px; }
.sp-chiprm form{ margin:0; display:inline; }
.sp-chiprm button{ background:none; border:none; padding:4px; cursor:pointer; color:inherit; line-height:1; min-width:28px; min-height:28px; display:inline-grid; place-items:center; }
.sp-tx-ch{ color:var(--stav-chyba-text); } .sp-tx-po{ color:var(--stav-pozor-text); }
.sp-t td.sp-c-ch{ background:var(--stav-chyba-tint); color:var(--stav-chyba-text); font-weight:600; }
.sp-t td.sp-c-po{ background:var(--stav-pozor-tint); color:var(--stav-pozor-text); font-weight:600; }
.sp-t td .sub{ white-space:nowrap; }
.sp-barrow{ margin:0 0 12px; }
.sp-barrow .sp-line{ border-bottom:0; padding:2px 0 4px; }
progress.sp-bar{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:12px; border:0; border-radius:8px; background:var(--cream); overflow:hidden; }
progress.sp-bar::-webkit-progress-bar{ background:var(--cream); border-radius:8px; }
progress.sp-bar::-webkit-progress-value{ background:var(--kat-1); border-radius:8px; }
progress.sp-bar::-moz-progress-bar{ background:var(--kat-1); border-radius:8px; }
progress.sp-bar--k2::-webkit-progress-value{ background:var(--kat-2); } progress.sp-bar--k2::-moz-progress-bar{ background:var(--kat-2); }
progress.sp-bar--k6::-webkit-progress-value{ background:var(--kat-6); } progress.sp-bar--k6::-moz-progress-bar{ background:var(--kat-6); }
progress.sp-bar--ok::-webkit-progress-value{ background:var(--ok); } progress.sp-bar--ok::-moz-progress-bar{ background:var(--ok); }
progress.sp-bar--watch::-webkit-progress-value{ background:var(--stav-pozor-text); } progress.sp-bar--watch::-moz-progress-bar{ background:var(--stav-pozor-text); }
progress.sp-bar--warn::-webkit-progress-value{ background:var(--accent); } progress.sp-bar--warn::-moz-progress-bar{ background:var(--accent); }
progress.sp-bar--danger::-webkit-progress-value{ background:var(--no); } progress.sp-bar--danger::-moz-progress-bar{ background:var(--no); }
@media(max-width:820px){
  .sp-ph.sp-filter form.sp-filter{ width:100%; } .sp-ph.sp-filter .f{ flex:1 1 140px; } .sp-ph.sp-filter select,.sp-ph.sp-filter input{ width:100%; }
  .sp-grp__sum{ margin-left:0; flex:1 1 100%; }
  .sp-line > .sp-inl{ width:100%; } .sp-line .sp-inl input.sp-amt{ flex:1 1 90px; }
  .sp-note-in{ width:110px; }
  .sp-form--in{ margin:12px 14px 14px; }
}

/* DOCH-044 k3 */
.sp-tile__v{ font-variant-numeric:normal; } /* tabular-nums dělá mezeru za jedničkou (jako f3ca5bf u .tile__v) */
.sp-wrap, .sp-t td.sp-wrap, .sp-t th.sp-wrap{ white-space:normal; min-width:140px; }
.sp-detail{ min-width:260px; max-width:460px; color:var(--muted); font-weight:400; }
.sp-wide{ flex-basis:100% !important; }
.sp-w6{ width:6em; } .sp-w110{ min-width:110px; width:auto; }
.sp-checks{ display:grid; gap:2px; margin-top:6px; } .sp-checks .checkline{ margin:6px 0; }
.sp-days{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; } .sp-days .checkline{ margin:4px 0; font-weight:500; }
.sp-pad-f{ padding:14px 18px 18px; }
.sp-more{ margin-top:8px; } .sp-more summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--primary); min-height:28px; display:flex; align-items:center; }
.sp-more p{ margin:4px 0 0; font-size:12px; line-height:1.5; color:var(--text); }
.sp-t td .sub{ margin-top:2px; }
.sp-grp--danger{ border-color:var(--stav-chyba-kraj); } .sp-grp--danger .sp-grp__h{ background:var(--stav-chyba-tint); border-bottom-color:var(--stav-chyba-kraj); }
.sp-danger-row{ display:flex; gap:12px 24px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--border); }
.sp-danger-row > div{ flex:1 1 320px; min-width:0; }
.sp-danger-form{ flex:0 1 380px; min-width:0; }
.sp-danger-form .btn{ margin-top:10px; }
.sp-pinrow{ display:flex; gap:8px 16px; align-items:center; padding:10px 18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.sp-pinrow .sp-req__who{ flex:1 1 200px; } .sp-pinrow .btn{ min-height:40px; }
/* přepínač se stavem slovem (ne jen barvou) */
.sp-sw{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin:0; position:relative; }
.sp-sw input{ position:absolute; opacity:0; width:44px; height:26px; margin:0; cursor:pointer; }
.sp-sw__track{ flex:none; width:44px; height:26px; border-radius:13px; background:var(--stav-neutral-kraj); position:relative; transition:background .15s; }
.sp-sw__track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:white; box-shadow:var(--shadow-sm); transition:left .15s; }
.sp-sw input:checked ~ .sp-sw__track{ background:var(--primary); } .sp-sw input:checked ~ .sp-sw__track::after{ left:21px; }
.sp-sw input:focus-visible ~ .sp-sw__track{ outline:2px solid var(--accent); outline-offset:2px; }
.sp-sw__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:13.5px; color:var(--text); }
.sp-sw__state{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-style:normal; }
.sp-sw__state i{ font-style:normal; font-weight:700; font-size:12px; padding:2px 10px; border-radius:var(--radius-pill); }
.sp-sw__on{ display:none; background:var(--stav-ok-tint); color:var(--stav-ok-text); border:1px solid var(--stav-ok-kraj); }
.sp-sw__off{ background:var(--stav-neutral-tint); color:var(--stav-neutral-text); border:1px solid var(--stav-neutral-kraj); }
.sp-sw input:checked ~ .sp-sw__txt .sp-sw__on{ display:inline-block; } .sp-sw input:checked ~ .sp-sw__txt .sp-sw__off{ display:none; }
.sp-sw__state em{ font-style:normal; font-size:12px; font-weight:700; color:var(--stav-pozor-text); }
.sp-form--calc{ background:var(--stav-pozor-tint); border-color:var(--stav-pozor-kraj); }
/* zakázky */
.sp-order{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--border); color:inherit; text-decoration:none; min-height:56px; }
.sp-order:hover{ background:var(--cream); color:inherit; }
.sp-order__r{ text-align:right; white-space:nowrap; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.sp-grp__empty .btn{ flex:none; }
.sp-two--top{ align-items:start; margin-top:16px; }
.sp-two--top > .sp-grp{ margin-top:0; }
.sp-flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 0; }
.sp-flow__step{ padding:6px 14px; border-radius:var(--radius-pill); background:var(--cream); color:var(--muted); font-size:13px; font-weight:600; border:1px solid var(--border); }
.sp-flow__step.is-on{ background:var(--primary); color:white; border-color:var(--primary); }
.sp-flow__arrow{ color:var(--muted); display:inline-grid; } .sp-flow__arrow svg{ width:16px; height:16px; transform:rotate(180deg); }
.sp-back{ margin-bottom:6px; }
.sp-tiles--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sp-tiles--3 .sp-tile__v{ white-space:normal; }
.sp-status--off{ background:var(--primary-2); }
@media(max-width:1000px){ .sp-tiles--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:820px){ .sp-two--top{ grid-template-columns:1fr; } .sp-danger-form{ flex:1 1 100%; } .sp-order{ padding:12px 14px; } }

/* DOCH-044 opravy 1 -------------------------------------------------------- */
/* Menu účtů se skupinou Vedení: kompaktní, aby se vešlo celé nad blok se jménem. Menu zaměstnance se nemění. */
.sidebar--vedeni .sidebar__brand{ padding:14px 20px 12px; }
.sidebar--vedeni .sidebar__nav{ padding:6px 12px 8px; }
.sidebar--vedeni .navgroup{ margin-bottom:2px; }
.sidebar--vedeni .navgroup__label{ padding:7px 12px 2px; }
.sidebar--vedeni .navlink{ padding:5px 12px; margin:1px 0; }
.sidebar--vedeni .sidebar__foot{ padding:10px 16px; }
@media(max-height:700px){
  .sidebar--vedeni .sidebar__nav{ -webkit-mask-image:linear-gradient(to bottom,black calc(100% - 30px),transparent); mask-image:linear-gradient(to bottom,black calc(100% - 30px),transparent); padding-bottom:30px; }
}
/* Přeskočit na obsah: vidět jen při zaostření */
.skip-link{ position:absolute; left:8px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--radius); background:var(--primary); color:white; font-weight:700; font-size:14px; text-decoration:none; }
.skip-link:focus{ top:8px; outline:2px solid var(--accent); outline-offset:2px; }
.content:focus{ outline:none; }
/* Vysvětlení na jeden řádek (původně modrý pruh) */
.sp-more--hint{ margin:10px 0 0; }
.sp-more--hint summary{ min-height:32px; }
.sp-more--hint p, .sp-more--hint ul{ max-width:78ch; }
.sp-more--hint ul{ margin:6px 0 0 18px; padding:0; font-size:12px; line-height:1.5; }
/* Tabulka správy: boční stín je jedna vrstva přes celý blok, řádky ho nepřekrývají (žádné zebry ani plné pozadí patičky) */
.sp-t tbody tr:nth-child(even){ background:transparent; }
.sp-t tfoot td{ background:transparent; border-top:2px solid var(--border-2); }
.sp-t tfoot td.sp-sticky{ background:Canvas; }
/* Cíle na mobilu: min. 44 px, jen v obsahu obrazovek správy */
@media(max-width:600px){
  :is(.sp-ph,.sp-grp,.sp-tw,.sp-status,.sp-req,.sp-pad,.sp-pad-f,.sp-notes,.sp-danger-form,.sp-order,.sp-tile) :is(.btn,.sp-chip){ min-height:44px; }
  .sp-more summary{ min-height:44px; }
  .sp-t td .btn, .sp-t td .sp-chip{ min-height:44px; }
}

/* DOCH-044 opravy 2 -------------------------------------------------------- */
/* Jednořádkové shrnutí místo tmavé karty (Auditní stopa) */
.sp-sumline{ margin:0 0 12px; font-size:14px; font-weight:600; color:var(--primary); }
/* Sbalitelné karty (Mzdy – zaměstnanec, Zakázky – nová zakázka) */
.sp-emp > summary{ list-style:none; cursor:pointer; min-height:56px; }
.sp-emp > summary::-webkit-details-marker{ display:none; }
.sp-emp > summary:hover{ background:var(--border); }
.sp-emp > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sp-emp .chev{ width:20px; height:20px; flex:0 0 20px; color:var(--primary-2); transition:transform .16s ease; }
.sp-emp[open] > summary .chev{ transform:rotate(90deg); }
.sp-emp:not([open]) > summary{ border-bottom:0; }
.sp-emp .sp-inl .btn, .sp-emp .sp-addrow .btn{ min-height:44px; }
.sp-emp .sp-addrow .btn{ white-space:nowrap; }
.sp-emp .sp-addrow input, .sp-emp .sp-line .sp-inl input{ min-height:44px; }
.sp-emp .sp-emp-body{ display:block; }
/* Nová zakázka: když je formulář rozbalený, hlavní akce je v něm, ne v kartě nahoře */
.sp-status:has(~ .sp-two--top .sp-nova[open]) .sp-btn-nova{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
/* Dlaždice: pevně 4 sloupce, hrany sedí napříč bloky */
.sp-tiles--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1000px){ .sp-tiles--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Zaměstnanec nelze schválit: pruh u karty místo barevného pozadí */
.sp-req--blok{ background:transparent; box-shadow:inset 4px 0 0 var(--stav-chyba-kraj); }
/* Přehled zaměstnanců: odkaz na detail je jméno */
.sp-name-a{ color:inherit; text-decoration:none; }
.sp-name-a:hover b{ text-decoration:underline; }
/* Přehled zaměstnanců na mobilu: karta = jméno, saldo, stav */
@media(max-width:600px){
  .sp-t--tym .sp-t__grp{ display:none; }
  .sp-t--tym th:nth-child(n+3), .sp-t--tym td:nth-child(n+3){ display:none; }
  .sp-t--tym .sp-sticky{ min-width:0; max-width:none; width:auto; position:static; }
  .sp-t--tym td{ vertical-align:middle; padding-top:12px; padding-bottom:12px; }
  .sp-t--tym td.sp-sticky .sp-name-a{ display:inline-block; min-height:24px; font-size:15px; }
  .sp-t--tym td:nth-child(2){ text-align:right; white-space:normal; }
}
@media(max-width:600px){ .sp-t--tym td.sp-sticky > span:not(.sp-m-saldo){ margin-left:8px; } }

/* DOCH-044 opravy 3 -------------------------------------------------------- */
/* Malé nápovědy: ikona „i“ vlevo, text vlevo (váha 500, tlumená barva), šipka vpravo */
.sp-notes:has(> .sp-more--hint){ grid-template-columns:minmax(0,1fr); gap:0; }
.sp-more--hint{ max-width:78ch; }
.sp-more--hint > summary{ list-style:none; gap:10px; justify-content:flex-start; font-weight:500; color:var(--muted); min-height:36px; }
.sp-more--hint > summary::-webkit-details-marker{ display:none; }
.sp-more--hint > summary::before{ content:"i"; flex:0 0 18px; width:18px; height:18px; display:inline-grid; place-items:center; border:1.5px solid currentColor; border-radius:50%; font-size:11px; font-weight:700; line-height:1; }
.sp-more--hint > summary::after{ content:""; flex:0 0 8px; width:8px; height:8px; margin:0 4px 0 2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .16s ease; }
.sp-more--hint[open] > summary::after{ transform:rotate(-135deg); }
.sp-more--hint > summary:hover{ color:var(--primary); }
.sp-more--hint > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:600px){ .sp-more--hint > summary{ min-height:44px; } }
/* Stavová tečka na tmavé kartě = stejná jako v odznacích */
.sp-status__dot{ width:7px; height:7px; background:currentColor; }
.sp-status--ok .sp-status__dot{ box-shadow:none; }
/* Nápověda k posouvání se skryje, když se tabulka vejde (base.js) */
.sp-tw__hint[hidden], [data-posun][hidden]{ display:none; }
/* Tichý odznak: stav je pořád slovem, jen nerušivě */
.badge.badge--tiche{ background:transparent; color:var(--muted); font-weight:500; border-color:transparent; }
/* Pátá dlaždice v řadě po čtyřech: přes celou šířku, hrany sedí s řadou pod ní */
.sp-tiles--4 > .sp-tile:nth-child(5):last-child{ grid-column:1 / -1; }
/* Mzdy: řádek nad seznamem lidí a číselník odměn */
.sp-listbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 10px; }
.sp-listbar p{ margin:0; font-size:14px; font-weight:600; color:var(--primary); }
.sp-listbar .btn{ min-height:44px; white-space:nowrap; }
.sp-newtype{ flex-wrap:wrap; }
.sp-newtype input{ flex:1 1 180px; min-width:0; min-height:44px; }
.sp-newtype .btn{ min-height:44px; white-space:nowrap; flex:0 0 auto; }
/* Odkaz místo tlačítka na tmavé kartě */
.sp-status__link{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
/* Roční přehled: malé tiché pole „Přejít na rok“ */
.sp-rokpole .sp-lbl{ font-size:12px; font-weight:500; color:var(--muted); margin:0; }
.sp-rokpole input.sp-year{ width:84px; min-height:36px; padding:4px 8px; font-size:13px; }
.sp-rokpole .btn{ min-height:36px; font-weight:500; color:var(--muted); }
@media(max-width:600px){ .sp-rokpole input.sp-year, .sp-rokpole .btn{ min-height:44px; } }

/* DOCH-049: waiting state while a period switch loads (base.js setBusy) */
main[aria-busy="true"]{ opacity:.45; pointer-events:none; transition:opacity .15s; }
.busy-msg{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60; background:var(--primary); color:#fff;
  padding:10px 20px; border-radius:999px; font-weight:600; box-shadow:0 4px 14px rgba(0,61,76,.25); }
/* DOCH-049: /me – a heading that follows a card row gets clear air above it (bigger than the heading-to-cards gap);
   the generic `.mt__p > * + *` rule is overridden by `.mt__h{margin:0 0 6px}`, which glued the headings to the cards. */
.mt__p > .mt__h:not(:first-child){ margin-top:30px; }
/* /me – "Proč mám plus nebo mínus hodiny": 3 + 3 cards, a value never wraps ("167 h 46 min") */
.pills--saldo{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pills--saldo .pill b{ white-space:nowrap; font-size:clamp(20px,2.1vw,26px); }
@media(max-width:600px){ .pills--saldo{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pills--saldo .pill b{ font-size:19px; } }
@media(max-width:1000px){ .busy-msg{ top:auto; bottom:24px; } }   /* mobile: bottom, clear of the dark header and its title */

/* DOCH-039: statement check (only rendered when VYPIS_POTVRZENI is on) */
.vyp-box{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 0; padding:10px 12px; border:1px solid var(--border-2); border-radius:var(--radius); background:#fff; }
.vyp-box__act{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.vyp-box__act form{ margin:0; }
.vyp-link{ display:inline-block; margin-left:6px; font-size:12px; white-space:nowrap; }
.vyp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:14px; }
.vyp-form{ display:grid; gap:6px; margin-bottom:12px; }
.vyp-form textarea,.vyp-form select{ width:100%; }
.vyp-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.vyp-list li{ padding:10px 12px; border:1px solid var(--border-2); border-radius:8px; }
.vyp-res{ margin-top:4px; }
.vyp-adm__row{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,2fr) auto; gap:8px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--border-2); }
@media(max-width:700px){ .vyp-adm__row{ grid-template-columns:1fr; } .vyp-box__act{ margin-left:0; } }