/* Оформление портала — ОДНО место для цветов, шрифта, скруглений и теней.
Все страницы берут значения отсюда через var(--…): поменять цвет кнопок, меню или фона — значит поменять его здесь.
Подключается первым на каждой странице (partials/head.html и самостоятельные страницы: заказы, главная, модели, клиенты,
страница курьера, страница QR). Цвета статусов заказа (чипы в таблице) — свои, они задаются в routes/orders.py. */
/* Оформление в стиле Apple (macOS), действует с 11.10.2026: синий системный цвет, светлое полупрозрачное меню как в Finder,
шрифт San Francisco. Прежнее (оранжевое) оформление убрано из файла 13.10.2026 — оно лежало выше и полностью перекрывалось
значениями ниже; вернуть его можно только из истории изменений. */
:root {
--accent: #007AFF;
--accent-dark: #0062CC;
--accent-soft: #EAF3FF;
--accent-tint: #D6E8FF;
--accent-rgb: 0, 122, 255;
--brand: var(--accent); --brand-dark: var(--accent-dark); --brand-soft: var(--accent-soft);
--ink: #1D1D1F;
--ink-soft: #3A3A3C;
--muted: #6E6E73;
--muted-2: #8E8E93;
--muted-3: #AEAEB2;
--page-bg: #F5F5F7; --bg: var(--page-bg);
--card: #FFFFFF;
--surface-2: #F5F5F7;
--surface-3: #ECECEF;
--border: #E5E5EA;
--border-soft: #F0F0F2;
--border-field: #D1D1D6;
--sidebar-bg: rgba(236, 236, 240, .82);
--sidebar-text: #1D1D1F;
--sidebar-muted: #8E8E93;
--sidebar-hover: rgba(0, 0, 0, .06);
--sidebar-line: rgba(0, 0, 0, .08);
--sidebar-strong: #1D1D1F;
--sidebar-avatar: #D1D1D6;
--sidebar-active-bg: var(--accent);
--sidebar-active-text: #FFFFFF;
--sidebar-blur: saturate(180%) blur(20px);
--green: #34C759; --ok: #248A3D; --ok-soft: #E3F7E8;
--red: #FF3B30; --bad: #D70015; --bad-soft: #FFE5E3;
--warn: #C93400; --warn-soft: #FFF1D6;
--blue: #007AFF; --info: #5856D6; --info-soft: #EEEDFB;
--gray: #8E8E93;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
--radius: 12px;
--radius-sm: 8px;
--shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
--shadow-pop: 0 24px 60px rgba(0, 0, 0, .18);
}
/* меню Finder: тонкая граница справа вместо тёмного фона */
.sidebar, #sidebar { border-right: 1px solid var(--sidebar-line); }
.edge-toggle { border-color: var(--card); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
/* кнопки как в macOS: невысокие, белые с тонкой рамкой, обычный шрифт; цветом залито только выбранное */
:root {
--btn-h: 28px; --btn-fs: 12.5px; --btn-fw: 600; --btn-radius: 8px; /* единый размер кнопок (15.10.2026, было 24 / 12 / 500 / 6) */
--action-bg: #FFFFFF; --action-text: var(--ink); --action-border: rgba(0, 0, 0, .14);
--action-shadow: 0 .5px 1px rgba(0, 0, 0, .10);
--action-hover-bg: #F2F2F4; --action-hover-text: var(--ink);
--action-badge-bg: var(--accent); --action-badge-text: #FFFFFF;
}
/* формы как в «Системных настройках» macOS: карточки без жёсткой рамки с тонкой тенью, спокойные подписи, значки разделов в фирменном
синем, невысокие поля с тонкой рамкой и синим кольцом фокуса, подзаголовки без заглавных букв */
:root {
--form-card-radius: 12px;
--form-card-border: rgba(0, 0, 0, .06);
--form-card-shadow: 0 1px 2px rgba(0, 0, 0, .04);
--form-title-fw: 600;
--form-icon-bg: rgba(var(--accent-rgb), .12);
--form-icon-text: var(--accent);
--label-fw: 500;
--subhead-fs: 12px; --subhead-fw: 600; --subhead-transform: none; --subhead-spacing: 0;
--field-pad: 6px 10px;
--field-radius: 7px;
--field-shadow: 0 .5px 1px rgba(0, 0, 0, .05);
--field-focus-ring: 0 0 0 3.5px rgba(var(--accent-rgb), .28);
}
:root[data-theme="dark"] { --form-card-border: var(--border); --form-card-shadow: none; --field-shadow: none; }
/* таблицы как в Numbers: светло-серая шапка, тонкие светлые линии, едва заметное чередование строк, San Francisco, выделение синим */
:root {
--table-head-bg: #93C47D; --table-head-text: #000000; --table-head-weight: 700; /* зелёная шапка — как привыкли (решение владельца) */
--table-line: #D0D0D8; --table-line-soft: #DDDDE3;
--table-col-line: #ADADB8; /* колонки отделены заметнее строк */
--table-head-line: #5E8F4B; /* чёткая линия под шапкой */
--table-row-alt: #F2F2F6; /* чередование строк заметнее */
--table-frame: #C7C7D0; /* рамка таблицы */
--table-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
--table-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
--table-select: #007AFF; --table-select-rgb: 0, 122, 255; --table-check-rgb: 0, 122, 255;
}
/* вкладки — сегментированный переключатель macOS: серая капсула, выбранный сегмент — белая плашка с тенью */
:root {
--seg-track: #E8E8ED; --seg-pad: 2px; --seg-gap: 0px; --seg-radius: 6px;
--seg-bg: transparent; --seg-text: var(--ink); --seg-border: transparent; --seg-hover: rgba(0, 0, 0, .04);
--seg-on-bg: #FFFFFF; --seg-on-text: var(--ink); --seg-on-border: transparent;
--seg-on-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .05); --seg-on-weight: 600;
}
/* статусы — мягкие капсулы */
:root { --chip-style: solid; --chip-soft-bg: .16; } /* статусы — яркая заливка цветом и белый текст (решение владельца: мягкие слишком тусклые) */
/* окна — «листы» macOS: лёгкое затемнение с размытием, крупное скругление, мягкая тень, плавное появление */
:root {
--overlay-bg: rgba(0, 0, 0, .2); --overlay-blur: blur(10px) saturate(140%);
--modal-radius: 16px; --modal-shadow: 0 30px 80px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08);
--modal-anim: ui-sheet-in .24s cubic-bezier(.2, .8, .2, 1);
}
/* ---------- Тумблер «вкл / выкл» (как в iOS / macOS) ----------
Галочка-настройка: — выглядит тумблером, работает как обычная галочка.
Кнопка «вкл / выкл» (например, «Автоопрос»): внутри кнопки (+ класс on), у кнопки — класс has-switch.
Галочки выбора строк в таблицах остаются галочками. */
:root { --switch-on: var(--green); --switch-off: #E3E4E8; }
input[type="checkbox"].switch, .switch-ui {
-webkit-appearance: none; appearance: none; position: relative; display: inline-block; flex: 0 0 38px;
width: 38px !important; height: 22px !important; margin: 0; border: none; border-radius: 999px;
background: var(--switch-off); cursor: pointer; vertical-align: middle; transition: background .2s ease;
}
input[type="checkbox"].switch::after, .switch-ui::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .2s cubic-bezier(.3, .7, .4, 1);
}
input[type="checkbox"].switch:checked, .switch-ui.on { background: var(--switch-on); }
input[type="checkbox"].switch:checked::after, .switch-ui.on::after { transform: translateX(16px); }
input[type="checkbox"].switch:disabled { opacity: .5; cursor: default; }
input[type="checkbox"].switch:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .5); outline-offset: 2px; }
.has-switch { display: inline-flex !important; align-items: center; gap: 8px; }
/* кнопка-переключатель («Авто режим») — как тумблер в карточке модели: без рамки и заливки, только тумблер и подпись */
button.has-switch { background: transparent !important; border-color: transparent !important; box-shadow: none !important;
color: var(--ink) !important; padding: 0 4px !important; font-weight: 500 !important; }
button.has-switch:hover { background: transparent !important; }
/* ---------- Сегменты (вкладки-фильтры): с внутри ---------- */
.seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--seg-gap); padding: var(--seg-pad); background: var(--seg-track);
border-radius: calc(var(--seg-radius) + var(--seg-pad)); }
.seg-item { box-sizing: border-box; height: var(--btn-h); display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
padding: 0 12px; border-radius: var(--seg-radius); border: 1px solid var(--seg-border); background: var(--seg-bg); color: var(--seg-text);
font-size: var(--btn-fs); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.seg-item:hover { background: var(--seg-hover); }
.seg-item.on, .seg-item.on:hover { background: var(--seg-on-bg); color: var(--seg-on-text); border-color: var(--seg-on-border);
box-shadow: var(--seg-on-shadow); font-weight: var(--seg-on-weight); }
/* ---------- Заголовки, поиск, уведомление, разделы меню ---------- */
.page-h1 { font-size: var(--title-size) !important; font-weight: var(--title-weight) !important; letter-spacing: var(--title-tracking) !important; }
.topbar-search { background: var(--search-bg) !important; border-color: var(--search-border) !important; border-radius: var(--search-radius) !important; }
.topbar-search button[type="submit"] { background: var(--search-btn-bg) !important; }
.topbar-search button[type="submit"] svg { stroke: var(--search-btn-icon); }
.ui-toast { position: fixed; z-index: 300; top: var(--toast-top); bottom: var(--toast-bottom); left: var(--toast-left); right: var(--toast-right);
transform: var(--toast-shift); background: var(--toast-bg); color: var(--toast-text); border: .5px solid var(--toast-border);
backdrop-filter: var(--toast-blur); -webkit-backdrop-filter: var(--toast-blur); box-shadow: var(--toast-shadow);
padding: 9px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 600; max-width: 90vw; text-align: center; }
.nav-sec { display: var(--nav-sec-display); padding: 10px 8px 3px; font-size: 10.5px; font-weight: 600; color: var(--sidebar-muted); white-space: nowrap; }
.sidebar.collapsed .nav-sec { display: none; }
.theme-toggle { display: var(--theme-toggle-display); align-items: center; gap: 8px; padding: 8px 6px 4px; font-size: 11.5px; color: var(--sidebar-text); cursor: pointer; }
.sidebar.collapsed .theme-toggle .lbl { display: none; }
.sidebar.collapsed .theme-toggle { justify-content: center; }
/* ---------- Выпадающие меню: список значений в ячейке (static/chip-select.js) и меню по правой кнопке в таблице ---------- */
.chipdd, .chipdd * { font-family: var(--menu-font); }
.chipdd { position: fixed; z-index: 400; background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: var(--menu-radius);
box-shadow: var(--menu-shadow); backdrop-filter: var(--menu-blur); -webkit-backdrop-filter: var(--menu-blur);
display: flex; flex-direction: column; gap: 0; box-sizing: border-box; width: max-content; }
.chipdd[hidden] { display: none; }
.chipdd-q { width: 100%; box-sizing: border-box; font: inherit;
outline: none; color: var(--ink); }
.chipdd-q:focus { border-color: var(--muted-2); }
.chipdd-list { overflow-y: auto; max-height: 260px; display: flex; flex-direction: column; gap: 0; }
.chipdd-item { flex: 0 0 auto; display: flex; align-items: center; cursor: pointer; }
.chipdd-item.active, .chipdd-item:hover { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.chipdd-chip { display: inline-block; max-width: 100%; padding: 0 9px; border-radius: 999px; font-size: var(--menu-fs); font-weight: 400; line-height: 16px;
background: var(--c, var(--surface-3)); color: var(--cf, var(--ink)); overflow-wrap: anywhere; }
.chipdd-chip.plain { background: var(--surface-3); color: var(--ink); }
.chipdd-chip mark { color: inherit; border-radius: 3px; padding: 0; }
.chipdd-chip.plain mark { background: var(--accent-tint); }
.chipdd-ok { flex: 0 0 auto; font-weight: 700; }
.chipdd-empty { padding: 4px 8px; font-size: 10.5px; color: var(--muted-2); }
/* ---------- Списки-справочники: кружок с инициалами и стрелка (directory.css — сами списки) ---------- */
.dir-ava { display: var(--dir-extra-display); flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
background: linear-gradient(180deg, #A9A9B2, #8C8C95); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.dir-chev { display: var(--dir-extra-display); flex: 0 0 auto; color: #C4C4CA; font-size: 22px; font-weight: 300; line-height: 1; text-decoration: none; margin-left: -4px; }
/* появление окна «листом», как в macOS (включается значением --modal-anim: ui-sheet-in …) */
@keyframes ui-sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
/* вкладки разделов «Настройки», «Выплаты», «Курьеры Lamoda» — тем же видом, что сегменты (у страниц свои классы) */
.set-tabs, .po-tabs, .cr-tabs { display: inline-flex !important; align-items: center; flex-wrap: wrap; gap: var(--seg-gap) !important; padding: var(--seg-pad);
background: var(--seg-track); border-radius: calc(var(--seg-radius) + var(--seg-pad)); }
.set-tabs > .set-tab, .po-tabs > .po-tab, .cr-tabs > .cr-tab {
height: var(--btn-h); display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: var(--seg-radius);
border: 1px solid var(--seg-border); background: var(--seg-bg); color: var(--seg-text); font: inherit; font-size: var(--btn-fs); font-weight: 600; cursor: pointer; }
.set-tabs > .set-tab:hover, .po-tabs > .po-tab:hover, .cr-tabs > .cr-tab:hover { background: var(--seg-hover); }
.set-tabs > .set-tab.active, .po-tabs > .po-tab.on, .cr-tabs > .cr-tab.on {
background: var(--seg-on-bg); color: var(--seg-on-text); border-color: var(--seg-on-border); box-shadow: var(--seg-on-shadow); font-weight: var(--seg-on-weight); }
.cr-tabs > .cr-tab .n { opacity: .7; }
/* ---------- Выбор вида счёта (static/invoice-choose.js: карточка клиента и таблица клиента) ----------
Сегменты (.seg) — что выставить; кнопки .ui-btn — общие размеры и вид кнопок (--btn-*, --action-*), главная — фирменным цветом. */
.inv-choose { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-align: left; }
.inv-choose-title { font-size: 13px; font-weight: 600; }
.inv-choose-note { font-size: 12px; line-height: 1.4; color: var(--muted); min-height: 2.8em; }
.inv-choose .seg { align-self: flex-start; }
.inv-choose .seg-item { font: inherit; font-size: var(--btn-fs); font-weight: 600; line-height: 1; cursor: pointer; }
.inv-choose .seg-item:focus-visible, .ui-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inv-choose-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 12px;
border-radius: var(--btn-radius); border: 1px solid var(--action-border); background: var(--action-bg); color: var(--action-text);
font: inherit; font-size: var(--btn-fs); font-weight: var(--btn-fw); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ui-btn:hover { background: var(--action-hover-bg); color: var(--action-hover-text); }
.ui-btn.primary, .ui-btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.ui-btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ui-btn:disabled { opacity: .4; cursor: default; }
/* ---------- Окна сообщений и подтверждений (static/ui-dialog.js) вместо системных окон браузера ----------
Небольшое окно по центру, как предупреждения macOS: заголовок, пояснение, кнопки справа; опасное действие — красная кнопка. */
.ui-dlg-back { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
background: var(--overlay-bg); backdrop-filter: var(--overlay-blur); -webkit-backdrop-filter: var(--overlay-blur); }
.ui-dlg { box-sizing: border-box; width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 20px 20px 16px;
background: var(--card); color: var(--ink); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); animation: var(--modal-anim);
font-family: var(--font); text-align: left; }
.ui-dlg-title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.1px; overflow-wrap: anywhere; }
.ui-dlg-text { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.ui-dlg-title + .ui-dlg-text { margin-top: 6px; }
.ui-dlg > .ui-dlg-text:first-child { margin-top: 0; color: var(--ink); }
.ui-dlg-input { box-sizing: border-box; width: 100%; margin-top: 12px; padding: var(--field-pad); border: 1px solid var(--border-field); border-radius: var(--field-radius);
box-shadow: var(--field-shadow); font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink); background: var(--card); }
.ui-dlg-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--field-focus-ring); }
.ui-dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ui-dlg-actions .ui-btn { height: calc(var(--btn-h) + 6px); min-width: 84px; padding: 0 14px; font-size: 13px; }
.ui-dlg-actions .ui-btn.primary { font-weight: 600; }
.ui-dlg.danger .ui-btn.primary, .ui-dlg.danger .ui-btn.primary:hover { background: var(--red); border-color: var(--red); }
.ui-dlg.danger .ui-btn.primary:hover { filter: brightness(.92); }
@media (max-width: 480px) { .ui-dlg-actions .ui-btn { flex: 1 1 0; height: auto; min-height: calc(var(--btn-h) + 6px); padding: 6px 10px; white-space: normal; line-height: 1.25; } }
/* «⚠️ Уже отправляли …» — жёлтая плашка под заголовком окна (ui-dialog.js, 21.10.2026) */
.ui-dlg-warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid rgba(255, 159, 10, .45); }
.ui-dlg-warn-head { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--warn); }
.ui-dlg-warn-list { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ui-dlg.repeat .ui-btn.primary, .ui-dlg.repeat .ui-btn.primary:hover { background: var(--warn); border-color: var(--warn); color: #fff; }
.ui-dlg.repeat .ui-btn.primary:hover { filter: brightness(.94); }
/* ---------- Подсказка значений под полем ввода (static/suggest.js, поле с data-suggest) ----------
Вид — то же выпадающее меню, что у списков в таблицах (--menu-*): в стиле Apple — полупрозрачное с размытием, выбранная строка фирменным цветом. */
.ui-suggest { position: fixed; z-index: 450; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: 264px; overflow-y: auto; padding: 4px;
background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
backdrop-filter: var(--menu-blur); -webkit-backdrop-filter: var(--menu-blur); font-family: var(--font); font-size: 13px; color: var(--ink); }
.ui-suggest[hidden] { display: none; }
.ui-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 10px; border-radius: 6px; line-height: 1.35;
white-space: nowrap; cursor: default; }
.ui-suggest-hint { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-suggest-item.active, .ui-suggest-item:hover { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.ui-suggest-item.active .ui-suggest-hint, .ui-suggest-item:hover .ui-suggest-hint { color: inherit; opacity: .8; }
/* ---------- Подсказка при наведении (static/tooltip.js вместо стандартной подсказки браузера) ---------- */
.ui-tip {
position: fixed; z-index: 10000; max-width: 340px; padding: 7px 10px; border-radius: 8px; pointer-events: none;
background: var(--tip-bg); color: var(--tip-text); border: .5px solid var(--tip-border);
backdrop-filter: var(--tip-blur); -webkit-backdrop-filter: var(--tip-blur);
font: 500 12px/1.45 var(--font); white-space: pre-line; text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease;
}
.ui-tip.on { opacity: 1; transform: none; }
/* ---------- Apple: правила и тёмная тема ---------- */
/* заголовки крупные, как в приложениях Apple */
:root { --title-size: 26px; --title-weight: 700; --title-tracking: -.5px; }
/* поиск — серое поле без рамки, как в Finder */
:root { --search-bg: rgba(118, 118, 128, .12); --search-border: transparent; --search-radius: 8px; --search-btn-bg: transparent; --search-btn-icon: #8E8E93; }
/* уведомление — баннер справа сверху, как уведомления macOS */
:root {
--toast-top: 16px; --toast-bottom: auto; --toast-left: auto; --toast-right: 16px; --toast-shift: none;
--toast-bg: rgba(250, 250, 252, .9); --toast-text: #1D1D1F; --toast-border: rgba(0, 0, 0, .1); --toast-blur: saturate(180%) blur(20px);
--toast-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
/* меню с разделами, как в Finder */
:root { --nav-sec-display: block; }
/* выпадающие списки — как кнопки-меню macOS: стрелки ⌃⌄ справа (кроме списков внутри таблиц) */
select:not([multiple]):not([size]):not(table select) {
-webkit-appearance: none; appearance: none; padding-right: 24px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5 7 4.5M1 7.5 4 10.5 7 7.5' fill='none' stroke='%238E8E93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 8px 12px;
}
/* тонкие полосы прокрутки */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; }
/* выпадающие меню как в macOS: полупрозрачная панель, цветная точка + текст, синяя подсветка строки, галочка слева */
:root {
--menu-bg: rgba(246, 246, 248, .9); --menu-border: rgba(0, 0, 0, .12); --menu-blur: saturate(180%) blur(20px); --menu-radius: 10px;
--menu-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04);
--menu-hover-bg: var(--accent); --menu-hover-text: #FFFFFF; --menu-font: var(--font); --menu-fs: 12.5px;
}
:root[data-theme="dark"] { --menu-bg: rgba(44, 44, 46, .92); --menu-border: rgba(255, 255, 255, .12); --menu-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.chipdd { padding: 5px; }
.chipdd-q { border: none; background: rgba(118, 118, 128, .12); border-radius: 6px; font-size: 12px; padding: 5px 9px; margin-bottom: 4px; }
.chipdd-item { position: relative; justify-content: flex-start; gap: 7px; min-height: 24px; padding: 2px 10px 2px 24px; border-radius: 5px; font-size: 12.5px; color: var(--ink); }
.chipdd-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.chipdd-chip, .chipdd-chip.plain { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: 12.5px; line-height: 18px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.chipdd-item { flex-wrap: nowrap; }
.chipdd-chip mark { background: rgba(var(--accent-rgb), .18); }
.chipdd-ok { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: inherit; font-size: 11px; }
.chipdd-clear { font-size: 12.5px; color: var(--muted-2); padding: 0; }
.chipdd-item.active .chipdd-clear, .chipdd-item:hover .chipdd-clear { color: #FFFFFF; }
.chipdd-item.active .chipdd-dot, .chipdd-item:hover .chipdd-dot { box-shadow: 0 0 0 1.5px #FFFFFF; }
.ot-menu-item { font-weight: 500; border-radius: 5px; }
/* списки клиентов и сотрудников — как «Контакты» macOS: кружок с инициалами, тонкие разделители с отступом, стрелка «›» */
:root { --dir-extra-display: inline-flex; }
.card:has(> .dir-list) { background: transparent; border: none; box-shadow: none; padding: 0; }
.dir-list { border: none; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .05); }
:root[data-theme="dark"] .dir-list { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1); }
.dir-row { position: relative; gap: 12px; padding: 8px 14px 8px 16px; border-bottom: none; }
.dir-row + .dir-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; border-top: .5px solid var(--border); }
.dir-list:has(input[type="checkbox"]) .dir-row + .dir-row::before { left: 87px; } /* с галочками — разделитель от текста, как в «Контактах» */
.dir-row:hover { background: rgba(var(--accent-rgb), .06); }
.dir-name { font-size: 14px; font-weight: 600; }
.dir-main:hover .dir-name { color: var(--ink); }
.dir-sub { font-size: 12.5px; color: var(--muted-2); }
.dir-meta { font-size: 13px; }
.dir-meta[href] { font-weight: 500 !important; }
.dir-tags .badge, .dir-tags .role-pill { font-size: 11px; padding: 2px 9px; font-weight: 600; }
.dir-id { font-size: 12px; }
.dir-bar { margin: 8px 2px 10px; }
/* подсказка как в macOS: светлая, полупрозрачная */
:root { --tip-bg: rgba(248, 248, 250, .94); --tip-text: #1D1D1F; --tip-border: rgba(0, 0, 0, .12); --tip-blur: saturate(180%) blur(20px); }
/* ---------- тёмная тема (переключатель «Тёмная тема» в меню): цвета тёмного режима macOS ---------- */
:root { --theme-toggle-display: flex; }
:root[data-theme="dark"] {
color-scheme: dark;
--accent: #0A84FF; --accent-dark: #409CFF; --accent-soft: rgba(10, 132, 255, .18); --accent-tint: rgba(10, 132, 255, .28); --accent-rgb: 10, 132, 255;
--ink: #F5F5F7; --ink-soft: #D1D1D6; --muted: #AEAEB2; --muted-2: #8E8E93; --muted-3: #636366;
--page-bg: #161618; --card: #1E1E20; --surface-2: #252527; --surface-3: #2E2E31;
--border: #38383B; --border-soft: #2C2C2F; --border-field: #48484B;
--sidebar-bg: rgba(38, 38, 40, .85); --sidebar-text: #F5F5F7; --sidebar-muted: #8E8E93; --sidebar-hover: rgba(255, 255, 255, .08);
--sidebar-line: rgba(255, 255, 255, .08); --sidebar-strong: #FFFFFF; --sidebar-avatar: #48484B;
--green: #30D158; --ok: #32D74B; --ok-soft: rgba(48, 209, 88, .16);
--red: #FF453A; --bad: #FF6961; --bad-soft: rgba(255, 69, 58, .16);
--warn: #FFB340; --warn-soft: rgba(255, 159, 10, .16);
--blue: #0A84FF; --info: #7D7AFF; --info-soft: rgba(94, 92, 230, .2); --gray: #8E8E93;
--shadow-card: none; --shadow-pop: 0 24px 60px rgba(0, 0, 0, .5);
--table-head-bg: #3F6B33; --table-head-text: #FFFFFF; --table-line: #38383B; --table-line-soft: #2F2F32; --table-row-alt: #262629; --table-col-line: #4A4A4F; --table-head-line: #6A6A70; --table-frame: #3A3A3E; --table-shadow: 0 8px 24px rgba(0, 0, 0, .35);
--table-select: #0A84FF; --table-select-rgb: 10, 132, 255; --table-check-rgb: 10, 132, 255;
--seg-track: #2E2E31; --seg-hover: rgba(255, 255, 255, .06); --seg-on-bg: #5A5A5E; --seg-on-text: #FFFFFF;
--switch-off: #48484B;
--action-bg: #2E2E31; --action-text: #F5F5F7; --action-border: rgba(255, 255, 255, .1); --action-hover-bg: #3A3A3D; --action-hover-text: #FFFFFF;
--search-bg: rgba(118, 118, 128, .24); --search-btn-icon: #8E8E93;
--overlay-bg: rgba(0, 0, 0, .45); --modal-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .1);
--tip-bg: rgba(44, 44, 46, .94); --tip-text: #F5F5F7; --tip-border: rgba(255, 255, 255, .12);
--toast-bg: rgba(44, 44, 46, .92); --toast-text: #FFFFFF; --toast-border: rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] body { background: var(--page-bg); color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color: var(--ink); background-color: var(--card); border-color: var(--border-field); }
:root[data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
/* ===== Единый вид кнопок во всех разделах (15.10.2026, владелец: «проверь у всех пользователей стили кнопок и давай унифицируем»).
Замер 50 страниц под админом, менеджерами (обычный, тексты, логистика) и клиентом: высота кнопок действий была 22–35 px,
скругление 6–10, жирность 500–700, а около 140 кнопок рисовались шрифтом Arial (кнопке не передавался шрифт страницы).
Стандарт — токены выше: 28 px, скругление 8, 12,5 px, полужирный. Значки (фильтр, ✎, ×), панель форматирования таблицы,
плашка массовых действий и вкладки-«таблетки» остаются своими — это не кнопки действий. ===== */
button, input[type="button"], input[type="submit"], input[type="reset"] { font-family: inherit; }
html body :is(.pay-btn, .tr-btn, .cr-btn, .po-btn, .btn, .cols-btn, .tk-btn, .sh-btn, .od-toggle, .rr-btn, .tab-btn, .bc-open,
.task-open-btn, .tk-add, .tk-q-go, .dash-cfg-btn, #save-btn, #delClientBtn, #cdBtn, a.hdr-btn, button.hdr-btn) {
box-sizing: border-box; height: var(--btn-h); min-height: var(--btn-h); padding-top: 0; padding-bottom: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border-radius: var(--btn-radius); font-size: var(--btn-fs); font-weight: var(--btn-fw); line-height: 1; white-space: nowrap; }
/* компактные кнопки в строках таблиц (курьеры: «Забрал», «Не забрал», «✕») — та же форма, ниже ростом */
html body .cr-btn.small { height: 24px; min-height: 24px; font-size: 12px; padding: 0 9px; }
/* кнопки на всю ширину (окна, карточки) остаются во всю ширину */
html body .modal-card .btn { width: 100%; }
/* аватарки сотрудников (19.10.2026): фото внутри любого кружка с инициалами */
.ava-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
:is(.dir-ava, .mgr-ava, .ac-ava, .tt-ava, .tks-ava, .sb-ava, .user-block .avatar):has(> .ava-img) { padding:0; overflow:hidden; background:transparent !important; }
/* строка счёта, которую можно раскрыть («Что в счёте», static/invoice-lines.js) */
.inv-row:has(.inv-lines-btn) { cursor: pointer; }
.inv-row:has(.inv-lines-btn):hover { filter: brightness(.98); }