/* Witra – rám portálu podle makety D (design/d/d.css) nad základem app.css. */
:root { --bg: #f1f2f4; --bg-2: #e7e9ec; --line: #e4e6ea; --line-2: #d6d9df; --top: 56px; --task: 34px; --nav: 216px; --nav-c: 68px; --r: 14px }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121315; --bg-2: #191b1e; --line: #2a2d32; --line-2: #383c42 } }
:root[data-theme="dark"] { --bg: #121315; --bg-2: #191b1e; --line: #2a2d32; --line-2: #383c42 }
body { overflow: hidden }
button { color: inherit }

/* mřížka: horní lišta přes celou šířku, menu | obsah, spodní lišta přes celou šířku */
.shell-d { display: grid; grid-template-columns: var(--nav) 1fr; grid-template-rows: var(--top) 1fr var(--task); height: 100vh; height: 100dvh }
html.nav-c .shell-d { grid-template-columns: var(--nav-c) 1fr }

/* horní lišta */
.topd { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0 }
.topd .ham { display: none; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 10px; color: var(--fg-2); cursor: pointer; place-items: center } .topd .ham svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round }
.topd .brand { display: flex; align-items: center; gap: 9px; color: var(--fg); min-width: calc(var(--nav) - 12px) } .topd .brand:hover { text-decoration: none }
.topd .brand i { width: 32px; height: 32px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none } .topd .brand i svg { width: 18px }
.topd .brand b { font-size: 17px; font-weight: 700; letter-spacing: -.01em } .topd .brand small { color: var(--muted); font-size: 11px; margin-left: 2px }
html.nav-c .topd .brand { min-width: 48px } html.nav-c .topd .brand b, html.nav-c .topd .brand small { display: none }
.topd .search { width: 380px; max-width: 40vw; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--muted); cursor: text; white-space: nowrap; overflow: hidden; font: inherit; text-align: left }
.topd .search:hover { border-color: var(--muted) }
.topd .search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex: none } .topd .search span { overflow: hidden; text-overflow: ellipsis; font-size: 13px }
.topd .search kbd { margin-left: auto; font: 11px Inter, system-ui, sans-serif; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; background: var(--surface); white-space: nowrap; flex: none }
.topd .ib { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--fg-2); position: relative; flex: none } .topd .ib:hover { background: var(--surface-2); text-decoration: none }
.topd .ib svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.topd .ib .cnt { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: #fff; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface) } .cnt.bad { background: var(--bad) } .cnt.info { background: var(--info) }
.topd .me { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line); white-space: nowrap }

/* levé menu */
.navd { background: var(--surface); border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; overflow: hidden auto; min-height: 0 }
.navd a, .navd .col button { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--fg-2); white-space: nowrap; font-weight: 500; border: 0; background: transparent; font: inherit; width: 100%; cursor: pointer; text-align: left }
.navd a:hover, .navd .col button:hover { background: var(--surface-2); color: var(--fg); text-decoration: none } .navd a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600 }
.navd svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.navd .sec { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 11px 4px; white-space: nowrap } .navd .sec:first-child { padding-top: 2px }
.navd .col { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px }
html.nav-c .navd span, html.nav-c .navd .sec { display: none } html.nav-c .navd a, html.nav-c .navd .col button { justify-content: center; padding: 10px } html.nav-c .navd .sec + a { margin-top: 10px }
.nav-bg { display: none }

/* obsah */
.work { position: relative; overflow: hidden; min-width: 0 } .page { position: absolute; inset: 0; overflow: auto; padding: 22px 26px 40px }
.page.loading { opacity: .5; transition: opacity .15s .1s }
.page h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em }
.card { border: 0; box-shadow: 0 1px 2px rgba(20,24,33,.05), 0 0 0 1px var(--line) }
.flash { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; margin-bottom: 14px; background: var(--info-soft); color: var(--info); font-weight: 500 }
.flash.ok { background: var(--ok-soft); color: var(--ok) } .flash.warn { background: var(--warn-soft); color: var(--warn) } .flash.bad { background: var(--bad-soft); color: var(--bad) }
.flash .x { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; line-height: 1 }
.err { max-width: 720px; padding-top: 30px } .err h1 { font-size: 26px; margin: 2px 0 8px }

/* spodní lišta */
.botd { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--line); font-size: 12px; overflow: hidden; min-width: 0 }
.botd .tl { color: var(--muted); padding-right: 8px; border-right: 1px solid var(--line); white-space: nowrap } .botd .chips { display: flex; gap: 6px; min-width: 0; overflow: hidden }
.botd .chip { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2); cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font: inherit; color: var(--fg) }
.botd .chip.active { border-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand) } .botd .chip:hover { background: var(--bg-2) } .botd .chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2 }
.botd .sess, .botd .task { display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 24px; border-radius: 7px; background: var(--surface-2); color: var(--fg-2); white-space: nowrap } .botd .task { border: 1px solid var(--line) }
.botd .pb { width: 90px; height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden } .botd .pb i { display: block; height: 100%; background: var(--brand) }
.botd .spin { width: 11px; height: 11px; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: sp 1s linear infinite } @keyframes sp { to { transform: rotate(360deg) } }
.botd .st { color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap }

/* vysouvací detail vpravo */
.panel { position: fixed; top: var(--top); right: 0; bottom: var(--task); width: 600px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -16px 0 40px rgba(20,24,33,.08); transform: translateX(100%); transition: transform .18s; z-index: 20; overflow: auto; padding: 22px 26px; visibility: hidden }
.panel.open { transform: none; visibility: visible }
.panel .x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--muted); border: 0; background: transparent } .panel .x:hover { background: var(--surface-2) } .panel .x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2 }
.panel h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 2px; display: flex; align-items: center; gap: 8px } .panel .sub { color: var(--fg-2); margin-bottom: 14px }
.panel h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px }

/* okna: obnovení po F5 */
.restore { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--sh-2); z-index: 400; font-size: 13px; white-space: nowrap }
.win .wc iframe { width: 100%; height: 100%; border: 0 } .win .wc.part { padding: 14px 16px }

/* paleta (Ctrl K) */
.palette .it svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none } .palette .empty { padding: 14px 16px; color: var(--muted); font-size: 13px }
.palette-bg { position: absolute; inset: 0; z-index: 599 }

/* úzké obrazovky: menu jako vysouvací vrstva, bez oken */
@media (max-width: 900px) {
  :root { --nav: 0px }
  .shell-d, html.nav-c .shell-d { grid-template-columns: 0 1fr }
  .topd { padding-left: 8px; gap: 8px } .topd .ham { display: grid } .topd .brand { min-width: 0 } .topd .brand small { display: none } .topd .me .small { display: none } .topd .me { border: 0; padding-left: 0 }
  .topd .search { width: 38px; max-width: none; padding: 0; justify-content: center; border-radius: 10px } .topd .search span, .topd .search kbd { display: none }
  .navd, html.nav-c .navd { position: fixed; top: var(--top); bottom: 0; left: 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .18s; box-shadow: 8px 0 30px rgba(0,0,0,.15) }
  html.nav-open .navd { transform: none } html.nav-c .navd span, html.nav-c .navd .sec { display: block } html.nav-c .navd a { justify-content: flex-start; padding: 9px 11px }
  .nav-bg { position: fixed; inset: var(--top) 0 0 0; background: rgba(0,0,0,.3); z-index: 39 } html.nav-open .nav-bg { display: block }
  #nav-collapse { display: none }
  .page { padding: 16px 16px 30px } .panel { width: 100vw; left: 0 }
  .botd .tl, .botd #chips { display: none }
}

