/* ── PLATFORM · MAIN STYLESHEET v3 ──
   Этап 2 редизайна: тема «Гибрид» (утв. 2026-07-30).
   Архитектура токенов:
     слой 1 — примитивы (палитра, не использовать в правилах напрямую),
     слой 2 — семантика (использовать её),
     слой 3 — алиасы старых имён (совместимость инлайн-стилей шаблонов).
   Смена окраса платформы = правка слоёв 1–2 этого блока.
   Тёмная тема (задел): добавить блок [data-theme="dark"] с теми же
   семантическими именами. */

/* ── Inter (variable, self-hosted, latin + cyrillic для ru/kk) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

:root {
  /* ── СЛОЙ 1: ПРИМИТИВЫ ── */
  --red-50:  #FBEBE8;
  --red-500: #C43C2C;
  --red-600: #A93226;
  --red-700: #96281B;
  --gray-25:  #F9FAFB;
  --gray-50:  #F5F6F8;
  --gray-100: #F3F4F6;
  --gray-150: #EEF0F2;
  --gray-200: #E4E6EA;
  --gray-300: #CBCFD6;
  --gray-400: #B0B4BB;
  --gray-500: #82878F;
  --gray-600: #565A61;
  --gray-700: #43474E;
  --gray-900: #191B1F;
  --ink-900:  #1B1B1F;
  --green-50:  #E7F4EC;
  --green-700: #177242;
  --green-800: #0F5432;
  --amber-50:  #FBF2DC;
  --amber-700: #92660A;
  --blue-50:   #E7F0F8;
  --blue-700:  #1D5F8A;
  --purple-50: #F1EAF5;
  --purple-700:var(--purple-700);

  /* ── СЛОЙ 2: СЕМАНТИКА (тема «Гибрид») ── */
  --accent:       var(--red-500);
  --accent-hover: var(--red-600);
  --accent-soft:  var(--red-50);
  --bg-main:      var(--gray-100);
  --bg-card:      #FFFFFF;
  --bg-input:     var(--gray-50);
  --surface-2:    var(--gray-25);
  --bg-sidebar:   var(--ink-900);
  --border:       var(--gray-200);
  --border-mid:   var(--gray-300);
  --text-1: var(--gray-900);
  --text-2: var(--gray-700);
  --text-3: var(--gray-500);
  --text-4: var(--gray-400);
  --ok:           var(--green-700);
  --ok-soft:      var(--green-50);
  --warn:         var(--amber-700);
  --warn-soft:    var(--amber-50);
  --danger:       var(--red-600);
  --danger-soft:  var(--red-50);
  --info:         var(--blue-700);
  --info-soft:    var(--blue-50);
  --neutral:      var(--gray-600);
  --neutral-soft: var(--gray-150);
  --form-accent:  #2563EB; /* акцент форм в стиле типовой СЭД; пересмотрим на этапе 3 */
  --sidebar-w:  228px;
  --topbar-h:   52px;
  --navbar-h:   50px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08);

  /* ── СЛОЙ 3: АЛИАСЫ (не использовать в новом коде) ── */
  --red:        var(--accent);
  --red-dark:   var(--accent-hover);
  --red-light:  #DB5545;
  --green:      var(--ok);
  --amber:      var(--warn);
  --blue:       var(--info);
  --color-text-primary:         var(--text-1);
  --color-text-secondary:       var(--text-2);
  --color-text-tertiary:        var(--text-3);
  --color-background-primary:   var(--bg-card);
  --color-background-secondary: var(--surface-2);
  --color-background-tertiary:  var(--bg-main);
  --color-border-primary:       var(--border-mid);
  --color-border-secondary:     var(--border-mid);
  --color-border-tertiary:      var(--border);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --bg-2:             var(--surface-2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  background: var(--bg-main);
  color: var(--text-1);
  height: 100%;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   NAVBAR — верхняя панель разделов
══════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--navbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 14px;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.navbar-logo {
  display: flex;
  align-items: center;
  padding-right: 14px;
  margin-right: 8px;
  border-right: 1px solid var(--border);
}
.navbar-logo img { height: 28px; display: block; }
/* без загруженного логотипа (Админ → Брендинг) — название платформы */
.brand-logo-text { font-weight: 700; font-size: 15px; color: var(--text-1, inherit); white-space: nowrap; }
.navbar-tabs {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color .12s, background .12s;
}
.nav-tab:hover { color: var(--text-1); background: var(--bg-input); }
.nav-tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: 700; }

