/* Консоль оператора: поверх mockup/css/core.css (те же токены и компоненты). Свой акцент — индиго, чтобы не спутать с кабинетом реселлера. */
:root { --accent: #3b4cc0; --accent-soft: #e2e6fb; --accent-fg: #ffffff; --up: #b3261e; --down: #1f7a4d; --new: #3b4cc0; --gone: #7a5a00 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #97a3ff; --accent-soft: #23295a; --accent-fg: #0b1030; --up: #f08a80; --down: #5fcf93; --new: #97a3ff; --gone: #e8b04f } }
:root[data-theme="dark"] { --accent: #97a3ff; --accent-soft: #23295a; --accent-fg: #0b1030; --up: #f08a80; --down: #5fcf93; --new: #97a3ff; --gone: #e8b04f }
:root[data-theme="light"] { color-scheme: light }

.a-app .main { max-width: 1240px }
.a-logo { background: linear-gradient(135deg, var(--accent), #7b4cc0) }
.a-top-r { gap: 6px; flex-wrap: nowrap }
.a-top-r .chip { min-height: 30px }
button.chip[data-a-theme] { border: 1px solid var(--line); background: var(--surface) }
.a-hide-s { }
@media (max-width: 640px) { .a-hide-s { display: none } }

/* Меню: бейдж, «Ещё» на телефоне */
.side nav button, .tabbar button { position: relative }
.side nav button { text-align: left; align-items: center }
.side nav button span { flex: 1 }
.side nav .a-badge { flex: none; align-self: center }
.a-badge { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--bad); color: #fff; border-radius: 999px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px }
.side nav .a-badge { margin-left: auto }
.tabbar .a-badge { position: absolute; top: 4px; right: calc(50% - 22px) }
.a-sheet-bg { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 15; display: grid; place-items: end center }
.a-sheet { background: var(--surface); width: 100%; border-radius: 14px 14px 0 0; padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px }
.a-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.a-sheet-grid button { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-height: 48px; text-align: left; font-size: 14px }
.a-sheet-grid button[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent) }
.a-sheet-grid svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }
.a-sheet-grid .a-badge { margin-left: auto }
@media (min-width: 900px) { .a-sheet-bg { display: none !important } }

/* Метки «куда идёт действие» */
.a-via { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-family: var(--font-num); white-space: nowrap; vertical-align: middle }
.a-via-mor { background: var(--accent-soft); color: var(--accent) }
.a-via-back { background: var(--ok-soft); color: var(--ok) }
.a-via-db { background: var(--warn-soft); color: var(--warn) }
.a-via-soon { border: 1px dashed var(--line) }

/* Мелочи */
.a-spark { color: var(--accent); fill: currentColor; display: block }
.a-ava { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; background: hsl(var(--h) 55% 45%); flex: none }
.a-sw { display: inline-flex; gap: 10px; align-items: center; cursor: pointer }
.a-ta { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); padding: 10px; font-size: 12.5px; resize: vertical }
.a-danger { background: var(--bad); border-color: var(--bad); color: #fff }
.a-danger:disabled { opacity: .45 }
.a-bad-ico { background: var(--bad-soft); color: var(--bad) }
.a-dev { margin-top: 26px }
.a-muted { color: var(--muted) }
.a-up { color: var(--up) } .a-down { color: var(--down) } .a-new { color: var(--new) } .a-gone { color: var(--gone) }
.a-loss td { background: var(--bad-soft) }
.a-loss td:first-child { box-shadow: inset 3px 0 0 var(--bad) }
.a-changed { background: var(--accent-soft) !important }
.a-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 14px }
.a-tabs::-webkit-scrollbar { display: none }
.a-tabs button { border: 0; background: none; padding: 10px 12px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; min-height: 42px }
.a-tabs button[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent) }
.a-tabs button .chip { margin-left: 6px; padding: 1px 7px }
.a-steps { display: flex; gap: 6px; flex-wrap: wrap; counter-reset: st }
.a-steps span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2) }
.a-steps span::before { counter-increment: st; content: counter(st); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--fg); font-size: 12px; font-weight: 700 }
.a-steps span.on { color: var(--accent); background: var(--accent-soft) }
.a-steps span.on::before { background: var(--accent); color: var(--accent-fg) }
.a-steps span.done::before { content: "✓"; background: var(--ok); color: #fff }
.a-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px 16px; display: grid; gap: 10px; justify-items: center; text-align: center; background: var(--surface) }
.a-drop.over { border-color: var(--accent); background: var(--accent-soft) }
.a-file { position: relative; overflow: hidden }
.a-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.a-map { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.a-map select, .a-in { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 100%; min-width: 0 }
.a-in.sm { padding: 4px 6px; width: 84px; text-align: right; font-family: var(--font-num) }
.a-in.xs { padding: 4px 6px; width: 56px; text-align: right; font-family: var(--font-num) }
td .a-in.sm, td .a-in.xs { min-height: 32px }
.a-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; font-size: 12.5px; background: var(--surface); white-space: nowrap }
.a-pill.off { opacity: .45; text-decoration: line-through }
.a-pill i { font-style: normal; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 60% 48%) }
.a-pill b { font-family: var(--font-num); font-weight: 600 }
.a-route { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.a-q { display: inline-flex; gap: 8px; font-family: var(--font-num); font-size: 12.5px }
.a-q .bad { color: var(--bad); font-weight: 600 }
.a-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px }
.a-kv dt { color: var(--muted) } .a-kv dd { margin: 0; min-width: 0 }
.a-field-ex { border-left: 3px solid var(--accent); padding-left: 10px }
.a-def { font-size: 12px; color: var(--muted) }
.a-def button { border: 0; background: none; color: var(--accent); padding: 0; font-size: 12px; text-decoration: underline; cursor: pointer }
.a-row-click { cursor: pointer }
.a-row-click:hover td { background: var(--surface-2) }
.a-sticky { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 4; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 14px; box-shadow: 0 6px 20px rgb(0 0 0 / .12) }
@media (min-width: 900px) { .a-sticky { bottom: 12px } }
.a-mini { font-size: 12px; color: var(--muted) }
.a-matrix td, .a-matrix th { text-align: center }
.a-matrix td:first-child, .a-matrix th:first-child { text-align: left }