/* uživatel v horní liště, odhlášení */
.topd a.me { color: var(--fg); border-radius: 10px; padding: 3px 8px 3px 10px } .topd a.me:hover { background: var(--surface-2); text-decoration: none }
.topd .logout { margin: 0 } .topd .logout .ib { border: 0; background: transparent; cursor: pointer; font: inherit }

/* formuláře a sekce (profil, uživatelé) */
.sec-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px } .sec-h h2 { font-size: 15px } .sec-h .muted { font-weight: 400 } .sec-h:first-child { margin-top: 0 }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px } .form-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap }
.field .help { font-size: 11.5px; color: var(--muted); margin-top: 3px } .field input[readonly] { background: var(--surface-2); color: var(--fg-2) }
.field.inline { display: flex; align-items: center; gap: 8px; margin: 10px 0 } .field.inline input { width: auto; height: auto; margin: 0 } .field.inline label { margin: 0; color: var(--fg); font-weight: 400; font-size: 13px }
.badge.b-role { background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line) }
form.inline-form { display: inline } table.t form.inline-form .btn { margin-left: 4px }
.card.narrow { max-width: 720px }
.mono.key { user-select: all; word-break: break-all }
.qr { width: 200px; height: 200px; background: #fff; border-radius: 10px; padding: 8px; border: 1px solid var(--line) } .qr svg { width: 100%; height: 100% }
.code-input { font-size: 24px; letter-spacing: .3em; text-align: center; font-family: ui-monospace, Consolas, monospace; height: 48px !important }
.audit td.when { white-space: nowrap; color: var(--muted) }

/* filtry nad seznamy */
.filters { margin-bottom: 12px; gap: 8px } .filters .fsearch { height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; min-width: 220px }
.filters select.btn { height: 32px }
.field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; resize: vertical }
a.badge:hover { text-decoration: none; filter: brightness(.95) }

/* ===== společný vzor seznamů: lišta filtrů, štítky, hledání, klikací řádky, řazení ===== */
.lbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.lbar .seg a { padding: 6px 12px }
.sbox { position: relative; display: flex; align-items: center; height: 34px; min-width: 260px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface) }
.sbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft) }
.sbox svg { width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; margin-left: 10px; flex: none }
.sbox input { flex: 1; height: 100%; border: 0; background: transparent; padding: 0 8px; font: inherit; color: var(--fg); outline: 0; min-width: 0 }
.sbox .clear { width: 26px; height: 26px; margin-right: 3px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); text-decoration: none; font-size: 16px; line-height: 1 } .sbox .clear:hover { background: var(--surface-2); color: var(--fg) }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 500 } .fchip b { font-weight: 600 }
.fchip .x { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: inherit; text-decoration: none; font-size: 15px; line-height: 1 } .fchip .x:hover { background: rgba(0,0,0,.08) }
.fmenu { position: relative } .fmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--fg-2); font-size: 12.5px; font-weight: 500; user-select: none } .fmenu > summary::-webkit-details-marker { display: none } .fmenu > summary:hover { border-color: var(--muted); color: var(--fg) }
.fmenu .pop { position: absolute; left: 0; top: 36px; z-index: 30; min-width: 260px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-2); padding: 8px 10px 10px } .fmenu .pop label { display: block; font-size: 11px; color: var(--muted); margin: 8px 0 3px; font-weight: 500 } .fmenu .pop select { width: 100%; height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; padding: 0 8px }
.lbar .reset { font-size: 12.5px; color: var(--muted) } .lbar .reset:hover { color: var(--brand) }
.lbar .cnt-l { color: var(--muted); font-size: 12.5px; margin-left: auto }

table.t tr.rl { cursor: pointer } table.t tr.rl td a.rn { color: var(--fg); font-weight: 600 } table.t tr.rl:hover td a.rn { color: var(--brand) } table.t td .sub { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; margin-top: 1px }
table.t td.dotc, table.t th.dotc { width: 18px; padding-right: 0 } .sdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--line-2); vertical-align: middle } .sdot.ok { background: var(--ok) } .sdot.warn { background: var(--warn) } .sdot.bad { background: var(--bad) } .sdot.off { background: var(--muted) }
table.t td.st { white-space: nowrap } table.t td.st.bad { color: var(--bad); font-weight: 600 } table.t td.st.warn { color: var(--warn); font-weight: 600 } table.t td.st.off, table.t td.st.ok { color: var(--muted) }
table.t td.num .z { color: var(--line-2) }
table.t th a.sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px } table.t th a.sort:hover { color: var(--fg) } table.t th a.sort.on { color: var(--brand) } table.t th a.sort i { font-style: normal; font-size: 9px }
table.t td .rowact { visibility: hidden; margin-left: 6px; color: var(--muted) } table.t tr.rl:hover .rowact { visibility: visible } table.t td .rowact svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2 }
table.t tr.rl.sel td { background: var(--brand-soft) }
.card.list { padding: 0 6px }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted) } .empty-state b { display: block; color: var(--fg); font-size: 15px; margin-bottom: 4px }
@media (max-width: 1200px) { table.t .hide-md { display: none } }

/* ===== detail: hlavička se záložkami, nastavení, rizikové akce ===== */
.dhead { margin-bottom: 14px } .dhead .ttl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .dhead .ttl h1 { margin-right: 2px } .dhead .ttl .st { font-size: 13px; font-weight: 600 } .dhead .ttl .st.bad { color: var(--bad) } .dhead .ttl .st.warn { color: var(--warn) } .dhead .ttl .st.ok { color: var(--ok) } .dhead .ttl .st.off { color: var(--muted) }
.dhead .tabs { margin-top: 10px } .dhead .tabs a { padding: 8px 12px } .dhead .tabs a .n { color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 12px }
.settings { display: grid; gap: 14px; max-width: 860px } .settings .card > h2 { margin-bottom: 4px } .settings .card .lead { color: var(--muted); font-size: 12.5px; margin: 0 0 10px }
.danger { border: 1px solid var(--bad-soft); box-shadow: none } .danger h2 { color: var(--bad) } .act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line) } .act:first-of-type { border-top: 0 } .act .t { flex: 1 } .act .t b { display: block } .act .t span { color: var(--muted); font-size: 12.5px }
.ov-list { margin: 0; padding: 0; list-style: none } .ov-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line) } .ov-list li:last-child { border-bottom: 0 } .ov-list li .grow { min-width: 0 } .ov-list li .m { color: var(--muted); font-size: 12px }

