/* ============================================================================
   YOTO KIPER CONTROL — оформление интерфейса.

   До этой версии файл лежал шестью историческими слоями: 107 селекторов были
   объявлены по нескольку раз, побеждало последнее объявление, а последний слой
   («neon-lime») состоял из сорока `!important`. Слои не схлопывали намеренно —
   механическое слияние меняет каскад, и проверить его можно только глазами.

   Здесь слоёв больше нет. Файл переписан под макет `design/Kiper-Dashboard.html`
   целиком, поэтому визуальная проверка уже проведена и каскад начат с чистого
   листа. Правило на будущее: один селектор — одно объявление. Если хочется
   переопределить правило ниже по файлу, вместо этого поправьте его на месте.

   Порядок разделов:
     1. Шрифт            2. Токены        3. База
     4. Каркас админки   5. Компоненты    6. Экраны
     7. Киоск КИПЕРа     8. Вход          9. Виджеты из JS      10. Адаптив

   Инлайновые стили запрещены: CSP задаёт `style-src 'self'` без `'unsafe-inline'`
   (см. src/bootstrap.php). Любое оформление живёт только здесь.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. Шрифт. Вариативный Golos Text, ось wght 400–700, четыре подмножества.
   Файлы лежат в public/assets/fonts (CSP запрещает внешние источники);
   диапазоны unicode-range взяты из выдачи Google Fonts дословно, поэтому
   браузер качает только те файлы, чьи символы встретились на странице.
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/golos-text-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ----------------------------------------------------------------------------
   2. Токены — единственный источник значений. Блок :root должен остаться
   единственным: это проверяет BrowserContractTest. Значение --nav обязано
   совпадать с <meta name="theme-color"> в src/views/layout.php — там же тест.
   ---------------------------------------------------------------------------- */
:root {
  /* поверхности и текст */
  --bg: #f1f3f2;
  --panel: #ffffff;
  --ink: #0d1b24;
  --muted: #556570;
  --muted-2: #586870;
  --line: #e4e8e7;
  --divider: #eef1f0;
  --divider-soft: #f5f7f6;
  --field-line: #d5dcdb;
  --head-line: #e1e6e5;
  --seg-bg: #e7ebea;
  --track: #edf0ef;

  /* фирменный лаймовый акцент: только как фон, текстом он нечитаем */
  --accent: #d6f04a;
  --accent-hover: #c9e93a;
  --accent-line: #c2dc33;
  --accent-soft: #f6fbdf;
  --accent-ink: #0a1922;
  --link: #1c5c7a;

  /* тёмная навигация */
  --nav: #0a1922;
  --nav-hover: #12262f;
  --nav-active: #16303c;
  --nav-line: #223b47;
  --nav-ink: #e9eef0;
  --nav-item: #c3d1d7;
  --nav-title: #8298a1;
  --nav-muted: #7e939e;

  /* семантические цвета состояний */
  --green: #14663f;
  --green-soft: #e9f5ee;
  --green-line: #c4e3d2;
  --red: #b3261e;
  --red-soft: #fbeae8;
  --red-line: #f0c8c4;
  --yellow: #96600c;
  --yellow-soft: #fdf3e3;
  --yellow-mark: #e08a16;
  --blue: #1c5c7a;
  --blue-soft: #eaf2f6;

  /* геометрия */
  --r-card: 14px;
  --r-btn: 10px;
  --r-field: 9px;
  --r-nav: 8px;
  --r-pill: 999px;

  /* тени и фокус */
  --shadow: 0 1px 2px rgba(13, 27, 36, .05);
  --shadow-soft: 0 4px 14px rgba(13, 27, 36, .06);
  --shadow-modal: 0 18px 44px rgba(10, 25, 34, .22);
  --focus: 0 0 0 3px rgba(10, 25, 34, .12);

  /* типографика */
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}


