/* Сводка диспетчера — светлая корпоративная панель.
   Палитра статусов проверена на различимость при дальтонизме:
   зелёный → серый → оранжевый → красный → фиолетовый (худшая пара ΔE 12.0). */
#dispcol{
  --dc-bg:#f4f6f9;
  --dc-surface:#fff;
  --dc-line:#e6eaef;
  --dc-ink:#1b2430;
  --dc-ink2:#55616f;
  --dc-ink3:#8a95a3;

  --dc-ok:#1f8a4c;        /* на линии */
  --dc-idle:#8a94a0;      /* резерв, ожидание */
  --dc-warn:#e08b2f;      /* в ремонте, риск */
  --dc-crit:#d64545;      /* простой, просрочено */
  --dc-nodriver:#7b5bd6;  /* без водителя */

  --dc-ok-bg:#e8f5ee; --dc-warn-bg:#fdf1e2; --dc-crit-bg:#fdeaea; --dc-nodriver-bg:#f0ecfc; --dc-idle-bg:#eef1f4;
  --dc-shadow:0 1px 2px rgba(20,30,45,.06), 0 4px 16px rgba(20,30,45,.05);
  --dc-r:12px;
}
#dispcol .num{font-variant-numeric:tabular-nums}

/* ── верхняя панель ── */
#dispcol .top{padding:0 0 14px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#dispcol .top h1{font-size:19px;letter-spacing:-.2px}
#dispcol .top .who{color:var(--dc-ink2);font-size:14px}
#dispcol .top .who b{color:var(--dc-ink)}
#dispcol .top .spacer{flex:1}
#dispcol .seg{display:inline-flex;background:#eef1f5;border-radius:9px;padding:3px}
#dispcol .seg button{border:0;background:none;padding:6px 14px;border-radius:7px;font-size:13.5px;
  color:var(--dc-ink2);cursor:pointer;font-family:inherit}
#dispcol .seg button.on{background:var(--dc-surface);color:var(--dc-ink);box-shadow:0 1px 2px rgba(20,30,45,.12);font-weight:600}
#dispcol .upd{color:var(--dc-ink3);font-size:12.5px;text-align:right;line-height:1.3}
#dispcol .btn{border:1px solid var(--dc-line);background:var(--dc-surface);color:var(--dc-ink);padding:8px 14px;
  border-radius:9px;font-size:13.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
#dispcol .btn:hover{border-color:#cdd5de;background:#fbfcfd}
#dispcol .btn.primary{background:var(--dc-ink);color:#fff;border-color:var(--dc-ink)}
#dispcol .btn.primary:hover{background:#2a3645}

#dispcol 
#dispcol .grid{display:grid;gap:16px}
#dispcol .cols{grid-template-columns:minmax(380px,1fr) minmax(300px,420px)}
@media (max-width:1180px){.cols{grid-template-columns:1fr}}

#dispcol .card{background:var(--dc-surface);border:1px solid var(--dc-line);border-radius:var(--dc-r);
  box-shadow:var(--dc-shadow);padding:18px 20px}
#dispcol .card h2{font-size:15px;color:var(--dc-ink);margin-bottom:2px}
#dispcol .card .sub{color:var(--dc-ink3);font-size:12.5px;margin-bottom:14px}

/* ── кольцо ── */
#dispcol .donut-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
#dispcol .donut{position:relative;width:260px;height:260px;flex:0 0 auto}
#dispcol .donut svg{transform:rotate(-90deg)}
#dispcol .donut .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
#dispcol .donut .mid .p{font-size:46px;font-weight:700;letter-spacing:-1.5px;line-height:1}
#dispcol .donut .mid .t{color:var(--dc-ink2);font-size:13px;margin-top:6px;max-width:150px}
#dispcol .donut path{cursor:pointer;transition:opacity .12s}
#dispcol .donut path:hover{opacity:.82}

#dispcol .legend{flex:1;min-width:250px;max-width:520px;display:grid;gap:2px}
#dispcol .legend button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:9px 10px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;color:var(--dc-ink);text-align:left}
#dispcol .legend button:hover{background:#f6f8fa}
#dispcol .legend .dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
#dispcol .legend .nm{flex:1}
#dispcol .legend .v{font-weight:650;font-variant-numeric:tabular-nums}
#dispcol .legend .pc{color:var(--dc-ink3);width:46px;text-align:right;font-variant-numeric:tabular-nums}