/* filtry jako pilulky s nabídkou (široká obrazovka); na úzké sbalené do „Filtry“ */
.seg a .n { margin-left: 5px; color: var(--muted); font-weight: 500; font-size: 11.5px } .seg a.active .n { color: var(--brand) }
.sbox .kh { margin-right: 8px; font: 11px Inter, system-ui, sans-serif; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; color: var(--muted); background: var(--surface) }
.fpill { position: relative } .fpill > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--fg-2); font-size: 12.5px; font-weight: 500; user-select: none; white-space: nowrap } .fpill > summary::-webkit-details-marker { display: none } .fpill > summary i { font-style: normal; font-size: 9px; color: var(--muted) } .fpill > summary:hover { border-color: var(--muted); color: var(--fg) }
.fpill.on > summary { background: var(--brand-soft); border-color: transparent; color: var(--brand); padding-right: 9px; border-top-right-radius: 0; border-bottom-right-radius: 0 } .fpill.on > summary b { font-weight: 600 }
.fpill.on + .fx { display: inline-flex; align-items: center; justify-content: center; height: 30px; width: 26px; margin-left: -8px; border-radius: 0 999px 999px 0; background: var(--brand-soft); color: var(--brand); text-decoration: none; font-size: 15px; line-height: 1 } .fpill.on + .fx:hover { background: var(--brand); color: #fff }
.fpill .pop { position: absolute; left: 0; top: 36px; z-index: 30; min-width: 200px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px }
.fpill .pop .opt { display: block; padding: 7px 10px; border-radius: 7px; color: var(--fg); font-size: 13px; text-decoration: none; white-space: nowrap } .fpill .pop .opt:hover { background: var(--surface-2) } .fpill .pop .opt.sel { background: var(--brand-soft); color: var(--brand); font-weight: 600 }
.fmenu { display: none } .fmenu > summary b { color: var(--brand) }
@media (max-width: 900px) { .fpill, .fx { display: none !important } .fmenu { display: block } .sbox { min-width: 0; flex: 1 } .sbox .kh { display: none } }

/* ===== evidence zákazníka ===== */
.ev-sec { margin-bottom: 26px } .ev-sec .lbar { margin-bottom: 10px }
.fpill.add > summary { background: var(--brand); color: #fff; border-color: var(--brand) } .fpill.add > summary i { color: #fff } .fpill.mini > summary { height: 26px; padding: 0 9px; font-size: 12px } .fpill .pop.edit { min-width: 280px; padding: 8px 12px 12px } .fpill .pop.edit label { display: block; font-size: 11px; color: var(--muted); margin: 8px 0 3px } .fpill .pop.edit input:not([type=checkbox]), .fpill .pop.edit select { width: 100%; height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; padding: 0 8px }
td.nowrap { white-space: nowrap } td.nowrap .fpill { display: inline-block; vertical-align: middle }
.reveal.shown { font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; background: var(--brand-soft); color: var(--brand); border-color: transparent; user-select: all } .reveal .cnt { margin-left: 6px; font-size: 10.5px; opacity: .7 }
.doc-text { line-height: 1.6; max-width: 900px } .doc-text h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line) } .doc-text h3:first-child { margin-top: 0 } .doc-text h4 { font-size: 13px; font-weight: 600; margin: 10px 0 2px } .doc-text p { margin: 4px 0 8px } .doc-text ul, .doc-text ol { margin: 4px 0 8px; padding-left: 22px } .doc-text code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px }
.doc-edit { line-height: 1.5; font-size: 13px; min-height: 420px }
.upload { margin-bottom: 12px } .upload .drop { position: relative; border: 2px dashed var(--line-2); border-radius: var(--r); padding: 18px; text-align: center; color: var(--fg-2); transition: .12s } .upload .drop.over { border-color: var(--brand); background: var(--brand-soft) } .upload .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100% } .upload .drop label { display: block; pointer-events: none } .upload .drop label .m { display: block; font-size: 12px; color: var(--muted); margin-top: 3px } .upload .drop .picked { margin-top: 6px; pointer-events: none }
.upload .field label.xs { font-size: 11px; margin: 0 0 3px }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px } .gallery .ph { display: block; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--fg-2); font-size: 11.5px; text-decoration: none } .gallery .ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover } .gallery .ph span { display: block; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .gallery .ph:hover { box-shadow: 0 0 0 2px var(--brand) }
details.trash { margin-top: 10px } details.trash > summary { cursor: pointer; list-style: none } details.trash > summary::-webkit-details-marker { display: none }

/* ===== dialogy (modální okno uprostřed pracovní plochy) ===== */
.modal-bg { position: fixed; inset: 0; background: rgba(28,27,26,.45); backdrop-filter: blur(2px); display: grid; place-items: start center; padding: 64px 16px 32px; z-index: 1000; overflow: auto }
.modal { width: 540px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-win); padding: 0; margin-bottom: 48px; animation: mi .12s ease-out } .modal.wide { width: 780px } @keyframes mi { from { transform: translateY(-6px); opacity: 0 } }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0 } .modal .mh h2 { font-size: 16px; flex: 1; margin: 0 } .modal .mh .x { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 20px; line-height: 1 } .modal .mh .x:hover { background: var(--surface-2); color: var(--fg) } .modal .mh .mback { flex: none; margin-left: -6px }
.modal .mb { padding: 8px 18px 18px } .modal .mb .lead { color: var(--muted); font-size: 12.5px; margin: 0 0 10px } .modal .mb .form-actions { margin-top: 16px } .modal.loading .mb { opacity: .5 }
.modal.confirm .mb p { margin: 4px 0 6px; line-height: 1.5 } .modal.confirm .form-actions { justify-content: flex-end } .modal.danger .mh h2 { color: var(--bad) } .modal.danger .btn.primary { background: var(--bad); border-color: var(--bad) }
.modal .flash { margin-bottom: 12px }
.mform .form-row { grid-template-columns: 1fr 1fr }
.modal .mb .settings { gap: 0; max-width: none } .modal .mb .card { box-shadow: none; padding: 0; border: 0; background: transparent } .modal .mb .card > h2 { display: none }