/* ----------------------------------------------------------------------------
   3. База.
   ---------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; min-height: 100vh; background: var(--bg); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 21px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; border-radius: var(--r-btn); padding: 11px 16px; cursor: pointer; font-weight: 600; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: #46565e; }

input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-field);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}
input::placeholder, textarea::placeholder { color: #6c7c84; }
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #bcc7c5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nav); box-shadow: var(--focus); }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); }

button, .navitem, .quick, .choice-card, .employee-type-card, .easy-action,
.management-row, .secondary-action, .excel-export-button, .edit-vehicle-action {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

/* Кнопки. .primary — тёмная (главное действие формы), .accent — лаймовая. */
.primary { background: var(--nav); color: #fff; border: 1px solid var(--nav); }
.primary:hover { background: var(--nav-active); border-color: var(--nav-active); }
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-btn);
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}
.secondary-action:hover { border-color: var(--nav); color: var(--ink); }
.giant { min-height: 52px; font-size: 16px; }
.success-btn { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); }
.success-btn:hover { background: #ddeee4; }
.danger-btn { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); }
.danger-btn:hover { background: #f6dcd9; }


/* ----------------------------------------------------------------------------
   4. Каркас админки: тёмный сайдбар + main со «липкой» шапкой.

   Свёрнутое состояние задаётся классом на <html> (его ставит инлайновый скрипт
   в <head> до отрисовки, чтобы сайдбар не «прыгал»), поэтому селекторы начинаются
   с .is-sidebar-collapsed — переключать класс на <html> дешевле, чем на .layout.
   ---------------------------------------------------------------------------- */

.layout { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
  flex: 0 0 252px;
  width: 252px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  background: var(--nav);
  color: var(--nav-ink);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
  transition: width .18s ease, flex-basis .18s ease;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: var(--r-pill); }

.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.sidebar-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.sidebar-brand { min-width: 0; flex: 1; }
.sidebar-brand strong { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sidebar-brand span { display: block; font-size: 11px; color: var(--nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-toggle {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--nav-line);
  border-radius: 7px;
  color: #8ca3ad;
}
.sidebar-toggle:hover { border-color: var(--accent); color: var(--accent); }
.sidebar-toggle svg { transition: transform .18s ease; }

.sidebar-nav { display: flex; flex-direction: column; gap: 20px; }
.nav-section { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-section-title {
  padding: 0 8px 6px;
  color: var(--nav-title);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-nav);
  color: var(--nav-item);
  font-weight: 500;
}
.navitem:hover { background: var(--nav-hover); color: #fff; }
.navitem.active { background: var(--nav-active); color: var(--accent); font-weight: 600; }
.nav-icon { flex: 0 0 17px; display: grid; place-items: center; }
.nav-icon svg { display: block; }
.nav-label { flex: 1; min-width: 0; }
.nav-badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 8px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #7c929b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
}
.sidebar-footer small { font-size: 10px; }

/* Свёрнутый сайдбар: 72px, только иконки. */
.is-sidebar-collapsed .sidebar { flex-basis: 72px; width: 72px; padding-left: 10px; padding-right: 10px; }
.is-sidebar-collapsed .sidebar-head { flex-direction: column; gap: 12px; }
.is-sidebar-collapsed .sidebar-brand,
.is-sidebar-collapsed .nav-section-title,
.is-sidebar-collapsed .nav-label,
.is-sidebar-collapsed .nav-badge,
.is-sidebar-collapsed .sidebar-footer span { display: none; }
.is-sidebar-collapsed .navitem { justify-content: center; padding: 9px 0; }
.is-sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.is-sidebar-collapsed .sidebar-footer { flex-direction: column; }

/* Шапка контента. */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 28px;
  border-bottom: 1px solid var(--head-line);
  background: rgba(241, 243, 242, .92);
  backdrop-filter: blur(8px);
}
.page-title { min-width: 0; flex: 1; }
.page-title h1 { margin: 0; }
.page-subtitle { margin-top: 2px; font-size: 12px; color: var(--muted); }
.content-body {
  width: 100%;
  max-width: 1500px;
  padding: 22px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Переключатель языка — сегмент-контрол. */
.language-switch { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-nav); background: var(--seg-bg); }
.language-switch a {
  min-width: 44px;
  padding: 5px 11px;
  border-radius: 6px;
  text-align: center;
  color: #46565e;
  font-size: 12px;
  font-weight: 600;
}
.language-switch a:hover { color: var(--ink); }
.language-switch a.active { background: var(--nav); color: #fff; }

.userbox { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid #dde3e2; }
.userbox-copy { display: flex; flex-direction: column; line-height: 1.25; }
.userbox-copy strong { font-size: 13px; font-weight: 600; }
.userbox-copy span { font-size: 11px; color: var(--muted); }
.userbox form { display: inline; }
.logout-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 6px 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-nav);
  background: transparent;
  color: #46565e;
  font-size: 12px;
  font-weight: 600;
}
.logout-button:hover { border-color: var(--nav); color: var(--nav); }

.avatar {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nav);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}
.avatar.small { width: 40px; height: 40px; font-size: 14px; }
.avatar.mini { width: 30px; height: 30px; font-size: 12px; }


/* ----------------------------------------------------------------------------
   5. Компоненты.
   ---------------------------------------------------------------------------- */

/* Флеш-сообщение. */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 500;
}
.flash > span { flex: 1; min-width: 0; }
.flash.success { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.flash.error { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.flash-close { padding: 2px 4px; display: grid; place-items: center; background: transparent; color: inherit; opacity: .7; }
.flash-close:hover { opacity: 1; }

/* Карточка-панель. */
.panel {
  padding: 18px 22px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  /* Шапка, таблицы и пагинатор выходят за padding карточки — скругление их обрезает. */
  overflow: hidden;
}
/* Шапка, таблицы и пагинатор идут во всю ширину карточки: гасят её отступы. */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: -18px -22px 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--divider);
}
.panel-head h2 { margin: 0; }
.panel-head span { color: var(--muted-2); font-size: 12px; }
.panel-head a { font-size: 12px; font-weight: 600; }
.panel > .table-wrap { margin-left: -22px; margin-right: -22px; }
.panel > .table-wrap:last-child { margin-bottom: -20px; }
.panel > .pager { margin: 0 -22px -20px; }
.panel > .empty:only-child, .panel > .empty:last-child { margin-bottom: -6px; }

