/* =====================================================================
   Дизайн-система
   ===================================================================== */
/* палитра, скругления, поля, шрифты — в static/css/tokens.css (общая с программами раскроя, конструктора, дверей) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.45; }
h1, h2, h3 { color: var(--text); }
.num, td.num, .kpi-value, .money { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; stroke-width: 1.75; }

/* ---------- каркас: боковое меню + контент ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex: none; background: var(--surface); color: var(--text-2); border-right: 1px solid var(--line);
  box-shadow: 2px 0 8px rgba(15,30,60,.06); z-index: 1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; font-size: var(--t-title); font-weight: 700; color: var(--text);
  letter-spacing: 0; }
.brand-logo { width: 32px; height: 32px; border-radius: var(--radius); background: linear-gradient(135deg, #3b82f6, #6366f1); display: grid;
  place-items: center; box-shadow: 0 2px 6px rgba(59, 130, 246, .35); }
.brand-logo svg.i { width: 17px; height: 17px; stroke: #fff; }
.nav-group { padding: 2px 12px 4px; }
.nav-group + .nav-group { border-top: 1px solid var(--line); padding-top: 2px; }
.nav-title { padding: 6px 10px 2px; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--label); }
nav button { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; color: var(--text-2); border: 0; padding: 4px 10px;
  margin: 0; cursor: pointer; font: inherit; text-align: left; line-height: 1.25; border-radius: var(--radius); }
nav button svg.i { color: var(--muted); }
nav button:hover { background: var(--hover); color: var(--text); }
nav button:hover svg.i { color: var(--text-2); }
nav button.active { background: var(--primary-soft); color: var(--primary-hover); font-weight: 600;
  box-shadow: 0 1px 3px rgba(30, 50, 80, .12), inset 3px 0 0 var(--primary); }
nav button.active svg.i { color: var(--primary); }
nav button .label { flex: 1; }
.nav-count:not(:empty) { background: var(--danger); color: var(--surface); border-radius: var(--radius); padding: 0 7px; font-size: 12px;
  line-height: 18px; font-weight: 600; }
.sidebar-foot { margin-top: auto; padding: var(--pad-sm); color: var(--muted); border-top: 1px solid var(--line); font-size: var(--t-cap); }
.sidebar-foot kbd { background: var(--surface); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 5px;
  font-family: inherit; font-size: var(--t-cap); }
.app { flex: 1; min-width: 0; }
main { padding: 26px 8px 60px 30px; }   /* во всю ширину экрана: таблицы растут, карточка — у правого края */
.tab { display: none; }
.tab.active { display: block; animation: fade .15s ease; }
@keyframes fade { from { opacity: .4; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ---------- заголовок страницы ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0; font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
.page-head .sub { margin-top: 2px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- карточки ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--line);
  padding: var(--pad); margin-bottom: 14px; }
.card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--grid);
  font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0 0 10px; padding-bottom: 0; border-bottom: 0; }
.card-head .link { margin-left: auto; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: var(--pad-sm); margin: 0; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left;
  font: inherit; color: inherit; display: flex; flex-direction: column; border-color: var(--line); border-top: 3px solid var(--line-hover);
  padding: var(--pad-sm); gap: 2px; }
button.kpi { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
button.kpi:hover { transform: none; box-shadow: none; border-color: var(--line-hover); background: var(--surface-2); }
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--label); }
.kpi-value { letter-spacing: -.01em; color: var(--text); font-size: var(--t-title); font-weight: 700; }
.kpi-sub { color: var(--muted); font-size: var(--t-cap); }
.kpi.accent-danger .kpi-value { color: var(--danger); }
.kpi.accent-success .kpi-value { color: var(--success); }
.kpi.accent-warning .kpi-value { color: var(--warning); }
.kpi-strip { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 14px; box-shadow: var(--shadow); border-color: var(--line); padding: var(--pad-sm); gap: 24px; }
.kpi-strip > div { display: flex; flex-direction: column; }
.kpi-strip .v { font-variant-numeric: tabular-nums; font-size: var(--t-title); font-weight: 700; }
.kpi-strip .l { color: var(--label); font-size: var(--t-cap); }

/* ---------- таблицы: строгий компактный стиль (1С / Excel), светлые серо-синие тона ---------- */
table { width: 100%; border-collapse: collapse; background: var(--surface); font-family: Arial, "Segoe UI", sans-serif; }
th, td { text-align: left; padding: 4px 8px; border: 1px solid var(--grid); vertical-align: middle; line-height: 1.35; }
th { background: var(--surface-3); color: var(--text-2); font-weight: normal; white-space: nowrap; border-color: var(--line); }

/* внешняя рамка — у обёртки, у таблицы только внутренняя сетка */
tr > :first-child { border-left: 0; }
tr > :last-child { border-right: 0; }
thead tr:first-child > *, table > tbody:first-child > tr:first-child > * { border-top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
tbody tr:has(.empty-state):hover td { background: var(--surface); }
tr.clickable { cursor: pointer; }
/* строки списков, которые выбираются щелчком (курсор rowCursor / карточка справа), — с «пальцем», во всех разделах */
.split-main tbody tr[data-id], .split-main tbody tr[data-sel], #aud-list tr[data-id] { cursor: pointer; }
tr.current td, tr.selected td { background: var(--current); }
tr.group-row td { background: var(--surface-2); font-weight: bold; color: var(--text-2); }
td.right, th.right { text-align: right; }
td.num, td.right { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* числа в таблицах — по центру столбца (и заголовки числовых столбцов) */
td.num, th.right, .t1c th.right, .t1c td.num, .hbar-val, td.unit, th.unit, .t1c td.unit, .t1c th.unit { text-align: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.card.flush > .table-wrap, .card.flush > div > .table-wrap { border: 0; }
:not(.table-wrap):not(.t1c-scroll) > table:not(.t1c) { border: 1px solid var(--line); }
.card.flush:has(.table-wrap), #tx-list { border-radius: var(--radius-sm); box-shadow: none; border-color: var(--line); }
.tx-row .chip-link { border-radius: var(--radius-sm); }

/* статусы, метки и полосы оплаты в ячейках — без «таблеток»: цветной текст, прямые углы */
td .pill { background: none !important; font-weight: normal; border-radius: var(--radius-sm); padding: 0 6px; }
td .badge { border-radius: var(--radius-sm); padding: 0 5px; background: var(--surface-2); border: 1px solid var(--grid); font-size: var(--t-cap); }
td .sub { font-size: var(--t-cap); }
td .progress, td .progress > span { border-radius: 0; height: 5px; }
td .pay-cell { gap: 2px; }

/* поля и кнопки внутри ячеек — тоже компактные */
td input, td select, td textarea { padding: 2px 6px; font-size: 13px; border-radius: 0; height: 24px; }
td textarea { height: auto; }
td input[type=checkbox] { height: auto; }
td button.mini, td button.secondary { padding: 1px 8px; font-size: 12px; border-radius: var(--radius-sm); }

/* ---------- формы ---------- */
input, select, textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; width: 100%;
  background: var(--surface); color: var(--text); transition: border-color .12s, box-shadow .12s; padding: 6px 9px; font-size: 14px;
  border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
input[type=checkbox] { width: auto; accent-color: var(--primary); }
label { display: flex; flex-direction: column; gap: 4px; color: var(--label); font-weight: 600; font-size: var(--t-cap); }
label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.input-lg { font-size: 22px !important; padding: 10px 12px !important; font-variant-numeric: tabular-nums; font-weight: 700; }
.hint { color: var(--muted); margin-top: 6px; font-size: var(--t-cap); }

/* ---------- кнопки ---------- */
button { font-family: inherit; }
button.primary { color: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 14px; background: var(--primary);
  border-color: var(--primary-hover); }
button.primary:hover { background: var(--primary-hover); }
button.primary svg.i { width: 16px; height: 16px; }
button.mini, button.secondary { border-radius: var(--radius-sm); border: 1px solid var(--line-strong); cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; font-size: 13.5px; border-color: var(--line-strong); color: var(--text-2);
  background: linear-gradient(var(--surface), var(--surface-2)); }
button.mini:hover, button.secondary:hover { background: var(--surface-3); border-color: var(--line-hover); }
button.danger { background: transparent; color: var(--faint); border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px;
  border-radius: var(--radius); }
button.danger:hover { color: var(--danger); background: var(--danger-soft); }
button.danger-solid { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-line); border-radius: var(--radius-sm);
  cursor: pointer; padding: 6px 12px; }
button.danger-solid:hover { background: var(--danger-soft); }
button.link { background: transparent; border: 0; color: var(--primary); cursor: pointer; padding: 0; font-weight: 500; }
button.link:hover { text-decoration: underline; }
.icon-btn { background: transparent; border: 0; padding: 6px; border-radius: var(--radius); cursor: pointer; color: var(--muted);
  display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* сегменты (переключатели) и фильтры-чипы */
.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0; gap: 0; overflow: hidden; }
.seg button { border: 0; background: transparent; cursor: pointer; font-weight: 500; white-space: nowrap; border-radius: 0; padding: 5px 12px;
  border-left: 1px solid var(--line); color: var(--text-2); }
.seg button.active { background: var(--current); color: var(--accent-text); box-shadow: none; font-weight: 600; }
.seg button .cnt { color: var(--faint); margin-left: 4px; font-weight: 400; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.toolbar .search input { padding-left: 34px; }
.toolbar .search svg.i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 16px; height: 16px; }
.toolbar select { width: auto; min-width: 150px; }
.toolbar input[type=date] { width: auto; }

/* ---------- статусы, бейджи, прогресс ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; background: var(--surface-2); color: var(--text-2);
  white-space: nowrap; border-radius: var(--radius-sm); padding: 1px 7px; font-size: var(--t-cap); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.open { background: var(--primary-soft); color: var(--primary-hover); }
.pill.partial { background: var(--warning-soft); color: var(--warning); }
.pill.closed { background: var(--success-soft); color: var(--success); }
.pill.overdue { background: var(--danger-soft); color: var(--danger); }
.pill.other { background: var(--violet-soft); color: var(--violet); }
.pill.plain::before { display: none; }
.badge { padding: 2px 8px; color: var(--text-2); white-space: nowrap; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--grid); font-size: var(--t-cap); }
.progress { height: 6px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; min-width: 90px; }
.progress > span { display: block; height: 100%; background: var(--success); border-radius: var(--radius); }
.progress.warn > span { background: var(--warning); }
.pay-cell { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }

/* заказы: два списка рядом, у каждого свои фильтры */
.rec-table { table-layout: fixed; }
.rec-table col.c-st { width: 112px; }
.rec-table col.c-sum { width: 88px; }
.rec-table col.c-due { width: 92px; }
.rec-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* группировка «по клиентам»: строка клиента — крупно и заметно */
.rec-table tr.group-row td { background: var(--current); border-top: 2px solid var(--line-hover); padding-top: 8px; padding-bottom: 8px;
  color: var(--accent-text); }
.rec-table tr.group-row:hover td { background: var(--current); }
.rec-table tr.group-row .sub { font-weight: normal; font-size: var(--t-cap); }
.pay-cell .sub { font-size: var(--t-cap); }
.pos { color: var(--success); font-weight: 600; }
.neg { color: var(--danger); font-weight: 600; }
.overdue { color: var(--danger); font-weight: 600; }
.sub { color: var(--muted); font-size: var(--t-cap); }
.muted { color: var(--muted); }

/* ---------- операции: лента по дням ---------- */
.tx-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 24px; gap: 8px; align-items: center; padding: 3px 10px; cursor: pointer;
  border-top: 1px solid var(--grid); font-family: Arial, "Segoe UI", sans-serif; }
.tx-row:hover { background: var(--surface-2); }
.tx-ic { width: 20px; height: 20px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.tx-ic svg.i { width: 13px; height: 13px; }
.tx-ic.income { background: var(--success-soft); color: var(--success); }
.tx-ic.expense { background: var(--danger-soft); color: var(--danger); }
.tx-ic.transfer { background: var(--surface-2); color: var(--text-2); }
.tx-main { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.tx-main .tx-title { flex: 0 1 auto; max-width: 45%; }
.tx-main .tx-meta { flex: 1 1 0; min-width: 0; }
.tx-title { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-cap); }
.tx-amt { font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-amt.income { color: var(--success); }
.tx-amt.expense { color: var(--text); }
.tx-amt.transfer { color: var(--muted); }
.tx-row .danger { opacity: 0; }
.tx-row:hover .danger { opacity: 1; }
.chip-link { background: var(--primary-soft); color: var(--primary-hover); padding: 1px 7px; margin-left: 6px; font-weight: 500;
  border-radius: var(--radius-sm); font-size: var(--t-cap); }

/* ---------- обзор: «требует внимания» ---------- */
.attn { display: flex; flex-direction: column; }
.attn-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--surface-2);
  cursor: pointer; border-radius: 0; border-top-color: var(--grid); padding: 8px 4px; }
.attn-item:first-child { border-top: 0; }
.attn-item:hover { background: var(--surface-2); }
.attn-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); }
.attn-ic.danger { background: var(--danger-soft); color: var(--danger); }
.attn-ic.warning { background: var(--warning-soft); color: var(--warning); }
.attn-ic.info { background: var(--primary-soft); color: var(--primary); }
.empty-state { text-align: center; padding: 28px 12px; color: var(--muted); }
.empty-state .big { font-size: 28px; margin-bottom: 6px; display: none; }
.acc-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--surface-2); }
.acc-line:first-child { border-top: 0; }

/* ---------- счета: плитки ---------- */