/* ===== soubory: průzkumník ===== */
.explorer { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start }
.ftree { background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); padding: 10px 8px; position: sticky; top: 0; max-height: calc(100vh - 220px); overflow: auto; font-size: 13px }
.ftree .fhead { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ftree ul { list-style: none; margin: 0; padding: 0 } .ftree ul ul { padding-left: 14px }
.ftree .fr { display: flex; align-items: center; gap: 2px } .ftree .tg { width: 18px; height: 24px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; display: inline-grid; place-items: center; flex: none; transition: transform .12s } .ftree .tg.open { transform: rotate(90deg) }
.ftree .fr a { flex: 1; display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 7px; color: var(--fg-2); text-decoration: none; min-width: 0 } .ftree .fr a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ftree .fr a em { font-style: normal; margin-left: auto; color: var(--muted); font-size: 11px }
.ftree .fr a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } .ftree .fr a:hover { background: var(--surface-2); color: var(--fg) } .ftree li.cur > .fr a { background: var(--brand-soft); color: var(--brand); font-weight: 600 }
.ftree .tbin { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 8px 6px 26px; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none } .ftree .tbin svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2 } .ftree .tbin em { font-style: normal; margin-left: auto; font-size: 11px }
.ftree .fquota { padding: 8px 8px 2px; color: var(--muted); font-size: 11px }
.fmain { min-width: 0 }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; flex-wrap: wrap } .crumbs a { color: var(--fg-2); font-weight: 500 } .crumbs a:last-of-type { color: var(--fg); font-weight: 600 } .crumbs .sep { color: var(--line-2) }
.seg.vsw a { padding: 5px 9px; font-size: 14px; line-height: 1 }
.fpill .pop .opt.danger { color: var(--bad); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit } .fpill .pop form { margin: 0 }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.tile { position: relative; display: block; background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 8px; color: var(--fg); text-decoration: none; transition: .12s } .tile:hover { box-shadow: 0 0 0 1px var(--line-2), 0 6px 18px rgba(20,24,33,.08); text-decoration: none; transform: translateY(-1px) } .tile.sel { box-shadow: 0 0 0 2px var(--brand) }
.tile .th { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden } .tile .th img { width: 100%; height: 100%; object-fit: cover; display: block } .tile .th svg { width: 44px; height: 44px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.tile.folder .th { background: var(--brand-soft) } .tile.folder .th svg { stroke: var(--brand); width: 52px; height: 52px }
.tile .th .ext { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--fg-2); box-shadow: 0 0 0 1px var(--line) }
.tile.t-pdf .th .ext { background: #c92a2a; color: #fff; box-shadow: none } .tile.t-doc .th .ext { background: #2b6cb0; color: #fff; box-shadow: none } .tile.t-sheet .th .ext { background: #178a4c; color: #fff; box-shadow: none } .tile.t-slides .th .ext { background: #c7760a; color: #fff; box-shadow: none }
.tile .tn { margin-top: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .tile .tm { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tile input.sel { position: absolute; top: 12px; left: 12px; width: 16px; height: 16px; z-index: 2; opacity: 0; cursor: pointer } .tile:hover input.sel, .tile input.sel:checked { opacity: 1 }
.selbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 13px } .selbar[hidden], .upload-actions[hidden] { display: none }
.upload .picked { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px } .upload .picked:empty { display: none }
.ptile { position: relative; background: var(--surface-2); border-radius: 10px; padding: 6px } .ptile .th { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--surface); display: grid; place-items: center; overflow: hidden } .ptile .th img { width: 100%; height: 100%; object-fit: cover; display: block } .ptile .th .ext { font-style: normal; font-size: 12px; font-weight: 700; color: var(--fg-2) } .ptile .th img + .ext { display: none }
.ptile .tn { margin-top: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ptile .tm { font-size: 10.5px; color: var(--muted) } .ptile input { width: 100%; margin-top: 4px; height: 26px; font-size: 11.5px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--fg) }
.ptile .px { position: absolute; top: 2px; right: 2px; z-index: 2; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; box-shadow: 0 0 0 1px var(--line) } .ptile .px:hover { background: var(--bad); color: #fff }
.upload .drop { padding: 14px }
.ico { width: 15px; height: 15px; vertical-align: -3px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ftarget { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 0 } .fopt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px } .fopt:hover { background: var(--surface-2) } .fopt.dis { opacity: .4; cursor: not-allowed } .fopt svg { width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 1.8 } .fopt input { margin: 0 }
/* prohlížeč souboru v dialogu */
.modal:has(.viewer) { width: min(1100px, calc(100vw - 32px)) }
.viewer .vbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px } .viewer .vinfo { display: flex; align-items: center; gap: 8px; min-width: 0 } .viewer .vinfo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw }
.viewer .vbody { background: var(--surface-2); border-radius: 10px; min-height: 200px; display: grid; place-items: center; overflow: hidden } .viewer .vbody img { max-width: 100%; max-height: calc(100vh - 240px); display: block; object-fit: contain } .viewer .vbody iframe { width: 100%; height: calc(100vh - 240px); border: 0; background: #fff }
.viewer .vtext { width: 100%; margin: 0; padding: 14px; max-height: calc(100vh - 240px); overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; background: var(--surface); border-radius: 10px; text-align: left; justify-self: stretch } .viewer .vedit { width: 100%; min-height: calc(100vh - 300px); font-size: 12.5px; line-height: 1.5 } .viewer form.mform { width: 100%; padding: 10px }
.viewer .vother { display: flex; align-items: center; gap: 14px; padding: 30px } .viewer .vother svg { width: 56px; height: 56px; stroke: var(--muted); fill: none; stroke-width: 1.5 }
.viewer .vmeta { margin-top: 8px }
@media (max-width: 900px) { .explorer { grid-template-columns: 1fr } .ftree { position: static; max-height: 200px } }
/* nástrojová lišta nad obsahem složky, pruh nahrávání, přetažení, kontextová nabídka */
.ftool { display: flex; align-items: center; min-height: 40px; margin-bottom: 10px; padding: 5px 8px; background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line) }
.ftool .ft-folder, .ftool .ft-sel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100% } .ftool.selecting .ft-folder { display: none }
.ftool .ft-sel { color: var(--brand) } .ftool .ft-sel[hidden] { display: none }
.ftool .ft-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px } .ftool .ft-hint { margin-left: auto; white-space: nowrap } .ftool .btn svg { width: 14px; height: 14px }
.ftool .btn.danger:hover { background: var(--bad-soft) }
.upload { margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--brand) } .upload[hidden] { display: none }
.upload .uhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .upload .picked { margin-top: 8px }
.fmain { position: relative; border-radius: 12px } .fmain.over::after { content: "Pustit = nahrát do této složky"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--brand); background: rgba(155,0,48,.06); border: 2px dashed var(--brand); border-radius: 12px; pointer-events: none; z-index: 5 }
tr.frow.sel td { background: var(--brand-soft) } tr.frow { user-select: none }
.ftree .tbin.cur { background: var(--brand-soft); color: var(--brand); font-weight: 600; border-radius: 7px }
.ctxmenu { position: fixed; z-index: 1100; min-width: 200px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--sh-2); padding: 4px; font-size: 13px }
.ctxmenu .ct { padding: 6px 10px 4px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px }
.ctxmenu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; border-radius: 7px; color: var(--fg); cursor: pointer; font: inherit } .ctxmenu button:hover { background: var(--surface-2) } .ctxmenu button.danger { color: var(--bad) }
dl.kv.props { grid-template-columns: 130px 1fr; font-size: 12.5px; gap: 5px 10px; margin: 0 0 12px } dl.kv.props .key { word-break: break-all; user-select: all; cursor: text }
.viewer .vdetails { margin-top: 8px } .viewer .vdetails > summary { cursor: pointer; list-style: none } .viewer .vdetails > summary::-webkit-details-marker { display: none } .viewer .vdetails dl { margin-top: 8px }
/* kontextová nabídka (menu.js) */
.ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px } .ctxmenu button.strong { font-weight: 600 } .ctxmenu button:focus-visible { outline: 0; background: var(--surface-2) }
.cm-btn { visibility: hidden; border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 0 7px; font-size: 16px; line-height: 22px; cursor: pointer; float: right; margin-left: 6px }
.cm-btn:hover, .cm-btn:focus-visible { background: var(--surface-2); color: var(--fg) }
[data-menu]:hover .cm-btn, .cm-btn:focus-visible { visibility: visible }
@media (hover: none) { .cm-btn { visibility: visible } }
td.cm { width: 1%; white-space: nowrap; text-align: right; padding-left: 0 }
.toast { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 1200; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--sh-2); transition: opacity .3s } .toast.out { opacity: 0 }
.win .wh .wback { border: 0; background: transparent; color: var(--muted); border-radius: 6px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; margin-right: 2px } .win .wh .wback:disabled { opacity: .3; cursor: default } .win .wh .wback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2 }
.win .wc.loading { opacity: .55; transition: opacity .15s }