/* ── APP SHELL ── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--navbar-h);
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Logo */
.sb-logo {
  padding: 18px 16px 14px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--red);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(196,60,44,0.4);
}
.sb-logo-icon svg { width: 16px; height: 16px; fill: #fff; }
.sb-logo-name { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.sb-logo-sub  { font-size: 9px; color: rgba(255,255,255,0.3); margin-top: 1px; letter-spacing: 0.02em; }

/* User */
.sb-user {
  padding: 10px 14px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.sb-user-name { font-size: 12.5px; font-weight: 600; color: #FFFFFF; line-height: 1.2; }
.sb-user-role { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 1px; }

/* Nav */
.sb-nav { flex: 1; padding: 8px 0; }

.sb-section {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px 4px;
}

/* крупный заголовок группы: подразделы «График Движения» (ГРП / ПЗР)
   читаются как второй уровень навигации, их пункты — мельче под ними */
.sb-section.lg {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  padding: 16px 16px 4px;
}
.sb-section.lg ~ .sb-item { font-size: 12.5px; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 16px;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s;
  font-size: 13px;
  cursor: pointer;
  position: relative;
}
.sb-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.sb-item.active {
  background: rgba(196,60,44,0.14);
  border-left-color: var(--red);
  color: #FFFFFF;
  font-weight: 600;
}
.sb-item i {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.sb-item.active i { color: var(--red-light); }
.sb-item:hover i  { color: rgba(255,255,255,0.9); }

.sb-item.disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.sb-item.disabled:hover { background: none; color: rgba(255,255,255,0.46); }

/* раскрывающийся пункт «Ещё» (navigation: 'menu') — без JS, <details> */
.sb-more > summary { list-style: none; font-size: 12.5px; }
.sb-more > summary::-webkit-details-marker { display: none; }
.sb-more-chev { margin-left: auto; transition: transform 0.15s; }
.sb-more[open] > summary .sb-more-chev { transform: rotate(180deg); }
.sb-more > .sb-item { padding-left: 30px; font-size: 12.5px; }
.sb-soon {
  margin-left: auto;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 1px 5px;
}

/* «Черновики» в меню (2026-10-20): спокойный счётчик, не тревожный красный */
.sb-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.sb-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Bottom */
.sb-bottom {
  padding: 10px 14px 14px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.sb-bottom-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
  padding: 5px 2px;
  transition: color 0.12s;
}
.sb-bottom-item:hover { color: rgba(255,255,255,0.6); }
.sb-bottom-item i { font-size: 14px; }

/* ══════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════ */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── TOPBAR ── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 12px;
  position: sticky;
  top: var(--navbar-h);
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topbar-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  flex: 1;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }

.lang-switcher {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lang-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: background 0.12s;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.lang-btn.active { background: var(--red); color: #fff; }
.lang-btn:hover:not(.active) { background: var(--border); color: var(--text-2); }

.tb-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  transition: background 0.12s;
  position: relative;
}
.tb-btn:hover { background: var(--border); }
.tb-btn i { font-size: 15px; }
.tb-notif-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* ── FLASH MESSAGES ── */
.flash-container { padding: 14px 22px 0; }
.flash {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.flash i { font-size: 14px; flex-shrink: 0; }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: #A8D8BB; }
.flash-danger  { background: var(--danger-soft); color: var(--danger); border-color: #F5B7B1; }
.flash-info    { background: var(--info-soft); color: var(--info); border-color: #A9CCE3; }
.flash-warning { background: var(--warn-soft); color: var(--warn); border-color: #F9E79F; }

/* ── CONTENT ── */
.content { flex: 1; padding: 22px; }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}
.card-header-left { display: flex; align-items: center; gap: 8px; }
.card-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-icon i { font-size: 14px; color: var(--red); }
.card-title { font-size: 12px; font-weight: 600; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.04em; }
.card-action { font-size: 11px; color: var(--text-3); text-decoration: none; cursor: pointer; transition: color 0.12s; }
.card-action:hover { color: var(--red); }
.card-body { padding: 18px; }

/* ══════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════ */
.kpi-grid { display: grid; gap: 12px; margin-bottom: 14px; }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); }

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi-label i { font-size: 13px; }
.kpi-value { font-size: 28px; font-weight: 500; color: var(--text-1); line-height: 1; }
.kpi-value.danger { color: var(--red); }
.kpi-value.success { color: var(--green); }
.kpi-value.warning { color: var(--amber); }
.kpi-sub {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 5px;
}

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.data-table th .th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.data-table th .th-sort:hover, .data-table th .th-sort.active { color: var(--text-1); }
.data-table th .th-sort i { font-size: 11px; opacity: .55; }
.data-table th .th-sort.active i { opacity: 1; }
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover td { background: var(--surface-2); }
/* Кликабельные строки и пункты: после перехода на CSP (2026-09-01) onclick
   заменили на data-href / data-act, а старый селектор по onclick умер —
   над текстом строки был текстовый курсор (2026-10-13). */
[data-href]:not(input):not(textarea),
tr[data-act] { cursor: pointer; }

/* ══════════════════════════════════════════
   STATUS PILLS
══════════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}
.pill-green  { background: var(--ok-soft); color: var(--ok); }
.pill-amber  { background: var(--warn-soft); color: var(--warn); }
.pill-red    { background: var(--danger-soft); color: var(--danger); }
.pill-blue   { background: var(--info-soft); color: var(--info); }
.pill-gray   { background: var(--neutral-soft); color: var(--neutral); }
.pill-purple { background: var(--purple-50); color: var(--purple-700); }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-mid);
  background: var(--bg-input);
  color: var(--text-1);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  line-height: 1;
}
.btn:hover { background: var(--border); }
.btn i { font-size: 13px; }

.btn-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red-dark);
}
.btn-primary:hover { background: var(--red-dark); }

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green-800);
}
.btn-success:hover { background: var(--green-800); }

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #F5B7B1;
}
.btn-danger:hover { background: #FADBD8; }

.btn-sm { padding: 5px 11px; font-size: 11px; }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.form-label .req { color: var(--red); margin-left: 2px; }
/* подпись-подсказка под полем формы (только семантические токены) */
.form-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.35;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-1);
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(196,60,44,0.08);
  background: var(--bg-card);
}
.form-input[readonly],
.form-select[readonly] {
  background: var(--gray-150);
  color: var(--text-3);
  cursor: default;
}
.form-textarea { resize: vertical; min-height: 70px; }
.form-select { appearance: none; cursor: pointer; }

/* Поле поиска: подпись «Поиск» сверху, лупа и рамка цвета акцента —
   чтобы поиск замечали (2026-10-30). Разметка — макрос _search_box.html. */
.search-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 420px;
  margin: 0;
}
.search-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.search-box-field { position: relative; display: block; }
.search-box-field > .ti-search {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--accent);
  pointer-events: none;
}
.search-box .search-box-field input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px 8px 34px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
}
.search-box .search-box-field input::placeholder { color: var(--text-3); }
.search-box .search-box-field input:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-box-inverse .search-box-label { color: #fff; }
.search-box-inverse .search-box-field input { border-color: #fff; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ══════════════════════════════════════════
   SECTION HEADERS (inside forms)
══════════════════════════════════════════ */
.section-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.section-header {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-header i { font-size: 15px; color: var(--red); }
.section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.section-body { padding: 18px; }

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
}
.bc-item { font-size: 11px; color: var(--text-3); text-decoration: none; }
.bc-item:hover { color: var(--text-1); }
.bc-item.active { color: var(--text-1); font-weight: 500; }
.bc-sep { font-size: 10px; color: var(--text-4); }

/* ══════════════════════════════════════════
   APPROVAL CHAIN
══════════════════════════════════════════ */
.approver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.approver-row:last-child { border-bottom: none; }
.approver-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.approver-av.done    { background: var(--ok-soft); color: var(--ok); }
.approver-av.active  { background: var(--accent-soft); color: var(--danger); }
.approver-av.pending { background: var(--neutral-soft); color: var(--text-3); border: 1px solid var(--border); }
.approver-name { font-size: 12px; font-weight: 500; color: var(--text-1); }
.approver-role { font-size: 10px; color: var(--text-3); margin-top: 1px; }
/* комментарий визы рядом с решением (карточка документа, 2026-10-12) */
.visa-comment {
  margin-top: 4px; padding: 4px 8px; font-size: 11px; line-height: 1.45;
  color: var(--text-2); background: var(--neutral-soft); border-radius: 6px;
  white-space: pre-line; overflow-wrap: anywhere;
}
.visa-comment .ti { font-size: 11px; margin-right: 4px; color: var(--text-3); }
/* окно «Согласовать»: выбор «без / с комментарием» (2026-10-16) */
.visa-choice { display: flex; flex-direction: column; gap: 8px; }
.visa-option {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card);
}
.visa-option:hover { background: var(--surface-2); }
.visa-option:has(input:checked) { border-color: var(--ok); background: var(--surface-2); }
.visa-option input { margin-top: 2px; accent-color: var(--ok); }
.visa-option b { display: block; font-size: 13px; font-weight: 600; color: var(--text-1); }
.visa-option small { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.doc-modal .form-textarea { width: 100%; }
/* замещение: «за кого» согласует заместитель (2026-10-12) */
.approver-for { font-size: 10px; font-weight: 400; color: var(--text-3); white-space: nowrap; }

/* ══════════════════════════════════════════
   WORKFLOW STEPPER
══════════════════════════════════════════ */
.stepper { display: flex; align-items: center; }
.stepper-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.stepper-dot.done    { background: var(--green); color: #fff; }
.stepper-dot.active  { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(196,60,44,0.12); }
.stepper-dot.pending { background: var(--neutral-soft); color: var(--text-3); border: 1px solid var(--border-mid); }
.stepper-label { font-size: 9px; margin-top: 5px; text-align: center; color: var(--text-3); }
.stepper-label.active { color: var(--red); font-weight: 600; }
.stepper-label.done   { color: var(--green); }
.stepper-line { flex: 1; height: 1px; background: var(--border); margin-top: -14px; }
.stepper-line.done { background: var(--green); }

/* ══════════════════════════════════════════
   COMMENTS
══════════════════════════════════════════ */
.comment {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.comment.system { border-left: 3px solid var(--blue); }
.comment.user   { border-left: 3px solid var(--red); }
.comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.comment-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}
.comment-name  { font-size: 11px; font-weight: 500; color: var(--text-1); }
.comment-time  { font-size: 10px; color: var(--text-3); margin-left: auto; }
.comment-text  { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.comment-edit-btn {
  background: none; border: none; padding: 0 2px; margin-left: 4px;
  min-width: 20px; min-height: 20px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1;
  opacity: .55; transition: opacity .15s, color .15s;
}
.comment:hover .comment-edit-btn, .comment-edit-btn:focus-visible { opacity: 1; }
.comment-edit-btn:hover { color: var(--accent); }
@media (hover: none) { .comment-edit-btn { opacity: 1; font-size: 15px; padding: 2px 4px; } }

/* ══════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover { border-color: var(--red); background: var(--accent-soft); }
.upload-zone i { font-size: 28px; color: var(--text-4); display: block; margin-bottom: 8px; }
.upload-zone-title { font-size: 12px; font-weight: 500; color: var(--text-1); margin-bottom: 3px; }
.upload-zone-sub   { font-size: 10px; color: var(--text-3); }

/* ══════════════════════════════════════════
   BANNERS
══════════════════════════════════════════ */
.banner {
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.banner i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.banner-green  { background: var(--ok-soft); color: var(--ok); border-color: #A8D8BB; }
.banner-amber  { background: var(--warn-soft); color: var(--warn); border-color: #FAD7A0; }
.banner-red    { background: var(--danger-soft); color: var(--danger); border-color: #F5B7B1; }
.banner-blue   { background: var(--info-soft); color: var(--info); border-color: #A9CCE3; }

/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
body.login-page {
  background: #141416;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-shell { width: 380px; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-logo-icon {
  width: 56px;
  height: 56px;
  background: var(--red);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(196,60,44,0.4);
}
.login-brand-name { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.login-brand-sub  { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 3px; }
.login-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.login-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 20px; }
.login-foot { text-align: center; margin-top: 18px; font-size: 11px; color: rgba(255,255,255,0.25); }

/* Видеофон экрана входа (2026-10-12, референс Atlas Card): ролик на весь
   экран, затемнение для читаемости, карточка — матовое стекло.
   Постер (jpg) — фон .login-bg сразу; видео проявляется поверх, когда
   готово. Без видео (reduced motion, экономия трафика) остаётся постер. */
body.login-page--video { background: #0d1014; padding: 16px; }
.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0d1014 center / cover no-repeat;
}
.login-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.login-bg-video.is-on { opacity: 1; }
.login-bg-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(8,10,14,0.15) 0%, rgba(8,10,14,0.55) 100%),
    linear-gradient(to bottom, rgba(8,10,14,0.55) 0%, rgba(8,10,14,0.1) 40%, rgba(8,10,14,0.6) 100%);
}
.login-page--video .login-shell { position: relative; z-index: 1; max-width: 100%; }
.login-page--video .login-brand-sub { color: rgba(255,255,255,0.7); }
.login-page--video .login-card {
  background: rgba(255,255,255,0.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.login-page--video .login-foot { color: rgba(255,255,255,0.6); }
@media (prefers-reduced-motion: reduce) {
  .login-bg-video { display: none; }
}

/* ══════════════════════════════════════════
   EQUIPMENT STATUS COLORS
══════════════════════════════════════════ */
.status-deployed  { color: var(--green); }
.status-idle      { color: var(--text-3); }
.status-maint     { color: var(--amber); }

/* ══════════════════════════════════════════
   DOCUMENT NUMBER
══════════════════════════════════════════ */
.doc-number { color: var(--red); font-weight: 600; }

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.text-danger  { color: var(--red); }
.text-success { color: var(--green); }
.text-muted   { color: var(--text-3); }
.text-small   { font-size: 11px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.flex  { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.ml-auto { margin-left: auto; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* сайдбар на узком экране не скрывается, а становится выезжающей панелью —
     см. блок MOBILE в конце файла (2026-09-10) */
  .kpi-grid-4 { grid-template-columns: 1fr 1fr; }
  .kpi-grid-3 { grid-template-columns: 1fr 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kpi-grid-4, .kpi-grid-3 { grid-template-columns: 1fr 1fr; } /* телефон: две плашки в ряд */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .content { padding: 14px; }
}
/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.active,
.modal.show {
  display: flex;
}
.modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--red); }
.modal-body {
  flex: 1;
  overflow-y: auto;
}
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.people-item:hover { background: var(--surface-2); }
/* ══════════════════════════════════════════
   SED-STYLE FORM SECTIONS
══════════════════════════════════════════ */
.form-section {
  margin-bottom: 28px;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px 0;
  margin-bottom: 18px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--form-accent);
}
.form-section-header i {
  font-size: 16px;
  color: var(--form-accent);
}
.form-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--form-accent);
  text-transform: none;
  letter-spacing: 0;
}
.form-section-body {
  padding: 0;
}

/* ══════════════════════════════════════════
   SETTINGS PAGE (auth/settings.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
  .st-wrap{max-width:820px}
  .st-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border,#e5e2dc);margin-bottom:22px;flex-wrap:wrap}
  .st-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-3,#8a857c);
          background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px}
  .st-tab:hover{color:var(--text-1,#2b2925)}
  .st-tab.active{color:var(--red,#c0392b);border-bottom-color:var(--red,#c0392b)}
  .st-panel{display:none}
  .st-panel.active{display:block}
  .st-card{background:var(--bg-card,#fff);border:1px solid var(--border,#e5e2dc);
           border-radius:var(--radius-lg,12px);padding:22px;margin-bottom:18px}
  .st-card h3{font-size:15px;font-weight:700;color:var(--text-1,#2b2925);margin:0 0 4px}
  .st-card p.sub{font-size:12px;color:var(--text-3,#8a857c);margin:0 0 18px}
  .st-field{margin-bottom:14px}
  .st-field label{display:block;font-size:12px;font-weight:600;color:var(--text-2,#54504a);margin-bottom:6px}
  .st-field input,.st-field select{width:100%;padding:9px 11px;font-size:13px;
           border:1px solid var(--border-mid,#d6d2ca);border-radius:var(--radius-md,8px);
           background:var(--bg-input,#fff);color:var(--text-1,#2b2925);box-sizing:border-box}
  .st-field input:focus,.st-field select:focus{outline:none;border-color:var(--red,#c0392b)}
  .st-field input[readonly]{background:var(--bg-main,#f7f5f1);color:var(--text-3,#8a857c);cursor:not-allowed}
  .st-row{display:flex;gap:14px}
  .st-row .st-field{flex:1}
  .st-btn{padding:9px 18px;font-size:13px;font-weight:600;border:none;border-radius:var(--radius-md,8px);
          background:var(--red,#c0392b);color:#fff;cursor:pointer}
  .st-btn:hover{filter:brightness(0.94)}
  .st-lang{display:flex;gap:8px}
  .st-lang label{flex:1;text-align:center;padding:10px;border:1px solid var(--border-mid,#d6d2ca);
          border-radius:var(--radius-md,8px);cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2,#54504a)}
  .st-lang input{display:none}
  .st-lang input:checked + span{color:var(--red,#c0392b)}
  .st-lang label:has(input:checked){border-color:var(--red,#c0392b);background:var(--accent-soft)}
  .st-toggle{display:flex;align-items:center;justify-content:space-between;
          padding:12px 0;border-bottom:1px solid var(--border,#eee)}
  .st-toggle:last-child{border-bottom:none}
  .st-toggle .lbl{font-size:13px;font-weight:600;color:var(--text-1,#2b2925)}
  .st-toggle .desc{font-size:11px;color:var(--text-3,#8a857c);margin-top:2px}
  .st-stats{display:flex;gap:14px;flex-wrap:wrap}
  .st-stat{flex:1;min-width:120px;background:var(--bg-main,#f7f5f1);border-radius:var(--radius-md,8px);padding:16px}
  .st-stat .n{font-size:24px;font-weight:800;color:var(--text-1,#2b2925)}
  .st-stat .l{font-size:11px;color:var(--text-3,#8a857c);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
  .st-adminbtn{display:inline-block;margin-top:8px;padding:9px 16px;font-size:13px;font-weight:600;
          text-decoration:none;border:1px solid var(--border-mid,#d6d2ca);border-radius:var(--radius-md,8px);
          color:var(--text-1,#2b2925);background:var(--bg-card,#fff)}

/* ══════════════════════════════════════════
   DOCUMENT TYPE PICKER (documents/new.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
.doc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  text-decoration: none;
  cursor: pointer;
  display: block;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm);
}
.doc-card:hover { box-shadow: var(--shadow-md); border-color: var(--red); transform: translateY(-2px); }
.doc-card-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.doc-card-icon i { font-size: 22px; color: var(--red); }
.doc-card-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.doc-card-sub { font-size: 11px; color: var(--text-3); }

/* ══════════════════════════════════════════
   DOCLIST PANEL (documents/_doclist_panel.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
.dl-item { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; font-size:12px; color:var(--text-2); text-decoration:none; border-left:2px solid transparent; }
.dl-item:hover { background:var(--surface-2); color:var(--text-1); }
.dl-item.active { background:var(--accent-soft); border-left-color:var(--red); color:var(--red); font-weight:600; }
.dl-count { font-size:11px; font-weight:600; color:var(--text-3); background:var(--bg-input); padding:1px 8px; border-radius:10px; min-width:22px; text-align:center; }
.dl-item.active .dl-count { background:var(--bg-card); color:var(--red); }
.dl-section { font-size:9px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; padding:12px 14px 4px; }
/* «По виду документа» под «Все» — раскрывающийся список (2026-10-12) */
details.dl-types > summary { list-style:none; cursor:pointer; }
details.dl-types > summary::-webkit-details-marker { display:none; }
.dl-types-chev { font-size:11px; transition:transform .15s; display:inline-block; }
details.dl-types[open] .dl-types-chev { transform:rotate(90deg); }
.dl-item.dl-sub { padding-left:28px; }
.dl-item.dl-sub > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:6px; }
.dl-doc { display:block; padding:10px 14px; border-bottom:1px solid var(--border); text-decoration:none; }
.dl-doc:hover { background:var(--surface-2); }
.dl-doc.active { background:var(--accent-soft); border-left:2px solid var(--red); }
.dl-doc-num { font-size:11px; font-weight:600; color:var(--red); }
.dl-doc-title { font-size:11px; color:var(--text-1); margin:2px 0 4px; line-height:1.3; }
.dl-doc-meta { display:flex; align-items:center; justify-content:space-between; }

/* ══════════════════════════════════════════
   DOCUMENT VIEW · SED PAPER (documents/view.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
  .dlm-paper{max-width:820px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);
    border-radius:8px;padding:38px 46px;font-family:'Times New Roman',Georgia,serif;
    font-size:14px;line-height:1.8;color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .dlm-paper p{margin:0 0 11px}
  .dlm-paper i,.dlm-paper em{color:#4a4740}
  .dlm-paper table{border-collapse:collapse;width:100%;margin:12px 0}
  .dlm-paper td,.dlm-paper th{border:1px solid #d3dbe8;padding:6px 10px}

/* ══════════════════════════════════════════
   DVT — ВКЛАДКИ КАРТОЧКИ ДОКУМЕНТА (documents/view.html)
   «Основная информация» / «Предпросмотр» (печатная форма в iframe)
══════════════════════════════════════════ */
  .dvt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);
    margin-bottom:14px;flex-wrap:wrap}
  .dvt-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;font-size:12.5px;
    font-weight:600;color:var(--text-3);background:none;border:none;
    border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;
    font-family:inherit}
  .dvt-tab:hover{color:var(--text-1)}
  a.dvt-tab{text-decoration:none}
  .dvt-tab.active{color:var(--red);border-bottom-color:var(--red)}
  .dvt-panel{display:none}
  .dvt-panel.active{display:block}
  .dvt-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
  .dvt-hint{font-size:11px;color:var(--text-3)}
  /* имя файла на вкладке вложения: длинное подрезаем, полное — в title */
  .dvt-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  /* печатный бланк и вложения всегда на белом — как на бумаге,
     ночная тема их не красит */
  .dvt-paper{background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
  .dvt-frame{display:block;width:100%;border:0;background:#fff;min-height:640px}
  /* PDF рисует встроенный просмотрщик браузера — у него своя прокрутка,
     поэтому фрейму нужна фиксированная высота, а не подгонка по содержимому */
  .dvt-frame-tall{height:80vh;min-height:520px}

/* ══════════════════════════════════════════
   HR ORDER EDITOR (hr/order_new.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
  .ob-box{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm)}
  .ob-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-2);align-items:center}
  .ob-mini{padding:5px 8px !important;font-size:12px !important;width:auto}
  .ob-btn{background:none;border:1px solid transparent;border-radius:6px;min-width:29px;height:29px;font-size:13px;color:var(--text-2);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;transition:.12s}
  .ob-btn:hover{background:var(--gray-150);color:var(--red)}
  .ob-sep{width:1px;height:18px;background:var(--border);margin:0 6px}
  .ob-area{min-height:300px;padding:24px 30px;font-size:13.5px;line-height:1.75;color:var(--text-1);outline:none;font-family:'Times New Roman',Georgia,serif;background:var(--bg-card)}
  .ob-area:focus{box-shadow:inset 0 0 0 2px rgba(196,60,44,.08)}

/* ══════════════════════════════════════════
   SED-STYLE SHARED FORMS (ex _route_style.html)
   (вынесено из шаблона, PR css-consolidation)
══════════════════════════════════════════ */
.dlg-h{font-size:13px;font-weight:600;color:var(--form-accent);border-bottom:2px solid var(--form-accent);padding-bottom:6px;margin:26px 0 18px;display:flex;align-items:center;justify-content:space-between}
.dlg-h:first-of-type{margin-top:0}
.dlg-title{font-size:16px;font-weight:600;color:var(--form-accent);text-transform:uppercase;letter-spacing:.01em}
.dlg-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 14px;align-items:start;margin-bottom:13px}
.dlg-label{font-size:12px;color:var(--text-2);padding-top:8px;line-height:1.4}
.dlg-req{color:#C0392B;margin-left:2px}
.dlg-input,.dlg-select,.dlg-textarea{width:100%;background:var(--bg-input,#f7f8fa);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--text-1);font-family:inherit;outline:none;box-sizing:border-box}
.dlg-textarea{resize:vertical;min-height:56px}
.dlg-input:focus,.dlg-select:focus,.dlg-textarea:focus{border-color:var(--form-accent)}
.dlg-static{font-size:12px;color:var(--text-1);padding-top:8px}
.dlg-picker{display:flex;align-items:center;gap:8px;background:var(--bg-input,#f7f8fa);border:1px solid var(--border);border-radius:6px;padding:7px 10px;min-height:20px;cursor:pointer}
.dlg-picker:hover{border-color:var(--form-accent)}
.dlg-picker .ti{margin-left:auto;color:var(--text-3);font-size:15px}
.dlg-picker-ph{font-size:12px;color:var(--text-3)}
.dlg-chips{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.dlg-chip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text-1);max-width:min(440px,100%);min-width:0;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dlg-chip .ti-menu-2{color:var(--text-3);font-size:13px;flex-shrink:0}
.dlg-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg-chip-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px;line-height:1;margin-left:auto;padding:0 2px;font-family:inherit}
.dlg-chip-x:hover{color:#C0392B}
/* Готовый маршрут из админки (2026-10-12, static/js/route_templates.js):
   выбранный маршрут — только для чтения; утверждающий из маршрута заперт */
.rt-preview{margin-top:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--neutral-soft);font-size:12px;color:var(--text-1)}
.rt-head{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);margin-bottom:6px}
.rt-row{display:flex;gap:10px;padding:3px 0;line-height:1.4}
.rt-k{flex:0 0 110px;color:var(--text-3)}
.rt-people{display:flex;flex-direction:column;gap:3px;min-width:0}
.rt-person{overflow-wrap:anywhere}
.rt-note{color:var(--text-3);font-style:italic}
.route-sig-locked{display:none;align-items:center;gap:6px;padding:8px 10px;border:1px dashed var(--border);border-radius:6px;font-size:12px;color:var(--text-1);background:var(--neutral-soft)}
.route-sig-wrap.route-locked .route-sig-pick{display:none}
.route-sig-wrap.route-locked .route-sig-locked{display:flex}
.dlg-textbtn{background:none;border:none;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-2);cursor:pointer;font-family:inherit;padding:0;text-transform:uppercase}
.dlg-textbtn:hover{color:var(--form-accent)}
/* minmax(0,…): колонка с людьми не раздувается по длинному имени — иначе
   крестики «убрать человека / этап» уезжали за край карточки и маршрут
   нельзя было править (экран маршрутов в админке, 2026-10-12) */
.dlg-stage{display:grid;grid-template-columns:16px 16px minmax(120px,210px) minmax(0,1fr) 20px;gap:10px;align-items:start;margin-bottom:14px}
.dlg-stage .ti-menu-2{color:var(--text-3);font-size:14px;margin-top:9px}
.dlg-stage-num{font-size:12px;color:var(--text-2);margin-top:9px;text-align:center}
.dlg-steps{display:flex;margin:14px 0 10px}
.dlg-step{background:#eef1f5;color:var(--text-2);font-size:12px;font-weight:500;padding:7px 20px 7px 28px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);margin-left:-8px}
.dlg-step:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);margin-left:0;padding-left:20px}
.dlg-step.active{background:var(--form-accent);color:#fff}
.dlg-step.done{background:#dbe7fb;color:var(--form-accent)}
.dlg-upl{display:inline-flex;align-items:center;gap:7px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:7px 18px;font-size:12px;font-weight:500;color:var(--text-1);cursor:pointer}
.dlg-upl:hover{border-color:var(--form-accent);color:var(--form-accent)}
.dlg-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;align-items:start}
@media(max-width:980px){.dlg-cols{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   ДАШБОРД v2 «Каспий» (2026-07)
   Табло смены — петроль; всё остальное на семантических токенах.
══════════════════════════════════════════ */
:root {
  --board-a:#1E3D4E; --board-b:#122A37;              /* петроль */
  --board-num:#FFFFFF;
  --board-lab:rgba(214,232,240,.6);
  --board-sub:rgba(214,232,240,.85);
  --board-div:rgba(214,232,240,.14);
  --board-hot:#F4A28F;
  --board-tick:var(--accent);
  --board-shadow:0 8px 22px rgba(18,42,55,.22);
}

.dz-hello{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 2px 14px}
.dz-hello h1{font-size:21px;font-weight:700;letter-spacing:-0.01em;color:var(--text-1)}
.dz-date{color:var(--text-3);font-size:13px}
.dz-who{margin-left:auto;font-size:12px;color:var(--text-2);background:var(--bg-card);border:1px solid var(--border);border-radius:99px;padding:4px 12px}

.dz-board{background:linear-gradient(180deg,var(--board-a),var(--board-b));border-radius:var(--radius-md);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;box-shadow:var(--board-shadow);margin-bottom:16px}
.dz-cell{padding:14px 20px 13px;position:relative;text-decoration:none;display:block}
.dz-cell + .dz-cell::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--board-div)}
.dz-cell::after{content:"";position:absolute;left:20px;bottom:0;width:26px;height:3px;background:var(--board-tick);opacity:0;transition:opacity .15s}
.dz-cell:hover::after,.dz-cell.hot::after{opacity:1}
.dz-cell .n{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:600;color:var(--board-num);line-height:1.1;white-space:nowrap}
.dz-cell.hot .n{color:var(--board-hot)}
.dz-cell .l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--board-lab);margin-top:3px}
.dz-cell .s{font-size:11.5px;color:var(--board-sub);margin-top:5px;min-height:16px}
.dz-cell .s em{font-style:normal;color:var(--board-hot)}

.dz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.dz-col{display:grid;gap:14px}
.dz-card{overflow:hidden}
.dz-h{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border)}
.dz-h .t{font-weight:600;font-size:13.5px;color:var(--text-1)}
.dz-h .cnt{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--text-3);white-space:nowrap}
.dz-h a{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;font-weight:500;white-space:nowrap}
.dz-b{padding:5px 16px 9px}
.dz-row{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.dz-row:last-child{border-bottom:0}
.dz-row .num{color:var(--accent);font-weight:600;white-space:nowrap;text-decoration:none;font-size:12.5px}
.dz-row .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);min-width:0}
.dz-row .amt{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap;color:var(--text-1)}
.dz-row .when{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.dz-row .when.bad{color:var(--danger);font-weight:600}
.dz-row .pill{white-space:nowrap}
.dz-row .pill.bad{background:var(--danger-soft);color:var(--danger)}
.dz-row .pill.warn{background:var(--warn-soft);color:var(--warn)}
.dz-total{display:flex;justify-content:space-between;padding:9px 0 3px;font-size:12px;color:var(--text-3)}
.dz-total b{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--text-1)}
.dz-empty{padding:16px 0 12px;text-align:center;color:var(--text-3);font-size:12.5px}
.dz-empty b{display:block;color:var(--ok);font-size:13px;margin-bottom:2px}

.dz-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:10px 0 8px;background:var(--bg-main)}
.dz-stack i{display:block;height:100%}
.dz-legend{display:flex;gap:14px;font-size:12px;color:var(--text-2);flex-wrap:wrap;padding-bottom:4px}
.dz-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

.dz-bud{padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.dz-bud:last-child{border-bottom:0}
.dz-bud .bt{display:flex;justify-content:space-between;margin-bottom:4px;color:var(--text-2)}
.dz-bud .bt .pc{font-family:ui-monospace,Consolas,monospace;color:var(--text-1)}
.dz-bud .bar{height:6px;border-radius:3px;background:var(--bg-main)}
.dz-bud .bar i{display:block;height:100%;border-radius:3px}

.dz-brief{display:flex;gap:12px;align-items:center;text-decoration:none;
  background:linear-gradient(120deg,var(--accent-soft),var(--bg-card));border:1px solid var(--border)}
.dz-brief .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin:12px 0 12px 16px;flex:none}
.dz-brief .bx{padding:12px 0;flex:1;display:block}
.dz-brief .bx b{font-size:13.5px;color:var(--text-1);display:block}
.dz-brief .bx span{font-size:12px;color:var(--text-3);margin-top:2px;display:block}
.dz-brief .go{margin-right:16px;color:var(--accent);font-size:17px}

@media(max-width:1000px){.dz-grid{grid-template-columns:1fr}.dz-board{grid-template-columns:1fr 1fr}}

/* ══════════════════════════════════════════
   НОЧНОЙ РЕЖИМ — переопределение семантики.
   Печатные бланки не трогаем (у них свои стили и @media print).
══════════════════════════════════════════ */
html[data-theme="dark"] {
  --accent:#E05A47; --accent-hover:#E97260; --accent-soft:rgba(224,90,71,.16);
  --bg-main:#14171B; --bg-card:#1D2126; --bg-input:#181C21;
  --surface-2:#23272D; --bg-sidebar:#101216;
  --border:#2A2F36; --border-mid:#3A414A;
  --text-1:#ECEEF1; --text-2:#B9BEC6; --text-3:#7D838C; --text-4:#5E646D;
  --ok:#5BD599; --ok-soft:rgba(91,213,153,.14);
  --warn:#E8B24A; --warn-soft:rgba(232,178,74,.14);
  --danger:#FF7A66; --danger-soft:rgba(255,122,102,.15);
  --info:#6FB4E8; --info-soft:rgba(111,180,232,.14);
  --neutral:#9AA0A8; --neutral-soft:#262B31;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 2px 10px rgba(0,0,0,.5);
  --board-a:#1A333F; --board-b:#101F27;
  --board-shadow:0 8px 24px rgba(0,0,0,.45);
}
html[data-theme="dark"] img.brand-logo-mono,
html[data-theme="dark"] .navbar-logo img{filter:brightness(0) invert(1);opacity:.92}

/* кнопка темы в топбаре */
.tb-theme{cursor:pointer}
.tb-theme .ti-sun{display:none}
html[data-theme="dark"] .tb-theme .ti-sun{display:inline-block}
html[data-theme="dark"] .tb-theme .ti-moon{display:none}

/* ══ KPI-ОТЧЁТЫ (право kpi): вкладки, карточки, CSS-графики ══ */
/* водяной знак: кто смотрит — видно на скриншоте, чтению не мешает */
.kpx-wm{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;
  transform:rotate(-24deg) scale(1.4);opacity:.055}
.kpx-wm span{font-size:15px;font-weight:700;letter-spacing:.5px;white-space:nowrap;
  color:var(--text-1)}
@media print{.kpx-wm{opacity:.16;position:absolute}}
.kpx-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kpx-tabs{display:flex;gap:8px}
.kpx-tab{padding:8px 16px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-2);font-weight:600;font-size:13.5px;text-decoration:none}
.kpx-tab:hover{border-color:var(--border-mid)}
.kpx-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.kpx-period{font-size:12.5px;color:var(--text-3)}
.kpx-upl{margin-left:auto;position:relative}
.kpx-upl summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--text-2);
  padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card)}