/* ---------- боковая панель (drawer) и окна ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 50; }
.overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 100vw); background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .22s ease, visibility 0s linear .22s; visibility: hidden; z-index: 60; display: flex;
  flex-direction: column; border-left: 1px solid var(--line-hover); }
.drawer.wide { width: min(1040px, 100vw); }
.drawer.open { transform: none; visibility: visible; transition: transform .22s ease; }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: var(--pad); border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
.drawer-head .icon-btn { margin-left: auto; }
.drawer-body { padding: var(--pad); overflow-y: auto; flex: 1; }
.drawer-foot { padding: var(--pad); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; background: var(--surface-2); }
.drawer-foot .spacer { flex: 1; }
.drawer-tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--pad-x)) 16px; padding: 0 var(--pad-x); gap: 0;
  border-bottom-color: var(--line); margin-bottom: 12px; }
.drawer-tabs button { background: transparent; cursor: pointer; font-weight: 500; padding: 6px 14px; color: var(--label);
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -1px; }
.drawer-tabs button.active { border-bottom-color: var(--primary); color: var(--accent-text); font-weight: 600; background: var(--surface);
  border-color: var(--line); border-top: 2px solid var(--primary); }

/* плавающее окно (карточка заказа, спецификация): немодальное, таскается за .win-bar, размер — за правый нижний угол */
.drawer.win { display: none; transform: none; transition: none; visibility: visible; resize: both; overflow: hidden; min-width: 420px;
  min-height: 260px; border: 1px solid var(--line-hover); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(15,23,42,.28); }
.drawer.win.open { display: flex; }
.drawer.win.max { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; resize: none; border-radius: 0; }
.win-bar { flex: none; align-items: center; gap: 2px; padding: 3px 4px 3px 12px; background: var(--surface-3); border-bottom: 1px solid var(--line);
  cursor: move; user-select: none; }
.win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-2); }
.win-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-2); cursor: pointer; }
.win-btn:hover { background: rgba(15,23,42,.08); }
.win-btn svg.i { width: 15px; height: 15px; }
.spec-tab-bar { display: flex; justify-content: flex-end; margin: -6px 0 4px; }
.spec-tab-bar .link { display: inline-flex; align-items: center; gap: 4px; }
.spec-tab-bar svg.i { width: 14px; height: 14px; }
.field-inline { border-color: transparent; background: transparent; padding: 4px 6px; margin-left: -6px; }
.field-inline:hover { border-color: var(--line); background: var(--surface); }
.field-title { font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
dialog { border-radius: var(--radius); padding: var(--pad); width: min(560px, 94vw); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-hover); }
dialog::backdrop { background: rgba(15,23,42,.45); }
dialog h2 { margin: 0 0 14px; font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
dialog#variant-dialog { width: min(820px, 94vw); }
.dialog-actions { display: flex; gap: 8px; margin-top: 18px; align-items: center; }

/* ---------- уведомления ---------- */
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100;
  align-items: center; }
.toast { background: var(--text); color: var(--surface); padding: 11px 16px; box-shadow: var(--shadow-lg); display: flex; gap: 14px;
  align-items: center; min-width: 260px; max-width: 560px; animation: toast-in .18s ease; border-radius: var(--radius); }
.toast.error { background: var(--danger); }
.toast.success::before { content: "✓"; color: var(--success); font-weight: 700; }
.toast button { background: transparent; border: 0; color: var(--primary-line); font-weight: 600; cursor: pointer; padding: 0; margin-left: auto; }
.toast.error button { color: var(--surface); text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- выпадающие подсказки (контрагенты, производители) ---------- */
.combo-list { position: absolute; z-index: 1000; background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 22px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; display: none; padding: 4px; border-radius: var(--radius); }
.combo-list div { padding: 7px 10px; cursor: pointer; color: var(--text); border-radius: var(--radius); }
.combo-list div.active, .combo-list div:hover { background: var(--primary-soft); }
.combo-list div.current { font-weight: 600; }
.combo-list .empty { color: var(--faint); cursor: default; }

/* ---------- справочники ---------- */
.dict-add { display: flex; gap: 8px; }
.dict-add input { flex: 1; }
select.status-select { padding: 5px 8px; width: auto; }

/* ---------- заказы по клиентам (старый вид, используется в группировке) ---------- */

/* ---------- расходники ---------- */

/* проверка слева, «Купить» справа */

/* цветной квадратик статуса */
.cons-mark { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-sm); margin-right: 6px; vertical-align: -1px;
  background: var(--line); }
.cons-mark.in_stock { background: var(--success); }
.cons-mark.low { background: var(--warning); }
.cons-mark.out { background: var(--danger); }
.cons-mark.stale { background: var(--line-strong); }

/* таблица проверки */
.cons-table { table-layout: fixed; }
.cons-table col.c-n { width: 38px; }
.cons-table col.c-status { width: 150px; }
.cons-table col.c-date { width: 92px; }
.cons-table col.c-note { width: 18%; }
.cons-table td { padding: 3px 8px; }
.cons-table td.n, .cons-table th.n { text-align: right; color: var(--muted); }
.cons-table td.cons-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cons-status { white-space: nowrap; }

/* «Есть | Мало | Нет» — одна группа кнопок */
.cons-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.cons-btn { border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 1px 0; width: 54px;
  cursor: pointer; font-family: inherit; }
.cons-btn:first-child { border-left: 0; }
.cons-btn:hover { background: var(--surface-2); color: var(--text); }
.cons-btn.active.cons-in_stock { background: var(--success-soft); color: var(--success); font-weight: 700; }
.cons-btn.active.cons-low { background: var(--warning-soft); color: var(--warning); font-weight: 700; }
.cons-btn.active.cons-out { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.cons-date { white-space: nowrap; font-size: var(--t-cap); }
.cons-stale .cons-date .link-like { color: var(--danger); font-weight: 600; }
.cons-stale td.n { box-shadow: inset 3px 0 0 var(--warning); }
.cons-note { padding: 1px 6px; border-radius: 0; border-color: transparent; background: transparent; font-size: var(--t-cap); }
.cons-note:hover { border-color: var(--line); background: var(--surface); }
.cons-note:focus { background: var(--surface); }
.cons-buy td { padding: 3px 8px; }
.cons-st { white-space: nowrap; }
.cons-st.low { color: var(--warning); }
.cons-st.out { color: var(--danger); }
.link-like { cursor: pointer; text-decoration: underline dotted; }

/* ---------- номенклатура ---------- */

/* спецификация — строгая таблица в стиле 1С: поля сливаются с ячейками, рамка — при наведении/фокусе */
.spec-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface); }
.spec-table { table-layout: fixed; min-width: 820px; }
.spec-table col.c-n { width: 32px; }
.spec-table col.c-var { width: 20%; }
.spec-table col.c-qty { width: 96px; }
.spec-table col.c-src { width: 132px; }
.spec-table col.c-cost { width: 90px; }
.spec-table col.c-note { width: 13%; }
.spec-table col.c-x { width: 30px; }
.spec-table td, .spec-table th { padding: 2px 6px; }
.spec-table td.n, .spec-table th.n { text-align: right; color: var(--muted); }
.spec-table td.spec-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-table td.spec-name b { font-weight: 600; }
.spec-in { width: 100%; height: 24px; padding: 1px 4px; border-color: transparent; background: transparent; border-radius: 0; }
.spec-in:hover { border-color: var(--line); background: var(--surface); }
.spec-in:focus { border-color: var(--primary); background: var(--surface); box-shadow: none; }
.spec-qty-cell { white-space: nowrap; }
.spec-qty-cell .spec-qty { width: 62px; text-align: right; }
.spec-qty-cell .sub { margin-left: 4px; font-size: var(--t-cap); }
.spec-novariant td:nth-child(3) select { border-color: var(--warning); background: var(--warning-soft); }
.spec-x { text-align: center; padding: 0 !important; }
.spec-x .icon-btn { padding: 3px; color: var(--faint); }
.spec-x .icon-btn:hover { color: var(--danger); background: var(--danger-soft); }
.spec-x svg.i { width: 14px; height: 14px; }
.spec-table tfoot td { background: var(--surface-2); font-weight: 600; color: var(--text-2); border-top: 1px solid var(--line); }
.spec-add { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.spec-add select { max-width: 360px; padding: 4px 8px; }
.spec-add input { width: 80px; padding: 4px 8px; text-align: right; }
.spec-add .secondary svg.i { width: 14px; height: 14px; }
.spec-tpl-actions { display: flex; gap: 18px; margin-bottom: 10px; }

/* ---------- воронка (CRM) ---------- */
.fun-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fun-alert { padding: 8px 12px; background: var(--warning-soft); border-left: 4px solid var(--warning); cursor: pointer;
  border-radius: var(--radius-sm); }
.fun-alert.danger { background: var(--danger-soft); border-left-color: var(--danger); }
.fun-alert.info { background: var(--primary-soft); border-left-color: var(--primary); }
.fun-kind { font-size: var(--t-cap); }
.fun-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--primary);
  background: var(--surface); font-weight: 700; font-size: 12px; color: var(--primary); }
.fun-dot.has { background: var(--primary); color: var(--surface); }
.fun-dot.bad { background: var(--danger); border-color: var(--danger); color: var(--surface); }
tr.task-late td { background: var(--danger-soft); }
tr.muted td { opacity: .55; }
.stage-road { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.stage-step { flex: 1 0 auto; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface);
  padding: 4px 10px 4px 4px; cursor: pointer; color: var(--text-2); white-space: nowrap; border-radius: var(--radius-sm); font-size: var(--t-cap); }
.stage-step span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2);
  font-size: 11px; font-weight: 700; }