/* Вход «как реселлер»: кабинет реселлера во весь экран, сверху полоса оператора */
.a-imp { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-rows: auto 1fr }
.a-imp-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px max(12px, env(safe-area-inset-left, 0px)); background: repeating-linear-gradient(135deg, var(--warn-soft) 0 14px, var(--surface) 14px 28px); border-bottom: 2px solid var(--warn) }
.a-imp iframe { width: 100%; height: 100%; border: 0; background: var(--bg) }

/* Таблицы на телефоне: карточки (подпись из data-l) */
@media (max-width: 640px) {
  table.a-cards thead { display: none }
  table.a-cards, table.a-cards tbody, table.a-cards tr, table.a-cards td { display: block; width: 100% }
  table.a-cards tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface) }
  table.a-cards td { border: 0; padding: 3px 0; white-space: normal; display: flex; justify-content: space-between; gap: 10px; text-align: right }
  table.a-cards td::before { content: attr(data-l); color: var(--muted); font-size: 12px; text-align: left }
  table.a-cards td.a-c-head { font-weight: 600; font-size: 15px; justify-content: flex-start; text-align: left }
  table.a-cards td.a-c-head::before { content: none }
  table.a-cards .a-x { display: none }
  .tablewrap:has(table.a-cards) { margin: 0; padding: 0 }
}
/* Второстепенные колонки широких таблиц — только на больших экранах */
@media (max-width: 1399px) { .a-wide { display: none } }
.a-app .item > * { min-width: 0 }
@media (max-width: 640px) { .a-via { white-space: normal; overflow-wrap: anywhere } .a-kv { grid-template-columns: 1fr } .a-kv dd { margin-bottom: 6px } }
.a-cv { display: inline-block }
@media (max-width: 640px) { table.a-cards .a-cv { display: block; min-width: 0 } table.a-cards .a-cv .chip { white-space: normal; text-align: left } }
/* Телефон: поля и метки-кнопки не ниже 40 px (QA T1-admin-touch) */
@media (max-width: 899px) {
  .a-app .a-in, .a-app select, .a-app .field input:not([type="checkbox"]):not([type="radio"]), .a-app .search, .a-app textarea { min-height: 40px }
  .a-app td .a-in.sm, .a-app td .a-in.xs, .a-app .a-pill .a-in.xs { min-height: 40px }
  .a-app button.chip, .a-file, .a-app .btn.ghost { min-height: 40px }
}

/* живой режим: раздел ещё на примерных данных макета (live.js liveMockBanner) */
.a-live-mock { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); font-weight: 500 }

/* Меню по модели оптовика: основное сверху, «Ещё» (сообщения, сотрудники, журнал, настройки) группой ниже */
.side nav .a-nav-more { margin: 14px 10px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }

/* Окно сообщения (toast() → «ОК»): поверх обычных окон и листов */
.alertbox-bg { z-index: 60; place-items: center; padding: 16px }
.alertbox { width: min(440px, 100%); max-height: 80vh; overflow: auto }
.alertbox-msg { margin: 0 0 10px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap }
.alertbox-act { display: flex; justify-content: flex-end; margin-top: 4px }