.kpx-upl summary::-webkit-details-marker{display:none}
.kpx-upl[open] summary{border-color:var(--accent);color:var(--accent)}
.kpx-upl form{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:340px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:14px;display:flex;flex-direction:column;gap:10px}
.kpx-hint{font-size:12px;color:var(--text-3);line-height:1.45}
.kpx-empty-t{font-size:15px;font-weight:700;color:var(--text-1);margin:0 0 6px}
.kpx-sec{font-size:12.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.04em;margin:20px 0 10px}
.kpx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kpx-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;box-shadow:var(--shadow-sm)}
.kpx-lab{font-size:12.5px;color:var(--text-3)}
.kpx-line{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
.kpx-num{font-size:28px;font-weight:700;color:var(--text-1);line-height:1.15;
  font-variant-numeric:tabular-nums}
.kpx-chip{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.kpx-chip.up{background:var(--ok-soft);color:var(--ok)}
.kpx-chip.down{background:var(--danger-soft);color:var(--danger)}
.kpx-chip.flat{background:var(--neutral-soft);color:var(--neutral)}
.kpx-sub{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.5}
.kpx-rows{display:flex;flex-direction:column;gap:14px}
.kpx-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;font-weight:600;
  color:var(--text-2);margin-bottom:12px}
.kpx-leg .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;
  vertical-align:-1px}
.kpx-dvrow{display:flex;align-items:center;gap:12px}
.kpx-dvlab{flex:0 0 150px;font-size:13px;font-weight:600;color:var(--text-2)}
.kpx-dvtrack{flex:1;position:relative;height:14px;background:var(--bg-main);
  border:1px solid var(--border);border-radius:7px}
.kpx-dvzero{position:absolute;left:50%;top:-3px;width:2px;height:20px;background:var(--border-mid)}
.kpx-dvbar{position:absolute;top:2px;height:9px;border-radius:4px;min-width:2px}
.kpx-val{flex:0 0 165px;font-size:13px;font-weight:700;color:var(--text-1);
  font-variant-numeric:tabular-nums;text-align:right}
.kpx-val.neg{color:var(--danger)}
.kpx-mrow{display:flex;gap:12px;align-items:center}
.kpx-mlab{flex:0 0 150px;font-size:13px;font-weight:600;color:var(--text-2)}
.kpx-mbars{flex:1;display:flex;flex-direction:column;gap:3px}
.kpx-bline{display:flex;align-items:center;gap:10px}
.kpx-track{flex:1;position:relative;height:9px;background:var(--bg-main);
  border:1px solid var(--border);border-radius:5px}
.kpx-track i{display:block;height:100%;border-radius:5px;min-width:2px}
.kpx-track .kpx-mark{position:absolute;top:-3px;width:0;height:15px;
  border-left:2px dashed var(--text-3)}
.kpx-bline .kpx-val{flex:0 0 90px}
@media(max-width:800px){
  .kpx-dvlab,.kpx-mlab{flex-basis:110px;font-size:12px}
  .kpx-val{flex-basis:120px;font-size:12px}
  .kpx-bline .kpx-val{flex-basis:70px}
  .kpx-upl{margin-left:0}
}

/* ── Свод ГРП план/факт (вкладка страницы KPI) ─────────────────────────────
   Только семантические токены — ночной режим работает автоматически. */
.grpx-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grpx-ct{font-size:12.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px}
.grpx-cb{position:relative;height:260px}
.grpx-cb-lg{height:320px}
.grpx-kbar{height:8px;background:var(--bg-main);border-radius:6px;overflow:hidden;margin-top:10px}
.grpx-kbar i{display:block;height:100%;border-radius:6px;min-width:2px}
.grpx-neg{color:var(--danger)}
.grpx-unit{font-size:16px;font-weight:600;color:var(--text-3)}
.grpx-scroll{overflow-x:auto}
.grpx-table{width:100%;border-collapse:collapse}
.grpx-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);text-align:left;padding:0 10px 9px;border-bottom:1px solid var(--border);
  white-space:nowrap}
.grpx-table th.r,.grpx-table td.r{text-align:right}
.grpx-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px}
.grpx-table tr:last-child td{border-bottom:none}
.grpx-table tr.grpx-total td{border-top:2px solid var(--text-1);background:var(--bg-main)}
.grpx-code{font-weight:700;font-size:14px;color:var(--text-1);white-space:nowrap}
.grpx-dim{font-size:11.5px;color:var(--text-3);margin-top:2px}
.grpx-dim b{color:var(--text-1)}
.grpx-strong{font-weight:700;color:var(--text-1);white-space:nowrap}
.grpx-pbar{min-width:170px}
.grpx-track{height:9px;background:var(--bg-main);border-radius:6px;overflow:hidden;
  border:1px solid var(--border)}
.grpx-track i{display:block;height:100%;border-radius:6px;background:var(--ok);min-width:2px}
.grpx-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.grpx-pill.done{background:var(--ok-soft);color:var(--ok)}
.grpx-pill.mid{background:var(--info-soft);color:var(--info)}
.grpx-pill.low{background:var(--neutral-soft);color:var(--neutral)}
.grpx-heat{display:inline-flex;gap:3px}
.grpx-heat i{width:12px;height:15px;border-radius:3px;background:var(--bg-main);
  border:1px solid var(--border)}
.grpx-heat i.p{background:var(--border-mid);border-color:var(--border-mid)}
.grpx-heat i.f{background:var(--ok);border-color:var(--ok)}
.grpx-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.grpx-mini{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.grpx-mini:hover,.grpx-mini:focus-visible{border-color:var(--border-mid);box-shadow:var(--shadow-md)}
.grpx-mini-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grpx-mini-chart{position:relative;height:90px;margin-top:8px}
.grpx-modal{position:fixed;inset:0;background:rgba(15,20,25,.55);display:flex;align-items:center;
  justify-content:center;z-index:120;padding:20px}
.grpx-modal[hidden]{display:none}
.grpx-modal-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:22px 24px;
  width:min(860px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow-md)}
.grpx-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin-bottom:10px}
.grpx-modal-title{font-size:19px;font-weight:800;color:var(--text-1)}
.grpx-modal-close{border:none;background:var(--bg-main);color:var(--text-1);width:34px;height:34px;
  border-radius:var(--radius-md);font-size:15px;cursor:pointer;line-height:1;flex:0 0 auto}
.grpx-modal-close:hover{background:var(--border)}
.grpx-modal-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;
  margin-bottom:14px}
.grpx-mk{background:var(--bg-main);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 12px}
.grpx-mk-l{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);margin-bottom:4px}
.grpx-mk-v{font-size:18px;font-weight:800;color:var(--text-1)}
.grpx-modal-chart{position:relative;height:320px}
@media(max-width:860px){
  .grpx-two{grid-template-columns:1fr}
  .grpx-cb{height:220px}
}

/* ── График Движения (GRD): таблица + календарь ─────────────────────────────
   Раздел «График Движения»: редактируемая таблица графика ГРП (текущий +
   следующий месяц) и календарь с карточками работ. Только семантические
   токены — ночной режим работает автоматически. */
.grd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.grd-nav{display:flex;align-items:center;gap:8px}
.grd-nav-title{font-weight:600;min-width:0;white-space:nowrap}
.grd-month{margin-bottom:16px}
.grd-syncform{display:inline-flex;margin:0}
.grd-sync{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--text-3);white-space:nowrap}
.grd-sync .ti{color:var(--ok);font-size:13px}
/* синк прошёл, но лист свода не прочитан — тихая красная пометка */
.grd-sync.bad,.grd-sync.bad .ti{color:var(--danger)}

/* итоги месяца — тихие чипы в шапке карточки */
.grd-totals{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.grd-pill{display:inline-flex;align-items:baseline;gap:4px;padding:2px 9px;
  border-radius:999px;background:var(--neutral-soft,var(--bg-main));
  white-space:nowrap}
.grd-pill b{font-variant-numeric:tabular-nums}

.grd-wrap{overflow-x:auto}
.grd-table{width:100%;border-collapse:separate;border-spacing:0;
  font-size:12.5px;min-width:1760px}
.grd-table th,.grd-table td{border-bottom:1px solid var(--border);
  padding:6px 8px;vertical-align:middle;text-align:left}
.grd-table.grd-edit th,.grd-table.grd-edit td{border:1px solid var(--border);
  vertical-align:top;padding:4px 6px}
.grd-table th{background:var(--bg-main);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);
  white-space:nowrap;position:sticky;top:0;z-index:1}
