/* Дашборд руководителя, журнал и «Мои показатели» (docs/UI.md §6, §7.1). Графики — ui/charts.js.
   Классы с приставкой ds- — чтобы не задеть плитки экрана «Заявки» (staff.css: .kpis, .kpi). */
.zsp { --goal: #141821; --hm-ok: #16a34a; --hm-bad: #dc2626; }
[data-theme="dark"] .zsp { --goal: #eceff4; }

.dsh { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.dsh > * { min-width: 0; }
.main:has(> .dsh) { padding-top: 16px; padding-bottom: 16px; }
/* краткий вид, журнал и мои показатели — во весь экран без прокрутки страницы: последний ряд тянется до низа окна */
@media (min-width: 1101px) and (min-height: 640px) {
  .dsh.fit { height: calc(100dvh - 76px - 32px); grid-template-rows: auto auto minmax(0, 1fr); }
  .dsh.fit.rows4 { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .dsh.fit > :last-child { min-height: 0; }
  .dsh.fit > :last-child > .ds-card { min-height: 0; overflow: hidden; }
  .dsh.fit .ds-card > .ds-scroll { overflow: auto; min-height: 0; flex: 1; }
}

/* ---------- шапка ---------- */
.ds-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.ds-head h1 { font-size: 28px; }
.ds-head .eyebrow { margin-bottom: 2px; }
.ds-head .eyebrow .link { font-weight: 600; }
.ds-head .toolbar { gap: 8px; }
.ds-n { color: var(--muted); font-weight: 600; margin-left: 6px; }
.ds-title { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; min-width: 0; }
.ds-title .search { width: 300px; min-width: 0; }
.seg-p button[data-cal] { padding: 0 9px; } .seg-p .ic { width: 17px; height: 17px; }
.ds-dd { position: relative; }
.ds-dd .dd { width: 250px; }
.ds-orgs-dd .dd { width: 320px; }
.ds-dd .dd-btn { border-radius: 999px; height: var(--h); font-weight: 600; color: var(--text); }
.ds-dd .dd-v { white-space: nowrap; }
.ds-dd .dd.has-val .dd-btn { border-color: var(--primary); color: var(--primary); }
.ds-dd .dd-pop { min-width: 280px; }
.ds-orgs-dd .dd-pop { min-width: 380px; }
.ds-dd .dd-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ds-cal { position: absolute; right: 0; top: calc(100% + 8px); z-index: 12; padding: 14px; width: 340px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--field-border); box-shadow: var(--shadow); display: grid; gap: 10px; }
.ds-cal { box-sizing: border-box; max-width: calc(100vw - 32px); }
.ds-cal .row { flex-wrap: nowrap; gap: 10px; } .ds-cal .field { flex: 1 1 0; min-width: 0; }
.ds-cal input { min-height: 36px; width: 100%; min-width: 0; box-sizing: border-box; }
.ds-stale { font-size: 12.5px; color: var(--st-work); }

/* ---------- плитки ---------- */
.ds-tiles { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-tile { text-align: left; padding: 13px 14px; border-radius: 18px; background: var(--surface); border: 1px solid transparent; display: grid; gap: 3px; align-content: start;
  transition: border-color .2s, transform .2s; min-width: 0; position: relative; }
.ds-tile:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); transform: translateY(-1px); }
.ds-tile .t { font-size: 13px; color: var(--muted); line-height: 1.25; }
.ds-tile .v { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ds-tile .s { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ds-tile.t-main { background: #141821; color: #fff; } .ds-tile.t-main .t, .ds-tile.t-main .s { color: #b4bccb; }
.ds-tiles.n5 .ds-tile.t-main .v { font-size: 36px; }
[data-theme="dark"] .ds-tile.t-main { background: #eceff4; color: #0e1014; } [data-theme="dark"] .ds-tile.t-main .t, [data-theme="dark"] .ds-tile.t-main .s { color: #4a5160; }
.ds-tile.t-bad .v { color: var(--danger); } .ds-tile.t-good .v { color: var(--st-done); } .ds-tile.t-warn .v { color: var(--st-work); }
.ds-tile .v.none { color: var(--muted); font-size: 22px; font-weight: 600; }
/* подробный вид: 9 плиток — главная на две строки */
.ds-tiles.n9 { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
.ds-tiles.n9 .ds-tile.t-main { grid-row: span 2; align-content: center; }
.ds-tiles.n9 .ds-tile .v { font-size: 26px; } .ds-tiles.n9 .ds-tile.t-main .v { font-size: 38px; }

/* ---------- карточки ---------- */
.ds-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.ds-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ds-ch h2 { font-size: 15.5px; font-weight: 700; }
.ds-empty { flex: 1; display: grid; place-items: center; color: var(--muted); font-size: 14px; min-height: 120px; text-align: center; }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--muted)); vertical-align: -1px; flex: none; }
.lg-1 { background: var(--ch-1); } .lg-2 { background: var(--ch-2); }
.ds-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.ds-grid.full { grid-template-columns: 1.55fr 1fr; }
.ds-grid2 { display: grid; grid-template-columns: 1fr 1.8fr; gap: 14px; }

/* ---------- графики (ui/charts.js) ---------- */
.cbox { flex: 1; min-height: 180px; position: relative; min-width: 0; }
.cbox > svg { position: absolute; inset: 0; }
.chart { display: block; overflow: visible; }
.chart .grid { stroke: var(--border); }
.chart .ax { font-size: 11px; fill: var(--muted); } .chart .ax.we { fill: color-mix(in srgb, var(--muted) 60%, transparent); }
.chart .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart .s1 { fill: var(--ch-1); } .chart .s2 { fill: var(--ch-2); } .chart .ln.s2 { stroke: var(--ch-2); fill: none; }
.chart .pt { stroke: var(--surface); stroke-width: 1.5; }
.chart .bar.soft { opacity: .55; } .chart .bar.soft.we { opacity: .3; } .chart .bar.s2.we { opacity: .5; }
.chart .vl { font-size: 11px; font-weight: 700; fill: var(--muted); }
.chart .hit { fill: transparent; } .chart .hit.is-hl { fill: color-mix(in srgb, var(--text) 5%, transparent); }
#chtip { position: fixed; z-index: 90; display: none; pointer-events: none; padding: 8px 11px; border-radius: 9px; background: #111827; color: #fff; font-size: 12.5px; line-height: 1.6;
  box-shadow: var(--shadow); max-width: 300px; }
[data-theme="dark"] #chtip { background: #2a2f39; border: 1px solid #3a404b; }
#chtip .lg { margin-right: 6px; }

.donut-wrap { display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 12px; flex: 1; }
.donut { width: clamp(130px, 21vh, 190px); max-width: 100%; }
.donut circle { fill: none; stroke-width: 24; cursor: pointer; transition: stroke-width .15s; }
.donut .dseg { stroke: var(--c); } .donut .dseg.is-hl { stroke-width: 30; } .donut .dempty { stroke: var(--surface-2); cursor: default; }
.donut-v { font-size: 34px; font-weight: 800; fill: var(--text); letter-spacing: -.02em; } .donut-t { font-size: 12px; fill: var(--muted); }
.dlegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; width: 100%; }
.dlegend button { width: 100%; display: grid; grid-template-columns: auto 1fr auto 52px; gap: 8px; align-items: center; padding: 2px 4px; border-radius: 6px; text-align: left; }
.dlegend button:hover { background: var(--surface-2); }
.dlegend .lg { background: var(--c); } .dlegend small { color: var(--muted); text-align: right; }
.ds-grid.full .donut-wrap { grid-template-columns: 170px 1fr; justify-items: stretch; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hbars button { width: 100%; display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(50px, 1fr) 36px 32px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 4px; border-radius: 8px; text-align: left; }
.hbars button:hover, .hbars button.is-hl { background: var(--surface-2); }
.hb-n { display: flex; align-items: center; gap: 7px; min-width: 0; } .hb-n > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-ic { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; background: var(--bb); color: var(--bf); flex: none; }
.hb-ic .ic { width: 14px; height: 14px; }
.hb-t { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
[data-theme="dark"] .hb-t { background: #262b34; }
.hb-t i { display: block; height: 100%; border-radius: 5px; background: var(--bf); opacity: .85; min-width: 3px; }
.hbars b { text-align: right; } .hb-x { font-size: 13px; font-weight: 600; width: 32px; text-align: right; color: var(--danger); }

.gauge .g-bg { fill: none; stroke: var(--surface-2); stroke-width: 14; }
[data-theme="dark"] .gauge .g-bg { stroke: #262b34; }
.gauge .g-v { fill: none; stroke-width: 14; stroke-linecap: round; } .gauge .g-v.ok { stroke: var(--st-done); } .gauge .g-v.low { stroke: var(--st-work); }
.gauge .g-goal { stroke: var(--goal); stroke-width: 3; stroke-linecap: round; }
.gauge .g-num { font-size: 30px; font-weight: 800; fill: var(--text); letter-spacing: -.02em; } .gauge .g-pc { font-size: 16px; }
.gauge .g-sub { font-size: 12px; fill: var(--muted); }

/* ---------- таблицы ---------- */
.ds-scroll { overflow-x: auto; }
.ds-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 6px 6px; border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1; }
.ds-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.ds-tbl tr:last-child td { border-bottom: 0; } .ds-tbl .r { text-align: right; }
.ds-tbl .bad { color: var(--danger); font-weight: 600; } .ds-tbl .lowv { color: var(--st-work); font-weight: 600; }
.pbar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--surface-2); margin-right: 8px; vertical-align: middle; overflow: hidden; }
[data-theme="dark"] .pbar { background: #262b34; }
.pbar i { display: block; height: 100%; background: var(--st-done); } .pbar i.low { background: var(--st-work); }
.ds-ex-b { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; } .ds-ex-b .hb-ic { width: 20px; height: 20px; border-radius: 6px; } .ds-ex-b .hb-ic .ic { width: 12px; height: 12px; }

/* ---------- журнал ---------- */
.ds-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-tabs button { height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ds-tabs button em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-tabs button.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .ds-tabs button.is-on em { color: inherit; opacity: .8; }
[data-theme="dark"] .ds-tabs button:not(.is-on) { border-color: #2d323c; }
.ds-jcard { padding: 4px 10px 8px; }
.ds-jt tbody tr { cursor: pointer; } .ds-jt tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
/* заголовки-кнопки сортировки: стрелка — у текущего столбца, у остальных — бледная при наведении */
.ds-jt th.th-s { padding: 4px 2px; }
.ds-jt .th-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; border-radius: 6px; background: none;
  font: inherit; color: inherit; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s; }
.ds-jt .th-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.ds-jt .th-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ds-jt .th-ar { display: inline-flex; opacity: 0; transition: opacity .15s; } .ds-jt .th-ar .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.ds-jt .th-ar .ic.is-desc { transform: rotate(180deg); }
.ds-jt .th-btn:hover .th-ar, .ds-jt .th-btn:focus-visible .th-ar { opacity: .45; }
.ds-jt th[aria-sort="ascending"] .th-btn, .ds-jt th[aria-sort="descending"] .th-btn { color: var(--text); font-weight: 600; }
.ds-jt th[aria-sort="ascending"] .th-ar, .ds-jt th[aria-sort="descending"] .th-ar { opacity: 1; color: var(--primary); }
.ds-jt td { padding: 9px 8px; } .ds-jt b { font-weight: 600; }
.ds-jt .j-t { display: flex; align-items: center; gap: 10px; white-space: normal; min-width: 220px; } .ds-jt .j-t > div { display: grid; min-width: 0; }
.ds-jt .j-t .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.ds-jt .j-mv .ic { width: 14px; height: 14px; color: var(--st-work); vertical-align: -2px; }
.ds-jt .tag-late { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.ds-jt .chip { min-height: 22px; font-size: 12px; }
.ds-jfoot { padding: 8px 8px 2px; }

/* ---------- мои показатели ---------- */
.ds-mine { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.ds-ring { display: flex; align-items: center; align-content: center; justify-content: center; gap: 18px 26px; flex: 1; flex-wrap: wrap; }
.ds-ring ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.ds-ring .ok { color: var(--st-done); font-weight: 600; } .ds-ring .low { color: var(--st-work); font-weight: 600; }
.g-mark { display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--goal); margin-right: 8px; vertical-align: -2px; }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .ds-grid { grid-template-columns: 1.4fr 1fr; } .ds-grid .ds-blocks { grid-column: 1 / -1; }
  .ds-grid2 { grid-template-columns: 1fr; }
  .ds-tiles.n9 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-tiles.n9 .ds-tile.t-main { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 1100px) { .ds-grid, .ds-grid.full, .ds-mine { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .ds-head h1 { font-size: 24px; } .ds-head .toolbar, .ds-title { width: 100%; } .ds-title .search { width: 100%; }
  .ds-dd:has(> .seg-p) { flex: 1 1 100%; } .seg-p { width: 100%; } .seg-p button { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 13.5px; } .seg-p button[data-cal] { flex: none; }
  .ds-dd { flex: 1 1 140px; } .ds-dd .dd { width: 100%; } .ds-dd .dd-pop, .ds-orgs-dd .dd-pop { min-width: 0; }
  .ds-tiles, .ds-tiles.n9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-tiles .ds-tile.t-main { grid-column: 1 / -1; grid-row: auto; }
  .ds-tile .v { font-size: 24px; } .ds-tiles.n5 .ds-tile.t-main .v, .ds-tiles.n9 .ds-tile.t-main .v { font-size: 30px; }
  .ds-grid.full .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .hbars button { grid-template-columns: minmax(0, 1.5fr) minmax(40px, 1fr) 28px; } .hb-x { display: none; }
  .ds-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .ds-cal { right: auto; left: 0; }
}

/* Учёт времени (UI.md §6): «В работе» с выполняемыми, «Среднее время» — общее и затраченное, «Сейчас выполняется» */
.ds-tile .s .t-run, .ds-tbl .t-run, .ds-jt .t-run { display: inline-flex; align-items: center; gap: 5px; color: var(--wk-ink); font-weight: 600; }
.ds-tile.t-run { box-shadow: inset 0 0 0 2px var(--wk-ring); }
.ds-tile .s .t-spent { color: var(--wk-ink); font-weight: 700; }
.ds-run-h { display: inline-flex; align-items: center; gap: 8px; }
.ds-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-run { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--wk-dot) 9%, transparent); cursor: pointer; }
.ds-run:hover { background: color-mix(in srgb, var(--wk-dot) 15%, transparent); }
.ds-run.is-long { background: var(--wk-long-bg); }
.ds-run-t { display: grid; min-width: 0; } .ds-run-t > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-run-n { margin: 10px 2px 0; }

/* ---------- Администрирование → Журнал действий (docs/UI.md §5.5, staff/admin.js) ---------- */
.aj-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aj-bar .ds-dd .dd { width: auto; min-width: 150px; max-width: 230px; }
.aj-bar .aj-who .dd { min-width: 200px; max-width: 280px; }
.aj-bar .ds-dd .dd-btn { height: 36px; font-weight: 500; font-size: 13.5px; }
.aj-bar .ds-dd .dd-v { overflow: hidden; text-overflow: ellipsis; }
.aj-bar .ds-dd .dd-pop { min-width: 300px; }
.aj-rel button { height: 28px; font-size: 13px; }
.aj-err, .aj-pin { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.aj-err .ic, .aj-pin .ic { width: 16px; height: 16px; }
.aj-err.is-on { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); font-weight: 600; }
.aj-pin { border-color: var(--primary); color: var(--primary); font-weight: 600; padding-right: 4px; }
.aj-pin .icon-btn { width: 28px; height: 28px; }
.aj-reset { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.aj-reset .ic { width: 15px; height: 15px; }
[data-theme="dark"] .aj-err:not(.is-on) { border-color: #2d323c; }
.aj-t td { vertical-align: top; }
.aj-t .aj-ev > div, .aj-t .aj-obj > div, .aj-t .aj-time > div { display: grid; }
.aj-t .aj-time { white-space: nowrap; width: 1%; }
.aj-t .aj-ev { min-width: 260px; white-space: normal; }
.aj-t .aj-obj { white-space: nowrap; } .aj-t .aj-obj .link { justify-self: start; font-weight: 600; }
.aj-t .aj-sub { min-width: 140px; white-space: normal; }
.aj-t tr.is-err td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.aj-who-c { display: flex; align-items: center; gap: 9px; min-width: 180px; } .aj-who-c > div { display: grid; min-width: 0; }
.aj-who-c b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.av.aj-sys { background: var(--surface-2); color: var(--muted); } .av.aj-sys .ic { width: 15px; height: 15px; }
.aj-sheet .facts dd .muted { font-weight: 400; }
.aj-subj li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.aj-subj li:last-child { border-bottom: 0; }
.aj-subj li > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.aj-sheet-f { flex-wrap: wrap; justify-content: flex-start; }
.ticket-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .aj-bar { gap: 6px; } .aj-bar .ds-dd .dd { width: calc(50vw - 22px); max-width: none; min-width: 0; }
  .aj-bar .aj-who { width: 100%; } .aj-bar .aj-who .dd { width: 100%; max-width: none; }
  /* телефон: запись — карточкой (кто и время сверху, событие, заявка) */
  .aj-t, .aj-t tbody { display: block; } .aj-t thead { display: none; }
  .aj-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
  .aj-t td { padding: 0; border: 0; min-width: 0; }
  .aj-t td:nth-child(2) { grid-row: 1; grid-column: 1; } .aj-t .aj-time { grid-row: 1; grid-column: 2; width: auto; text-align: right; }
  .aj-t .aj-ev, .aj-t .aj-obj { grid-column: 1 / -1; min-width: 0; } .aj-t .aj-obj > div { display: flex; gap: 8px; flex-wrap: wrap; }
  .aj-t .aj-sub { display: none; } .aj-t td.r:empty { display: none; } .aj-t td.r { grid-column: 1 / -1; }
  .aj-t tr.is-err td:first-child { box-shadow: none; } .aj-t tr.is-err { box-shadow: inset 3px 0 0 var(--danger); }
  .aj-who-c { min-width: 0; }
}