/* ============================================================
   OpenParere — site.css (návrh ze schváleného design systému)
   Vrstva nad Bootstrapem 5.3. Žádné build nástroje.
   Zdroj pravdy: docs/design/prototypy/design-system.dc.html
   ============================================================ */

:root {
  /* ---- Neutrály ---- */
  --op-bg:        #E9ECE6;   /* plocha aplikace */
  --op-surface:   #FFFFFF;   /* formuláře, karty */
  --op-surface-2: #F4F6F2;   /* pruhy, hlavičky, vnitřní plochy */
  --op-border:    #C9CEC8;   /* linky, rámečky */
  --op-border-strong: #B7BDB6; /* rámečky polí */
  --op-ink:       #16181A;   /* text — 16,1:1 na bílé (AAA) */
  --op-ink-muted: #555B61;   /* sekundární text — 6,4:1 (AA) */
  --op-ink-faint: #888E92;   /* potlačený text */

  /* ---- Akcent a sémantika ---- */
  --op-danger:    #C8261C;   /* záchranná červená — JEN akcent: kritické, destrukce, mimo normu */
  --op-danger-bg: #F7DAD7;
  --op-danger-border: #E6A39C;
  --op-success:   #1F7A3D;   /* primární akce (Uložit/Uzavřít), úspěch, norma */
  --op-success-hover: #1A6834;
  --op-success-bg: #DCEEE1;
  --op-success-border: #A7CFB2;
  --op-warning:   #B5651D;   /* rozepsaný, varování */
  --op-warning-bg: #FBEDD8;
  --op-warning-border: #E6C892;
  --op-info:      #2563A8;   /* export, offline-info */
  --op-info-bg:   #DCE8F6;
  --op-info-border: #A6C4E6;
  --op-disabled:  #6B7177;
  --op-disabled-bg: #E7E9E6;

  /* ---- NACA 0–7 (světlostní rampa, funguje i v šedotónu) ---- */
  --naca-0: #2E7D46;  --naca-1: #6FA52A;
  --naca-2: #D4A521;  --naca-3: #E07B1A;   /* NACA 2: tmavý text #1A1A1A! */
  --naca-4: #D3491F;  --naca-5: #C8261C;
  --naca-6: #8E1B14;  --naca-7: #161616;

  /* ---- Geometrie ---- */
  --op-radius:    12px;      /* pole, tlačítka */
  --op-radius-lg: 14px;      /* karty */
  --op-radius-pill: 999px;   /* čipy, badge */
  --op-touch:     52px;      /* min. výška dotykových prvků v terénu */
  --op-touch-admin: 44px;    /* hustší administrace */

  /* ---- Remap Bootstrap 5.3 ---- */
  --bs-primary: var(--op-success);
  --bs-danger:  var(--op-danger);
  --bs-warning: var(--op-warning);
  --bs-info:    var(--op-info);
  --bs-body-color: var(--op-ink);
  --bs-body-bg: var(--op-bg);
  --bs-border-color: var(--op-border);
  --bs-border-radius: var(--op-radius);
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ============ Typografie ============ */
body { font-family: var(--bs-font-sans-serif); color: var(--op-ink); background: var(--op-bg); }
.op-num { font-variant-numeric: tabular-nums; }     /* vitální hodnoty, časy, čísla záznamů */

/* ============ Tlačítka ============ */
.btn { min-height: var(--op-touch); border-radius: var(--op-radius); font-weight: 700; }
.btn-primary {
  --bs-btn-bg:           var(--op-success);
  --bs-btn-border-color: var(--op-success);
  --bs-btn-hover-bg:     var(--op-success-hover);
  --bs-btn-hover-border-color: var(--op-success-hover);
  --bs-btn-active-bg:    var(--op-success-hover);
  --bs-btn-active-border-color: var(--op-success-hover);
  --bs-btn-disabled-bg:  var(--op-success);
  --bs-btn-disabled-border-color: var(--op-success);
  background: var(--op-success); border-color: var(--op-success);
}
.btn-primary:hover { background: var(--op-success-hover); border-color: var(--op-success-hover); }
.btn-outline-dark { border-width: 2px; }
.btn-outline-danger { border-width: 2px; }          /* destrukce: obrys, plná červená až na potvrzení */
.op-btn-admin { min-height: var(--op-touch-admin); }

/* ============ Formuláře ============ */
.form-control, .form-select {
  min-height: var(--op-touch);
  font-size: 16px;                                   /* iOS nezoomuje */
  border: 1.5px solid var(--op-border-strong);
  border-radius: var(--op-radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--op-success);
  box-shadow: 0 0 0 3px rgba(31, 122, 61, 0.18);
}
.form-control.is-invalid {
  border: 2px solid var(--op-danger);
  box-shadow: 0 0 0 3px rgba(200, 38, 28, 0.15);
}
.form-control:disabled, .form-control[readonly].op-closed {
  background: #F1F2EF; border-color: #D7DBD3; color: var(--op-disabled);
}

/* Číselné pole s velkými kroky */
.op-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--op-border-strong); border-radius: 14px; overflow: hidden; }
.op-stepper button { width: 56px; height: 56px; border: none; background: var(--op-surface-2); font: 700 26px/1 var(--bs-font-sans-serif); }
.op-stepper output { width: 72px; display: grid; place-items: center; font: 800 24px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; }

