/* UI v2 - styly obrazovek mimo seznamy (prihlaseni, nastaveni, sprava firmy, muj ucet, tendery, planovac, slack). Svetly i tmavy motiv (html.ui2 / html.ui2.ui2-dark).
   Barvy jen z tokenu ui2.css (--g*, --b*, --ok/--warn/--err), takze se tmava paleta propise sama.
   Ikony: masky --ip-<nazev> vklada ui2-pages.js (Lucide). Vzor: ::before { -webkit-mask: var(--pi) ... ; background: currentColor } */

/* ---------- spolecne: ikona v ::before ---------- */
html.ui2 .ri-actions button::before, html.ui2 .hb-order button::before, html.ui2 .kbf-del::before, html.ui2 .pl-nav-btn::before,
html.ui2 .tender-row-actions .iconbtn::before, html.ui2 .co-svc-ico::before, html.ui2 #pf-clear::before,
html.ui2 #modal-settings .empty::before, html.ui2 #modal-tender .empty::before, html.ui2 #slack-list .empty::before, html.ui2 #rl-list .empty::before {
  content: ""; flex: none; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat;
}

/* ---------- prihlaseni (firemni login, #co-login.co-island) ---------- */
html.ui2 .co-overlay.co-island { background: var(--g50) !important; color: var(--g900) !important; }
html.ui2 .co-overlay.co-island .hm-grid { background-image: linear-gradient(var(--g200) 1px, transparent 1px), linear-gradient(90deg, var(--g200) 1px, transparent 1px); opacity: .45; }
html.ui2:not(.ui2-dark) .co-overlay.co-island .hm-blob { opacity: .22; }
html.ui2 .co-island .co-card.narrow {
  background: var(--g0) !important; border: 1px solid var(--g200) !important; color: var(--g900) !important;
  box-shadow: 0 1px 2px rgba(22,28,28,.06), 0 24px 60px rgba(22,28,28,.12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 16px !important; padding: 36px 32px 28px !important;
}
html.ui2.ui2-dark .co-island .co-card.narrow { box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; }
/* logo: ve svetlem tmave (stejne jako v sidebaru), v tmavem puvodni */
html.ui2:not(.ui2-dark).has-brand-logo .co-island .co-card.narrow .co-brand { background: var(--g900) !important; -webkit-mask: var(--brand-logo) left center / contain no-repeat; mask: var(--brand-logo) left center / contain no-repeat; }
html.ui2:not(.ui2-dark).has-brand-logo.ui2-logo-light .co-island .co-card.narrow .co-brand { background: var(--ui2-logo) left center / contain no-repeat !important; -webkit-mask: none; mask: none; }
html.ui2 .co-island .co-card.narrow .co-brand { width: 170px; height: 24px; margin-bottom: 28px; }
html.ui2 .co-island .co-card.narrow h1 { font: 600 22px/28px "Inter", system-ui, sans-serif !important; letter-spacing: -0.01em; color: var(--g900); margin: 0 0 6px; }
html.ui2 .co-island .co-lead { color: var(--g500) !important; font-size: 14px; line-height: 20px; margin: 0 0 24px; }
html.ui2 .co-island .co-field { color: var(--g700) !important; font: 500 13px/18px "Inter", system-ui, sans-serif; margin: 0 0 16px; }
html.ui2 .co-island .co-field input { height: 44px; margin-top: 6px; padding: 0 12px !important; font: 400 15px/20px "Inter", system-ui, sans-serif !important; }
html.ui2 .co-island form > .co-btn { min-height: 44px !important; margin-top: 4px; background: var(--b700) !important; border-color: var(--b700) !important; color: var(--on-accent, #fff) !important; font-weight: 600 !important; box-shadow: none !important; }
html.ui2 .co-island form > .co-btn:hover { background: var(--b800) !important; border-color: var(--b800) !important; }
html.ui2 .co-island .co-muted { color: var(--g500) !important; font-size: 13px; line-height: 18px; }
html.ui2 .co-island .hm-hero { color: var(--g900); }
html.ui2 .co-island .hm-hero .k { color: var(--bink); border-color: var(--b100); background: var(--b50); }
html.ui2 .co-island .hm-hero p { color: var(--g500); }
html.ui2 .co-island .hm-hero li { color: var(--g900); background: var(--g0); border-color: var(--g200); backdrop-filter: none; }
html.ui2 .co-island .hm-hero li i { background: var(--b50); color: var(--b700); }
html.ui2.ui2-dark .co-island .hm-hero li i { color: var(--bink); }
@media (max-width: 759px) {
  html.ui2 .co-island .co-card.narrow { padding: 28px 20px 22px !important; border-radius: 16px !important; }
}

/* ---------- Nastaveni: obsah zalozek (lista zalozek a Obecne jsou v ui2.css) ---------- */
html.ui2 .co-panehelp, html.ui2.co-mode .co-panehelp, html.ui2 #modal-settings .settings-pane > .muted:first-child {
  background: var(--b50) !important; border: 1px solid var(--b100) !important; border-radius: 8px !important; color: var(--g700) !important;
  padding: 10px 12px !important; margin: 0 0 16px !important; font: 400 13px/19px "Inter", system-ui, sans-serif !important;
}
html.ui2 .co-panehelp b, html.ui2 .co-panehelp strong, html.ui2 #modal-settings .settings-pane > .muted:first-child b { color: var(--g900); font-weight: 600; }
html.ui2 #modal-settings .settings-pane code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--g100); color: var(--g900); }

/* seznamy = karty s radky */
html.ui2 #modal-settings .settings-pane .list { display: flex !important; flex-direction: column; gap: 8px !important; }
html.ui2 #modal-settings .list > div:not(.rule-item):not(.empty):not(.error-msg):not(.skel) { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
html.ui2 #modal-settings .list > .rule-item {
  display: flex !important; align-items: center !important; gap: 12px; margin: 0 !important; padding: 12px 12px 12px 16px !important; min-height: 64px;
  background: var(--g0) !important; border: 1px solid var(--g200) !important; border-radius: 10px !important; color: var(--g900) !important; box-shadow: none !important;
  transition: border-color .12s, background .12s;
}
html.ui2 #modal-settings .list > .rule-item:hover { border-color: var(--g300) !important; }
html.ui2 #modal-settings .kb-item { cursor: pointer; }
html.ui2 #modal-settings .kb-item:hover { background: var(--g50) !important; }
html.ui2 #modal-settings .ri-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }
html.ui2 #modal-settings .ri-pattern {
  flex: 1 1 100%; order: -1; margin: 0 !important; font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; letter-spacing: 0;
  overflow-wrap: anywhere; word-break: normal;
}
html.ui2 #modal-settings .ri-type, html.ui2 #modal-settings .ri-acct, html.ui2 #modal-settings .ri-note {
  margin: 0 !important; font: 400 12px/16px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; opacity: 1 !important;
}
html.ui2 #modal-settings .ri-type { order: 1; }
html.ui2 #modal-settings .ri-acct { order: 2; }
html.ui2 #modal-settings .ri-acct::before { content: "·"; margin-right: 6px; }
html.ui2 #modal-settings .ri-note { order: 3; flex: 1 1 100%; overflow-wrap: anywhere; }
html.ui2 #modal-settings .ri-type + .ri-pattern + .ri-note, html.ui2 #modal-settings .ri-acct ~ .ri-note { color: var(--g700) !important; }

/* akce radku: ikonova tlacitka 32 px */
html.ui2 #modal-settings .ri-actions { display: flex; align-items: center; gap: 2px !important; flex: none; }
html.ui2 #modal-settings .ri-actions button, html.ui2 #modal-settings .hb-order button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: 32px; min-width: 32px !important; height: 32px; min-height: 32px !important;
  padding: 0 !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: var(--g500) !important;
  font-size: 0 !important; line-height: 1; cursor: pointer; box-shadow: none !important; transition: background .12s, color .12s;
}
html.ui2 #modal-settings .ri-actions button:hover, html.ui2 #modal-settings .hb-order button:hover:not(:disabled) { background: var(--g100) !important; color: var(--g900) !important; }
html.ui2 #modal-settings .ri-actions button:focus-visible { outline-offset: 0 !important; }
html.ui2 #modal-settings .ri-stats { --pi: var(--ip-chart-column); }
html.ui2 #modal-settings #rules-list .ri-stats { width: auto; min-width: 48px !important; padding: 0 8px !important; font: 600 12px/16px "Inter", system-ui, sans-serif !important; font-variant-numeric: tabular-nums; }
html.ui2 #modal-settings .kb-item .ri-stats { --pi: var(--ip-pencil); }
html.ui2 #modal-settings .ri-apply { --pi: var(--ip-play); }
html.ui2 #modal-settings .ri-toggle, html.ui2 #modal-settings .hb-toggle { --pi: var(--ip-power); }
html.ui2 #modal-settings .ri-toggle[title="Vypnout"], html.ui2 #modal-settings .hb-toggle[title="Vypnout"] { color: var(--ok) !important; }
html.ui2.ui2-dark #modal-settings .ri-toggle[title="Vypnout"], html.ui2.ui2-dark #modal-settings .hb-toggle[title="Vypnout"] { color: var(--bink) !important; }
html.ui2 #modal-settings .ri-del { --pi: var(--ip-trash-2); }
html.ui2 #modal-settings .ri-del:hover { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2 #modal-settings .sec-rewrite, html.ui2 #modal-settings .hb-edit { --pi: var(--ip-pencil); }
html.ui2 #modal-settings .hb-up { --pi: var(--ip-chevron-up); }
html.ui2 #modal-settings .hb-down { --pi: var(--ip-chevron-down); }
/* vypnute pravidlo / krok: stitek Vypnuto misto zasedleho textu */
html.ui2 #modal-settings .rule-item:has(.ri-toggle[title="Zapnout"]) .ri-pattern::after,
html.ui2 #modal-settings .hb-item.hb-disabled .ri-pattern::after {
  content: "Vypnuto"; display: inline-block; margin-left: 8px; padding: 0 8px; height: 20px; border-radius: 999px; vertical-align: 1px;
  background: var(--g100); color: var(--g500); font: 600 11px/20px "Inter", system-ui, sans-serif;
}
html.ui2 #modal-settings .rule-item:has(.ri-toggle[title="Zapnout"]) .ri-pattern, html.ui2 #modal-settings .hb-item.hb-disabled .ri-pattern { color: var(--g700) !important; }
html.ui2 #modal-settings .hb-item.hb-disabled .ri-main { opacity: 1 !important; }