/* zkratky v levém menu a hvězdička */
.navd .scw { position: relative } .navd .scw.dragging { opacity: .4 } .navd a.sc.off { opacity: .45 } .navd a.sc.off span { text-decoration: line-through }
.star { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; cursor: pointer; padding: 0 }
.star svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8 } .star:hover { background: var(--surface-2); color: var(--fg) }
.star.on { color: #c98a00 } .star.on svg { fill: currentColor }

/* výběr více řádků a hromadné akce (bulk.js) */
table.t th.ck, table.t td.ck { width: 26px; padding-right: 0 } td.ck input, th.ck input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand) }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: -2px -2px 6px; background: var(--brand-soft); border-radius: 8px; position: sticky; top: 0; z-index: 3 }
.bulkbar[hidden] { display: none } .bulkbar form { display: inline } .bulkbar b { margin-right: 6px }
tr.rl.sel td { background: var(--brand-soft) }
/* zařízení */
td.disk { min-width: 90px } td.disk .bar { margin-top: 3px; max-width: 110px }
.dhead .dsub { margin-top: 2px } .hmenu .cm-btn { visibility: visible; float: none; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; height: 28px; width: 32px }
label.radio { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; cursor: pointer; font-weight: 400 } label.radio input { accent-color: var(--brand) }
/* ikona typu zařízení s tečkou připojení (zelená online, šedá offline, přerušovaně bez agenta) */
table.t th.dicoc, table.t td.dicoc { width: 30px; padding-right: 0 }
.dico { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); color: var(--fg-2); vertical-align: middle; flex: none }
.dico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.dico i { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); background: var(--muted) }
.dico.on { color: var(--fg) } .dico.on i { background: var(--ok) }
.dico.off { opacity: .75 } .dico.none:not(.on):not(.down) i { display: none } .dico.none { background: transparent; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px } .dico.down i { background: var(--bad) }
.dico.lg { width: 34px; height: 34px; border-radius: 9px } .dico.lg svg { width: 20px; height: 20px } .dico.lg i { width: 13px; height: 13px }
td.ip { white-space: nowrap } td.ip .sub { font-size: 11.5px }
.dhead .conn { font-size: 13px; font-weight: 600; color: var(--muted) } .dhead .conn.on { color: var(--ok) }
td.st.quiet { color: var(--muted); font-weight: 400 } td.st.off { color: var(--muted) }
/* stránkování */
.pager { display: flex; gap: 4px; justify-content: center; align-items: center; margin: 12px 0; font-size: 13px }
.pager a, .pager b { min-width: 30px; padding: 4px 9px; border-radius: 7px; text-align: center } .pager a { color: var(--fg-2) } .pager a:hover { background: var(--surface-2); text-decoration: none }
.pager b { background: var(--brand); color: #fff } .pager .gap { color: var(--muted); padding: 0 4px }
/* hledání v pilulce filtru */
.fpill .pop .psearch { width: 100%; margin: 0 0 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--fg); font: inherit; font-size: 13px }

/* pobočka u IP v seznamu zařízení */
td.ip .sub.site { color: var(--fg-2); font-family: Inter, system-ui, sans-serif; font-size: 12px } td.ip .sub.site.out { color: var(--warn); font-weight: 600 }

/* přehled zařízení: živé metriky a grafy */
.card.live .lstate { font-size: 12px; color: var(--muted) } .card.live .lstate.on { color: var(--ok); font-weight: 600 } .card.live .lstate.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; animation: livep 2s infinite }
@keyframes livep { 50% { opacity: .35 } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px }
.kpis .kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0 }
.kpis .kpi .l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em } .kpis .kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 } .kpis .kpi .v.sm { font-size: 14px; font-weight: 600; margin: 6px 0 4px }
.kpis .kpi .d { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .kpis .kpi .bar { margin-top: 6px }
.kpi .spark { width: 100%; height: 28px; display: block } .spark polyline { fill: none; stroke: var(--brand); stroke-width: 1.5; vector-effect: non-scaling-stroke }
.disks { display: grid; gap: 6px; margin-top: 12px } .disks .dk { display: grid; grid-template-columns: 70px minmax(80px, 260px) 1fr; gap: 10px; align-items: center }
.procs { margin-top: 12px } .procs summary { cursor: pointer; font-weight: 600; font-size: 13px }
.charts { gap: 18px 14px; margin-top: 4px } .charts .chart { height: auto }
.chart .ch-h { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 4px } .chart .ch-max { color: var(--muted); font-size: 11.5px }
.chart .lg { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); font-size: 11.5px } .chart .lg i { width: 10px; height: 3px; border-radius: 2px; background: currentColor }
.chart .ch-b { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) } .chart svg { display: block; width: 100%; height: 110px }
.chart .grid { stroke: var(--line); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke }
.chart .ln { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round } .chart .area { stroke: none; opacity: .14 }
.chart .s1 { color: var(--brand); stroke: var(--brand); fill: var(--brand) } .chart .s2 { color: var(--warn); stroke: var(--warn); fill: var(--warn) } .chart .s3 { color: var(--info); stroke: var(--info); fill: var(--info) }
.chart .lg.s1, .chart .lg.s2, .chart .lg.s3 { fill: none; stroke: none }
.chart .ln.s2 { stroke-dasharray: 3 2; opacity: .8 }
.chart .hits rect { fill: transparent } .chart .hits rect:hover { fill: var(--fg); opacity: .06 }
.chart .ch-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px }
.chart .ch-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12.5px }

/* inventář (záložka Hardware) */
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: start }
.invs .sec-h { flex-wrap: wrap } .invs dl.kv { margin-bottom: 8px }
.invg { border-top: 1px solid var(--line); padding: 7px 0 } .invg summary { cursor: pointer; padding: 2px 0 } .invg dl.kv { margin: 8px 0 4px 14px }
dd.warnv { color: var(--bad); font-weight: 600 }
@media (max-width: 700px) { .inv { grid-template-columns: 1fr } }
label.radio.dis { opacity: .5; cursor: not-allowed }

/* pruh v klidu (disk, paměť): modrá; varování / kritické přebírá .warn / .bad */
.bar i.calm { background: var(--info) }
/* okamžitý popisek grafu (chart.js) */
.chart .ch-cur { position: absolute; inset: 0; pointer-events: none } .chart .ch-cur[hidden] { display: none }
.chart .ch-cur .vl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg); opacity: .35 }
.chart .ch-cur .pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 2px solid var(--surface); background: currentColor }
.chart .ch-cur .pt.s1 { color: var(--brand) } .chart .ch-cur .pt.s2 { color: var(--warn) } .chart .ch-cur .pt.s3 { color: var(--info) }
.chart .ch-cur .tip { position: absolute; top: 4px; margin-left: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.12); border-radius: 8px; padding: 5px 8px; font-size: 11.5px; white-space: nowrap; display: grid; gap: 1px; opacity: .92 }
.chart .ch-cur .tip.own { opacity: 1; z-index: 2 } .chart .ch-cur .tip.left { transform: translateX(calc(-100% - 20px)) }
.chart .ch-cur .tt { color: var(--muted) } .chart .ch-cur .tv { display: flex; align-items: center; gap: 5px } .chart .ch-cur .tv i { width: 8px; height: 3px; border-radius: 2px; background: currentColor }
.chart .ch-cur .tv.s1 i { color: var(--brand) } .chart .ch-cur .tv.s2 i { color: var(--warn) } .chart .ch-cur .tv.s3 i { color: var(--info) } .chart .ch-cur .tv b { margin-left: auto; padding-left: 8px }
.chart .ch-b { cursor: crosshair }