/* ── критические карточки ── */
#dispcol .alerts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
#dispcol .alert{border:1px solid var(--dc-line);border-radius:var(--dc-r);background:var(--dc-surface);
  padding:14px 16px;box-shadow:var(--dc-shadow);border-left:4px solid var(--dc-idle);cursor:pointer;
  display:flex;flex-direction:column;gap:3px;text-align:left;font-family:inherit}
#dispcol .alert:hover{border-color:#cdd5de}
#dispcol .alert .v{font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1.1}
#dispcol .alert .n{font-size:13.5px;font-weight:600}
#dispcol .alert .d{color:var(--dc-ink3);font-size:12.5px}
#dispcol .alert .go{margin-top:6px;font-size:12.5px;color:var(--dc-ink2)}
#dispcol .alert.crit{border-left-color:var(--dc-crit)} .alert.crit .v{color:var(--dc-crit)}
#dispcol .alert.warn{border-left-color:var(--dc-warn)} .alert.warn .v{color:#b36d1c}
#dispcol .alert.soon{border-left-color:#e3b23c} .alert.soon .v{color:#9a7414}
#dispcol .alert.nod{border-left-color:var(--dc-nodriver)} .alert.nod .v{color:var(--dc-nodriver)}
#dispcol .alert.calm{border-left-color:var(--dc-ok)} .alert.calm .v{color:var(--dc-ok)}

/* ── задания ── */
#dispcol .bar{height:10px;border-radius:6px;background:#eef1f4;display:flex;gap:2px;overflow:hidden;margin:12px 0 10px}
#dispcol .bar i{display:block;height:100%}
#dispcol .chips{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px}
#dispcol .chip{display:flex;align-items:center;gap:7px;color:var(--dc-ink2)}
#dispcol .chip b{color:var(--dc-ink);font-variant-numeric:tabular-nums}
#dispcol .chip .dot{width:9px;height:9px;border-radius:3px}

#dispcol .drv{display:grid;gap:10px}
#dispcol .drv .row{display:flex;align-items:center;gap:10px;font-size:14px}
#dispcol .drv .row .nm{flex:1;color:var(--dc-ink2)}
#dispcol .drv .row .v{font-weight:650;font-variant-numeric:tabular-nums}

/* ── таблица ── */
#dispcol .tabletop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#dispcol table.t{width:100%;border-collapse:collapse;font-size:13.5px}
#dispcol table.t th{text-align:left;color:var(--dc-ink3);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--dc-line)}
#dispcol table.t td{padding:11px 10px;border-bottom:1px solid #f1f4f7;vertical-align:middle}
#dispcol table.t tr:hover td{background:#fafbfc}
#dispcol .pr{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
#dispcol .pr .dot{width:8px;height:8px;border-radius:50%}
#dispcol .pr.crit{color:var(--dc-crit)} .pr.high{color:#b36d1c} .pr.mid{color:var(--dc-ink2)}
#dispcol .obj{font-weight:600}
#dispcol .obj .meta{display:block;color:var(--dc-ink3);font-weight:400;font-size:12.5px}
#dispcol .act{display:flex;gap:6px;flex-wrap:wrap}
#dispcol .act button{border:1px solid var(--dc-line);background:var(--dc-surface);border-radius:7px;padding:5px 10px;
  font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--dc-ink2)}
#dispcol .act button:hover{border-color:#cdd5de;color:var(--dc-ink)}
#dispcol .empty{padding:26px;text-align:center;color:var(--dc-ink3)}

/* подсказка на кольце */
#tip{position:fixed;pointer-events:none;background:#1b2430;color:#fff;padding:7px 10px;border-radius:8px;
  font-size:12.5px;opacity:0;transition:opacity .1s;z-index:40;white-space:nowrap}

/* На узком экране таблица шире карточки — даём прокрутку внутри неё,
   иначе колонка «Действие» уезжает за край и кнопки не нажать. */
#dispcol .card{overflow-x:auto}
#dispcol table.t{min-width:680px}

/* Короткое сообщение раздела: подтверждение действия или причина отказа. */
#dispcol .note{background:#fdf6e3;border:1px solid #f0e0b8;color:#7a5c1e;
  border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}