/* know-how: kategorie jako nadpis skupiny */
html.ui2 #modal-settings .kb-cat-head {
  margin: 16px 0 0 !important; padding: 0 2px !important; font: 600 11px/14px "Inter", system-ui, sans-serif !important; letter-spacing: .06em; text-transform: uppercase; color: var(--g500) !important;
}
html.ui2 #modal-settings .kb-cat-head:first-child { margin-top: 0 !important; }
html.ui2 #modal-settings .kb-toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; flex-wrap: wrap; }
html.ui2 #modal-settings .kb-toolbar input[type="search"] { flex: 1 1 240px; height: 36px; min-height: 36px; padding: 0 12px !important; font-size: 14px; }
html.ui2 #modal-settings .kb-toolbar .btn { min-height: 36px; }

/* sekvence: poradi nahoru/dolu */
html.ui2 #modal-settings .hb-order { display: flex; flex-direction: column; gap: 0; margin-left: -6px; }
html.ui2 #modal-settings .hb-order button { width: 28px; min-width: 28px !important; height: 22px; min-height: 22px !important; border-radius: 6px !important; }
html.ui2 #modal-settings .hb-order button::before { width: 14px; height: 14px; }
html.ui2 #modal-settings .hb-order button:disabled { opacity: .3; cursor: default; }
html.ui2 #modal-settings .hb-stale-warn { background: var(--warn-bg) !important; border: 1px solid transparent !important; color: var(--warn-ink) !important; border-radius: 8px !important; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 18px; }
html.ui2 #modal-settings .hb-log { margin-top: 16px; border: 1px solid var(--g200) !important; border-radius: 10px !important; background: var(--g0) !important; padding: 0 !important; overflow: hidden; }
html.ui2 #modal-settings .hb-log.hidden { display: none !important; }

/* log zachycenych mailu / behu: radky */
html.ui2 .rl-item {
  margin: 0 !important; padding: 10px 16px !important; background: var(--g0) !important; border: 0 !important; border-bottom: 1px solid var(--g200) !important; border-radius: 0 !important;
  color: var(--g900) !important; font: 400 13px/18px "Inter", system-ui, sans-serif !important; box-shadow: none !important;
}
html.ui2 .rl-item:last-child { border-bottom: 0 !important; }
html.ui2 .rl-when { opacity: 1 !important; font-size: 12px !important; line-height: 16px; color: var(--g500) !important; font-variant-numeric: tabular-nums; }
html.ui2 .rl-from { margin-top: 2px; color: var(--g700); } html.ui2 .rl-from strong { color: var(--g900); font-weight: 600; }
html.ui2 .rl-from .muted { color: var(--g500) !important; }
html.ui2 .rl-subj { margin-top: 2px; font-weight: 600; color: var(--g900); }
html.ui2 .rl-sum { font-size: 12px !important; line-height: 17px; color: var(--g500) !important; }
html.ui2 #modal-rule-log .modal-body { padding: 0 !important; }
html.ui2 #modal-rule-log #rl-list { display: block !important; gap: 0 !important; }
html.ui2 #modal-rule-log #rl-list > .rl-item { border-width: 0 0 1px 0 !important; border-radius: 0 !important; }

/* pristupy: formular */
html.ui2 #modal-settings .secrets-form { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
html.ui2 #modal-settings .secrets-form input { flex: 1 1 200px; height: 36px; min-height: 36px; padding: 0 12px !important; font-size: 14px; }
html.ui2 #modal-settings .secrets-form .btn { min-height: 36px; }

/* notifikace */
html.ui2 #modal-settings .notif-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; background: var(--g0) !important; border: 1px solid var(--g200) !important; border-radius: 10px !important; color: var(--g900); font-size: 14px; }
html.ui2 #modal-settings .notif-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--b700); margin: 0; }
html.ui2 #notif-status { font-size: 13px; line-height: 18px; }

/* prazdne stavy a chyby v seznamech */
html.ui2 #modal-settings .empty, html.ui2 #modal-tender .empty, html.ui2 #slack-list .empty, html.ui2 #rl-list .empty, html.ui2 #hb-log .empty {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 48px 16px !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--g700) !important; font: 500 15px/22px "Inter", system-ui, sans-serif !important; --pi: var(--ip-inbox);
}
html.ui2 #modal-settings .empty::before, html.ui2 #modal-tender .empty::before, html.ui2 #slack-list .empty::before, html.ui2 #rl-list .empty::before { width: 32px; height: 32px; color: var(--b500); }
html.ui2 #modal-settings .list > .empty { border: 1px dashed var(--g300) !important; border-radius: 10px !important; padding: 32px 16px !important; color: var(--g500) !important; font-size: 14px !important; }
html.ui2 #modal-settings #kb-list .empty { --pi: var(--ip-file-text); }
html.ui2 #modal-settings #secrets-list .empty { --pi: var(--ip-lock-keyhole); }
html.ui2 #modal-settings #hb-list .empty { --pi: var(--ip-calendar); }
html.ui2 #modal-tender .empty { --pi: var(--ip-briefcase); }
html.ui2 #slack-list .empty { --pi: var(--ip-message-square); padding-top: 96px !important; font-size: 16px !important; line-height: 24px !important; }
html.ui2 #slack-list .empty::after { content: "Až vás někdo ve Slacku zmíní nebo požádá o úkol, objeví se tady."; max-width: 260px; font: 400 13px/18px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 #slack-list .loading { padding: 32px 16px; text-align: center; color: var(--g500); font-size: 13px; }
html.ui2 #modal-settings .error-msg:not(:empty), html.ui2 #modal-tender .error-msg:not(:empty) { background: var(--err-bg) !important; color: var(--err) !important; border: 0 !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 13px; }
html.ui2 .skel { background: var(--g100) !important; border: 0 !important; border-radius: 10px !important; min-height: 64px; }