/* volba z několika možností (přepínač / zaškrtávátko + název + popis) – jednotně v celém portálu */
label.choice { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; padding: 9px 12px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-weight: 400; background: var(--surface) }
label.choice input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer }
label.choice > span { display: grid; gap: 1px; min-width: 0 } label.choice b { font-size: 13px; font-weight: 600 } label.choice small { font-size: 12px; color: var(--muted); line-height: 1.4 }
label.choice b em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 6px }
label.choice:hover { border-color: var(--line-2) } label.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) }
label.choice.dis { opacity: .55; cursor: not-allowed } label.choice.dis input { cursor: not-allowed }

/* změny hardwaru */
.card.hwalert { margin-bottom: 14px; border-left: 4px solid var(--warn) } .card.hwalert.info { border-left-color: var(--info) }
ul.hwch { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px } ul.hwch li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.sdot.info { background: var(--info) }
/* sloupcový graf */
.chart rect.cb { stroke: none } .chart rect.cb.s1 { fill: var(--brand) } .chart rect.cb.s3 { fill: var(--info) } .chart rect.cb.s2 { fill: var(--warn) } .chart rect.anom { fill: var(--bad) }
.kpi .v.bad { color: var(--bad) } .tabs a .n.bad { color: var(--bad); font-weight: 600 }
/* Teď: bez živých dat zašedlé, při připojování točítko uprostřed */
.card.live { position: relative }
.card.live.stale .kpis, .card.live.stale .disks { filter: grayscale(1); opacity: .45; transition: opacity .2s }
.card.live .lwait { display: none } .card.live.connecting .lwait { display: flex; position: absolute; left: 0; right: 0; top: 46px; bottom: 0; align-items: center; justify-content: center; gap: 10px; font-weight: 600; color: var(--fg-2); z-index: 2; pointer-events: none }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite } @keyframes spin { to { transform: rotate(360deg) } }
/* inventář: dlouhé hodnoty (cesty, příkazy) se zalomí */
dl.kv dd { min-width: 0; overflow-wrap: anywhere } dl.kv dt { overflow-wrap: anywhere }
.chart svg path.ln { fill: none }

/* volba jako odkaz (výběr způsobu v dialogu) */
a.choice.link { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); text-decoration: none }
a.choice.link:hover { border-color: var(--brand); background: var(--brand-soft) } a.choice.link b { font-size: 14px } a.choice.link small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px }
a.choice.link .ci { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700 }
.secretbox { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; font-size: 12.5px }
input.codein { font-size: 20px; letter-spacing: .15em; text-transform: uppercase; max-width: 260px }
/* značky událostí v grafu a další barvy řad (disky) */
.chart line.mk { stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; stroke: var(--info) } .chart line.mk.warn { stroke: var(--warn) } .chart line.mk.bad { stroke: var(--bad); stroke-dasharray: none }
.chart .ch-cur .tev { color: var(--fg-2); max-width: 320px; white-space: normal; border-top: 1px solid var(--line); padding-top: 2px; margin-top: 2px }
.chart .s4 { color: #2f855a; stroke: #2f855a; fill: #2f855a } .chart .s5 { color: #6b46c1; stroke: #6b46c1; fill: #6b46c1 } .chart .s6 { color: #b7791f; stroke: #b7791f; fill: #b7791f }
.chart .ch-cur .pt.s4 { color: #2f855a } .chart .ch-cur .pt.s5 { color: #6b46c1 } .chart .ch-cur .pt.s6 { color: #b7791f }
.chart .ch-cur .tv.s4 i { color: #2f855a } .chart .ch-cur .tv.s5 i { color: #6b46c1 } .chart .ch-cur .tv.s6 i { color: #b7791f }
.chart .lg.s4, .chart .lg.s5, .chart .lg.s6 { fill: none; stroke: none }
/* záložka Historie */
.hist-label { min-width: 140px; text-align: center } .hist-charts { display: grid; gap: 16px } .hist-charts .chart svg { height: 140px }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--fg-2); text-decoration: none }
.chip:hover { border-color: var(--line-2); text-decoration: none } .chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600 }
.hist-bar input[type=date] { padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--fg); font: inherit; font-size: 12.5px }
ul.hist-events { max-height: 420px; overflow: auto }

/* ===== Nástroje zařízení (procesy, služby, historie příkazů) ===== */
.btn.primary.danger { background: var(--bad); border-color: var(--bad); color: #fff } .btn.primary.danger:hover { filter: brightness(.92) }
.tool .lbar .sbox { min-width: 220px }
.tcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); cursor: pointer; white-space: nowrap } .tcheck input { margin: 0 }
.tool-wait { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 42px 14px; color: var(--muted) }
.grant { display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface) }
.grant.on { border-color: var(--ok); background: var(--ok-soft) }
.grant .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); transform: translateY(-1px) }
.tool-foot { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line) }
.tool .card.list.loading-soft { opacity: .55; transition: opacity .2s }
table.tsort th[data-sort] { cursor: pointer; user-select: none } table.tsort th[data-sort]:hover { color: var(--fg) }
table.tsort th[data-sorted="asc"]::after { content: " ▲"; font-size: 9px } table.tsort th[data-sorted="desc"]::after { content: " ▼"; font-size: 9px }
.tg-group tr { cursor: pointer }
pre.cmd-out { max-height: 46vh; overflow: auto; margin: 4px 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere }
.t .sub.path { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px } a.lnk { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px }
.script-grid { gap: 14px }
.script-form textarea.code { width: 100%; min-height: 240px; font: 13px/1.5 ui-monospace, Consolas, monospace; tab-size: 4; resize: vertical }
.seg.radio-seg label { display: inline-flex; cursor: pointer } .seg.radio-seg input { position: absolute; opacity: 0; pointer-events: none }
.seg.radio-seg label span { padding: 6px 12px; font-size: 12.5px; color: var(--fg-2); border-right: 1px solid var(--line-2) } .seg.radio-seg label:last-child span { border-right: 0 }
.seg.radio-seg input:checked + span { background: var(--brand-soft); color: var(--brand); font-weight: 600 } .seg.radio-seg label:hover span { background: var(--surface-2) }
.seg.radio-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px }
pre.cmd-out.err { border-color: var(--bad); background: var(--bad-soft) }
.t tr.sel td { background: var(--brand-soft) }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13.5px } .crumbs .sep { color: var(--muted) } .crumbs a { color: var(--fg-2) }
.files-bar .go-path { min-width: 300px } .files-bar .go-path input { padding: 0 10px } .tfind { height: 34px; width: 150px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 10px; background: var(--surface); color: var(--fg); font: inherit }
.ficon { text-align: center; font-size: 15px } .files-t tr.up td { color: var(--muted) }
.upbar { margin: 10px 0 0; height: 22px; position: relative; border-radius: 6px; background: var(--surface-2); overflow: hidden } .upbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand-soft); transition: width .2s } .upbar span { position: relative; padding: 0 8px; line-height: 22px }

/* terminál v okně a přehrávač záznamu */
.win.term-win .wc { display: flex; flex-direction: column; padding: 0; overflow: hidden }
.term-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface) }
.term-top .term-st.ok { color: var(--ok) } .term-top .term-st.bad { color: var(--bad) } .term-top .term-st.warn { color: var(--warn) }
.term-box { flex: 1; min-height: 0; background: #1b1716; padding: 4px 0 0 6px } .term-box .xterm { height: 100% }
.seg.sm a { padding: 3px 9px; font-size: 12px }
.chip.sess { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums } .chip.sess .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }
.term-intro .btn { white-space: nowrap }
.btn[hidden] { display: none !important }
.win.shot-win .wc { display: flex; flex-direction: column; padding: 0; overflow: hidden }
.shot-box { flex: 1; min-height: 0; overflow: auto; background: var(--surface-2); display: flex; align-items: flex-start; justify-content: center } .shot-box.loading img { opacity: .5 }
.shot-box img { max-width: 100%; height: auto; cursor: zoom-in; display: block } .shot-box.full img { max-width: none; cursor: zoom-out }
.spin.xs { width: 10px; height: 10px; border-width: 2px; display: inline-block; vertical-align: -1px }
.lbar-act { margin-left: auto; display: inline-flex; gap: 6px }

