/* css/screens/live.css — Grand Mumtoz Director · ZARHAL · screen "live" («Сейчас / Hozir»), DESIGN-screen-live §5.1 + §5.13.
 * Tokens only; transform/opacity animations only; phone stack ≤ 899 px, 12-column grid ≥ 900 px. */

/* ---------- root & layout ---------- */
.live { position: relative; }
.live__strips { position: relative; }
.live__strip { margin: 0 calc(-1 * var(--gutter)) 12px; cursor: pointer; }
.live__strip .i { flex-shrink: 0; }
.live__right { display: flex; flex-direction: column; }
.live__right .live__moves { order: 1; }
.live__right .live__chron { order: 2; }
.live__section { margin-top: 20px; }
.live__section .section__head { margin-bottom: 6px; }
.live__quiet { padding: 6px 2px; }

/* ---------- skeleton (spec: hero, 6 stats, 3 person rows) ---------- */
.live__skel { display: flex; flex-direction: column; gap: 12px; animation: fadeIn 160ms var(--e-velvet); }
.live__skel .skeleton--stat { grid-template-columns: 1fr 1fr; }

/* ---------- hero ---------- */
.live__hero { display: block; }
.live__hero .hero__value .unit { font: 500 14px/18px var(--font-ui); color: var(--text-2); margin-left: 2px; }
.live__hero .hero__breakdown { display: block; }
.live__hero .hero__breakdown span { white-space: nowrap; }
.live__hero .hero__breakdown .sep { color: var(--text-3); margin: 0 4px; }
.live__hero .hero__spark { pointer-events: none; }

/* ---------- stat grid ---------- */
.live__stats.stat-grid { margin-top: 12px; }
.live__stats .stat { padding: 12px 14px; }
.live__stats .stat__value .num-xl { display: inline-block; }
.live__stats .stat__value .stat__sep { color: var(--text-3); font: 500 14px/18px var(--font-ui); margin: 0 2px; }
.live__stats .stat__value .stat__arrow { color: var(--text-2); font: 700 18px/24px var(--font-ui); }
.live__stats .stat__value .stat__overdue { color: var(--danger); font: 700 13px/18px var(--font-ui); display: inline-flex; align-items: center; gap: 2px; }
.live__stats .stat__ring svg { display: block; }

/* ---------- on shift ---------- */
.live__onshift .dept-head { color: var(--text-1); }
.live__onshift .dept-head .dept-dot { background: var(--dept, var(--text-3)); }
.live__onshift .dept-head__name { white-space: nowrap; }
.live__onshift .dept-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.live__group { margin-bottom: 4px; }
.live__nobody { padding: 6px 4px 8px 22px; font: 400 13px/18px var(--font-ui); color: var(--text-3); }
.live__people { display: flex; flex-direction: column; }
.person.live__person { border-radius: var(--r-sm); }
.person.live__person .avatar { --ring: var(--dept, var(--text-3)); }
.person.live__person .avatar .pulse { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--bg-1); }
.person.live__person .person__body { display: flex; flex-direction: column; gap: 1px; }
.person.live__person .person__name .grow { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.person.live__person .person__name .grow > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.live__person .person__meta .grow { min-width: 0; }
.person.live__person .person__progress i { transform: scaleX(var(--p, 0)); transition: transform var(--t-med) var(--e-velvet); }
.person.live__person .person__call { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--text-2); flex-shrink: 0; }
.person.live__person .person__call:active { transform: scale(.94); }
.person.live__person .person__actions { display: flex; align-items: center; gap: 8px; }
.person.live__person .person__actions .na-caption { font: 500 12px/16px var(--font-ui); color: var(--text-3); }
.person.live__person .person__warn { color: var(--warning); flex-shrink: 0; }
.live__people-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

/* ---------- departures / arrivals ---------- */
.live__moves .row { border-radius: var(--r-xs); }
.live__moves .row__title .room { font-weight: 700; font-variant-numeric: tabular-nums; }
.live__moves .row__title .sep { color: var(--text-3); margin: 0 2px; }
.live__moves .row__sub { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.live__moves .row__sub .chip { height: 20px; }
.live__moves .row--danger .row__sub { color: var(--danger); }
.live__moves .row__right .icon-btn, .live__moves .row__right a.icon-btn { width: 40px; height: 40px; }

/* ---------- day strip (Хроника дня) ---------- */
.live__chron .daystrip { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); padding: 4px 0; }
.live__chron .daystrip svg { height: 56px; display: block; }
.live__chron .daystrip--lanes svg { height: 98px; } /* 5 полос с поваром (10.10.2026): 84px было на 4 */
.live__chron .daystrip__axis { stroke: var(--line); stroke-width: 1; }
.live__chron .daystrip__hour { stroke: var(--line); stroke-width: 1; }
.live__chron .daystrip__tick { cursor: pointer; }
.live__chron .daystrip__tick:hover { opacity: .8; }
.live__chron .daystrip__count { font: 700 9px/10px var(--font-ui); fill: var(--text-2); }
.live__chron .daystrip__now { stroke: var(--accent); stroke-width: 1.5; }
.live__chron .daystrip__nowcap { fill: var(--accent); }
.live__chron .daystrip__lane { font: 500 10px/12px var(--font-ui); fill: var(--text-3); }
.live__chron .daystrip__empty { font: 500 12px/16px var(--font-ui); fill: var(--text-3); }

