/* barkadmin app-shell + общие компоненты админки. Цвета/радиусы/шрифты — только токены brand.css. */

/* ---- App-shell ---- */
.bark-app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.bark-sidebar{align-self:start}
.bark-content{min-width:0;padding:32px 40px 72px}
html,body{margin:0;min-height:100%;background:var(--bg)}
a{text-decoration:none;color:inherit}
*{box-sizing:border-box}

/* ---- Navigation/data loading ---- */
html[data-nav-pending="1"] .bark-content{cursor:progress}
.bark-route-progress[data-loading="false"]::after{animation:none;transform:translateX(-120%)}

/* Region refresh keeps its geometry and last good data while work is in flight. */
.bark-region-loading{position:relative;min-height:116px}
.bark-region-loading table,.bark-region-loading .pager,.bark-region-loading .ph{opacity:.38}
.bark-region-indicator{position:absolute;z-index:9;top:12px;right:16px;display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;border:1px solid var(--accent-line);border-radius:var(--radius-control);background:var(--surface);box-shadow:var(--shadow-card);color:var(--accent);font-size:12px;font-weight:700}
.bark-region-error{margin:-4px 0 12px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--bad) 28%,transparent);border-radius:var(--radius-control);background:var(--bad-soft);color:var(--bad);font-size:12px;font-weight:600}

/* ---- Sidebar футер: theme-switch + пользователь ---- */
.sb-user{display:flex;align-items:center;gap:9px;font-size:13px}
.sb-ava{position:relative;overflow:hidden;width:28px;height:28px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:11px}
.sb-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb-uname{flex:1;min-width:0;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Шапка контента (eyebrow + заголовок + тулбар) ---- */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.ptitle{font-family:var(--sans);font-weight:700;font-size:28px;line-height:1.15;color:var(--ink);margin:0;letter-spacing:0}
.ptools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ---- Тулбар-контролы ---- */
/* единая Bark-высота 40px для контролов тулбара — один ряд, без «прыжков» */
.scopeb,.back,.depf,.datenav,.freshb{height:40px;display:inline-flex;align-items:center;border-radius:var(--radius-control)}
.scopeb{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);padding:0 12px}
.back{font-size:13px;font-weight:600;color:var(--ink2);background:var(--surface);border:1px solid var(--line);padding:0 14px}
.back:hover{background:var(--chip)}
.depf{border:1px solid var(--line);background:var(--surface);color:var(--ink2);padding:0 12px;font:600 13px var(--sans);cursor:pointer;max-width:240px}
.depf:hover{border-color:var(--accent-line)}
.datenav{gap:2px;background:var(--surface);border:1px solid var(--line);padding:0 4px}
.navbtn{min-width:32px;height:32px;padding:0 8px;border:0;background:transparent;border-radius:var(--radius-control);cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.navbtn:hover{background:var(--chip);color:var(--ink2)} .navbtn.off{color:var(--faint);pointer-events:none} .navbtn svg{width:17px;height:17px}
.datebox{position:relative;display:inline-flex;align-items:center;padding:0 8px;font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap}
.datebox input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;border:0}
.freshb{font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);padding:0 12px}
.freshb.stale{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}

/* ---- KPI-карточки ---- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border-radius:var(--radius-panel);padding:16px 20px;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.card.hero{background:var(--kpi-soft);border-color:var(--accent-line)}
.k{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .card.hero .k{color:var(--accent);opacity:.8}
.v{font-family:var(--mono);font-weight:600;font-size:30px;margin-top:8px;color:var(--ink);letter-spacing:0} .card.hero .v{color:var(--accent)}

/* ---- Панели/графики ---- */
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:16px}
.grid2>.panel,.twocols>.panel{min-width:0}
.bark-content .twocols{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.panel{background:var(--surface);border-radius:var(--radius-panel);padding:20px;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.ph{font-family:var(--sans);font-weight:700;font-size:15px;margin-bottom:16px;color:var(--ink);letter-spacing:0}
.hours{display:flex;align-items:flex-end;gap:4px;height:160px}
.hcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.hbar{width:100%;min-height:3px;border-radius:5px 5px 3px 3px}
.chrow{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13.5px}
.chrow .nm{width:90px;flex:none;font-weight:600;color:var(--ink2)}
.chrow .tr{flex:1;height:16px;background:var(--chip);border-radius:6px;overflow:hidden}
.chrow .fl{height:100%;background:var(--accent);border-radius:6px}
.rtpanel{margin-bottom:16px}
.rthead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.rthead .ph{margin-bottom:0}
.rtsummary{display:flex;align-items:baseline;gap:8px;flex:none;padding:6px 10px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;color:var(--accent)}
.rtsummary span{font-size:11px;font-weight:700;color:var(--muted)}
.rtsummary b{font-family:var(--mono);font-size:13px}
.rtlinechart{position:relative;height:220px;margin-top:2px}
.rtlineview{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rtgrid{stroke:var(--line);stroke-width:1;stroke-dasharray:5 8;vector-effect:non-scaling-stroke}
.rtarea{fill:url(#rtArea)}
.rtlinepath{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--accent) 20%,transparent));vector-effect:non-scaling-stroke}
.rtpoint{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 34%,transparent);cursor:default;padding:0}
.rtpoint.is-current{width:18px;height:18px;margin:-9px 0 0 -9px;outline:3px solid var(--accent-line);background:var(--info)}
.rtpoint:hover,.rtpoint:focus-visible{z-index:5;outline:3px solid var(--accent-line)}
.rttip{position:absolute;left:50%;bottom:20px;min-width:190px;display:flex;flex-direction:column;gap:4px;transform:translateX(-50%) translateY(4px);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-pop);font:600 12px var(--sans);color:var(--ink2);text-align:left;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.rttip b{font-size:12.5px;color:var(--ink)}
.rttip span{white-space:nowrap;color:var(--muted)}
.rtpoint:hover .rttip,.rtpoint:focus-visible .rttip{opacity:1;transform:translateX(-50%) translateY(0)}
.rtpoint.edge-left .rttip{left:-3px;transform:translateY(4px)}
.rtpoint.edge-left:hover .rttip,.rtpoint.edge-left:focus-visible .rttip{transform:translateY(0)}
.rtpoint.edge-right .rttip{left:auto;right:-3px;transform:translateY(4px)}
.rtpoint.edge-right:hover .rttip,.rtpoint.edge-right:focus-visible .rttip{transform:translateY(0)}
.rtaxis{display:flex;gap:0;margin-top:2px;padding:0 1px}
.rtaxisday{flex:1;min-width:0;text-align:center;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}
.rtaxisday.is-current{color:var(--accent)}
.rtlegend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--faint)}