.metric-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted-2); text-transform: uppercase; }
.metric-value { margin-top: 4px; font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-value.small { font-size: 24px; font-weight: 600; }

/* Сетка дашборда: карточки сами перестраиваются под ширину. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.card-grid.wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.stat-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stat-card-head > div:last-child { text-align: right; }

/* Составная полоса «в зоне / у сотрудников». */
.fund-bar { height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--track); }
.fund-bar svg { display: block; width: 100%; height: 100%; }
.fund-seg-zone { fill: var(--nav); }
.fund-seg-staff { fill: var(--accent); }
.fund-legend { display: flex; flex-direction: column; }
.fund-legend-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.fund-legend-row:last-child { border-bottom: 0; }
.fund-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 3px; }
.fund-dot.zone { background: var(--nav); }
.fund-dot.staff { background: var(--accent-line); }
.fund-legend-row b { flex: 1; font-weight: 500; }
.fund-legend-pct { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.fund-legend-count { min-width: 52px; text-align: right; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Карточка расхождения. */
.diff-value { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.diff-value strong { font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.diff-value span { font-size: 13px; color: var(--muted-2); }
.diff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.diff-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.diff-chip.good { background: var(--green-soft); color: var(--green); }
.diff-chip.bad { background: var(--red-soft); color: var(--red); }
.diff-chip.warn { background: var(--yellow-soft); color: var(--yellow); }
.diff-value.good strong { color: var(--green); }
.diff-value.bad strong { color: var(--red); }
.diff-value.warn strong { color: var(--yellow); }
.diff-note { padding-top: 12px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--muted); }
.diff-actions { display: flex; gap: 10px; margin-top: auto; }
.diff-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--r-btn);
  font-weight: 600;
}
.diff-actions .issue { background: var(--accent); border: 1px solid var(--accent-line); color: var(--accent-ink); }
.diff-actions .issue:hover { background: var(--accent-hover); }
.diff-actions .receive { background: var(--panel); border: 1px solid var(--field-line); color: var(--ink); }
.diff-actions .receive:hover { border-color: var(--nav); }

/* Строка сверки зоны: поле · комментарий · кнопка. */
.reconcile-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto; gap: 14px; align-items: end; }
.reconcile-form input[type="number"] { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.reconcile-form button { white-space: nowrap; }

/* «Последние операции» — не таблица, а сетка: так в макете. */
.ops-table { display: flex; flex-direction: column; }
.ops-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr) 62px 116px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider-soft);
  font-size: 13px;
}
.ops-row:last-child { border-bottom: 0; }
.ops-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-row.head {
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--divider);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ops-time { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ops-kind { font-weight: 500; }
.ops-who { color: #46565e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-qty { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-state { font-size: 12px; font-weight: 600; }
.ops-state.good { color: var(--green); }
.ops-state.warn { color: var(--yellow); }
.ops-state.bad { color: var(--red); }

/* Формы. */
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: end; }
.big-form { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px; }
.big-form .giant, .big-form .signature-panel { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.quantity { font-size: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.checkbox-line { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 0; font-weight: 600; }
.checkbox-line input { width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 1px 0 0; padding: 0; }
.soft-rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.search-note { margin: -6px 0 12px; color: var(--muted); font-size: 12px; }

/* Таблицы. */
.table-wrap { overflow: auto; border-radius: var(--r-card); }
table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--panel); }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--divider); }
th {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--divider-soft); }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.empty.large { min-height: 240px; display: grid; place-items: center; }