.grd-table td.r,.grd-table th.r{text-align:right;font-variant-numeric:tabular-nums}
.grd-view tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg-main) 45%,transparent)}
.grd-view tbody tr:hover td{background:color-mix(in srgb,var(--info) 6%,transparent)}
.grd-strong{font-weight:600}
.grd-dim{color:var(--text-2)}
.grd-mono{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.grd-wraptxt{max-width:220px;white-space:pre-line;font-size:12px;color:var(--text-2)}
.grd-empty{text-align:center;color:var(--text-3);padding:14px}
.grd-st{width:1%;white-space:nowrap}
.grd-range{white-space:nowrap;font-variant-numeric:tabular-nums}
.grd-arr{color:var(--text-3);margin:0 4px}

/* строка «идёт сейчас» — синий акцент слева, завершённые чуть гасим */
.grd-view tr.grd-row-active td:first-child{box-shadow:inset 3px 0 0 var(--info)}
.grd-view tr.grd-row-done td{color:var(--text-2)}
.grd-view tr.grd-row-done .grd-strong{color:var(--text-1)}

/* статус работы — чип (таблица + карточка календаря) */
.grd-chip{display:inline-flex;align-items:center;padding:1px 8px;
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.grd-chip.done{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.grd-chip.active{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.grd-chip.plan{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
/* «не вернулось» — оборудование WO (пакер, НКТ, АГРП) осталось на скважине
   после закрытия (wo/_materials.html) */
.grd-chip.lost{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
/* «ГРП план/факт»: разбивка месяца план → WO → факт (2026-11-02) */
.grpx-month{margin-bottom:10px}
.grpx-month>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grpx-st-no_act td{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.grpx-st-no_wo td{background:color-mix(in srgb,var(--danger) 7%,transparent)}
.grpx-st-extra td{background:color-mix(in srgb,var(--info) 9%,transparent)}
/* WO скважины в строке графика ГРП (2026-11-02) */
.grd-chip.grd-wo{margin-left:6px;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}
.wo-mat-lost td{background:color-mix(in srgb,var(--danger) 7%,transparent)}

/* «ГРП план/факт», редизайн 2026-11-05 (grp/report.html): только план и факт
   скважин, контракты — список с полосами. Цвет факта проверен валидатором
   dataviz против серого плана (CVD ΔE ≥ 12). Классы grpx-* выше остаются
   для «ПЗР план/факт». */
:root{--gpf-fact:#2F6DB5;--gpf-plan:#82878F}
html[data-theme="dark"]{--gpf-fact:#4F8BD0;--gpf-plan:#7C818A}
.gpf-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gpf-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0;
  font-size:12.5px;color:var(--text-3)}
.gpf-period{background:var(--neutral-soft);color:var(--text-2);font-weight:600;
  border-radius:999px;padding:2px 10px;white-space:nowrap}
.gpf-fresh{display:inline-flex;align-items:center;gap:5px}
.gpf-fresh .ti{color:var(--ok);font-size:14px}
.gpf-fresh.bad,.gpf-fresh.bad .ti{color:var(--danger)}
.gpf-menu{position:relative}
.gpf-menu>summary{list-style:none;cursor:pointer}
.gpf-menu>summary::-webkit-details-marker{display:none}
.gpf-menu-body{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:300px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;display:grid;gap:4px}
.gpf-menu-item{display:block;width:100%;text-align:left;background:none;border:0;
  border-radius:6px;padding:8px 10px;font:inherit;font-size:13px;color:var(--text-1);cursor:pointer}
.gpf-menu-item:hover{background:var(--surface-2)}
.gpf-menu-item small,.gpf-upload small{display:block;color:var(--text-3);font-size:11.5px;line-height:1.4}
.gpf-upload{display:grid;gap:6px;padding:8px 10px;border-top:1px solid var(--border)}
.gpf-menu-label{font-size:13px;color:var(--text-1)}
.gpf-upload input[type=file]{font-size:12px;max-width:100%}
.gpf-upload .btn{justify-self:start}
.gpf-alert{display:flex;gap:6px;align-items:center;margin:-6px 0 14px;font-size:12.5px;
  color:var(--danger);background:var(--danger-soft);border-radius:var(--radius-md);padding:8px 12px}

.gpf-kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;margin-bottom:12px}
.gpf-kpis>*,.gpf-charts>*{min-width:0}
.gpf-kpi{padding:16px 18px;margin:0}
.gpf-lab{font-size:12.5px;color:var(--text-3);font-weight:500}
.gpf-big{font-size:30px;font-weight:700;line-height:1.15;margin-top:4px;letter-spacing:-.5px;
  color:var(--text-1);font-variant-numeric:tabular-nums}
.gpf-big small{font-size:15px;color:var(--text-3);font-weight:600;letter-spacing:0}
.gpf-sub{font-size:12.5px;color:var(--text-3);margin-top:6px}
.gpf-sub b{color:var(--text-1);font-weight:600}
.gpf-verdict{display:flex;flex-direction:column;border-left:4px solid var(--danger)}
.gpf-verdict.good{border-left-color:var(--ok)}
.gpf-status{align-self:flex-start;font-size:12.5px;font-weight:700;border-radius:999px;
  padding:3px 10px;background:var(--danger-soft);color:var(--danger)}
.gpf-verdict.good .gpf-status{background:var(--ok-soft);color:var(--ok)}
.gpf-verdict .gpf-big{font-size:34px}
.gpf-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.gpf-chip{font-size:12px;border-radius:999px;padding:2px 9px;white-space:nowrap}
.gpf-chip.neg{background:var(--danger-soft);color:var(--danger)}
.gpf-chip.pos{background:var(--ok-soft);color:var(--ok)}
.gpf-bar{position:relative;height:8px;background:var(--neutral-soft);border-radius:6px;margin-top:12px}
.gpf-bar i,.gpf-track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:var(--gpf-fact);min-width:2px}
.gpf-bar u,.gpf-track u{position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--text-1);border-radius:1px;margin-left:-1px}

.gpf-charts{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-bottom:12px}
.gpf-ch{padding:16px 18px;margin:0}
.gpf-ch-t{font-size:15px;font-weight:600;color:var(--text-1)}
.gpf-ch-s{font-size:12px;color:var(--text-3)}
.gpf-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin:6px 0 8px}
.gpf-legend span{display:inline-flex;align-items:center;gap:6px}
.gpf-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.gpf-sw.plan{border:1.5px solid var(--gpf-plan)}
.gpf-sw.fact{background:var(--gpf-fact)}
.gpf-sw.neg{background:var(--danger)}
.gpf-sw.pos{background:var(--ok)}
.gpf-cb{position:relative;height:280px}

.gpf-contracts{margin-bottom:14px}
.gpf-sec{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;padding:16px 18px 6px}
.gpf-ct{text-align:right;font-size:13px;color:var(--text-2)}
.gpf-ct-n{font-size:26px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}
.gpf-clist{padding:4px 18px 4px}
.gpf-cl{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(170px,auto);
  gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.gpf-cl:last-child{border-bottom:0}
.gpf-cl-name{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.gpf-cl-code{font-weight:700;color:var(--text-1)}
.gpf-cl-cat{font-size:11.5px;color:var(--text-3);flex-basis:100%}
.gpf-tag{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;
  background:var(--neutral-soft);color:var(--text-2);white-space:nowrap}
.gpf-track{position:relative;height:12px;background:var(--neutral-soft);border-radius:6px;
  min-width:6px;box-shadow:inset 0 0 0 1px var(--border)}
.gpf-cl-nums{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.gpf-cl-nums b{color:var(--text-1)}
.gpf-rest{font-size:12px;font-weight:600;color:var(--danger)}
.gpf-rest.done{color:var(--ok)}
.gpf-warn{font-size:11.5px;color:var(--warn)}
.gpf-cl.group{background:var(--surface-2);margin:0 -18px;padding:10px 18px}
.gpf-cl.sub{padding:6px 0 6px 18px}
.gpf-cl.sub .gpf-cl-code{font-weight:500;color:var(--text-2)}
.gpf-cl.sub .gpf-track{height:8px}
.gpf-foot{font-size:12px;color:var(--text-3);padding:8px 18px 14px}

/* ── 2026-11-06: живее и понятнее (владелец: «сыро и тускло») ── */
:root{--gpf-sel:rgba(47,109,181,.11);--gpf-now:rgba(130,135,143,.09)}
html[data-theme="dark"]{--gpf-sel:rgba(79,139,208,.18);--gpf-now:rgba(124,129,138,.14)}
.gpf-verdict{background:linear-gradient(135deg,var(--danger-soft),var(--bg-card) 62%)}
.gpf-verdict.good{background:linear-gradient(135deg,var(--ok-soft),var(--bg-card) 62%)}
.gpf-verdict .gpf-big{color:var(--danger)}
.gpf-verdict.good .gpf-big{color:var(--ok)}
.gpf-bar{height:10px}
.gpf-bar i{background:linear-gradient(90deg,var(--gpf-fact),color-mix(in srgb,var(--gpf-fact) 70%,var(--ok)))}
.gpf-sw.now{background:var(--gpf-now);box-shadow:inset 0 0 0 1px var(--border)}
.gpf-cb-click canvas{cursor:pointer}
.gpf-pto{font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 8px;
  background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.gpf-gaps{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:-2px;padding:8px 10px;border-radius:var(--radius-md);background:var(--warn-soft)}
.gpf-gaps-t{font-size:12px;font-weight:600;color:var(--warn);display:inline-flex;gap:4px;align-items:center}
.gpf-gap{font-size:12px;border-radius:999px;padding:2px 9px;background:var(--bg-card);
  color:var(--text-1);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  text-decoration:none;white-space:nowrap}
a.gpf-gap:hover{border-color:var(--warn)}
.gpf-gap.nowo{color:var(--danger)}

/* календарь месяца */
.gpf-cal{padding:16px 18px 4px;margin:0 0 12px;scroll-margin-top:72px}
.gpf-cal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
#gpfCalTitle{font-size:20px;font-weight:700;letter-spacing:-.3px}
.gpf-cal-score{font-size:13px;color:var(--text-3);display:flex;gap:4px;align-items:baseline;flex-wrap:wrap;
  font-variant-numeric:tabular-nums}
.gpf-cal-score b{color:var(--text-1);font-size:15px}
.gpf-cal-dev{margin-left:8px;font-weight:700;border-radius:999px;padding:1px 9px;font-size:12px}
.gpf-cal-dev.neg{background:var(--danger-soft);color:var(--danger)}
.gpf-cal-dev.pos{background:var(--ok-soft);color:var(--ok)}
.gpf-cal-tabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--neutral-soft);
  overflow-x:auto;max-width:100%}
.gpf-cal-tab{border:0;background:none;font:inherit;font-size:12.5px;color:var(--text-2);
  padding:5px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.gpf-cal-tab.future{color:var(--text-3)}
.gpf-cal-tab:hover{color:var(--text-1)}
.gpf-cal-tab[aria-selected="true"]{background:var(--bg-card);color:var(--text-1);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gpf-cal-tab:focus-visible,.gpf-pill:focus-visible{outline:2px solid var(--gpf-fact);outline-offset:2px}
.gpf-cal-legend{margin:12px 0 10px}
.gpf-pill-sw{width:16px;height:10px;border-radius:3px;display:inline-block}
.gpf-cal-week,.gpf-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.gpf-cal-week span{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;padding:0 6px 6px}
.gpf-cal-grid{border-top:1px solid var(--border);border-left:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden}
.gpf-day{min-height:84px;padding:5px 5px 6px;border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:3px;min-width:0}
.gpf-day.wkend{background:var(--surface-2)}
.gpf-day.pad{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-2) 6px 7px)}
.gpf-dnum{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;line-height:1.4}
.gpf-day.today .gpf-dnum{align-self:flex-start;background:var(--gpf-fact);color:#fff;
  border-radius:999px;padding:0 6px;font-weight:700}
.gpf-pill{display:flex;align-items:baseline;gap:4px;min-width:0;font-size:11.5px;line-height:1.35;
  border-radius:6px;padding:2px 6px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .12s ease}
.gpf-pill b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpf-pill small{font-size:10.5px;opacity:.85;white-space:nowrap}
a.gpf-pill:hover{transform:translateY(-1px)}
.gpf-pill.done,.gpf-pill-sw.done{background:var(--ok);color:#fff}
.gpf-pill.extra,.gpf-pill-sw.extra{background:var(--gpf-fact);color:#fff}
.gpf-pill.moved,.gpf-pill-sw.moved{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);border-style:dashed}
.gpf-pill.miss,.gpf-pill-sw.miss{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.gpf-pill.wait,.gpf-pill-sw.wait{color:var(--text-2);border-color:var(--gpf-plan);border-style:dashed}
.gpf-pill-sw.moved,.gpf-pill-sw.miss,.gpf-pill-sw.wait{border-width:1.5px}
.gpf-cal-list{list-style:none;margin:10px 0 0;padding:0;display:none;gap:6px}
.gpf-cal.has-loose .gpf-cal-list{display:grid}
.gpf-cal-list li{display:none;align-items:center;gap:8px}
.gpf-cal-list li.loose{display:flex}
.gpf-cal-list li.empty{display:block;color:var(--text-3);font-size:13px}
.gpf-li-d{font-size:12px;color:var(--text-3);width:42px;flex:none;font-variant-numeric:tabular-nums}
.gpf-cal-list .gpf-pill{flex:1;justify-content:space-between}
.gpf-cal-foot{padding:10px 0 12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between}
.gpf-cal-foot a{font-weight:600}
@media (prefers-reduced-motion:reduce){.gpf-pill{transition:none}a.gpf-pill:hover{transform:none}}
@media (max-width:720px){
  .gpf-cal-week,.gpf-cal-grid{display:none}
  .gpf-cal-list,.gpf-cal-list li{display:flex}
  .gpf-cal-list{flex-direction:column}
  .gpf-cal-tabs{width:100%}
}

@media (max-width:1050px){
  .gpf-kpis{grid-template-columns:1fr 1fr}.gpf-verdict{grid-column:1/-1}
  .gpf-charts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .gpf-kpis{gap:10px}.gpf-kpi{padding:14px}.gpf-big{font-size:24px}
  .gpf-verdict .gpf-big{font-size:28px}
  .gpf-cl{grid-template-columns:1fr auto;gap:6px 12px}
  .gpf-cl-bar{grid-column:1/-1;grid-row:2}
  .gpf-ct{text-align:left}
  .gpf-menu-body{width:min(300px,calc(100vw - 32px))}
}

/* реестр WO (wo/index.html): метка открыт/закрыт полоской и чипом слева,
   закрытые строки приглушены; компактный вид — значения столбиком в ячейке,
   чтобы строка помещалась в экран; шапка липнет внутри прокрутки таблицы */
.wo-st-open{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.wo-st-closed{background:color-mix(in srgb,var(--text-3) 14%,transparent);color:var(--text-3)}
.wo-reg tr.wo-open td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
.wo-reg tr.wo-closed td:first-child{box-shadow:inset 4px 0 0 var(--text-3)}
.wo-reg tr.wo-closed td{color:var(--text-2)}
/* реестр WO — на всю страницу, без своей прокрутки (владелец 2026-10-31).
   Компактный вид помещается в ширину: шапка липнет к странице под navbar+topbar,
   у карточки снят overflow:hidden (иначе sticky не работает). ?view=full — только
   прокрутка по ширине (.grd-wrap), шапка не липнет. */
.card.wo-reg-card{overflow:visible}
.wo-reg-fit{overflow:visible}
.wo-reg-fit .wo-reg th{top:calc(var(--navbar-h) + var(--topbar-h))}
.wo-reg-compact{min-width:0;font-size:12.5px}
.wo-reg-compact th{white-space:normal;line-height:1.3}
.wo-reg-compact th,.wo-reg-compact td{padding:6px 7px}
.wo-reg-compact td{vertical-align:top}
/* реестр помещается в экран любой ширины (владелец 2026-11-01: «должен
   помещаться на всех экранах разных размеров»). Ширину держали nowrap-метки
   этапа («ПЗР+ГРП: не отмечено»), строки подрядчиков и min-width «Работ» —
   теперь переносятся, таблица сжимается до ~900 px. Уже — по ширине карточки
   (@container, сайдбар учтён сам): прячем «Остаток» и «Папку», затем
   «Подрядчиков» — всё есть в карточке WO и в «Все колонки F-002». Телефон
   (≤700px) — карточка на строку (.tbl-cards, подписи из <thead> ставит
   main.js), колонки не прячем. */
.card.wo-reg-card{container:woreg / inline-size}
.wo-reg-compact td.wo-works{min-width:0}
.wo-reg-compact .wo-stg{white-space:normal}
.wo-reg-compact .wo-lines>span{white-space:normal}
.wo-reg-compact .wo-lines.r>span{white-space:nowrap}
@media (min-width:701px){
  @container woreg (max-width:920px){
    .wo-reg-compact th:nth-child(8),.wo-reg-compact td:nth-child(8),
    .wo-reg-compact th:nth-child(11),.wo-reg-compact td:nth-child(11){display:none}
  }
  @container woreg (max-width:780px){
    .wo-reg-compact th:nth-child(6),.wo-reg-compact td:nth-child(6){display:none}
  }
}
@media (max-width:700px){
  /* короткие поля — по два в ряд, месторождение…подрядчики — во всю ширину */
  .wo-reg-compact.tbl-cards tbody tr{padding-top:12px;display:grid;
    grid-template-columns:1fr 1fr;column-gap:12px}
  .wo-reg-compact.tbl-cards td:nth-child(n+3):nth-child(-n+6){grid-column:1/-1}
  .wo-reg-compact.tbl-cards .wo-lines>span{white-space:normal}
}
.wo-sub{display:block;font-size:11.5px;color:var(--text-2);margin-top:2px}
.wo-sub .wo-well{color:var(--text-1)}
.wo-lines>span{display:block;white-space:nowrap;font-size:11.5px;line-height:1.45}
.wo-neg{color:var(--red);font-weight:600}
/* вид реестра (владелец 2026-11-02: «таблица не выделяется»): шапка —
   плотная плашка с толстой нижней линией, ячейки просторнее и с тонкими
   вертикальными разделителями (как сетка Excel), строка под мышью — заметнее,
   номер WO — акцентом. Только .wo-reg — общий .grd-table не трогаем. */
.wo-reg-card{border-color:var(--border-mid);box-shadow:var(--shadow-md)}
.wo-reg th{background:color-mix(in srgb,var(--text-1) 7%,var(--bg-card));
  color:var(--text-2);font-size:11px;letter-spacing:.03em;
  border-bottom:2px solid var(--border-mid);padding:9px 8px}
.wo-reg-compact td{padding:8px}
.wo-reg td{border-bottom-color:var(--border)}
.wo-reg tbody tr{cursor:pointer}
.grd-view.wo-reg tbody tr:hover td{background:color-mix(in srgb,var(--info) 11%,var(--bg-card))}
td.grd-strong.wo-num,.wo-num>.grd-strong{color:var(--accent);font-weight:700;font-size:13px}
@media (min-width:701px){
  .wo-reg th+th,.wo-reg td+td{border-left:1px solid color-mix(in srgb,var(--border) 75%,transparent)}
}
/* сортировка кликом по заголовку, как в Excel: ⇅ у каждой сортируемой
   колонки, у текущей — ▲/▼ и цвет акцента */
.wo-sort{color:inherit;text-decoration:none;border-radius:4px;padding:1px 3px;margin:-1px -3px}
.wo-sort i{font-size:13px;margin-left:3px;vertical-align:-2px;opacity:.5}
.wo-sort:hover{color:var(--text-1);background:color-mix(in srgb,var(--text-1) 8%,transparent)}
.wo-sort:hover i{opacity:1}
.wo-sort.on{color:var(--accent)}
.wo-sort.on i{opacity:1}
/* шапка реестра: вкладки · поиск · «Сортировать» … кнопки справа. Панель
   «Сортировать» — <details data-dropdown> поверх таблицы (main.js закрывает
   кликом мимо); на телефоне — во всю ширину шапки */
.wo-reg-bar{position:relative;align-items:flex-end}
.wo-reg-actions{margin-left:auto;flex-wrap:wrap}
.wo-dd{position:relative}
.wo-dd>summary{list-style:none;cursor:pointer;user-select:none}
.wo-dd>summary::-webkit-details-marker{display:none}
.wo-dd>summary.wo-dd-on{border-color:var(--accent);color:var(--accent)}
.wo-dd[open]>summary{background:var(--accent-soft);border-color:var(--accent)}
.wo-dd-chev{font-size:13px;transition:transform .15s}
.wo-dd[open] .wo-dd-chev{transform:rotate(180deg)}
.wo-dd-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;
  height:17px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700}
.wo-dd-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  width:min(560px,calc(100vw - 32px));background:var(--bg-card);
  border:1px solid var(--border-mid);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:14px}
.wo-dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.wo-dd-grid label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:11px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.wo-dd-grid .form-input{width:100%;text-transform:none;letter-spacing:0;font-weight:400}
.wo-dd-actions{display:flex;gap:8px;margin-top:12px}
.wo-dd-legend{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.wo-dd-legend>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--text-2)}
.wo-dd-legend .wo-legend{flex-direction:column;align-items:flex-start;margin:8px 0 0}
@media (max-width:700px){
  .wo-dd{position:static}
  .wo-dd-panel{left:0;right:0;width:auto}
  .wo-dd-grid{grid-template-columns:1fr}
}
/* флажки WO (PR-18, services/wo_flags): заливка строки реестра — оплата, а
   пока счёт не выставлен — состояние работ; доп. затраты вне плана — свой
   фиолетовый (полоса справа и метка), с заливкой не смешивается. Те же
   классы — квадратики легенды над таблицей и метки в карточке WO. */
:root{--wo-extra:#7E4FB0}
html[data-theme="dark"]{--wo-extra:#B794E0}
/* счёт в два этапа (владелец 2026-11-01): цвет — у метки этапа .wo-stg, а
   не у строки; квадратики легенды — те же классы */
.wo-stg.wo-c-unbilled,.wo-sw.wo-c-unbilled{background:color-mix(in srgb,var(--danger) 16%,transparent);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.wo-stg.wo-c-part,.wo-sw.wo-c-part{background:color-mix(in srgb,var(--warn) 22%,transparent);border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.wo-stg.wo-c-billed,.wo-sw.wo-c-billed{background:color-mix(in srgb,var(--info) 18%,transparent);border-color:color-mix(in srgb,var(--info) 55%,transparent)}
.wo-stg.wo-c-paid,.wo-sw.wo-c-paid{background:color-mix(in srgb,var(--ok) 18%,transparent);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.wo-stg.wo-c-paused,.wo-sw.wo-c-paused{background:color-mix(in srgb,var(--text-3) 18%,transparent)}
.wo-stg{display:inline-flex;align-items:center;padding:0 7px;border:1px solid var(--border-mid);
  border-radius:4px;font-size:10.5px;font-weight:600;line-height:1.6;white-space:nowrap;color:var(--text-1)}
.wo-stg-hint{color:var(--warn);border-style:dashed;border-color:var(--warn)}
.wo-stg-unset{color:var(--text-3);font-weight:500;border-style:dashed}
.wo-lag-late{color:var(--danger)}
.wo-lag-ok{color:var(--ok)}
.wo-stage-flags{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:center;
  padding-right:10px;border-right:1px solid var(--border-mid)}
.wo-stage-form{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:flex-end;
  border:1px solid var(--border-mid);border-radius:6px;padding:4px 10px 8px;margin:0}
.wo-reg tr.wo-x td:last-child{box-shadow:inset -4px 0 0 var(--wo-extra)}
.wo-legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  font-size:12px;color:var(--text-2);margin-bottom:10px}
.wo-sw{display:inline-block;width:14px;height:14px;border-radius:3px;
  border:1px solid var(--border-mid);vertical-align:-3px;margin-right:5px}
.wo-sw.wo-sw-extra{background:var(--wo-extra);border-color:var(--wo-extra)}
.wo-flags{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}
.card-body.wo-flags{gap:6px 10px;margin-top:0}
.wo-flag{display:inline-flex;align-items:center;gap:3px;padding:0 7px;
  border:1px solid currentColor;border-radius:999px;font-size:10.5px;
  font-weight:600;line-height:1.6;white-space:nowrap}
.card-body.wo-flags .wo-flag{font-size:12px;padding:1px 9px;white-space:normal}
.wo-fw-going{color:var(--info)}
.wo-fw-paused{color:var(--text-3)}
.wo-fw-done{color:var(--ok)}
.wo-fw-unset{color:var(--text-3);border-style:dashed}
.wo-fp-none{color:var(--danger)}
.wo-fp-partial{color:var(--warn)}
.wo-fp-full{color:var(--info)}
.wo-fp-paid{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.wo-hint{color:var(--warn);border-style:dashed}
.wo-equip{color:var(--text-1)}
.wo-extra{color:var(--wo-extra);background:color-mix(in srgb,var(--wo-extra) 12%,transparent)}
.wo-flags-form{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.wo-flags-form .form-hint{display:block}

/* мини прогресс-бар: готовность/прогресс читаются взглядом, не цифрой */
.grd-bar{display:inline-flex;align-items:center;gap:6px;min-width:86px}
.grd-bar-track{flex:1;height:5px;min-width:44px;border-radius:999px;
  background:var(--neutral-soft,var(--bg-main));overflow:hidden}
.grd-bar-fill{display:block;height:100%;border-radius:999px;background:var(--warn)}
.grd-bar.mid .grd-bar-fill{background:var(--info)}
.grd-bar.full .grd-bar-fill{background:var(--ok)}
.grd-bar-val{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-2);
  min-width:32px;text-align:right}
.grd-bar.full .grd-bar-val{color:var(--ok);font-weight:600}

.grd-in{width:100%;border:1px solid var(--border);border-radius:4px;
  padding:3px 5px;font-size:12.5px;background:var(--bg-input,var(--bg-card));
  color:var(--text-1)}
.grd-in:focus{outline:none;border-color:var(--info)}
.grd-xs{min-width:52px}
.grd-s{min-width:80px}
.grd-m{min-width:140px}
.grd-num{min-width:58px}
.grd-date{min-width:128px}
.grd-area{min-width:170px;resize:vertical}
.grd-actions{white-space:nowrap}
.grd-del{color:var(--danger)}
.grd-addrow td{background:var(--bg-main)}

/* календарь-лента (Gantt): дорожки = флоты, колонки = дни месяца.
   Референс-паттерн: длительность = длина плашки, насыщенные блоки с
   подписью внутри, колонка «сегодня» выделена на всю высоту. */
.grd-tl-wrap{overflow-x:auto;border-top:1px solid var(--border)}
.grd-tl{display:grid;min-width:740px;position:relative}
.grd-tl + .grd-tl{margin-top:14px;border-top:2px solid var(--border)}
.grd-tl-bg{pointer-events:none}
.grd-tl-bg.wknd{background:color-mix(in srgb,var(--text-3) 7%,transparent)}
.grd-tl-bg.today{background:color-mix(in srgb,var(--red) 8%,transparent);
  box-shadow:inset 2px 0 0 var(--red),inset -2px 0 0 var(--red)}
.grd-tl-corner{grid-column:1;grid-row:1;position:sticky;left:0;z-index:3;
  background:var(--bg-main);border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:7px 12px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-3);display:flex;align-items:flex-end}
.grd-tl-day{grid-row:1;text-align:center;padding:5px 0 4px;
  border-bottom:1px solid var(--border);line-height:1.25}
.grd-tl-day b{display:block;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text-2)}
.grd-tl-day span{display:block;font-size:9px;text-transform:uppercase;
  color:var(--text-3)}
.grd-tl-day.wknd b,.grd-tl-day.wknd span{
  color:color-mix(in srgb,var(--red) 45%,var(--text-3))}
.grd-tl-day.today b{color:var(--red)}
.grd-tl-day.today span{color:var(--red);font-weight:700}
.grd-tl-fleet{position:sticky;left:0;z-index:2;background:var(--bg-card);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:8px 14px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.grd-tl-fleet.alt{background:color-mix(in srgb,var(--bg-main) 55%,var(--bg-card))}
.grd-tl-fleet b{font-size:13px;font-weight:700;line-height:1.2;
  overflow-wrap:anywhere}
.grd-tl-fleet span{font-size:11px;color:var(--text-3)}
/* плашка работы: насыщенная заливка, подпись внутри, прогресс — светлая
   полоса поверх; обрезка по краю месяца — пунктирный срез */
.grd-tl-bar{position:relative;margin:8px 2px;border:none;border-radius:8px;
  padding:0 10px;font-size:12px;font-weight:700;cursor:pointer;
  overflow:hidden;text-align:left;color:#fff;min-width:0;
  background:color-mix(in srgb,var(--warn) 88%,var(--bg-card));
  box-shadow:0 1px 2px rgba(0,0,0,.18);transition:filter .1s,box-shadow .1s}
.grd-tl-bar:hover{filter:brightness(1.07);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.grd-tl-bar.done{background:color-mix(in srgb,var(--ok) 88%,var(--bg-card))}
.grd-tl-bar.active{background:color-mix(in srgb,var(--info) 88%,var(--bg-card))}
.grd-tl-bar.plan{color:color-mix(in srgb,#000 72%,var(--warn))}
.grd-tl-bar.clip-l{border-top-left-radius:0;border-bottom-left-radius:0;
  border-left:2px dashed rgba(255,255,255,.75)}
.grd-tl-bar.clip-r{border-top-right-radius:0;border-bottom-right-radius:0;
  border-right:2px dashed rgba(255,255,255,.75)}
.grd-tl-fill{position:absolute;inset:0 auto 0 0;
  background:rgba(255,255,255,.28);pointer-events:none}
.grd-tl-bar.plan .grd-tl-fill{background:rgba(0,0,0,.1)}
.grd-tl-txt{position:relative;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;line-height:40px}
.grd-tl-txt small{font-weight:600;opacity:.8}
/* календарь ГРП (месяц одной лентой): подпись над плашкой, не обрезается
   шириной плашки — место под неё отводит раскладка дорожек (reach) */
.grd-tl.lbl-above .grd-tl-bar{margin:22px 2px 6px;border-radius:5px;padding:0}
.grd-tl-lbl{align-self:start;margin:4px 2px 0;padding:0 2px;border:0;background:none;
  font-family:inherit;font-size:12px;font-weight:700;line-height:16px;color:var(--text-1);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0;z-index:1}
.grd-tl-lbl small{font-weight:600;color:var(--text-3)}
.grd-tl-lbl:hover{text-decoration:underline}
.grd-tl-lbl.done{color:color-mix(in srgb,var(--ok) 70%,var(--text-1))}

/* чипы «Без даты» */
.grd-ev{display:block;text-align:left;border:1px solid transparent;
  border-left-width:3px;border-radius:5px;padding:2px 8px;
  font-size:11.5px;font-weight:600;cursor:pointer;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:var(--bg-main);
  color:var(--text-1);transition:filter .1s}
.grd-ev:hover{filter:brightness(1.06)}
.grd-ev.plan{background:color-mix(in srgb,var(--warn) 13%,var(--bg-card));
  color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  border-left-color:var(--warn)}
.grd-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;font-size:12px;color:var(--text-2)}
.grd-dot{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:5px;vertical-align:-1px}
.grd-nodate{display:flex;gap:8px;flex-wrap:wrap}
.grd-nodate .grd-ev{width:auto}

/* карточка работы (dialog): шапка со статусом, строка сроков, детали.
   margin:auto обязателен — глобальный резет *{margin:0} иначе прижимает
   dialog к левому верхнему углу вместо центра экрана */
.grd-dlg{border:none;border-radius:12px;padding:0;max-width:520px;width:92%;
  margin:auto;background:var(--bg-card);color:var(--text-1);
  box-shadow:0 18px 60px rgba(0,0,0,.25)}
.grd-dlg::backdrop{background:rgba(0,0,0,.45)}
.grd-dlg-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;padding:16px 18px 8px}
.grd-dlg-headright{display:flex;align-items:center;gap:10px}
.grd-dlg-title{font-size:17px;font-weight:700}
.grd-dlg-close{border:none;background:none;font-size:15px;cursor:pointer;
  color:var(--text-3);padding:4px}
.grd-dlg-timeline{display:flex;align-items:center;gap:8px;margin:4px 18px 2px;
  padding:7px 10px;border-radius:8px;font-size:12.5px;font-weight:600;
  background:var(--neutral-soft,var(--bg-main));color:var(--text-2)}
.grd-dlg-timeline .ti{color:var(--text-3)}
.grd-dlg-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;
  padding:8px 18px}
.grd-dlg-item{display:flex;justify-content:space-between;align-items:center;
  gap:10px;font-size:13px;border-bottom:1px dashed var(--border);padding:3px 0}
.grd-dlg-item span{color:var(--text-2)}
.grd-dlg-item .grd-bar{min-width:96px}
.grd-dlg-notes{padding:6px 18px 16px}
.grd-dlg-note{font-size:12.5px;margin-top:8px;white-space:pre-line}
.grd-dlg-note span{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-3);margin-bottom:2px}
@media(max-width:700px){.grd-dlg-grid{grid-template-columns:1fr}}

/* ── ПЗР (станки КРС): дополнения к GRD ─────────────────────────────────────
   Отличие от ГРП: одновременно работают несколько станков, поэтому вид
   работы (подготовка / освоение) кодируется цветом, а станок — дорожкой
   календаря и отдельной колонкой таблицы. Цвета — семантические токены. */
.pzr-table{min-width:2200px}
.pzr-rig{font-weight:600;white-space:nowrap}
.pzr-stage{display:inline-flex;align-items:center;padding:1px 8px;
  border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;
  background:var(--neutral-soft,var(--bg-main));color:var(--text-2)}
.pzr-stage.prep{background:color-mix(in srgb,var(--info) 14%,transparent);
  color:var(--info)}
.pzr-stage.dev{background:color-mix(in srgb,var(--warn) 16%,transparent);
  color:var(--warn)}
/* календарь ПЗР: цвет плашки — ВИД РАБОТЫ (станок различается дорожкой),
   состояние — обводка и насыщенность. Так параллельные станки читаются
   строками, а подготовка/освоение — цветом, не смешиваясь. */
.pzr-bar.prep{background:color-mix(in srgb,var(--info) 88%,var(--bg-card));
  color:#fff}
.pzr-bar.dev{background:color-mix(in srgb,var(--warn) 90%,var(--bg-card));
  color:color-mix(in srgb,#000 72%,var(--warn))}
.pzr-bar.other{background:color-mix(in srgb,var(--text-3) 70%,var(--bg-card));
  color:#fff}
.pzr-bar.st-done{filter:saturate(.45);opacity:.8}
.pzr-bar.st-active{box-shadow:inset 0 0 0 2px var(--ok),0 2px 6px rgba(0,0,0,.25)}
.pzr-bar .grd-tl-txt .ti{font-size:13px;margin-right:3px;vertical-align:-2px}
.pzr-bar.dev .grd-tl-fill{background:rgba(0,0,0,.12)}

/* чипы «Без даты» и «не включены в график» — тот же цветовой код */
.pzr-ev.prep{background:color-mix(in srgb,var(--info) 13%,var(--bg-card));
  color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent);
  border-left-color:var(--info)}
.pzr-ev.dev{background:color-mix(in srgb,var(--warn) 13%,var(--bg-card));
  color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  border-left-color:var(--warn)}
.pzr-ev.other{background:var(--bg-main);color:var(--text-2);
  border-left-color:var(--text-3)}

/* легенда: точки видов работы + образцы состояний */
.pzr-dot.prep{background:var(--info)}
.pzr-dot.dev{background:var(--warn)}
.pzr-dot.other{background:var(--text-3)}
.pzr-leg-state{display:inline-flex;align-items:center;gap:5px}
.pzr-leg-box{display:inline-block;width:16px;height:11px;border-radius:3px;
  background:color-mix(in srgb,var(--info) 88%,var(--bg-card))}
.pzr-leg-box.st-active{box-shadow:inset 0 0 0 2px var(--ok)}
.pzr-leg-box.st-done{filter:saturate(.45);opacity:.8}

/* отклонение от плана: «+» позже плана — красным, «−» раньше — зелёным */
.pzr-dev{font-variant-numeric:tabular-nums;font-weight:600}
.pzr-dev.late{color:var(--danger)}
.pzr-dev.early{color:var(--ok)}

/* свод «ПЗР план/факт»: стопка структуры фонда — чистый CSS (правило
   платформы: KPI-графики без библиотек; ГРП с Chart.js — исключение) */
.pzrx-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1000px){.pzrx-two{grid-template-columns:1fr}}
.pzrx-stackrow{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pzrx-stacklab{flex:none;width:150px;font-size:12px;color:var(--text-2)}
.pzrx-stack{flex:1;display:flex;height:26px;border-radius:6px;overflow:hidden;
  background:var(--neutral-soft,var(--bg-main))}
.pzrx-stack i{display:flex;align-items:center;justify-content:center;
  min-width:0;font-style:normal;transition:filter .1s}
.pzrx-stack i:hover{filter:brightness(1.08)}
.pzrx-stack i b{font-size:11px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.pzrx-stack .s1,.pzrx-dot.s1{background:var(--ok)}
.pzrx-stack .s2,.pzrx-dot.s2{background:var(--info)}
.pzrx-stack .s3,.pzrx-dot.s3{background:var(--warn)}
.pzrx-stack .s4,.pzrx-dot.s4{background:color-mix(in srgb,var(--info) 45%,var(--text-3))}
.pzrx-stack .s5,.pzrx-dot.s5{background:var(--danger)}
.pzrx-stack .s3 b{color:color-mix(in srgb,#000 72%,var(--warn))}

.pzrx-notes summary{cursor:pointer;padding:12px 16px;font-size:13px;
  font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:8px}
.pzrx-notes summary::marker{color:var(--text-3)}
.pzrx-notelist{margin:0;padding-left:20px;font-size:12.5px;color:var(--text-2)}
.pzrx-notelist li{margin-bottom:6px;list-style:none;text-indent:-14px}

/* журнал скважины: лента по дням, слева дата, справа записи смен */
.wrj-search{display:inline-flex;gap:4px;align-items:center}
.wrj-day{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--border)}
.wrj-day:first-child{border-top:none;padding-top:0}
.wrj-date{flex:none;width:120px;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;padding-top:2px}
.wrj-dow{display:block;font-size:11px;font-weight:400;color:var(--text-3);
  text-transform:uppercase}
.wrj-items{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.wrj-item{border-left:3px solid var(--border);padding-left:10px}
.wrj-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;margin-bottom:3px}
.wrj-text{font-size:13px;line-height:1.5;white-space:pre-line}
.wrj-plan{margin-top:5px;font-size:12px;color:var(--text-2);
  background:var(--neutral-soft,var(--bg-main));border-radius:6px;
  padding:5px 8px}
.wrj-plan span{display:block;font-size:10px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-3)}
@media(max-width:700px){.wrj-day{flex-direction:column;gap:6px}
  .wrj-date{width:auto}}

/* сводки внутри карточки работы календаря */
.wrj-mini-h{font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-3);margin:10px 0 4px}
.wrj-mini{font-size:12px;border-left:2px solid var(--border);
  padding:2px 0 2px 8px;margin-bottom:6px;color:var(--text-2)}
.wrj-mini b{font-variant-numeric:tabular-nums;color:var(--text-1)}
.wrj-mini span{font-size:11px;color:var(--text-3);margin-left:4px}

/* отметка «сводка за сегодня получена» в таблице ПЗР */
.pzr-said{color:var(--ok);font-size:13px;vertical-align:-2px;margin-left:3px}

/* разбор сводок из Telegram: сырой текст сообщения и очередь привязки */
.wru-item{border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  margin-bottom:10px}
.wru-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;margin-bottom:6px}
.wru-actions{margin-left:auto;display:flex;gap:6px}
.wru-actions form{display:inline-flex;margin:0}
.wru-note{font-size:12px;color:var(--danger);margin-bottom:6px}
.wru-raw{white-space:pre-wrap;font-family:var(--font-mono);font-size:11.5px;
  line-height:1.5;color:var(--text-2);background:var(--bg-main);
  border-radius:6px;padding:8px 10px;max-height:220px;overflow:auto;margin:0}
.wru-attach{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}

/* импорт каталога: галочка «только дозаполнить» рядом с выбором файла */
.import-only-update{display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-2);white-space:nowrap;cursor:pointer}
.import-only-update input{margin:0}

/* паспорт узлов техники: поля в таблице не должны распирать колонки */
.unit-passport .form-input{width:100%;min-width:0;font-size:13px;padding:5px 8px}
.unit-passport td{vertical-align:middle}

/* IDA — вложения в банке идей: чипы файлов в ленте + окно предпросмотра */
.ida-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ida-file{display:inline-flex;align-items:center;gap:6px;max-width:320px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font-size:12px;color:var(--text-2);text-decoration:none}
.ida-file:hover{border-color:var(--red)}
.ida-file>.ti{color:var(--text-3);font-size:14px;flex:none}
.ida-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text-1)}
button.ida-file-name{background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--text-1);text-align:left}
button.ida-file-name:hover{text-decoration:underline}
.ida-file-dl{color:var(--text-3);display:inline-flex;flex:none}
.ida-file-dl:hover{color:var(--red)}
.ida-dlg{border:none;border-radius:12px;padding:0;width:92%;max-width:960px;
  margin:auto;background:var(--bg-card);color:var(--text-1);
  box-shadow:0 18px 60px rgba(0,0,0,.25)}
.ida-dlg::backdrop{background:rgba(0,0,0,.45)}
.ida-dlg-head{display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--border)}
.ida-dlg-title{font-size:14px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.ida-dlg-close{border:none;background:none;font-size:15px;cursor:pointer;
  color:var(--text-3);padding:4px}
.ida-dlg-frame{display:block;width:100%;height:70vh;border:none;
  background:#fff;border-radius:0 0 12px 12px}

/* ══════════════════════════════════════════
   СКЛАД v2 (2026-08-21)
   Единый стиль складских экранов: контент по центру, таблицы с
   выравниванием чисел, моноширинные номера, «шапка-паспорт» карточки
   позиции. Только семантические токены — ночной режим работает сам.
══════════════════════════════════════════ */
:root {
  --font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas,
               "Liberation Mono", monospace;
}

/* контент складских экранов по центру; узкие карточки держат свой
   max-width инлайном, широким спискам ширину даёт --wide */
.stock-card { margin-inline: auto; width: 100%; }
.stock-card--wide { max-width: 1240px; }

/* единые ячейки: номера — mono, числа — вправо и табличными цифрами */
.td-mono { font-family: var(--font-mono); font-size: 11.5px; }
.data-table th.num, .data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.unit { color: var(--text-3); font-size: 11px; margin-left: 3px; }

/* «Ожидается на склад»: таблица по ширине карточки, без горизонтальной
   прокрутки — наименование переносится, «Прибыло» всегда на экране */
.stock-inbound th, .stock-inbound td { padding-left: 10px; padding-right: 10px; }
.stock-inbound td { overflow-wrap: anywhere; }
.stock-inbound td.num, .stock-inbound-act { white-space: nowrap; overflow-wrap: normal; }
.stock-inbound-act { text-align: right; }
.stock-inbound-sub { margin-top: 3px; font-size: 11px; }
/* на телефоне — карточки; номера строки нет, место под него не нужно */
@media (max-width: 700px) { .stock-inbound.tbl-cards tbody tr { padding-top: 12px; } }

/* заголовок раздела внутри карточки — та же микротипографика,
   что у шапок таблиц: структура читается одной системой */
.stock-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin: 24px 0 8px;
}
.stock-h:first-child { margin-top: 0; }

/* «шапка-паспорт» карточки позиции: слева номер и имя, справа остаток */
.stock-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  margin-bottom: 18px;
}
.stock-hero-no {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.stock-hero-name { font-size: 15px; font-weight: 600; margin-top: 4px; }
.stock-hero-meta { color: var(--text-3); font-size: 12px; margin-top: 6px; }
.stock-hero-pills {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}
.stock-balance { text-align: right; min-width: 150px; }
.stock-balance-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.stock-balance-qty {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stock-balance-qty .unit { font-size: 14px; font-weight: 600; }
.stock-balance--low .stock-balance-qty { color: var(--danger); }
.stock-balance-min { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.stock-balance--low .stock-balance-min { color: var(--danger); }

/* разбивка остатка по складам — тихие чипы под цифрой */
.stock-wh {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; margin-top: 8px;
}
.stock-wh-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--text-2);
  font-size: 11px;
}
.stock-wh-chip b { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .stock-hero { flex-direction: column; }
  .stock-balance { text-align: left; }
  .stock-wh { justify-content: flex-start; }
}

/* ══════════════════════════════════════
   УТРЕННИЙ БРИФИНГ (dashboard/briefing.html)
══════════════════════════════════════ */
.brief-wrap { max-width: 720px; margin: 0 auto; }

.brief-hero { text-align: center; padding: 26px 0 24px; }
.brief-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brief-date::before, .brief-date::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--border-mid);
}
.brief-hero h1 {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-1);
}
.brief-sub { font-size: 13.5px; color: var(--text-3); margin-top: 7px; }

.brief-card .card-body { padding: 24px 30px; }
.brief-text { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.brief-text p { margin: 0 0 12px; }
.brief-text p:last-child { margin-bottom: 0; }
.brief-text strong { font-weight: 600; color: var(--text-1); }
.brief-text .brief-head {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 18px 0 8px;
}
.brief-text .brief-head:first-child { margin-top: 0; }
.brief-text ul { list-style: none; margin: 0 0 12px; padding: 0; }
.brief-text ul:last-child { margin-bottom: 0; }
.brief-text li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.brief-text li:last-child { margin-bottom: 0; }
.brief-text li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
.brief-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-4);
}

.brief-loading { text-align: center; padding: 44px 0; color: var(--text-3); font-size: 13.5px; }
.brief-loading i {
  font-size: 30px;
  color: var(--accent);
  display: block;
  width: 30px;
  margin: 0 auto 10px;
  animation: brief-spin 1.1s linear infinite;
}
@keyframes brief-spin { to { transform: rotate(360deg); } }

.brief-sec {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 0 10px;
}
.brief-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.brief-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 16px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.brief-action:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-mid);
}
.brief-action i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.brief-action span { font-size: 12px; font-weight: 550; color: var(--text-1); line-height: 1.35; }

@media (max-width: 900px) {
  .brief-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .brief-hero h1 { font-size: 24px; }
  .brief-card .card-body { padding: 20px 18px; }
  .brief-text { font-size: 14.5px; }
}

/* ══════════════════════════════════════════
   ОРГСТРУКТУРА (company/structure.html, 2026-08-28)
   Дерево подчинения по утверждённой схеме. Экран отвечает на один вопрос —
   КТО КОМУ ПОДЧИНЁН, — а отступом на 28 узлах он не отвечал. Поэтому
   уровни рисуются настоящими линиями связи: у каждого узла одна рельса
   ПОД ЕГО ИКОНКОЙ, и всё, что ниже (сотрудники узла и подчинённые
   подразделения), висит на этой рельсе своим коленом; у последнего
   элемента рельса обрезана. Отсюда единый контейнер .org-kids для людей
   И подразделений — иначе линия рвалась между ними.
   Два типа узла различаются намеренно: БЛОК руководителя (есть
   подчинённые, свёртывается) и ОТДЕЛ (лист). Акцент несёт смысл только в
   двух местах: иконка блока и аватар руководителя блока.
   Только семантические токены — ночной режим работает сам.
══════════════════════════════════════════ */
.org-tree { --org-indent: 48px; --org-rail: 15px; }

.org-node { position: relative; }
.org-node > summary { list-style: none; }
.org-node > summary::-webkit-details-marker { display: none; }

/* контейнер уровня: люди узла + подчинённые подразделения на одной рельсе */
.org-kids { padding-left: var(--org-indent); }
.org-kids > .org-node::before,
.org-kids > .org-node::after,
.org-kids > .org-person::before,
.org-kids > .org-person::after {
  content: '';
  position: absolute;
  background: var(--border-mid);
}
.org-kids > .org-node,
.org-kids > .org-person { position: relative; }
.org-kids > *::before {                  /* рельса вниз */
  left: calc(var(--org-rail) * -1);
  top: 0;
  bottom: 0;
  width: 1px;
}
.org-kids > *:last-child::before { bottom: auto; height: 18px; }
.org-kids > *::after {                   /* колено к элементу */
  left: calc(var(--org-rail) * -1);
  top: 18px;
  width: 13px;
  height: 1px;
}

/* заголовок узла */
.org-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 0;
  border-radius: var(--radius-sm);
}
details.org-node > summary.org-head { cursor: pointer; }
details.org-node > summary.org-head:hover { background: var(--surface-2); }
.org-chevron {
  flex: none;
  width: 14px;
  font-size: 13px;
  color: var(--text-4);
  transition: transform .15s ease;
}
details.org-node[open] > .org-head .org-chevron { transform: rotate(90deg); }
.org-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--neutral-soft);
  color: var(--text-3);
}
.org-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
  line-height: 1.35;
}
.org-count { flex: none; font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* БЛОК руководителя */
.org-node--block > .org-head .org-name { font-size: 13.5px; font-weight: 650; color: var(--text-1); }
.org-node--block > .org-head .org-icon { background: var(--accent-soft); color: var(--accent); }

/* верх схемы */
.org-node--root > .org-head { padding: 4px 8px 10px 0; }
.org-node--root > .org-head .org-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.org-node--root > .org-head .org-icon { background: var(--accent); color: #FFFFFF; }

/* сотрудник. Группировка отступом и аватаром, без разделительных линий:
   они конкурировали бы с линиями связи. Ширина ограничена, иначе кнопка
   «убрать» уезжает к правому краю и строка читается как строка таблицы. */
.org-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  max-width: 720px;
}
.org-person form { opacity: .2; transition: opacity .12s ease; }
.org-person:hover form,
.org-person form:focus-within { opacity: 1; }
.org-ava {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--neutral-soft);
  color: var(--text-2);
}
.org-node--block > .org-kids > .org-person .org-ava,
.org-node--root  > .org-kids > .org-person .org-ava {
  background: var(--accent-soft);
  color: var(--accent);
}
.org-person__name { font-size: 12.5px; font-weight: 550; color: var(--text-1); }
/* написание ФИО в аккаунте, когда оно отличается от структуры: видно
   только админу и только там, где расхождение реально есть */
