/* Пульт оператора: единственный слой темы и компоненты.
 *
 * Бриф (решено до вёрстки, см. docs/design.md):
 *   область      финансовые операции, внутренний инструмент одного-двух операторов;
 *   аудитория    оператор-эксперт, телефон и ноутбук, ночные смены;
 *   настроение   точный и спокойный: ничего не кричит, кроме одной кнопки;
 *   движение     только отклик на действие, без украшений;
 *   раскладка    лента сводки → асимметричный сплит (сделка | рубли и чек) → индекс сделок;
 *   ориентир     архетип «high-end agency» (linear-app): нейтрали несут всё, один акцент.
 *
 * Три слоя токенов: примитивы (палитра) → семантика (назначение) → компоненты.
 * Разметка обращается только к семантике и компонентам. Тёмная тема меняет
 * семантику, примитивы те же. Ни одного цвета вне этого файла.
 */

:root {
  color-scheme: light;

  /* --- примитивы: холодные нейтрали с лёгким синим уклоном ------------------ */
  --n-0: #ffffff;
  --n-50: #f6f7f9;
  --n-100: #edeff3;
  --n-200: #e0e4ea;
  --n-300: #c6ccd6;
  --n-500: #6b7484;
  --n-600: #5a6372;
  --n-800: #2b303a;
  --n-900: #161920;
  --indigo-300: #a3abff;
  --indigo-500: #525ed9;
  --indigo-600: #4450c4;
  --indigo-700: #3842a6;
  --green-100: #e1f4e8;
  --green-400: #5fd48a;
  --green-700: #1b7a43;
  --amber-100: #fff0d4;
  --amber-400: #f2bd63;
  --amber-700: #8f5300;
  --red-100: #fde8e6;
  --red-400: #f3928b;
  --red-600: #c0382f;
  --red-700: #a12f28;

  /* --- семантика: поверхности и текст ------------------------------------- */
  --surface-page: var(--n-50);
  --surface-card: var(--n-0);
  --surface-raised: var(--n-100);
  --surface-inset: var(--n-50);
  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-on-action: var(--n-0);
  --text-link: var(--indigo-600);
  --border-default: var(--n-200);
  --border-strong: var(--n-500);   /* существенные границы: поля и кнопки, не меньше 3:1 */

  /* --- семантика: действия (по смыслу, не по цвету) ----------------------- */
  --action-primary: var(--indigo-500);
  --action-primary-hover: var(--indigo-600);
  --action-primary-active: var(--indigo-700);
  --action-danger: var(--red-600);
  --action-danger-hover: var(--red-700);

  /* --- семантика: обратная связь (отдельно от акцента) -------------------- */
  --success-bg: var(--green-100);
  --success-text: var(--green-700);
  --warning-bg: var(--amber-100);
  --warning-text: var(--amber-700);
  --error-bg: var(--red-100);
  --error-text: var(--red-700);
  --info-bg: var(--n-100);
  --info-text: var(--n-800);

  /* --- глубина -------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(22, 27, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 27, 40, 0.08);
  --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--action-primary);

  /* --- шрифт и шкала (большая терция 1,25) ---------------------------------- */
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-5xl: 3rem;
  --text-display: clamp(2.75rem, 9vw, 4.25rem);
  --leading-tight: 1.1;
  --leading-normal: 1.5;

  /* --- ритм 4px -------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* --- форма -------------------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-full: 9999px;
  --control: 2.75rem;        /* 44px: цель для пальца */
  --control-lg: 3.75rem;     /* главная кнопка */
  --hairline: 1px;

  /* --- движение ------------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --opacity-disabled: 0.5;
}

/* Тёмная тема: спроектирована, а не инвертирована. Акцент светлее и тише,
 * глубина через более светлые поверхности, не через тени. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: #0f1116;
    --surface-card: #171a21;
    --surface-raised: #1f232c;
    --surface-inset: #121419;
    --text-primary: #eef0f4;
    --text-secondary: #a6adba;
    --text-tertiary: #7f8794;
    --text-on-action: #0f1116;
    --text-link: var(--indigo-300);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.34);
    --action-primary: #8d96ff;
    --action-primary-hover: #a3abff;
    --action-primary-active: #7a84f5;
    --action-danger: var(--red-400);
    --action-danger-hover: #f7a8a2;
    --success-bg: #14301f;
    --success-text: var(--green-400);
    --warning-bg: #352607;
    --warning-text: var(--amber-400);
    --error-bg: #3b1512;
    --error-text: var(--red-400);
    --info-bg: var(--surface-raised);
    --info-text: var(--text-primary);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0f1116;
  --surface-card: #171a21;
  --surface-raised: #1f232c;
  --surface-inset: #121419;
  --text-primary: #eef0f4;
  --text-secondary: #a6adba;
  --text-tertiary: #7f8794;
  --text-on-action: #0f1116;
  --text-link: var(--indigo-300);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.34);
  --action-primary: #8d96ff;
  --action-primary-hover: #a3abff;
  --action-primary-active: #7a84f5;
  --action-danger: var(--red-400);
  --action-danger-hover: #f7a8a2;
  --success-bg: #14301f;
  --success-text: var(--green-400);
  --warning-bg: #352607;
  --warning-text: var(--amber-400);
  --error-bg: #3b1512;
  --error-text: var(--red-400);
  --info-bg: var(--surface-raised);
  --info-text: var(--text-primary);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================================================ */
/* База                                                                          */
/* ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font: 400 var(--text-base) / var(--leading-normal) var(--font-sans);
  font-feature-settings: "cv01", "ss03";
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.icon {
  width: 1.125em; height: 1.125em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}

/* ============================================================================ */
/* Каркас: шапка, сетка, подвал                                                  */
/* ============================================================================ */

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-card);
  border-bottom: var(--hairline) solid var(--border-default);
}
.top__brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; letter-spacing: -0.01em; }
.top__brand .icon { color: var(--action-primary); width: 1.4em; height: 1.4em; }
.top__sub { font-weight: 400; color: var(--text-tertiary); font-size: var(--text-sm); }
.top__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); }
.top__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* На телефоне шапка переносится в три ряда: не прибиваем её, чтобы не съедала экран. */
@media (max-width: 56rem) { .top { position: static; padding-inline: var(--space-4); } }