.stage-step.done { color: var(--success); border-color: var(--success-line); }
.stage-step.done span { background: var(--success); color: var(--surface); }
.stage-step.cur { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.stage-step.cur span { background: var(--primary); color: var(--surface); }
.task-row { display: grid; grid-template-columns: 24px 1fr auto 170px 150px 30px; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--surface-2); padding: 3px 0; border-bottom-color: var(--grid); }
.task-row select, .task-row input[type=date] { padding: 2px 6px; font-size: 13px; height: 26px; }
.task-stage { margin: 10px 0 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line); font-size: var(--t-sect);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.task-stage .o2 { text-transform: none; letter-spacing: 0; font-weight: normal; }
.task-stage.cur { color: var(--primary); }
.task-stage.future, .task-row.future { opacity: .6; }
.task-row.future { grid-template-columns: 24px 1fr auto; }
.task-row.lack { opacity: 1; }
.task-row.lack .task-title { color: var(--muted); font-style: italic; }
.sun-done.add { border-style: dashed; color: var(--primary); }
.sun-done.undo { margin-top: 2px; }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-row.late input[type=date] { color: var(--danger); border-color: var(--danger-line); }
.task-add { display: flex; gap: 8px; margin-top: 12px; }
.task-add input:first-child { flex: 1; }
.task-add input[type=date] { width: auto; }
.task-nav { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.task-nav .spacer { flex: 1; }
.proc-stage { padding: 12px 16px; }
.proc-stage-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.proc-stage-head > input { flex: 1; min-width: 140px; font-weight: 600; }
.proc-stage-head select { flex: 0 1 190px; min-width: 120px; width: auto; }
.proc-stage-head label { display: flex; flex-direction: row; gap: 6px; align-items: center; margin: 0; }
.proc-stage-head label input { width: 70px !important; }
.proc-task { display: flex; gap: 6px; margin: 4px 0 0 14px; align-items: center; border-radius: var(--radius-sm); }
/* редактор процессов: стадии в два столбца, перетаскивание, закреплённый верх */
.proc-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.proc-stages .proc-stage { margin-bottom: 14px; }
.proc-sticky { position: sticky; top: 0; z-index: 30; background: var(--bg); padding: 8px 0; margin: -8px 0 6px;
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 8px -8px rgba(15,30,60,.25); }
.proc-drag { cursor: grab; user-select: none; }
.proc-drag.task { flex: none; color: var(--faint); font-size: 16px; line-height: 1; padding: 2px 2px; }
.proc-drag.task:hover { color: var(--text-2); }
.proc-stage.dragging, .proc-task.dragging { opacity: .45; }
.proc-stage.drop-here { outline: 2px dashed var(--primary); outline-offset: 2px; }
.proc-task.drop-here { box-shadow: 0 -3px 0 var(--primary); }
.proc-task input { padding: 5px 8px; }
.proc-task select { width: auto; flex: 0 0 200px; padding: 4px 6px; }
.task-extra { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.task-extra button.mini { padding: 3px 8px; white-space: nowrap; font-size: var(--t-cap); }
td button.mini { padding: 1px 8px; margin-left: 6px; border-radius: var(--radius-sm); }

/* ---------- график сроков (Сроки) ---------- */
.g-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.g-tools .g-sort { width: auto; padding: 7px 10px; }
.g-tools .secondary { padding: 7px 14px; }

/* сводка — она же фильтр */
.g-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.g-kpi { display: flex; align-items: center; gap: 10px; padding: var(--pad-sm); text-align: left; cursor: pointer; line-height: 1.2;
  background: var(--surface); border: 1px solid var(--line); font: inherit; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s; border-radius: var(--radius); }
.g-kpi:hover { border-color: var(--line-hover); }
.g-kpi .v { line-height: 1.1; font-variant-numeric: tabular-nums; font-size: var(--t-title); font-weight: 700; }
.g-kpi .l { font-size: 13px; color: var(--muted); }
.g-kpi.bad .v { color: var(--danger); }
.g-kpi.warn .v { color: var(--warning); }
.g-kpi.zero .v { color: var(--line-strong); }
.g-kpi.active { border-color: var(--primary); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

/* поле графика */
.g-scroll { position: relative; overflow: auto; max-height: calc(100vh - 300px); min-height: 320px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.g-canvas { position: relative; }
.g-row { display: flex; height: var(--g-row); border-bottom: 1px solid var(--surface-3); }
.g-row:hover > .g-label, .g-row:hover > .g-track { background-color: var(--surface-2); }
.g-row.is-breach > .g-label { box-shadow: inset 3px 0 0 var(--danger), 6px 0 10px -8px rgba(30, 50, 80, .35); }

/* шапка: месяцы и дни */
.g-head { height: auto; position: sticky; top: 0; z-index: 12; border-bottom: 1px solid var(--line); }
.g-head > .g-label, .g-head > .g-track { background: var(--surface-3); }
.g-head-label { cursor: default !important; justify-content: space-between; align-items: flex-end !important; padding-bottom: 8px !important;
  z-index: 13 !important; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.g-m, .g-d { display: flex; }
.g-m { height: 28px; border-bottom: 1px solid var(--line); }
.g-m i { flex: none; font-style: normal; white-space: nowrap; border-left: 1px solid var(--line); line-height: 28px; font-weight: 700;
  color: var(--text-2); }
.g-m i span { position: sticky; left: calc(var(--g-label) + 10px); padding: 0 10px; }
.g-d { height: 40px; }
.g-d i { flex: none; font-style: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-left: 1px solid var(--g-line); line-height: 1.1; overflow: hidden; }
.g-d i.mon { border-left-color: var(--g-line-week); }
.g-d i b { color: var(--text); font-weight: 600; }
.g-d i small { color: var(--muted); font-size: var(--t-cap); }
.g-d i.we { background: var(--g-weekend); }
.g-d i.we b, .g-d i.we small { color: var(--danger); }
.g-d i.tn b { background: var(--primary); color: var(--surface); border-radius: var(--radius); padding: 1px 6px; }
.g-d i.tn small { color: var(--primary); font-weight: 700; }

/* колонка «Заказ» */
.g-label { flex: 0 0 var(--g-label); width: var(--g-label); box-sizing: border-box; position: sticky; left: 0; z-index: 9; display: flex;
  align-items: center; gap: 12px; padding: 8px 14px; background: var(--surface); cursor: pointer; border-right: 1px solid var(--line);
  box-shadow: 6px 0 10px -8px rgba(30, 50, 80, .35); }
.g-thumb { position: relative; flex: none; width: 50px; height: 50px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--current), var(--primary-line)); color: var(--accent-text); font-size: 16px; font-weight: 700;
  border-radius: var(--radius); }
.g-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-client { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.g-client b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-id { color: var(--faint); flex: none; font-size: var(--t-cap); }
.g-title { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-steps { display: flex; align-items: center; gap: 3px; margin-top: 3px; min-width: 0; }
.g-steps i { flex: none; width: 14px; height: 5px; border-radius: var(--radius-sm); }
.g-steps span { margin-left: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-cap); }
.g-steps i.st-done { background: var(--success); }
.g-steps i.st-cur { background: var(--primary); }
.g-steps i.st-late { background: var(--danger); }
.g-steps i.st-fut { background: var(--line); }
.g-side { flex: 0 0 100px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.g-due { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.g-left { white-space: nowrap; font-size: var(--t-cap); }
.g-due.bad, .g-left.bad { color: var(--danger); }
.g-left.warn { color: var(--warning); }
.g-left.ok { color: var(--success); }
.g-due.none, .g-left.none { color: var(--faint); font-weight: normal; }
.g-emp { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--text-2); white-space: nowrap; font-size: var(--t-cap); }
.g-emp span { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center;
  font-size: 9px; font-weight: 700; }
.g-empty { justify-content: center; color: var(--muted); cursor: default; }

/* дорожка и полосы стадий */
.g-track { position: relative; flex: none; background-color: var(--surface); }
.g-body { position: relative; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primary); z-index: 3; pointer-events: none; }
.g-today span { position: absolute; bottom: 4px; left: 4px; background: var(--primary); color: var(--surface); font-weight: 600; padding: 1px 6px;
  border-radius: var(--radius); white-space: nowrap; font-size: var(--t-cap); }

/* overflow: clip (а не hidden) — чтобы подпись полосы могла «прилипать» к краю видимой области */
.g-bar { position: absolute; top: 20px; height: 44px; box-sizing: border-box; border: 1px solid; border-radius: var(--radius); overflow: clip;
  display: flex; align-items: center; padding: 0 10px; z-index: 2; user-select: none; touch-action: none; cursor: pointer;
  transition: box-shadow .15s; }
.g-bar:hover { box-shadow: 0 4px 14px rgba(30, 60, 110, .20); z-index: 5; }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.g-txt { position: sticky; left: calc(var(--g-label) + 10px); min-width: 0; display: flex; flex-direction: column; line-height: 1.25;
  pointer-events: none; }
.g-txt b, .g-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-txt b { font-weight: 600; }
.g-txt small { opacity: .85; font-variant-numeric: tabular-nums; font-size: var(--t-cap); }
.g-bar.sm { padding: 0 6px; }
.g-bar.sm small { display: none; }
.g-bar.xs { padding: 0; }
.g-bar.xs .g-txt { display: none; }

/* полосы — полупрозрачный градиент (светлее в начале, насыщеннее к концу): где стадии наложились
   по датам, цвета складываются и перехлёст виден тёмной зоной; соседние стадии (.alt) — другим оттенком */
.g-bar.st-done { background: linear-gradient(90deg, rgba(214, 240, 222, .55), rgba(150, 214, 172, .75)); border-color: #8fcaa3; color: #1f6b3b; }
.g-bar.st-done.alt { background: linear-gradient(90deg, rgba(200, 236, 228, .55), rgba(120, 200, 180, .75)); border-color: #7cc0ad; }
.g-bar.st-done .g-fill { background: rgba(52, 168, 83, .18); }
.g-bar.st-cur { background: linear-gradient(90deg, rgba(96, 156, 244, .72), rgba(37, 99, 235, .9)); border-color: #2f6fd6; color: #fff; }
.g-bar.st-cur.alt { background: linear-gradient(90deg, rgba(120, 130, 245, .72), rgba(79, 70, 229, .9)); border-color: #4f46e5; }
.g-bar.st-cur .g-fill { background: rgba(15, 40, 120, .28); }
.g-bar.st-late { background: linear-gradient(90deg, rgba(240, 120, 112, .72), rgba(214, 52, 46, .9)); border-color: #c93c35; color: #fff; }
.g-bar.st-late .g-fill { background: rgba(110, 10, 10, .25); }
.g-bar.st-fut { background: linear-gradient(90deg, rgba(232, 238, 246, .55), rgba(184, 200, 222, .78)); border-color: #a9b9cf; color: #3a4a5f; }
.g-bar.st-fut.alt { background: linear-gradient(90deg, rgba(236, 233, 248, .55), rgba(196, 188, 228, .78)); border-color: #b3a9d6; }
.g-bar.st-fut .g-fill { background: rgba(60, 80, 110, .12); }
.g-bar.st-fut.planned { border-style: dashed; border-color: #7d8fa6; }
.g-bar.edit { cursor: grab; }
.g-bar.dragging { cursor: grabbing; opacity: .93; box-shadow: 0 10px 24px rgba(15, 30, 60, .30); z-index: 8; }
.g-bar.dragging::after { content: attr(data-shift); position: absolute; right: 12px; top: 3px; font-weight: 700; background: rgba(15, 23, 42, .7);
  color: var(--surface); border-radius: var(--radius); padding: 0 5px; font-size: var(--t-cap); }
.g-rs { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.g-rs::after { content: ''; position: absolute; right: 3px; top: 50%; height: 16px; margin-top: -8px; width: 2px; border-left: 1px solid currentColor;
  border-right: 1px solid currentColor; opacity: 0; transition: opacity .15s; }
.g-bar:hover .g-rs::after { opacity: .55; }

/* срок сдачи: флажок с линией; опоздание — штриховка */
.g-dm { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; z-index: 6; cursor: ew-resize; user-select: none; touch-action: none; }
.g-dm::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 2px dashed var(--warning); }
.g-flag { position: absolute; top: 2px; left: 8px; background: var(--warning); color: var(--warning); font-weight: 700; padding: 1px 7px 1px 5px;
  border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; font-size: var(--t-cap); }
.g-dm.bad { --g-flag: var(--danger); }
.g-dm.bad .g-flag { color: var(--surface); }
.g-dm.dragging .g-flag { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.g-breach { position: absolute; top: 14px; bottom: 10px; z-index: 1; border-radius: var(--radius); pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(229, 83, 75, .18) 0 6px, transparent 6px 12px); }

/* всплывающая карточка полосы */
#g-tip { position: fixed; z-index: 2000; display: none; width: 310px; padding: 12px 14px; background: var(--surface); pointer-events: none;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(15, 30, 60, .22); color: var(--text); }
#g-tip .gt-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
#g-tip .gt-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#g-tip .gt-state { margin-left: auto; font-weight: 600; padding: 1px 8px; border-radius: var(--radius); white-space: nowrap; font-size: var(--t-cap); }
#g-tip .gt-order { color: var(--muted); margin: 2px 0 8px; font-size: var(--t-cap); }
#g-tip table { border: 0; background: none; font-family: Arial, "Segoe UI", sans-serif; }
#g-tip td { border: 0; padding: 2px 0; background: none !important; vertical-align: middle; }
#g-tip td:first-child { color: var(--muted); width: 104px; }
#g-tip .gt-bar { display: inline-block; vertical-align: middle; width: 120px; height: 6px; margin-right: 8px; border-radius: var(--radius-sm);
  background: var(--surface-3); overflow: hidden; }
#g-tip .gt-bar span { display: block; height: 100%; }
#g-tip .gt-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--surface-2); color: var(--muted); font-size: var(--t-cap); }
#g-tip.st-done .gt-dot, #g-tip.st-done .gt-bar span { background: var(--success); }
#g-tip.st-done .gt-state { background: var(--success-soft); color: var(--success); }
#g-tip.st-cur .gt-dot, #g-tip.st-cur .gt-bar span { background: var(--primary); }
#g-tip.st-cur .gt-state { background: var(--primary-soft); color: var(--accent-text); }
#g-tip.st-late .gt-dot, #g-tip.st-late .gt-bar span { background: var(--danger); }
#g-tip.st-late .gt-state { background: var(--danger-soft); color: var(--danger); }
#g-tip.st-fut .gt-dot, #g-tip.st-fut .gt-bar span { background: var(--line-strong); }
#g-tip.st-fut .gt-state { background: var(--surface-2); color: var(--text-2); }

/* низ: легенда и настройки переноса */
.g-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-2); font-size: var(--t-cap); }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-legend i { width: 22px; height: 12px; border: 1px solid; border-radius: var(--radius); box-sizing: border-box; }
.g-legend i.st-done { background: var(--success-soft); border-color: var(--success-line); }
.g-legend i.st-cur { background: var(--primary); border-color: var(--primary); }
.g-legend i.st-late { background: var(--danger); border-color: var(--danger); }
.g-legend i.st-fut { background: var(--surface-2); border-color: var(--line); }
.g-legend i.st-fut.planned { border-style: dashed; border-color: var(--line-hover); }
.g-legend i.lg-flag { width: 0; height: 16px; border: 0; border-left: 2px dashed var(--warning); border-radius: 0; }
.g-legend i.lg-breach { border-color: var(--danger-line);
  background: repeating-linear-gradient(45deg, rgba(229, 83, 75, .25) 0 3px, transparent 3px 6px); }
.g-legend i.lg-fill { border-color: var(--success-line); background: linear-gradient(90deg, var(--success-line) 55%, var(--success-soft) 55%); }
.g-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--t-cap); }
.g-opts label { flex-direction: row; align-items: center; gap: 6px; color: var(--text-2); font-weight: normal; }
.g-opts input { width: auto; }

/* ---------- цены купе ---------- */
.price-in { width: 130px; text-align: right; padding: 5px 8px; }
/* каталог профилей: плитки с фото и чертежом сечения, отмеченные — в калькуляторе */
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.prof-tile { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; }
.prof-tile:hover { border-color: var(--line-hover); }
.prof-tile.on { border-color: var(--line-hover); background: var(--current); }
.prof-imgs { display: flex; gap: 4px; justify-content: center; }   /* у Аристо — одно фото, без чертежа */
.prof-imgs img { width: calc(50% - 2px); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); }
.prof-imgs img.missing { visibility: hidden; }
.prof-name { display: flex; align-items: center; gap: 6px; }
.prof-name input { width: auto; margin: 0; }
.prof-calc { min-height: 2.6em; }
.prof-calc-btn { align-self: flex-start; padding: 2px 10px; }
dialog#prof-calc-dialog { width: min(520px, 96vw); }
.prof-calc-table { width: 100%; }
.prof-calc-table input { width: 80px; text-align: center; font: inherit; }
.price-swatch { display: inline-block; width: 18px; height: 18px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  vertical-align: middle; }

/* ---------- поставщики ---------- */
.sup-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-group { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 12px 4px 8px; cursor: pointer; margin: 0; }
.sup-group input { width: auto; margin: 0; }
.sup-group:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* верх карточки — серая подложка во всю ширину (перекрывает отступы .drawer-body), блоки на ней белые */
.od-top { display: grid; grid-template-columns: minmax(0, 1fr) auto 340px;
  grid-template-areas: "client jump cover" "work jump cover" "money jump cover"; grid-template-rows: auto auto 1fr; gap: 8px 12px;
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 12px; padding: var(--pad-sm-y) var(--pad-x); background: var(--surface-3);
  border-bottom: 1px solid var(--line); }
.od-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.od-b-client { grid-area: client; }

/* кнопки слева от фото: заказ на дорожной карте / на графике сроков */
.od-jump { grid-area: jump; display: flex; flex-direction: column; gap: 6px; }
.od-jump button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 8px 4px 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text-2); font: inherit; cursor: pointer;
  font-size: var(--t-cap); }
.od-jump button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.od-jump svg.i { width: 22px; height: 22px; }

/* заказ, на который перешли из карточки, — выделен на карте и графике (несколько секунд) */
.rm-chip.hl { outline: 3px solid var(--primary); outline-offset: 1px; animation: hl-pulse 1s ease 3; }
.g-row.g-hl > .g-label, .g-row.g-hl > .g-track { background-color: var(--primary-soft); }
.g-row.g-hl > .g-label { box-shadow: inset 4px 0 0 var(--primary); }
@keyframes hl-pulse { 50% { outline-color: rgba(37, 99, 235, .25); } }

/* карточка заказа: основная колонка не шире 1044px (1000px содержимого) (таблицы не растягиваются вместе с окном);
   если окно шире — справа серая колонка с картинками заказа */
#order-drawer-body { container-type: inline-size; }
.od-layout { display: grid; grid-template-columns: minmax(0, 1044px) minmax(0, 1fr); margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x));
  min-height: calc(100% + 2 * var(--pad-y)); }
.od-main { min-width: 0; padding: var(--pad); }
.od-gallery { min-width: 0; background: var(--surface-3); border-left: 1px solid var(--line); padding: 12px; }
.od-gallery-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--t-sect); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.od-gallery-h svg.i { width: 15px; height: 15px; color: var(--muted); }
.od-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.od-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface) center / cover no-repeat;
  cursor: zoom-in; box-shadow: var(--shadow); transition: transform .12s; }