.ev-org { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis }

/* dialog Vyřešit: pole podle volby Opraveno / V pořádku / Nesledovat (bez skriptu) */
form[data-outcome="fixed"] [data-oc-show]:not([data-oc-show~="fixed"]), form:has(input[name=outcome][value=fixed]:checked) [data-oc-show]:not([data-oc-show~="fixed"]) { display: none }
form[data-outcome="accept"] [data-oc-show]:not([data-oc-show~="accept"]), form:has(input[name=outcome][value=accept]:checked) [data-oc-show]:not([data-oc-show~="accept"]) { display: none }
form[data-outcome="ignore"] [data-oc-show]:not([data-oc-show~="ignore"]), form:has(input[name=outcome][value=ignore]:checked) [data-oc-show]:not([data-oc-show~="ignore"]) { display: none }
.exc-t .sub { white-space: normal }

.muted-row td { opacity: .62 }

/* dialog Přiřadit osobě: pole podle druhu (bez skriptu) */
form[data-assign] [data-ak-show] { display: none }
form[data-assign]:has(input[name=kind][value=shared]:checked) [data-ak-show="shared"], form[data-assign]:has(input[name=kind][value=loan]:checked) [data-ak-show="loan"] { display: block }
form[data-assign]:has(input[name=kind][value=shared]:checked) [data-ak-hide="shared"] { display: none }

/* zaškrtávátka a přepínače ve formuláři: přirozená velikost (pole .field mají jinak šířku 100 %) */
.field input[type=checkbox], .field input[type=radio] { width: 15px; height: 15px; padding: 0; accent-color: var(--brand); flex: none }

/* zpráva uživatelům: pole „platí do“ jen při volbě „do data a času…“ */
form:has(select[name=valid]) .msg-until { display: none } form:has(select[name=valid] option[value=datum]:checked) .msg-until { display: inline-block }
.msg-time > .field { flex: 1 1 220px; min-width: 0 }

/* Sítě zákazníka: karty sítí, sondy, počty nalezených */
.net-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px }
.net-card dl.kv { grid-template-columns: 90px 1fr }
.net-card .sec-h { margin-bottom: 6px }
.net-probe { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px } .net-probe + .net-probe { margin-top: 3px }
.net-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line) }
.net-counts a { color: var(--fg-2); text-decoration: none } .net-counts a:hover { color: var(--brand) } .net-counts b { color: var(--fg) }
.net-actions { gap: 8px; margin-top: 10px }

/* Úloha sondy: pole podle druhu (bez JS), skupiny Upozornění a Lokální log */
.pj .k, .pj .k-every, .pj .k-logpath, .pj .k-log, .pj .k-loss { display: none }
.pj[data-kind="ping"] .k-ping, .pj[data-kind="tcp"] .k-tcp, .pj[data-kind="http"] .k-http,
.pj:has(select[name=kind] option[value=ping]:checked) .k-ping, .pj:has(select[name=kind] option[value=tcp]:checked) .k-tcp, .pj:has(select[name=kind] option[value=http]:checked) .k-http { display: block }
.pj .row.k-http { display: none } .pj[data-kind="http"] .row.k-http, .pj:has(select[name=kind] option[value=http]:checked) .row.k-http { display: flex }
.pj .field.inline.k-ping, .pj .field.inline.k-http { display: none }
.pj[data-kind="ping"] .field.inline.k-ping, .pj:has(select[name=kind] option[value=ping]:checked) .field.inline.k-ping,
.pj[data-kind="http"] .field.inline.k-http, .pj:has(select[name=kind] option[value=http]:checked) .field.inline.k-http { display: flex }
.pj:has(input[name=frequent]:checked):is([data-kind="ping"], :has(select[name=kind] option[value=ping]:checked)) .k-every { display: block }
.pj:has(input[name=frequent]:checked):is([data-kind="ping"], :has(select[name=kind] option[value=ping]:checked)) .k-interval { display: none }
.pj:has(input[name=frequent]:checked):is([data-kind="ping"], :has(select[name=kind] option[value=ping]:checked)) .k-loss { display: block }
.pj .k-loss-help { display: none } .pj:has(input[name=frequent]:checked) .k-loss-help { display: inline }
.pj:has(select[name=log] option[value=witra]:checked) .k-log-witra, .pj:has(select[name=log] option[value=public]:checked) .k-log-public, .pj:has(select[name=log] option[value=custom]:checked) .k-log-custom { display: block }
.pj:has(select[name=log] option[value=custom]:checked) .k-logpath { display: block }
.pj:has(select[name=log] option[value=""]:checked) .k-logdays { display: none }
.pj-box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px 4px; margin: 12px 0 } .pj-box legend { padding: 0 6px; font-weight: 600; font-size: 12.5px; color: var(--fg-2) }
.pj-body { max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all; background: var(--surface-2); padding: 8px; border-radius: var(--r-sm) }

/* Průvodce čtení hodnot a přístup k zařízení: pole přihlášení podle druhu (bez JS) */
.vw .vw-acc, .vw .vw-user, .vw .vw-hdr { display: none }
.vw:has(select[name=acc] option[value=basic]:checked) .vw-acc, .vw:has(select[name=acc] option[value=bearer]:checked) .vw-acc, .vw:has(select[name=acc] option[value=header]:checked) .vw-acc { display: flex }
.vw:has(select[name=acc] option[value=basic]:checked) .vw-user, .vw:has(select[name=acc] option[value=header]:checked) .vw-hdr { display: block }
.vw-table { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm) }
.vw-table input { padding: 4px 6px; font-size: 12.5px }

/* Popis nalezeného zařízení */
.disc-desc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px }
.note-mark { color: var(--muted) }

/* fieldset se ze zásady nezúží pod obsah – v dialogu by široká tabulka vyjela z okna */
.mform fieldset { min-width: 0 }
.modal.wide:has(.vw) { width: 1000px }
.vw-table td.vw-src { max-width: 230px; overflow-wrap: anywhere }
/* vypnuté tlačítko musí být vidět (např. Spustit sken teď bez sondy) */
.btn:disabled { opacity: .45; cursor: not-allowed }
/* graf z Chart::svg: výška podle obsahu (nadpis, plocha, osa), jinak osa přeteče do dalšího prvku */
div.chart { height: auto; margin-bottom: 12px }

/* Přidat úlohu – výběr druhu */
.jc .jc-values, .jc .jc-new, .jc .jc-scan { display: none }
.jc:has(input[name=druh][value=sken]:checked) .jc-scan { display: block }
.jc:has(input[name=druh][value=hodnoty]:checked) .jc-values { display: block }