/* ---------- editacni dialogy: pravidlo, know-how, krok sekvence ---------- */
html.ui2 #modal-rule-edit .field select, html.ui2 #re-account { width: 100%; height: 36px; padding: 0 10px !important; font-size: 14px; }
html.ui2 #modal-rule-edit .field > span, html.ui2 #modal-kb-edit .field > span, html.ui2 #modal-hb-edit .field > span { display: block; margin-bottom: 6px; color: var(--g700) !important; }
html.ui2 #modal-rule-edit .field, html.ui2 #modal-kb-edit .field, html.ui2 #modal-hb-edit .field { display: block; margin: 0 0 14px; }
html.ui2 #modal-rule-edit .field input, html.ui2 #modal-kb-edit .field input, html.ui2 #modal-hb-edit .field input { height: 36px; padding: 0 12px !important; font-size: 14px; width: 100%; }
html.ui2 .re-context { background: var(--g50) !important; border: 1px solid var(--g200) !important; color: var(--g700) !important; border-radius: 8px !important; }
html.ui2 .rule-type-options { gap: 6px !important; margin: 4px 0 16px !important; }
html.ui2 .rule-type { align-items: baseline !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 14px; line-height: 20px; color: var(--g900) !important; flex-wrap: wrap; }
html.ui2 .rule-type:has(input:checked) { border-color: var(--b500) !important; background: var(--b50) !important; }
html.ui2 .rule-type input { accent-color: var(--b700); margin: 0; transform: translateY(2px); }
html.ui2 .rule-type strong { font-weight: 600; }
html.ui2 .rule-type span.muted { display: inline !important; font-size: 12px !important; color: var(--g500) !important; }
html.ui2 .re-action-block { border-radius: 10px !important; padding: 12px !important; margin: 4px 0 0 !important; }
html.ui2 .re-action-block legend { color: var(--g700) !important; font: 600 11px/14px "Inter", system-ui, sans-serif; letter-spacing: .06em; padding: 0 6px; text-transform: uppercase; }
html.ui2 .re-action-block .rule-type + .rule-type { margin-top: 6px; }
html.ui2 .re-drive-options { background: var(--g50) !important; border-left: 3px solid var(--b500) !important; border-radius: 0 8px 8px 0 !important; }
html.ui2 .re-drive-path { background: var(--g0) !important; border: 1px solid var(--g200); font: 400 13px/18px "Inter", system-ui, sans-serif !important; color: var(--g900); border-radius: 6px !important; }
html.ui2 .re-drive-path.muted { color: var(--g500) !important; font-style: normal !important; }
html.ui2 .re-filter-row label { color: var(--g900); font-size: 13px; }
html.ui2 .re-move-check { color: var(--g900); font-size: 14px !important; gap: 10px !important; margin-top: 14px !important; }
html.ui2 .re-move-check input, html.ui2 .re-filter-row input { accent-color: var(--b700); width: 16px; height: 16px; margin: 0; }
html.ui2 #kbe-body, html.ui2 #hbe-prompt { font: 400 14px/21px "Inter", system-ui, sans-serif !important; padding: 10px 12px !important; width: 100%; }
html.ui2 .kbe-meta-row { gap: 12px !important; }
html.ui2 #kbe-history { height: 36px; padding: 0 10px !important; font-size: 13px; }
html.ui2 .kbf { margin: 4px 0 12px !important; padding: 12px 14px !important; border: 1px dashed var(--g300) !important; border-radius: 10px !important; background: var(--g50) !important; color: var(--g900) !important; }
html.ui2 .kbf-head { font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900); }
html.ui2 .kbf-note { color: var(--g500) !important; opacity: 1 !important; font-size: 12px !important; line-height: 17px; }
html.ui2 .kbf-row { border-bottom: 1px solid var(--g200) !important; }
html.ui2 .kbf-row a { color: var(--b700) !important; }
html.ui2.ui2-dark .kbf-row a { color: var(--bink) !important; }
html.ui2 .kbf-del { display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0 !important; font-size: 0 !important; border-radius: 6px; color: var(--g500) !important; opacity: 1 !important; --pi: var(--ip-x); }
html.ui2 .kbf-del:hover { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2 .kbf-add { display: inline-flex !important; align-items: center; min-height: 32px; padding: 0 12px !important; margin: 10px 0 6px !important; border-radius: 8px !important; font: 500 13px/18px "Inter", system-ui, sans-serif !important;
  background: var(--g0) !important; color: var(--bink) !important; border: 1px solid var(--b500) !important; }
html.ui2 .kbf-add:hover { background: var(--b50) !important; }
html.ui2 .kbf-err { color: var(--err) !important; }
html.ui2 #modal-kb-edit .modal-foot, html.ui2 #modal-hb-edit .modal-foot, html.ui2 #modal-rule-edit .modal-foot { gap: 8px; }
html.ui2 #kbe-delete, html.ui2 #hbe-delete { color: var(--err) !important; border-color: color-mix(in srgb, var(--err) 45%, transparent) !important; background: var(--g0) !important; }
html.ui2 #kbe-delete:hover, html.ui2 #hbe-delete:hover { background: var(--err-bg) !important; }

/* ---------- Sprava firmy (#co-admin) a Muj ucet (#co-me) ---------- */
html.ui2 .co-overlay .co-card h2, html.ui2 .co-modal .co-card h2 { font: 600 16px/24px "Inter", system-ui, sans-serif !important; color: var(--g900); letter-spacing: 0; }
html.ui2 .co-overlay .co-card h3 { font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900); }
html.ui2 .co-section-h { margin: 8px 0 12px !important; min-height: 36px; }
html.ui2 .co-section-h h2 { margin: 0 !important; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
html.ui2 .co-section-h h2 .co-help { margin-left: 0; }
html.ui2 .co-overlay .co-muted, html.ui2 .co-overlay small { color: var(--g500) !important; }
html.ui2 .co-overlay .co-field { color: var(--g700) !important; font: 500 13px/18px "Inter", system-ui, sans-serif; }
html.ui2 .co-overlay .co-field input:not([type="checkbox"]), html.ui2 .co-overlay .co-field select { height: 40px; padding: 0 12px !important; font: 400 14px/20px "Inter", system-ui, sans-serif !important; }
html.ui2 .co-overlay .co-field textarea { padding: 10px 12px !important; font: 400 14px/21px "Inter", system-ui, sans-serif !important; }
html.ui2 .co-overlay .co-field small { font-size: 12px; line-height: 16px; }
/* tlacitka */
html.ui2 .co-overlay .co-btn.sm { min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; }
html.ui2 .co-overlay .co-btn.danger, html.ui2 .co-modal .co-btn.danger {
  background: var(--g0) !important; color: var(--err) !important; border: 1px solid color-mix(in srgb, var(--err) 45%, transparent) !important; font-weight: 500 !important;
}
html.ui2 .co-overlay .co-btn.danger:hover, html.ui2 .co-modal .co-btn.danger:hover { background: var(--err-bg) !important; border-color: var(--err) !important; }
html.ui2 .co-overlay .co-btn.ghost, html.ui2 .co-modal .co-btn.ghost { background: var(--g0) !important; color: var(--g900) !important; border: 1px solid var(--g300) !important; font-weight: 500 !important; }
html.ui2 .co-overlay .co-btn.ghost:hover, html.ui2 .co-modal .co-btn.ghost:hover { background: var(--g50) !important; border-color: var(--g500) !important; }
html.ui2 .co-overlay .co-btn:not(.ghost):not(.danger), html.ui2 .co-modal .co-btn:not(.ghost):not(.danger) {
  background: var(--b700) !important; border: 1px solid var(--b700) !important; color: var(--on-accent, #fff) !important; font-weight: 600 !important; box-shadow: none !important;
}
html.ui2 .co-overlay .co-btn:not(.ghost):not(.danger):hover, html.ui2 .co-modal .co-btn:not(.ghost):not(.danger):hover { background: var(--b800) !important; border-color: var(--b800) !important; }
/* sekundarni akce v radcich tabulek a karet sluzeb: obrysove, plne jen hlavni akce stranky */
html.ui2 .co-overlay .co-table .co-btn:not(.danger), html.ui2 .co-overlay .co-svc-actions .co-btn:not(.danger) {
  background: var(--g0) !important; color: var(--g900) !important; border: 1px solid var(--g300) !important; font-weight: 500 !important;
}
html.ui2 .co-overlay .co-svc-actions .co-btn:not(.ghost):not(.danger) { color: var(--bink) !important; border-color: var(--b500) !important; }
html.ui2 .co-overlay .co-table .co-btn:not(.danger):hover, html.ui2 .co-overlay .co-svc-actions .co-btn:not(.danger):hover { background: var(--g50) !important; border-color: var(--g500) !important; }
html.ui2 .co-overlay .co-svc-actions .co-btn:not(.ghost):not(.danger):hover { background: var(--b50) !important; border-color: var(--b700) !important; }
html.ui2 .co-overlay .co-row { gap: 8px; }
/* KPI dlazdice */
html.ui2 .co-kpis { gap: 12px !important; margin: 0 0 16px !important; }
html.ui2 .co-kpi { padding: 16px !important; border-radius: 10px !important; background: var(--g0) !important; border: 1px solid var(--g200) !important; display: flex; flex-direction: column; gap: 4px; }
html.ui2 .co-kpi b { font: 600 24px/32px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
html.ui2 .co-kpi.good b { color: var(--ok) !important; } html.ui2 .co-kpi.warn b { color: var(--warn) !important; }
html.ui2.ui2-dark .co-kpi.good b { color: var(--ok-ink) !important; } html.ui2.ui2-dark .co-kpi.warn b { color: var(--warn-ink) !important; }
html.ui2 .co-kpi > span { display: flex; align-items: center; gap: 0; font: 400 13px/18px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; }
/* napoveda ? */
html.ui2 .co-help > button { width: 18px !important; height: 18px !important; font: 600 11px/1 "Inter", system-ui, sans-serif !important; border: 1px solid var(--g300) !important; background: var(--g0) !important; color: var(--g500) !important; }
html.ui2 .co-help > button:hover, html.ui2 .co-help.open > button { background: var(--b50) !important; color: var(--bink) !important; border-color: var(--b500) !important; }
html.ui2 .co-help .co-tip { font: 400 13px/19px "Inter", system-ui, sans-serif !important; border-radius: 10px !important; }
html.ui2 .co-help .co-tip b { color: var(--g900) !important; font-weight: 600; }
/* boxy, radky, tabulky */
html.ui2 .co-overlay .co-box { padding: 16px 20px !important; border-radius: 10px !important; margin: 0 0 16px !important; }
html.ui2 .co-box.warn { background: var(--warn-bg) !important; border-color: transparent !important; color: var(--warn-ink) !important; }
html.ui2 .co-kbrow { padding: 12px 12px 12px 16px !important; border-radius: 10px !important; margin: 0 0 8px !important; min-height: 64px; gap: 12px !important; }
html.ui2 .co-kbrow > div:first-child { min-width: 0; }
html.ui2 .co-kbrow b { display: block; font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--g900); overflow-wrap: anywhere; }
html.ui2 .co-kbrow small { display: block; margin-top: 2px; font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500) !important; }
html.ui2 .co-kbrow .co-row { flex: none; flex-wrap: nowrap; }
html.ui2 #co-admin .co-table { background: var(--g0); border: 1px solid var(--g200); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; }
html.ui2 #co-admin .co-table th { padding: 10px 16px !important; font: 600 11px/14px "Inter", system-ui, sans-serif !important; letter-spacing: .06em; background: var(--g50); }
html.ui2 #co-admin .co-table td { padding: 10px 16px !important; height: 52px; line-height: 20px; }
/* akce v radku Lide: tlacitka se smi zalomit pod sebe, jinak tabulka s pozvanym clenem (3 tlacitka) pretekla na 1440 px */
html.ui2 #co-admin .co-table td.co-c-act .co-btn { white-space: nowrap; margin: 2px 0; }
html.ui2 #co-admin .co-table tr:last-child td { border-bottom: 0 !important; }
html.ui2 #co-admin .co-table td b { font-weight: 600; color: var(--g900); }
html.ui2 #co-admin .co-table td .co-muted { font-size: 13px; }
html.ui2 #co-admin .co-table code { font-family: var(--mono); font-size: 12px; background: var(--g100); color: var(--g900); padding: 2px 6px; border-radius: 4px; }
html.ui2 .co-pill { height: 22px; line-height: 22px !important; padding: 0 9px !important; font: 600 11px/22px "Inter", system-ui, sans-serif !important; border-radius: 999px !important; vertical-align: middle; }
html.ui2 .co-empty { border: 1px dashed var(--g300) !important; color: var(--g500) !important; border-radius: 10px !important; font-size: 14px; padding: 32px 16px !important; background: none !important; }
/* Prehled: cislovany postup */
html.ui2 .co-overlay ol.co-howto { background: none !important; border: 0 !important; padding: 0 !important; margin: 8px 0 0 !important; }
html.ui2 .co-overlay ol.co-howto li { border-bottom: 1px solid var(--g200) !important; color: var(--g900); font-size: 14px; line-height: 20px; padding: 12px 0 12px 40px !important; margin: 0 !important; }
html.ui2 .co-overlay ol.co-howto li:last-child { border-bottom: 0 !important; }
html.ui2 .co-overlay ol.co-howto li::before { width: 24px !important; height: 24px !important; top: 10px !important; border-radius: 50% !important; background: var(--b50) !important; color: var(--bink) !important; font: 600 12px/24px "Inter", system-ui, sans-serif !important; }
html.ui2 .co-overlay .co-howto b { color: var(--g900) !important; font-weight: 600; }
/* Zalozni klice: navod a formulare */
html.ui2 .co-overlay details.co-howto { background: var(--g0) !important; border: 1px solid var(--g200) !important; border-radius: 10px !important; padding: 12px 16px !important; margin: 0 0 12px !important; color: var(--g900); }
html.ui2 .co-overlay details.co-howto summary { font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .co-overlay details.co-howto ol { margin: 10px 0 6px 20px !important; font-size: 14px; line-height: 21px; color: var(--g700); }
html.ui2 .co-overlay details.co-howto li { padding: 0 !important; border: 0 !important; margin: 0 0 8px !important; }
html.ui2 .co-overlay details.co-howto li::before { content: none !important; }
html.ui2 .co-tokenbox { background: var(--g0) !important; border: 1px solid var(--g200) !important; border-radius: 10px !important; padding: 16px 20px !important; margin: 0 0 16px !important; }
html.ui2 .co-tokenbox input[readonly] { background: var(--g50) !important; color: var(--g700) !important; font-family: var(--mono) !important; font-size: 13px !important; }
html.ui2 .co-code { background: var(--g50) !important; border: 1px solid var(--g200) !important; color: var(--g900); font-family: var(--mono) !important; }
html.ui2 .co-mdview { background: var(--g50) !important; border: 1px solid var(--g200) !important; color: var(--g900); }
html.ui2 .co-copy { background: var(--b50) !important; color: var(--bink) !important; border: 1px solid var(--b100) !important; }
/* Tendry: prepinac a vyber skupin */
html.ui2 .co-switch { color: var(--g900); font-size: 14px; }
html.ui2 .co-switch input, html.ui2 .co-checks input { accent-color: var(--b700) !important; }
html.ui2 .co-checks label { border: 1px solid var(--g300) !important; color: var(--g900) !important; background: var(--g0); font: 500 13px/18px "Inter", system-ui, sans-serif !important; padding: 6px 12px !important; }
html.ui2 .co-checks label:has(input:checked) { border-color: var(--b500) !important; background: var(--b50) !important; color: var(--bink) !important; }
html.ui2 #co-f-tender .co-row:last-child { margin-top: 4px; }
/* dialogy Spravy firmy (upravit uzivatele, skupinu, dokument) */
html.ui2 .co-modal { background: rgba(22,28,28,.32) !important; }
html.ui2.ui2-dark .co-modal { background: rgba(0,0,0,.55) !important; }
html.ui2 .co-modal .co-card { border: 1px solid var(--g200) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(22,28,28,.24) !important; padding: 24px !important; }
html.ui2 .co-modal .co-field { color: var(--g700) !important; font: 500 13px/18px "Inter", system-ui, sans-serif; }
html.ui2 .co-modal .co-field input:not([type="checkbox"]), html.ui2 .co-modal .co-field select { height: 40px; padding: 0 12px !important; }

/* Muj ucet */
html.ui2 #co-me .co-me-head { margin-bottom: 24px; }
html.ui2 #co-me .co-me-head h1 { margin: 0 !important; }
html.ui2 #co-me .co-avatar { width: 48px !important; height: 48px !important; font: 600 20px/1 "Inter", system-ui, sans-serif !important; color: var(--on-accent, #fff) !important; background: var(--b700) !important; }
html.ui2 #co-me .co-me-grid { gap: 16px !important; }
html.ui2 .co-me-card { padding: 20px !important; border-radius: 12px !important; }
html.ui2 .co-me-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; }
html.ui2 .co-me-card > .co-muted { margin: -4px 0 12px; font-size: 13px; line-height: 18px; }
html.ui2 .co-me-card .co-btn { margin-top: 4px; }
html.ui2 #co-me .co-me-card .co-btn:not(.ghost):not(.danger) { background: var(--g0) !important; color: var(--g900) !important; border-color: var(--g300) !important; font-weight: 500 !important; }
html.ui2 #co-me .co-me-card .co-btn:not(.ghost):not(.danger):hover { background: var(--g50) !important; border-color: var(--g500) !important; }
html.ui2 #co-me .co-svc-actions .co-btn:not(.ghost):not(.danger) { color: var(--bink) !important; border-color: var(--b500) !important; }
html.ui2 .co-svc-grid { gap: 12px !important; }
html.ui2 .co-svc { gap: 12px !important; padding: 14px 16px !important; border-radius: 10px !important; background: var(--g0) !important; border: 1px solid var(--g200) !important; color: var(--g900); }
html.ui2 .co-svc.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--g200)) !important; background: var(--g0) !important; }
html.ui2 .co-svc.is-bad { border-color: color-mix(in srgb, var(--err) 50%, var(--g200)) !important; background: var(--g0) !important; }
html.ui2 .co-svc-ico { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; display: flex !important; align-items: center; justify-content: center;
  background: var(--b50) !important; border: 0 !important; color: var(--b700) !important; font-size: 0 !important; --pi: var(--ip-plug); }