.od-thumb:hover { transform: scale(1.03); border-color: var(--primary); }
.od-thumb.cover { outline: 2px solid var(--warning); outline-offset: -2px; }
@container (max-width: 1180px) {
  .od-layout { grid-template-columns: minmax(0, 1fr); }
  .od-main { max-width: 1044px; }
  .od-gallery { display: none; }
}

/* спецификация в своём окне тоже не растягивается шире 1100px */
#spec-win .spec-wrap, #spec-win .spec-add, #spec-win .spec-tpl-actions { max-width: 1100px; }

/* окно «Документы» к заказу и реквизиты фирмы (static/js/docs.js) */
dialog.docs-dialog { width: min(860px, 96vw); max-height: 94vh; }
dialog.docs-dialog[open] { display: flex; flex-direction: column; }
.docs-body { padding: var(--pad-sm); overflow-y: auto; }
.docs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.docs-grid label { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); min-width: 0; font-size: var(--t-cap); }
.docs-grid label.wide { grid-column: span 2; }
.docs-grid input, .docs-lines input, .docs-terms { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 0;
  padding: 3px 6px; width: 100%; }
.docs-lines td { padding: 2px 4px; }
.docs-lines input { border-color: transparent; }
.docs-lines input:focus { border-color: var(--line-strong); }
.docs-sub { margin: 10px 0 4px; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.docs-sum { display: flex; flex-direction: column; justify-content: flex-end; color: var(--text-2); font-size: var(--t-cap); }
.docs-sum b { color: var(--text); font-variant-numeric: tabular-nums; font-size: var(--t-title); font-weight: 700; }
.docs-group { margin: 10px 0 0; }
.docs-group .docs-grid { padding: 8px; }
.docs-warn { color: var(--warning); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.docs-terms { height: 200px; resize: vertical; margin-bottom: 6px; line-height: 1.4; }

/* Google Календарь — окно подключения (static/js/gcal.js) */
.gcal-howto { margin: 0; padding-left: 20px; line-height: 1.55; }
.gcal-howto li { margin-bottom: 4px; }
div.gcal-howto { padding: 8px 10px; }
.gcal-file { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0 20px; }
.gcal-file textarea { font: 12px Consolas, monospace; height: 70px; border: 1px solid var(--line-strong); border-radius: 0; padding: 4px 6px;
  resize: vertical; }
.gcal-name { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; color: var(--text-2); }
.gcal-name input { font: inherit; border: 1px solid var(--line-strong); border-radius: 0; padding: 3px 6px; width: 220px; }
.gcal-step { padding: 6px 0; }
.gcal-step.ok { color: var(--success); }
/* Telegram-бот — окно подключения и привязки (static/js/tgbot.js) */
.tg-token { font: 12px Consolas, monospace; border: 1px solid var(--line-strong); border-radius: 0; padding: 4px 6px; width: 100%; box-sizing: border-box; }
.tg-link { display: flex; gap: 6px; align-items: center; }
.tg-link input { flex: 1; min-width: 0; font: 12px Consolas, monospace; border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 5px;
  background: var(--surface); color: var(--text); }
.tg-emps { margin-bottom: 6px; }
.tg-links td:first-child { white-space: nowrap; width: 1%; padding-right: 10px; }
.tg-footer { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.tg-footer textarea { font: inherit; font-size: 13px; height: 54px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 0;
  padding: 4px 6px; background: var(--surface); color: var(--text); }
/* публикация в канал из заказа (static/js/tgpost.js) */
dialog#post-dialog { width: min(760px, 96vw); }
.post-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.post-ph { position: relative; aspect-ratio: 1; border: 2px solid var(--line); background: var(--surface-2) center / cover no-repeat;
  cursor: pointer; padding: 0; border-radius: 0; }
.post-ph.on { border-color: var(--primary); }
.post-ph span { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--primary);
  color: var(--surface); font-size: 12px; line-height: 20px; text-align: center; }
.post-consent { margin-bottom: 8px; }
.post-where { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.post-where .docs-sub { margin: 0; }
.vk-app { font: inherit; width: 140px; border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 5px; margin-left: 4px; }
.vk-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin: 6px 0; }
.vk-form input { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 0; padding: 3px 6px; min-width: 0;
  background: var(--surface); color: var(--text); }
.post-text { height: 190px; }
.post-when { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.post-when label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; margin: 0; }
.post-when input[type=datetime-local] { font: inherit; border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 5px; }
.gcal-err { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.gcal-state { margin-top: 6px; border: 1px solid var(--line); }
.gcal-state td:first-child { width: 210px; color: var(--text-2); }

/* название, номер и статус заказа — в первом блоке; над карточкой только тонкий заголовок окна */
.od-title { display: flex; align-items: center; gap: 6px; padding: 4px 6px 0 10px; }
.od-title #od-note { flex: 1; min-width: 0; padding: 2px 6px; font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
.od-title .icon-btn { flex: none; }
.od-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 10px 2px; font-size: var(--t-cap); }
.od-b-work { grid-area: work; }
.od-b-money { grid-area: money; display: flex; flex-direction: column; }
.od-grid { display: grid; gap: 4px 8px; padding: 5px 10px 7px; }
.od-g-client { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.7fr); }
.od-g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-grid label { gap: 1px; min-width: 0; font-size: var(--t-cap); }
.od-grid input, .od-grid select { padding: 2px 6px; font-size: 13px; height: 26px; }
.od-g-client #od-cp { font-weight: 600; }

/* деньги: итоги одной строкой, полоса оплаты и кнопка */
.od-money { display: flex; align-items: center; gap: 14px; padding: 4px 10px; margin-top: auto; border-top: 1px solid var(--grid);
  background: var(--surface-2); }
.od-money > div:not(.od-pay) { display: flex; flex-direction: column; }
.od-money .l { color: var(--muted); font-size: var(--t-cap); }
.od-money .v { font-variant-numeric: tabular-nums; font-size: var(--t-title); font-weight: 700; }
.od-pay { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 4px; }
.od-money .primary { padding: 3px 10px; }
.od-cover { grid-area: cover; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); min-height: 210px;
  border: 1px solid var(--line); }
.od-cover.over { outline: 2px dashed var(--primary); outline-offset: -4px; }
.od-cover.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 16px;
  cursor: pointer; border: 2px dashed var(--line-strong); background: var(--surface-2); color: var(--text-2); }
.od-cover.empty:hover, .od-cover.empty.over { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.od-cover.empty .big { font-size: 34px; }
.od-cover-img { position: absolute; inset: 0; background: var(--surface-2) center / cover no-repeat; cursor: zoom-in; }
.od-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(15,23,42,.55); color: var(--surface); font-size: 20px; line-height: 28px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.od-nav.l { left: 6px; }
.od-nav.r { right: 6px; }
.od-cover:hover .od-nav { opacity: 1; }
.od-star { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15,23,42,.45); color: var(--surface); font-size: 16px; line-height: 30px; opacity: 0; transition: opacity .15s; }
.od-star.on { color: var(--warning); opacity: 1; }
.od-cover:hover .od-star { opacity: 1; }
.od-cover-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 14px 10px 6px;
  background: linear-gradient(transparent, rgba(15,23,42,.6)); color: var(--surface); pointer-events: none; font-size: var(--t-cap); }
.od-cover-cap span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* просмотр картинок поверх программы */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(10,14,22,.88); display: flex; align-items: center; justify-content: center;
  animation: fade .12s ease; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 110px); object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); background: var(--surface); }
.lb-x { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--surface); font-size: 28px; line-height: 44px; }
.lb-x:hover { background: rgba(255,255,255,.28); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--surface); font-size: 32px; line-height: 50px; }
.lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-nav.l { left: 20px; }
.lb-nav.r { right: 20px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: var(--surface-3); }
.lb-cap a { color: var(--primary-line); margin-left: 12px; text-decoration: none; }

/* ---------- значки программ и типов файлов ---------- */
svg.ti { width: 17px; height: 17px; vertical-align: -3px; stroke-width: 1.6; }
.tool-bar button svg.ti, .tool-mini svg.ti, .file-types svg.ti { margin-right: 6px; }
.tool-mini svg.ti, .file-types svg.ti { width: 15px; height: 15px; }
.ti-cutting { color: var(--muted); }
.ti-doors { color: var(--muted); }
.ti-constructor { color: var(--muted); }
.ti-pro100 { color: var(--muted); }
.ti-image { color: var(--muted); }
.ti-docs { color: var(--muted); }
.file-ic svg.ti { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.file-ic.ft-cutting { background: var(--warning-soft); background-color: var(--surface-2); border: 1px solid var(--grid);
  border-radius: var(--radius); }
.file-ic.ft-doors { background: var(--success-soft); background-color: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius); }
.file-ic.ft-constructor { background: var(--primary-soft); background-color: var(--surface-2); border: 1px solid var(--grid);
  border-radius: var(--radius); }
.file-ic.ft-pro100 { background: var(--violet-soft); background-color: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius); }
.file-ic.ft-image { background: var(--success-soft); background-color: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius); }
.file-ic.ft-docs { background: var(--surface-2); background-color: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius); }
.file-types button.active svg.ti { color: inherit; }

/* ---------- программы и файлы заказа ---------- */
.tool-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 14px; }
.tool-bar button.secondary { padding: 6px 12px; }
.tool-bar button[disabled] { opacity: .5; cursor: not-allowed; }
.files-head { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.file-drop { flex: 1; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--muted); cursor: pointer;
  background: var(--surface-2); transition: background .12s, border-color .12s; display: flex; align-items: center; gap: 8px; }
.file-drop:hover, .file-drop.over { border-color: var(--primary); background: var(--primary-soft); color: var(--text-2); }
.file-types { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line-strong); }
.file-types:empty { display: none; }
.file-drop .file-to { width: auto; padding: 3px 6px; margin-left: auto; font-size: var(--t-cap); }
.file-drop .file-to-lbl { margin-left: auto; color: var(--primary); font-weight: 600; }
.file-move-menu { position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; min-width: 180px; }
.file-move-menu .sub { padding: 2px 8px 4px; }
.file-move-menu button { background: none; border: 0; text-align: left; padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
  font: inherit; }
.file-move-menu button:hover:not(:disabled) { background: var(--primary-soft); }
.file-move-menu button:disabled { color: var(--faint); cursor: default; }
.file-tile[draggable="true"] { cursor: grab; }
.file-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.file-list:empty { display: none; }
.file-tile { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0;
  transition: border-color .12s, background .12s; }
.file-tile:hover { border-color: var(--primary-line); background: var(--surface-2); }
.file-tile.missing { opacity: .55; }
.file-open { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; background: none; border: 0; padding: 6px 8px; cursor: pointer;
  text-align: left; font: inherit; color: inherit; }
.file-ic { flex: none; width: 30px; height: 30px; background: var(--surface-2); display: grid; place-items: center; font-size: 16px;
  background-color: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius); }
.file-ic.thumb { background: var(--surface-2) center / cover no-repeat; border-color: var(--line); }
.file-name { font-weight: 500; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word; }
.file-tile:hover .file-name { color: var(--primary); }
.file-hover { position: absolute; top: 3px; right: 3px; display: none; gap: 1px; background: var(--surface); border: 1px solid var(--line);
  padding: 1px; border-color: var(--line); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(15, 30, 60, .12); }
.file-tile:hover .file-hover { display: flex; }
.file-hover button, .file-hover a { background: none; border: 0; cursor: pointer; font-size: 13px; line-height: 1; border-radius: var(--radius);
  text-decoration: none; color: var(--muted); padding: 4px; display: inline-grid; place-items: center; }
.file-hover button:hover, .file-hover a:hover { color: var(--text); background: var(--hover); }
.file-hover .del:hover { background: var(--danger-soft); color: var(--danger); }

/* =====================================================================
   Строгий стиль «как в 1С» — новые формы: пользователь, чек-лист, журнал.
   Прямые углы, таблицы с сеткой, серая шапка, жёлтая текущая строка,
   жёлтая кнопка по умолчанию.
   ===================================================================== */
.f1c { color: var(--text); font-family: Arial, "Segoe UI", sans-serif; }
dialog.f1c { border-radius: var(--radius-sm); padding: 0; border: 1px solid var(--line-strong); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
dialog#daily-dialog { width: min(720px, 96vw); }
dialog#user-dialog { width: min(460px, 96vw); }

/* окно-вопрос вместо confirm/prompt (ui.js uiDialog) */
dialog.ui-dialog { width: min(480px, 94vw); }
.ui-dialog-text { padding: 14px 12px; white-space: pre-wrap; max-height: 60vh; overflow: auto; line-height: 1.45; }
.ui-dialog-input { padding: 0 12px 14px; }
.ui-dialog-input input { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--line-strong); border-radius: 0; padding: 4px 6px; }
.ui-dialog .b1c { min-width: 80px; }
.f1c-title { display: flex; align-items: center; gap: 10px; padding: var(--pad-sm); border-bottom: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-title); font-weight: 700; color: var(--text); letter-spacing: 0; }
.f1c-x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.f1c-x:hover { color: var(--text); }
.f1c-hint { padding: 8px 12px 0; color: var(--muted); }
.f1c-progress { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.f1c-bar { flex: 1; height: 8px; border: 1px solid var(--line); background: var(--surface); }
.f1c-bar span { display: block; height: 100%; width: 0; background: var(--success); transition: width .2s; }
.f1c-actions { display: flex; align-items: center; gap: 6px; padding: var(--pad-sm); border-top: 1px solid var(--line); background: var(--surface-2); }
.f1c-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.f1c-check input, .t1c input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: var(--text-2); }