/* Skeny v kartě sítě */
.net-card .sec-h .chip { font-size: 11.5px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); background: var(--surface-2) }
.net-scan { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line) } .net-scan:first-of-type { border-top: 0 }
.net-scan .sdot { margin-top: 6px } .net-scan .grow { min-width: 0 } .net-scan .sub { display: block; margin-top: 1px }
.t tr.grp td { background: var(--surface-2); font-size: 13px; padding-top: 8px; padding-bottom: 8px }
/* dlaždice hodnot (čtení hodnot): název nahoře, hodnota velká; okraj podle prahu */
.vtiles { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch }
.vtile { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--fg); text-decoration: none }
.vtile:hover { border-color: var(--fg-2) }
.vtile span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px }
.vtile b { font-size: 16px; font-weight: 650; white-space: nowrap } .vtile b small { font-size: 12px; font-weight: 500; color: var(--fg-2) }
.vtile.bad { border-color: var(--bad) } .vtile.bad b { color: var(--bad) } .vtile.warn { border-color: var(--warn) } .vtile.off { opacity: .65 }
/* menu Sondy – pohled podle zařízení */
.mon-dev { padding: 12px 16px; border-bottom: 1px solid var(--line) } .mon-dev:last-child { border-bottom: 0 }
.mon-dev .mh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.mon-dev .mh .nm { font-weight: 650; font-size: 15px }
.mon-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px } .mon-row > .l { width: 70px; flex: none; font-size: 12px; color: var(--muted); padding-top: 4px }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--fg); text-decoration: none; margin: 0 6px 6px 0 }
.chk:hover { border-color: var(--fg-2) } .chk .r { color: var(--fg-2) } .chk.bad { border-color: var(--bad) } .chk.bad .r { color: var(--bad) } .chk.warn { border-color: var(--warn) } .chk.off { opacity: .6 }
@media (max-width: 700px) { .mon-row { flex-direction: column; gap: 4px } .mon-row > .l { width: auto; padding: 0 } }
/* štítky kontrol a dlaždice hodnot: jako tlačítka – při najetí podbarvit, nepodtrhávat */
a.vtile:hover, a.chk:hover { text-decoration: none; background: var(--surface-2) }
/* drobečková navigace se Zpět (stránka úlohy, hodnoty) */
.crumbs { gap: 10px; align-items: center; margin-bottom: 10px } .crumbs .small a { color: var(--fg-2) } .crumbs .small a:hover { color: var(--brand) }
.mon-job { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0 7px 18px; border-top: 1px dashed var(--line) } .mon-job:first-of-type { border-top: 0 }
.mon-job .sdot { margin-top: 6px } .mon-job .nm { font-weight: 600 }
.vtiles.sm .vtile { min-width: 96px; padding: 4px 9px } .vtiles.sm .vtile b { font-size: 14px }
/* výběr zařízení (partials/pick_device): filtry nahoře, výsledky jako karty */
.pick { display: flex; flex-direction: column; gap: 8px }
.pick-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center } .pick-f select, .pick-f input { min-width: 0 } .pick-f .pick-q { flex: 1 1 200px } .pick-f .pick-org { flex: 1 1 220px }
.pick-r { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; padding: 1px }
.pick-i { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--fg); cursor: pointer; text-decoration: none }
.pick-i:hover { background: var(--surface-2); text-decoration: none } .pick-i:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) }
.pick-i input[type=radio] { flex: none; margin: 0 } .pick-i .pick-n { flex: 1; min-width: 0; display: flex; flex-direction: column } .pick-i .pick-n .sub { font-size: 12px; color: var(--muted) }
.pick-i .chip { flex: none } .chip.on { background: var(--brand-soft); color: var(--brand); border-color: transparent }
/* menu Sondy – pohled Podle sondy: karta na počítač, barevné záhlaví, úlohy jako řádky */
.pcard { margin-bottom: 14px; overflow: hidden }
.pcard-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--brand-soft); border-bottom: 1px solid var(--line) }
.pcard-h .pname { font-weight: 700; font-size: 16px; color: var(--fg) } .pcard-h .pname:hover { color: var(--brand); text-decoration: none }
.pcard-h .pon { color: var(--ok); font-weight: 600; font-size: 13px } .pcard-h .poff { color: var(--muted); font-weight: 600; font-size: 13px }
.pjobs td { vertical-align: top } .pjobs .pj-st { width: 110px; white-space: nowrap } .pjobs tr.pj-vals td { border-top: 0; padding-top: 0 }
/* stav v textu (span.st): stejné barvy jako stav v tabulce a hlavičce zařízení */
span.st { font-weight: 600; white-space: nowrap } span.st.bad { color: var(--bad) } span.st.warn { color: var(--warn) } span.st.ok { color: var(--ok) } span.st.info { color: var(--info) } span.st.off { color: var(--muted) }
.card.list.pcard { padding: 0 } .pcard .pjobs td:first-child { padding-left: 16px } .pcard .pjobs td:last-child { padding-right: 16px }
.pick-f input, .pick-f select { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit } .pick-f input:focus, .pick-f select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand) }
.pick-i input[type=radio] { width: 15px; height: 15px; accent-color: var(--brand) }

/* Přidat úlohu – kam hodnoty patří: výběr existujícího / pole nového zařízení podle přepínače */
.jc .jc-exist, .jc .jc-new { display: none }
.jc:has(input[name=kam][value=existujici]:checked) .jc-exist { display: block }
.jc:has(input[name=kam][value=novy]:checked) .jc-new { display: flex }
label.choice.sm { padding: 6px 10px } label.choice.sm span b { font-weight: 600 }
/* Podle sondy: úloha = tbody (řádek úlohy + hodnoty) – jedno zvýraznění, čára jen mezi úlohami */
table.t.pjobs tbody tr:hover td { background: transparent } table.t.pjobs tbody.pj:hover td { background: var(--surface-2) } table.t.pjobs tbody.pj:hover a.rn { color: var(--brand) }
table.t.pjobs tbody.pj tr td { border-bottom: 0 } table.t.pjobs tbody.pj tr:last-child td { border-bottom: 1px solid var(--line) } table.t.pjobs tbody.pj:last-child tr:last-child td { border-bottom: 0 }
/* Zákazník → Sítě: seznam sítí, vybraná síť rozbalená */
.nets { margin-bottom: 4px } .nets .chip { font-size: 11.5px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); background: var(--surface-2); margin-left: 4px }
.nets tr.net-open > td { background: var(--bg-2); padding-top: 6px; padding-bottom: 12px } .nets tr.net-open:hover > td { background: var(--bg-2) }
/* stažení agenta (partials/agent_download) */
.agent-dl.box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--bg-2); margin: 4px 0 8px }
.agent-steps { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--fg-2); line-height: 1.5 } .agent-steps li { margin: 2px 0 }

/* stažení agenta: dlaždice podle systému (ikona, název, 64bit) */
.os-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 6px 0 }
.os-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; padding: 14px 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--fg); text-decoration: none }
.os-tile:hover { background: var(--surface-2); border-color: var(--brand); text-decoration: none }
.os-tile svg { width: 34px; height: 34px; fill: var(--brand) } .os-tile b { font-size: 14px } .os-tile span { font-size: 12px; color: var(--muted) }
.os-item { display: flex; flex-direction: column; align-items: center; max-width: 220px }
.os-info { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center } .os-info summary { cursor: pointer; list-style: none } .os-info summary::-webkit-details-marker { display: none } .os-info summary:hover { color: var(--brand) }
.os-info p { margin: 4px 0 0; color: var(--fg-2); line-height: 1.45 }