.qty-badge {
  display: inline-flex;
  min-width: 46px;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: #4f5c14;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status-chip { display: inline-flex; padding: 5px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.status-chip.good { background: var(--green-soft); color: var(--green); }
.status-chip.danger { background: var(--red-soft); color: var(--red); }
.status-chip.warn { background: var(--yellow-soft); color: var(--yellow); }

/* Команды. */
.command-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider-soft);
}
.command-row:last-child { border-bottom: 0; }
.command-mark { width: 3px; align-self: stretch; flex: 0 0 3px; border-radius: var(--r-pill); background: #c6cfce; }
.priority-high .command-mark { background: var(--yellow-mark); }
.priority-critical .command-mark { background: var(--red); }
.command-body { flex: 1; min-width: 0; }
.command-body b { font-weight: 600; }
.command-body p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ack-button {
  padding: 6px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ack-button:hover { border-color: var(--nav); }
.ack-button.done { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
/* Карточка на странице «Команды»: приоритет читается по левой полосе, как в списке. */
.command-card {
  display: block;
  padding: 14px 0 16px 16px;
  border-left: 3px solid #c6cfce;
  border-bottom: 1px solid var(--divider-soft);
}
.command-card:last-child { border-bottom: 0; }
.command-card.priority-high { border-left-color: var(--yellow-mark); }
.command-card.priority-critical { border-left-color: var(--red); }
.command-card h3 { margin: 0 0 4px; }
.command-card p { margin: 0; color: var(--muted); }
.command-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.command-meta span { padding: 4px 8px; border-radius: var(--r-pill); background: var(--divider); font-size: 11px; font-weight: 600; color: var(--muted-2); }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inline-actions button { padding: 8px 12px; font-size: 13px; }
.inline-actions button:not(.success-btn):not(.danger-btn) { background: var(--divider); color: var(--ink); }
.inline-actions button:not(.success-btn):not(.danger-btn):hover { background: var(--seg-bg); }

/* Недостачи. */
.incident { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 12px; background: var(--panel); }
.incident.open { border-color: var(--red-line); background: #fffbfb; }
.incident.resolved { border-color: var(--green-line); background: #fbfefc; }
.incident-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.incident-title b { font-size: 16px; }
.incident-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.incident-facts span { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-nav); background: var(--panel); font-size: 12px; }
.resolution-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.resolve-form { display: flex; gap: 10px; margin-top: 12px; }

/* Журнал и выгрузка. */
.report-filter-form { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.report-filter-actions { display: flex; gap: 10px; align-items: center; }
.excel-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--green);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.excel-export-button:hover { background: #0f5233; color: #fff; }
.report-table-wrap { max-height: calc(100vh - 340px); }
.report-journal-table { min-width: 1550px; }
.report-journal-table th { position: sticky; top: 0; z-index: 2; background: var(--nav); color: #fff; }
.report-journal-table td { vertical-align: middle; }
.report-journal-table td small { display: block; margin-top: 4px; color: var(--muted); }
.operation-badge {
  display: inline-flex;
  min-width: 90px;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}
.operation-badge.issue { background: var(--accent-soft); color: #4f5c14; }
.operation-badge.return { background: var(--green-soft); color: var(--green); }
.quantity-cell { text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shortage-reason-cell { display: inline-block; max-width: 220px; padding: 5px 9px; border-radius: var(--r-nav); background: var(--red-soft); color: var(--red); font-weight: 600; }
.signature-journal-link { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.signature-journal-link img { width: 110px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.signature-journal-link span { font-size: 11px; font-weight: 600; color: var(--muted-2); }

/* Постраничная навигация журнала. */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--divider); }
.pager-info { margin-right: auto; color: var(--muted); font-size: 12px; }
.pager-link { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--field-line); border-radius: var(--r-nav); color: var(--ink); font-size: 13px; font-weight: 600; }
.pager-link:hover { border-color: var(--nav); }
.pager-link.is-disabled { opacity: .45; pointer-events: none; }
.pager-current { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Модальное окно (подтверждение выхода). */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(10, 25, 34, .42); }
.modal-card {
  width: 100%;
  max-width: 388px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-modal);
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; }
.modal-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: var(--bg); color: var(--nav); }
.modal-head p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions form { flex: 1; display: flex; }
.modal-actions button { flex: 1; }


/* ----------------------------------------------------------------------------
   6. Экраны: сотрудники, аккаунты, настройки, недостача при приёме, подпись.
   ---------------------------------------------------------------------------- */

.management-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(520px, 1.5fr); gap: 18px; align-items: start; }
.management-layout.accounts { grid-template-columns: minmax(300px, .8fr) minmax(460px, 1.2fr); }
.management-list { max-height: calc(100vh - 200px); overflow: auto; }
.management-editor { min-width: 0; }
.management-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--panel);
  color: var(--ink);
}
.management-row:hover, .management-row.active { border-color: var(--nav); background: var(--divider-soft); }
.management-row.inactive { opacity: .6; }
.management-row span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.management-row small { color: var(--muted); font-size: 12px; }
.management-row em { color: var(--muted-2); font-size: 11px; font-style: normal; font-weight: 600; }
.small-action { padding: 7px 11px; border-radius: var(--r-nav); background: var(--accent-soft); border: 1px solid var(--accent-line); color: #4f5c14; font-size: 12px; font-weight: 600; }
.small-action:hover { background: var(--accent); color: var(--accent-ink); }
.profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-form .wide { grid-column: 1 / -1; }
.status-form { display: flex; justify-content: flex-end; margin-top: 14px; }
.reset-pin-form { display: grid; grid-template-columns: 1fr auto; gap: 11px; align-items: end; }

/* Панель «Код для выдачи АКБ» в анкете сотрудника. */
.employee-code-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); display: grid; gap: 14px; }
.employee-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.employee-code-head h3 { margin: 0; font-size: 15px; }
.employee-code-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.employee-code-actions .status-form { margin-top: 0; }
.enroll-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
/* Ширина берётся из самого canvas: масштаб модулей целый, растягивание их размыло бы. */
.enroll-qr { width: auto; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-field); background: #ffffff; }
.enroll-copy { display: grid; gap: 10px; color: var(--muted); }
.enroll-copy p { margin: 0; }
.enroll-key-label { color: var(--ink); font-weight: 600; }
.enroll-key { display: block; padding: 11px 12px; border: 1px solid var(--field-line); border-radius: var(--r-field); background: var(--divider-soft); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .08em; word-break: break-all; }
.enroll-warning { color: var(--yellow); font-weight: 600; }

.settings-split { display: grid; grid-template-columns: minmax(260px, .6fr) minmax(360px, 1.4fr); gap: 20px; }
.directory-list { max-height: 360px; overflow: auto; }
.listrow { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.listrow:last-child { border-bottom: 0; }
.listrow span { color: var(--muted); }

.vehicle-editor { align-self: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--divider-soft); }
.vehicle-editor-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vehicle-editor-title h3 { margin: 0; }
.vehicle-editor-title small { color: var(--muted); font-weight: 600; }
.vehicle-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vehicle-form-actions .primary { flex: 1 1 190px; min-height: 42px; }
.vehicle-directory { border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 14px; background: var(--panel); }
.vehicle-listrow { align-items: center; min-height: 58px; }
.vehicle-listrow.selected { margin: 0 -14px; padding-left: 14px; padding-right: 14px; background: var(--accent-soft); border-color: transparent; }
.vehicle-list-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vehicle-list-info b { font-size: 14px; }
.vehicle-list-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-vehicle-action { flex: 0 0 auto; padding: 7px 11px; border-radius: var(--r-nav); background: var(--divider); color: var(--ink); font-size: 12px; font-weight: 600; }
.edit-vehicle-action:hover { background: var(--accent); color: var(--accent-ink); }
.vehicle-empty { padding: 28px 12px; color: var(--muted); text-align: center; }

/* Панель причины недостачи (форма приёма). */
.shortage-reason-panel { padding: 16px; border: 1px solid var(--yellow-soft); border-radius: var(--r-card); background: var(--yellow-soft); }
.shortage-reason-panel[hidden] { display: none; }
.shortage-reason-panel h3 { margin: 0 0 6px; color: var(--yellow); }
.shortage-reason-panel p { margin: 0 0 12px; color: #75552d; font-size: 13px; }
.shortage-reason-panel.needs-choice { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.reason-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reason-buttons.compact { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.reason-button { display: block; cursor: pointer; }
.reason-button input { position: absolute; opacity: 0; pointer-events: none; }
.reason-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid #e0cba6;
  border-radius: var(--r-btn);
  background: var(--panel);
  color: #4a3a25;
  text-align: center;
  font-weight: 600;
}
.reason-button input:checked + span { border-color: var(--accent-line); background: var(--accent-soft); color: #4f5c14; }
.reason-button.loss-only { grid-column: 1 / -1; cursor: default; }
/* Единственный вариант «Утеряно» отмечен всегда, поэтому и в отмеченном состоянии
   он должен читаться как потеря, а не как удачный выбор. */
.reason-button.loss-only span,
.reason-button.loss-only input:checked + span { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }
.shortage-live { margin-top: 12px; padding: 10px; border-radius: var(--r-btn); background: var(--red); color: #fff; text-align: center; font-weight: 600; }
.shortage-live:empty { display: none; }

/* Поле подписи. */
.signature-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px dashed var(--field-line);
  border-radius: var(--r-card);
  background: var(--divider-soft);
}
.signature-field.has-signature { border-style: solid; border-color: var(--green-line); background: var(--green-soft); }
.signature-field-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.signature-field > small { color: var(--muted); font-size: 12px; font-weight: 400; }
.signature-open-button { min-height: 52px; background: var(--accent); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 15px; font-weight: 600; }
.signature-open-button:hover { background: var(--accent-hover); }
.signature-preview {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-btn);
  background: var(--green-soft);
}
.signature-preview[hidden] { display: none; }
.signature-preview img { width: 100%; height: 92px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.signature-preview > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.signature-preview strong { color: var(--green); }
.signature-signer-preview { color: var(--ink); font-weight: 600; }
.signature-redo-button { padding: 8px 11px; background: var(--panel); border: 1px solid var(--green-line); color: var(--green); font-size: 12px; }
.signature-status { min-height: 18px; color: var(--green); font-size: 13px; font-weight: 600; }
.signature-status.error { color: var(--red); }
.admin-signature-field { grid-column: 1 / -1; }
.issue-signature-field { grid-column: 1 / -1; }
.issue-code-field { grid-column: 1 / -1; }
.admin-code-input { letter-spacing: .16em; font-variant-numeric: tabular-nums; }


/* ----------------------------------------------------------------------------
   7. Киоск КИПЕРа.

   Палитра и шрифт — новые, геометрия — прежняя: экраны выверены под планшет,
   пальцем нужно попадать без промаха, поэтому min-height кнопок, clamp() для
   заголовков и размеры карточек намеренно оставлены крупными.
   ---------------------------------------------------------------------------- */

.easy-body { background: var(--bg); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--head-line);
  background: rgba(241, 243, 242, .92);
  backdrop-filter: blur(8px);
}
.easy-topbar { min-height: 82px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.brand-copy { min-width: 0; }
.brand { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.brand-name { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.brand-product { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sub { margin-top: 4px; color: var(--muted); font-size: 11px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.easy-content { width: min(1280px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 44px; }
.easy-flash { min-height: 60px; justify-content: center; text-align: center; font-size: 18px; }
.easy-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 205px;
  padding: 25px;
  border-radius: 22px;
  background: var(--nav);
  color: #fff;
}
.easy-zone span { font-size: 20px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.easy-zone strong { display: block; margin-top: 10px; font-size: clamp(82px, 10vw, 132px); line-height: .95; font-variant-numeric: tabular-nums; }
.easy-zone small { color: var(--accent); font-size: 22px; font-weight: 600; }
.easy-question, .easy-step-title { margin: 28px 0 18px; text-align: center; font-size: clamp(27px, 4vw, 42px); font-weight: 700; }
.easy-help { margin: -7px 0 20px; text-align: center; color: var(--muted); font-size: 18px; }

.easy-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.easy-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 210px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.easy-action:hover { border-color: var(--nav); color: var(--ink); }
.easy-action.issue { background: var(--accent); border-color: var(--accent-line); color: var(--accent-ink); }
.easy-action.issue:hover { background: var(--accent-hover); }
.easy-action.receive { background: var(--nav); border-color: var(--nav); color: #fff; }
.easy-action.receive:hover { background: var(--nav-active); color: #fff; }
.easy-action .easy-icon { display: grid; place-items: center; font-size: 58px; line-height: 1; }
.easy-action b { font-size: clamp(25px, 3vw, 38px); text-align: center; }

.easy-command-section { margin-top: 28px; }
.easy-command-section h2 { margin: 0 0 14px; font-size: 22px; }
.easy-command {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 6px solid #c6cfce;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.easy-command.priority-high { border-left-color: var(--yellow-mark); }
.easy-command.priority-critical { border-left-color: var(--red); }
.easy-command b { font-size: 20px; }
.easy-command p { margin: 8px 0 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.easy-understood { min-width: 180px; min-height: 62px; background: var(--accent); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 20px; }
.easy-understood:hover { background: var(--accent-hover); }
.understood-mark { padding: 14px; color: var(--green); font-size: 18px; font-weight: 700; }
.easy-empty { padding: 24px; border: 2px dashed var(--field-line); border-radius: var(--r-card); background: var(--panel); text-align: center; color: var(--muted); font-size: 17px; }
.easy-empty.large { margin: 40px auto 20px; padding: 50px 25px; font-size: 24px; }

.easy-page-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.easy-back, .easy-cancel { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; border-radius: var(--r-btn); font-size: 17px; font-weight: 600; }
.easy-back { background: var(--panel); border: 1px solid var(--field-line); color: var(--ink); }
.easy-back:hover { border-color: var(--nav); }
.easy-cancel { background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red); }

.employee-type-grid { width: min(1000px, 100%); margin: 22px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.employee-type-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 200px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.employee-type-card:hover { border-color: var(--nav); color: var(--ink); }
.employee-type-card.drivers { background: var(--accent); border-color: var(--accent-line); color: var(--accent-ink); }
.employee-type-card.drivers:hover { background: var(--accent-hover); }
.employee-type-card.chargers { background: var(--nav); border-color: var(--nav); color: #fff; }
.employee-type-card.chargers:hover { background: var(--nav-active); color: #fff; }
.employee-type-icon {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, .28);
  font-size: 44px;
}
.employee-type-card.chargers .employee-type-icon { background: rgba(255, 255, 255, .12); }
.employee-type-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 8px; }
.employee-type-card b { font-size: clamp(27px, 3vw, 38px); line-height: 1.05; }
.employee-type-card small { font-size: 17px; font-weight: 500; opacity: .82; }
.employee-type-arrow { font-size: 56px; line-height: 1; opacity: .7; }
.employee-group-heading { width: min(1000px, 100%); margin: 18px auto 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.employee-group-heading span { padding: 9px 17px; border-radius: var(--r-pill); background: var(--nav); color: #fff; font-size: 17px; font-weight: 600; }
.employee-group-heading a { font-size: 16px; font-weight: 600; }

.choice-grid { display: grid; gap: 14px; }
.choice-grid form { margin: 0; }
.employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-card {
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}
.choice-card:hover { border-color: var(--nav); }
.vehicle-icon { width: 70px; height: 70px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--blue-soft); font-size: 34px; }
.choice-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.choice-main b { font-size: 20px; }
.choice-main small { color: var(--muted); font-size: 15px; }
.choice-main em { color: var(--yellow); font-style: normal; font-size: 13px; font-weight: 600; }
.choice-main .holding-count { color: var(--green); font-size: 17px; font-weight: 600; }
.choice-arrow { font-size: 38px; color: var(--muted); }

.selected-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.selected-summary div { display: flex; flex-direction: column; gap: 3px; }
.selected-summary small { color: var(--muted-2); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.selected-summary b { font-size: 22px; }
.selected-summary span { color: var(--muted); font-size: 17px; }
.easy-final-card { width: min(850px, 100%); margin: 22px auto 0; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow-soft); }
.selected-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.selected-pair div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-card); background: var(--divider-soft); }
.selected-pair small { color: var(--muted-2); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.selected-pair b { font-size: 21px; }
.available-pill, .employee-has { margin: 16px 0; padding: 15px; border-radius: var(--r-card); text-align: center; font-size: 20px; font-weight: 600; }
.available-pill { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green); }
.employee-has { background: var(--accent-soft); border: 1px solid var(--accent-line); color: #4f5c14; }
.easy-operation-form { display: flex; flex-direction: column; gap: 18px; }
.easy-number-label { font-size: 20px; font-weight: 700; color: var(--ink); }
.easy-number-label small { color: var(--muted); font-size: 14px; font-weight: 400; }
.easy-number { min-height: 100px; border: 2px solid var(--field-line); border-radius: 18px; text-align: center; font-size: 54px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Поле одноразового кода: шрифт мельче количества — шесть цифр с разрядкой. */
.easy-code { font-size: 44px; letter-spacing: .16em; }
.code-status { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.code-status.error { color: var(--red); }
.code-note { padding: 14px 15px; border: 1px solid var(--yellow-soft); border-radius: var(--r-card); background: var(--yellow-soft); color: var(--yellow); font-size: 17px; font-weight: 600; }
.easy-signature-label .signature-field-title { font-size: 20px; }
.easy-signature-label .signature-open-button { min-height: 74px; font-size: 22px; }
.easy-submit { min-height: 84px; border-radius: 18px; font-size: 26px; font-weight: 700; }
.easy-submit.issue { background: var(--accent); border: 1px solid var(--accent-line); color: var(--accent-ink); }
.easy-submit.issue:hover { background: var(--accent-hover); }
.easy-submit.receive { background: var(--nav); border: 1px solid var(--nav); color: #fff; }
.easy-submit.receive:hover { background: var(--nav-active); }
.easy-home-button {
  display: flex;
  width: min(450px, 100%);
  min-height: 68px;
  margin: 18px auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-card);
  background: var(--accent);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  font-size: 21px;
  font-weight: 600;
}
.easy-home-button:hover { background: var(--accent-hover); color: var(--accent-ink); }
.easy-holdings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.easy-holding-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.easy-holding-card.has-shortage { border-color: var(--red-line); background: #fffbfb; }
.holding-info { display: flex; flex-direction: column; gap: 4px; }
.holding-info b { font-size: 20px; }
.holding-info span { color: var(--muted); font-size: 16px; }
.holding-info strong { color: var(--green); font-size: 28px; font-variant-numeric: tabular-nums; }
.easy-holding-card a { padding: 14px 17px; border-radius: var(--r-btn); background: var(--nav); color: #fff; font-weight: 600; }
.easy-holding-card a:hover { background: var(--nav-active); color: #fff; }


/* ----------------------------------------------------------------------------
   8. Вход, первичная настройка и мастер подключения к БД.
   ---------------------------------------------------------------------------- */

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: var(--bg); position: relative; }
.login-language { position: absolute; top: 20px; right: 20px; }
.login-card {
  width: min(440px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-modal);
  text-align: center;
}
.setup-card { max-width: 590px; width: min(590px, 100%); }
.setup-card .stack { gap: 16px; }
.setup-card .stack label { text-align: left; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.login-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.login-brand > div { text-align: left; }
.login-logo { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.login-product { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.login-card h1 { margin: 0 0 6px; }
.login-card p { margin: 0; color: var(--muted); }
.login-card form { margin-top: 22px; text-align: left; }
.login-card form button { width: 100%; margin-top: 12px; }
.login-card .flash { margin-top: 18px; }
.pin { font-size: 26px; text-align: center; letter-spacing: 10px; }


/* ----------------------------------------------------------------------------
   9. Виджеты, которые создаёт JS.

   Имена классов здесь — часть договора с public/assets/numpad.js и signature.js:
   разметку строит скрипт, поэтому переименование класса ломает оформление молча.
   ---------------------------------------------------------------------------- */

/* Экранная клавиатура количества. */
.has-mini-numpad { cursor: pointer; caret-color: transparent; }
.numpad-active-input { border-color: var(--nav); box-shadow: var(--focus); }
.mini-numpad[hidden] { display: none; }
.mini-numpad {
  position: fixed;
  z-index: 1200;
  width: 270px;
  max-width: calc(100vw - 20px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-modal);
  user-select: none;
  touch-action: manipulation;
}
.mini-numpad-inline {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 12px;
  box-shadow: none;
}
.mini-numpad-inline .mini-numpad-close, .mini-numpad-inline .mini-numpad-done { display: none; }
.login-card form .mini-numpad-inline button { width: auto; margin-top: 0; }
.login-card form .mini-numpad-inline .mini-numpad-grid button { width: 100%; min-height: 56px; font-size: 24px; }
.mini-numpad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 2px 10px; }
.mini-numpad-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-numpad-head strong { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-numpad-head small { color: var(--muted); font-size: 11px; font-weight: 600; }
.mini-numpad-close { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--divider); color: var(--muted); font-size: 20px; line-height: 1; }
.mini-numpad-close:hover { background: var(--seg-bg); color: var(--ink); }
.mini-numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mini-numpad-grid button {
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-btn);
  background: var(--panel);
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mini-numpad-grid button:active { background: var(--divider); }
.mini-numpad-grid .mini-numpad-clear { font-size: 12px; background: var(--accent-soft); border-color: var(--accent-line); color: #4f5c14; }
.mini-numpad-grid .mini-numpad-backspace { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.mini-numpad-done { width: 100%; min-height: 46px; margin-top: 8px; background: var(--nav); border: 1px solid var(--nav); color: #fff; font-size: 15px; }
.mini-numpad-done:hover { background: var(--nav-active); }
.mini-numpad-error { animation: mini-numpad-shake .22s linear 1; }
@keyframes mini-numpad-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Модалка подписи. */
.signature-modal[hidden] { display: none; }
.signature-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; background: rgba(10, 25, 34, .58); }
body.signature-modal-open { overflow: hidden; }
.signature-modal-card {
  width: min(900px, 100%);
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-modal);
}
.signature-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--nav); color: #fff; }
.signature-modal-head > div { display: flex; flex-direction: column; gap: 4px; }
.signature-modal-head strong { color: var(--accent); font-size: 19px; }
.signature-modal-head small { color: var(--nav-item); }
.signature-modal-close { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; }
.signature-modal-close:hover { background: rgba(255, 255, 255, .2); }
.signature-confirmation-text {
  margin: 18px 20px 0;
  padding: 15px 17px;
  border-left: 4px solid var(--accent);
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: #3f4a12;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.signature-canvas-wrap { margin: 16px 20px 0; border: 1px solid var(--field-line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.signature-canvas { display: block; width: 100%; height: min(34vh, 280px); min-height: 190px; background: #fff; touch-action: none; cursor: crosshair; }
.signature-modal-message { min-height: 24px; padding: 12px 20px 0; color: var(--muted); font-weight: 500; text-align: center; }
.signature-modal-message.error { color: var(--red); }
.signature-modal-actions { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px; padding: 16px 20px 20px; }
.signature-modal-actions button { min-height: 56px; font-size: 16px; }
.signature-clear, .signature-cancel { background: var(--panel); border: 1px solid var(--field-line); color: var(--ink); }
.signature-clear:hover, .signature-cancel:hover { border-color: var(--nav); }
.signature-save { background: var(--accent); border: 1px solid var(--accent-line); color: var(--accent-ink); }
.signature-save:hover { background: var(--accent-hover); }


/* ----------------------------------------------------------------------------
   10. Адаптив. Четыре точки: 1200 / 900 / 700 / 480.

   На ≤900px сайдбар всегда свёрнут (класс на <html> уже не важен), на ≤700px он
   превращается в горизонтальную ленту над контентом.
   ---------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .report-filter-form { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .management-layout, .management-layout.accounts, .settings-split { grid-template-columns: 1fr; }
  .management-list { max-height: 430px; }
  .reason-buttons.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar { flex-basis: 72px; width: 72px; padding-left: 10px; padding-right: 10px; }
  .sidebar-head { flex-direction: column; gap: 12px; }
  .sidebar-brand, .nav-section-title, .nav-label, .nav-badge, .sidebar-footer span { display: none; }
  .navitem { justify-content: center; padding: 9px 0; }
  .sidebar-toggle { display: none; }
  .sidebar-footer { flex-direction: column; }
  .form-grid, .profile-form, .reconcile-form { grid-template-columns: 1fr 1fr; }
  .form-grid .wide, .profile-form .wide { grid-column: 1 / -1; }
  .reconcile-form button { grid-column: 1 / -1; }
  .easy-actions { gap: 14px; }
  .easy-action { min-height: 180px; }
}

@media (max-width: 700px) {
  .layout { display: block; }
  .sidebar {
    flex-basis: auto;
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
  }
  .sidebar-head, .sidebar-footer { display: none; }
  .sidebar-nav { width: max-content; flex-direction: row; gap: 6px; }
  .nav-section, .nav-list { display: contents; }
  .navitem { min-width: 86px; min-height: 58px; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 8px; font-size: 11px; text-align: center; }
  .nav-label { display: block; white-space: nowrap; }
  .page-head { position: static; gap: 12px; padding: 12px 14px; }
  .page-title { flex: 1 1 100%; }
  .content-body { padding: 14px; gap: 14px; }
  .topbar { position: static; padding: 11px 14px; align-items: flex-start; flex-wrap: wrap; }
  .topbar-right { gap: 10px; }
  .userbox { padding-left: 0; border-left: 0; }
  .form-grid, .big-form, .profile-form, .reconcile-form, .report-filter-form,
  .reason-buttons, .reason-buttons.compact, .selected-pair, .card-grid, .card-grid.wide { grid-template-columns: 1fr; }
  .big-form .giant, .big-form .signature-panel, .issue-signature-field, .issue-code-field { grid-column: auto; }
  .reconcile-form button, .form-grid .wide, .profile-form .wide { grid-column: auto; }
  .report-filter-actions { flex-direction: column; align-items: stretch; }
  .report-filter-actions > * { width: 100%; }
  .excel-export-button { width: 100%; }
  .reset-pin-form, .resolve-form { grid-template-columns: 1fr; flex-direction: column; }
  .enroll-grid { grid-template-columns: 1fr; }
  .vehicle-form-actions { align-items: stretch; }
  .vehicle-form-actions .primary, .secondary-action { width: 100%; }
  .ops-row { grid-template-columns: 50px minmax(0, 1fr) 54px; grid-template-areas: "time kind qty" "time who state"; }
  .ops-row.head { display: none; }
  .ops-time { grid-area: time; }
  .ops-kind { grid-area: kind; }
  .ops-who { grid-area: who; }
  .ops-qty { grid-area: qty; }
  .ops-state { grid-area: state; }
  .easy-content { width: min(100% - 22px, 1280px); padding-top: 14px; }
  .easy-actions, .employee-type-grid, .employee-grid, .vehicle-grid, .easy-holdings-grid { grid-template-columns: 1fr; }
  .easy-action { min-height: 140px; flex-direction: row; }
  .easy-action .easy-icon { font-size: 44px; }
  .employee-type-card { min-height: 148px; padding: 20px; }
  .employee-type-icon { width: 74px; height: 74px; font-size: 34px; }
  .easy-command { grid-template-columns: 1fr; }
  .easy-understood { width: 100%; }
  .signature-modal { padding: 8px; }
  .signature-modal-actions { grid-template-columns: 1fr 1fr; padding: 12px; }
  .signature-save { grid-column: 1 / -1; grid-row: 1; }
  .signature-preview { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .brand-product { display: none; }
  .language-switch a { min-width: 38px; padding: 5px 8px; }
  .userbox-copy { display: none; }
  .avatar, .vehicle-icon { width: 60px; height: 60px; font-size: 20px; }
  .avatar.small { width: 36px; height: 36px; font-size: 13px; }
  .avatar.mini { width: 30px; height: 30px; font-size: 12px; }
  .metric-value { font-size: 36px; }
  .diff-value strong { font-size: 36px; }
  .diff-actions { flex-direction: column; }
  .easy-zone { min-height: 165px; }
  .easy-zone span { font-size: 17px; }
  .easy-action b { font-size: 25px; }
  .choice-card { min-height: 100px; padding: 13px; }
  .employee-type-card { min-height: 124px; padding: 15px; gap: 13px; }
  .employee-type-icon { width: 58px; height: 58px; border-radius: 16px; font-size: 27px; }
  .employee-type-card b { font-size: 23px; }
  .employee-type-card small { font-size: 14px; }
  .employee-type-arrow { font-size: 40px; }
  .easy-final-card { padding: 17px; }
  .easy-holding-card { grid-template-columns: auto 1fr; }
  .easy-holding-card a { grid-column: 1 / -1; text-align: center; }
  .login-language { top: 10px; right: 10px; }
  .mini-numpad:not(.mini-numpad-inline) { width: 254px; padding: 9px; }
  .mini-numpad-grid button { min-height: 44px; font-size: 20px; }
  .mini-numpad-done { min-height: 44px; }
  .signature-canvas { height: 250px; }
}