/* кнопки */
.b1c { font: inherit; color: var(--text-2); background: var(--l-btn, var(--surface-2)); border: 1px solid var(--l-btn-b, var(--line-strong));
  border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.b1c:hover { background: var(--surface-3); }
.b1c.default { background: var(--yellow); border-color: var(--yellow-line); font-weight: 700; }
.b1c.default:hover { background: var(--yellow); }
.b1c.sm { padding: 1px 8px; font-size: var(--t-cap); }
.b1c:disabled { opacity: .5; cursor: default; }
.b1c:disabled:hover { background: var(--l-btn, var(--surface-2)); }

/* таблицы */
.t1c-scroll { margin: 0 12px; border: 1px solid var(--line); max-height: 44vh; overflow-y: auto; background: var(--surface); }
.t1c-scroll.short { max-height: 24vh; margin: 0; }
.t1c-scroll.tall { margin: 0; max-height: calc(100vh - 250px); }
.t1c { width: 100%; border-collapse: collapse; background: var(--surface); font-family: Arial, "Segoe UI", sans-serif; }
.t1c th { position: sticky; top: 0; z-index: 1; background: var(--surface-3); color: var(--text-2); border-left: 0; border-top: 0;
  font-weight: normal; text-align: left; text-transform: none; letter-spacing: 0; border-radius: 0 !important; padding: 4px 7px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.t1c td { padding: 4px 7px; border: 0; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); vertical-align: top; }
.t1c th:last-child, .t1c td:last-child { border-right: 0; }
.t1c tbody tr:hover td { background: var(--hover); }
.t1c tr.current td { background: var(--current); }
.t1c .n { width: 34px; text-align: right; color: var(--muted); }
.t1c .c { width: 24px; text-align: center; }
.t1c .tm { width: 52px; font-variant-numeric: tabular-nums; }
.t1c .acts { width: 1%; white-space: nowrap; }
.t1c tr.muted td { color: var(--line-strong); }
.t1c-empty { text-align: center; color: var(--muted); padding: 14px 7px !important; }
.t1c-pick { margin: 10px 12px; width: calc(100% - 24px); border: 1px solid var(--line); }
.t1c-pick tbody tr { cursor: pointer; }
.t1c-daily { cursor: default; }
.t1c-daily tbody tr { cursor: pointer; }
.t1c-daily tbody tr input { pointer-events: none; }
.t1c-daily tr.done td { color: var(--muted); }
.t1c-daily tr.done td:nth-child(3) { color: var(--success); }

/* группа «Настройка списка» */
.f1c-group { margin: 10px 12px 12px; border: 1px solid var(--line); }
.f1c-group summary { padding: 5px 8px; background: var(--surface-3); cursor: pointer; color: var(--text-2); }
.f1c-group[open] summary { border-bottom: 1px solid var(--line); }
.f1c-addrow { display: flex; gap: 6px; padding: 8px; }
.f1c-addrow input { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 0; padding: 3px 6px;
  background: var(--surface); color: var(--text-2); height: 26px; box-sizing: border-box; }
.f1c-addrow input { flex: 1; }
.f1c-group .t1c-scroll { border-left: 0; border-right: 0; border-bottom: 0; }

/* журнал */
.f1c-panel { background: var(--surface); border: 1px solid var(--line); }
.f1c-panel .t1c-scroll { border: 0; }
.f1c-foot { padding: 5px 10px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.t1c-audit .dt { width: 128px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t1c-audit .who { width: 140px; }
.t1c-audit .act { width: 96px; white-space: nowrap; }
.t1c-audit td.a-delete, .t1c-audit td.a-archive { color: var(--danger); }
.t1c-audit td.a-create, .t1c-audit td.a-restore { color: var(--success); }

/* плашка «Пользователь» в боковом меню */
.sidebar-user { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); margin-top: 6px; }
.user-chip { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); padding: 6px 10px; cursor: pointer; font: inherit; text-align: left; border-radius: var(--radius); }
.user-chip:hover { border-color: var(--line-hover); }
.user-chip.empty { border-color: var(--warning); background: var(--warning-soft); }
.user-chip.empty .user-name { color: var(--warning); }
.user-cap { color: var(--muted); font-size: var(--t-cap); }
.user-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-daily { background: none; border: 1px dashed var(--line); color: var(--text-2); font: inherit; padding: 5px 10px; cursor: pointer;
  text-align: left; border-radius: var(--radius); }
.user-daily:hover { background: var(--surface); border-style: solid; color: var(--primary-hover); }
.spacer { flex: 1; }

/* =====================================================================
   Единый строгий стиль для всей программы: карточки, плитки, формы,
   кнопки, переключатели, окна — в той же гамме, что таблицы и меню.
   ===================================================================== */
/* плитки-показатели (Обзор, сводки) */
.kpi.accent-danger { border-top-color: var(--danger); }
.kpi.accent-success { border-top-color: var(--success); }
.kpi.accent-warning { border-top-color: var(--warning); }

/* переключатели-сегменты: как группа кнопок */
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--surface-2); }

/* значки: только простые линейные (svg), без эмодзи */
svg.i.i-inline { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }

/* справочники */

/* номенклатура: фильтры-кнопки, группы, компактная таблица позиций */

/* раскладка: слева фильтры столбиком, справа настройка групп + поиск + позиции */
.nom-settings { padding: 0; margin-bottom: 12px; }
.nom-settings > summary { cursor: pointer; padding: var(--pad-sm); background: var(--surface-3); display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.nom-settings > summary .sub { font-weight: normal; font-size: var(--t-cap); }
.nom-settings[open] > summary { border-bottom: 1px solid var(--line); }
.nom-settings > .table-wrap { border: 0; }
.nom-settings > .dict-add { padding: 0 14px 12px; }
#nom-groups-table { table-layout: fixed; }
#nom-groups-table td.nom-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nom-groups-table select { width: 100%; height: 26px; padding: 1px 6px; line-height: 1.2; }

/* ---------- боковая колонка фильтров (как в номенклатуре) — операции, заказы, отчёты, журнал ---------- */
.side-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.side-main { min-width: 0; }
.side-panel { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 0 8px; max-height: calc(100vh - 24px); overflow-y: auto; }
.side-title { padding: 8px 12px 4px; font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--label); }

/* переключатели-сегменты внутри колонки — вертикальным списком со счётчиками */
.side-panel .seg { display: flex; flex-direction: column; flex-wrap: nowrap; background: none; border: 0; border-top: 1px solid var(--grid);
  border-radius: 0; padding: 0; gap: 0; margin-bottom: 4px; overflow: visible; }
.side-panel .seg button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 12px; border: 0;
  border-bottom: 1px solid var(--grid); border-radius: 0; background: none; color: var(--text); font-weight: normal; text-align: left;
  white-space: nowrap; }
.side-panel .seg button .cnt { margin-left: auto; font-weight: 600; color: var(--muted); font-size: var(--t-cap); }
.side-panel .seg button:hover { background: var(--hover); }
.side-panel .seg button.active { background: var(--current); color: var(--accent-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }
.side-panel .seg button.active .cnt { color: var(--accent-text); }
.side-field { padding: 6px 12px 8px; border-top: 1px solid var(--grid); }
.side-field select, .side-field input[type=date] { width: 100%; padding: 4px 6px; font-size: 13.5px; min-width: 0; }
.side-dates { display: flex; flex-direction: column; gap: 6px; }
.side-dates label { flex-direction: row; align-items: center; gap: 6px; font-weight: normal; color: var(--muted); }
.side-dates label input { flex: 1; }
.side-check { flex-direction: row !important; align-items: center; gap: 8px; font-weight: normal; color: var(--text); cursor: pointer; }
.side-main > .toolbar .search { max-width: none; }

/* группы — в 2–3 столбика (сколько влезет по ширине), группа не разрывается между столбиками */

/* «Позиция» — самый широкий столбец (всё оставшееся место), варианты — узкие */
.nom-table { margin-top: 8px; table-layout: fixed; }
.nom-table col.c-unit { width: 44px; }
.nom-table col.c-min { width: 44px; }
.nom-table col.c-var { width: 24%; }
.nom-table col.c-acts { width: 50px; }
.nom-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-table td:nth-child(4) { white-space: normal; }

/* курсор с клавиатуры (cursor.js) — одинаково во всех списках */
tr.current td, tr.current:hover td { background: var(--current); }
tr.current td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.tx-row.current, .tx-row.current:hover { background: var(--current); box-shadow: inset 3px 0 0 var(--primary); }
.nom-pack { margin-left: 2px; color: var(--muted); font-size: var(--t-cap); }
.nom-keys { color: var(--muted); margin: -6px 0 10px; font-size: var(--t-cap); }
.nom-keys kbd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 4px; font-family: inherit;
  font-size: var(--t-cap); }
/* фильтры в шапке столбцов (номенклатура): вторая строка шапки, тоже закреплена при прокрутке */
.t1c thead tr.col-filter th { top: 27px; padding: 2px 3px; background: var(--surface-2); }
.t1c thead tr.col-filter input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.t1c thead tr.col-filter input:not(:placeholder-shown) { border-color: var(--primary); background: var(--primary-soft); }
.t1c thead tr.col-filter input::placeholder { color: var(--faint); }
.nom-table .nom-vars { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.nom-side-cfg { width: 100%; box-sizing: border-box; }

/* цены купе: компактные поля, цена — узкой колонкой */
#prices-body .card { padding: var(--pad-sm); }
#prices-body .price-in { width: 100px; padding: 2px 6px; text-align: right; }
#prices-body .field-inline { padding: 2px 6px; }
#prices-body .price-swatch { width: 14px; height: 14px; border-radius: var(--radius-sm); }
#prices-body td:first-child:has(.price-swatch) { text-align: center; padding: 0; }
/* фото текстуры: миниатюра (щелчок — заменить), × — убрать, «свой тон» — тон схемы дверей не с фото */
#prices-body .tex-cell { display: grid; grid-template-columns: 40px auto; align-items: center; column-gap: 2px; row-gap: 2px; }
#prices-body .tex-cell .side-check { grid-column: 1 / -1; }
#prices-body .tex-thumb { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); }
#prices-body .tex-thumb:hover { border-color: var(--primary); }
#prices-body .tex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#prices-body .tex-del { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
#prices-body .tex-del:hover { color: var(--danger); }
#prices-body .tex-cell .side-check { white-space: nowrap; }

/* ---------- дорожная карта: процессы — линии «метро», стадии — станции, заказы — метки ---------- */
.rm-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rm { display: flex; flex-direction: column; position: relative; z-index: 0; }
.rm-line { display: grid; grid-template-columns: 160px minmax(0, 1fr); border-bottom: 1px solid var(--grid); }
.rm-line:last-child { border-bottom: 0; }
.rm-label { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 10px 12px; border-right: 1px solid var(--grid); display: flex;
  flex-direction: column; gap: 2px; }
.rm-label i { display: block; width: 30px; height: 5px; border-radius: var(--radius-sm); background: var(--c); margin-bottom: 4px; }
.rm-label b { color: var(--text); }
.rm-track { display: grid; align-items: start; padding: 6px 0 10px; }
.rm-st { min-width: 0; padding: 0 5px; border-radius: var(--radius); }
.rm-st.over { background: var(--primary-soft); outline: 2px dashed var(--c); outline-offset: -2px; }
.rm-node-row { position: relative; height: 30px; display: flex; justify-content: center; align-items: center; }
.rm-st.l .rm-node-row::before, .rm-st.r .rm-node-row::after { content: ''; position: absolute; top: 13px; height: 4px; background: var(--c); }
.rm-st.l .rm-node-row::before { left: -5px; right: 50%; }
.rm-st.r .rm-node-row::after { left: 50%; right: -5px; }
.rm-node { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--c); box-sizing: border-box; cursor: pointer;
  transition: transform .12s; }
.rm-st.has .rm-node { background: var(--c); color: var(--surface); }
.rm-node:hover { transform: scale(1.2); }

/* задачи остановки «солнцем»: кружок станции в центре, вокруг лучи и выноски-блоки (crm.js openStationSun) */
#rm-sun { position: fixed; inset: 0; z-index: 400; background: rgba(240, 244, 249, .72); backdrop-filter: blur(1.5px); animation: fade .15s ease; }
.sun-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sun-rays line { stroke: var(--c); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; opacity: .75;
  animation: sun-ray .35s ease forwards; }
@keyframes sun-ray { to { stroke-dashoffset: 0; } }
.sun-core { position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; cursor: pointer; border-radius: 50%; background: var(--c); color: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--c), 0 4px 16px rgba(15,30,60,.3); animation: sun-pop .25s ease;
  transition: transform .15s; }