.org-alias {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--neutral-soft);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.org-person__pos  { font-size: 11px; color: var(--text-3); line-height: 1.3; }

@media (max-width: 720px) {
  .org-tree { --org-indent: 26px; --org-rail: 11px; }
  .org-kids > *::after { width: 8px; }
  .org-person { max-width: none; }
}

/* ══════════════════════════════════════════
   MOBILE (2026-09-10) — платформа с телефона
   Правила слоя:
   • ≤900px — каркас: сайдбар превращается в выезжающую панель (кнопка ☰ в
     топбаре, body.sb-open), верхние вкладки крутятся по горизонтали,
     переключатель языка уезжает в низ панели;
   • ≤700px — формы и таблицы: поля ≥16px (иначе iOS зумит страницу при
     фокусе), высота тапа ≥40px, .dlg-row в одну колонку, модалки — шторка
     снизу, таблицы позиций .tbl-cards — карточка на строку (подписи ячеек
     ставит main.js из <thead>, см. appMobileTables);
   • .tbl-scroll — обёртка с горизонтальной прокруткой; main.js надевает её
     на каждую .data-table, у которой нет прокручиваемого родителя.
   Печатные бланки не трогаем.
══════════════════════════════════════════ */
.tb-burger { display: none; }
.sb-backdrop { display: none; }
.sb-lang { display: none; }
.sb-close { display: none; }
.sb-mobile-only { display: none; }
.sb-sections { display: none; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl-scroll > .data-table { min-width: max-content; }

@media (max-width: 900px) {
  .navbar { padding: 0 8px; gap: 0; }
  .navbar-logo { padding-right: 8px; margin-right: 4px; }
  .navbar-logo img { height: 22px; max-width: 96px; object-fit: contain; }
  .nav-tab { padding: 0 12px; font-size: 13px; }

  .app-shell { display: block; min-height: 0; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100dvh; width: min(300px, 84vw); min-width: 0;
    z-index: 300;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.sb-open .sidebar { transform: none; }
  .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: 290;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  .sb-user { padding: 14px 14px; }
  .sb-close {
    display: flex; margin-left: auto; width: 36px; height: 36px; flex-shrink: 0;
    align-items: center; justify-content: center; border-radius: var(--radius-md);
    background: rgba(255,255,255,.08); color: #fff; border: none; font-size: 20px;
    cursor: pointer; font-family: inherit; line-height: 1;
  }
  .sb-item { padding: 11px 14px 11px 16px; font-size: 14px; }
  .sb-section.lg ~ .sb-item { font-size: 13.5px; }
  .sb-section { padding-top: 14px; }
  .sb-bottom-item { padding: 9px 2px; font-size: 13px; }
  .sb-lang { display: flex; gap: 6px; margin-bottom: 8px; }
  .sb-mobile-only { display: flex; }
  .sb-sections {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 6px;
    border-bottom: 0.5px solid rgba(255,255,255,.06); margin-bottom: 4px;
  }
  .sb-sec {
    font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 16px;
    color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); text-decoration: none;
  }
  .sb-sec.active { background: var(--red); color: #fff; }
  .sb-lang .lang-btn {
    flex: 1; text-align: center; padding: 8px 0; font-size: 12px;
    border-radius: var(--radius-md); background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
  }
  .sb-lang .lang-btn.active { background: var(--red); color: #fff; }

  .tb-burger { display: flex; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-title {
    font-size: 13px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar .lang-switcher { display: none; }
  .tb-btn { width: 36px; height: 36px; }
  #notif-dropdown {
    left: 8px !important; right: 8px !important; width: auto !important;
    top: var(--topbar-h) !important; max-height: 70vh; overflow-y: auto;
  }
  .flash-container { padding: 10px 12px 0; }
  .content { padding: 12px; }
}

@media (max-width: 700px) {
  .content { padding: 10px; }
  .card { border-radius: var(--radius-md); }
  .card-body { padding: 12px; }
  .card-header { padding: 10px 12px; flex-wrap: wrap; gap: 6px 10px; }
  .card-header-left { flex-wrap: wrap; }
  .data-table th { padding: 8px 10px; }
  .data-table td { padding: 9px 10px; }
  .kpi-value { font-size: 24px; }

  /* тап-цели */
  .btn { padding: 10px 14px; font-size: 13px; min-height: 40px; }
  .btn-sm { padding: 8px 11px; font-size: 12px; min-height: 36px; }
  .dlg-textbtn, .card-action { padding: 6px 0; }
  .pagination a, .pagination span { min-width: 36px; min-height: 36px; }

  /* поля ввода: 16px — иначе Safari на iPhone увеличивает страницу при фокусе */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea { font-size: 16px !important; }
  .form-input, .form-select, .form-textarea,
  .dlg-input, .dlg-select, .dlg-textarea { padding: 10px 12px; min-height: 44px; }
  .dlg-picker { min-height: 44px; padding: 10px 12px; }
  .dlg-picker-ph, .dlg-static, .dlg-label, .form-label { font-size: 13px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }

  /* формы в стиле типовой СЭД */
  .dlg-row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
  .dlg-label { padding-top: 0; font-weight: 600; color: var(--text-2); }
  .dlg-static { padding-top: 0; }
  .dlg-h { margin: 22px 0 12px; font-size: 13.5px; }
  .dlg-title { font-size: 15px; }
  .dlg-chip { max-width: 100%; }
  .dlg-steps {
    overflow-x: auto; scrollbar-width: none;
    margin-left: -10px; margin-right: -10px; padding: 0 10px;
  }
  .dlg-steps::-webkit-scrollbar { display: none; }
  .dlg-step { flex-shrink: 0; white-space: nowrap; padding: 8px 18px 8px 26px; }
  .dlg-stage, .stage-row { grid-template-columns: 16px 18px 1fr 22px; gap: 8px 10px; }
  .dlg-stage > select, .stage-row > select { grid-column: 3; }
  .dlg-stage > button, .stage-row > button { grid-column: 4; grid-row: 1; }
  .dlg-stage > div, .stage-row > div { grid-column: 1 / -1; }

  /* инлайновые сетки и флекс-ряды шаблонов (их сотни, править каждый
     бессмысленно): сетка — в одну колонку, ряд — с переносом. Исключение —
     класс .mob-keep, если раскладку надо сохранить */
  .content [style*="grid-template-columns"]:not(.mob-keep) { grid-template-columns: 1fr !important; }
  .content [style*="display:flex"]:not(.mob-keep):not(.dlg-picker):not(.picker) { flex-wrap: wrap; }
  .content [style*="max-width"] { max-width: 100% !important; }
  .content [style*="min-width"]:not(table):not(.tbl-scroll):not(.tbl-scroll *) { min-width: 0 !important; }

  .grd-nav, .grd-head { flex-wrap: wrap; }

  /* панель действий формы (Сохранить / Отмена / подпись справа) */
  .act-bar { flex-wrap: wrap; gap: 8px; }
  .act-bar-sticky { margin: -10px -10px 14px !important; padding: 10px !important; }
  .act-bar .btn { flex: 1 1 auto; justify-content: center; }
  .act-bar > div[style*="margin-left:auto"] { width: 100%; text-align: left !important; }

  /* этап маршрута (собирается в JS: номер · тип · люди · выбрать · ×) */
  .route-stage { flex-wrap: wrap; }
  .route-stage select { flex: 1 1 100% !important; }
  .route-stage .btn { flex: 1; justify-content: center; }
  .route-stage > div[id^="stage-people"] { flex: 1 1 100%; order: 5; }

  /* реестр документов: левая панель над списком, статусы — чипами */
  .doc-layout { flex-direction: column; gap: 12px; align-items: stretch !important; }
  .doc-layout > * { width: 100%; max-width: 100%; }
  .doc-layout-view .doclist-panel { display: none; } /* карточка документа: реестр — кнопкой «К реестру» */
  .doclist-panel { width: 100% !important; position: static !important; }
  .doclist-panel .dl-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px !important; }
  .doclist-panel .dl-section { width: 100%; padding: 8px 2px 2px; }
  .doclist-panel .dl-item {
    border: 1px solid var(--border); border-left-width: 1px; border-radius: 20px;
    padding: 6px 6px 6px 12px; gap: 6px; background: var(--bg-card);
  }
  .doclist-panel .dl-item.active { border-color: var(--red); }
  .doclist-panel .dl-view-row { display: contents; }
  .doclist-panel details.dl-types { width: 100%; }
  .doclist-panel details.dl-types[open] { display: flex; flex-wrap: wrap; gap: 6px; }
  .doclist-panel details.dl-types > summary { width: 100%; }
  .doclist-panel .dl-item.dl-sub { padding-left: 12px; }

  /* модалки — шторка снизу на всю ширину */
  .modal { padding: 0; align-items: flex-end; }
  .modal-content {
    max-width: 100% !important; width: 100%;
    max-height: 94dvh; border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
  .modal-body .data-table { font-size: 13px; }

  /* таблицы позиций → карточки */
  .tbl-cards, .tbl-cards thead, .tbl-cards tbody, .tbl-cards tfoot,
  .tbl-cards tr, .tbl-cards td { display: block; }
  .tbl-cards { min-width: 0 !important; width: 100%; }
  .tbl-cards thead { display: none; }
  .tbl-cards tbody tr {
    position: relative;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-card); box-shadow: var(--shadow-sm);
    padding: 34px 12px 12px; margin-bottom: 10px;
  }
  .tbl-cards tbody tr:hover td { background: transparent; }
  .tbl-cards td {
    padding: 5px 0 !important; border: none !important;
    text-align: left !important; width: auto !important;
  }
  .tbl-cards td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 3px;
  }
  .tbl-cards td:empty { display: none; }
  .tbl-cards td.tc-num {
    position: absolute; top: 8px; left: 12px; padding: 0 !important;
    font-size: 11px; font-weight: 600; color: var(--text-3);
  }
  .tbl-cards td.tc-num::before { content: none; }
  .tbl-cards td.tc-del { position: absolute; top: 4px; right: 4px; padding: 0 !important; }
  .tbl-cards td.tc-del::before { content: none; }
  .tbl-cards td.tc-del button { width: 36px; height: 36px; font-size: 18px !important; }
  .tbl-cards .dlg-drag { display: none; }
  .tbl-cards td input:not([type=hidden]):not([type=checkbox]),
  .tbl-cards td select, .tbl-cards td textarea {
    display: block; width: 100%;
    background: var(--bg-input) !important; border: 1px solid var(--border) !important;
    border-radius: 6px; padding: 9px 10px !important; text-align: left !important;
    min-height: 42px; color: var(--text-1);
  }
  .tbl-cards td textarea { min-height: 56px; resize: vertical !important; }
  .tbl-cards tfoot tr { display: flex; justify-content: space-between; padding: 8px 4px; }
  .tbl-cards tfoot td { display: block; }
  .tbl-cards tfoot td::before { content: none; }
}

/* ══════════════════════════════════════════
   ПЛАННЕР (вкладка внутри платформы, 2026-09-10)
   Планнер — отдельное приложение в рамке, ему нужна ровно оставшаяся высота
   экрана: меньше — внутри появляется вторая полоса прокрутки, больше — страница
   платформы уезжает вниз. Высоту НЕ считаем арифметикой («100vh минус шапка
   минус отступы»): шапок две (навигация + топбар), на телефоне они другие, плюс
   плашка «Войти как» — любая формула врёт. Вместо этого на странице планнера
   делаем колонку во всю высоту окна, и рамка забирает остаток (flex: 1).
══════════════════════════════════════════ */
body:has(.planner-frame) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body:has(.planner-frame) .app-shell { flex: 1; min-height: 0; }
body:has(.planner-frame) .main-area { min-height: 0; }
body:has(.planner-frame) .content { display: flex; flex-direction: column; min-height: 0; }
.planner-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; flex: none;
}
.planner-hint { font-size: 12px; color: var(--text-3); }
.planner-frame {
  flex: 1; min-height: 280px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius, 8px);
  background: var(--bg-main);
}
@media (max-width: 900px) {
  /* на узком экране .app-shell становится обычным блоком (сайдбар — шторка),
     поэтому колонку на всю высоту собираем из него самого */
  body:has(.planner-frame) .app-shell { display: flex; flex-direction: column; }
  body:has(.planner-frame) .main-area { flex: 1; }
}
@media (max-width: 768px) {
  .planner-bar { margin-bottom: 8px; }
  .planner-hint { display: none; }   /* на телефоне место дороже подсказки */
}
/* ══════════════════════════════════════════
   ОКНО «НАПИШИТЕ ИМЯ ПО-РУССКИ» (_name_ru_modal.html)
   по центру и на телефоне тоже — общий .modal там уезжает вниз
══════════════════════════════════════════ */
.name-ru-lock, .name-ru-lock body { overflow: hidden; }
.modal.name-ru-modal { z-index: 3000; align-items: center; padding: 16px; background: rgba(0,0,0,0.55); }
.name-ru-modal .modal-content { max-width: 460px; border-radius: var(--radius-lg); }
.name-ru-body { padding: 28px 28px 22px; text-align: center; }
.name-ru-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--surface-2); color: var(--text-1); }
.name-ru-title { font-size: 19px; font-weight: 700; color: var(--text-1); margin: 0 0 12px; }
.name-ru-text { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0 0 10px; }
.name-ru-current { display: block; margin-top: 4px; color: var(--text-1); font-size: 15px; }
.name-ru-example { font-size: 13px; color: var(--text-3); margin: 4px 0 18px; }
.name-ru-example span { text-decoration: line-through; }
.name-ru-example span, .name-ru-example b { white-space: nowrap; }
.name-ru-example b { color: var(--text-1); }
.name-ru-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px 16px; font-size: 14px; text-decoration: none; }
.name-ru-hint { font-size: 12px; color: var(--text-3); margin: 12px 0 0; }
@media (max-width: 768px) {
  .modal.name-ru-modal { padding: 16px; align-items: center; }
  .name-ru-modal .modal-content { border-radius: var(--radius-lg); max-height: 90vh; overflow-y: auto; }
  .name-ru-body { padding: 22px 18px 18px; }
}
.st-name-ru { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: #FFF4E5; border: 1px solid #F5C27A; color: #7A4B00; }
.st-name-ru .ti { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
[data-theme="dark"] .st-name-ru { background: rgba(245,194,122,.12); border-color: rgba(245,194,122,.4); color: #F5C27A; }

/* Перетаскивание файлов во вложения (main.js, 2026-10-08): пока файл
   тащат над страницей, зоны приёма обведены; под курсором — подсвечена */
.app-drop-zone{outline:2px dashed var(--border);outline-offset:4px;border-radius:8px;transition:outline-color .12s,background-color .12s}
.app-drop-zone.app-drop-over{outline-color:var(--form-accent, var(--red));background-color:color-mix(in srgb, var(--form-accent, var(--red)) 6%, transparent)}
.app-drop-zone{position:relative}
.app-drop-zone.app-drop-over::after{content:attr(data-drop-label);position:absolute;right:10px;bottom:8px;font-size:11px;font-weight:600;color:var(--form-accent, var(--red));pointer-events:none}
.app-drop-note{margin-top:6px;font-size:11px;color:var(--red)}
.app-drop-hint{margin-left:10px;font-size:11px;color:var(--text-3);white-space:nowrap}
@media (hover:none){.app-drop-hint{display:none}}
/* Таблица позиций в формах документов: видимые границы ячеек (просьба
   2026-10-12 — «всё как одна большая ячейка»). Только на десктопе: на
   телефоне .tbl-cards раскладывает строку карточкой, там границ нет. */
@media (min-width: 701px) {
  #items-table, #parts-table { border: 1px solid var(--border); }
  #items-table th + th, #items-table td + td,
  #parts-table th + th, #parts-table td + td { border-left: 1px solid var(--border); }
  #items-table tbody tr:last-child td,
  #parts-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
  #items-table td :is(input, textarea, select):focus,
  #parts-table td :is(input, textarea, select):focus {
    box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 3px;
  }
}
/* заслонка автоотправки черновика с карточки (main.js, ?send=1) */
.app-send-veil { position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center; background:rgba(15,17,21,.35); }
.app-send-veil-box { background:var(--bg-card,#fff); color:var(--text-1);
  padding:14px 20px; border-radius:10px; font-size:14px; font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.2); display:flex; gap:8px; align-items:center; }
/* «Не сохранено — на этом компьютере» в черновиках реестра (main.js renderLocalDrafts) */
.local-drafts { margin-bottom:14px; border-left:4px solid var(--warn, #d97706); }
.local-drafts .card-header { flex-wrap:wrap; gap:6px; }
.local-draft-row { display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--border); }
.local-draft-row:last-child { border-bottom:none; }
.local-draft-main { flex:1; min-width:0; display:flex; gap:10px; align-items:baseline;
  text-decoration:none; color:var(--text-1); }
.local-draft-kind { font-size:11px; font-weight:600; color:var(--text-3); white-space:nowrap; }
.local-draft-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.local-draft-when { font-size:11px; color:var(--text-3); white-space:nowrap; }
@media (max-width: 700px) {
  .local-draft-row { flex-wrap:wrap; }
  .local-draft-main { flex-basis:100%; flex-direction:column; gap:2px; }
}
.local-drafts[hidden] { display:none; }

/* ── План работ (WPL): ГРП и ПЗР/освоение, Б1 плана связки ─────────────────
   Дерево как в MS Project у владельца: раздел → месяц (details) → скважина
   → стадии. Цвет строки: выполнено — зелёный, идёт — жёлтый, перенос —
   красный, силами подрядчика — серый, отменено — зачёркнуто. Токены
   семантические — ночной режим работает сам. */
.wpl-legend{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px;font-size:11.5px}
.wpl-sw{padding:1px 9px;border-radius:999px;border:1px solid var(--border)}
.wpl-sec{margin-bottom:16px}
.wpl-month{border-top:1px solid var(--border)}
.wpl-month>summary{display:flex;align-items:baseline;gap:10px;padding:8px 14px;
  cursor:pointer;list-style-position:inside}
.wpl-month[open]>summary{background:var(--bg-main)}
.wpl-sum-pct{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.wpl-sum-dates{min-width:150px;text-align:right;color:var(--text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wpl-table{min-width:1180px}
.wpl-code{font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  white-space:nowrap}
.wpl-title{font-weight:600}
.wpl-stage .wpl-title{font-weight:400;padding-left:28px}
.wpl-parent td{background:color-mix(in srgb,var(--info) 10%,transparent)}
.wpl-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.wpl-tag{margin-left:6px;font-size:11px;font-weight:600;color:var(--danger)}
.wpl-sub{margin-left:6px;font-size:11px;font-weight:400;color:var(--text-3)}
.grd-view tr.wpl-done td,.wpl-sw.wpl-done{background:var(--ok-soft)}
.grd-view tr.wpl-active td,.wpl-sw.wpl-active{background:var(--warn-soft)}
.grd-view tr.wpl-moved td,.wpl-sw.wpl-moved{background:var(--danger-soft)}
.grd-view tr.wpl-contr td,.wpl-sw.wpl-contr{background:var(--neutral-soft,var(--bg-main));
  color:var(--text-2)}
.grd-view tr.wpl-cancelled td,.wpl-sw.wpl-cancelled{color:var(--text-3);
  text-decoration:line-through}
.wpl-act{white-space:nowrap;width:1%}
.wpl-act form{display:inline}
.wpl-act .btn{padding:2px 6px}
.wpl-add{padding:6px 14px 10px;display:flex;gap:8px;flex-wrap:wrap}
.wpl-add form{display:inline}
.wpl-wo{white-space:nowrap}
.wpl-ready{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.wpl-fact{min-width:220px;max-width:360px}
.wpl-fact .wpl-sub{margin-left:0}
.wpl-fact-text{font-size:12px;color:var(--text-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wpl-wo-done{color:var(--ok)}
.wpl-wo-work{color:var(--warn)}
.wpl-form{max-width:860px}
.wpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 18px}
.wpl-full{grid-column:1/-1}
.wpl-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wpl-extra dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;
  font-size:12px;color:var(--text-2);margin:6px 0 0}
.wpl-extra dd{margin:0}

/* ── Форма карточки номенклатуры v2 (2026-10-13) ─────────────────────── */
.nom-sec { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.nom-sec:first-of-type { border-top: 0; padding-top: 0; }
.nom-sec-title { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.nom-grid { display: grid; gap: 12px; }
.nom-grid--what { grid-template-columns: 1.2fr 2fr 0.6fr; }
.nom-grid--cat { grid-template-columns: 1.2fr 2.6fr; margin-top: 10px; align-items: end; }
.nom-grid--attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nom-grid--extra-purpose { grid-template-columns: 1.4fr 1fr; margin-top: 12px; align-items: start; }
.nom-grid--more { grid-template-columns: 2fr 0.8fr 1fr; }
.nom-grid--supplier { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.nom-spec { display: block; margin-top: 10px; max-width: 420px; }
.nom-refresh { margin-left: 8px; }
.nom-purpose td { padding: 4px 6px; }
.nom-purpose .form-input { width: 100%; }
.nom-areas { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.nom-areas legend { font-size: 12px; padding: 0 6px; }
.nom-check { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.nom-ready { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  border-left: 3px solid var(--warn); background: var(--warn-soft); }
.nom-ready--ok { border-left-color: var(--ok); background: var(--ok-soft); }
.nom-ready-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.nom-ready-count { font-variant-numeric: tabular-nums; color: var(--text-2); }
.nom-ready-bar { height: 4px; border-radius: 2px; background: var(--border); margin: 6px 0; overflow: hidden; }
.nom-ready-bar span { display: block; height: 100%; background: var(--warn); }
.nom-ready--ok .nom-ready-bar span { background: var(--ok); }
.nom-similar { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
  margin-top: 14px; font-size: 13px; }
.nom-similar ul { margin: 6px 0; padding-left: 18px; }
.nom-actions { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* окно проверки новой позиции требования (2026-10-20): «не знаю» — мелкой
   строкой под назначением, чтобы не звала нажать себя вместо заполнения */
.nom-unknown { display: inline-flex; gap: 5px; align-items: center; margin-top: 10px;
  font-size: 11.5px; color: var(--text-3); cursor: pointer; }
.nom-unknown input { width: 12px; height: 12px; margin: 0; }
.req-card-more { margin-top: 14px; font-size: 13px; }
.req-card-more summary { cursor: pointer; color: var(--text-2); }
.req-card-similar { list-style: none; padding: 0; }
.req-card-similar li { display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--border); }
.req-card-row-ok { color: var(--ok); font-size: 10.5px; }
.req-card-row-need { color: var(--warn); font-size: 10.5px; }
@media (max-width: 720px) {
  .nom-grid--what, .nom-grid--cat, .nom-grid--attrs, .nom-grid--extra-purpose,
  .nom-grid--more, .nom-grid--supplier { grid-template-columns: 1fr; }
}

/* ── Карточка номенклатуры v2: разделы и сворачиваемые операции ──────── */
.nom-view-sec { margin-top: 22px; }
.nom-dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 16px;
  margin: 0; font-size: 13px; }
.nom-dl dt { color: var(--text-3); }
.nom-dl dd { margin: 0; }
.nom-empty { color: var(--danger); }
.nom-desc { margin: 10px 0 0; font-size: 13px; color: var(--text-2); white-space: pre-line; }
.nom-purpose-list, .nom-doc-list { margin: 0; padding-left: 18px; font-size: 13px; }
.nom-purpose-list li, .nom-doc-list li { padding: 2px 0; }
.nom-subh { font-size: 12px; font-weight: 600; margin: 16px 0 6px; }
.nom-fold { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 14px; }
.nom-fold > summary { cursor: pointer; font-size: 13px; font-weight: 600; list-style: revert; }
.nom-fold[open] > summary { margin-bottom: 8px; }
.nom-fold--flat { border: 0; padding: 0; margin-top: 10px; }
.nom-fold--flat > summary { font-weight: 500; color: var(--form-accent); }
@media (max-width: 720px) {
  .nom-dl { grid-template-columns: 1fr; gap: 2px; }
  .nom-dl dd { margin-bottom: 6px; }
}

/* блок «Карточка» на приёмке (вариант А) */
.nom-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 12px; background: var(--surface, transparent); }
.nom-block[hidden] { display: none; }
.nom-block-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 13px; }
.nom-block-attrs { margin-top: 10px; }
.nom-block-attrs[hidden] { display: none; }
.nom-block-extra { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }

/* справочник типов деталей (номенклатура v2, шаг 5) */
.nom-group-row td { background: var(--surface-2); }
.nom-type-cell { padding-left: 28px !important; }
.nom-add-type { margin-left: 8px; padding: 1px 8px; }
.nom-area-row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; max-width: 520px; }
.nom-area-row .form-input { flex: 1; }
.nom-areas-form .btn { margin-top: 6px; }
.nom-attrs-edit td { padding: 4px 6px; vertical-align: middle; }
.nom-attrs-edit .form-input { width: 100%; min-width: 0; }
.nom-attrs-edit textarea.form-input { min-height: 34px; resize: vertical; }

/* Work Order: карточка — папка слева, рапорты справа; на узком экране друг под другом */
.wo-split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;align-items:start}
@media (max-width: 900px){.wo-split{grid-template-columns:1fr}}
.wo-tree{list-style:none;margin:10px 0 0;padding:0;line-height:1.9}
.wo-tree ul{list-style:none;margin:0;padding-left:20px}
.wo-tree a,.wo-link,.wo-tree-top{color:var(--color-text-primary);text-decoration:none}
.wo-tree a:hover,.wo-link:hover,.wo-tree-top:hover{color:var(--info);text-decoration:underline}
.wo-tree-top{display:flex;gap:6px;align-items:center;font-weight:600;word-break:break-word}
/* WO: хронология и файлы папки (2026-10-20, раскладка журнала скважины) */
.wo-chrono .wrj-item.inc{border-left-color:var(--danger)}
.wo-inc-t{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:4px;
  font-size:12px;font-weight:600;background:var(--danger-soft);color:var(--danger)}
.wo-day-files{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px}
.wo-day-files a{display:inline-flex;gap:4px;align-items:center;max-width:100%;word-break:break-word}
.wo-win{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px;margin-bottom:12px}
.wo-win form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wo-files details{border-top:1px solid var(--border);padding:6px 0}
.wo-files details:first-child{border-top:none}
.wo-files summary{cursor:pointer;font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center}
.wo-files ul{list-style:none;margin:6px 0 0;padding-left:22px;font-size:12px;line-height:1.8}
.wo-files li{display:flex;gap:8px;justify-content:space-between}
.wo-files li span{flex:none;color:var(--text-3);font-variant-numeric:tabular-nums}

/* Страница «Черновики» (2026-10-20) */
.drafts-note { font-size:12px; color:var(--text-3); margin:0 0 14px; }
.drafts-card { margin-bottom:14px; }
.drafts-card .data-table td.drafts-actions { white-space:nowrap; text-align:right; }
.drafts-card .data-table td.drafts-actions form { display:inline; }
.drafts-sum { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drafts-files { font-size:11px; color:var(--warn, #d97706); white-space:nowrap; }
.drafts-empty { padding:18px 20px; font-size:13px; color:var(--text-3); }
@media (max-width: 760px) {
  .drafts-sum { max-width:none; white-space:normal; }
}

/* Длинный текст на телефоне (2026-10-28): редактор поля на весь экран, экран
   чтения и «Читать полностью» у .app-longtext. Логика — main.js
   (appOpenTextEditor / appOpenReader / appAutoGrow). Слой выше модалок (3000),
   ниже заставки отправки .app-send-veil (9999). */
.app-te { display: none; }
.app-te.open {
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; top: 0; height: 100dvh;
  z-index: 5000; background: var(--bg-card); color: var(--text-1);
}
html.app-te-lock, html.app-te-lock body { overflow: hidden; }
.app-te-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  border-bottom: 1px solid var(--border);
}
.app-te-title {
  flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-te-btn {
  min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-2); font: inherit; font-size: 15px;
  cursor: pointer;
}
.app-te-done { background: var(--form-accent); color: #fff; font-weight: 600; }
.app-te .app-te-area {
  flex: 1; width: 100%; min-height: 0; box-sizing: border-box; margin: 0;
  padding: 16px 18px; border: 0; outline: none; resize: none;
  background: transparent; color: inherit;
  font: inherit; font-size: 17px !important; line-height: 1.55;
}
.app-te-read {
  display: none; flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px 28px; font-size: 17px; line-height: 1.6;
  white-space: pre-line; overflow-wrap: anywhere;
}
.app-te-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-shrink: 0; padding: 4px 14px max(4px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3);
}
.app-te-copy { display: none; }
.app-te.reading .app-te-area,
.app-te.reading .app-te-cancel,
.app-te.reading .app-te-count { display: none; }
.app-te.reading .app-te-read { display: block; }
.app-te.reading .app-te-copy { display: inline-flex; align-items: center; color: var(--form-accent); font-weight: 600; }
.app-lt-more { display: none; }
@media (max-width: 700px) {
  .app-longtext { font-size: 15px !important; line-height: 1.55 !important; }
  .app-longtext.lt-clamp {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden; cursor: pointer;
  }
  .app-lt-more {
    display: inline-block; margin-top: 4px; padding: 6px 0; border: 0;
    background: none; color: var(--form-accent); font: inherit; font-size: 14px;
    font-weight: 600; cursor: pointer;
  }
  .app-lt-more[hidden] { display: none; }
}

/* Формы под телефон (2026-10-28): select[data-seg] → кнопки .app-seg,
   [data-mob-more] → «Дополнительно», .mob-dock — панель действий внизу экрана.
   Логика — main.js (appSegmented / appMobMore). На компьютере всё как было. */
.app-seg, .mob-more-btn { display: none; }
/* Дефектный акт: рамка у ВЫБРАННОЙ срочности. Раньше «Критический» был
   подсвечен статично и оставался красным при выборе другого варианта. */
.urg-opt:has(input:checked) { border-width: 1.5px !important; border-style: solid !important; }
.urg-opt.urg-planned:has(input:checked) { border-color: var(--ok) !important; background: var(--ok-soft) !important; }
.urg-opt.urg-urgent:has(input:checked) { border-color: #f0994a !important; background: #fdf1e3 !important; }
.urg-opt.urg-critical:has(input:checked) { border-color: var(--red) !important; background: #fcebeb !important; }
@media (max-width: 700px) {
  select[data-seg-ready] { display: none !important; }
  .app-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
  .app-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-seg-list { grid-template-columns: 1fr; }
  .app-seg button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 48px; padding: 6px 8px; border: 1px solid var(--border-mid); border-radius: 10px;
    background: var(--bg-card); color: var(--text-1); font: inherit; font-size: 14px; font-weight: 600;
    line-height: 1.2; text-align: center; cursor: pointer;
  }
  .app-seg-list button { align-items: flex-start; text-align: left; padding: 10px 14px; }
  .app-seg button.on { border: 1.5px solid var(--form-accent); background: var(--info-soft); color: var(--form-accent); }
  .app-seg-hint { font-size: 12px; font-weight: 500; opacity: .8; }

  .mob-more-wrap { display: flex; flex-direction: column; }
  .mob-more-wrap > .mob-more-btn { order: 1; }
  .mob-more-wrap > [data-mob-more] { order: 2; }
  .mob-more-wrap:not(.mob-more-open) > [data-mob-more] { display: none; }
  .mob-more-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative;
    width: 100%; margin: 4px 0 14px; padding: 12px 40px 12px 14px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--bg-card); color: var(--text-1); font: inherit;
    text-align: left; cursor: pointer;
  }
  .mob-more-btn::after {
    content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: translateY(-70%) rotate(45deg);
  }
  .mob-more-open > .mob-more-btn::after { transform: translateY(-30%) rotate(-135deg); }
  .mob-more-t { font-size: 15px; font-weight: 600; }
  .mob-more-s { font-size: 12.5px; color: var(--text-3); }

  .mob-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    margin: 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    flex-wrap: nowrap !important; background: var(--bg-card) !important;
    border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  }
  .mob-dock > div[style*="margin-left:auto"] { display: none !important; }
  .mob-dock .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; white-space: normal; line-height: 1.15; justify-content: center; }
  .mob-dock .btn-primary { flex: 2 1 0; }
  body.has-mob-dock .content { padding-bottom: 96px; }
  body.kb-open .mob-dock { display: none !important; }

  .urg-opts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .urg-opt { position: relative; justify-content: center; text-align: center; min-height: 56px; }
  .urg-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
  .urg-opt > div > div:first-child { font-size: 14px !important; font-weight: 600 !important; }
  .urg-opt > div > div:last-child { font-size: 11px !important; }
}

/* Меню «Ещё» на телефоне (2026-10-28): элементы с data-mob-menu переносятся в
   шторку .mob-sheet, в ряду шапки — кнопка «⋯ Ещё» (main.js, appMobMenu).
   Шторка выше нижней панели .mob-dock (200) и модалок документа (1000). */
.mob-menu-btn[hidden] { display: none !important; }
.mob-sheet { display: none; }
.mob-sheet.open {
  display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45);
}
.mob-sheet-panel {
  width: 100%; max-height: 85dvh; overflow-y: auto; box-sizing: border-box;
  background: var(--bg-card); border-radius: 18px 18px 0 0;
  padding: 6px 0 calc(12px + env(safe-area-inset-bottom));
}
.mob-sheet-head { display: flex; align-items: center; padding: 8px 8px 8px 20px; }
.mob-sheet-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--text-1); }
.mob-sheet-x {
  width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--bg-main);
  color: var(--text-1); font-size: 22px; line-height: 1; cursor: pointer;
}
.mob-sheet-list > *,
.mob-sheet-list form > .btn { display: flex; width: 100%; box-sizing: border-box; margin: 0; }
.mob-sheet-list .btn {
  justify-content: flex-start; gap: 12px; min-height: 54px; padding: 0 20px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text-1); font-size: 15px; font-weight: 500;
  white-space: normal; text-align: left;
}
.mob-sheet-list .btn i { font-size: 19px; color: var(--text-3); }
@media (max-width: 700px) {
  .doc-decision-bar.mob-dock .btn-success { flex: 2 1 0; }
}
/* WO: карточка — дашборд, ввод — рабочие места отделов (2026-11-01) */
.wo-dash-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.wo-ribbon{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.wo-ribbon-step{border-top:4px solid var(--border-mid);padding-top:8px;display:flex;flex-direction:column;gap:3px}
.wo-ribbon-step.wo-st-done{border-top-color:var(--ok)}
.wo-ribbon-step.wo-st-work{border-top-color:var(--warn)}
.wo-dash-line{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.wo-todo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--border)}
.wo-todo-row:first-child{border-top:0}
.wo-todo-go{margin-left:auto;font-size:12px;color:var(--info);text-decoration:none;white-space:nowrap}
/* разделы карточки WO — плитки-обзор (вариант Б владельца, 2026-11-03):
   свёрнутый <details> — плитка с главной цифрой, открытый — на всю ширину
   сетки; dense заполняет дыру, оставленную раскрытой плиткой. Без JS. */
.wo-folds{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-flow:row dense;gap:8px;padding:0;background:transparent;box-shadow:none;border:0}
.wo-fold{border:1px solid var(--border);border-radius:10px;background:var(--bg-card);min-width:0}
.wo-fold>summary{cursor:pointer;padding:10px 30px 10px 12px;display:flex;flex-direction:column;gap:3px;list-style:none;position:relative}
.wo-fold>summary::-webkit-details-marker{display:none}
.wo-fold>summary::after{content:'ƒA';margin-left:auto;color:var(--border-mid);font-size:18px;transition:transform .15s}
.wo-fold[open]>summary::after{transform:rotate(90deg)}
.wo-fold>summary::after{position:absolute;right:10px;top:8px;margin:0}
.wo-fold>summary:hover{background:var(--info-soft);border-radius:9px}
.wo-tile-title{font-size:12px;color:var(--text-muted)}
.wo-tile-value{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.wo-fold-bad{border-color:var(--danger);background:var(--danger-soft)}
.wo-fold-bad .wo-tile-value{color:var(--danger)}
.wo-fold[open]{grid-column:1/-1}
.wo-fold[open]>summary{flex-direction:row;align-items:baseline;gap:10px;border-bottom:1px solid var(--border);border-radius:9px 9px 0 0}
.wo-fold-body{padding:12px 14px 14px}
.wo-fold-body>.card{box-shadow:none;border:0;margin:0!important}
/* вкладки карточки WO (2026-11-04): на телефоне — прокрутка вбок */
.wo-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.wo-tabs .dvt-tab{white-space:nowrap}
.wo-tab-bad{font-size:11px;line-height:16px;min-width:16px;padding:0 5px;border-radius:8px;background:var(--danger-soft);color:var(--danger);text-align:center}
/* полоса часов по «чья вина» в КПИ «Часы скважины» */
.wo-hbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--bg-main);margin:8px 0 4px}
.wo-hbar i{display:block;height:100%}
.wo-hb-work{background:var(--green)}.wo-hb-we{background:var(--red)}.wo-hb-krs{background:#e0a030}
.wo-hb-client{background:#4a7fd0}.wo-hb-ext{background:#9a958c}.wo-hb-redo{background:#8a5cc8}.wo-hb-none{background:var(--border)}
.wo-step{margin-bottom:14px}
.wo-step-mark{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--neutral-soft);font-size:14px}
.wo-step-mark.ok{background:var(--ok-soft);color:var(--ok)}
.wo-step-mark.bad{background:var(--danger-soft);color:var(--danger)}
.wo-ws-form{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.wo-ws-form>form{margin:0}
.wo-ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px}
.wo-queue-row{gap:10px 14px}
.wo-queue-due{min-width:130px}
.wo-queue-wo{min-width:170px;color:inherit;text-decoration:none;display:flex;flex-direction:column}
.wo-due{white-space:nowrap}
.wo-board td{vertical-align:top}
.wo-board-bar{display:flex;gap:2px;margin:4px 0}
.wo-board-bar span{flex:1;height:6px;border-radius:2px;background:var(--border-mid)}
.wo-board-bar .wo-st-done{background:var(--ok)}
.wo-board-bar .wo-st-work{background:var(--warn)}
.wo-board-item{padding:2px 0}
.wo-stage-line{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.wo-ws-more{margin-top:12px;padding-top:8px;border-top:1px dashed var(--border)}
.wo-ws-more>summary{cursor:pointer;color:var(--info)}

/* Быстрый переход по Ctrl+K (навигация [2/3], 2026-11-01): кнопка в топбаре
   и палитра. Логика — main.js (appOpenNavSearch). Слой 4000: выше модалок
   (3000), ниже редактора текста .app-te (5000). На телефоне кнопка — иконка,
   палитра — на весь экран. */
.tb-search {
  display: flex; align-items: center; gap: 8px;
  height: 32px; min-width: 220px; padding: 0 8px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-3);
  font: inherit; font-size: 13px; cursor: pointer;
}
.tb-search:hover { border-color: var(--border-mid); color: var(--text-2); }
.tb-search i { font-size: 15px; }
.tb-search kbd {
  margin-left: auto; padding: 1px 5px; font-family: inherit; font-size: 11px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card);
}
.app-cmd { display: none; }
.app-cmd.open {
  display: flex; align-items: flex-start; justify-content: center;
  position: fixed; inset: 0; z-index: 4000;
  padding-top: 12vh; background: rgba(0,0,0,.35);
}
html.app-cmd-lock, html.app-cmd-lock body { overflow: hidden; }
.app-cmd-box {
  display: flex; flex-direction: column;
  width: min(580px, calc(100vw - 24px)); max-height: 70vh;
  background: var(--bg-card); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.18); overflow: hidden;
}
.app-cmd-in {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border);
}
.app-cmd-in > i { font-size: 18px; color: var(--text-3); }
.app-cmd-in input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--text-1); font: inherit; font-size: 15px;
}
.app-cmd-x {
  width: 30px; height: 30px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.app-cmd-x:hover { background: var(--bg-input); color: var(--text-1); }
.app-cmd-list { overflow-y: auto; padding: 6px; }
.app-cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-md);
  color: var(--text-1); text-decoration: none; font-size: 13px;
}
.app-cmd-item i { font-size: 16px; color: var(--text-3); flex-shrink: 0; }
.app-cmd-item .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-cmd-item .p {
  margin-left: auto; padding-left: 12px; flex-shrink: 0; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--text-3);
}
.app-cmd-item.sel { background: var(--accent-soft); color: var(--accent); }
.app-cmd-item.sel i { color: var(--accent); }
.app-cmd-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-3); }
@media (max-width: 900px) {
  .tb-search { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .tb-search span, .tb-search kbd { display: none; }
}
@media (max-width: 700px) {
  .app-cmd.open { padding-top: 0; }
  .app-cmd-box {
    width: 100vw; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .app-cmd-in { padding-top: max(10px, env(safe-area-inset-top)); }
  .app-cmd-in input { font-size: 16px; }
  .app-cmd-item { padding: 11px 10px; font-size: 15px; }
}

/* Колонка групп и «Избранное» (навигация [3/3], 2026-11-01). На компьютере
   (>900px) колонка .rail заменяет верхнюю полосу вкладок .navbar:
   --navbar-h = 0, сайдбар и топбар прилипают к самому верху. Телефон — как
   раньше: полоса вкладок и шторка с чипами, колонка скрыта. Звёздочка
   .sb-fav — у пункта сайдбара (видна при наведении или если пункт уже в
   избранном), строка .fav-bar — под топбаром. Логика — main.js
   (appToggleFav). Залитых иконок (*-filled) в Tabler webfont 3.0.0 нет —
   «в избранном» показываем золотым цветом и подложкой контурной звезды. */
.rail { display: none; }
@media (min-width: 901px) {
  :root { --navbar-h: 0px; }
  .navbar { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: 2px;
    width: 76px; min-width: 76px; padding: 10px 0;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto; scrollbar-width: none;
    background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), var(--bg-sidebar);
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .rail::-webkit-scrollbar { display: none; }
}
.rail-logo {
  display: flex; justify-content: center; align-items: center;
  padding: 2px 8px 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rail-logo img {
  display: block; max-width: 54px; max-height: 26px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .92;
}
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 6px; padding: 9px 2px; border-radius: var(--radius-md);
  color: rgba(255,255,255,.62); text-decoration: none; text-align: center;
  font-size: 10.5px; font-weight: 500; line-height: 1.15;
  transition: background .12s, color .12s;
}
.rail-item i { font-size: 21px; }
.rail-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.rail-item.active { background: var(--red); color: #fff; }
.rail-spacer { flex: 1; min-height: 12px; }

/* Выезжающее меню раздела (2026-11-02). html[data-subnav="float"] (ставит
   <head> base.html, если меню не закреплено) — сайдбар не занимает место, а
   выезжает поверх страницы справа от колонки .rail; body.sb-fly — открыт.
   .rail-item.peek — кнопка раздела, чьи пункты сейчас показаны. Логика —
   main.js («Выезжающее меню раздела»). Закреплённое меню и телефон — как
   раньше. */
.rail-item.peek { background: rgba(255,255,255,.1); color: #fff; }
.sb-pin, .sb-pane-title { display: none; }
@media (min-width: 901px) {
  .sb-pin {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 28px; height: 28px; flex-shrink: 0;
    border: none; border-radius: var(--radius-md); background: transparent;
    color: rgba(255,255,255,.75); cursor: pointer; font-size: 16px;
  }
  .sb-pin:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sb-pin .ti-pin { display: none; }
  html[data-subnav="float"] .sb-pin { color: rgba(255,255,255,.45); }
  html[data-subnav="float"] .sb-pin .ti-pin { display: block; }
  html[data-subnav="float"] .sb-pin .ti-pinned { display: none; }
  .sb-pane-title {
    display: block; padding: 10px 16px 2px;
    font-size: 15px; font-weight: 700; color: #fff;
  }
  html[data-subnav="float"] .sidebar {
    position: fixed; top: 0; left: 76px; height: 100vh; z-index: 110;
    box-shadow: 8px 0 28px rgba(0,0,0,.28);
    visibility: hidden; opacity: 0; transform: translateX(-10px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  html[data-subnav="float"] body.sb-fly .sidebar {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .16s ease, transform .16s ease;
  }
}

.sb-fav {
  margin-left: auto; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  color: rgba(255,255,255,.4); opacity: 0; transition: opacity .12s;
}
.sb-count + .sb-fav { margin-left: 4px; }
.sb-item:hover .sb-fav, .sb-fav.on { opacity: 1; }
.sb-item .sb-fav i { font-size: 14px; width: auto; color: inherit; }
.sb-fav:hover { background: rgba(255,255,255,.12); color: #fff; }
.sb-fav.on, .sb-item .sb-fav.on i { color: #F2B33D; }
.sb-fav.on { background: rgba(242,179,61,.16); }
.sb-fav.busy { opacity: .4; pointer-events: none; }
@media (hover: none) { .sb-fav { opacity: 1; } }

.fav-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 22px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.fav-bar[hidden] { display: none; }
.fav-bar-label {
  display: flex; align-items: center; gap: 4px; margin-right: 4px;
  font-size: 11px; color: var(--text-3);
}
.fav-bar-label i { font-size: 13px; color: #E0A21B; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-2); text-decoration: none; font-size: 12px;
}
.fav-chip i { font-size: 13px; color: var(--text-3); }
.fav-chip:hover { border-color: var(--border-mid); color: var(--text-1); }
.fav-chip.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.fav-chip.active i { color: var(--accent); }
@media (max-width: 900px) {
  .fav-bar { padding: 6px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}