/* ---------- recent (feed rows / desktop table) ---------- */
.live__recent .card.list--card { padding: 0; overflow: hidden; }
.live__recent .feed-row { background: transparent; }
.live__recent .feed-row:last-child { border-bottom: 0; }
.live__recent .feed-row__kind .who { font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__recent .feed-row__amount.tone--success { color: var(--success); }
.live__recent .feed-row__amount.tone--danger { color: var(--danger); }
.live__recent .table td.who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live__recent .table td.what { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live__recent .table .dept-dot { margin-right: 6px; vertical-align: middle; }
.live__recent .table td.dept span { white-space: nowrap; }

/* ---------- live patch motion (§2.1): enter / new / removing / flash ---------- */
.live .is-new { animation: rowIn 200ms var(--e-enter) both; }
.live .is-removing { animation: fadeOut 160ms var(--e-exit) forwards; pointer-events: none; }
.live.enter .live__hero, .live.enter .live__stats > *, .live.enter .live__onshift, .live.enter .live__right, .live.enter .live__recent { animation: fadeUp6 200ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 12) * 20ms); }
.live .attention__item.is-new { animation: stripIn 200ms var(--e-enter) both; }
.live .stat.is-flash::after, .live .hero.is-flash::after { border-radius: inherit; }
.live__hero.is-zero .hero-num { color: var(--text-2); }
.live .is-stale-content { opacity: .6; pointer-events: none; }
.live__retry { margin-bottom: 12px; }

/* ---------- KPI explain panel (§5.13) ---------- */
.kpi { display: flex; flex-direction: column; gap: 12px; }
.kpi__period { font: 500 12px/16px var(--font-ui); color: var(--text-3); }
.kpi__formula { font: 500 13px/18px var(--font-ui); color: var(--text-2); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.kpi__formula b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.kpi__group { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.kpi__group-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.kpi__group-head .overline { flex: 1; min-width: 0; }
.kpi__group-head .num { font: 700 13px/18px var(--font-ui); font-variant-numeric: tabular-nums; }
.kpi__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 8px; align-items: center; min-height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--line); font: 400 13px/18px var(--font-ui); }
.kpi__row:last-child { border-bottom: 0; }
.kpi__row .t { font: 500 12px/16px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.kpi__row .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi__row .m .who { color: var(--text-2); }
.kpi__row .m .room { font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__row .a { font: 700 13px/18px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__empty { padding: 12px; font: 400 13px/18px var(--font-ui); color: var(--text-3); text-align: center; }
.kpi__total { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-gold); font: 700 14px/20px var(--font-ui); }
.kpi__total .grow { flex: 1; }
.kpi__total .num { font-variant-numeric: tabular-nums; }
.kpi__total--mismatch { color: var(--warning); }
.kpi__note { font: 500 12px/16px var(--font-ui); color: var(--warning); }
.kpi__foot { display: flex; flex-direction: column; gap: 8px; }
.kpi__loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--text-3); font: 500 13px/18px var(--font-ui); }

/* ---------- feed row detail (fallback panel) ---------- */
.live-detail { display: flex; flex-direction: column; gap: 10px; }
.live-detail .kv { display: grid; grid-template-columns: minmax(96px, 35%) minmax(0, 1fr); gap: 6px 10px; font: 400 13px/18px var(--font-ui); }
.live-detail .kv dt { color: var(--text-3); font-weight: 500; }
.live-detail .kv dd { margin: 0; overflow-wrap: anywhere; }
.live-detail .kv dd.num { font-variant-numeric: tabular-nums; }
.live-detail .live-detail__raw { font: 500 12px/16px var(--font-ui); color: var(--text-3); font-family: var(--font-mono, monospace); }
.live-detail .live-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---------- close-shift step ---------- */
.shiftclose { display: flex; flex-direction: column; gap: 12px; }
.shiftclose__q { font: 400 14px/20px var(--font-ui); color: var(--text-2); }
.shiftclose__q b { color: var(--text-1); }
.shiftclose__actions { display: flex; gap: 8px; justify-content: flex-end; }
.shiftclose__actions .btn { min-width: 120px; }
.shiftclose__note { font: 500 12px/16px var(--font-ui); color: var(--text-3); }