.sun-core:hover { transform: scale(1.06); }
.sun-core b { font-size: 18px; line-height: 1; }
.sun-core span { font-weight: 700; line-height: 1.1; margin-top: 2px; font-size: 10.5px; max-width: 64px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sun-core small { opacity: .85; margin-top: 1px; font-size: 10px; }
.sun-box { position: absolute; width: 150px; transform: translate(-50%, -50%) scale(.3); opacity: 0; background: var(--surface);
  border: 2px solid var(--c); border-radius: var(--radius); padding: 6px 9px; box-shadow: 0 4px 14px rgba(15,30,60,.16);
  animation: sun-bloom .3s ease forwards; line-height: 1.3; font-size: var(--t-cap); }
.sun-box.done { border-style: solid; background: var(--success-soft); }
.sun-box.late { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229, 83, 75, .18), 0 4px 14px rgba(15,30,60,.16); }
.sun-box.empty { text-align: center; color: var(--muted); }
.sun-done { display: block; width: 100%; margin-top: 4px; padding: 2px 4px; font: inherit; font-size: var(--t-cap);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.sun-done:hover { background: var(--hover); color: var(--text); }
.sun-box.add { border-style: dashed; cursor: pointer; background: var(--surface-2); }
.sun-box.add:hover { background: var(--hover); }
.sun-box.add.struct { border-color: var(--label); }
.sun-box.add.editing { cursor: default; background: var(--surface); width: 190px; }
.sun-add-in { width: 100%; font: inherit; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.sun-add-ck { display: flex; flex-direction: row; align-items: center; gap: 4px; margin-top: 4px; font-weight: normal; color: var(--text-2); }
.sun-add-bar { display: flex; justify-content: flex-end; margin-top: 4px; }
.sun-t { display: flex; gap: 4px; align-items: flex-start; color: var(--text); }
.sun-t svg.i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.sun-t b { color: var(--c); }
.sun-s { margin-top: 3px; color: var(--muted); font-size: var(--t-cap); }
@keyframes sun-bloom { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes sun-pop { from { transform: scale(.4); } }
/* закрытие: выноски летят обратно в центр, лучи втягиваются, солнце сжимается, фон гаснет */
#rm-sun-closing { position: fixed; inset: 0; z-index: 400; pointer-events: none; background: rgba(240, 244, 249, .72);
  animation: sun-fade-out .3s ease forwards; }
#rm-sun-closing .sun-box { animation: sun-collapse .24s ease-in forwards; animation-delay: 0s !important;
  transform: translate(-50%, -50%) scale(1); opacity: 1; }
#rm-sun-closing .sun-rays line { stroke-dashoffset: 0; animation: sun-ray-back .22s ease-in forwards; animation-delay: 0s !important; }
#rm-sun-closing .sun-core { animation: sun-shrink .3s ease-in forwards; }
@keyframes sun-collapse { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@keyframes sun-ray-back { to { stroke-dashoffset: 600; } }
@keyframes sun-shrink { to { transform: scale(.3); opacity: 0; } }
@keyframes sun-fade-out { to { opacity: 0; } }
.rm-st.bad .rm-node { box-shadow: 0 0 0 3px rgba(229, 83, 75, .4); }
.rm-name { text-align: center; line-height: 1.25; color: var(--text-2); font-weight: 600; margin-top: 2px; min-height: 30px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-cap); }
.rm-count { text-align: center; color: var(--muted); min-height: 15px; font-size: var(--t-cap); }
.rm-chips { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
/* много меток на станции — каскадом внахлёст (видна верхняя строка каждой); наведение на станцию раскрывает */
.rm-chips.cascade { gap: 0; }
.rm-chips.cascade .rm-chip + .rm-chip { margin-top: -17px; margin-left: 5px; box-shadow: 0 -2px 4px rgba(15, 30, 60, .12); }
.rm-chips.cascade .rm-chip:nth-child(n+3) { margin-left: 10px; }
.rm-st:hover .rm-chips.cascade { gap: 3px; }
.rm-st:hover .rm-chips.cascade .rm-chip + .rm-chip { margin: 0; box-shadow: none; }
.rm-chip { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--radius-sm); padding: 3px 6px 4px; cursor: pointer; line-height: 1.25; font-size: var(--t-cap); }
.rm-chip b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-chip span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-cap); }
.rm-chip span i { font-style: normal; }
.rm-chip em { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--c); opacity: .55; }
.rm-chip:hover { border-color: var(--line-hover); box-shadow: 0 2px 6px rgba(15, 30, 60, .12); }
.rm-chip.late { border-left-color: var(--danger); background: var(--danger-soft); }
.rm-chip.soon { border-left-color: var(--warning); background: var(--warning-soft); }
.rm-chip.lost { opacity: .6; border-left-color: var(--faint); }
.rm-lost { border-left: 1px dashed var(--line); margin-left: 6px; }
.rm-lost .rm-node { border-color: var(--line-strong); color: var(--faint); }

/* файлы заказа: слева колонка фильтров (папки, типы), справа — загрузка и плитки */
.files-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: start; }
.files-main { min-width: 0; }
.files-side { top: 0; }
.files-side .file-types { display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0 0 4px; padding: 0; border-left: 0; gap: 0; }
.files-side .seg button svg.i { width: 15px; height: 15px; color: var(--muted); margin: 0; }
.files-side .seg button.active svg.i { color: var(--primary); }
.files-side .seg button.empty { color: var(--faint); }
.files-side .seg button.drop { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

/* загрузка — во всю ширину над колонкой типов и плитками */
.files-head .file-drop { padding: var(--pad-sm); min-height: 46px; }

/* этапы-контейнеры (папки заказа) — сверху в ряд, по порядку работы; на них перетаскивают файлы */
.file-stages { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; margin-bottom: 10px; }
.file-stage { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 6px 9px; cursor: pointer; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--text); text-align: left;
  transition: background .12s, border-color .12s; }
.file-stage:hover { border-color: var(--line-hover); background: var(--surface-2); }
.file-stage .fs-num { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.file-stage svg.i { width: 15px; height: 15px; color: var(--muted); }
.file-stage .fs-name { flex: 1; white-space: nowrap; }
.file-stage .fs-cnt { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--t-cap); }
.file-stage.empty .fs-name, .file-stage.empty .fs-cnt { color: var(--faint); }
.file-stage.active { background: var(--current); border-color: var(--primary-line); box-shadow: inset 0 2px 0 var(--primary); }
.file-stage.active .fs-name { color: var(--accent-text); font-weight: 600; }
.file-stage.active .fs-num { background: var(--primary); color: var(--surface); }
.file-stage.drop { background: var(--primary-soft); border: 1px dashed var(--primary); box-shadow: none; }
.fs-arrow { align-self: center; color: var(--line-strong); font-size: 14px; flex: none; margin: 0 -1px; }

/* карточка заказа: вкладки — как закладки формы 1С, задания — компактнее */
.drawer-tabs button:hover { color: var(--text); background: var(--surface-2); }

/* ---------- значки «как меню Claude»: тонкие одноцветные линии, без цветных плашек ---------- */
.file-hover svg.i { width: 14px; height: 14px; }
.file-drop > svg.i { width: 16px; height: 16px; color: var(--muted); }
.files-head .secondary svg.i { width: 15px; height: 15px; color: var(--muted); }
.od-cover.empty .big svg.i { width: 30px; height: 30px; stroke-width: 1.4; color: var(--faint); }
.lightbox .lb-cap a svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.fun-alert > svg.i { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; color: var(--warning); }
.fun-alert.danger > svg.i { color: var(--danger); }
.fun-alert.info > svg.i { color: var(--primary); }
.fun-kind svg.i { width: 13px; height: 13px; color: var(--muted); vertical-align: -2px; }
.dot-late { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 4px; vertical-align: 1px; }

/* =====================================================================
   Четыре стиля текста — как в главном меню слева (по просьбе 2026-10-09):
     Заголовок — как «Финансы»:  17px, жирный, тёмно-синий
     Раздел    — как «ДЕНЬГИ»:   12px, жирный, капслок, разрядка, серо-синий
     Основной  — как «Обзор»:    14,5px
     Подпись   — как низ меню:   12px
   Таблицы и окна в стиле 1С (.f1c / .t1c) — 13px Arial, как было.
   Размеры значков, символов (× ‹ › ★) и цифр в маленьких кружках не трогаем.
   Блок последний в файле — перекрывает размеры выше; убрать его = вернуть как было.
   ===================================================================== */
/* Основной */
body, nav button, input, select, textarea, button.primary, button.mini, button.secondary, button.danger-solid, button.link, .seg button,
.drawer-tabs button, .toast, .toast button, .combo-list div, select.status-select,
.fun-alert, .proc-task input, .proc-task select, .g-tools .g-sort, .sup-group, .gcal-step, .gcal-howto, .gcal-name,
.gcal-err, .file-drop, .file-move-menu button, .file-name, .file-hover button, .file-hover a, .file-stage, .lb-cap, .user-name, .user-daily,
.side-panel .seg button, .side-field select, .side-field input[type=date], .side-check,
.spec-add select, .spec-add input, .win-btn, .win-title, .rm-label b, #g-tip .gt-head,
.od-grid input, .od-grid select, .od-money .primary, .docs-grid input, .docs-terms, .task-row select, .task-row input[type=date] {
  font-size: var(--t-text); }

/* Таблицы и окна в стиле 1С — 13px Arial */
table, th, td, .t1c, .t1c th, .tx-row, .spec-in, #g-tip, #g-tip table, .g-m i, .g-d i b, .g-client b, .g-title, .g-due, .g-txt b,
.f1c, .b1c, .f1c-addrow input, .cons-btn, td input, td select, td textarea, td button.mini, td button.secondary, td .pill {
  font-size: var(--t-table); }

/* ---------- мелкие правила вместо встроенных стилей (style="…") ---------- */
.svg-sprite { position: absolute; }
.base-badge { margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--danger); color: var(--surface); font-size: 11px;
  font-weight: 600; }
.ml-auto { margin-left: auto; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }
h2 .sub, h3 .sub { font-weight: normal; }
dialog > h2 + .sub, .h2-sub { margin: -8px 0 12px; }

/* пояснение сразу под заголовком */
button.link.danger-link { color: var(--danger); }
.check-line { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; }
.card-head .search { position: relative; min-width: 220px; }
#tpl-type { max-width: 320px; }
#new-group-type { max-width: 260px; }
#nom-groups-table col.c-name { width: 24%; }
#nom-groups-table col.c-type { width: 190px; }
#nom-groups-table col.c-num { width: 76px; }
#nom-groups-table col.c-acts { width: 40px; }
.mt-sm { margin-top: 6px; }
th.c-check { width: 32px; }
.empty-note { padding: 8px 0; color: var(--muted); font-size: var(--t-cap); }
td.empty-note { text-align: center; padding: 10px; }
.file-list .empty-note { grid-column: 1 / -1; }
.files-side .empty-note { padding: 4px 12px; }
tr.total-row > td { background: var(--surface-2); font-weight: 600; }
.hint.flat { margin: 0 0 10px; }
.card-bleed { margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)); }

/* список во всю ширину блока */
.attn-title { font-weight: 600; }
.attn-item.no-ic { grid-template-columns: 1fr auto; }
.acc-line.total { border-top: 2px solid var(--line); }
.kpi-strip .v.warn { color: var(--warning); }
.cons-buy th.c-st { width: 70px; }
.cons-buy-bar { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.fun-alert.static { cursor: default; }
.stage-info { margin: 4px 0 10px; }
.form-grid.proc-form { grid-template-columns: 2fr 1fr 1fr; }
.days-in { width: 70px; }
.branch-in { width: 110px; }
.emp-add { max-width: 640px; }
.docs-lines th.c-qty { width: 80px; }
.docs-lines th.c-sum { width: 130px; }
.docs-add-line { margin: 6px 0 10px; }
.f1c-hint.flat { padding: 8px 0 0; }
.f1c-hint.flat-top { padding: 0 0 8px; }
#prices-body th.c-photo { width: 84px; }
#prices-body th.c-kind { width: 150px; }
#prices-body th.c-color { width: 52px; }
#prices-body th.c-type { width: 70px; }
#prices-body th.c-del { width: 30px; }
#prices-body .mat-del { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: flex; }
#prices-body .mat-del:hover { color: var(--danger); }
#prices-body .mat-color { width: 36px; height: 24px; padding: 0 2px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; }
#prices-body .card-head .mat-add { margin-left: auto; }
.mat-add-table td:first-child { width: 120px; color: var(--text-2); }
.mat-add-table input:not([type=color]), .mat-add-table select { width: 100%; }
#mat-add-dialog .f1c-hint.err { color: var(--danger); padding-top: 4px; }
#mat-add-dialog .f1c-hint.err:empty { display: none; }
#prices-body th.c-price { width: 130px; }
.sup-h3 { margin: 18px 0 8px; font-size: 15px; }

/* ---------- вход в программу (templates/login.html), учётная запись в меню, окно «Пользователи» (admin.js) ---------- */
body.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-box { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line-hover); box-shadow: var(--shadow-lg); }
.login-fields { display: flex; flex-direction: column; gap: 10px; padding: var(--pad); }
.login-bases { display: flex; flex-direction: column; gap: 6px; padding: var(--pad); }
.login-bases .b1c { text-align: left; padding: 8px 12px; font-size: var(--t-text); }
.login-error { margin: 0 16px 12px; padding: 6px 10px; background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.login-box .f1c-actions a { color: var(--primary); }
.sidebar-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 18px 8px; font-size: var(--t-cap); }
.sidebar-account .acct-who { flex-basis: 100%; color: var(--text-2); font-weight: 600; }
.sidebar-account a, .sidebar-account button { color: var(--primary); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.sidebar-account a:hover, .sidebar-account button:hover { text-decoration: underline; }
.ui-dialog-form { display: flex; flex-direction: column; gap: 10px; padding: var(--pad); }
.users-dialog .t1c { margin-bottom: 10px; }
.users-form { margin-bottom: 10px; }
.users-form .f1c-check { flex-direction: row; align-self: end; padding-bottom: 4px; }
button.user-chip:disabled { cursor: default; opacity: 1; }
/* ---------- развилки: части заказа («вагоны») на дорожной карте и в карточке (crm.js) ---------- */
.rm-chip.split { border-style: dashed; background: var(--surface-2); }
.rm-chip.split span i { font-style: normal; color: var(--accent-text); font-weight: 600; }
.rm-chip.wagon { border-left-width: 6px; border-left-style: double; }
.rm-chip.wagon b { color: var(--accent-text); }
.rm-chip.wagon.arrived { background: var(--success-soft); border-left-color: var(--success); }
.rm-ghost { position: fixed; z-index: 500; pointer-events: none; margin: 0; padding: 3px 6px; background: var(--surface);
  border: 1px solid var(--line-hover); border-left: 6px double var(--primary); font-size: var(--t-cap); font-weight: 600; }
.rm-branch-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--grid); font-size: var(--t-cap);
  font-weight: 600; color: var(--label); background: var(--surface-2); }