/* Čas s tlačítkem „teď" */
.op-time-now { min-height: var(--op-touch); padding: 0 18px; background: var(--op-ink); color: #fff; border: none; border-radius: var(--op-radius); font-weight: 700; }

/* ============ Čipy (zvolená varianta B — pilulka se zeleným výběrem) ============ */
.op-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 42px; padding: 0 13px;
  border: 1.5px solid var(--op-border); border-radius: var(--op-radius-pill);
  background: var(--op-surface); color: #2A2F34;
  font: 600 14px/1 var(--bs-font-sans-serif); cursor: pointer;
}
.op-chip[aria-pressed="true"] {
  border: 2px solid var(--op-success); background: #E2F0E6; color: #1A5C30;
}
.op-chip--suggested {                                /* kaskáda návrhů: věk→potíže→ošetření→materiál */
  border-color: #8FC49C; background: #F4FAF6;
}
.op-chip-hint { font: 700 11px/1 var(--bs-font-sans-serif); color: var(--op-success); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============ Badge stavů (vždy tvar + text + barva) ============ */
.op-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--op-radius-pill); font: 700 12px/1 var(--bs-font-sans-serif); }
.op-badge--draft    { background: var(--op-warning-bg); border: 1px solid var(--op-warning-border); color: #7A4A0F; }
.op-badge--closed   { background: var(--op-success-bg); border: 1px solid var(--op-success-border); color: #155C2E; }
.op-badge--exported { background: var(--op-info-bg);    border: 1px solid var(--op-info-border);    color: #1B4A80; }
.op-badge--inactive { background: #EDEFEA;              border: 1px solid #CFD4CC;                  color: #5A6066; }
.op-badge--warn     { background: var(--op-warning-bg); border: 1px solid var(--op-warning-border); color: #7A4A0F; padding: 3px 8px; margin-left: 6px; font-size: 11px; }
.op-badge--danger   { background: #FBE3E3;              border: 1px solid #E9B6B6;                  color: #8A1F1F; padding: 3px 8px; margin-left: 6px; font-size: 11px; }

/* ============ Filtr-bar (seznam přístrojů apod.) ============ */
.op-filtr-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.op-filtr { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.op-filtr select { min-width: 180px; }
.op-cell-umisteni select.op-umisteni-select { min-width: 150px; }

/* ============ NACA výběr ============ */
.op-naca { display: flex; gap: 4px; }
.op-naca button { flex: 1 1 0; min-width: 0; border-radius: 9px; border: 1px solid rgba(0,0,0,0.1); padding: 11px 2px; font: 800 18px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; color: #fff; opacity: 0.85; }
.op-naca button[aria-pressed="true"] { border: 3px solid var(--op-ink); box-shadow: inset 0 0 0 2px #fff; opacity: 1; }
.op-naca-0 { background: var(--naca-0); } .op-naca-1 { background: var(--naca-1); }
.op-naca-2 { background: var(--naca-2); color: #1A1A1A !important; }
.op-naca-3 { background: var(--naca-3); } .op-naca-4 { background: var(--naca-4); }
.op-naca-5 { background: var(--naca-5); } .op-naca-6 { background: var(--naca-6); }
.op-naca-7 { background: var(--naca-7); }

/* ============ Tabulka měření ============ */
.op-table { border: 1px solid var(--op-ink); border-radius: 10px; overflow: hidden; }
.op-table table { margin: 0; font-variant-numeric: tabular-nums; }
.op-table thead tr { background: var(--op-ink); color: #fff; }
.op-table .op-out-warn { color: #8A5A1A; font-weight: 800; text-decoration: underline; }  /* mimo normu: i jinak než barvou */
.op-table .op-out-crit { color: var(--op-danger); font-weight: 800; text-decoration: underline; }

/* ============ Karta záznamu ============ */
.op-record { display: flex; border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); overflow: hidden; background: var(--op-surface); }
.op-record__bar { width: 6px; flex: 0 0 auto; background: var(--op-success-bg); }
.op-record--draft { border-color: var(--op-warning-border); background: #FFFDF8; }
.op-record--draft .op-record__bar { background: var(--op-warning); }

/* ============ Navigace (zvolená varianta A — tmavá lišta + pruh akce) ============ */
.op-nav { background: var(--op-ink); color: #fff; }
.op-nav-strip { background: #2A2D30; color: #D6DAD3; font: 600 13px/1 var(--bs-font-sans-serif); }
.op-offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-danger); box-shadow: 0 0 0 3px rgba(200, 38, 28, 0.25); }

/* ============ Spodní lišta (terénní obrazovky) ============ */
.op-actionbar { position: sticky; bottom: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--op-bg) 75%, rgba(233, 236, 230, 0)); }

/* ============ Hlášky ============ */
.op-alert { display: flex; gap: 10px; padding: 11px 13px; border-radius: 11px; font: 600 13px/1.4 var(--bs-font-sans-serif); }
.op-alert--danger  { background: var(--op-danger-bg);  border: 1px solid var(--op-danger-border);  color: #8E1B14; }
.op-alert--warning { background: var(--op-warning-bg); border: 1px solid var(--op-warning-border); color: #7A4A0F; }
.op-alert--success { background: var(--op-success-bg); border: 1px solid var(--op-success-border); color: #155C2E; }
.op-alert--info    { background: var(--op-info-bg);    border: 1px solid var(--op-info-border);    color: #1B4A80; }

/* ============ Prázdný stav ============ */
.op-empty { border: 2px dashed var(--op-border); border-radius: var(--op-radius-lg); padding: 30px 18px; text-align: center; background: #F8F9F6; }

/* ============ Sloupcový picker hodnot (vybírat, ne psát) ============ */
.op-picker { position: relative; height: 196px; overflow-y: auto; border: 1px solid #D7DBD3; border-radius: 10px; background: var(--op-surface); padding: 4px; touch-action: pan-y; user-select: none; cursor: grab; }
.op-picker button { display: block; width: 100%; text-align: center; border: none; background: transparent; color: #454B51; font: 500 18px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; padding: 11px 0; border-radius: 8px; }
.op-picker button[aria-pressed="true"] { font-weight: 800; color: #fff; }  /* barvu dodá JS dle normy: success/warning/danger */

/* — doplňky implementace — */
/* Třídy doplněné při implementaci layoutu (varianta A), přihlášení, administrace a chybových stavů.
   Tokeny výše se nemění. */

/* ---- App shell ---- */
.op-app { min-height: 100vh; display: flex; flex-direction: column; }
.op-main { flex: 1 1 auto; }
.op-h1 { font: 800 28px/1.15 var(--bs-font-sans-serif); letter-spacing: -0.02em; margin: 0 0 10px; }
.op-h2 { font: 800 20px/1.1 var(--bs-font-sans-serif); }
.op-h2-sub { font-weight: 500; font-size: 15px; }
.op-lead { font: 400 16px/1.55 var(--bs-font-sans-serif); color: var(--op-ink); margin: 0 0 12px; }
.op-muted { font: 500 13px/1.4 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-card { background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); }
.op-card--pad { padding: 24px; }
.op-label-note { font: 500 12px/1 var(--bs-font-sans-serif); color: var(--op-ink-faint); }

/* ---- Navigace (varianta A) ---- */
.op-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.op-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.op-brand:hover { color: #fff; }
.op-brand__name { font: 800 17px/1 var(--bs-font-sans-serif); }
.op-brand__mark { position: relative; width: 26px; height: 26px; border-radius: 7px; background: var(--op-danger); display: grid; place-items: center; flex: 0 0 auto; }
.op-brand__mark--lg { width: 38px; height: 38px; border-radius: 10px; }
.op-brand__cross { position: relative; width: 14px; height: 14px; }
.op-brand__mark--lg .op-brand__cross { width: 20px; height: 20px; }
.op-brand__cross::before, .op-brand__cross::after { content: ""; position: absolute; background: #fff; border-radius: 1px; }
.op-brand__cross::before { left: 50%; top: 0; width: 3px; height: 100%; transform: translateX(-50%); }
.op-brand__cross::after { top: 50%; left: 0; height: 3px; width: 100%; transform: translateY(-50%); }
.op-brand__mark--lg .op-brand__cross::before { width: 4px; }
.op-brand__mark--lg .op-brand__cross::after { height: 4px; }
.op-nav__user { display: flex; align-items: center; gap: 14px; }
.op-nav__name { font: 600 13px/1 var(--bs-font-sans-serif); color: #D6DAD3; }
.op-nav__logout { margin: 0; }
.op-nav__logout-btn { background: transparent; border: 1px solid #3A3D40; color: #E7E9E6; border-radius: var(--op-radius-pill); padding: 7px 14px; font: 600 13px/1 var(--bs-font-sans-serif); cursor: pointer; }
.op-nav__logout-btn:hover { background: #2A2D30; }
.op-nav__admin-link { font: 600 13px/1 var(--bs-font-sans-serif); color: rgba(255,255,255,0.7); text-decoration: none; }
.op-nav__admin-link:hover { color: #fff; }
.op-nav-strip__inner { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
.op-nav-strip__label { color: #9AA0A4; }
.op-nav-strip__value { color: #fff; font-weight: 700; }

/* ---- Přihlášení ---- */
.op-login { display: grid; place-items: center; padding: 40px 12px; }
.op-login__card { width: 100%; max-width: 400px; background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: 16px; padding: 28px; }
.op-login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.op-login__title { font: 800 19px/1.1 var(--bs-font-sans-serif); }
.op-login__subtitle { font: 500 12px/1.2 var(--bs-font-sans-serif); color: var(--op-ink-faint); }
.op-alert__icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: currentColor; color: #fff !important; font: 800 12px/1 var(--bs-font-sans-serif); }
.op-alert--danger .op-alert__icon { background: var(--op-danger); }
.op-alert--warning .op-alert__icon { background: var(--op-warning); }
.op-alert { align-items: center; }
.op-alert > span:last-child { color: inherit; }

/* ---- Stavové stránky (chyba, 403, 404) ---- */
.op-state { max-width: 440px; margin: 32px auto; background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: 16px; padding: 38px 28px; text-align: center; }
.op-state__icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font: 800 26px/1 var(--bs-font-sans-serif); }
.op-state__icon--danger { background: var(--op-danger-bg); border: 1px solid var(--op-danger-border); color: var(--op-danger); }
.op-state__icon--warning { background: var(--op-warning-bg); border: 1px solid var(--op-warning-border); color: var(--op-warning); font-size: 22px; }
.op-state__title { font: 800 22px/1.2 var(--bs-font-sans-serif); margin: 0 0 8px; }
.op-state__text { font: 400 14.5px/1.55 var(--bs-font-sans-serif); color: #3A4047; max-width: 320px; margin: 0 auto 14px; }
.op-state__reqid { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; background: #EDEFEA; font: 600 12.5px/1 ui-monospace, monospace; color: var(--op-ink-muted); margin-bottom: 18px; }
.op-state__reqid code { color: inherit; }
.op-state__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.op-state__hint { margin: 14px 0 0; font: 400 12px/1.5 var(--bs-font-sans-serif); color: var(--op-ink-faint); }

/* ---- Administrace: shell s bočními záložkami ---- */
.op-admin { display: flex; gap: 18px; align-items: flex-start; }
.op-admin__content { flex: 1 1 auto; min-width: 0; }
.op-admin__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.op-sidetabs { flex: 0 0 210px; background: #EDEFEA; border: 1px solid #D7DBD3; border-radius: 12px; padding: 8px; }
.op-sidetab { display: block; width: 100%; min-height: 40px; line-height: 40px; padding: 0 12px; text-align: left; border-radius: 9px; font: 600 13.5px/40px var(--bs-font-sans-serif); color: var(--op-ink); text-decoration: none; }
.op-sidetab:hover { color: var(--op-ink); background: rgba(255,255,255,0.5); }
.op-sidetab--active { background: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.op-back { display: inline-block; background: transparent; border: none; font: 700 13px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); text-decoration: none; padding: 0; margin-bottom: 10px; }
.op-back:hover { color: var(--op-ink); }

/* ---- Administrace: tabulka ---- */
.op-admin-table { border: 1px solid var(--op-border); border-radius: 11px; overflow: hidden; background: var(--op-surface); }
/* Bootstrap maluje buňky barvou --bs-table-bg (= --bs-body-bg = šedá), čímž přebíjí
   tmavou hlavičku i bílé tělo tabulky. Vynulujeme ji, ať prosvítá pozadí řádku/kontejneru. */
.op-admin-table table { font: 500 13.5px/1.3 var(--bs-font-sans-serif); --bs-table-bg: transparent; }
.op-admin-table thead tr { background: var(--op-ink); color: #fff; }
/* Bootstrap 5.3 barví text přímo na buňkách (.table > :not(caption) > * > * má
   color: --bs-table-color = --op-ink), takže bílá zděděná z <tr> prohraje a
   hlavička je černá na černé. Bílou proto nastavujeme přímo na <th>. */
.op-admin-table thead th { font: 700 12px/1 var(--bs-font-sans-serif); padding: 9px 12px; border: none; color: #fff; }
.op-admin-table td { padding: 9px 12px; border-bottom: 1px solid #E6E8E3; vertical-align: middle; }
.op-admin-table tbody tr:nth-child(even) { background: #F8F9F6; }
.op-cell-name { font-weight: 700; color: var(--op-ink); }
.op-cell-muted { color: #454B51; }
.op-row--inactive { background: #F4F6F2 !important; }
.op-row--inactive .op-cell-name { color: var(--op-disabled); }
.op-row--inactive .op-cell-muted { color: #8A9095; }

/* ---- Kniha jízd ---- */
/* Jízda, jejíž počáteční tachometr nenavazuje na předchozí jízdu vozidla (upozornění, ne chyba). */
.op-row--nenavazuje { background: var(--op-warning-bg) !important; box-shadow: inset 3px 0 0 var(--op-warning); }
.op-jizdy-filtr { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.op-jizdy-filtr .form-label { margin-bottom: 4px; }
.op-jizdy-filtr .form-select, .op-jizdy-filtr .form-control { min-height: var(--op-touch-admin); }

/* ---- Administrace: strom MKN (kapitola → kategorie → kód) ---- */
.op-strom-odkaz { background: none; border: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.op-strom-odkaz:hover { text-decoration: underline; color: var(--op-ink); }
.op-strom-sipka { display: inline-block; width: 14px; color: #8A9095; font-size: 11px; }
.op-strom-2 { padding-left: 34px !important; }
.op-strom-3 { padding-left: 62px !important; }
.op-toggle[disabled] { cursor: default; opacity: 0.45; }

/* ---- Badge: kvalifikace / role / stav v administraci ---- */
.op-kv-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: #EDEFEA; border: 1px solid #CFD4CC; color: #4A5056; font: 700 11px/1 var(--bs-font-sans-serif); letter-spacing: 0.03em; }
.op-role-badge { display: inline-flex; padding: 3px 9px; border-radius: 6px; background: var(--op-ink); color: #fff; font: 700 11px/1 var(--bs-font-sans-serif); }
.op-role-plain { font: 500 13px/1 var(--bs-font-sans-serif); color: #454B51; }
.op-badge--active { background: var(--op-success-bg); border: 1px solid var(--op-success-border); color: #155C2E; padding: 4px 9px; }
.op-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.op-dot--on { background: var(--op-success); }
.op-dot--off { border: 2px solid var(--op-disabled); }
.op-btn-edit { background: var(--op-surface); border: 1.5px solid var(--op-border); border-radius: 8px; font: 700 12.5px/1 var(--bs-font-sans-serif); color: var(--op-ink); padding: 0 13px; min-height: var(--op-touch-admin); display: inline-flex; align-items: center; }
.op-btn-edit:hover { background: #F0F1EE; color: var(--op-ink); }

/* ---- Administrace: karty uživatelů (telefon) ---- */
.op-admin-cards { display: flex; flex-direction: column; gap: 9px; }
.op-ucard { display: block; background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: 13px; padding: 12px 14px; text-decoration: none; color: var(--op-ink); }
.op-ucard--inactive { background: #F4F6F2; }
.op-ucard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.op-ucard__name { font: 700 14.5px/1.2 var(--bs-font-sans-serif); }
.op-ucard--inactive .op-ucard__name { color: var(--op-disabled); }
.op-ucard__email { font: 400 12.5px/1.3 var(--bs-font-sans-serif); color: var(--op-ink-muted); margin-bottom: 8px; }
.op-ucard--inactive .op-ucard__email { color: #8A9095; }
.op-ucard__meta { display: flex; gap: 6px; align-items: center; }

/* ---- Formuláře v administraci ---- */
.op-form { max-width: 560px; }
/* Pole musí být bílá plocha, ne šedé pozadí aplikace.
   Bootstrap dává .form-control background: var(--bs-body-bg) = --op-bg (šedá),
   takže pole jinak splývají s pozadím (uživatel: „chybí pozadí"). */
.form-control, .form-select { background-color: var(--op-surface); }
.form-control:focus, .form-select:focus { background-color: var(--op-surface); }
.op-admin-table .form-control { min-height: var(--op-touch-admin); }
.op-form .form-control, .op-form .form-select { min-height: var(--op-touch-admin); }
.op-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Bílá karta okolo administračního formuláře — dává formuláři jasnou plochu
   nad šedým pozadím (desktopové vyladění dle prototypů). */
.op-formcard { background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); padding: 22px 24px; max-width: 620px; }
.op-formcard--wide { max-width: 760px; }
.op-formcard .op-form { max-width: none; }
.op-formcard > .op-alert, .op-formcard > .op-validation { margin-bottom: 16px; }
/* Vnořená tabulka v bílé kartě: jemný šedý rámeček místo bílá-na-bílé. */
.op-formcard .op-admin-table { background: var(--op-surface-2); }
.op-formcard .op-admin-table tbody tr:nth-child(even) { background: var(--op-surface); }
@media (max-width: 575.98px) { .op-formcard { padding: 16px; } }

/* ---- Panel řazení nad seznamem uživatelů ---- */
.op-admin__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Definiční seznam (Můj profil: štítek → hodnota) ---- */
.op-deflist { display: grid; grid-template-columns: minmax(160px, auto) 1fr; gap: 8px 20px; margin: 0; }
.op-deflist dt { font: 600 13px/1.4 var(--bs-font-sans-serif); color: var(--op-ink-faint); }
.op-deflist dd { margin: 0; font: 500 15px/1.4 var(--bs-font-sans-serif); }
@media (max-width: 575.98px) { .op-deflist { grid-template-columns: 1fr; gap: 2px 0; } .op-deflist dd { margin-bottom: 10px; } }
.op-validation:empty { display: none; }
.op-validation ul { margin: 0 0 12px; padding-left: 18px; }
.op-input-sm { min-height: 38px !important; font-size: 14px !important; }
.op-input-zkr { max-width: 90px; text-align: center; font-weight: 700; text-transform: uppercase; }
.op-btn-sm { min-height: 38px !important; padding: 0 14px; font-size: 12.5px; }
.op-kv-table .op-kv-zkr { width: 120px; }
.op-kv-addrow td { background: #F4F6F2; }
/* Pole EOČ pracovníka + tlačítko „Navrhnout volné" na jednom řádku (registr EOČ, správa uživatelů). */
.op-eoc-navrh { display: flex; gap: 8px; align-items: center; }
.op-eoc-navrh .form-control { flex: 1 1 auto; }
.op-eoc-navrh .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 575.98px) { .op-eoc-navrh { flex-wrap: wrap; } .op-eoc-navrh .form-control { flex-basis: 100%; } }

/* ---- Přepínač (switch) ---- */
.op-switchrow { display: flex; }
.op-switch { display: inline-flex; align-items: center; gap: 12px; min-height: var(--op-touch-admin); cursor: pointer; margin: 0; }
.op-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.op-switch__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--op-border); flex: 0 0 auto; transition: background 0.15s; }
.op-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.15s; }
.op-switch input:checked + .op-switch__track { background: var(--op-success); }
.op-switch input:checked + .op-switch__track .op-switch__thumb { left: 23px; }
.op-switch input:focus-visible + .op-switch__track { box-shadow: 0 0 0 3px rgba(31,122,61,0.3); }
.op-switch__label { font: 600 14px/1 var(--bs-font-sans-serif); }

/* ---- Přepínač aktivní u kvalifikací (tlačítko = forma) ---- */
.op-toggle { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: none; cursor: pointer; padding: 4px; font: 600 12.5px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-toggle__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--op-border); flex: 0 0 auto; }
.op-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.15s; }
.op-toggle--on .op-toggle__track { background: var(--op-success); }
.op-toggle--on .op-toggle__thumb { left: 23px; }
.op-toggle__text { white-space: nowrap; }

/* ---- Informační poznámka ---- */
.op-note { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; background: var(--op-info-bg); border: 1px solid var(--op-info-border); color: #1B4A80; font: 600 12.5px/1.3 var(--bs-font-sans-serif); }
.op-note__icon { font-weight: 800; }

/* ---- Zaškrtávátko (přiřazení na akci) — pohodlný cíl pro dotyk (44 px) ---- */
.op-checkbox { width: 22px; height: 22px; margin: 11px; cursor: pointer; }
.op-checkbox:focus-visible { box-shadow: 0 0 0 3px rgba(31,122,61,0.3); }

/* ---- Responzivní zobrazení tabulka vs. karty ---- */
.op-only-phone { display: none; }
@media (max-width: 767.98px) {
  .op-only-desktop { display: none; }
  .op-only-phone { display: flex; }
  .op-admin { flex-direction: column; }
  .op-sidetabs { flex: 1 1 auto; width: 100%; display: flex; gap: 6px; overflow-x: auto; }
  .op-sidetab { width: auto; white-space: nowrap; }
  /* Horní lišta na telefonu: e-mail se nezalomí a smí být zkrácen,
     aby uživatelská oblast nepřetékala šířku obrazovky. Když se odkazy
     (Nápověda, Kniha jízd, Administrace, Odhlásit) na jednu řadu nevejdou,
     zalomí se doprava do druhé řady místo přetečení mimo displej. */
  .op-nav__inner { gap: 8px; }
  .op-nav__user { gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .op-nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .op-nav__logout-btn { white-space: nowrap; flex: 0 0 auto; }
}
/* Velmi úzké telefony (360–480 px): e-mail skryjeme úplně,
   ponecháme jen Administrace + Odhlásit. Žádné vodorovné rolování. */
@media (max-width: 480px) {
  .op-nav__name { display: none; }
}

/* ============================================================
   B2 — Přehled akce + Rychlý záznam (terénní obrazovky)
   ============================================================ */

/* ---- Přehled: hlavička ---- */
.op-prehled__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.op-prehled__actions { display: flex; align-items: center; gap: 10px; }
/* .btn má min-height (touch cíl); <button> centruje text nativně, ale <a class="btn"> je inline-block
   a nechal by text nahoře („Kniha ošetření (PDF)" je odkaz). Sjednotíme na flex-vystředění. */
.op-prehled__actions .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Filtr za ikonou (telefon: <details>) ---- */
.op-filterbox.op-only-phone { display: none; }
.op-filterbox { border: none; margin-bottom: 12px; }
.op-filterbox__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; background: var(--op-surface); border: 1.5px solid var(--op-border); border-radius: var(--op-radius); color: var(--op-ink-muted); font: 600 14px/1 var(--bs-font-sans-serif); cursor: pointer; list-style: none; user-select: none; }
.op-filterbox__toggle::-webkit-details-marker { display: none; }
.op-filterbox__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--op-danger); }

/* ---- Filtr čipy (odkazy) ---- */
.op-filterchips { display: flex; gap: 8px; flex-wrap: wrap; }
.op-fchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius-pill); font: 700 13px/1 var(--bs-font-sans-serif); text-decoration: none; }
.op-fchip:hover { color: var(--op-ink); }
.op-fchip--on { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }
.op-fchip--on:hover { color: #fff; }
.op-fchip__count { padding: 2px 6px; border-radius: 999px; background: #EDEFEA; color: #6B7177; font: 700 11px/1 var(--bs-font-sans-serif); }
.op-fchip--on .op-fchip__count { background: rgba(255,255,255,0.22); color: #fff; }
.op-filterchips--big .op-fchip { padding: 9px 14px; font-size: 14px; }

/* ---- Typ záznamu (tag) ---- */
.op-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font: 700 11px/1 var(--bs-font-sans-serif); }
.op-tag--rychle { background: #EDEFEA; border: 1px solid #CFD4CC; color: #4A5056; }
.op-tag--vyjezd { background: var(--op-info-bg); border: 1px solid var(--op-info-border); color: #1B4A80; }

/* ---- Pilulky akcí v kartách ---- */
.op-pill { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--op-radius-pill); font: 700 13px/1 var(--bs-font-sans-serif); }
.op-pill--go { background: var(--op-success); color: #fff; }
.op-pill--open { border: 1.5px solid var(--op-border); color: var(--op-ink); }

/* ---- Tečka stavu (jantar) ---- */
.op-dot--warn { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--op-warning); }

/* ---- Přehled: karty (telefon) ---- */
.op-records { flex-direction: column; gap: 10px; }
.op-record { text-decoration: none; color: var(--op-ink); cursor: pointer; }
.op-record:hover { color: var(--op-ink); border-color: var(--op-ink-faint); }
.op-record__body { display: flex; flex-direction: column; padding: 13px 14px; flex: 1 1 auto; min-width: 0; }
.op-record__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.op-record__cislo { font: 800 15px/1 var(--bs-font-sans-serif); }
.op-record__name { font: 600 15px/1.3 var(--bs-font-sans-serif); margin-bottom: 3px; }
.op-record__potize { font: 400 14px/1.4 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-record__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.op-record__meta { font: 500 13px/1 var(--bs-font-sans-serif); color: var(--op-ink-faint); }

/* ---- Přehled: hustá tabulka (desktop) ---- */
.op-records-table { border: 1px solid var(--op-border); border-radius: 12px; overflow: hidden; background: var(--op-surface); }
.op-records-table table { font: 500 14px/1.3 var(--bs-font-sans-serif); --bs-table-bg: transparent; }
.op-records-table thead tr { background: var(--op-ink); color: #fff; }
.op-records-table thead th { font: 700 12.5px/1 var(--bs-font-sans-serif); padding: 11px 12px; border: none; color: #fff; } /* Bootstrap přebíjí barvu na <th>, viz .op-admin-table */
.op-records-table td { padding: 12px; border-bottom: 1px solid #E6E8E3; vertical-align: middle; }
.op-records-table tbody tr:nth-child(even) { background: #F8F9F6; }
.op-records-table tbody tr.op-row--draft { background: #FFFBF2; }
.op-cell-cislo { font: 800 14px/1 var(--bs-font-sans-serif); border-left: 4px solid transparent; }
.op-cell-cislo--draft { border-left-color: var(--op-warning); }
.op-cell-sub { font: 500 12px/1.2 var(--bs-font-sans-serif); color: var(--op-ink-faint); margin-top: 2px; }
.op-cell-potize { max-width: 260px; }
/* — doplňky implementace — */
/* Akční sloupec: „Pokračovat" (zelené .btn) a „Otevřít" (.op-btn-edit) musí být
   vizuálně shodné — stejná výška, stejné svislé vystředění v řádku, zarovnaná pravá
   hrana. Zelené bylo .btn.op-btn-sm (inline-block, 38px) → nižší a text nevystředěný
   oproti bílému (.op-btn-edit: inline-flex, 44px). Sjednotíme zelené na týž tvar. */
.op-records-table td .btn.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  /* !important: .op-btn-sm na zeleném tlačítku drží min-height: 38px !important */
  min-height: 44px !important; padding: 0 13px; font-size: 12.5px;
}

/* ---- Podbarvení závažnosti dle NACA (jen výjezdové; rychlé nemají NACA → bez tintu) ----
   NACA 0–2 → žádný tint; NACA 3–4 → světle jantarová; NACA 5–7 → světle červená.
   Pravidla jdou ZA :nth-child(even) i .op-row--draft (zde definovaná dříve), takže vyhrávají
   nad pruhováním i nad rozepsaným #FFFBF2 — NACA tint je klinicky důležitější (dle zadání).
   Rozepsaný si i tak ponechá jantarový levý proužek (.op-cell-cislo--draft). */
.op-records-table tbody tr.op-naca-tint--amber { background: #FBEDD8; }
.op-records-table tbody tr.op-naca-tint--red   { background: #FAE3E1; }
.op-record--naca-amber { background: #FBEDD8; border-color: #E6C892; }
.op-record--naca-red   { background: #FAE3E1; border-color: #E6A39C; }

/* Malý NACA štítek (číslo na barvě NACA škály) — „stav nikdy jen barvou". */
.op-naca-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; color: #fff; font: 800 12.5px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; }
.op-naca-badge--0 { background: var(--naca-0); } .op-naca-badge--1 { background: var(--naca-1); }
.op-naca-badge--2 { background: var(--naca-2); color: #1A1A1A; } .op-naca-badge--3 { background: var(--naca-3); }
.op-naca-badge--4 { background: var(--naca-4); } .op-naca-badge--5 { background: var(--naca-5); }
.op-naca-badge--6 { background: var(--naca-6); } .op-naca-badge--7 { background: var(--naca-7); }
.op-records-table .op-cell-cislo .op-naca-badge { display: inline-grid; margin-top: 6px; }
.op-records-table .op-cell-cislo { white-space: nowrap; }
.op-record__top .op-naca-badge { flex: 0 0 auto; }

/* ---- Naléhavost (triáž N1–N4) — barevné odlišení; „stav nikdy jen barvou": odznak nese zkratku ---- */
:root {
  --nlh-1: #C62828; /* N1 vážný úraz s transportem */
  --nlh-2: #EF6C00; /* N2 kolaps ošetřený na místě */
  --nlh-3: #F9A825; /* N3 úraz do velkého záznamu */
  --nlh-4: #2E7D32; /* N4 rychlé / jednoduché */
}
.op-nlh-badge { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; color: #fff; font: 800 12px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.op-nlh-badge--n1 { background: var(--nlh-1); }
.op-nlh-badge--n2 { background: var(--nlh-2); }
.op-nlh-badge--n3 { background: var(--nlh-3); color: #1A1A1A; }
.op-nlh-badge--n4 { background: var(--nlh-4); }

/* Souhrn naléhavosti nad akcí */
.op-nlh-souhrn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 12px; background: #F6F7F4; border: 1px solid #E1E4DD; border-radius: 10px; }
.op-nlh-souhrn__label { font: 700 12.5px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-nlh-souhrn__item { display: inline-flex; align-items: center; gap: 6px; }
.op-nlh-souhrn__pocet { font: 800 14px/1 var(--bs-font-sans-serif); color: var(--op-ink); font-variant-numeric: tabular-nums; }

/* Segmentový výběr naléhavosti — barevný levý proužek na tlačítku, po výběru plná barva */
.op-nlh-seg { border-left-width: 4px; border-left-style: solid; }
.op-nlh-seg--n1 { border-left-color: var(--nlh-1); }
.op-nlh-seg--n2 { border-left-color: var(--nlh-2); }
.op-nlh-seg--n3 { border-left-color: var(--nlh-3); }
.op-nlh-seg--n4 { border-left-color: var(--nlh-4); }
.op-nlh-seg--n1.op-seg--on { background: var(--nlh-1); border-color: var(--nlh-1); color: #fff; }
.op-nlh-seg--n2.op-seg--on { background: var(--nlh-2); border-color: var(--nlh-2); color: #fff; }
.op-nlh-seg--n3.op-seg--on { background: var(--nlh-3); border-color: var(--nlh-3); color: #1A1A1A; }
.op-nlh-seg--n4.op-seg--on { background: var(--nlh-4); border-color: var(--nlh-4); color: #fff; }

/* ---- Spodní akční lišta + velká tlačítka (FAB) ---- */
/* layout vlastnosti (NE display — to řídí .op-only-phone + media query, ať nekoliduje specificita) */
.op-actionbar--prehled { gap: 10px; }
.op-fab-form { flex: 1.7 1 0; min-width: 0; display: flex; }
.op-fab-form .op-fab--primary { flex: 1 1 auto; width: 100%; }
.op-fab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; border-radius: var(--op-radius-lg); cursor: pointer; text-decoration: none; text-align: center; }
.op-fab--primary { flex: 1.7 1 0; min-width: 0; min-height: 62px; background: var(--op-success); color: #fff; font: 800 18px/1.1 var(--bs-font-sans-serif); box-shadow: 0 6px 16px rgba(31,122,61,0.28); }
.op-fab--primary:hover { color: #fff; background: var(--op-success-hover); }
.op-fab--secondary { flex: 1 1 0; min-width: 0; min-height: 62px; background: var(--op-surface); color: var(--op-ink); border: 2px solid var(--op-ink); font: 700 14px/1.15 var(--bs-font-sans-serif); padding: 0 6px; }
.op-fab--secondary:hover { color: var(--op-ink); background: #F0F1EE; }
.op-fab--dark { flex: 1.4 1 0; min-height: 56px; background: var(--op-ink); color: #fff; font: 700 16px/1 var(--bs-font-sans-serif); }
.op-fab__sub { font: 600 11px/1 var(--bs-font-sans-serif); color: #CDE6D5; }
.op-fab:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   Rychlý záznam
   ============================================================ */
.op-zaznam { display: flex; flex-direction: column; min-height: calc(100vh - 88px); margin: -24px -12px 0; }

/* tmavá hlavička obrazovky (uvnitř formuláře) */
.op-zhead { display: flex; align-items: center; gap: 10px; background: var(--op-ink); color: #fff; padding: 14px 16px; }
.op-zhead__back { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #2A2D30; color: #fff; font: 700 17px/1 var(--bs-font-sans-serif); text-decoration: none; }
.op-zhead__back:hover { color: #fff; background: #34383B; }
.op-zhead__title { min-width: 0; flex: 1 1 auto; }
.op-zhead__name { font: 800 16px/1.15 var(--bs-font-sans-serif); white-space: nowrap; }
.op-zhead__sub { font: 600 12px/1.2 var(--bs-font-sans-serif); color: #A9AEB2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-saved { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--bs-font-sans-serif); color: #7FB089; flex: 0 0 auto; }
.op-saved__check { font: 800 12px/1 var(--bs-font-sans-serif); }

.op-zbody { flex: 1 1 auto; padding: 16px; background: var(--op-bg); }
.op-field { margin-bottom: 18px; }
.op-flabel { display: flex; align-items: baseline; gap: 6px; font: 600 14px/1 var(--bs-font-sans-serif); margin: 0 0 7px; }
.op-flabel-req { font: 500 12px/1 var(--bs-font-sans-serif); color: var(--op-danger); }
.op-row-inline { display: flex; gap: 8px; align-items: center; }
.op-time-input { flex: 1 1 auto; min-width: 0; font: 700 19px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; }
/* Hodnota polí Datum a Čas je vycentrovaná v rámečku vodorovně i svisle. Safari (macOS
   i iOS) vnitřní obsah date/time inputu při poli vyšším než řádek (min-height 52px
   z .form-control) lepí k hornímu okraji — centruje ho flex přímo na inputu a pseudo-
   elementy vnitřního obsahu (::-webkit-date-and-time-value na iOS, ::-webkit-datetime-edit
   na macOS/Chromium). */
input[type="date"], input[type="time"] {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: center; margin-block: auto; }
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { display: inline-flex; align-items: center; height: 100%; padding: 0; }
.op-vek-presne { width: 86px; min-height: 44px; text-align: center; font: 700 16px/1 var(--bs-font-sans-serif); flex: 0 0 auto; }

/* tlačítko „teď" je už .op-time-now; tady jen zajistíme výšku */
.op-time-now { flex: 0 0 auto; cursor: pointer; }

/* přepínač Neuvedl (tlačítko = forma) */
.op-toggle-btn { flex: 0 0 auto; min-height: 52px; padding: 0 16px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius); font: 700 15px/1 var(--bs-font-sans-serif); }
.op-toggle-btn--on { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }

/* segmenty (věk, pohlaví) */
/* Segmenty se na úzkém displeji ZALAMUJÍ na další řádek (basis auto), nikdy nepřetékají
   mimo obrazovku — s basis 0 se čipy jen smrskávaly a dlouhé popisky (repatriace) vytékaly. */
.op-segs { display: flex; flex-wrap: wrap; gap: 7px; }
/* Na telefonu dostane pole se segmenty celou šířku řádku — vmáčknuté vedle jiného pole
   (Datum | Činnost) se čipy skládaly do úzkého sloupce po jednom. */
@media (max-width: 767px) {
  .op-fld:has(> .op-segs) { flex-basis: 100%; }
}
/* Na desktopu naopak pole se segmenty roste víc než sousedi (Datum), aby se všechny
   čipy vešly na jeden řádek a poslední nezbýval osaměle natažený na druhém. */
@media (min-width: 768px) {
  .op-fld:has(> .op-segs) { flex-grow: 3; }
}
.op-seg { flex: 1 1 auto; min-width: 0; min-height: 50px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius); font: 700 14px/1.1 var(--bs-font-sans-serif); padding: 0 10px; }
.op-seg--on { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }
.op-seg:disabled { opacity: 0.65; cursor: default; }

/* textarea */
.op-textarea { min-height: 72px; padding: 13px 14px; resize: none; font-family: inherit; }

/* řádek čipů (sestavuje JS) */
.op-chipwrap { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.op-chip-hint + .op-chipwrap { margin-top: 7px; }
.op-chip-hint { margin-top: 9px; }

/* inline chyba pole */
.op-field-err { display: flex; align-items: center; gap: 6px; margin-top: 7px; font: 600 13px/1.3 var(--bs-font-sans-serif); color: var(--op-danger); }
.op-field-err__icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--op-danger); color: #fff; font: 800 11px/1 var(--bs-font-sans-serif); flex: 0 0 auto; }

/* povýšit (tichý) */
.op-povysit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 2px 0 14px; background: transparent; border: 1.5px dashed var(--op-border-strong); border-radius: var(--op-radius); color: var(--op-disabled); font: 600 14px/1 var(--bs-font-sans-serif); text-decoration: none; cursor: not-allowed; }
.op-povysit--active { color: var(--op-ink-muted); cursor: pointer; }
.op-povysit--active:hover { color: var(--op-ink); border-color: var(--op-ink-faint); background: var(--op-surface-2); }

/* smazání omylem založeného záznamu (tichý danger — stejná geometrie jako povýšit) */
.op-smazat { color: var(--op-danger); cursor: pointer; border-color: var(--op-danger); border-style: dashed; opacity: .75; }
.op-smazat:hover { opacity: 1; background: color-mix(in srgb, var(--op-danger) 8%, transparent); }

/* křížek smazání řádku v admin tabulkách (vozidla, přístroje) */
.op-btn-del { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--op-danger); font: 700 16px/1 var(--bs-font-sans-serif); cursor: pointer; vertical-align: middle; opacity: .6; }
.op-btn-del:hover { opacity: 1; border-color: var(--op-danger); background: color-mix(in srgb, var(--op-danger) 8%, transparent); }
/* tužka „upravit řádek" v admin tabulkách (vozidla) — ikonové tlačítko vedle křížku smazání.
   Vlastní třída (ne op-btn-edit, což je zavedené textové tlačítko „Otevřít"/„Upravit"). */
.op-btn-tuzka { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--op-ink-muted); font: 700 14px/1 var(--bs-font-sans-serif); cursor: pointer; vertical-align: middle; opacity: .6; }
.op-btn-tuzka:hover { opacity: 1; border-color: var(--op-ink); background: color-mix(in srgb, var(--op-ink) 8%, transparent); }
.op-cell-editing { padding-top: 4px; padding-bottom: 4px; }
.op-inline-edit { width: 100%; min-width: 90px; padding: 4px 8px; border: 1px solid var(--op-ink); border-radius: 6px; font: 500 13px/1.3 var(--bs-font-sans-serif); }
.op-btn-save { border: 1px solid var(--op-ink); border-radius: 6px; background: var(--op-ink); color: #fff; font: 700 12px/1 var(--bs-font-sans-serif); padding: 6px 10px; margin-left: 8px; cursor: pointer; vertical-align: middle; }
.op-btn-cancel { border: 1px solid #CFD4CC; border-radius: 6px; background: transparent; color: var(--op-ink-muted); font: 600 12px/1 var(--bs-font-sans-serif); padding: 6px 10px; margin-left: 6px; cursor: pointer; vertical-align: middle; }

/* poznámka u uzavřeného záznamu */
.op-closed-note { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--op-radius); background: var(--op-surface-2); border: 1px solid #E0E3DC; font: 500 13px/1.5 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-closed-note strong { color: var(--op-ink); }

/* spodní lišta záznamu */
.op-actionbar--zaznam { display: flex; flex-direction: column; }
.op-actionbar__row { display: flex; gap: 10px; }
.op-actionbar--zaznam .op-fab--primary { min-height: 58px; font-size: 16px; }
.op-actionbar--zaznam .op-fab--secondary { min-height: 58px; }
.op-zaznam__banner { margin-bottom: 9px; }

/* ============================================================
   Rozcestník akcí (Index)
   ============================================================ */
.op-chooser__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.op-akce-card { display: flex; flex-direction: column; gap: 8px; background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); padding: 16px 18px; text-decoration: none; color: var(--op-ink); }
.op-akce-card:hover { color: var(--op-ink); border-color: var(--op-ink-faint); }
.op-akce-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-akce-card__name { font: 800 17px/1.2 var(--bs-font-sans-serif); }
.op-akce-card__meta { font: 500 13px/1.3 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-akce-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }

/* ---- Telefonní úpravy B2 ---- */
@media (max-width: 767.98px) {
  .op-filterbox.op-only-phone { display: block; }
  .op-records { display: flex; }
  .op-actionbar--prehled.op-only-phone { display: flex; }
  /* spodní lišta nad obsahem nesmí zakrýt poslední kartu */
  .op-prehled { padding-bottom: 8px; }
  /* Specifičtější pravidla pro přepsání display: flex daný komponentovými třídami,
     která by jinak přebila obecné .op-only-desktop { display: none } (nižší specificita). */
  .op-prehled__actions.op-only-desktop { display: none; }
  .op-filterchips.op-only-desktop { display: none; }
}

/* ============================================================
   Výjezdový záznam (jedna dlouhá stránka se sekcemi)
   Zdroj pravdy: docs/design/prototypy/Výjezdový záznam.dc.html
   ============================================================ */
.op-vyjezd { display: flex; flex-direction: column; min-height: calc(100vh - 88px); margin: -24px -12px 0; }

/* tipy: hlavička .op-zhead a .op-saved jsou sdílené z rychlého záznamu */

/* ---- Navigace sekcí: telefon = sticky horizontální čipy ---- */
/* op-vsecnav je první dítě op-vbody; na telefonu vyskočí z jeho paddingu (14px), aby byl edge-to-edge */
.op-vsecnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px; background: var(--op-bg); border-bottom: 1px solid var(--op-border); -webkit-overflow-scrolling: touch; margin: -14px -14px 14px; width: calc(100% + 28px); }
.op-vsecnav__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius-pill); font: 700 13px/1 var(--bs-font-sans-serif); white-space: nowrap; text-decoration: none; }
.op-vsecnav__chip:hover { color: #3A4047; }
.op-vsecnav__chip--active { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }
.op-vsecnav__chip--active:hover { color: #fff; }
.op-vsecnav__ok { color: var(--op-success); font: 800 13px/1 var(--bs-font-sans-serif); }
.op-vsecnav__chip--active .op-vsecnav__ok { color: #7FB089; }
.op-vsecnav__warn { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--op-warning); color: #fff; font: 800 10px/1 var(--bs-font-sans-serif); }

/* ---- Tělo + karty sekcí ---- */
.op-vbody { flex: 1 1 auto; padding: 14px; background: var(--op-bg); scroll-behavior: smooth; }
.op-card { background: var(--op-surface); border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); padding: 15px 15px 6px; margin-bottom: 14px; scroll-margin-top: 64px; }
.op-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.op-card__title { font: 800 16px/1 var(--bs-font-sans-serif); margin: 0; }

/* ---- Rozvržení polí (frow / fld) ---- */
.op-frow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.op-fld { flex: 1 1 160px; min-width: 0; }
.op-fld--full { flex: 1 1 100%; }
.op-fld--half { flex: 1 1 280px; }
.op-fld--md { flex: 1 1 180px; }
.op-fld--sm { flex: 1 1 130px; }
.op-fld--xs { flex: 0 1 88px; }
.op-center { text-align: center; }
.op-input-sm { min-height: 44px; }
.op-vyjezd .op-flabel { font: 600 13px/1 var(--bs-font-sans-serif); }
.op-field--hl { box-shadow: 0 0 0 3px rgba(200,38,28,0.18); border-color: var(--op-danger) !important; }

/* ---- GCS barevné škály ---- */
.op-gcs { margin-bottom: 10px; }
.op-gcs__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.op-gcs__sum { font: 800 15px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-gcs__sum--bad { color: var(--op-danger); }
.op-gcs__sum--ok { color: var(--op-success); }
.op-gcs__row { margin-bottom: 9px; }
.op-gcs__rowlabel { font: 600 11.5px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); margin-bottom: 5px; }
.op-gcs__cells { display: flex; gap: 4px; }
.op-gcs__cell { flex: 1 1 0; min-width: 0; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; opacity: 0.86; }
.op-gcs__cell--on { border: 3px solid var(--op-ink); box-shadow: inset 0 0 0 2px #fff; opacity: 1; }
.op-gcs__cell--off { opacity: 0.45; }
.op-gcs__num { font: 800 16px/1 var(--bs-font-sans-serif); }
.op-gcs__txt { font: 600 9px/1.1 var(--bs-font-sans-serif); text-align: center; }
.op-gcs__row--compact .op-gcs__cell { padding: 7px 2px; }
/* bodová nápověda u zadávání GCS v měření (rozbalovací „?") */
.op-gcs__helpbtn { margin-left: 6px; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid var(--op-ink-muted); background: transparent; color: var(--op-ink-muted); font: 800 11px/1 var(--bs-font-sans-serif); cursor: pointer; vertical-align: middle; }
.op-gcs__helpbtn[aria-expanded="true"] { background: var(--op-ink-muted); color: #fff; }
.op-gcs__help { margin: 0 0 9px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,0.045); }
.op-gcs__help[hidden] { display: none; }
.op-gcs__helprow { display: flex; gap: 8px; font: 500 11px/1.5 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-gcs__helplabel { flex: 0 0 92px; font-weight: 700; }
.op-gcs__helptext { flex: 1 1 auto; min-width: 0; }
/* barevné rampy podle počtu segmentů a indexu (zelená → červená) */
.op-gcs__cell--n4.op-gcs__cell--i0 { background: var(--naca-0); }
.op-gcs__cell--n4.op-gcs__cell--i1 { background: var(--naca-2); color: #1A1A1A; }
.op-gcs__cell--n4.op-gcs__cell--i2 { background: var(--naca-3); }
.op-gcs__cell--n4.op-gcs__cell--i3 { background: var(--naca-5); }
.op-gcs__cell--n5.op-gcs__cell--i0 { background: var(--naca-0); }
.op-gcs__cell--n5.op-gcs__cell--i1 { background: var(--naca-1); }
.op-gcs__cell--n5.op-gcs__cell--i2 { background: var(--naca-2); color: #1A1A1A; }
.op-gcs__cell--n5.op-gcs__cell--i3 { background: var(--naca-3); }
.op-gcs__cell--n5.op-gcs__cell--i4 { background: var(--naca-5); }
.op-gcs__cell--n6.op-gcs__cell--i0 { background: var(--naca-0); }
.op-gcs__cell--n6.op-gcs__cell--i1 { background: var(--naca-1); }
.op-gcs__cell--n6.op-gcs__cell--i2 { background: #C9A227; color: #1A1A1A; }
.op-gcs__cell--n6.op-gcs__cell--i3 { background: var(--naca-3); }
.op-gcs__cell--n6.op-gcs__cell--i4 { background: var(--naca-4); }
.op-gcs__cell--n6.op-gcs__cell--i5 { background: var(--naca-5); }

/* ---- Čipy (Zornice/Dýchání/Kůže) v nálezu ---- */
.op-chiprow--static, .op-chiprow--multi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.op-chip--on { border: 2px solid var(--op-success); background: var(--op-success-bg); color: #1A5C30; }

/* ---- Tabulka měření ---- */
.op-mtable-wrap { overflow-x: auto; border: 1px solid var(--op-ink); border-radius: 10px; margin-bottom: 12px; }
.op-mtable { width: 100%; border-collapse: collapse; min-width: 540px; }
.op-mtable thead tr { background: var(--op-ink); color: #fff; }
.op-mtable th { padding: 8px 7px; font: 700 12px/1 var(--bs-font-sans-serif); text-align: center; }
.op-mtable th.op-mtable__cas { text-align: left; }
.op-mtable td { padding: 10px 7px; border-bottom: 1px solid #E6E8E3; text-align: center; font: 600 13.5px/1 var(--bs-font-sans-serif); }
.op-mtable td.op-mtable__cas { text-align: left; font-weight: 700; }
.op-mtable tbody tr:nth-child(even) { background: #F8F9F6; }
.op-mtable__empty { color: var(--op-ink-muted); font-weight: 500; text-align: center; }
/* hodnoty mimo normu: tučně + podtržené + barva (nikdy jen barvou) */
.op-mr--out-a { font-weight: 800 !important; text-decoration: underline; color: #8A5A1A; }
.op-mr--out-r { font-weight: 800 !important; text-decoration: underline; color: var(--op-danger); }

.op-mbtn-add { width: 100%; min-height: 50px; margin-bottom: 12px; background: var(--op-success); color: #fff; border: none; border-radius: var(--op-radius); font: 700 15px/1 var(--bs-font-sans-serif); cursor: pointer; }
.op-mbtn-add:hover { background: var(--op-success-hover); }
.op-mbtn-dash { flex: 1 1 0; min-height: 46px; background: var(--op-surface); border: 1.5px dashed var(--op-border-strong); border-radius: var(--op-radius); color: #454B51; font: 600 13.5px/1 var(--bs-font-sans-serif); cursor: pointer; }

/* ---- Terapie ---- */
.op-ter-empty { color: var(--op-ink-muted); font: 500 13px/1.4 var(--bs-font-sans-serif); margin-bottom: 10px; }
.op-ter-list { margin-bottom: 4px; }
.op-ter-row { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #E0E3DC; border-radius: 11px; background: #F8F9F6; margin-bottom: 8px; align-items: baseline; }
.op-ter-row__cas { font: 700 13px/1 var(--bs-font-sans-serif); flex: 0 0 auto; }
.op-ter-row__body { flex: 1 1 auto; min-width: 0; }
.op-ter-row__popis { font: 600 14px/1.3 var(--bs-font-sans-serif); }
.op-ter-row__sub { font: 500 12.5px/1.3 var(--bs-font-sans-serif); color: var(--op-ink-muted); margin-top: 2px; }
.op-ter-row__tag { font: 700 11px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em; }
.op-ter-row__who { font: 500 12px/1 var(--bs-font-sans-serif); color: var(--op-ink-faint); flex: 0 0 auto; }
/* Odkaz „ⓘ leták" u léku v terapii */
.op-letak-link { display: inline-block; margin-left: 8px; font: 600 12px/1 var(--bs-font-sans-serif); color: var(--op-link, #0b5ed7); text-decoration: none; white-space: nowrap; vertical-align: baseline; }
.op-letak-link:hover { text-decoration: underline; }
/* Správa letáku v číselníku léků */
.op-letak-toggle { background: none; border: none; padding: 2px 4px; cursor: pointer; font: inherit; }
.op-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 600 11.5px/1.5 var(--bs-font-sans-serif); background: #e7f3ec; color: #1b6b3a; }
.op-badge--ok { background: #e7f3ec; color: #1b6b3a; }
.op-letak-panel { padding: 10px 6px; background: rgba(0,0,0,0.02); border-radius: var(--op-radius); }
.op-letak-panel__actions { display: flex; align-items: center; gap: 12px; }
.op-letak-msg { font-size: 12.5px; }
.op-ter-btns { display: flex; gap: 8px; margin: 10px 0 12px; }
.op-ter-add { border: 1px solid #E0E3DC; border-radius: 11px; background: var(--op-surface-2); padding: 12px; margin: 8px 0 12px; }
.op-ter-add__actions { display: flex; gap: 8px; }

/* ---- NACA pás ---- */
.op-naca { display: flex; gap: 4px; }
.op-naca__seg { flex: 1 1 0; min-width: 0; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); border-radius: 9px; padding: 11px 2px; font: 800 18px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; color: #fff; opacity: 0.85; }
.op-naca__seg--on { border: 3px solid var(--op-ink); box-shadow: inset 0 0 0 2px #fff; opacity: 1; }
.op-naca__seg--0 { background: var(--naca-0); }
.op-naca__seg--1 { background: var(--naca-1); }
.op-naca__seg--2 { background: var(--naca-2); color: #1A1A1A; }
.op-naca__seg--3 { background: var(--naca-3); }
.op-naca__seg--4 { background: var(--naca-4); }
.op-naca__seg--5 { background: var(--naca-5); }
.op-naca__seg--6 { background: var(--naca-6); }
.op-naca__seg--7 { background: var(--naca-7); }
.op-naca__legend { margin-top: 7px; font: 600 12.5px/1.3 var(--bs-font-sans-serif); color: var(--op-ink-muted); }

/* ---- Výsledek: radia + checklist ---- */
.op-radios { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.op-radio { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 13px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); border-radius: var(--op-radius); font: 600 14.5px/1.2 var(--bs-font-sans-serif); color: var(--op-ink); text-align: left; }
.op-radio--on { border: 2px solid var(--op-ink); background: var(--op-surface-2); font-weight: 800; }
.op-radio__dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--op-border-strong); background: #fff; }
.op-radio--on .op-radio__dot { border: 7px solid var(--op-success); }
.op-radio:disabled { cursor: default; }
.op-vysledek-det { border-top: 1px dashed var(--op-border); padding-top: 12px; }
.op-checks { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.op-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius); font: 600 13px/1 var(--bs-font-sans-serif); margin: 0; }
.op-check--on { border: 2px solid var(--op-success); background: var(--op-success-bg); color: #1A5C30; }
.op-check__box { position: absolute; opacity: 0; width: 0; height: 0; }
.op-check__mark { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; border: 2px solid var(--op-border-strong); display: grid; place-items: center; color: #fff; font: 800 12px/1 var(--bs-font-sans-serif); }
.op-check--on .op-check__mark { background: var(--op-success); border: none; }

/* ---- Stavová lišta dole ---- */
.op-vstatus { display: flex; align-items: center; gap: 10px; background: #fff; border-top: 1px solid var(--op-border); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
.op-vstatus__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.op-vstatus .op-saved { color: var(--op-ink-muted); }
.op-vstatus__missing { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; min-width: 0; padding: 5px 9px; border-radius: var(--op-radius-pill); background: var(--op-warning-bg); border: 1px solid var(--op-warning-border); color: #7A4A0F; font: 700 11.5px/1.3 var(--bs-font-sans-serif); }
.op-vstatus__missing--btn { cursor: pointer; }
.op-vstatus .op-fab--primary, .op-vstatus .op-fab--secondary { min-height: 56px; flex: 0 0 auto; padding: 0 18px; }
.op-vstatus .op-fab--primary { font-size: 16px; }
/* Na telefonu se lišta LÁME do dvou řad: stav (uloženo + povinná pole) na celou šířku nahoře,
   tlačítka pod ním — jinak se bublina povinných polí mačkala přes tlačítka k nepřečtení. */
@media (max-width: 767px) {
  .op-vstatus { flex-wrap: wrap; row-gap: 10px; }
  .op-vstatus__info { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .op-vstatus__info:empty { display: none; }
  .op-vstatus .op-fab--primary, .op-vstatus .op-fab--secondary { flex: 1 1 auto; padding: 0 12px; }
}

/* ---- Fullscreen dialog: Nové měření ---- */
.op-noscroll { overflow: hidden; }
.op-mdialog { position: fixed; inset: 0; z-index: 1050; background: var(--op-bg); display: flex; flex-direction: column; }
.op-mdialog__head { background: var(--op-ink); color: #fff; padding: 16px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.op-mdialog__title { font: 800 17px/1 var(--bs-font-sans-serif); }
.op-mdialog__cislo { font: 600 12px/1 var(--bs-font-sans-serif); color: #A9AEB2; }
.op-mdialog__body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
.op-mdialog__cas { background: #fff; border: 1px solid #D7DBD3; border-radius: var(--op-radius); padding: 10px 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.op-mdialog__cas .form-control { flex: 1 1 auto; min-width: 0; min-height: 44px; font: 700 17px/1 var(--bs-font-sans-serif); }
.op-mdialog__cas .op-time-now { min-height: 44px; }
.op-mdialog__gcs { background: #fff; border: 1px solid #D7DBD3; border-radius: var(--op-radius); padding: 10px 12px 4px; margin-bottom: 10px; }
/* Přístroje po skupinách hodnot (vitálky / glykemie / teplota) — karta jako u GCS a času. */
.op-mdialog__pristroj { background: #fff; border: 1px solid #D7DBD3; border-radius: var(--op-radius); padding: 10px 12px; margin-bottom: 10px; }
.op-mdialog__pristroj-radek + .op-mdialog__pristroj-radek { margin-top: 8px; }
.op-mdialog__pristroj-radek .op-flabel { display: block; margin-bottom: 4px; }
.op-mdialog__pristroj-radek .form-control { min-height: 44px; }
.op-mdialog__foot { display: flex; gap: 10px; background: #fff; border-top: 1px solid var(--op-border); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
.op-mdialog__foot .op-fab { flex: 1 1 0; min-height: 56px; }
.op-mdialog__foot .op-fab--primary { flex: 1.6 1 0; }

.op-pickrow { display: flex; gap: 6px; margin-bottom: 12px; }
.op-picker { flex: 1 1 0; min-width: 0; }
.op-picker__title { font: 700 11.5px/1 var(--bs-font-sans-serif); text-align: center; margin-bottom: 5px; }
.op-picker__list { position: relative; height: 150px; overflow-y: auto; border: 1px solid #D7DBD3; border-radius: 9px; background: #fff; padding: 3px; touch-action: pan-y; user-select: none; cursor: grab; }
.op-picker__opt { display: block; width: 100%; text-align: center; border: none; cursor: pointer; background: transparent; color: #454B51; font: 500 14px/1 var(--bs-font-sans-serif); font-variant-numeric: tabular-nums; padding: 9px 0; border-radius: 7px; }
/* Vybraný řádek se zvýrazní PŘÍMO v rolovátku: pilulka v barvě dle normy,
   čitelný text (bílá na sytém podkladu, tmavá na jantarové), tučnější.
   Selektor `.op-picker__list` zvyšuje specificitu, aby přebil starší
   pravidlo `.op-picker button` (jinak by podklad zůstal průhledný). */
.op-picker__list .op-picker__opt--sel { font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.18); }
.op-picker__list .op-picker__opt--g { background: var(--naca-0); color: #fff; }
.op-picker__list .op-picker__opt--a { background: var(--naca-2); color: #1A1A1A; }
.op-picker__list .op-picker__opt--r { background: var(--op-danger); color: #fff; }

/* ---- Dialog měření: AVPU + O₂ podán ---- */
.op-mdialog__avpu-row { display: flex; gap: 8px; margin-bottom: 10px; }
.op-mdialog__avpu, .op-mdialog__o2 { background: #fff; border: 1px solid #D7DBD3; border-radius: var(--op-radius); padding: 10px 12px; }
.op-mdialog__avpu { flex: 1.4 1 0; }
.op-mdialog__o2 { flex: 1 1 0; }
.op-mdialog__avpu .op-flabel, .op-mdialog__o2 .op-flabel { display: block; margin-bottom: 6px; }
.op-avpu-col { display: flex; gap: 6px; }
.op-avpu-opt { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius); }
.op-avpu-opt__k { font: 800 16px/1 var(--bs-font-sans-serif); }
.op-avpu-opt__t { font: 500 10px/1 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-avpu-opt--on { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }
.op-avpu-opt--on .op-avpu-opt__t { color: #C9CEC8; }
.op-o2-toggle { display: flex; gap: 6px; }
.op-o2-opt { flex: 1 1 0; min-height: 48px; cursor: pointer; border: 1.5px solid var(--op-border); background: var(--op-surface); color: #3A4047; border-radius: var(--op-radius); font: 700 14px/1 var(--bs-font-sans-serif); }
.op-o2-opt--on { border: 2px solid var(--op-ink); background: var(--op-ink); color: #fff; }

/* ---- Urgentní varování (jantarový zvýrazněný textarea) ---- */
.op-varovani { border-left: 4px solid var(--op-warning); background: var(--op-warning-bg); }
.op-varovani:focus { background: #fff; }
.op-flabel-hint { font-weight: 500; color: var(--op-ink-muted); }

/* ---- Posádka: chips strukturovaných členů + řádek pro přidání ---- */
.op-posadka-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.op-posadka-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border: 1.5px solid var(--op-border); border-radius: var(--op-radius-pill); background: var(--op-surface); font: 600 13px/1.1 var(--bs-font-sans-serif); }
.op-posadka-chip__role { font-weight: 800; color: var(--op-ink); }
.op-posadka-chip__jmeno { color: #3A4047; }
.op-posadka-chip__del { width: 24px; height: 24px; line-height: 1; border: none; border-radius: 50%; background: #E6E8E3; color: #555B61; font-size: 16px; cursor: pointer; padding: 0; }
.op-posadka-chip__del:hover { background: var(--op-danger); color: #fff; }
.op-posadka-text { color: #3A4047; padding: 4px 0; }
.op-posadka-add { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; }
.op-posadka-add__zdr { flex: 2 1 180px; min-width: 0; }
.op-posadka-add__jmeno { flex: 2 1 180px; min-width: 0; }
.op-posadka-add__role { flex: 1 1 110px; min-width: 0; }
.op-posadka-add__btn { flex: 0 0 auto; min-height: var(--op-touch); padding: 0 16px; background: var(--op-success); color: #fff; border: none; border-radius: var(--op-radius); font: 700 14px/1 var(--bs-font-sans-serif); cursor: pointer; }
.op-posadka-add__btn:hover { background: var(--op-success-hover); }

/* ---- Desktop: boční kotvy + dvousloupcové sekce ---- */
@media (min-width: 1024px) {
  .op-vyjezd { margin: -24px -12px 0; }
  /* Boční kotvy (op-vsecnav) drží grid-row: 1 / span 99, aby zůstaly sticky přes
     celou výšku obsahu. row-gap by se ale aplikoval i mezi ~90 prázdných (0px)
     řádků, které span 99 vytvoří → obří prázdné místo pod poslední kartou.
     Proto vertikální mezeru neřešíme grid-gapem (row-gap: 0), ale margin-bottom
     u .op-card (14px). Sloupcovou mezeru nav↔karty necháme přes column-gap. */
  .op-vbody { display: grid; grid-template-columns: 200px 1fr; column-gap: 18px; row-gap: 0; align-items: start; padding: 18px 24px; }
  .op-vsecnav { position: sticky; top: 18px; grid-column: 1; grid-row: 1 / span 99; flex-direction: column; overflow: visible; border-bottom: none; background: #EDEFEA; border: 1px solid var(--op-border); border-radius: var(--op-radius); padding: 8px; align-self: start; margin: 0; width: auto; }
  .op-vsecnav__chip { width: 100%; justify-content: flex-start; border: none; background: transparent; min-height: 38px; }
  .op-vsecnav__chip--active { background: #fff; color: var(--op-ink); border: none; }
  /* Mobilní pravidlo --active:hover nastavuje bílý text — na desktopové bílé pilulce by byl neviditelný. */
  .op-vsecnav__chip--active:hover { color: var(--op-ink); }
  .op-vsecnav__chip--active .op-vsecnav__ok { color: var(--op-success); }
  .op-card { grid-column: 2; }
}
@media (min-width: 1280px) {
  /* dialog jako vystředěné okno, ne celá plocha */
  .op-mdialog { inset: 4vh 50% auto 50%; transform: translateX(-50%); width: 760px; max-height: 92vh; border-radius: var(--op-radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
}

/* ============================================================
   Offline balíček — dropzone (Import balíčku akce)
   ============================================================ */
.op-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  padding: 32px 20px;
  border: 2px dashed var(--op-border-strong);
  border-radius: var(--op-radius-lg);
  background: var(--op-surface-2);
  color: var(--op-ink-muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.op-dropzone:hover,
.op-dropzone--over { border-color: var(--op-info); background: var(--op-info-bg); }
.op-dropzone__icon { color: var(--op-info); margin-bottom: 4px; }
.op-dropzone__title { font: 800 15px/1.2 var(--bs-font-sans-serif); color: var(--op-ink); }
.op-dropzone__hint { font: 600 12px/1.2 var(--bs-font-sans-serif); color: var(--op-ink-faint); }
.op-dropzone__name { font: 700 13px/1.3 var(--bs-font-sans-serif); color: var(--op-info); margin-top: 6px; word-break: break-all; }
.op-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ============================================================
   Stavy systému (E2) — chyba 404, offline indikátor, průvodce,
   připojení (QR), banner ztráty spojení.
   Zdroj pravdy: docs/design/prototypy/Stavy systému.dc.html
   ============================================================ */

/* ---- neutrální ikona stavu (404) ---- */
.op-state__icon--neutral { background: #EDEFEA; border: 1px solid #CFD4CC; color: #6B7177; font-size: 20px; }

/* ---- offline indikátor v navigaci ---- */
.op-brand { display: flex; align-items: center; }
.op-brand .op-offline-dot { margin-left: 8px; }
.op-nav-strip__note { color: var(--op-ink-muted); font-weight: 500; }
.op-nav-strip__sep { color: #555B61; }

/* ---- Průvodce „Čekám na balíček akce" ---- */
.op-pruvodce { max-width: 560px; margin: 8px auto 40px; }
.op-pruvodce__lead { margin-bottom: 22px; font-size: 14px; line-height: 1.55; }
.op-pruvodce__form { display: flex; flex-direction: column; }
.op-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.op-step__num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--op-ink); color: #fff; display: grid; place-items: center; font: 800 14px/1 var(--bs-font-sans-serif); }
.op-step__body { flex: 1 1 auto; min-width: 0; }
.op-step__title { font: 700 14.5px/1.3 var(--bs-font-sans-serif); margin-bottom: 8px; }
.op-pruvodce__heslo { min-height: 50px; font-size: 16px; }
.op-pruvodce__submit { min-height: 54px; font: 800 16px/1 var(--bs-font-sans-serif); margin-top: 4px; }
.op-pruvodce__note { margin-top: 12px; text-align: center; font: 400 12.5px/1.5 var(--bs-font-sans-serif); color: var(--op-ink-faint); }

/* ---- Připojte telefony (QR + adresa) ---- */
.op-pripojeni { max-width: 560px; margin: 8px auto 40px; text-align: center; }
.op-pripojeni__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--op-radius-pill); background: var(--op-success-bg); border: 1px solid var(--op-success-border); color: #155C2E; font: 700 12.5px/1 var(--bs-font-sans-serif); margin-bottom: 14px; }
.op-pripojeni__lead { max-width: 400px; margin: 0 auto 18px; font-size: 14px; line-height: 1.55; }
.op-pripojeni__qr { width: 230px; height: 230px; margin: 0 auto 16px; background: #fff; border: 1px solid #D7DBD3; border-radius: var(--op-radius-lg); display: grid; place-items: center; }
.op-pripojeni__qr img { width: 210px; height: 210px; display: block; }
.op-pripojeni__adresa { display: inline-block; padding: 12px 20px; border-radius: var(--op-radius); background: var(--op-ink); color: #fff; font: 700 19px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.02em; margin-bottom: 10px; text-decoration: none; }
.op-pripojeni__adresa:hover { color: #fff; background: #2A2D30; }
.op-pripojeni__note { font: 400 12.5px/1.5 var(--bs-font-sans-serif); color: var(--op-ink-faint); margin-bottom: 18px; }
.op-pripojeni__actions { display: flex; justify-content: center; }

/* ---- Banner ztráty spojení (telefon) — JANTAROVÁ, ne červená ---- */
.op-spojeni-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--op-warning-bg); border-bottom: 1px solid var(--op-warning-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.op-spojeni-banner__icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--op-warning); color: #fff; display: grid; place-items: center; font: 800 13px/1 var(--bs-font-sans-serif); }
.op-spojeni-banner__text { flex: 1 1 auto; min-width: 0; }
.op-spojeni-banner__title { font: 700 14px/1.3 var(--bs-font-sans-serif); color: #7A4A0F; }
.op-spojeni-banner__body { font: 400 12.5px/1.45 var(--bs-font-sans-serif); color: #8A5A1A; }
.op-spojeni-banner__btn { flex: 0 0 auto; min-height: 40px; padding: 0 14px; background: var(--op-warning); color: #fff; border: none; border-radius: var(--op-radius); font: 700 13px/1 var(--bs-font-sans-serif); cursor: pointer; }
.op-spojeni-banner__btn:hover { background: #9E5618; }

/* obsah pod bannerem ztlumený, ale čitelný; banner zůstává plně viditelný */
.op-dimmed { opacity: 0.45; pointer-events: none; transition: opacity .15s ease; }

/* ============================================================
   Vyladění širokých obrazovek (≥ ~1200 px)
   Prototypy mají desktopové rámce 1180–1260 px (Přehled 1180, Administrace
   1240, Výjezdový 1260). Bootstrap .container je na xxl 1320 px a navigace
   běží jako .container-fluid přes celou šířku — obsah se tak roztahuje
   a hlavička/pruh sekce se nezarovnají s obsahem. Sjednotíme obsahový
   sloupec na 1200 px a vystředíme; navigaci i pruh sekce zarovnáme na týž
   sloupec, aby logo i jméno lícovala s obsahem.
   Tokeny se nemění.
   ============================================================ */

/* ---- Jednotný obsahový sloupec (1200 px, vystředěný) ---- */
.op-main > .container { max-width: 1200px; }
/* Navigace a pruh sekce sdílejí stejný vystředěný sloupec jako obsah
   (stejné guttery jako .container → logo lícuje s levým okrajem obsahu). */
.op-nav .container-fluid,
.op-nav-strip .container-fluid { max-width: 1200px; margin-inline: auto; }

/* ---- Výjezdový záznam: lišty full-bleed, obsah na vystředěném sloupci ----
   Tmavá hlavička (.op-zhead) a spodní akční lišta (.op-vstatus) jsou „lišty" —
   jejich POZADÍ má jet od kraje ke kraji jako horní pruhy. Předtím je svazoval
   .container (max-width 1200) → byly oseknuté na 1200 px. Uvolníme .container jen
   u výjezdového záznamu (:has) na plnou šířku; obsah (boční kotvy, karty, text
   v lištách) pak vystředíme paddingem na týž 1200 px sloupec. Padding počítáme
   přes 100 % (= šířka bez scrollbaru), ne přes vw → žádný vodorovný scrollbar.
   Jen na desktopu (≥1024 px), kde výjezdový běží jako dvousloupcový layout; na
   telefonu si celoobrazovkový záznam řeší šířku sám (mobilní -14px margin).
   Pozn.: Rychlý záznam (.op-zaznam) zde NEpatří — ten zůstává úzkým 720px
   vystředěným sloupcem (viz pravidlo níže), full-bleed by u něj byl nežádoucí. */
@media (min-width: 1024px) {
  .op-main > .container:has(> .op-vyjezd) { max-width: none; padding: 0; }
  .op-vyjezd { margin: 0; }
  .op-zhead, .op-vstatus, .op-vbody {
    padding-inline: max(24px, calc((100% - 1200px) / 2));
  }
}

/* ---- Číselné sloupce: tabular-nums skutečně aplikované ----
   Komponentní pravidla používají zkratku `font:`, která resetuje
   font-variant-numeric, takže přebíjí utilitu .op-num. Vracíme tabulkové
   číslice tam, kde na zarovnání číslic záleží (číslo záznamu, časy,
   tabulka měření, autosave indikátor). */
.op-records-table .op-cell-cislo,
.op-records-table .op-cell-muted.op-num,
.op-records-table td.op-num,
.op-mtable, .op-mtable th, .op-mtable td,
.op-saved, .op-saved span,
.op-akce-card__meta.op-num {
  font-variant-numeric: tabular-nums;
}

/* ---- Administrace: rozumná hustota tabulek a karet na široko ----
   Prototyp drží administrační obsah kompaktní (rámec 1240 px, sloupec ~960).
   Bez krytí se řídké tabulky (1 sloupec dat) roztahnou na 1068 px a sloupce
   se trhají. Zarovnáme obsah administrace na max ~960 px. */
.op-admin__content { max-width: 960px; }
/* Číselník kvalifikací je úzká tabulka (název + zkratka + přepínač) —
   prototyp ji drží na 640 px, ať se „Aktivní" neutrhne k pravému okraji. */
.op-kv-table { max-width: 640px; }

/* ---- Výjezdový záznam: spodní lišta — tmavé tlačítko „Tisk PDF" ----
   .op-vstatus resetoval flex jen u --primary a --secondary, ne u --dark,
   takže „Tisk PDF" (op-fab--dark) se na ŠIROKO roztáhlo přes celou lištu.
   Pevnou (obsahovou) šířku mu dáme jen na desktopu — na telefonu má „Tisk PDF"
   zůstat velký primární cíl (palcová zóna), proto jen ≥768 px. */
@media (min-width: 768px) {
  .op-vstatus .op-fab--dark { flex: 0 0 auto; min-height: 56px; padding: 0 18px; }
}

/* ---- Terénní obrazovky na desktopu: vystředěný, soustředěný sloupec ----
   Rychlý záznam je v prototypu jen pro telefon (žádný desktop). Roztažený
   na 1200 px působí přepáleně (obří segmenty, dlouhé řádky). Vystředíme ho
   do soustředěného sloupce. Výjezdový desktop layout zůstává (boční kotvy
   + 1fr), jen kartám omezíme šířku, aby jednotlivá pole neměla extrémně
   dlouhé řádky. */
@media (min-width: 768px) {
  .op-zaznam { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .op-vyjezd .op-card { max-width: 820px; }
}

/* =====================================================================
   Číselníky — správa (MKN-10, léky) a našeptávač kódovaných polí
   ===================================================================== */
.op-h3 { font: 800 16px/1.2 var(--bs-font-sans-serif); }
.op-ciselnik-stav { display: flex; align-items: center; gap: 10px; }
.op-ciselnik-stav .op-kv-badge { font-size: 14px; padding: 5px 12px; }

/* Našeptávač (autocomplete) — vanilla JS, DB-backed, funguje offline.
   Vstup se obalí .op-ac; .op-ac__list je rozbalený seznam pod polem. */
.op-ac { position: relative; }
.op-ac__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--op-surface); border: 1.5px solid var(--op-border-strong);
  border-radius: var(--op-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 320px; overflow-y: auto;
}
.op-ac__list[hidden] { display: none; }
.op-ac__item {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; color: var(--op-ink); font: 500 15px/1.25 var(--bs-font-sans-serif);
}
.op-ac__item:hover, .op-ac__item.op-ac__item--active { background: var(--op-surface-2); }
.op-ac__item--active { box-shadow: inset 0 0 0 1.5px var(--op-border-strong); }
.op-ac__kod { font-weight: 800; color: var(--op-info); white-space: nowrap; }
.op-ac__nazev { color: var(--op-ink-muted); }
/* Okres · kraj v nabídce adresy — jemné, odsazené doprava, rozliší stejnojmenné obce. */
.op-ac__meta { margin-left: auto; color: var(--op-ink-faint); font-size: 13px; white-space: nowrap; }
.op-ac__prazdno { padding: 10px 12px; color: var(--op-ink-faint); font-size: 14px; }

/* Trvalý náhled vybrané MKN-10 položky pod polem (✓ KÓD · Název). */
.op-mkn-preview { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 12px/1.4 var(--bs-font-sans-serif); color: var(--op-ink-muted); }
.op-mkn-preview__check { color: var(--op-success); font-weight: 800; }
.op-mkn-preview[hidden] { display: none; }

/* Neblokující poznámka u RČ, když nevypadá jako platné české rodné číslo. */
.op-rc-note { margin-top: 5px; font: 500 12px/1.4 var(--bs-font-sans-serif); color: var(--op-ink-faint); }
.op-rc-note[hidden] { display: none; }

/* ============ Batch 3: Společná událost, velitelská revize, přílohy ============ */

/* ---- Badge „událost ×N" (neutrální, sekundární k typu/stavu) ---- */
.op-udalost-badge {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 7px;
  background: #EDEFEA; border: 1px dashed #BFC6BC; color: #4A5056;
  font: 700 11px/1 var(--bs-font-sans-serif); white-space: nowrap;
}

/* ---- Mini-badge „✓² zkontrolováno" (jemné, sekundární ke stavu) ---- */
.op-revize-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 3px 8px; border-radius: var(--op-radius-pill);
  background: var(--op-surface-2); border: 1px solid #CFD4CC; color: #4A5056;
  font: 700 11px/1 var(--bs-font-sans-serif); white-space: nowrap;
}

/* ---- Velitelská revize na detailu záznamu ---- */
.op-revize { margin: 4px 0 12px; }
.op-revize__done {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: var(--op-radius); background: var(--op-success-bg);
  border: 1px solid var(--op-success-border); color: #155C2E;
  font: 700 13px/1.4 var(--bs-font-sans-serif);
}
.op-revize__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 18px; border-radius: var(--op-radius);
  background: transparent; border: 1.5px solid var(--op-border-strong);
  color: var(--op-ink-muted); font: 600 14px/1 var(--bs-font-sans-serif); cursor: pointer;
}
.op-revize__btn:hover { color: var(--op-ink); border-color: var(--op-ink-faint); background: var(--op-surface-2); }

/* ---- Přílohy ---- */
.op-prilohy-list { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.op-prilohy-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--op-radius);
  background: var(--op-surface-2); border: 1px solid #E0E3DC;
}
.op-prilohy-item__nazev { font: 600 14px/1.2 var(--bs-font-sans-serif); color: var(--op-info); text-decoration: none; word-break: break-all; }
.op-prilohy-item__nazev:hover { text-decoration: underline; }
.op-prilohy-item__meta { margin-left: auto; font-size: 12px; color: var(--op-ink-faint); }
.op-prilohy-item__del {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px;
  background: transparent; border: 1px solid #D9CDCD; color: #A33;
  font: 700 16px/1 var(--bs-font-sans-serif); cursor: pointer;
}
.op-prilohy-item__del:hover { background: #FBEDED; border-color: #C99; }
.op-prilohy-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.op-prilohy-file { flex: 1 1 200px; min-width: 0; }
.op-prilohy-upload { flex: 0 0 auto; }

/* ============================================================
   Nápověda a dokumentace (/Napoveda)
   ============================================================ */
.op-nav__help { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 480px) {
  .op-nav__help-text { display: none; } /* na úzkých telefonech zůstane jen ikona knihy */
}

/* Karty sekcí dokumentace na úvodní stránce Nápovědy */
.op-doc-card { display: flex; flex-direction: column; gap: 6px; width: 100%; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--op-ink); transition: border-color .12s, box-shadow .12s; }
.op-doc-card:hover { border-color: var(--op-info); box-shadow: 0 2px 8px rgba(0,0,0,0.07); color: var(--op-ink); }
.op-doc-card--accent { background: var(--op-info-bg); border-color: var(--op-info-border); }
.op-doc-card__title { font: 700 15px/1.3 var(--bs-font-sans-serif); }
.op-doc-card__desc { font: 400 13px/1.45 var(--bs-font-sans-serif); color: var(--op-ink-muted); }

/* Boční navigace na stránce dokumentu */
.op-doc-nav { position: sticky; top: 12px; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; padding: 12px 14px; }
.op-doc-nav__back { display: block; font: 600 13px/1.3 var(--bs-font-sans-serif); color: var(--op-ink-muted); text-decoration: none; margin-bottom: 10px; }
.op-doc-nav__back:hover { color: var(--op-ink); }
.op-doc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.op-doc-nav__link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font: 500 13.5px/1.35 var(--bs-font-sans-serif); color: var(--op-ink); text-decoration: none; }
.op-doc-nav__link > .op-doc-nav__text { flex: 1 1 auto; min-width: 0; }
.op-doc-nav__link:hover { background: var(--op-surface-2); color: var(--op-ink); }
.op-doc-nav__link--active { background: var(--op-surface-2); font-weight: 700; }
/* Podstránky (analýzy jednotlivých funkcí) — odsazené pod rodičem */
.op-doc-nav__list--deti { margin: 2px 0 4px; padding-left: 12px; border-left: 1px solid var(--op-border); gap: 1px; }
.op-doc-nav__link--dite { font-size: 12.8px; font-weight: 500; color: var(--op-ink-muted); }
.op-doc-nav__link--dite.op-doc-nav__link--active { color: var(--op-ink); }
/* Odznak = počet otevřených komentářů (Nový / V řešení) u položky menu i dlaždice */
.op-doc-nav__odznak { flex: 0 0 auto; min-width: 18px; text-align: center; background: var(--op-danger, #c0392b); color: #fff; border-radius: 999px; font: 700 11px/1.5 var(--bs-font-sans-serif); padding: 0 6px; }
/* Stavová ikona (emoji) u podstránky plánované funkce — drobně před názvem */
.op-doc-nav__stav { flex: 0 0 16px; width: 16px; text-align: center; font-size: 11px; line-height: 1; }

/* Vyrenderovaný markdown obsah */
.op-doc { max-width: 900px; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; padding: 22px 26px; font-size: 14.5px; line-height: 1.6; }
.op-doc > :first-child { margin-top: 0; }
.op-doc h1 { font: 800 24px/1.2 var(--bs-font-sans-serif); margin: 26px 0 12px; }
.op-doc h2 { font: 700 19px/1.25 var(--bs-font-sans-serif); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--op-border); }
.op-doc h3 { font: 700 16px/1.3 var(--bs-font-sans-serif); margin: 20px 0 8px; }
.op-doc h4 { font: 700 14.5px/1.3 var(--bs-font-sans-serif); margin: 16px 0 6px; }
.op-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.op-doc th, .op-doc td { border: 1px solid var(--op-border); padding: 7px 10px; text-align: left; vertical-align: top; }
.op-doc th { background: var(--op-surface-2); }
.op-doc code { background: var(--op-surface-2); border: 1px solid var(--op-border); border-radius: 4px; padding: 1px 5px; font-size: 0.88em; }
.op-doc pre { background: #1F2225; color: #E7E9E6; border-radius: 8px; padding: 13px 16px; overflow-x: auto; margin: 14px 0; }
.op-doc pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: 12.5px; }
.op-doc blockquote { border-left: 3px solid var(--op-border-strong); margin: 14px 0; padding: 2px 14px; color: var(--op-ink-muted); }
.op-doc img { max-width: 100%; }
.op-doc ul, .op-doc ol { padding-left: 24px; }
.op-doc li { margin: 3px 0; }
.op-doc hr { border: 0; border-top: 1px solid var(--op-border); margin: 22px 0; }
.op-doc a { color: var(--op-info); }

/* Stav průběžné synchronizace na stránce Připojte telefony */
.op-pripojeni__sync { margin-top: 22px; padding: 12px 16px; background: var(--op-info-bg); border: 1px solid var(--op-info-border); border-radius: 10px; font-size: 13.5px; text-align: left; }
.op-pripojeni__sync-error { margin-top: 6px; color: var(--op-danger); font-weight: 600; }
.op-pripojeni__sync-note { margin-top: 4px; color: var(--op-ink-muted); }

/* Komentáře k dokumentaci (Nápověda) */
/* Rychlá odpověď na otevřenou otázku (💬 u položky seznamu „Otevřené otázky pro ownera") */
.op-koment-odpovedet { border: 1px solid var(--op-border-strong); background: var(--op-surface); border-radius: 999px; font-size: 12px; line-height: 1; padding: 2px 7px; margin-left: 4px; cursor: pointer; vertical-align: 1px; }
.op-koment-odpovedet:hover { background: var(--op-info-bg); border-color: var(--op-info-border); }

.op-koment { max-width: 900px; margin-top: 18px; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; padding: 18px 26px 20px; }
.op-koment__nadpis { font: 700 17px/1.3 var(--bs-font-sans-serif); margin: 0 0 4px; }
.op-koment__pocet { display: inline-block; min-width: 22px; text-align: center; background: var(--op-surface-2); border: 1px solid var(--op-border); border-radius: 999px; font-size: 12.5px; padding: 1px 7px; vertical-align: 2px; }
.op-koment__napoveda { font-size: 13px; color: var(--op-ink-muted); margin: 0 0 14px; }
.op-koment__prazdno { font-size: 13.5px; color: var(--op-ink-muted); margin: 0; }
.op-koment__polozka { border-top: 1px solid var(--op-border); padding: 12px 0 10px; }
.op-koment__polozka--uzavreny { opacity: 0.6; }
.op-koment__citat { border-left: 3px solid var(--op-info); background: var(--op-info-bg); border-radius: 0 8px 8px 0; margin: 0 0 8px; padding: 6px 12px; font-size: 13px; color: var(--op-ink-muted); font-style: italic; }
.op-koment__kotva { margin-right: 6px; font-style: normal; font-weight: 700; text-decoration: none; }
.op-koment__text { font-size: 14px; margin: 0 0 6px; white-space: pre-wrap; }
.op-koment__pata { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--op-ink-muted); }
.op-koment__stitek { background: var(--op-surface-2); border: 1px solid var(--op-border); color: var(--op-ink-muted); border-radius: 999px; padding: 1px 9px; font-weight: 600; }
.op-koment__stitek--vreseni { background: var(--op-info-bg); border-color: var(--op-info-border); color: var(--op-info); }
.op-koment__stitek--implementovano { background: var(--op-success-bg); border-color: var(--op-success-border); color: var(--op-success); }
.op-koment__stitek--analyzazalozena { background: var(--op-warning-bg); border-color: var(--op-warning-border); color: var(--op-warning); }
.op-koment__stitek--zamitnuto { background: var(--op-surface-2); border-color: var(--op-border-strong); color: var(--op-ink-muted); }
.op-koment__akce { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.op-koment__stav-vyber { width: auto; font-size: 12.5px; }

/* Vlákno reakcí pod komentářem + rozbalovací formulář odpovědi */
.op-koment__reakce { margin: 8px 0 0 18px; padding: 6px 12px; border-left: 2px solid var(--op-border-strong); }
.op-koment__reakce .op-koment__text { font-size: 13.5px; margin-bottom: 3px; }
.op-koment__odpoved { margin: 8px 0 0 18px; }
.op-koment__odpoved summary { font-size: 12.5px; color: var(--op-info); cursor: pointer; width: fit-content; }
.op-koment__odpoved-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 8px; }

/* Uzavřené komentáře — nenápadně sbalené pod aktivními */
.op-koment__vyresene { border-top: 1px solid var(--op-border); margin-top: 12px; padding-top: 10px; }
.op-koment__vyresene > summary { font-size: 13px; color: var(--op-ink-muted); cursor: pointer; width: fit-content; }

/* Plovoucí tlačítko — velký dotykový cíl, na mobilu jen ikona */
.op-koment-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: flex; align-items: center; gap: 8px; background: var(--op-surface); color: var(--op-ink); border: 1px solid var(--op-border-strong); border-radius: 999px; padding: 12px 18px; font: 600 14px/1 var(--bs-font-sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,0.18); cursor: pointer; }
.op-koment-fab:hover { background: var(--op-surface-2); }
@media (max-width: 576px) {
  .op-koment-fab { padding: 14px 16px; }
  .op-koment-fab__text { display: none; }
}

.op-koment-dialog { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--op-border-strong); border-radius: 12px; padding: 0; }
.op-koment-dialog::backdrop { background: rgba(0,0,0,0.35); }
.op-koment-dialog__form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; }
.op-koment-dialog__nadpis { font: 700 16px/1.3 var(--bs-font-sans-serif); margin: 0; }
.op-koment-dialog__citat { position: relative; border-left: 3px solid var(--op-info); background: var(--op-info-bg); border-radius: 0 8px 8px 0; padding: 8px 34px 8px 12px; }
.op-koment-dialog__citat blockquote { margin: 0; font-size: 13px; font-style: italic; color: var(--op-ink-muted); max-height: 110px; overflow-y: auto; }
.op-koment-dialog__citat-zrusit { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: 14px; color: var(--op-ink-muted); cursor: pointer; padding: 2px 4px; }
.op-koment-dialog__tlacitka { display: flex; justify-content: flex-end; gap: 10px; }

/* Progres importu adres z RÚIAN (stažení na pozadí na /Sprava/Obce) */
.op-adr-progres { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.op-adr-progres__faze { font-weight: 600; font-size: 14px; }
.op-adr-progres__track { height: 10px; border-radius: 999px; background: var(--op-surface-2); border: 1px solid var(--op-border); overflow: hidden; }
.op-adr-progres__bar { height: 100%; width: 0; background: var(--op-success); border-radius: 999px; transition: width .3s ease; }
.op-adr-progres__bar--neurcite { animation: op-adr-pulz 1.1s ease-in-out infinite; }
.op-adr-progres__detail { font-size: 13px; }
@keyframes op-adr-pulz { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ============================================================
   Schéma poranění (figurína) — přední/zadní silueta se značkami.
   Silueta = inline SVG (offline, bez assetů); značky = HTML body
   na relativních % souřadnicích nad stage se zachovaným poměrem.
   ============================================================ */
.op-figurina { margin-top: 8px; }
.op-figurina__views { display: flex; gap: 14px; flex-wrap: wrap; }
.op-figurina__view { flex: 1 1 140px; max-width: 220px; }
.op-figurina__caption { font: 700 13px/1.2 var(--bs-font-sans-serif); color: var(--op-ink-muted); text-align: center; margin-bottom: 4px; }
.op-figurina__stage {
  position: relative; aspect-ratio: 100 / 220; width: 100%;
  background: var(--op-surface-2); border: 1px solid var(--op-border);
  border-radius: var(--op-radius); overflow: hidden; touch-action: manipulation;
}
.op-figurina[data-readonly="0"] .op-figurina__stage { cursor: crosshair; }
.op-figurina__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.op-figurina__sil { fill: #C6CDC4; }
.op-figurina__marks { position: absolute; inset: 0; pointer-events: none; }
.op-figmark {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%;
  background: #1F2A34; color: #fff; border: 2px solid #fff;
  font: 700 12px/1 var(--bs-font-sans-serif); text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer;
}
.op-figmark:disabled { cursor: default; }
.op-figmark--sel { background: var(--op-danger); outline: 2px solid var(--op-danger); outline-offset: 1px; }

.op-figeditor {
  margin-top: 10px; padding: 10px; background: var(--op-surface-2);
  border: 1px solid var(--op-border); border-radius: var(--op-radius);
}
.op-figeditor__title { font: 700 13px/1.2 var(--bs-font-sans-serif); margin-bottom: 6px; }
.op-figeditor__ta { margin-bottom: 8px; }
.op-figeditor__row { display: flex; gap: 8px; flex-wrap: wrap; }

.op-figurina__legend { margin-top: 12px; }
.op-figurina__notes { margin: 4px 0 0; padding-left: 4px; list-style: none; }
.op-figurina__notes li { margin: 2px 0; font: 500 14px/1.4 var(--bs-font-sans-serif); }
.op-fignote__n { font-weight: 700; color: var(--op-ink-muted); }

/* Krátká hláška u schématu (dosažen limit značek) — auto-zmizí. */
.op-figflash {
  margin-top: 8px; padding: 6px 10px; border-radius: var(--op-radius);
  background: var(--op-warn-bg, #fff3cd); color: var(--op-warn-ink, #6b5200);
  border: 1px solid var(--op-warn-border, #ffe08a);
  font: 600 13px/1.3 var(--bs-font-sans-serif);
}

/* ---- Elektronický podpis pacienta (prstem na displeji) ---- */
.op-podpis { margin-top: 6px; max-width: 420px; }
.op-podpis__canvas {
  /* Poměr stran musí sedět na rozlišení plátna (atributy 600×180), jinak by se
     souřadnice škálovaly v ose X jinak než Y a podpis by se ukládal roztažený. */
  display: block; width: 100%; aspect-ratio: 600 / 180; height: auto;
  background: #ffffff; border: 1px solid var(--op-border);
  border-radius: var(--op-radius); touch-action: none; /* dotyk kreslí, nescrolluje */
}
.op-podpis[data-readonly="0"] .op-podpis__canvas { cursor: crosshair; }
.op-podpis__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---- Nástěnka aktualit (úvodní stránka + správa) ---- */
.op-nastenka { margin-bottom: 24px; }
.op-nastenka__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.op-nastenka__manage { font-size: 14px; }

.op-nastenka-card {
  background: var(--op-surface, #fff); border: 1px solid var(--op-border, #e3e6ea);
  border-radius: var(--op-radius); padding: 14px 16px; margin-bottom: 10px;
}
.op-nastenka-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.op-nastenka-card__title { margin: 0; font: 700 16px/1.3 var(--bs-font-sans-serif); }
.op-nastenka-card__meta { color: var(--op-ink-muted); font-size: 13px; white-space: nowrap; }
.op-nastenka-card__text { margin: 6px 0 8px; white-space: pre-wrap; line-height: 1.5; }
.op-nastenka-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.op-nastenka-card__priloha { white-space: nowrap; }

/* Správa nástěnky */
.op-nastenka-item {
  border: 1px solid var(--op-border, #e3e6ea); border-radius: var(--op-radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.op-nastenka-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.op-nastenka-item__text { margin: 6px 0; white-space: pre-wrap; line-height: 1.5; }
.op-nastenka-item__priloha { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.op-nastenka-item__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.op-nastenka-edit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--op-border, #e3e6ea); }
.op-hint { display: block; margin-top: 4px; font-size: 12px; }
/* Pole předvyplněné z OCR kartičky — jemné zvýraznění „ke kontrole". */
.op-ocr-fill { background-color: #fff8e1; box-shadow: inset 0 0 0 2px #ffce54; }
/* Kamera s vodicím rámečkem pro focení kartičky. */
.op-cam { position: fixed; inset: 0; z-index: 1080; background: #000; display: flex; flex-direction: column; }
.op-cam__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; }
.op-cam__box { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; }
.op-cam__video { display: block; max-width: 100%; max-height: 100%; }
.op-cam__ramecek { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); pointer-events: none; }
.op-cam__hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff;
  font-size: 14px; line-height: 1.3; text-shadow: 0 1px 3px #000; padding: 0 12px; }
.op-cam__ovladani { display: flex; gap: 12px; justify-content: center; padding: 14px; background: #000; }
body.op-cam-open { overflow: hidden; }
.op-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; text-decoration: underline; color: var(--op-ink-muted); }
.op-linkbtn--danger { color: var(--op-danger, #b42318); }

/* ---- Sklad léků a materiálu (evidence + exspirace) ---- */
.op-sklad-souhrn { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.op-sklad-sarze { font-size: 12px; margin-top: 2px; }
.op-sklad-akce { display: flex; gap: 4px; flex-wrap: wrap; }
.op-sklad-druh { display: flex; gap: 16px; flex-wrap: wrap; }
.op-sklad-druh label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.op-sklad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.op-sklad-pole { display: flex; flex-direction: column; gap: 4px; position: relative; }
.op-sklad-pole > span { font-size: 12px; }
.op-sklad-mnozstvi { font-weight: 700; }
/* Našeptávač léků na kartě */
.op-naseptavac-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: var(--op-surface);
  border: 1px solid var(--op-border-strong); border-radius: var(--op-radius); box-shadow: 0 6px 20px rgba(0,0,0,.14);
  max-height: 260px; overflow-y: auto; margin-top: 2px; }
.op-naseptavac-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.op-naseptavac-item:hover, .op-naseptavac-item:focus { background: var(--op-surface-2); }
/* Dialogy pohybu a historie (nativní <dialog>) */
.op-dialog { border: 1px solid var(--op-border-strong); border-radius: var(--op-radius-lg); padding: 20px;
  max-width: 520px; width: calc(100% - 32px); background: var(--op-surface); color: var(--op-ink); }
.op-dialog::backdrop { background: rgba(0,0,0,.4); }
.op-dialog .op-sklad-pole { margin-bottom: 10px; }
.op-dialog-akce { display: flex; gap: 8px; justify-content: flex-end; }
.op-table-sm th, .op-table-sm td { font-size: 13px; padding: 6px 8px; }

/* ==== Chat (zabezpečená komunikace) ==== */
/* Statusová tečka — stav nikdy jen barvou: title nese text (online/pryč/offline) */
.op-stav { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.op-stav--online { background: #2e9e4f; }
.op-stav--pryc { background: #e6a817; }
.op-stav--offline { background: var(--op-border-strong); }
/* Odznak nepřečtených (menu i seznam) */
.op-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700; }
/* Seznam konverzací */
.op-chat-radek { display: flex; align-items: center; gap: 10px; }
.op-chat-radek__ikona { font-size: 20px; flex: none; }
.op-chat-radek__telo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-chat-radek__nazev { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.op-chat-radek__nahled { font-size: 13px; color: var(--op-muted, #6c757d); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.op-chat-radek__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.op-chat-radek__cas { font-size: 12px; color: var(--op-muted, #6c757d); }
/* Adresář */
.op-chat-osoba { display: flex; align-items: center; gap: 10px; }
.op-chat-osoba__telo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-chat-osoba__jmeno { font-weight: 600; }
.op-chat-osoba__detail { font-size: 13px; color: var(--op-muted, #6c757d); display: flex; gap: 8px; flex-wrap: wrap; }
.op-chat-naakci { color: #b26a00; font-weight: 600; }
.op-chat-clenove { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px;
  max-height: 240px; overflow-y: auto; }
/* Vlákno */
.op-chat-vlakno { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto;
  padding: 12px; border: 1px solid var(--op-border-strong); border-radius: var(--op-radius-lg);
  background: var(--op-surface-2); margin-bottom: 10px; }
.op-chat-zprava { max-width: 75%; align-self: flex-start; background: var(--op-surface);
  border: 1px solid var(--op-border-strong); border-radius: 12px 12px 12px 4px; padding: 8px 12px; }
.op-chat-zprava--moje { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #e7f0fb; }
.op-chat-zprava__hlavicka { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.op-chat-zprava__jmeno { font-weight: 700; }
.op-chat-zprava__cas { color: var(--op-muted, #6c757d); }
.op-chat-zprava__smazat { background: none; border: 0; color: var(--op-muted, #6c757d); cursor: pointer;
  padding: 0 2px; font-size: 12px; }
.op-chat-zprava__smazat:hover { color: #c62828; }
.op-chat-zprava__telo { white-space: pre-wrap; word-break: break-word; }
.op-chat-zprava__telo--smazana { color: var(--op-muted, #6c757d); font-style: italic; }
.op-chat-zprava__foto { max-width: 100%; max-height: 320px; border-radius: var(--op-radius); margin-top: 4px; }
.op-chat-zprava__priloha { display: inline-block; margin-top: 4px; }
/* Formulář odeslání */
.op-chat-formular { display: flex; flex-direction: column; gap: 8px; position: relative; }
.op-chat-formular__radek { display: flex; align-items: center; gap: 10px; }
/* Připnutá entita (záznam / akce) nad vláknem */
.op-chat-pin { padding: 8px 12px; border: 1px solid var(--op-border-strong); border-left: 4px solid #2e6da4;
  border-radius: var(--op-radius); background: var(--op-surface); margin-bottom: 10px; }
.op-chat-pin__odkaz { font-weight: 700; }
.op-chat-clenove-radek { display: flex; flex-wrap: wrap; gap: 12px; }
.op-chat-clen-stitek { display: inline-flex; align-items: center; gap: 5px; }
/* Chat — etapa 2: urgentní zprávy, doručenka, hlasovky */
.op-chat-zprava--urgentni { border-color: #c62828; border-width: 2px; background: #fdeaea; }
.op-chat-zprava--moje.op-chat-zprava--urgentni { background: #fdeaea; }
.op-chat-urgent { color: #c62828; font-weight: 700; }
.op-chat-precteno { font-size: 11px; color: var(--op-muted, #6c757d); text-align: right; margin-top: 2px; }
.op-chat-zprava__audio { max-width: 280px; margin-top: 4px; display: block; }
/* Chat — etapa 3: citace odpovědi, kartičky entit, hledání, výběr odkazu */
.op-chat-citace { font-size: 12px; color: var(--op-muted, #6c757d); border-left: 3px solid var(--op-border-strong);
  padding: 2px 8px; margin-bottom: 4px; background: var(--op-surface-2); border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.op-chat-karticka { display: inline-block; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--op-border-strong);
  border-left: 4px solid #2e6da4; border-radius: var(--op-radius); background: var(--op-surface);
  font-weight: 600; text-decoration: none; }
.op-chat-lista { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border: 1px dashed var(--op-border-strong); border-radius: var(--op-radius);
  background: var(--op-surface-2); font-size: 13px; }
.op-chat-vyber { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px; border: 1px solid var(--op-border-strong); border-radius: var(--op-radius); }
.op-chat-vyber .form-select { max-width: 260px; }
.op-chat-hledani { display: flex; gap: 8px; max-width: 560px; }
/* Chat — emoji reakce (spec 2026-08-09): čipy pod zprávou, paleta u tlačítka 🙂 vedle času. */
.op-chat-reakce { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.op-chat-reakce__cip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px;
  border: 1px solid var(--op-border-strong); border-radius: 12px; background: var(--op-surface);
  font-size: 12px; cursor: pointer; }
.op-chat-reakce__cip--moje { border-color: #2e6da4; background: #e7f0fb; font-weight: 600; }
.op-chat-reakce__pridat { background: none; border: 0; color: var(--op-muted, #6c757d); cursor: pointer;
  padding: 0 2px; font-size: 12px; }
.op-chat-reakce__pridat:hover { color: #2e6da4; }
.op-chat-reakce__paleta { display: flex; gap: 4px; padding: 4px 6px; margin: 2px 0 4px; border-radius: var(--op-radius);
  background: var(--op-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); align-self: flex-start; }
.op-chat-reakce__paleta button { background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.op-chat-reakce__paleta button:hover { background: var(--op-surface-2); border-radius: 6px; }
/* Chat — etapa 4: sekce Akce/Archiv, ztlumení, archiv jen ke čtení (spec 2026-08-08) */
.op-chat-sekce { margin-bottom: 14px; }
.op-chat-sekce > summary { cursor: pointer; font-weight: 700; padding: 4px 0; list-style: none; }
.op-chat-sekce > summary::-webkit-details-marker { display: none; }
.op-chat-sekce > summary::before { content: "▸ "; }
.op-chat-sekce[open] > summary::before { content: "▾ "; }
.op-chat-sekce .op-chat-seznam { margin-top: 8px; }
/* Ikonky bez textu (zvoneček, archiv) — glyfy jsou emoji, appka běží i offline (žádný webfont). */
.op-chat-ikonka { font-style: normal; margin-left: 2px; }
.bi-bell::before { content: "🔔"; }
.bi-bell-slash::before { content: "🔕"; }
.bi-archive::before { content: "🗄"; }
/* Chat — etapa 5: zmínky @jméno / @vsichni (spec 2026-08-09-chat-zminky) */
.op-chat-zminka { color: #b26a00; font-weight: 700; }
.op-chat-zprava--zminka { border-left: 4px solid #b26a00; }
.op-chat-zminky { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px; z-index: 20;
  max-height: 240px; overflow-y: auto; background: var(--op-surface); border: 1px solid var(--op-border-strong);
  border-radius: var(--op-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.op-chat-zminky__polozka { display: flex; justify-content: space-between; gap: 8px; width: 100%;
  padding: 6px 10px; border: 0; background: none; text-align: left; cursor: pointer; }
.op-chat-zminky__polozka:hover, .op-chat-zminky__polozka--aktivni { background: var(--op-surface-2); }
.op-chat-zminky__eoc { color: var(--op-muted, #6c757d); font-size: 12px; }
/* Správa výjimek chatu pobočky (Task 7, spec 2026-08-08) — stejný vzor, další ikonky bez webfontu. */
.bi-chat-dots::before { content: "💬"; }
.bi-trash::before { content: "🗑"; }
.bi-plus::before { content: "➕"; }
/* Emoji reakce (spec 2026-08-09) — tlačítko „Reagovat" vedle času zprávy. */
.bi-emoji-smile::before { content: "🙂"; }