html.ui2.ui2-dark .co-svc-ico { color: var(--bink) !important; }
html.ui2 .co-svc-ico::before { width: 18px; height: 18px; }
html.ui2 .co-svc[data-key^="mail/"] .co-svc-ico { --pi: var(--ip-mail); }
html.ui2 .co-svc[data-key^="nas/"] .co-svc-ico { --pi: var(--ip-hard-drive); }
html.ui2 .co-svc[data-key^="app/"] .co-svc-ico { --pi: var(--ip-link); }
html.ui2 .co-svc[data-key^="other/"] .co-svc-ico { --pi: var(--ip-file-text); }
html.ui2 .co-svc[data-key="tenders"] .co-svc-ico, html.ui2 .co-svc[data-key^="tender"] .co-svc-ico { --pi: var(--ip-briefcase); }
html.ui2 .co-svc.is-ok .co-svc-ico { background: var(--ok-bg) !important; color: var(--ok) !important; }
html.ui2 .co-svc.is-bad .co-svc-ico { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2 .co-svc-body { gap: 2px !important; }
html.ui2 .co-svc-body b { font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; overflow-wrap: anywhere; }
html.ui2 .co-svc-body small { font: 400 12px/16px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; }
html.ui2 .co-svc-st { margin-top: 6px !important; }
html.ui2 .co-svc-note { color: var(--g700) !important; font-size: 12px !important; line-height: 17px; }
html.ui2 .co-svc-actions { margin-top: 10px !important; gap: 8px !important; }
html.ui2 .co-svc-actions .co-btn.sm { padding: 0 12px !important; font-size: 13px !important; }
@media (max-width: 759px) {
  html.ui2 .co-kpis { grid-template-columns: 1fr 1fr !important; }
  html.ui2 #co-admin .co-table { border-collapse: collapse; }
  html.ui2 #co-admin .co-table td { height: auto; padding: 4px 12px !important; }
  html.ui2 #co-admin .co-table tr { border-bottom: 1px solid var(--g200) !important; padding: 8px 0; }
  html.ui2 .co-kbrow { flex-wrap: wrap; }
}

/* ---------- Tendery (#modal-tender) ---------- */
html.ui2 #modal-tender .tender-tab .badge, html.ui2 #modal-tender .tender-tab .ui2-badge { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font: 600 11px/20px "Inter", system-ui, sans-serif; text-align: center; background: var(--g100) !important; color: var(--g700) !important; }
html.ui2 #modal-tender .tender-tab.active .badge { background: var(--b700) !important; color: var(--on-accent, #fff) !important; }
html.ui2 #modal-tender .tender-tab .badge.hidden { display: none !important; }
html.ui2 .t2-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px !important; }
html.ui2 .t2-toolbar .input, html.ui2 #t2-search { height: 36px; min-height: 36px !important; padding: 0 12px !important; font-size: 14px; }
html.ui2 .t2-check { color: var(--g700) !important; font-size: 13px; gap: 8px !important; }
html.ui2 .t2-check input { accent-color: var(--b700) !important; width: 16px; height: 16px; margin: 0; }
html.ui2 #t2-info { color: var(--g500) !important; font-size: 12px; }
html.ui2 #modal-tender .list { display: flex !important; flex-direction: column; gap: 8px !important; }
html.ui2 #modal-tender .list > .tender-row {
  display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px !important; margin: 0 !important; border-radius: 10px !important;
  background: var(--g0) !important; border: 1px solid var(--g200) !important; border-left: 1px solid var(--g200) !important; box-shadow: none !important; color: var(--g900) !important;
}
html.ui2 #modal-tender .list > .tender-row.unread { border-left: 3px solid var(--b500) !important; padding-left: 14px !important; }
html.ui2 #modal-tender .list > .tender-row.selected { background: var(--b50) !important; border-color: var(--b100) !important; }
html.ui2 .tender-row-title { font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; margin: 0 0 6px !important; }
html.ui2 .tender-row-money { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px !important; margin: 0 0 8px !important; font: 600 15px/20px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .tender-row-money .tender-money { font: 600 15px/20px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; font-variant-numeric: tabular-nums; }
html.ui2 .tender-row-money .tender-money.muted { font: 500 13px/20px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; }
html.ui2 .tender-row-money .muted, html.ui2 .tender-row-money .small { color: var(--g500) !important; font-weight: 400; font-size: 13px; }
/* stitky: jedna definice, citelny kontrast v obou motivech */
html.ui2 #modal-tender .pill, html.ui2 .tender-row .pill {
  display: inline-flex !important; align-items: center; height: 22px; padding: 0 9px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important;
  font: 600 11px/14px "Inter", system-ui, sans-serif !important; letter-spacing: .01em; white-space: nowrap; background: var(--g100) !important; color: var(--g700) !important;
}
html.ui2 #modal-tender .pill.ok { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
html.ui2 #modal-tender .pill.warn { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
html.ui2 #modal-tender .pill.danger { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2.ui2-dark #modal-tender .pill.ok { color: var(--ok) !important; }
html.ui2 .t2-why { margin: 0 0 8px !important; padding: 2px 0 2px 10px !important; border-left: 3px solid var(--g300) !important; background: none !important; color: var(--g700) !important; font: 400 13px/19px "Inter", system-ui, sans-serif !important; }
html.ui2 .t2-why-jdeme { border-left-color: var(--ok) !important; } html.ui2 .t2-why-zvazit { border-left-color: var(--warn) !important; } html.ui2 .t2-why-nejdeme { border-left-color: var(--err) !important; color: var(--g500) !important; }
html.ui2 .tender-bullets { margin: 0 0 8px !important; padding-left: 18px; color: var(--g700) !important; font: 400 13px/19px "Inter", system-ui, sans-serif !important; }
html.ui2 div.tender-bullets { padding-left: 0; }
html.ui2 .tender-bullets.pending { font-style: normal !important; color: var(--g500) !important; }
html.ui2 .tender-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px !important; font: 400 12px/16px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; }
html.ui2 .tender-row-meta .muted, html.ui2 .tender-row-meta .small { color: var(--g500) !important; font-size: 12px !important; }
html.ui2 .tender-row-meta .linkbtn, html.ui2 #modal-tender .linkbtn { background: none !important; border: 0 !important; padding: 0 !important; color: var(--b700) !important; font: 500 12px/16px "Inter", system-ui, sans-serif !important; text-decoration: none !important; cursor: pointer; }
html.ui2.ui2-dark #modal-tender .linkbtn { color: var(--bink) !important; }
html.ui2 #modal-tender .linkbtn:hover { text-decoration: underline !important; }
html.ui2 .tender-row-actions { display: flex; align-items: center; gap: 4px !important; flex: none; }
html.ui2 .tender-row-actions .btn { min-height: 36px; color: var(--bink) !important; border-color: var(--b500) !important; background: var(--g0) !important; font-weight: 600 !important; }
html.ui2 .tender-row-actions .btn:hover { background: var(--b50) !important; border-color: var(--b700) !important; }
html.ui2 .tender-row-actions .iconbtn { width: 36px !important; height: 36px !important; min-width: 36px; font-size: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none;
  background: transparent !important; border: 1px solid transparent !important; color: var(--g500) !important; border-radius: 8px !important; --pi: var(--ip-external-link); }