.rm-track.rm-branch { padding-top: 0; background: var(--surface-2); border-top: 1px dashed var(--grid); }
.rm-branch .rm-node-row::before, .rm-branch .rm-node-row::after { opacity: .7; }
/* стрелка: путь ветки отходит от стадии перед развилкой и возвращается к общей стадии после неё */
.rm-st.sw-out .rm-node-row::after { content: ''; position: absolute; left: 50%; right: -5px; top: 13px; height: 4px; background: var(--c); opacity: .7; }
.rm-st.sw-out .rm-node-row::before { content: ''; position: absolute; left: calc(50% - 2px); width: 4px; top: -8px; height: 25px; background: var(--c); opacity: .7; }
.rm-st.sw-in .rm-node-row::before { content: ''; position: absolute; left: -5px; right: 50%; top: 13px; height: 4px; background: var(--c); opacity: .7; }
.rm-st.sw-in .rm-node-row::after { content: ''; position: absolute; left: calc(50% - 2px); width: 4px; top: -8px; height: 25px; background: var(--c); opacity: .7; }
.stage-fork { display: inline-flex; flex-direction: column; gap: 3px; padding: 3px 6px; border: 1px dashed var(--line-hover);
  border-radius: var(--radius-sm); vertical-align: middle; }
.stage-branch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.stage-branch-name { font-size: var(--t-cap); font-weight: 600; color: var(--accent-text); min-width: 70px; }
.parts-box { margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.parts-box > .sub { padding: 6px 10px; border-bottom: 1px solid var(--grid); }
.part-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--grid); }
.part-row:last-child { border-bottom: 0; }
.part-row b { min-width: 90px; color: var(--accent-text); }
.part-row.arrived { background: var(--success-soft); }

/* склад (static/js/stock.js): остатки, нужно купить, поступления, выдача; столбец «Склад» в спецификации заказа */
.stock-table td.acts { white-space: nowrap; }
.stock-subtitle { font-size: var(--t-text); padding: 6px 12px; }
.stock-moves-scroll { margin-top: 8px; margin-bottom: 8px; }
dialog.stock-dialog { width: min(1040px, 96vw); }
/* заявка поставщику: окно «Отправить» — выбор способа и текст */
dialog#request-send { width: min(640px, 96vw); }
.req-via { display: flex; flex-direction: column; border: 1px solid var(--line); margin-bottom: 8px; }
.req-via-row { display: grid; grid-template-columns: 22px 150px 1fr; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer; }
.req-via-row + .req-via-row { border-top: 1px solid var(--line); }
.req-via-row:has(input:checked) { background: var(--primary-soft); }
.req-via-row.off { cursor: default; }
.req-via-row.off .o1 { color: var(--muted); }
.req-answer { white-space: pre-line; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); background: var(--surface-2); }
.req-text { width: 100%; box-sizing: border-box; height: 240px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.4;
  border: 1px solid var(--line-strong); padding: 6px 8px; background: var(--surface); color: var(--text); }
.rcp-lines select { font: inherit; font-size: 13px; width: 100%; border: 1px solid transparent; background: transparent; padding: 3px 2px; }
.rcp-lines select:focus { border-color: var(--line-strong); }
.rcp-lines .c-qty { width: 80px; }
.rcp-lines .c-sum { width: 100px; }
.st-warn { color: var(--warning); font-weight: 600; }
.st-accent { color: var(--accent-text); font-weight: 600; }
.st-muted { color: var(--muted); }
.t1c tr.muted-row td { color: var(--muted); }
.f1c-hint.flat { padding: 8px 0 0; }
.spec-table col.c-stock { width: 150px; }
.spec-table.with-stock { min-width: 960px; }
.spec-stock-cell { line-height: 1.3; }
.spec-stock-cell .sub { font-size: var(--t-cap); }
.spec-ordered { display: inline-flex; margin-left: 6px; font-size: var(--t-cap); color: var(--text-2); }
.spec-stock-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }

/* ---------- таблица + карточка выбранной строки справа (side-main) — общий вид разделов ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.split-main { min-width: 0; }
.split-main .t1c th { overflow: hidden; text-overflow: ellipsis; }
/* «в два столбика» (columns.js twoColTable): две таблицы рядом, у каждой своя прокрутка */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; width: 100%; }
.two-col > .t1c-scroll { margin: 0; }
.two-col > .t1c-scroll table { width: 100%; }
.two-col > .t1c-scroll + .t1c-scroll { border-left: 2px solid var(--line-strong); }
tr.group-row.cont .z2::after { content: " (продолжение)"; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
/* тянучки: ручка на правой границе заголовка столбца */
table[data-cols] th { position: sticky; }
.col-grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 0; width: 2px; }
.col-grip:hover::after, .col-grip.active::after { background: var(--primary); }
body.col-dragging, body.col-dragging * { cursor: col-resize !important; user-select: none; }
.stock-table col.c-n, .t1c col.c-n { width: 34px; }
.stock-table col.c-unit { width: 44px; }
.stock-table col.c-q { width: 64px; }
[data-cols^="stock-remnants"] col.c-size { width: 100px; }
[data-cols^="stock-remnants"] col.c-q { width: 56px; }
[data-cols^="stock-remnants"] col.c-st { width: 110px; }   /* длинный заголовок столбца не даёт прокрутку вбок */
.split-card { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.split-card .f1c-title { font-family: var(--font); font-size: var(--t-title); font-weight: 700; }   /* З1 */
.split-body { padding: var(--pad-sm); overflow-y: auto; }
.split-body .t1c { margin-bottom: 4px; }
.split-sub { margin: 10px 0 4px; font-family: var(--font); font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.split-empty { padding: 24px 14px; color: var(--muted); text-align: center; }
.split-card .f1c-actions { flex-wrap: wrap; }
.card-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 6px 0 0; }
.card-kv dt { font-family: var(--font); color: var(--muted); font-size: var(--t-cap); padding-top: 3px; }   /* О2 */
.card-kv dd { margin: 0; font-family: var(--font); font-size: var(--t-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }   /* О1 */
.split-body .t1c td { font-family: var(--font); font-size: var(--t-text); }
.split-body > .o2 { margin-bottom: 4px; }
.rec-card-progress { margin: 8px 0 2px; }
.cons-add select { max-width: 200px; }
/* экономика (static/js/economics.js): графики на SVG */
.eco-kpi { margin-bottom: 12px; }
.eco-kpi .o2 { margin-left: 6px; }
.viz-panel { padding-bottom: 4px; }
.viz { display: block; margin: 4px 16px 8px; font-family: var(--font); }
.viz-grid { stroke: var(--grid); stroke-width: 1; }
.viz-axis { fill: var(--muted); font-size: var(--t-cap); }
.viz-label { fill: var(--text-2); font-size: var(--t-cap); }
.viz-label.strong { fill: var(--text); font-weight: 700; }
.viz-line { stroke-width: 2; stroke-linecap: round; fill: none; }
.viz-now { stroke: var(--text-2); stroke-width: 1; }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-loss { fill: var(--danger); opacity: .06; }
.viz-gain { fill: var(--viz-1); opacity: .10; }
.viz-hit { fill: transparent; }
.viz-hit:hover { fill: var(--text); opacity: .04; }
.viz-bar:hover { opacity: .85; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px 0; font-size: var(--t-cap); color: var(--text-2); }
.viz-legend i, .viz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.viz-tip { position: fixed; z-index: 1000; display: none; pointer-events: none; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px 10px;
  font-family: var(--font); font-size: var(--t-cap); line-height: 1.5; font-variant-numeric: tabular-nums; }
.hbars { padding: 10px 16px 6px; display: flex; flex-direction: column; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(200px, 38%) minmax(0, 1fr) 110px; gap: 10px; align-items: center; }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; }
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hbar-val { text-align: right; color: var(--text-2); }
.hbar:hover .hbar-fill { opacity: .85; }
.eco-cats select { font: inherit; font-size: 13px; padding: 2px 4px; }
.eco-rows col.c-l { width: 170px; }
.eco-rows td:first-child { white-space: nowrap; }
.eco-orders col.c-t { width: 110px; }
.eco-orders col.c-mo { width: 80px; }
.eco-orders col.c-m { width: 100px; }
.eco-orders col.c-p { width: 50px; }
.eco-orders td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* зарплата (static/js/payroll.js) */
.pay-month { display: flex; gap: 4px; align-items: center; }
.pay-month input { flex: 1; min-width: 0; padding: 3px 4px; }
.pay-sheet col.c-h { width: 70px; }
.pay-sheet col.c-m, [data-cols^="pay-"] col.c-m { width: 100px; }
[data-cols^="pay-"] col.c-d, [data-cols="order-labor"] col.c-d { width: 92px; }
[data-cols="order-labor"] col.c-k { width: 120px; }
[data-cols="order-labor"] col.c-m { width: 110px; }
[data-cols="order-labor"] col.c-x { width: 36px; }
[data-cols^="pay-"] col.c-k { width: 120px; }
[data-cols^="pay-"] col.c-o { width: 150px; }
.pay-sheet tfoot td { border-top: 1px solid var(--line); }
.pay-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: end; margin: 4px 0 6px; }
.pay-terms label { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-cap); color: var(--muted); }
.pay-terms input, .pay-terms select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 0; }
.pay-terms .b1c { justify-self: start; }
/* свёрнутые окна (ui.js renderWinDock): ярлычки внизу экрана */
#win-dock { position: fixed; right: 16px; bottom: 12px; z-index: 75; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 32px); }
.win-chip { display: inline-flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
.win-chip button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--text); cursor: pointer; padding: 6px 10px; }
.win-chip-open { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-chip-open:hover { background: var(--hover); }
.win-chip-x { color: var(--muted); border-left: 1px solid var(--line) !important; padding: 6px 8px !important; }
.win-chip-x:hover { color: var(--text); background: var(--hover); }

/* задания заказа: кто поручил */
.task-from { white-space: nowrap; }
.task-add-from { margin: 2px 0 6px; }
.task-add select { width: 170px; flex: none; }

/* покраска фасадов по заказу (paint.js): детали клиента, цена, заявка на краску */
.paint-bar label.b1c { display: inline-flex; align-items: center; }
.paint-parts col.c-x { width: 44px; }
.paint-parts col.c-n { width: 70px; }
.paint-parts col.c-k { width: 120px; }
.paint-parts col.c-m { width: 96px; }
.paint-parts select { font: inherit; font-size: 13px; max-width: 100%; }
.paint-in { width: 64px; text-align: center; font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 4px; }
.paint-in.qty { width: 44px; }
.paint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.paint-colors { margin-top: 12px; }
.paint-colors .z2 { margin-bottom: 6px; }
.paint-price-table input { width: 80px; text-align: center; font: inherit; }
dialog#paint-prices-dialog { width: min(760px, 96vw); }
.drawer-tabs .tab-add { color: var(--muted); }
/* малярные работы: таблица расценок (операция → лицо / оборот × типы фасадов) */
.paint-panel { max-width: 720px; }
.paint-rate { width: 90px; text-align: center; font: inherit; border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 4px; }
.paint-rate.saved { border-color: var(--success); }
.paint-panel thead .link, .paint-panel .group-row .link { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.paint-panel .f1c-addrow { flex-wrap: wrap; }
.paint-panel .f1c-addrow input { min-width: 200px; }
.paint-x { display: inline; font-size: 15px; margin-left: 2px; opacity: .5; }
.paint-x:hover { opacity: 1; }
.paint-hidden { padding: 0 8px 8px; }
.ac-ops { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; color: var(--text); }
.wt-rate { flex: 0 0 110px; }
/* табель: сетка месяца */
.ts-scroll { overflow-x: auto; }
.ts-table { table-layout: fixed; width: auto; }
.ts-table th.ts-name, .ts-table td.ts-name { width: 150px; position: sticky; left: 0; z-index: 2; background: var(--surface); }
.ts-table th.ts-name { background: var(--surface-3); z-index: 3; }
.ts-table th.ts-day { width: 34px; padding: 2px 0; text-align: center; font-size: var(--t-cap); line-height: 1.1; }
.ts-table th.ts-day div { color: var(--muted); font-size: 10px; }
.ts-table th.we, .ts-table td.we { background: var(--surface-2); }
.ts-table th.td { box-shadow: inset 0 -2px 0 var(--primary); }
.ts-table td.ts-cell { padding: 0; }
.ts-table td.ts-cell input { width: 100%; box-sizing: border-box; border: 0; background: transparent; text-align: center; font: inherit;
  font-size: 13px; padding: 4px 0; }
.ts-table td.ts-cell input:focus { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--surface); }
.ts-table td.ts-cell input.bad { color: var(--danger); }
.ts-table td.code-Б { background: var(--warning-soft); }
.ts-table td.code-О { background: var(--primary-soft); }
.ts-table td.code-Н { background: var(--danger-soft); }
.ts-table td.ts-tot { width: 70px; }
.ts-table th.hol { color: var(--danger); }
.ts-table th.sh div::after { content: "·"; color: var(--warning); font-weight: 700; margin-left: 1px; }
/* производственный календарь (payroll.js renderPayCalendar) */
.cal-head { border-top: 0; border-bottom: 1px solid var(--line); }
.cal-src.warn { color: var(--warning); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 12px 0; }
.cal-sw { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border: 1px solid var(--line); }
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; padding: 12px; }
.cal-mname { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: var(--t-cap); color: var(--muted); text-align: center; }
.cal-day { font-family: var(--font); font-size: 13px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 3px 0;
  cursor: pointer; background: var(--surface); color: var(--text); }
