/* =====================================================================
   Обзор (fos/s-overview.css) — panel-desktop §6.2 + Д3, panel-phone §5.1.
   Только .g-ov-*; токены — из /deep.css.
   ===================================================================== */

/* ---------- сетка: 1440 и шире — 5/4/3 · 5/7 (прототип) ---------- */
.g-ov{align-items:stretch}
.g-ov > section{min-width:0}
.g-ov-queue{grid-column:span 5;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.g-ov-new{grid-column:span 4;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.g-ov-wh{grid-column:span 3;display:flex;flex-direction:column;gap:12px;position:relative;cursor:pointer}
.g-ov-boxmap{grid-column:span 5;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.g-ov-longest{grid-column:span 7;padding:22px 0 8px;display:flex;flex-direction:column}
/* 1024–1279: очередь+новые, склад+карта, таблица на всю ширину — без горизонтальной прокрутки */
@media (max-width:1279px){
  .g-ov-queue{grid-column:span 7} .g-ov-new{grid-column:span 5}
  .g-ov-wh{grid-column:span 5} .g-ov-boxmap{grid-column:span 7}
  .g-ov-longest{grid-column:span 12}
}
.g-ov-skel .g-skel-grid{gap:16px}
@media (max-width:1279px){
  .g-ov-skel .g-skel:nth-child(1){grid-column:span 7!important} .g-ov-skel .g-skel:nth-child(2){grid-column:span 5!important}
  .g-ov-skel .g-skel:nth-child(3){grid-column:span 5!important} .g-ov-skel .g-skel:nth-child(4){grid-column:span 7!important}
  .g-ov-skel .g-skel:nth-child(5){grid-column:span 12!important}
}

/* min-height 19 — как строка с кнопкой «все … →» в прототипе (карточки 04 и 05) */
.g-ov-h{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:19px}
.g-ov-h--pad{padding:0 24px 12px;min-height:31px}
.g-ov-pad{padding:0 24px}
.g-ov-err{margin:0;font:300 13.5px/1.5 var(--font);color:var(--coral-text);display:flex;gap:8px;align-items:flex-start}
.g-ov-err::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;margin-top:6px}
.g-ov-wh .g-ov-err{color:#F7B3B9}
.g-ov-note{margin:0;font:300 13.5px/1.5 var(--font);color:var(--soft)}
.g-ov-none{padding-top:16px;padding-bottom:14px;border-top:1px solid var(--line-head)}

/* ---------- 01 · Очередь ответов ---------- */
.g-ov-q__n{display:flex;align-items:flex-end;gap:16px}
.g-ov-q__big{font:200 112px/.85 var(--font);letter-spacing:-.05em}
.g-ov-q__lbl{font:300 17px/1.35 var(--font);color:var(--muted);padding-bottom:6px}
.g-ov-bar{position:relative;height:30px;display:flex;align-items:center}
.g-ov-bar__track{flex:1;height:14px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden;display:flex}
.g-ov-bar__knob{position:absolute;top:0;left:clamp(0px,calc(var(--p) - 22px),calc(100% - 44px));width:44px;height:30px;border-radius:var(--r-pill);
  background:#fff;display:flex;align-items:center;justify-content:center;font:500 11px var(--mono);color:var(--ink);box-shadow:var(--sh-thumb)}
.g-ov-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g-ov-fig{display:flex;flex-direction:column;gap:2px;color:var(--ink);border-radius:6px;min-width:0}
.g-ov-fig:hover{color:var(--ink)}
.g-ov-fig__n{font:300 30px/1 var(--font);color:var(--ink);transition:color .15s}
.g-ov-fig:hover .g-ov-fig__n{color:var(--link-hover)}
.g-ov-fig__l{font:400 12.5px var(--font);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-btns{display:flex;gap:8px;flex-wrap:wrap}
.g-ov-btns .g-btn--dark{gap:8px}
.g-ov-mine{padding:0 18px;font-size:14px}
.g-ov-mine:hover{color:var(--ink-2)}

/* ---------- 02 · Новые переписки ---------- */
.g-ov-period{background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:border-color .15s}
.g-ov-period:hover,.g-ov-period[aria-expanded="true"]{border-color:var(--dash)}
.g-ov-period .g-ico{width:11px;height:11px;margin-right:-2px}
.g-ov-period[aria-busy="true"]{opacity:.5;cursor:progress}
.g-ov-pop{width:160px}
.g-ov-new__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.g-ov-new__n{font:200 56px/1 var(--font);letter-spacing:-.04em}
.g-ov-new__pct{font:500 11.5px var(--mono);color:var(--green-deep)}
.g-ov-new__pct.is-down{color:var(--coral-ink)}
.g-ov-new__pct.is-zero{color:var(--soft)}
.g-ov-new__vs{font:300 13px var(--font);color:var(--soft)}
/* столбик 24/16/8 px (прототип), но не шире места: при 861–1023 px график узкий — столбики
   сужаются, зазор не меньше --g (6/4/2 px), лишние подписи прячет @container */
.g-ov-lolli{flex:1;min-height:150px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px;container-type:inline-size}
.g-ov-lol{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;flex:none;
  width:min(var(--bw),calc((100% - (var(--n) - 1) * var(--g)) / var(--n)))}
.g-ov-lol__v,.g-ov-lol__d{width:0;display:flex;justify-content:center;white-space:nowrap;font:500 10.5px var(--mono);min-height:13px;line-height:13px}
.g-ov-lol__v{color:var(--ink)}
.g-ov-lol__d{color:var(--faint)}
.g-ov-lol.is-max .g-ov-lol__d{color:var(--ink)}
.g-ov-lol__bar{width:100%;border-radius:var(--r-pill);position:relative;--h:var(--hatch-grey)}
.g-ov-lol.is-max .g-ov-lol__bar{background:var(--ink)}
.g-ov-lol.is-max .g-ov-lol__bar::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:min(8px,calc(100% - 4px));aspect-ratio:1;border-radius:50%;background:#fff}
.g-ov-lolli.is-30 .g-ov-lol__d{font-size:10px}
@container (max-width:231px){.g-ov-lolli.is-14 .g-ov-lol__d.is-wide{visibility:hidden}}
@container (max-width:204px){.g-ov-lolli.is-30 .g-ov-lol__d.is-wide{visibility:hidden}}

/* ---------- 03 · Склад сегодня (тёмная) ---------- */
.g-ov-wh__go{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  transition:background .15s}
.g-ov-wh__go .g-ico{width:13px;height:13px}
.g-ov-wh__go::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.g-ov-wh__go:hover,.g-ov-wh:hover .g-ov-wh__go{background:rgba(255,255,255,.18);color:#fff}
.g-ov-wh__go:focus-visible{outline:none}
.g-ov-wh__go:focus-visible::after{outline:2px solid var(--teal);outline-offset:2px}
/* «918,5 кг» — одной строкой (прототип); «принято» — подписью под ней: высота не зависит от числа */
.g-ov-wh__num{display:flex;flex-direction:column;gap:2px;min-width:0}
.g-ov-wh__n{display:flex;align-items:baseline;gap:6px;white-space:nowrap;min-width:0}
.g-ov-wh__big{font:200 54px/1 var(--font);letter-spacing:-.04em}
.g-ov-wh__big.is-long{font-size:44px;line-height:54px}
.g-ov-wh__u{font:300 15px var(--font);color:rgba(255,255,255,.55)}
.g-ov-wh__cap{font:300 13px/1.3 var(--font);color:rgba(255,255,255,.55)}
.g-ov-st{display:flex;flex-direction:column;gap:4px}
.g-ov-st__r{display:flex;justify-content:space-between;gap:8px;font:300 12.5px var(--font);color:rgba(255,255,255,.7)}
.g-ov-st__v{font:500 12px var(--mono);color:#fff}
.g-ov-st__t{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.g-ov-st__f{height:100%}
.g-ov-wh__stale{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  background:rgba(243,165,60,.14);color:var(--amber-on-dark);font:400 12.5px/1.35 var(--font);transition:background .15s}
.g-ov-wh__stale::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--amber)}
.g-ov-wh__stale:hover{background:rgba(243,165,60,.24);color:var(--amber-on-dark)}

/* ---------- 04 · Карта боксов ---------- */
.g-ov-bm__top{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.g-ov-bm__n{display:flex;align-items:baseline;gap:6px}
.g-ov-bm__big{font:200 44px/1 var(--font);letter-spacing:-.03em}
.g-ov-bm__lbl{font:300 13px var(--font);color:var(--soft)}
.g-ov-legend{display:flex;gap:6px 12px;font:400 12px var(--font);color:var(--muted);flex-wrap:wrap}
.g-ov-legend > span{display:flex;align-items:center;gap:5px}
.g-ov-legend i{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.g-ov-legend i.is-ring{box-shadow:inset 0 0 0 1.5px var(--ring)}
.g-ov-zones{display:flex;gap:26px;flex-wrap:wrap}
.g-ov-zone{display:flex;flex-direction:column;gap:8px}
.g-ov-zone__t{font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--soft)}
.g-ov-cells{display:grid;grid-template-columns:repeat(4,24px);gap:5px}
.g-ov-cell{width:24px;height:24px;border-radius:6px;background:var(--c);display:flex;align-items:center;justify-content:center;
  font:500 9.5px/1 var(--mono);color:rgba(255,255,255,.88);letter-spacing:-.02em;transition:transform .12s var(--ease-out),box-shadow .12s}
.g-ov-cell.is-ink{color:rgba(14,42,51,.72)}
.g-ov-cell.is-ring{box-shadow:inset 0 0 0 1.5px var(--ring)}
.g-ov-cell.is-none{background:#fff;border:1.5px dashed var(--dash)}
/* выемка была, заполненность водитель не отметил: штриховка + цифра дней */
.g-ov-cell.is-unk{background:repeating-linear-gradient(-60deg,var(--line) 0 2px,#fff 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ring);color:var(--ink-2);
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 1px #fff}
.g-ov-cell.is-unk:hover{color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--ring),0 4px 10px -4px rgba(18,26,43,.45)}
.g-ov-cell:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(18,26,43,.45);color:rgba(255,255,255,.88)}
.g-ov-cell.is-ink:hover{color:rgba(14,42,51,.72)}
.g-ov-cell.is-ring:hover{box-shadow:inset 0 0 0 1.5px var(--ring),0 4px 10px -4px rgba(18,26,43,.45)}
.g-ov-hint{margin:auto 0 0;font:300 12.5px/1.5 var(--font);color:var(--faint)}
@media (prefers-reduced-motion:reduce){.g-ov-cell{transition:none}.g-ov-cell:hover{transform:none}}

/* ---------- 05 · Ждут дольше всех ---------- */
.g-ov-tbl .g-thead{padding-top:8px;padding-bottom:8px;border-top:1px solid var(--line-head)}
.g-ov-tbl .g-tr:last-child{border-bottom:1px solid var(--line-row)}
.g-ov-id{font:500 11.5px var(--mono);color:var(--faint)}
.g-ov-who{display:flex;flex-direction:column;min-width:0}
.g-ov-who__n{font:400 14px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-who__s{font:300 12px var(--font);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-subj{font:300 13.5px var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.g-ov-cat{display:flex;align-items:center;gap:6px;font:400 12.5px var(--font);color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden}
.g-ov-cat--none{color:var(--faint)}
.g-ov-h-cell{text-align:right;font:300 20px var(--font);white-space:nowrap}

/* ---------- строка «мессенджеры не подключены» (Д3 п. 1) ---------- */
.g-ov-off{grid-column:span 12;margin:0;display:flex;align-items:center;gap:8px;padding:2px 4px;font:300 13px/1.4 var(--font);color:var(--soft)}
.g-ov-off::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dash);flex:none}

/* =====================================================================
   ТЕЛЕФОН (panel-phone §5.1)
   ===================================================================== */
.g-ov-m{display:grid;gap:12px;min-width:0}
.g-ov-hello{display:flex;align-items:center;gap:12px;padding:4px 2px 0}
.g-ov-hello__ava{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--ink);display:flex;align-items:center;justify-content:center;font:600 15px var(--font);flex:none}
.g-ov-hello__t{flex:1;min-width:0;display:flex;flex-direction:column}
.g-ov-hello__g{font:400 12.5px var(--font);color:var(--soft)}
.g-ov-hello__n{font:500 18px var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-hello__f{font:500 10px var(--mono);color:var(--soft);display:flex;align-items:center;gap:6px;flex:none;letter-spacing:.02em}
.g-ov-hello__f::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-live)}
.g-ov-hello__f.is-down{color:var(--coral-ink)}
.g-ov-hello__f.is-down::before{background:var(--coral)}

.g-ov-mq{background:var(--ink);color:#fff;border-radius:28px;padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;min-width:0}
.g-ov-mq__h{display:flex;justify-content:space-between;align-items:center}
.g-ov-mq__k{font:500 10.5px var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.6)}
.g-ov-mq__go,.g-ov-mq__go:hover{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.g-ov-mq__go .g-ico{width:16px;height:16px}
.g-ov-mq__go::after{content:"";position:absolute;inset:0;border-radius:28px}
.g-ov-mq__go:focus-visible{outline:none}
.g-ov-mq__go:focus-visible::after{outline:2px solid var(--teal);outline-offset:2px}
.g-ov-mq__go:active{opacity:.85}
.g-ov-mq__n{display:flex;align-items:baseline;gap:10px}
.g-ov-mq__big{font:200 88px/.85 var(--font);letter-spacing:-.05em}
.g-ov-mq__w{font:300 14px var(--font);color:rgba(255,255,255,.7)}
.g-ov-mq__bar{height:12px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden;display:flex}
.g-ov-mq__lg{display:flex;justify-content:space-between;gap:8px;font:400 12.5px var(--font);color:rgba(255,255,255,.75)}
.g-ov-mq .g-ov-err{color:#F7B3B9}

.g-ov-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px 0}
.g-ov-qa,.g-ov-qa:hover{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-2);background:none;border:none;padding:0;
  font:400 12px var(--font);white-space:nowrap;min-width:0}
.g-ov-qa{border-radius:16px}
.g-ov-qa__c{width:58px;height:58px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.g-ov-qa__c .g-ico{width:22px;height:22px}
.g-ov-qa:active .g-ov-qa__c{background:var(--surface-2)}

.g-ov-mwh{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;position:relative;min-width:0}
.g-ov-mwh__top{display:flex;align-items:center;gap:14px}
.g-ov-mwh__l{flex:1;min-width:0;display:flex;flex-direction:column}
.g-ov-mwh__k,.g-ov-mwh__k:hover{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--soft)}
.g-ov-mwh__k::after{content:"";position:absolute;inset:0;border-radius:24px}
.g-ov-mwh__k:focus-visible{outline:none}
.g-ov-mwh__k:focus-visible::after{outline:2px solid var(--teal);outline-offset:2px}
.g-ov-mwh__n{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;color:var(--ink)}
.g-ov-mwh__v{font:200 36px/1.1 var(--font);letter-spacing:-.03em;white-space:nowrap}
.g-ov-mwh__u{font:300 14px var(--font);color:var(--soft);white-space:nowrap}
.g-ov-mwh__pill,.g-ov-mwh__pill:hover{position:relative;z-index:1;flex:none;font:400 12.5px var(--font);color:var(--amber-ink);background:var(--amber-tint);padding:6px 10px;border-radius:var(--r-pill)}
.g-ov-mwh__pill::before{content:"";position:absolute;inset:-8px -6px}
.g-ov-mwh__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g-ov-mst{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-ov-mst__r{display:flex;justify-content:space-between;gap:6px;font:400 11.5px var(--font);color:var(--soft);white-space:nowrap}
.g-ov-mst__r > span{overflow:hidden;text-overflow:ellipsis}
.g-ov-mst__r b{font:500 11px var(--mono);color:var(--ink)}
.g-ov-mst__t{height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden;display:flex}
.g-ov-mst__t > span{height:100%}

.g-ov-ml{background:#fff;border:1px solid var(--line);border-radius:24px;padding:6px 4px;min-width:0}
.g-ov-ml__h{display:flex;justify-content:space-between;align-items:center;padding:6px 14px 0 14px;min-height:44px}
.g-ov-ml__k{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--muted)}
.g-ov-ml__all,.g-ov-ml__all:hover{font:400 13.5px var(--font);color:var(--teal-ink);display:flex;align-items:center;min-height:44px;padding:0 0 0 12px}
.g-ov-mrow,.g-ov-mrow:hover{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line-soft);color:var(--ink);min-height:62px}
.g-ov-mrow:active{background:var(--hover)}
.g-ov-mrow__t{flex:1;min-width:0;display:flex;flex-direction:column}
.g-ov-mrow__n{font:400 15px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-mrow__s{font:300 13px var(--font);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ov-mrow__h{font:300 20px var(--font);white-space:nowrap;flex:none}
.g-ov-ml .g-ov-pad{padding:6px 14px 12px}