html.ui2 .tender-row-actions .iconbtn:hover { background: var(--g100) !important; color: var(--g900) !important; }
html.ui2 .tender-row-actions .iconbtn[data-act="thread"] { --pi: var(--ip-message-square); color: var(--b700) !important; }
html.ui2 .tender-row-actions .iconbtn[data-act="dismiss"] { --pi: var(--ip-ban); }
html.ui2 .tender-row-actions .iconbtn[data-act="dismiss"]:hover { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2 .tender-row-actions .iconbtn::before { width: 18px; height: 18px; }
/* prehled po Jdeme do toho a detail */
html.ui2 .t2-prep { background: var(--g50) !important; border: 1px solid var(--g200) !important; border-radius: 8px !important; color: var(--g900) !important; font-size: 13px; line-height: 19px; padding: 10px 12px !important; margin: 0 0 8px !important; }
html.ui2 .t2-prep-wait { background: var(--warn-bg) !important; border-color: transparent !important; color: var(--warn-ink) !important; }
html.ui2 .t2-prep-head { font-weight: 600 !important; color: var(--g900); }
html.ui2 .t2-bad { color: var(--err) !important; }
html.ui2 .t2-ask { background: var(--warn-bg) !important; color: var(--warn-ink); border-radius: 6px; }
html.ui2 .t2-detail { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--g200) !important; background: none !important; }
html.ui2 .t2-tab th { color: var(--g500) !important; font-weight: 500 !important; text-align: left; padding-right: 12px; }
html.ui2 .t2-tab td { color: var(--g900) !important; }
html.ui2 .t2-popis { color: var(--g700) !important; background: var(--g50) !important; border: 1px solid var(--g200) !important; border-radius: 8px !important; font-size: 13px; line-height: 19px; }
/* Tendery > Nastaveni */
html.ui2 .tender-cfg-section { border-radius: 10px !important; padding: 16px !important; margin: 0 0 12px !important; }
html.ui2 .tender-cfg-section h4 { margin: 0 0 10px; font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .tender-cfg-section h4 .muted, html.ui2 .tender-cfg-section .muted.small { color: var(--g500) !important; font-weight: 400; font-size: 12px; }
html.ui2 .tender-cfg-section summary { color: var(--g900); font-size: 14px; }
html.ui2 .chip-input { display: flex; flex-wrap: wrap; gap: 6px !important; padding: 8px !important; border-radius: 8px !important; border: 1px solid var(--g300) !important; background: var(--g0) !important; }
html.ui2 .chip-input input { flex: 1 1 200px; height: 30px; min-height: 30px !important; border: 0 !important; box-shadow: none !important; padding: 0 6px !important; background: transparent !important; }
html.ui2 .chip, html.ui2 .chip-input .chip { display: inline-flex !important; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px !important; border-radius: 999px !important; border: 0 !important;
  font: 500 12px/16px "Inter", system-ui, sans-serif !important; background: var(--g100) !important; color: var(--g900) !important; opacity: 1 !important; }
html.ui2 .chip.positive { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
html.ui2 .chip.negative { background: var(--err-bg) !important; color: var(--err) !important; }
html.ui2.ui2-dark .chip.positive { color: var(--ok) !important; }
html.ui2 .chip .chip-x, html.ui2 .chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 !important; padding: 0 !important; border-radius: 50%; background: none !important; border: 0 !important; color: inherit !important; opacity: .65; cursor: pointer; font-size: 14px; line-height: 1; }
html.ui2 .chip .chip-x:hover, html.ui2 .chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent) !important; }
html.ui2 .tender-cfg-readonly .cfg-block { margin: 8px 0; font-size: 13px; color: var(--g900); }
html.ui2 #tender-pane-config .row-2 { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
html.ui2 #tender-pane-config .row-2 .field { flex: 1 1 200px; margin: 0; }
html.ui2 #tender-pane-config .row-2 .field input { height: 36px; padding: 0 12px !important; }
@media (max-width: 759px) {
  html.ui2 #modal-tender .list > .tender-row { flex-direction: column; gap: 10px; }
  html.ui2 .tender-row-actions { width: 100%; }
  html.ui2 .tender-row-actions .btn { flex: 1 1 auto; }
}