.page {
  max-width: 68rem; margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-inline: var(--space-6); gap: var(--space-6); }
  .page > .span { grid-column: 1 / -1; }
}
.rail { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }

.foot {
  max-width: 68rem; margin: 0 auto; padding: 0 var(--space-4) var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between;
  color: var(--text-tertiary); font-size: var(--text-sm);
}

/* ============================================================================ */
/* Карточки и типографика                                                        */
/* ============================================================================ */

.card {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
}
/* Ведущая карточка: только у неё тень и сильная граница. Глаз садится сюда. */
.card--lead { padding: var(--space-6); box-shadow: var(--shadow-md); }

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.display {
  margin: 0; font-size: var(--text-display); line-height: var(--leading-tight); font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.display small { font-size: 0.5em; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; margin-left: 0.15em; }
.figure { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meta { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.meta .num { color: var(--text-primary); }
.muted { color: var(--text-secondary); }
.hint { color: var(--text-tertiary); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.stack { display: grid; gap: var(--space-3); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row > * { min-width: 0; }

/* ============================================================================ */
/* Сделка в работе                                                               */
/* ============================================================================ */

.deal__warnings { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.deal__warnings li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--warning-bg); color: var(--warning-text);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.deal__warnings .icon { margin-top: 0.15em; }

.qr {
  margin: var(--space-6) auto;
  width: min(100%, 22rem);
  padding: var(--space-4);
  background: var(--n-0);          /* QR всегда чёрный на белом: так читает любой сканер */
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-md);
}
.qr svg { display: block; width: 100%; height: auto; }
.qr__hint { text-align: center; margin: 0 0 var(--space-6); }

.waiting {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--info-bg); color: var(--info-text);
  border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.waiting .icon { color: var(--text-secondary); }
.waiting time { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Пустое состояние занимает карточку целиком и говорит, что будет дальше. */
.empty { display: grid; gap: var(--space-3); padding: var(--space-10) var(--space-2); text-align: center; justify-items: center; }
.empty .icon { width: 2.5rem; height: 2.5rem; color: var(--text-tertiary); stroke-width: 1.5; }
.empty h2 { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.empty p { margin: 0; max-width: 34ch; color: var(--text-secondary); }

/* ============================================================================ */
/* Кнопки: восемь состояний                                                       */
/* ============================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control); padding: 0 var(--space-4);
  border: var(--hairline) solid transparent; border-radius: var(--radius-md);
  font: 500 var(--text-base) / 1 var(--font-sans); color: var(--text-primary);
  background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: var(--opacity-disabled); pointer-events: none; }

.btn--primary { background: var(--action-primary); color: var(--text-on-action); }
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--primary:active { background: var(--action-primary-active); }

.btn--secondary { border-color: var(--border-strong); background: var(--surface-card); }
.btn--secondary:hover { background: var(--surface-raised); }

.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); }

.btn--icon { width: var(--control); padding: 0; }

/* Главная кнопка экрана: одна, крупная, на всю ширину карточки. */
.btn--lead { width: 100%; min-height: var(--control-lg); font-size: var(--text-xl); font-weight: 600; border-radius: var(--radius-lg); }

/* Загрузка: кнопка остаётся в полную силу, иконка уступает место спиннеру. */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .icon { display: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 1.125em; height: 1.125em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ============================================================================ */
/* Переключатель смены: состояние несёт дорожка, двигается ползунок                 */
/* ============================================================================ */

.switch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--control); padding: 0 var(--space-2) 0 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--text-sm) / 1 var(--font-sans); color: var(--text-primary); border-radius: var(--radius-sm);
}
.switch__track {
  width: 2.75rem; height: 1.625rem; flex: none; padding: 0.1875rem; /* ds-allow-hardcode: вставка ползунка меньше шага ритма */
  border-radius: var(--radius-full);
  background: var(--surface-raised); box-shadow: inset 0 0 0 var(--hairline) var(--border-strong);
  display: flex; align-items: center;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.switch__thumb {
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full);
  background: var(--surface-card); box-shadow: var(--shadow-sm), 0 0 0 var(--hairline) var(--border-strong);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] .switch__track { background: var(--success-text); box-shadow: none; }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(1.125rem); box-shadow: var(--shadow-sm); }
.switch[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ============================================================================ */
/* Формы                                                                           */
/* ============================================================================ */

.field { display: grid; gap: var(--space-2); min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.input {
  width: 100%; min-width: 0; height: var(--control); padding: 0 var(--space-3);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-primary); font: inherit; font-variant-numeric: tabular-nums;
}
.input::placeholder { color: var(--text-tertiary); }
.input--file { padding: var(--space-2) var(--space-3); height: auto; line-height: 1.2; font-size: var(--text-sm); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.form-row--stack { grid-template-columns: minmax(0, 1fr); }

/* ============================================================================ */
/* Обратная связь: баннер с иконкой, без цветной полосы слева                        */
/* ============================================================================ */

.flash {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.flash .icon { margin-top: 0.1em; }
.flash--ok { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.flash--fail { background: var(--error-bg); color: var(--error-text); border-color: transparent; }

/* ============================================================================ */
/* Статус: точка + слово, цвет не единственный носитель                            */
/* ============================================================================ */

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); min-height: 1.5rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
  background: var(--info-bg); color: var(--info-text);
}
.pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: currentColor; }
.pill--processing { background: var(--warning-bg); color: var(--warning-text); }
.pill--completed { background: var(--success-bg); color: var(--success-text); }
.pill--canceled, .pill--disputed, .pill--refunded { background: var(--error-bg); color: var(--error-text); }

/* ============================================================================ */
/* Таблица сделок                                                                   */
/* ============================================================================ */

.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: middle; border-top: var(--hairline) solid var(--border-default); white-space: nowrap; }
th { color: var(--text-tertiary); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; border-top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.tnum { font-variant-numeric: tabular-nums; }
tr:first-child td { border-top: 0; }

/* ============================================================================ */
/* Вход                                                                             */
/* ============================================================================ */

.login { max-width: 22rem; margin: 12vh auto; display: grid; gap: var(--space-4); }
.login h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.login .error { color: var(--error-text); font-size: var(--text-sm); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; }
}