/* hero.css — Шапки-баннеры всех экранов, графики, «Сегодня», иконки, происшествия. Порядок подключения файлов задан в app/web.py (CSS_FILES) и важен для каскада. */
/* уже 1400px (ноутбук 1366/1280): заголовок и правая зона в первой строке, четыре плитки в ряд под ними — иначе пять вкладок «Персонала» не влезают */
@media (max-width:1400px){.pg-hero,.hero{grid-template-columns:minmax(200px,1fr) auto}.pg-hero .pg-hero-l,.hero .pg-hero-l{grid-column:1;grid-row:1}.pg-hero .pg-hero-r,.hero .pg-hero-r{grid-column:2;grid-row:1}.pg-hero .pg-stats,.hero .pg-stats{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){.pg-hero,.hero{grid-template-columns:1fr;gap:14px}.pg-hero .pg-hero-r,.hero .pg-hero-r{grid-column:1;grid-row:auto;align-items:flex-start}.pg-hero .pg-stats,.hero .pg-stats{grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.pg-title{font-size:28px}}
@media print{.pg-hero,.hero{box-shadow:none;background:#fff;color:#000;border:1px solid #ccc}.pg-scroll{max-height:none;overflow:visible}}

/* ---- шапки-баннеры на всех экранах ---- */
.hero{margin-bottom:16px}
.hero .pg-hero-l{min-width:220px}
.pst.click{cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pst.click:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.pst.click.active{background:#fff;color:var(--brand);border-color:#fff}
.pst.click.active .v,.pst.click.active .l,.pst.click.active .s{color:var(--brand)}
.pst.click.active.ok .v{color:var(--ok)}.pst.click.active.bad .v{color:var(--bad)}.pst.click.active.warn .v{color:var(--warn)}
.pst .s .ok{color:#BBF7D0}.pst .s .bad{color:#FECACA}.pst .s .warn{color:#FDE68A}
.pst.click.active .s .ok{color:var(--ok)}.pst.click.active .s .bad{color:var(--bad)}.pst.click.active .s .warn{color:var(--warn)}
.pst .meter.ok i,.pst .meter.bad i,.pst .meter.warn i{background:#fff}
.pst.click.active .meter{background:var(--muted-soft)}.pst.click.active .meter i{background:var(--brand)}
.pst:empty{display:none}
.hero .pg-stats:empty{display:none}
.hero .pg-hero-r:empty{display:none}
.hero .hero-field{color:rgba(255,255,255,.85);font-size:13px;display:inline-flex;align-items:center;gap:8px}
.hero .search{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.hero .search::placeholder{color:rgba(255,255,255,.6)}
.hero .search:focus{outline:2px solid #fff;border-color:transparent}

/* ---- графики ---- */
.ch-box{padding:6px 16px 4px}
svg.ch{display:block;max-width:100%;height:auto;overflow:visible}
.ch-grid{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3}
.ch-ay{font-size:11px;fill:var(--ink3);text-anchor:end}
.ch-ax{font-size:12px;fill:var(--ink2);text-anchor:middle}.ch-ax.cur{fill:var(--brand);font-weight:700}
.ch-lb{font-size:12.5px;fill:var(--ink);text-anchor:end;font-weight:600}
.ch-val{font-size:11px;fill:var(--ink2);text-anchor:middle;font-weight:600;opacity:0;animation:ch-fade .4s var(--ease) forwards}
.ch-hv{font-size:11.5px;fill:var(--ink2);font-weight:700;opacity:0;animation:ch-fade .4s var(--ease) forwards}
.ch-cur{fill:var(--brand-soft);opacity:.7}
.ch-hl{fill:var(--ink);opacity:0;transition:opacity var(--dur) var(--ease)}.ch-hl.on{opacity:.05}
.ch-bar{transform-box:fill-box;transform-origin:bottom center;animation:ch-grow .6s var(--ease) both}
.ch-hbar{transform-box:fill-box;transform-origin:left center;animation:ch-grow-x .6s var(--ease) both}
.ch-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ink2);padding:6px 0 8px;justify-content:center}
.ch-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ch-tip{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 24px rgba(15,23,42,.12);padding:8px 12px;font-size:12.5px;color:var(--ink2);pointer-events:none;min-width:140px}
.ch-tip .t{font-weight:700;color:var(--ink);margin-bottom:4px}
.ch-tip div{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ch-tip div b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.ch-tip div i{display:inline-block;width:9px;height:9px;border-radius:2px}
.ch-tip .x{margin-top:4px;color:var(--ink3);display:block}
.ch-donuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.ch-donut{display:flex;align-items:center;gap:12px}
.ch-ring-bg{fill:none;stroke:var(--muted-soft);stroke-width:14}
.ch-arc{fill:none;stroke-width:14;stroke-linecap:butt;animation:ch-arc .9s var(--ease) both}
.ch-dv{font-size:20px;font-weight:800;fill:var(--ink);text-anchor:middle;letter-spacing:-.02em}
.ch-dl{font-size:10px;fill:var(--ink3);text-anchor:middle;text-transform:uppercase;letter-spacing:.06em}
.ch-dleg{font-size:12.5px;color:var(--ink2);min-width:0}
.ch-dleg .ttl{font-weight:700;color:var(--ink);margin-bottom:4px;font-size:13.5px}
.ch-dleg div{display:flex;align-items:center;gap:6px;padding:1px 0}
.ch-dleg div b{margin-left:auto;padding-left:10px;color:var(--ink);font-variant-numeric:tabular-nums}
.ch-dleg i{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none}
.ch-dleg .foot{color:var(--ink3);font-size:12px;margin-top:4px;display:block;white-space:normal}
@keyframes ch-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ch-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ch-fade{to{opacity:1}}
@keyframes ch-arc{from{stroke-dasharray:0 10000}}
@media (prefers-reduced-motion:reduce){.ch-bar,.ch-hbar,.ch-arc,.ch-val,.ch-hv{animation:none;opacity:1}}
.card .hd .r.lnk{margin-left:auto;font-size:12.5px}
.db-tbl{border-top:1px solid var(--line2)}
/* ---- сводка «Сегодня»: компактнее ---- */
.legend-box.inner{margin:0 20px 8px;font-size:13px;color:var(--ink2);background:var(--surface2);border-radius:10px;padding:10px 14px;line-height:1.5}
.svc-compact .soon.live{padding:12px 14px}
.svc-compact .soon p,.svc-compact .soon .own{display:none}
.svc-compact .soon h4{font-size:14px;margin-bottom:2px}
.svc-compact .soon .nums{margin:8px 0 6px;gap:6px}
.svc-compact .soon .nums div{padding:6px 4px}
.svc-compact .soon .nums b{font-size:15px}
.svc-compact .soon .st{margin-top:4px;font-size:12px}
.svc-compact .soon .st .pill{display:none}
.svc{margin:22px 0 12px}
@media (max-width:900px){.ch-donuts{grid-template-columns:1fr}}

/* ---- «Сегодня»: визуальный итог и группы внимания ---- */
.facts{padding:6px 0 4px}
.fact{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:9px 20px;align-items:start;border-bottom:1px solid var(--line2)}
.fact:last-child{border-bottom:0}
.fact.go{cursor:pointer}.fact.go:hover{background:var(--surface2)}
.fact .fk{font-size:12.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;padding-top:3px}
.fbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--muted-soft)}
.fbar i{display:block;height:100%;min-width:3px;transform-origin:left;animation:ch-grow-x .6s var(--ease) both}
.fbar i.ok,.fleg i.ok,.fc i.ok{background:var(--ok)}.fbar i.bad,.fleg i.bad{background:var(--bad)}.fbar i.warn,.fleg i.warn{background:var(--warn)}.fbar i.brand,.fleg i.brand{background:var(--brand)}.fbar i.mut,.fleg i.mut{background:#94A3B8}
.fleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--ink2)}
.fleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:0}
.fleg b{color:var(--ink)}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fc{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12.5px;background:var(--surface2);color:var(--ink2);border:1px solid var(--line2)}
.fc b{color:var(--ink)}
.fc.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.fc.ok b{color:var(--ok)}
.fc.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}.fc.bad b{color:var(--bad)}
.fc.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}.fc.warn b{color:var(--warn)}
.fc.brand{background:var(--brand-soft);color:var(--brand-dark);border-color:transparent}.fc.brand b{color:var(--brand-dark)}
.fc.muted{color:var(--ink3)}
.fmore{display:flex;align-items:center;gap:14px;padding:10px 20px 4px;font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line2)}
.fmore .meta{margin:0;padding:0;border:0}
.prose{padding:6px 20px 12px}
.prose p{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.prose b{font-weight:800;color:var(--brand)}
.ag{border-bottom:1px solid var(--line2)}.ag:last-child{border-bottom:0}
.agh{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;user-select:none}
.agh:hover{background:var(--surface2)}
.agh .ic{width:28px;height:28px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:14px;flex:none}
.agh b{font-size:14px}
.agh .pill{font-variant-numeric:tabular-nums}
.agh .agd{flex:1;min-width:0;font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agh .arr{color:var(--ink3);transition:transform var(--dur) var(--ease)}
.ag.open .agh .arr{transform:rotate(180deg)}
.agl{display:none;padding:0 0 6px;background:var(--surface2)}
.ag.open .agl{display:block}
.agl .it{padding:8px 20px 8px 36px}
.agl .it+.it{border-top:1px solid var(--line2)}
.agl .it b{font-size:13.5px}.agl .it span{font-size:12.5px}

/* ---- иконки ---- */
.ico{width:18px;height:18px;flex:none;vertical-align:-4px}
.nav button .n{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;flex:none}
.nav button .n .ico{width:17px;height:17px;vertical-align:0}
.btn .ico{width:15px;height:15px;margin-right:6px;vertical-align:-3px}
.soon h4 .ic .ico,.mini h4 .ic .ico,.agh .ic .ico{width:16px;height:16px;vertical-align:0}
#btn-import [data-ico]{display:inline-flex;align-items:center}

/* ---- происшествия ---- */
.inc-list{display:grid;gap:10px}
.inc{background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:12px 16px;cursor:pointer;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.inc:hover{box-shadow:0 6px 20px rgba(11,18,32,.10);transform:translateY(-1px)}
.inc.closed{opacity:.8}
.inc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inc-h b{font-size:14.5px}
.inc-place{color:var(--ink2);font-size:13.5px}
.inc-d{margin-top:6px;font-size:13.5px;color:var(--ink);line-height:1.45}
.inc-f{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink2)}
.inc-text{white-space:pre-wrap;font-family:inherit;font-size:13.5px;line-height:1.5;background:var(--surface2);border-radius:10px;padding:12px 14px;margin:10px 0;color:var(--ink)}
.dlg.wide{width:min(760px,100%)}


/* ---- полоса внутренних вкладок под шапкой (решение Эмина 09.09: вкладки не в шапке, а отдельной полосой со счётчиками) ---- */
.tabstrip{display:flex;gap:2px;margin:-4px 0 14px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.tabstrip::-webkit-scrollbar{display:none}
.tabstrip button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 9px;font-size:14px;font-weight:600;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.tabstrip button:hover{color:var(--ink);background:var(--surface2);border-radius:8px 8px 0 0}
.tabstrip button.on{color:var(--brand);border-bottom-color:var(--brand)}
.tabstrip .n{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface2);color:var(--ink3);font-variant-numeric:tabular-nums}
.tabstrip .n.bad{background:var(--bad-soft);color:var(--bad)}.tabstrip .n.warn{background:var(--warn-soft);color:var(--warn)}.tabstrip .n.ok{background:var(--ok-soft);color:var(--ok)}
.tabstrip button.on .n{background:var(--brand-soft);color:var(--brand)}.tabstrip button.on .n.bad{background:var(--bad-soft);color:var(--bad)}
@media (max-width:700px){.tabstrip button{padding:9px 10px;font-size:13px}}
.tabstrip .strip-r{margin-left:auto;display:flex;gap:8px;align-items:center;padding:2px 0 6px}
.tabstrip .strip-r .pg-nav b{min-width:130px}
.fact .fbd{min-width:0}

/* ТБ и ОТ: прогресс по замечаниям и чек-лист в карточке предписания */
.sfp{display:inline-flex;align-items:center;gap:8px;min-width:96px}
.sfp i{flex:1;height:6px;border-radius:3px;background:var(--line2);position:relative;overflow:hidden;display:block;min-width:40px}
.sfp i{width:auto!important}
.sfp i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0);background:var(--warn);border-radius:3px}
.sfp.ok i::before{background:var(--ok)}
.sfp b{font:600 12px/1 var(--mono);color:var(--ink2)}
.sfp.ok b{color:var(--ok)}
.sfh{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:14px}
.sfh .sfp{margin-left:auto}
.sfl{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.sfl li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);font-size:13.5px}
.sfl.ed li{cursor:pointer}
.sfl.ed li:hover{border-color:var(--brand)}
.sfl li.done{opacity:.72}
.sfl li.done .tx{text-decoration:line-through;text-decoration-color:var(--ink3)}
.sfl .bx{flex:none;width:18px;height:18px;border:1.5px solid var(--ink3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;margin-top:1px}
.sfl li.done .bx{background:var(--ok);border-color:var(--ok)}
.sfl .tx small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.dnote.ok{border-color:var(--ok);background:var(--ok-soft,#e3f3e8)}