.cal-day:hover { border-color: var(--line-hover); }
.k-work { background: var(--surface); }
.k-short { background: var(--warning-soft); box-shadow: inset 0 -2px 0 var(--warning); }
.k-off { background: var(--surface-3); color: var(--text-2); }
.k-holiday { background: var(--danger-soft); color: var(--danger); }
.cal-day.manual, .cal-sw.manual { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-day.td { text-decoration: underline; text-underline-offset: 2px; }
dialog.cal-dialog { width: min(560px, 96vw); }
/* окно «Группы расходников» (consumables.js openConsGroups) */
dialog.cg-dialog { width: min(860px, 96vw); }
.cg-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; padding: var(--pad-sm); min-height: 0; }
.cg-groups { display: flex; flex-direction: column; padding: 0 0 8px; }
.cg-groups .split-sub { margin: 8px 12px 4px; }
.cg-glist { display: flex; flex-direction: column; border-top: 1px solid var(--grid); max-height: 52vh; overflow-y: auto; }
.cg-g { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 0; border-bottom: 1px solid var(--grid); background: none;
  font-family: var(--font); font-size: var(--t-text); color: var(--text); text-align: left; cursor: pointer; }
.cg-g span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-g b { font-weight: 400; color: var(--muted); font-size: var(--t-cap); }
.cg-g:hover { background: var(--hover); }
.cg-g.active { background: var(--current); color: var(--accent-text); box-shadow: inset 3px 0 0 var(--primary); }
.cg-gacts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.cg-items { margin: 0; max-height: 60vh; }
.cg-items .cg-gcol { width: 200px; }
.cg-items select { width: 100%; font: inherit; font-size: 13px; border: 1px solid transparent; background: transparent; }
.cg-items select:focus, .cg-items select:hover { border-color: var(--line-strong); }
.cons-add #cons-new-unit { max-width: 90px; }
.split-card .f1c-title .o2 { margin-left: 6px; }
.trash-table col.c-date { width: 140px; }
.trash-table col.c-kind { width: 140px; }
.trash-table col.c-sum { width: 110px; }
.t1c-audit .aud-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.acc-table col.c-kind { width: 130px; }
.acc-table col.c-bal { width: 140px; }
.acc-table tfoot td { font-weight: 400; border-top: 1px solid var(--line); }
.sup-table col.c-sum { width: 120px; }
.sup-table col.c-due { width: 100px; }
.sup-from-cp { display: flex; flex-direction: column; gap: 6px; }
.doc-table col.c-cp { width: 160px; }
.doc-table col.c-due { width: 92px; }
.doc-table col.c-st { width: 110px; }
.doc-card-status select { width: 100%; }
.tx-table col.c-kind { width: 36px; }
.tx-table col.c-acc { width: 130px; }
.tx-table col.c-amt { width: 120px; }
.tx-table td.tx-kind-cell { text-align: center; vertical-align: middle; }
.tx-table .tx-ic { display: inline-grid; }
.tx-table .tx-amt { font-weight: 400; }
.rec-sum { margin-bottom: 10px; }

/* ---------- 4 стиля текста (CLAUDE.md «Стили текста»): З1 заголовок, З2 раздел, О1 основной, О2 подпись ---------- */
.z1 { font-family: var(--font); font-size: var(--t-title); font-weight: 700; color: var(--text); }
.z2 { font-family: var(--font); font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.o1 { font-family: var(--font); font-size: var(--t-text); font-weight: 400; color: var(--text); }
.o2 { font-family: var(--font); font-size: var(--t-cap); font-weight: 400; color: var(--muted); }
tr.group-row td:has(> .z2) { font-weight: 400; }
.ret-pieces select { font: inherit; font-size: 13px; width: 100%; border: 1px solid transparent; background: transparent; padding: 3px 2px; }
.ret-pieces .c-qty { width: 100px; }
.rem-add { flex-wrap: wrap; }
.rem-add select { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 0; height: 26px; max-width: 280px; }
.rem-add input[type=number] { flex: 0 0 110px; }

.pannable { cursor: grab; }
.pannable.panning { cursor: grabbing; user-select: none; }
.pannable.panning * { cursor: grabbing !important; }
.rm-st.merge .rm-node { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); }
.merge-in { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }

.rm-line.rm-shared { border-top: 2px solid var(--line-hover); background: var(--surface-2); }
.rm-line.rm-shared .rm-label b { color: var(--accent-text); }
.rm-shared-ref { border: 1px dashed var(--line-hover); background: var(--surface); color: var(--accent-text); font: inherit;
  font-size: var(--t-cap); padding: 1px 6px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.rm-shared-ref:hover { background: var(--hover); }
/* запасной путь: станции пути со сдвигом на полстолбца, переходы — наклонные линии (svg.rm-links под метками) */
.rm-track.rm-siding { padding-top: 4px; border-top: 1px dashed var(--grid); }
.rm-siding .rm-node-row::before, .rm-siding .rm-node-row::after { opacity: .7; }
.rm-siding .rm-node { width: 20px; height: 20px; font-size: 11px; }
.rm-links { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.rm-links line { stroke-width: 4; stroke-linecap: round; opacity: .7; }
.rm-siding { row-gap: 0; }
.rm-bh { min-width: 0; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-cap); color: var(--muted); }
.rm-bh b { color: var(--accent-text); font-weight: 600; }
.rm-bh .link { font-size: var(--t-cap); }
.rm-siding .rm-name { min-height: 0; }
.rm-arrived .rm-name { color: var(--success); }
.rm-branch-label .link { font-size: var(--t-cap); margin-left: 4px; }
.rm-sect .link { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 8px; }
.rm-sect { padding: 8px 12px; border-top: 2px solid var(--line-hover); background: var(--surface-2); color: var(--label);
  font-size: var(--t-sect); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; position: sticky; left: 0; }
/* кнопка «дерево заказа» на метке — видна при наведении */
.rm-tree { position: absolute; top: 1px; right: 1px; z-index: 1; display: none; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--accent-text); font-size: 11px; line-height: 1; cursor: pointer; }
.rm-chip:hover .rm-tree { display: block; }
.rm-tree:hover { background: var(--hover); }
/* карточка заказа: отметка развилки в дороге */
.stage-fork-mark { flex: 0 0 auto; align-self: center; border: 1px dashed var(--line-hover); background: var(--surface-2); color: var(--accent-text);
  border-radius: var(--radius); padding: 3px 8px; font: inherit; font-size: var(--t-cap); font-weight: 600; cursor: pointer; white-space: nowrap; }
.stage-fork-mark:hover { background: var(--hover); }
/* дерево заказа — схема «дерево решений»: узлы-прямоугольники по сетке, линии — svg.tlinks под ними */
.tscroll { overflow: auto; padding: 4px 0 10px; }
.tgrid { position: relative; display: grid; justify-content: center; column-gap: 26px; row-gap: 30px; padding: 6px; min-width: min-content; }
.tlinks { position: absolute; left: 0; top: 0; pointer-events: none; }
.tlinks line { stroke: var(--line-strong); stroke-width: 2; }
.tlinks line.done { stroke: var(--success); }
.tn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 7px 10px;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(15, 30, 60, .08); }
.tn b { font-weight: 600; line-height: 1.2; }
.tn span { font-size: var(--t-cap); color: var(--muted); }
.tn i { font-style: normal; font-size: var(--t-cap); color: var(--accent-text); font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.tn .tn-end { color: var(--accent-text); }
.tn:hover { box-shadow: 0 2px 8px rgba(15, 30, 60, .16); }
.tn.root { background: var(--warning-soft); border-color: var(--warning); cursor: default; }
.tn.done { background: var(--success-soft); border-color: var(--success-line); }
.tn.cur { background: var(--warning-soft); border-color: var(--primary); }
.tn.fut { color: var(--text-2); border-style: dashed; }
.tn.leaf.fut { background: var(--surface-2); }
.tn.late { border-color: var(--danger); }
.tn.sel { outline: 3px solid var(--primary); outline-offset: 2px; }
.tlayout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }   /* узкое окно — схема под панелью */
.tside { flex: 0 0 360px; position: sticky; top: 0; }
.tmain { flex: 1 1 420px; min-width: 0; }
.tside .tpanel:first-child { margin-top: 0; }
/* задание в узкой панели: отметка, название, × — в строку; исполнитель и срок — второй строкой */
.tside .task-row { grid-template-columns: 22px minmax(0, 1fr) auto 26px; row-gap: 4px; }
.tside .task-row > select { grid-row: 2; grid-column: 2; }
.tside .task-row > input[type=date] { grid-row: 2; grid-column: 3 / span 2; }
.tside .task-row > .danger { grid-row: 1; grid-column: 4; }
.tside .task-row.future { grid-template-columns: 22px minmax(0, 1fr) auto; }
/* управление на схеме: узел + выпадающий блок; перетаскивание */
.tcell { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.tcell.open { z-index: 6; }
.tcell > .tn { flex: 1 1 auto; user-select: none; }
.tn[draggable=true] { cursor: grab; }
.tn.over { outline: 3px dashed var(--primary); outline-offset: 2px; }
.tn .tn-grip { font-style: normal; font-size: var(--t-cap); color: var(--primary); font-weight: 600; }
.tdrop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 280px; z-index: 6;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(15, 30, 60, .22); text-align: left; }
.tdrop-head { display: flex; align-items: baseline; gap: 6px; padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid var(--grid); }
.tdrop-head .o2 { flex: 1 1 auto; }
.tdrop-x { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.tdrop-x:hover { color: var(--text); }
.tlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; font-size: var(--t-cap); }
.tl { padding: 1px 8px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); }
.tl.done { background: var(--success-soft); border-color: var(--success-line); }
.tl.cur { background: var(--warning-soft); border-color: var(--primary); }
.tl.fut { border-style: dashed; }
.drawer-tabs button.tab-tree { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 5px auto; align-self: center; padding: 5px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: linear-gradient(var(--surface), var(--surface-2)); color: var(--text-2); font-weight: 500; }
.drawer-tabs button.tab-tree:hover { background: var(--surface-3); border-color: var(--line-hover); }
.tmain { cursor: grab; }
.win-title svg.i.fir { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.rm-tree svg.i.fir { width: 13px; height: 13px; }
.tpanning, .tpanning * { cursor: grabbing !important; user-select: none; }
.tdrop-t { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; font-weight: normal; color: var(--text); flex-direction: row; }
.tdrop-t span { flex: 1 1 auto; min-width: 0; }
.tdrop-t small { color: var(--muted); font-size: var(--t-cap); }
.tdrop-t.done span { text-decoration: line-through; color: var(--muted); }
.tdrop-t.late span, .tdrop-t.late small { color: var(--danger); }
.tdrop-t.lack span, .tdrop-t.fut span { color: var(--muted); font-style: italic; }
.tdrop-add { width: 100%; margin-top: 6px; }
.tdrop-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tdrop-form { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--grid); }
.tpal-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tpal-chip { padding: 3px 8px; border: 1px dashed var(--line-hover); border-radius: var(--radius); background: var(--surface-2);
  color: var(--accent-text); font-size: var(--t-cap); font-weight: 600; cursor: grab; user-select: none; }
.tpal-chip:hover { background: var(--hover); }
.tmenu { position: fixed; z-index: 600; display: flex; flex-direction: column; min-width: 260px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 30, 60, .25); padding: 4px; }
.tmenu button { font: inherit; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; }
.tmenu button:hover { background: var(--hover); }
.tmenu button.cancel { color: var(--muted); }
.tpanel { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px 8px; }
.tpanel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--grid); }
/* редактор: ветка (точка отцепления) — во всю ширину между стадиями */
.proc-stages .proc-fork { grid-column: 1 / -1; padding: 8px 16px; background: var(--surface-2); border-style: dashed; }
.proc-fork .proc-stage-head .fun-dot { color: var(--accent-text); }

/* =====================================================================
   Мобильный вид: три границы — 1200 / 900 / 700. Узкие перекрывают широкие.
   ===================================================================== */
/* средний экран (до 1200px): одна колонка вместо двух, лишние столбцы скрыты */
@media (max-width: 1200px) {
  .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-card { position: static; max-height: none; }
}

/* планшет (до 900px): меню — значками, боковые колонки фильтров — над списком, окна во весь экран */
@media (max-width: 900px) {
  .proc-stages { grid-template-columns: 1fr; }
  .drawer.win.open { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; min-width: 0; resize: none;
    border-radius: 0; }
  .win-bar { cursor: default; }
  :root { --g-label: 210px; }
  .g-side { display: none; }
  .g-thumb { width: 38px; height: 38px; font-size: 13px; }
  .g-label { gap: 8px; padding: 6px 8px; }
  .od-top { grid-template-columns: 1fr; grid-template-areas: "client" "jump" "cover" "work" "money"; grid-template-rows: auto; }
  .od-jump { flex-direction: row; }
  .od-jump button { flex: 1; flex-direction: row; justify-content: center; }
  .od-cover { min-height: 240px; }
  .od-g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-g-client { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-g-client label:last-child { grid-column: 1 / -1; }
  .od-money { flex-wrap: wrap; }
  .side-layout { grid-template-columns: 1fr; }
  .side-panel { position: static; max-height: none; }
  .files-layout { grid-template-columns: 1fr; }
  .sidebar { width: 68px; }
  .brand span, .nav-title, nav button .label, .sidebar-foot, .sidebar-user, .sidebar-account { display: none; }
  .nav-group { padding: 4px 8px; }
  nav button { justify-content: center; position: relative; }
  .nav-count:not(:empty) { position: absolute; top: 2px; right: 4px; padding: 0 5px; font-size: 10px; line-height: 15px; }
  main { padding: 20px 18px 50px; }
}

/* телефон (до 700px): меню — строкой сверху, формы в одну колонку */
@media (max-width: 700px) {
  .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: sticky; flex-direction: row; overflow-x: auto; z-index: 40; border-right: 0;
    border-bottom: 1px solid var(--line); }
  .nav-group + .nav-group { border-top: 0; border-left: 1px solid var(--line); }
  .brand, .sidebar-foot { display: none; }
  .nav-group { display: flex; padding: 6px 4px; }
  nav button { width: auto; }
  .form-grid { grid-template-columns: 1fr !important; }
  main { padding: 16px 12px 50px; }
  .task-row { grid-template-columns: 24px 1fr 30px; }
  .task-row > select, .task-row > input[type=date], .task-row > span { grid-column: 2; }
}