/* ---------- Slack (prostredni sloupec) ---------- */
html.ui2 #modal-slack-list #slack-list { min-height: 100%; }
html.ui2 #slack-list > .empty { border: 0 !important; }

/* ---------- Planovac terminu (#planner-sidepanel) ---------- */
html.ui2 .planner-sidepanel { box-shadow: -12px 0 32px rgba(22,28,28,.10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.ui2.ui2-dark .planner-sidepanel { box-shadow: -12px 0 32px rgba(0,0,0,.4) !important; }
html.ui2 .planner-sidepanel .ps-head { border-bottom: 1px solid var(--g200) !important; padding-top: 16px; padding-bottom: 16px; }
html.ui2 .planner-sidepanel .ps-head h3 { font: 600 16px/24px "Inter", system-ui, sans-serif !important; color: var(--g900); }
html.ui2 .planner-sidepanel .ps-head .iconbtn { width: 36px !important; height: 36px !important; margin-right: -6px; }
html.ui2 .pl-jump input[type="date"] { height: 40px; padding: 0 12px !important; background: var(--g0) !important; border: 1px solid var(--g300) !important; color: var(--g900) !important; border-radius: 8px !important; font: 400 14px/20px "Inter", system-ui, sans-serif !important; }
html.ui2.ui2-dark .pl-jump input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
html.ui2 .pl-nav { background: var(--g50) !important; border: 1px solid var(--g200); border-radius: 10px !important; padding: 8px !important; }
html.ui2 .pl-nav-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; border-radius: 8px !important; font-size: 0 !important;
  background: var(--g0) !important; border: 1px solid var(--g300) !important; color: var(--g700) !important; --pi: var(--ip-chevron-left); }
html.ui2 #pl-next { --pi: var(--ip-chevron-right); }
html.ui2 .pl-nav-btn::before { width: 18px; height: 18px; }
html.ui2 .pl-nav-btn:hover:not(:disabled) { background: var(--b50) !important; border-color: var(--b500) !important; color: var(--bink) !important; }
html.ui2 .pl-nav-btn:disabled { opacity: .35 !important; }
html.ui2 .pl-nav-day { font: 600 15px/20px "Inter", system-ui, sans-serif !important; color: var(--g900); }
html.ui2 .pl-nav-free { color: var(--g500) !important; font-size: 12px !important; }
html.ui2 .pl-allday-row { background: var(--g50) !important; border: 1px solid var(--g200) !important; color: var(--g900); }
html.ui2 .pl-slots { gap: 4px !important; max-height: none !important; }
html.ui2 .pl-day-slots { padding: 4px 0 !important; }
html.ui2 .pl-slot { border-radius: 8px !important; font-family: "Inter", system-ui, sans-serif !important; min-height: 36px; transform: none !important; }
html.ui2 .pl-slot.pl-free { background: var(--b50) !important; color: var(--bink) !important; border: 1px solid transparent !important; font: 600 13px/18px "Inter", system-ui, sans-serif !important; font-variant-numeric: tabular-nums; }
html.ui2 .pl-slot.pl-free:hover { background: var(--b100) !important; border-color: var(--b500) !important; color: var(--bink) !important; }
html.ui2 .pl-slot.pl-free.pl-picked { background: var(--b700) !important; border-color: var(--b700) !important; color: var(--on-accent, #fff) !important; }
html.ui2 .pl-slot.pl-busy { background: var(--g50) !important; color: var(--g700) !important; border: 1px solid var(--g200) !important; }
html.ui2 .pl-slot-time { color: var(--g500); opacity: 1 !important; font-variant-numeric: tabular-nums; }
html.ui2 .pl-slot-title { color: var(--g900); }
html.ui2 .pl-slot-loc { color: var(--g500); opacity: 1 !important; }
html.ui2 .planner-hint { color: var(--g500) !important; font-size: 12px !important; line-height: 17px; }
html.ui2 .planner-hint span { color: var(--g700) !important; font-weight: 600; }
html.ui2 .planner-loading, html.ui2 .planner-error { color: var(--g500); opacity: 1 !important; }
html.ui2 .planner-footer { background: var(--g0) !important; border-bottom: 1px solid var(--g200) !important; box-shadow: 0 6px 16px rgba(22,28,28,.08) !important; }
html.ui2 .pf-info strong { color: var(--g900) !important; }
html.ui2 .pf-label { color: var(--g500) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .06em !important; }
html.ui2 #pf-clear { display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0 !important; font-size: 0 !important; border-radius: 6px; color: var(--g500) !important; --pi: var(--ip-x); }
html.ui2 #pf-clear:hover { background: var(--g100) !important; color: var(--g900) !important; }
html.ui2 .pf-options, html.ui2 .pf-check, html.ui2 .pf-radio { color: var(--g900); font-size: 13px; }
html.ui2 .pf-check input, html.ui2 .pf-radio input { accent-color: var(--b700); }
html.ui2 .pf-field input, html.ui2 .pf-recipient input { height: 36px; padding: 0 12px !important; font-size: 14px; }
html.ui2 .pl-slot-actions { background: var(--b50) !important; border: 1px solid var(--b100) !important; }
html.ui2 .pl-actions-info { color: var(--g900); }
html.ui2 .pf-actions { display: flex; flex-wrap: wrap; gap: 8px !important; }
html.ui2 .pf-actions .btn:not(.hidden) { flex: 1 1 auto; min-height: 36px; padding: 0 14px !important; font-size: 13px !important; }

/* ==========================================================================
   Responzivita Spravy firmy (18. 10. 2026): tabulky na mobilu a tabletu jako karty,
   prepinac sekce misto vodorovne listy, jednotne radky skupin a dokumentu.
   Desktop (>= 1100 px) beze zmeny.
   ========================================================================== */
/* prepinac sekce (jen mobil, ui2.js admSwitch) */
html.ui2 .ui2-adm-sw { display: none; }
@media (max-width: 759px) {
  html.ui2 #co-admin .co-nav { display: none !important; }
  html.ui2 .ui2-adm-sw {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 4px 0 18px; padding: 10px 14px;
    background: var(--g0); border: 1px solid var(--g200); border-radius: 12px; color: var(--g900); text-align: left; font: inherit; cursor: pointer;
  }
  html.ui2 .ui2-adm-sw:active { background: var(--g50); }
  html.ui2 .ui2-adm-sw-i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--b50); color: var(--b700); }
  html.ui2.ui2-dark .ui2-adm-sw-i { color: var(--bink); }
  html.ui2 .ui2-adm-sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  html.ui2 .ui2-adm-sw-t b { font: 600 15px/20px "Inter", system-ui, sans-serif; }
  html.ui2 .ui2-adm-sw-t small { font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui2 .ui2-adm-sw > .ui2-svg:last-child, html.ui2 .ui2-adm-sw > svg:last-child { flex: none; color: var(--g500); }
  /* hlavicka sekce: nadpis a hlavni tlacitko v jednom radku, tlacitko 44 px */
  html.ui2 #co-admin .co-section-h { flex-wrap: wrap; gap: 8px 12px; }
  html.ui2 #co-admin .co-section-h > .co-btn { min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; }
}
/* spodni nabidka sekci */
html.ui2 #ui2-admsheet .ui2-sheet-p { max-height: calc(100dvh - 48px); overflow-y: auto; }
html.ui2 #ui2-admsheet button[data-adm] { min-height: 56px; }
html.ui2 #ui2-admsheet button[data-adm].on { background: var(--b50); color: var(--bink); }
html.ui2 #ui2-admsheet button[data-adm].on .ui2-svg, html.ui2 #ui2-admsheet button[data-adm].on svg { color: var(--b700); }
html.ui2.ui2-dark #ui2-admsheet button[data-adm].on .ui2-svg, html.ui2.ui2-dark #ui2-admsheet button[data-adm].on svg { color: var(--bink); }
html.ui2 .ui2-adm-it { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.ui2 .ui2-adm-it b { font: 600 15px/20px "Inter", system-ui, sans-serif; }
html.ui2 .ui2-adm-it small { font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }

/* tabulky jako karty: mobil i tablet (sloupec obsahu je tam uzky, tabulka by pretekala) */
@media (max-width: 1099px) {
  html.ui2 #co-admin .co-table { display: block; width: 100%; border: 0 !important; background: none !important; border-radius: 0; overflow: visible; }
  html.ui2 #co-admin .co-table thead { display: none !important; }
  html.ui2 #co-admin .co-table tbody { display: grid; gap: 8px; }
  html.ui2 #co-admin .co-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
    padding: 14px 16px !important; border: 1px solid var(--g200) !important; border-radius: 12px; background: var(--g0);
  }
  html.ui2 #co-admin .co-table tr:hover td { background: none !important; }
  html.ui2 #co-admin .co-table td { display: block; height: auto !important; padding: 0 !important; border: 0 !important; min-width: 0; line-height: 20px; }
  html.ui2 #co-admin .co-table td.co-c-empty { display: none; }
  html.ui2 #co-admin .co-table td[data-l] { font-size: 13px; color: var(--g500) !important; }
  html.ui2 #co-admin .co-table td[data-l]::before { content: attr(data-l) ": "; color: var(--g500); }
  html.ui2 #co-admin .co-table td[data-l] .co-c-pref { display: none; }
  html.ui2 #co-admin .co-table td[data-l] .co-muted { color: inherit !important; }
  html.ui2 #co-admin .co-table .co-c-act { grid-column: 1 / -1; white-space: normal !important; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  html.ui2 #co-admin .co-table .co-c-act > .co-btn, html.ui2 #co-admin .co-table .co-c-act .co-row > .co-btn { flex: 1 1 auto; min-height: 44px !important; font-size: 14px !important; }
  html.ui2 #co-admin .co-table .co-c-act .co-row { display: flex; gap: 8px; width: 100%; }

  /* Lide: jmeno + email | role ; stav a onboarding ; skupiny ; prihlaseni ; akce */
  html.ui2 #co-admin .co-t-users .co-c-name { grid-column: 1; }
  html.ui2 #co-admin .co-t-users .co-c-name b { font-size: 15px; }
  html.ui2 #co-admin .co-t-users .co-c-name .co-muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui2 #co-admin .co-t-users .co-c-name br { display: none; }
  html.ui2 #co-admin .co-t-users .co-c-role { grid-column: 2; grid-row: 1; align-self: start; }
  html.ui2 #co-admin .co-t-users .co-c-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  html.ui2 #co-admin .co-t-users .co-c-groups, html.ui2 #co-admin .co-t-users .co-c-mail, html.ui2 #co-admin .co-t-users .co-c-ai, html.ui2 #co-admin .co-t-users .co-c-login { grid-column: 1 / -1; }

  /* Zalozni klice: nazev | stav ; klic ; poradi ; akce */
  html.ui2 #co-admin .co-t-tokens .co-c-name { grid-column: 1; }
  html.ui2 #co-admin .co-t-tokens .co-c-state { grid-column: 2; grid-row: 1; align-self: start; text-align: right; }
  html.ui2 #co-admin .co-t-tokens .co-c-key, html.ui2 #co-admin .co-t-tokens .co-c-ord { grid-column: 1 / -1; }
  html.ui2 #co-admin .co-t-tokens .co-c-key code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

  /* Historie: co se stalo | kdy ; kdo (2 radky misto 3 bunek) */
  html.ui2 #co-admin .co-t-audit tbody { gap: 0; border: 1px solid var(--g200); border-radius: 12px; background: var(--g0); overflow: hidden; }
  html.ui2 #co-admin .co-t-audit tr { border: 0 !important; border-bottom: 1px solid var(--g200) !important; border-radius: 0; padding: 10px 16px !important; gap: 2px 12px; background: none; }
  html.ui2 #co-admin .co-t-audit tr:last-child { border-bottom: 0 !important; }
  html.ui2 #co-admin .co-t-audit .co-c-what { grid-column: 1; grid-row: 1; font-size: 14px; overflow-wrap: anywhere; }
  html.ui2 #co-admin .co-t-audit .co-c-date { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 12px; text-align: right; }
  html.ui2 #co-admin .co-t-audit .co-c-who { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--g500) !important; }

  /* Skupiny a dokumenty: text vlevo, akce vzdy vpravo nahore (nikdy pod textem) */
  html.ui2 #co-admin .co-kbrow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; flex-wrap: nowrap !important; }
  html.ui2 #co-admin .co-kbrow > .co-row { flex-wrap: nowrap; gap: 6px; }
  html.ui2 #co-admin .co-kbrow .co-btn.sm { min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; }
}

/* menu Vice: Odhlasit oddelene na konci */
html.ui2 .ui2-more-h.ui2-more-gap { min-height: 16px; padding: 8px 16px 0; }
html.ui2 .more-item.ui2-more-danger, html.ui2 .more-item.ui2-more-danger .more-ico { color: var(--err) !important; }
html.ui2 .more-item.ui2-more-danger .more-arrow { display: none; }

/* Tendry na mobilu: filtry v jednom radku jako cipy (jako AI ukoly), Nastaveni oddelene vpravo; bez sipky zpet (je to zalozka spodni listy) */
@media (max-width: 759px) {
  html.ui2 #modal-tender .tender-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding: 0 0 10px !important; margin: 0 0 12px !important;
    background: none !important; border: 0 !important; border-bottom: 1px solid var(--g200) !important; border-radius: 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.ui2 #modal-tender .tender-tabs::-webkit-scrollbar { display: none; }
  html.ui2 #modal-tender .tender-tab { flex: none !important; width: auto !important; min-height: 40px; padding: 0 14px !important; border: 1px solid var(--g200) !important; border-radius: 999px !important; white-space: nowrap; background: var(--g0) !important; }
  html.ui2 #modal-tender .tender-tab.active { border-color: var(--b500) !important; }
  html.ui2 #modal-tender .tender-tab[data-tab="config"] { margin-left: auto; }
  html.ui2 #modal-tender .modal-head [data-close] { display: none !important; }
}
/* tablet: karty Lidi a klicu ve dvou sloupcich, tlacitka v prirozene sirce */
@media (min-width: 760px) and (max-width: 1099px) {
  html.ui2 #co-admin .co-t-users tbody, html.ui2 #co-admin .co-t-tokens tbody { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  html.ui2 #co-admin .co-table .co-c-act > .co-btn, html.ui2 #co-admin .co-table .co-c-act .co-row > .co-btn { flex: 0 0 auto; min-height: 36px !important; font-size: 13px !important; }
  html.ui2 #co-admin .co-table .co-c-act { align-self: end; }
}
/* Pravidla posty na mobilu: ucet zustane na radku za typem (zkraceny), nezalamuje se na novy radek zacinajici teckou */
@media (max-width: 759px) {
  html.ui2 #modal-settings .ri-main { flex-wrap: wrap; }
  html.ui2 #modal-settings .ri-type { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 60%; }
  html.ui2 #modal-settings .ri-acct { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Uvodni pribeh (Par rad na start) v ui2: karta je svetla (g0), puvodni texty byly pro tmavou kartu a skoro nebyly videt. Fulltest 19. 10. */
html.ui2 .co-card.co-intro .co-intro-p { color: var(--g700); }
html.ui2 .co-card.co-intro .co-ex-bad { color: var(--g700); }
html.ui2 .co-card.co-intro .co-ex small { opacity: 1; color: var(--g500); }
html.ui2 .co-card.co-intro .co-intro-foot { border-top-color: var(--g200); }
html.ui2 .co-card.co-intro .co-dots i:not(.on) { background: var(--g200); }
html.ui2 .co-card.co-intro .co-intro-img:after { background: linear-gradient(180deg, transparent, var(--g0)); }

/* ---------- Slack: seznam, detail, odpoved (19. 10. 2026, redesign podle Schranky a AI ukolu) ---------- */
html.ui2 #slack-list > .sl-item { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 16px !important; cursor: pointer; background: var(--g0) !important; border: 0 !important; border-bottom: 1px solid var(--g200) !important; border-left: 3px solid transparent !important; }
html.ui2 #slack-list > .sl-item:hover { background: var(--g50) !important; }
html.ui2 #slack-list > .sl-item.is-sel { background: var(--b50) !important; border-left-color: var(--b500) !important; }
html.ui2 #slack-list > .sl-item:focus-visible { outline: 2px solid var(--b500); outline-offset: -2px; }
html.ui2 .sl-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: hsl(var(--av-h, 180), 28%, 90%); color: hsl(var(--av-h, 180), 32%, 28%); font: 600 13px/1 "Inter", system-ui, sans-serif; }
html.ui2 .sl-av:empty::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-message-square) center / contain no-repeat; mask: var(--i-message-square) center / contain no-repeat; }
html.ui2 .sl-av-dm:empty::before { -webkit-mask-image: var(--i-user); mask-image: var(--i-user); }
html.ui2 .sl-av-group:empty::before { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); }
html.ui2 .sl-av-dm, html.ui2 .sl-av-group, html.ui2 .sl-av-channel { background: var(--g100); color: var(--g500); }
html.ui2 .sl-av-ai { background: var(--b500); color: #fff; }
html.ui2 .sl-av-ai::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-sparkles) center / contain no-repeat; mask: var(--i-sparkles) center / contain no-repeat; }
html.ui2 .sl-main { min-width: 0; }
html.ui2 .sl-row1 { display: flex; align-items: baseline; gap: 8px; }
html.ui2 .sl-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .sl-time { flex: none; font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 .sl-item.is-new .sl-time { color: var(--b700); font-weight: 600; }
html.ui2 .sl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 .sl-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .sl-st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px/20px "Inter", system-ui, sans-serif !important; background: var(--g100) !important; color: var(--g700) !important; border: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
html.ui2 .sl-st-new { background: var(--b50) !important; color: var(--bink) !important; }
html.ui2 .sl-st-in_progress { background: var(--info-bg) !important; color: var(--info) !important; }
html.ui2 .sl-st-done { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
html.ui2 .sl-prev { margin-top: 6px; font: 400 13px/19px "Inter", system-ui, sans-serif; color: var(--g700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* detail */
html.ui2 #modal-slack-thread #slt-title { font: 600 18px/24px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 #modal-slack-thread #slt-sub { font: 400 13px/18px "Inter", system-ui, sans-serif !important; color: var(--g500) !important; }
html.ui2 #modal-slack-thread .modal-head-left { min-width: 0; }
html.ui2 #modal-slack-thread .modal-body { background: var(--g0) !important; }
html.ui2 #slt-messages { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px !important; max-width: 920px; }
html.ui2 #slt-messages > .loading { color: var(--g500); font-size: 13px; padding: 24px 0; }
html.ui2 .sl-sec-h { font: 600 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); margin-bottom: -8px; }
html.ui2 .sl-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
html.ui2 .sl-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
html.ui2 .sl-msg-head b { font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .sl-msg-head span { font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 .sl-msg-body { margin-top: 2px; font: 400 14px/21px "Inter", system-ui, sans-serif; color: var(--g900); white-space: pre-wrap; overflow-wrap: anywhere; }
html.ui2 .sl-msg-orig .sl-msg-body { padding: 10px 14px; background: var(--g50); border: 1px solid var(--g200); border-radius: 4px 12px 12px 12px; }
html.ui2 .sl-note { font: 400 13px/19px "Inter", system-ui, sans-serif; color: var(--g500); padding: 10px 14px; border: 1px dashed var(--g300); border-radius: 10px; }
html.ui2 .sl-ai { border: 1px solid var(--b100); background: var(--b50); border-radius: 12px; padding: 14px 16px; }
html.ui2 .sl-ai-h { display: flex; align-items: center; gap: 8px; font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--bink); }
html.ui2 .sl-ai-i { width: 18px; height: 18px; background: var(--b700); -webkit-mask: var(--i-sparkles) center / contain no-repeat; mask: var(--i-sparkles) center / contain no-repeat; flex: none; }
html.ui2 .sl-ai-sum { margin: 8px 0 0; font: 400 14px/21px "Inter", system-ui, sans-serif; color: var(--g900); }
html.ui2 .sl-ai-sug { margin-top: 12px; padding: 12px 14px; background: var(--g0); border: 1px solid var(--g200); border-radius: 10px; }
html.ui2 .sl-ai-sug-h { font: 600 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 .sl-ai-sug-t { margin-top: 4px; font: 400 14px/21px "Inter", system-ui, sans-serif; color: var(--g900); white-space: pre-wrap; overflow-wrap: anywhere; }
html.ui2 .sl-ai-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html.ui2 .sl-ai-act .btn, html.ui2 .sl-reply .draft-actions .btn { min-height: 36px !important; height: auto !important; padding: 0 14px !important; border-radius: 8px !important; font: 600 13px/20px "Inter", system-ui, sans-serif !important; }
html.ui2 .sl-ai-act .btn-ghost, html.ui2 .sl-reply .btn-ghost { background: var(--g0) !important; border: 1px solid var(--g300) !important; color: var(--g700) !important; }
html.ui2 .sl-sep { display: flex; align-items: center; gap: 12px; font: 500 12px/16px "Inter", system-ui, sans-serif; color: var(--g500); }
html.ui2 .sl-sep::before, html.ui2 .sl-sep::after { content: ""; flex: 1; height: 1px; background: var(--g200); }
html.ui2 .sl-msg-me .sl-msg-body { color: var(--g900); }
html.ui2 .sl-thinking { border-style: solid; background: var(--g50); }
html.ui2 #slt-slack-reply.sl-reply { margin: 0 24px 16px; max-width: 872px; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid var(--b500) !important; background: var(--g0) !important; }
html.ui2 .sl-reply .draft-head { font: 600 14px/20px "Inter", system-ui, sans-serif !important; color: var(--g900) !important; margin-bottom: 8px; }
html.ui2 .sl-reply textarea { width: 100%; min-height: 88px; padding: 10px 12px !important; border: 1px solid var(--g300) !important; border-radius: 8px !important; background: var(--g0) !important; color: var(--g900) !important; font: 400 14px/21px "Inter", system-ui, sans-serif !important; box-sizing: border-box; }
html.ui2 .sl-reply .draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* spodni lista: pole nahore, tlacitka pod nim (stejne vysoka, nic se neorezava, na mobilu se zalomi) */
html.ui2 #modal-slack-thread .modal-foot { background: var(--g0) !important; border-top: 1px solid var(--g200) !important; padding: 12px 24px !important; }
html.ui2 #modal-slack-thread .cc-reply { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px !important; max-width: 920px; }
html.ui2 #modal-slack-thread #slt-reply { flex: none !important; width: 100%; box-sizing: border-box; min-height: 44px !important; }
html.ui2 #modal-slack-thread .sl-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html.ui2 #modal-slack-thread .sl-actions > button { height: 40px !important; min-height: 40px !important; width: auto !important; min-width: 0 !important; padding: 0 14px !important; flex: none !important; border-radius: 8px !important; font: 600 13px/20px "Inter", system-ui, sans-serif !important; white-space: nowrap; background: var(--g0) !important; border: 1px solid var(--g300) !important; color: var(--g700) !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; }
html.ui2 #modal-slack-thread .sl-actions > button:hover { background: var(--g50) !important; color: var(--g900) !important; }
html.ui2 #modal-slack-thread .sl-actions > #slt-mic { width: 40px !important; padding: 0 !important; }
html.ui2 #modal-slack-thread .sl-actions > #slt-send { color: var(--bink) !important; border-color: var(--b500) !important; }
html.ui2 #modal-slack-thread .sl-actions > #slt-show-reply { background: var(--b700) !important; border-color: var(--b700) !important; color: #fff !important; }
html.ui2 #modal-slack-thread .sl-actions > #slt-show-reply:hover { background: var(--b800) !important; }
html.ui2 #modal-slack-thread .sl-actions > #slt-dismiss { margin-left: auto; }
html.ui2.ui2-dark #modal-slack-thread .sl-actions > #slt-show-reply { color: #0f1214 !important; }
@media (max-width: 759px) {
  html.ui2 #slt-messages { padding: 16px !important; }
  html.ui2 #slt-slack-reply.sl-reply { margin: 0 16px 12px; }
  html.ui2 #modal-slack-thread .modal-foot { padding: 10px 12px !important; }
  html.ui2 #modal-slack-thread .sl-actions > button { flex: 1 1 auto !important; }
  html.ui2 #modal-slack-thread .sl-actions > #slt-mic { flex: none !important; }
  html.ui2 #modal-slack-thread .sl-actions > #slt-dismiss { margin-left: 0; }
}
html.ui2 #modal-slack-thread #slt-status.sl-st { font-size: 11px !important; width: auto !important; min-width: 0 !important; height: 22px; padding: 0 10px !important; text-indent: 0 !important; overflow: visible !important; white-space: nowrap; }
html.ui2 #modal-slack-thread #slt-status.sl-st::before { display: none !important; }
html.ui2 #modal-slack-thread .modal-head-right { display: flex; align-items: center; gap: 8px; flex: none; }
html.ui2 .sl-ai-act .sl-use { background: var(--b700) !important; border: 1px solid var(--b700) !important; color: #fff !important; }
html.ui2 .sl-ai-act .sl-use:hover { background: var(--b800) !important; }
html.ui2.ui2-dark .sl-ai-act .sl-use { color: #0f1214 !important; }