/* ---- Таблицы ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:10px 10px} td{padding:11px 10px} tbody tr{border-top:1px solid var(--line)}
.num{text-align:right;font-family:var(--mono);font-size:13px} th.r{text-align:right}
tbody tr.clk{cursor:pointer} tbody tr.clk:hover{background:var(--surface-2)}
th.srt{cursor:pointer;user-select:none} th.srt:hover{color:var(--accent)}
.mlink{color:inherit} tr.clk:hover .mlink{color:var(--accent)}
/* аватары менеджеров (фото из managers.photoUrl, фолбэк — инициалы) */
.mcell{display:flex;align-items:center;gap:8px;font-weight:600}
.av{position:relative;overflow:hidden;width:28px;height:28px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-family:var(--sans);font-weight:700;font-size:10.5px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av.av-lg{width:34px;height:34px;font-size:13px}
/* полоска активного времени в строке домена (под числом) */
.dbar{display:block;height:4px;border-radius:3px;background:var(--chip);margin:0 0 4px;overflow:hidden}
.dbar span{display:block;height:100%;background:var(--accent);border-radius:3px}
/* чипы-фильтры (вид «у кого какая версия») */
.vchip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface)}
.vchip:hover{background:var(--chip)} .vchip.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
/* поле поиска + пагинация (общие для дашбордов) */
.bsearch__i{height:38px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-control);padding:0 12px;font:500 13px var(--sans);width:190px}
.bsearch__i:hover,.bsearch__i:focus{border-color:var(--accent-line);outline:none}
.pager{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--surface)}
.pager a:hover{background:var(--chip)} .pager .on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)} .pager .dis{opacity:.4;pointer-events:none}
.pmeta{font-size:12px;color:var(--muted);margin-right:auto}
/* кликабельная строка-полоса (панель дрейфа версий) */
a.chrow:hover{background:var(--surface-2);border-radius:8px}
.rank{width:24px;height:24px;border-radius:50%;font-weight:700;font-size:11px;font-family:var(--mono);display:inline-flex;align-items:center;justify-content:center;background:var(--chip);color:var(--muted)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-weight:600;font-size:12.5px;font-family:var(--mono);background:var(--accent-soft);color:var(--accent)}
.mut{color:var(--faint)} .empty{text-align:center;color:var(--muted);padding:48px}
.feed td{padding:9px 10px;font-size:13px} .evd{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* ---- Адаптив: ≤860px → одна колонка, sidebar становится верхней полосой ---- */
@media(max-width:860px){
  html,body,.bark-app{max-width:100%;overflow-x:hidden}
  .bark-app{grid-template-columns:1fr}
  .bark-sidebar{position:static;height:auto;width:100%;max-width:100vw;min-width:0;contain:layout inline-size paint;flex-direction:row;align-items:center;gap:8px;border-right:0;border-bottom:1px solid var(--line);padding:8px;overflow:clip}
  .bark-sidebar .bark-logo{margin:0;flex:none}
  .bark-sidebar .bark-logo__tile{width:28px;height:28px}
  .bark-sidebar .bark-logo__word{font-size:15px}
  .bark-sidebar .bark-logo__subtitle{font-size:9px}
  .bark-sidebar__scroll{display:block;flex:1 1 auto;min-width:0;max-width:100%;min-height:auto;contain:inline-size;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .bark-sidebar__group{display:flex;flex-direction:row;gap:4px}
  .bark-sidebar__group-label{display:none}
  .bark-sidebar__bottom{display:flex;flex:none;align-items:center;gap:4px;margin:0}
  .bark-sidebar .bark-theme-switch{display:grid;width:92px;padding:2px}
  .bark-sidebar .bark-theme-switch button{height:28px}
  .bark-sidebar__footer{display:flex;align-items:center;border:0;padding:0}
  .bark-sidebar__logout{height:32px;width:32px;padding:0;justify-content:center}
  .bark-sidebar__logout span{display:none}
  .sb-user{display:none}
  .bark-content{padding:24px 16px 52px}
  .panel{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
  .cards,.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .rthead{align-items:stretch;flex-direction:column}
  .rtlinechart{height:190px}
  .rtaxis{overflow:hidden}
  .rtaxisday{font-size:10px}
}