/* ---------- local fallback sheet (used only when GM.ui.sheet is absent) ---------- */
.live-sheet__close { margin-left: auto; }

/* ---------- copy-phone popover ---------- */
.live-phone { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.live-phone__num { font: 700 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- part 2 additions: dept head as a button, extras, lists ---------- */
.live__onshift button.dept-head { width: 100%; }
.live__onshift button.dept-head:disabled { cursor: default; }
.live__stat .stat__extra { font: 500 14px/18px var(--font-ui); color: var(--text-2); white-space: nowrap; }
.live__stat .stat__extra .stat__overdue { color: var(--danger); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.live__list:empty { display: none; }
.live__moves .live__call { color: var(--text-2); }
.live__chron-host:empty { display: none; }
.live__recent .table td.dept .dept-dot { --dept: inherit; }
.live__recent .table tr.dept-reception { --dept: var(--dept-reception); } .live__recent .table tr.dept-maid { --dept: var(--dept-maid); }
.live__recent .table tr.dept-laundry { --dept: var(--dept-laundry); } .live__recent .table tr.dept-director { --dept: var(--dept-director); }
.live__recent .table td.what b { font-weight: 700; }
.live__hero .hero.is-zero .hero-num { color: var(--text-2); }
.kpi .kpi__loading .spinner { flex-shrink: 0; }

/* ---------- tablet 768–899 ---------- */
@media (min-width: 768px) {
  .live__stats.stat-grid { grid-template-columns: repeat(3, 1fr); }
  .live__hero .hero__spark { display: block; }
}

/* ---------- desktop ≥ 900 (12-col grid, DESIGN §5.1 "Desktop Live") ---------- */
@media (min-width: 900px) and (min-height: 521px) {
  .live--desk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
  .live--desk .live__strips { grid-column: span 12; margin: 0; }
  .live--desk .live__strips:empty { display: none; }
  .live--desk .live__retry { grid-column: span 12; margin: 0; }
  .live--desk .live__strip { margin: 0; border-radius: var(--r-md); }
  .live--desk .live__attention { grid-column: span 4; margin: 0; }
  .live--desk .live__attention .attention { margin: 0; height: 100%; }
  .live--desk .live__hero { grid-column: span 8; }
  .live--desk.live--noatt .live__hero { grid-column: span 12; }
  .live--desk .live__stats.stat-grid { grid-column: span 12; grid-template-columns: repeat(6, 1fr); margin: 0; }
  .live--desk .live__onshift { grid-column: span 5; margin: 0; }
  .live--desk .live__right { grid-column: span 7; margin: 0; gap: 20px; }
  .live--desk .live__right .live__chron { order: 1; margin: 0; }
  .live--desk .live__right .live__moves { order: 2; margin: 0; }
  .live--desk .live__recent { grid-column: span 12; margin: 0; }
  /* Bitta ustun / одна колонка: две (1fr 1fr) не сжимали строку уже её текста и вылезали поверх
     списка выездов справа (владелец, 24.09.2026). */
  .live--desk .live__people-2 { grid-template-columns: minmax(0, 1fr); }
  .live--desk .live__hero .hero__spark { display: block; }
  .live--desk .live__hero .hero__value, .live--desk .live__hero .hero__delta, .live--desk .live__hero .hero__breakdown, .live--desk .live__hero .byline { max-width: calc(100% - 240px); }
  .live--desk .live__skel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; }
  .live--desk .live__skel .skeleton--hero { grid-column: span 12; }
  .live--desk .live__skel .skeleton--stat { grid-column: span 12; grid-template-columns: repeat(6, 1fr); }
  .live--desk .live__skel .skeleton--row { grid-column: span 5; }
  .live--desk .live__chron .daystrip { padding: 8px 0 4px; }
}

/* ---------- reduced motion ---------- */
html[data-motion="reduced"] .live .is-new, html[data-motion="reduced"] .live .attention__item.is-new, html[data-motion="reduced"] .live.enter .live__hero, html[data-motion="reduced"] .live.enter .live__stats > *, html[data-motion="reduced"] .live.enter .live__onshift, html[data-motion="reduced"] .live.enter .live__right, html[data-motion="reduced"] .live.enter .live__recent { animation: fadeIn 120ms both; }
html[data-motion="reduced"] .live .is-removing { animation: fadeOut 120ms forwards; }
html[data-motion="reduced"] .person.live__person .person__progress i { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .live .is-new, .live .attention__item.is-new, .live.enter .live__hero, .live.enter .live__stats > *, .live.enter .live__onshift, .live.enter .live__right, .live.enter .live__recent { animation: fadeIn 120ms both; }
  .live .is-removing { animation: fadeOut 120ms forwards; }
  .person.live__person .person__progress i { transition: none; }
}