/* ------------------------------------------------------------------
Sentrix palette applied over the existing dark admin theme.
Colour and typography only — no layout, spacing or markup changes.
Loaded last, so it overrides app.css. Remove the to revert.
------------------------------------------------------------------ */
/* Тема = набор этих переменных. «Ночь» живёт в :root и остаётся значением по
умолчанию; «день» переопределяет их на . Правила ниже
читают только переменные, поэтому переключение не требует второго файла.
Заливки заданы через --sx-fill-*, а не через rgba(255,255,255,…): на светлом
фоне белая полупрозрачность невидима, поэтому в «дне» это чёрный с альфой. */
:root {
--sx-bg: #0A0714; /* страница */
--sx-bg-elev: #130F24; /* панели, боковое меню */
--sx-bg-elev-2: #1A1530; /* поля ввода, приподнятые блоки */
--sx-text: #F3F1F8; /* основной текст */
--sx-text-dim: #ACA5C9; /* вторичный */
--sx-text-faint: #8A82A6; /* подписи, подсказки */
--sx-line: rgba(178, 171, 209, 0.14);
--sx-line-strong: rgba(178, 171, 209, 0.30);
--sx-violet: #7352F2; /* основной акцент */
--sx-violet-2: #B79CFF; /* акцент для текста и ссылок */
--sx-violet-hi: #7A5BE6; /* светлый конец градиента кнопки */
--sx-violet-soft: rgba(124, 92, 255, 0.16);
--sx-teal: #2BE2B9; /* положительное */
--sx-teal-soft: rgba(43, 226, 185, 0.14);
--sx-teal-text: #8CF3DC; /* положительное текстом на своей подложке */
--sx-coral: #FF6B6F; /* отрицательное */
--sx-coral-soft: rgba(255, 107, 111, 0.14);
--sx-coral-text: #FFB3B5;
--sx-amber: #E0A800; /* предупреждение */
--sx-amber-soft: rgba(224, 168, 0, 0.14);
--sx-amber-text: #F0CE6A;
/* цвет текста на сплошной заливке акцентом */
--sx-on-violet: #fff;
--sx-on-teal: #05241D;
--sx-on-coral: #2A0A0C;
--sx-on-amber: #241B00;
/* нейтральные заливки: ховер, чередование строк, вторичные кнопки */
--sx-fill-subtle: rgba(255, 255, 255, 0.03);
--sx-fill-subtle-2:rgba(255, 255, 255, 0.07);
--sx-stripe: rgba(255, 255, 255, 0.015);
/* подложка неактивных «пилюль» (тип компании, филиалы в списках) */
--sx-chip-bg: var(--sx-bg-elev-2);
/* боковое меню и подвал: на ночном фоне они читаются лучше, когда чуть
светлее панелей — рамка интерфейса отделяется от содержимого */
--sx-bg-chrome: #1A1530;
/* иконка календаря в родном поле даты рисуется браузером; на тёмном её
приходится осветлять фильтром */
--sx-picker-filter: invert(0.82);
/* вторая краска акцента: всё, что залито акцентом, уходит в неё вправо.
Контраст проверен на обоих концах — надпись читается и слева, и справа */
--sx-accent-2: #AE45A6;
/* примесь второй краски поверх цветных плашек: тот же приём, что у заливок,
но мягче — статус должен остаться узнаваемым по своему тону */
--sx-accent-wash: rgba(174, 69, 166, 0.35);
/* направление перехода: где начинается и куда уходит акцентная заливка */
--sx-grad-from: #1D4ED8;
--sx-grad-mid: #7E22CE;
--sx-grad-to: #C026D3;
/* точки заполненности в трекере */
--sx-dot-on: var(--sx-teal);
--sx-dot-loss: var(--sx-coral);
/* плашки статусов: ночью сплошная заливка белым текстом */
--sx-st-ordered-bg: #5c6484; --sx-st-ordered-fg: #fff;
--sx-st-sailed-bg: #2f6fd0; --sx-st-sailed-fg: #fff;
--sx-st-invoiced-bg: #5a49d6; --sx-st-invoiced-fg: #fff;
--sx-st-delivered-bg: #3a8640; --sx-st-delivered-fg: #fff;
--sx-st-paid-bg: #1f6b48; --sx-st-paid-fg: #fff;
--sx-st-closed-bg: #4a5370; --sx-st-closed-fg: #fff;
--sx-shadow-modal: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
--sx-shadow-btn: 0 8px 22px -8px rgba(124, 92, 255, 0.55);
--sx-shadow-card: 0 2px 10px -4px rgba(0, 0, 0, 0.55);
/* карточки филиалов: на тёмном фоне тень не читается, поэтому их
поднимаем подложкой на ступень светлее панелей */
--sx-card-bg: var(--sx-bg-elev-2);
--sx-card-top: rgba(214, 205, 255, 0.08);
--sx-radius: 10px;
--sx-radius-sm: 8px;
}
/* --- День ------------------------------------------------------------
Нейтральный серый: страница уходит в холодный светло-серый, панели белые,
поэтому карточки и таблицы явно отделяются от фона. Текст синевато-серый,
а не чёрный — три уровня дают к панели ~17:1, ~11:1 и ~5.4:1 (минимум WCAG
для обычного текста — 4.5:1). Фиолетовый приглушён до индиго — в насыщенном
виде он на светлом фоне бил по глазам. Бирюза,
коралл и янтарь затемнены — в ночных значениях они на светлом нечитаемы. */
:root[data-theme="day"] {
--sx-bg: #EEF0F4;
--sx-bg-elev: #FFFFFF;
--sx-bg-elev-2: #E6E9EF;
--sx-text: #171A24;
--sx-text-dim: #343A4C;
--sx-text-faint: #5A6276;
--sx-line: rgba(23, 26, 36, 0.13);
--sx-line-strong: rgba(23, 26, 36, 0.26);
--sx-violet: #4A3EBE;
--sx-violet-2: #4F46B5;
--sx-violet-hi: #6A61CF;
--sx-violet-soft: rgba(99, 91, 205, 0.12);
--sx-teal: #0A7057;
--sx-teal-soft: rgba(14, 155, 124, 0.12);
--sx-teal-text: #0A6B56;
--sx-coral: #BC2F35;
--sx-coral-soft: rgba(217, 61, 66, 0.10);
--sx-coral-text: #A32B2F;
--sx-amber: #8F6400;
--sx-amber-soft: rgba(169, 118, 0, 0.12);
--sx-amber-text: #7A5600;
--sx-on-violet: #fff;
--sx-on-teal: #fff;
--sx-on-coral: #fff;
--sx-on-amber: #fff;
--sx-fill-subtle: rgba(23, 26, 36, 0.04);
--sx-fill-subtle-2:rgba(23, 26, 36, 0.08);
--sx-stripe: rgba(23, 26, 36, 0.022);
/* тёплая подложка пилюль: на холодном сером фоне серая пилюля пропадала */
--sx-chip-bg: rgba(169, 118, 0, 0.12);
--sx-bg-chrome: #D8DCE6;
--sx-picker-filter: none;
--sx-accent-2: #0A78C8;
--sx-accent-wash: rgba(10, 120, 200, 0.16);
/* днём переход идёт из синего в индиго — обратно остальным темам */
--sx-grad-from: #0E7490;
--sx-grad-mid: #2563EB;
--sx-grad-to: #7E22CE;
/* точка заполненности: тёмно-зелёная на светлом фоне бьёт по глазам,
здесь она мягкая салатовая — это индикатор, а не текст */
--sx-dot-on: #74C365;
/* метка убытка: тёмно-красная точка на белом выглядит тревожнее, чем нужно
для пометки строки — здесь коралловая */
--sx-dot-loss: #E45751;
/* плашки статусов: днём мягкая подложка и тёмный текст того же тона */
--sx-st-ordered-bg: #D7DAE6; --sx-st-ordered-fg: #3C4361;
--sx-st-sailed-bg: #C4DBF7; --sx-st-sailed-fg: #1F4E8C;
--sx-st-invoiced-bg: #D6D0F4; --sx-st-invoiced-fg: #40389E;
--sx-st-delivered-bg: #C9E6CB; --sx-st-delivered-fg: #24602E;
--sx-st-paid-bg: #C0E4D1; --sx-st-paid-fg: #155438;
--sx-st-closed-bg: #D7DAE6; --sx-st-closed-fg: #3C4361;
--sx-shadow-modal: 0 18px 50px -12px rgba(23, 26, 36, 0.20);
--sx-shadow-btn: 0 8px 22px -10px rgba(99, 91, 205, 0.40);
--sx-shadow-card: 0 2px 10px -4px rgba(23, 26, 36, 0.18);
--sx-card-bg: var(--sx-bg-elev);
--sx-card-top: transparent;
}
/* --- Сумерки ---------------------------------------------------------
Третья тема: не «день», приглушённый до серого, а отдельный характер.
Подложка — густой сине-фиолетовый между ночью и днём (по яркости панель
в пять раз светлее ночной и в тридцать раз темнее дневной), и на ней
цвета звучат громче, чем могут звучать на белом или на чёрном.
Отсюда главное отличие от двух других тем: заливки здесь яркие, а текст
на них — почти чёрный, а не белый. На такой подложке светлый текст по
яркому даёт от силы 3.5:1, а тёмный — 5–11:1, и заодно именно тёмная
краска по светящейся заливке делает интерфейс цветным, а не пёстрым.
Потолок контраста здесь ниже, чем в ночи и дне: белый к панели даёт
13.2:1, поэтому уровни текста заданы как 12 / 8 / 5.6, а не 17 / 11 / 5.
Ниже этого ряда опускаться нельзя — выше физически некуда. */
:root[data-theme="dusk"] {
--sx-bg: #2A2340;
--sx-bg-elev: #332B4D;
--sx-bg-elev-2: #3E3560;
--sx-text: #F6F3FF;
--sx-text-dim: #CFC7EE;
--sx-text-faint: #ADA3D6;
--sx-line: rgba(214, 205, 255, 0.16);
--sx-line-strong: rgba(214, 205, 255, 0.32);
--sx-violet: #9B6BFF;
/* второй акцент — холодная бирюза: ссылки и активные элементы звучат
отдельно от фиолетовой заливки, и тема читается как двухцветная */
--sx-violet-2: #6FDEF7;
--sx-violet-hi: #B98CFF;
--sx-violet-soft: rgba(155, 107, 255, 0.22);
--sx-teal: #2FE3B0;
--sx-teal-soft: rgba(47, 227, 176, 0.20);
--sx-teal-text: #6BF0CA;
--sx-coral: #FF7E9B;
--sx-coral-soft: rgba(255, 126, 155, 0.20);
--sx-coral-text: #FFA8BC;
--sx-amber: #FFC247;
--sx-amber-soft: rgba(255, 194, 71, 0.20);
--sx-amber-text: #FFD684;
/* тёмная краска по светящейся заливке — подпись этой темы */
--sx-on-violet: #1B1430;
--sx-on-teal: #06281F;
--sx-on-coral: #2E0A14;
--sx-on-amber: #2A1C00;
--sx-fill-subtle: rgba(214, 205, 255, 0.06);
--sx-fill-subtle-2:rgba(214, 205, 255, 0.12);
--sx-stripe: rgba(214, 205, 255, 0.035);
--sx-chip-bg: rgba(111, 222, 247, 0.18);
--sx-bg-chrome: var(--sx-bg-elev);
--sx-picker-filter: invert(0.82);
--sx-accent-2: #FF8ACF;
--sx-accent-wash: rgba(255, 138, 207, 0.35);
--sx-grad-from: #22D3EE;
--sx-grad-mid: #A78BFA;
--sx-grad-to: #FF8ACF;
--sx-dot-on: #A3E635;
--sx-dot-loss: #FF7E9B;
/* статусы: каждый своим тоном, тёмная надпись поверх */
--sx-st-ordered-bg: #A79DD0; --sx-st-ordered-fg: #1B1430;
--sx-st-sailed-bg: #5CD9F5; --sx-st-sailed-fg: #072430;
--sx-st-invoiced-bg: #A78BFF; --sx-st-invoiced-fg: #1B1430;
--sx-st-delivered-bg: #A3E635; --sx-st-delivered-fg: #17250A;
--sx-st-paid-bg: #2FE3B0; --sx-st-paid-fg: #06281F;
--sx-st-closed-bg: #8E86AB; --sx-st-closed-fg: #14101F;
--sx-shadow-modal: 0 18px 50px -12px rgba(10, 6, 24, 0.65);
--sx-shadow-btn: 0 8px 22px -8px rgba(155, 107, 255, 0.55);
--sx-shadow-card: 0 2px 10px -4px rgba(10, 6, 24, 0.5);
--sx-card-bg: var(--sx-bg-elev-2);
--sx-card-top: rgba(246, 243, 255, 0.10);
}
/* ──────────────────────────────────────────────────────────────────────────
Наследие шаблона: цвета, прибитые гвоздями
──────────────────────────────────────────────────────────────────────────
app.css и aqualeaf-custom.css писались под одну тёмную тему, поэтому
поверхности и текст заданы в них литералами. Пока светлая тема жила на паре
страниц, хватало точечных правок; на всём интерфейсе таких мест больше сотни.
Блок ниже собран обходом обоих файлов: каждый жёсткий цвет заменён своим
токеном. В ночной теме токены дают прежние значения, поэтому она не меняется;
в дневной те же поверхности становятся светлыми.
Блок стоит ДО авторских правил темы намеренно: при равной специфичности
побеждает более позднее правило, то есть всё, что написано ниже руками.
Градиенты и фоновые картинки пропущены — их правим отдельно. */
body { color: var(--sx-text-dim); background: var(--sx-bg); }
.modal-header { background: var(--sx-violet); }
.bg-theme { background: var(--sx-violet); }
.label-theme, .bg-theme { background: var(--sx-violet); }
ul.top-menu > li > .logout { color: var(--sx-on-violet); background: var(--sx-violet); }
#sidebar { background: var(--sx-bg-elev); }
#sidebar h5 { color: var(--sx-text); }
ul.sidebar-menu li ul.sub li { background: var(--sx-bg-elev-2); }
ul.sidebar-menu li a { color: var(--sx-text-dim); }
ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus { background: var(--sx-violet); color: var(--sx-on-violet); }
.black-bg { background: var(--sx-bg-elev); }
ul.top-menu > li > a:hover, ul.top-menu > li > a:focus { color: var(--sx-text-faint) !important; }
.dropdown-menu.extended li p.green { background: var(--sx-violet); color: var(--sx-on-violet); }
.dropdown-menu.extended li p.yellow { background: var(--sx-violet); color: var(--sx-on-violet); }
.custom-bar-chart .bar .value { background: var(--sx-violet); }
.custom-bar-chart .bar .value:hover { background: var(--sx-bg-elev-2); color: var(--sx-text); }
.darkblue-panel { background: var(--sx-bg-elev-2); }
.darkblue-panel h1 { color: var(--sx-text); }
.green-panel { background: var(--sx-violet); }
.white-panel .small { color: var(--sx-text-dim); }
.card { background: var(--sx-bg); }
.stock .current-price { background: var(--sx-bg-elev-2); }
.stock .current-price .info abbr { color: var(--sx-text); }
.content-panel { background: var(--sx-bg-elev); }
.weather-3 .info i { color: var(--sx-text-faint); }
.weather-3 .info p { color: var(--sx-text-faint); }
.twitter-panel p { color: var(--sx-text); }
#spotify .sp-title { color: var(--sx-text); }
#spotify .play { color: var(--sx-text); }
.steps label { background: var(--sx-bg-elev-2); }
.steps label:hover { background: var(--sx-bg-elev-2); }
.profile-01 { background: var(--sx-violet); }
.profile-01:hover { background: var(--sx-bg-elev-2); }
.pr2-social a { color: var(--sx-text-faint); }
.photo-wrapper { background: var(--sx-violet); }
.project:hover .photo-wrapper { background: var(--sx-violet); }
.form-panel { background: var(--sx-bg-elev); }
.has-switch span.switch-left { background: var(--sx-bg-elev); }
.dataTables_paginate.paging_bootstrap.pagination li:hover a, .dataTables_paginate.paging_bootstrap.pagination li.active a { color: var(--sx-on-violet); background: var(--sx-violet); }
.form-login h2.form-login-heading { background: var(--sx-violet); color: var(--sx-on-violet); }
.profile-text h6 { color: var(--sx-text-faint); }
.nav-tabs { background: var(--sx-bg); }
.panel-body .nav>li>a:focus { background: var(--sx-bg); }
.nav-tabs a { color: var(--sx-text-dim); }
.servicetitle hr { background: var(--sx-violet); }
.icn-container { color: var(--sx-on-violet); background: var(--sx-violet); }
.icn-container.active, .icn-container:hover { background: var(--sx-bg-elev-2) !important; }
.dm-icon { background: var(--sx-bg-elev-2); color: var(--sx-text); }
.dm-icon:active, .dm-icon:hover { background: var(--sx-violet); }
.mail-nav li a { color: var(--sx-text-dim); }
.mail-nav > li > a:hover, .mail-nav > li > a:focus { background: var(--sx-bg-elev-2); color: var(--sx-text); }
.mail-nav > li.active > a { background: var(--sx-violet); color: var(--sx-on-violet); }
.mail-nav > li.active > a:hover, .mail-nav > li.active > a:focus { background: var(--sx-violet); color: var(--sx-on-violet); }
.wht-bg { background: var(--sx-bg-elev-2); }
.table-inbox tr td .fa-star { color: var(--sx-text-faint); }
.table-inbox tr.unread td { background: var(--sx-bg-elev); }
.table-hover > tbody > tr:hover { background: var(--sx-bg-elev-2); }
.table-inbox tr a { color: var(--sx-text-dim); }
.inbox-pagination a.np-btn { background: var(--sx-bg-elev-2); }
.chat-room-head { background: var(--sx-violet); color: var(--sx-on-violet); }
.chat-room-head .search-btn { background: var(--sx-bg-elev-2); color: var(--sx-text); }
.group-rom .third-part { color: var(--sx-text-faint); }
.badge.bg-inverse { background: var(--sx-bg-elev); }
.panel-footer.revenue-foot ul li a i { color: var(--sx-text-dim); }
.site-footer { background: var(--sx-bg-elev); color: var(--sx-text); }
.contact-form .form-send button { background: var(--sx-violet); color: var(--sx-on-violet); }
#copyrights { background: var(--sx-bg-elev-2); }
.fc-button.fc-state-disabled .fc-button-inner { color: var(--sx-text-faint) !important; }
.tasks-widget .task-list li.task-done .task-title-sp { color: var(--sx-text-faint); }
table.display tr.gradeA { background: var(--sx-bg-elev); }
table.display tr.odd.gradeA { background: var(--sx-bg-elev); }
table.display tr.even.gradeA { background: var(--sx-bg-elev-2); }
div.dataTables_length select { background: var(--sx-bg-elev-2); }
table.dataTable thead th { color: var(--sx-text); background: var(--sx-bg-elev-2); }
.panel-heading.tabMd .nav { background: var(--sx-bg-elev); }
.panel { background: var(--sx-bg-elev); }
.form-control { background: var(--sx-bg-elev-2) !important; color: var(--sx-text-dim); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: var(--sx-on-violet); background: var(--sx-violet); }
.span6 input[type="search"] { background: var(--sx-bg-elev-2); }
.ms-container .ms-selectable, .ms-container .ms-selection { background: var(--sx-bg) !important; }
.modal-body #add-product-card { background: var(--sx-bg) !important; }
input[type="checkbox"] { background: var(--sx-bg-elev-2) !important; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { background: var(--sx-bg-elev-2); }
.table-advance thead { background: var(--sx-bg-elev-2); }
.dashBcards .card { background: var(--sx-bg-elev); }
.text-dark { color: var(--sx-text-dim) !important; }
.table-striped > tbody > tr:nth-of-type(2n+1) { background: var(--sx-bg-elev-2); }
.modal-content { background: var(--sx-bg-elev); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: var(--sx-bg-elev); }
.ui-widget-header { background: var(--sx-bg); color: var(--sx-text); }
.daterangepicker { background: var(--sx-bg) !important; }
.daterangepicker .calendar-table { background: var(--sx-bg-elev) !important; }
.daterangepicker td.in-range { background: var(--sx-bg-elev-2) !important; color: var(--sx-text) !important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--sx-violet-2) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--sx-violet) !important; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background: var(--sx-bg-elev-2) !important; }
.daterangepicker .ranges li { background: var(--sx-bg-elev-2); color: var(--sx-text-dim); }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { background: var(--sx-violet) !important; }
.daterangepicker .ranges li.active { background: var(--sx-violet) !important; }
.dropdown-menu > li > a { color: var(--sx-text-faint); }
.dropdown-menu { background: var(--sx-bg); }
.fc-widget-header { background: var(--sx-bg) !important; color: var(--sx-text-dim) !important; }
.fc-state-default, .fc-state-default .fc-button-inner { background: var(--sx-bg-elev-2) !important; color: var(--sx-text-faint) !important; }
.fc-state-active, .fc-state-active .fc-button-inner { background: var(--sx-violet) !important; color: var(--sx-on-violet) !important; }
.fc-state-highlight { background: var(--sx-violet) !important; }
.table-bordered > tfoot > tr > th { background: var(--sx-bg-elev-2); }
.adv-table { background: var(--sx-bg) !important; }
#dash_datepicker .ui-state-active { background: var(--sx-violet); }
a.logo.sx-brand { color: var(--sx-text); }
.btn-compose { background: var(--sx-violet); color: var(--sx-on-violet); }
.mail-option .chk-all, .mail-option .btn-group a.btn { background: var(--sx-bg-elev-2); }
/* Кнопки сюда не попадают: в шаблоне вторичные .btn-info/.btn-danger/.btn-success
перекрашены в акцент, из-за чего в раскрытом заказе трекера кнопки сливались с
фоном друг друга. Система кнопок у темы своя, ниже. */
/* Шрифты намеренно не трогаем — остаются те, что были в теме (Rubik / Nunito). */
/* --- Поверхности ---------------------------------------------------- */
body {
background: var(--sx-bg);
color: var(--sx-text-dim);
}
.content-panel,
.form-panel,
.white-box,
.card,
.panel,
.black-bg,
.modal-content,
.dropdown-menu {
background: var(--sx-bg-elev);
border-color: var(--sx-line);
border-radius: var(--sx-radius);
}
/* Пункты выпадающих меню: в базовом шаблоне цвет жёстко #88a4bd, на светлой
подложке это 2.1:1. */
.dropdown-menu > li > a { color: var(--sx-text-dim); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: var(--sx-fill-subtle);
color: var(--sx-text);
}
#sidebar,
#sidebar .nav > li > a,
/* реальная разметка меню — ul.sidebar-menu; в app.css её пункты жёстко
окрашены в светлый #d8e1ee, что на светлой теме сливается с фоном */
ul.sidebar-menu li a {
background: var(--sx-bg-elev);
color: var(--sx-text-dim);
}
#sidebar .nav > li > a:hover,
#sidebar .nav > li > a:focus,
#sidebar .nav > li.active > a,
ul.sidebar-menu li a:hover,
ul.sidebar-menu li a:focus {
background: var(--sx-violet-soft);
color: var(--sx-text);
}
/* активный пункт остаётся сплошной заливкой акцентом */
ul.sidebar-menu li.active > a,
ul.sidebar-menu li.active > a:hover,
ul.sidebar-menu li.active > a:focus {
background: var(--sx-violet);
color: var(--sx-on-violet);
}
/* Иконки пунктов меню. В app.css при наведении они жёстко белые — на светлой
подложке ховера это значит «иконка исчезла». Белый нужен только на сплошной
заливке активного пункта. */
ul.sidebar-menu li a i { color: var(--sx-violet); }
ul.sidebar-menu li a:hover i,
ul.sidebar-menu li a:focus i { color: var(--sx-violet-2); }
ul.sidebar-menu li a.active i,
ul.sidebar-menu li a.active:hover i,
ul.sidebar-menu li.active > a i,
ul.sidebar-menu li.active > a:hover i { color: var(--sx-on-violet); }
/* ── Акцентная заливка ────────────────────────────────────────────────
Всё, что выделено акцентом — активный пункт меню, главная кнопка, активная
вкладка, — залито не плоским цветом, а переходом из фиолетового во вторую
краску темы. Контраст надписи проверен на обоих концах перехода, иначе
правый край читался бы хуже левого.
Переход идёт через три точки, а не две: белая надпись ограничивает светлоту
обоих концов — слишком яркий конец её не держит, — поэтому размах берём
тоном: от бирюзы через синий к пурпуру. Каждая точка проверена отдельно. */
.sx-accent-fill,
ul.sidebar-menu li a.active,
ul.sidebar-menu li a.active:hover,
ul.sidebar-menu li a.active:focus,
ul.sidebar-menu li.active > a,
ul.sidebar-menu li.active > a:hover,
ul.sidebar-menu li.active > a:focus,
ul.top-menu > li > .logout,
.btn-theme, .bg-theme, .btn-primary,
.site-min-height .btn-primary, .site-min-height .btn-theme,
.top-menu .badge.bg-warning,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_paginate.paging_bootstrap.pagination li.active a {
background: linear-gradient(100deg, var(--sx-grad-from) 0%, var(--sx-grad-mid) 52%, var(--sx-grad-to) 100%);
border-color: transparent;
color: var(--sx-on-violet);
}
ul.sidebar-menu li a.active i,
ul.sidebar-menu li.active > a i { color: var(--sx-on-violet); }
/* Ховер и фокус: тот же переход, только ярче. Осветляем фильтром, а не вторым
градиентом, — тогда направление не зависит от темы и не «переворачивается». */
.btn-theme:hover, .btn-theme:focus,
.btn-primary:hover, .btn-primary:focus,
.site-min-height .btn-primary:hover,
ul.top-menu > li > .logout:hover {
filter: brightness(1.10);
color: var(--sx-on-violet);
box-shadow: var(--sx-shadow-btn);
}
/* Рамка интерфейса — шапка, боковое меню и подвал — идёт своим тоном,
отличным от панелей: ночью светлее, днём темнее. */
#sidebar, ul.sidebar-menu li a { background: var(--sx-bg-chrome); }
.header, .header.black-bg {
background: var(--sx-bg-chrome);
border-bottom: 1px solid var(--sx-line);
}
/* --- Текст ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--sx-text); }
.help-block, small, .text-muted { color: var(--sx-text-faint); }
a { color: var(--sx-violet-2); }
a:hover, a:focus { color: var(--sx-text); }
::selection { background: var(--sx-violet); color: var(--sx-on-violet); }
::-moz-selection { background: var(--sx-violet); color: var(--sx-on-violet); }
/* --- Поля ввода ------------------------------------------------------ */
.form-control,
div.dataTables_length select,
.span6 input[type="search"],
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
background: var(--sx-bg-elev-2) !important;
border-color: var(--sx-line) !important;
color: var(--sx-text) !important;
border-radius: var(--sx-radius-sm) !important;
}
.form-control:focus {
border-color: var(--sx-violet) !important;
box-shadow: 0 0 0 3px var(--sx-violet-soft) !important;
}
.form-control::placeholder { color: var(--sx-text-faint); }
label, .control-label { color: var(--sx-text-dim); }
/* --- Кнопки ---------------------------------------------------------- */
.btn { border-radius: var(--sx-radius-sm); }
/* Кнопка входа: страница логина всегда ночная, но приём тот же */
.login100-form-btn {
background: linear-gradient(100deg, var(--sx-grad-from) 0%, var(--sx-grad-mid) 52%, var(--sx-grad-to) 100%);
border-color: transparent;
color: var(--sx-on-violet);
}
.login100-form-btn:hover { filter: brightness(1.10); box-shadow: var(--sx-shadow-btn); }
/* Обычные действия — приглушённые, чтобы главное было видно */
.btn-info, .btn-default {
background: var(--sx-fill-subtle);
border-color: var(--sx-line-strong);
color: var(--sx-text-dim);
}
/* app.css красит вторичные кнопки внутри таблиц акцентом селектором сильнее
нашего — из-за этого в раскрытом заказе трекера они сливались друг с другом. */
.dataTables_scroll .btn-info,
.dataTables_scroll .btn-default {
background: var(--sx-fill-subtle);
border-color: var(--sx-line-strong);
color: var(--sx-text-dim);
}
.btn-info:hover, .btn-default:hover,
.btn-info:focus, .btn-default:focus {
background: var(--sx-fill-subtle-2);
border-color: var(--sx-violet);
color: var(--sx-text);
}
.btn-success { background: var(--sx-teal); border-color: var(--sx-teal); color: var(--sx-on-teal); }
.btn-success:hover, .btn-success:focus { background: var(--sx-teal); border-color: var(--sx-teal); color: var(--sx-on-teal); filter: brightness(1.08); }
.btn-danger { background: var(--sx-coral); border-color: var(--sx-coral); color: var(--sx-on-coral); }
.btn-danger:hover, .btn-danger:focus { background: var(--sx-coral); border-color: var(--sx-coral); color: var(--sx-on-coral); filter: brightness(1.08); }
.btn-warning { background: var(--sx-amber); border-color: var(--sx-amber); color: var(--sx-on-amber); }
/* --- Таблицы --------------------------------------------------------- */
.table, table.dataTable { color: var(--sx-text-dim); }
.table > thead > tr > th,
table.dataTable thead th {
background: var(--sx-bg-elev-2);
border-bottom: 1px solid var(--sx-line-strong) !important;
color: var(--sx-text-dim);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable tbody td {
border-top: 1px solid var(--sx-line) !important;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th { border-color: var(--sx-line) !important; }
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd { background: var(--sx-stripe); }
.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover { background: var(--sx-violet-soft); }
/* --- Вкладки --------------------------------------------------------- */
.nav-tabs { background: transparent; border-bottom: 1px solid var(--sx-line); }
.nav-tabs > li > a {
background: transparent;
border: none;
color: var(--sx-text-faint);
border-bottom: 2px solid transparent;
border-radius: 0;
}
.nav-tabs > li > a:hover { background: transparent; color: var(--sx-text-dim); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: transparent;
border: none;
border-bottom: 2px solid var(--sx-violet);
color: var(--sx-text);
}
/* --- Сообщения ------------------------------------------------------- */
.alert { border-radius: var(--sx-radius-sm); border-width: 1px; }
.alert-success { background: var(--sx-teal-soft); border-color: var(--sx-teal); color: var(--sx-teal-text); }
.alert-danger { background: var(--sx-coral-soft); border-color: var(--sx-coral); color: var(--sx-coral-text); }
.alert-warning { background: var(--sx-amber-soft); border-color: var(--sx-amber); color: var(--sx-amber-text); }
.alert-info { background: var(--sx-violet-soft); border-color: var(--sx-violet); color: var(--sx-violet-2); }
/* --- Метки ----------------------------------------------------------- */
.label, .badge { border-radius: 999px; padding: .25em .7em; }
.label-success, .badge.bg-theme { background: var(--sx-teal-soft); color: var(--sx-teal-text); }
.label-danger { background: var(--sx-coral-soft); color: var(--sx-coral-text); }
.label-warning { background: var(--sx-amber-soft); color: var(--sx-amber-text); }
.label-default { background: var(--sx-fill-subtle-2); color: var(--sx-text-dim); }
.label-info { background: var(--sx-violet-soft); color: var(--sx-violet-2); }
/* --- Прочее ---------------------------------------------------------- */
.modal-header { background: var(--sx-bg-elev-2); border-bottom: 1px solid var(--sx-line); }
/* Заголовок модалки в шаблоне белый (расчёт на тёмную шапку), а крестик — чёрный
от бутстрапа. В одной теме пропадало одно, в другой другое. */
.modal-title { color: var(--sx-text); }
.modal-header .close, .modal-header .close span {
color: var(--sx-text-dim); opacity: 1; text-shadow: none;
}
.modal-header .close:hover, .modal-header .close:focus { color: var(--sx-text); opacity: 1; }
.modal-content { box-shadow: var(--sx-shadow-modal); }
hr { border-color: var(--sx-line); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: transparent !important;
border: 1px solid var(--sx-line) !important;
color: var(--sx-text-dim) !important;
border-radius: var(--sx-radius-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--sx-violet) !important;
border-color: var(--sx-violet) !important;
color: var(--sx-on-violet) !important;
}
.loginWrap, .wrap-login100 { background: var(--sx-bg); }
/* ------------------------------------------------------------------
Масштаб интерфейса — примерно на 15% мельче.
Только размеры: шрифт, отступы, высоты, ширина бокового меню.
Удалить этот блок — вернутся прежние пропорции.
------------------------------------------------------------------ */
body { font-size: 13px; }
/* Шапка и отступ содержимого под неё меняются вместе */
.header { min-height: 51px; padding: 0 13px; }
.wrapper { margin-top: 51px; padding-left: 25px; padding-right: 25px; }
.logo { font-size: 20px; margin-top: 13px; }
/* Подвал прижат к низу окна. В шаблоне вместо этого стояла фиксированная
минимальная высота содержимого, из-за чего на коротких страницах подвал
повисал посреди экрана, а под ним оставалась пустая полоса. Шапка и боковое
меню закреплены (position: fixed) и в потоке не участвуют, поэтому колонкой
выстраиваются только содержимое и подвал. */
#container { display: flex; flex-direction: column; min-height: 100vh; }
#main-content { flex: 1 0 auto; }
.site-min-height { min-height: 0; }
/* Боковое меню и сдвиг содержимого — тоже парой */
#sidebar { width: 221px; }
#main-content { margin-left: 221px; }
#sidebar > ul > li > a { height: 30px; line-height: 30px; padding: 0 9px; }
.sidebar-menu li a { font-size: 13px; }
/* Панели */
.content-panel { padding: 13px 17px 4px; }
.form-panel, .white-box { padding: 13px 17px; }
/* Поля и кнопки */
.form-control { height: 36px !important; padding: 5px 10px; font-size: 13px; }
select.form-control { height: 36px !important; }
.btn { padding: 5px 10px; font-size: 13px; }
.btn-sm, .btn-xs { padding: 3px 8px; font-size: 12px; }
label, .control-label { font-size: 13px; }
/* Таблицы */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td,
table.dataTable thead th,
table.dataTable tbody td { padding: 6px 8px; }
/* Заголовки */
h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
h4 { font-size: 15px; }
h5 { font-size: 13px; }
/* Широкие таблицы с данными (Трекер, заявки клиентов, отчёт по продукции) —
мельче остального интерфейса, чтобы в строку помещалось больше колонок.
Важно: при scrollX DataTables выносит шапку в отдельную таблицу, у которой нет
идентификатора исходной. Поэтому размеры задаются через обёртку `_wrapper` —
иначе шапка и тело считаются с разными метриками и колонки разъезжаются. */
#hidden-table-info,
#hidden-table-info_wrapper table.dataTable,
#hidden-table-info_wrapper table.dataTable th,
#hidden-table-info_wrapper table.dataTable td,
#hidden-table-info td,
#hidden-table-info th,
.lots-table,
.lots-table th,
.lots-table td {
font-size: 12px;
line-height: 1.35;
}
#hidden-table-info_wrapper table.dataTable > thead > tr > th,
#hidden-table-info_wrapper table.dataTable > tbody > tr > td,
#hidden-table-info > thead > tr > th,
#hidden-table-info > tbody > tr > td,
.lots-table > thead > tr > th,
.lots-table > tbody > tr > td,
#dir-table > thead > tr > th,
#dir-table > tbody > tr > td { padding: 3px 6px !important; vertical-align: middle; color: var(--sx-text-dim); }
/* !important нужен: app.css задаёт `table.dataTable td { padding: 12px !important; color: white }`,
из-за чего строки Orders были 47px против 29px в Lots и текст — белым вместо приглушённого. */
/* Колонки с кнопками-иконками (раскрыть / редактировать / документы): узкие, без лишних отступов */
#hidden-table-info_wrapper table.dataTable > thead > tr > th.text-center,
#hidden-table-info_wrapper table.dataTable > tbody > tr > td.text-center { padding-left: 2px; padding-right: 2px; width: 1%; white-space: nowrap; }
/* Шапка обеих таблиц трекера — одинаковая: мелкий приглушённый капс */
#hidden-table-info_wrapper table.dataTable > thead > tr > th,
#hidden-table-info > thead > tr > th,
.lots-table > thead > tr > th,
#dir-table > thead > tr > th {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--sx-text-faint); white-space: nowrap;
}
/* Справочник идёт тем же строем, что трекер: та же плотность, та же шапка,
тот же текст. Разделителей колонок здесь нет — в трекере два десятка узких
колонок, и вертикали помогают не сбиться со строки, а тут их пять и широких,
вертикали только дробят список. */
#dir-table > tbody > tr > td { font-size: 12px; border-bottom: 1px solid var(--sx-line); }
#dir-table > thead > tr > th {
background: var(--sx-bg-elev-2);
border-bottom: 1px solid var(--sx-line-strong) !important;
}
#dir-table > tbody > tr:hover > td { background: var(--sx-fill-subtle); }
/* Ссылки в ячейках наследуют размер ячейки. В app.css у `a` жёстко задано
14px / line-height 1.7 — из-за этого имя клиента и номер заказа были крупнее
соседних ячеек, и строки выглядели «разнокалиберными». */
#hidden-table-info_wrapper table.dataTable td a,
#hidden-table-info td a,
.lots-table td a { font-size: inherit; line-height: inherit; }
a.tr-f { color: inherit; }
a.tr-f:hover { color: var(--sx-violet); text-decoration: none; }
/* Фон строк Orders — как в Lots. Старый app.css красит строки DataTables
классами odd/even/gradeA/sorting_1 в свои цвета; здесь всё гасится, остаётся
только лёгкая подсветка при наведении. */
#hidden-table-info_wrapper table.dataTable > tbody > tr,
#hidden-table-info_wrapper table.dataTable > tbody > tr.odd,
#hidden-table-info_wrapper table.dataTable > tbody > tr.even,
#hidden-table-info_wrapper table.dataTable > tbody > tr.gradeA,
#hidden-table-info_wrapper table.dataTable > tbody > tr.strip1,
#hidden-table-info_wrapper table.dataTable > tbody > tr > td,
#hidden-table-info_wrapper table.dataTable > tbody > tr > td.sorting_1,
#hidden-table-info_wrapper table.dataTable > tbody > tr > td.sorting_2 { background: transparent; }
#hidden-table-info_wrapper table.dataTable > tbody > tr:not(.LP):hover > td { background: var(--sx-fill-subtle); }
#hidden-table-info_wrapper table.dataTable > thead > tr > th { background: var(--sx-bg-elev-2); border-bottom: 1px solid var(--sx-line-strong) !important; }
#hidden-table-info_wrapper table.dataTable th.text-center,
#hidden-table-info_wrapper table.dataTable td.text-center { text-align: center; }
#hidden-table-info_wrapper table.dataTable .btn,
#hidden-table-info .btn { padding: 2px 6px; font-size: 11px; }
#hidden-table-info_wrapper table.dataTable .label,
#hidden-table-info .label { padding: .2em .6em; font-size: 10px; }
/* Общие элементы Orders и Lots: статус, точка убытка, точки полноты данных,
переключатель видов, кнопки-иконки. Раньше дублировались inline в двух шаблонах. */
.tr-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
/* Цветные плашки статусов тоже уходят вправо во вторую краску — но мягче
заливок, иначе статус перестанет узнаваться по своему тону. Примесь лежит
поверх цвета фоном-картинкой, поэтому работает с любым из шести цветов и
не требует второго набора токенов. Контраст надписи проверен на правом,
самом тёмном краю каждого из них. */
.tr-status, .status-bar .sb-seg {
background-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 0%, var(--sx-accent-wash) 100%);
}
/* Статусы. Цвет раньше приходил из PHP прямо в style, поэтому был одинаковым в
обеих темах: на тёмном фоне насыщенная плашка уместна, на светлом она била по
глазам и перетягивала внимание с самих данных. Теперь статус едет классом, а
цвет берётся из темы: ночью — сплошная заливка белым текстом, днём — мягкая
подложка с тёмным текстом того же тона. Текст держит контраст к своей
подложке не ниже 5:1, а сама плашка от панели отличается едва-едва.
Те же токены красят полосу статусов и точки легенды на странице профиля. */
.tr-status[data-status="ordered"] { background: var(--sx-st-ordered-bg); color: var(--sx-st-ordered-fg); }
.tr-status[data-status="sailed"] { background: var(--sx-st-sailed-bg); color: var(--sx-st-sailed-fg); }
.tr-status[data-status="invoiced"] { background: var(--sx-st-invoiced-bg); color: var(--sx-st-invoiced-fg); }
.tr-status[data-status="delivered"] { background: var(--sx-st-delivered-bg); color: var(--sx-st-delivered-fg); }
.tr-status[data-status="paid"] { background: var(--sx-st-paid-bg); color: var(--sx-st-paid-fg); }
.tr-status[data-status="closed"] { background: var(--sx-st-closed-bg); color: var(--sx-st-closed-fg); }
.status-bar .sb-seg[data-status="ordered"], .status-legend i[data-status="ordered"] { background: var(--sx-st-ordered-bg); }
.status-bar .sb-seg[data-status="sailed"], .status-legend i[data-status="sailed"] { background: var(--sx-st-sailed-bg); }
.status-bar .sb-seg[data-status="invoiced"], .status-legend i[data-status="invoiced"] { background: var(--sx-st-invoiced-bg); }
.status-bar .sb-seg[data-status="delivered"], .status-legend i[data-status="delivered"] { background: var(--sx-st-delivered-bg); }
.status-bar .sb-seg[data-status="paid"], .status-legend i[data-status="paid"] { background: var(--sx-st-paid-bg); }
.status-bar .sb-seg[data-status="closed"], .status-legend i[data-status="closed"] { background: var(--sx-st-closed-bg); }
.status-bar .sb-seg[data-status="ordered"] { color: var(--sx-st-ordered-fg); }
.status-bar .sb-seg[data-status="sailed"] { color: var(--sx-st-sailed-fg); }
.status-bar .sb-seg[data-status="invoiced"] { color: var(--sx-st-invoiced-fg); }
.status-bar .sb-seg[data-status="delivered"] { color: var(--sx-st-delivered-fg); }
.status-bar .sb-seg[data-status="paid"] { color: var(--sx-st-paid-fg); }
.status-bar .sb-seg[data-status="closed"] { color: var(--sx-st-closed-fg); }
.tr-loss { color: var(--sx-dot-loss); font-size: 14px; line-height: 1; vertical-align: middle; cursor: help; }
.tr-dots { display: inline-flex; gap: 3px; cursor: help; padding: 5px 3px; margin: -5px -3px; } /* отступы расширяют зону наведения */
/* Спецификация в трекере: позиция на строку, объём приглушённо в своей колонке справа */
.tr-spec { display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 1px; cursor: help; vertical-align: middle; font-size: 12px; line-height: 1.35; }
.tr-spec-line { display: contents; }
.tr-spec-name { color: inherit; }
.tr-spec-m3 { color: var(--sx-text-faint, #8A82A6); text-align: right; font-variant-numeric: tabular-nums; }
.tr-spec-more, .tr-spec-none { grid-column: 1 / -1; color: var(--sx-text-faint, #8A82A6); font-size: 11px; }
/* Отступ от шапки до заголовка страницы. В шаблоне его задавала каждая
страница сама — своим margin у заголовка, классом .mt у строки или inline-
стилем, — и по экранам он гулял от 3 до 30 пикселей. Теперь расстояние
задаётся один раз отступом обёртки, а верхние margin у первых элементов
гасятся: важна первая цепочка вложенности, дальше вглубь верстка своя. */
#main-content .wrapper { padding-top: 16px; }
#main-content .wrapper > *:first-child,
#main-content .wrapper > *:first-child > *:first-child,
#main-content .wrapper > *:first-child > *:first-child > *:first-child,
#main-content .wrapper > *:first-child > *:first-child > *:first-child > *:first-child {
margin-top: 0 !important;
}
/* Шапки страниц, которые идут не первым узлом: перед ними стоят и
, и правило выше до них не достаёт. */
#main-content .wrapper > h3,
#main-content .wrapper > h4,
#main-content .wrapper > .tracker-head,
#main-content .wrapper > .pp-head,
#main-content .wrapper > .row:first-of-type { margin-top: 0 !important; }
/* Строка-линейка DataTables. При горизонтальной прокрутке настоящая шапка
выносится в отдельную таблицу, а в этой остаётся пустая строка нулевой
высоты — она держит ширину колонок и удалять её нельзя. Наши отступы в
ячейках (3px сверху и снизу плюс рамка) делали её видимой полоской под
шапкой; гасим отступы, а не саму строку. */
#hidden-table-info_wrapper .dataTables_scrollBody > table > thead > tr > th,
#hidden-table-info_wrapper .dataTables_scrollBody > table > thead > tr > td,
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
/* Гасим только высоту. Боковые отступы и размер шрифта трогать нельзя:
DataTables меряет по этой строке ширину колонок, и если обнулить их,
шапка разъезжается с данными — проверено, разъезжается. */
padding-top: 0 !important;
padding-bottom: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
line-height: 0 !important;
height: 0 !important;
}
/* ── Подписи полей ───────────────────────────────────────────────────
Один вид на всё приложение: над полем, заглавными, приглушённым цветом.
Раньше их было три — заглавными сверху, обычным текстом слева с двоеточием
и обычным текстом слева без него, — и на соседних страницах форма выглядела
по-разному. Размеры взяты те же, что на «New order».
Исключены подписи, внутри которых лежит сам контрол: у чекбоксов и у поиска
в таблицах label работает обёрткой, и блочная раскладка её ломает. */
.form-group > label:not(:has(input)):not(:has(select)):not(:has(textarea)),
label.control-label:not(:has(input)):not(:has(select)) {
display: block; float: none; width: auto; text-align: left;
margin: 0 0 4px; padding: 0;
font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
color: var(--sx-text-faint);
}
/* Там, где подпись стояла колонкой слева, поле рядом занимало не всю ширину */
.form-group > .row > label.control-label + div[class*="col-"] { float: none; width: 100%; }
/* Пояснение под фильтрами отчёта обтекало их: первая строка начиналась у
правого края, остальные уходили влево, и текст выглядел сломанным. */
#report-filters { display: flow-root; }
#report-filters .help-block, #report-filters + .help-block { clear: both; }
/* ── Выбор месяца ────────────────────────────────────────────────────
Всплывашка плагина monthpicker. Он строит разметку в духе jquery-ui, со
своими ui-state-* классами, и без правил ниже выглядит таблицей с рамками
на чужом фоне. Родное браузерное поле месяца оформить нельзя вовсе —
поэтому там, где нужен месяц, ставим этот плагин, а его внешность задаём
здесь. Правила лежат в общей теме, а не в отдельном файле на подключение:
раньше так и было, и страница ставок перевозки этот файл не подключила —
календарь на ней остался чужим. */
.ui-datepicker:has(> table.mtz-monthpicker),
div[id^="monthpicker_"] {
width: 236px !important; padding: 8px !important;
background: var(--sx-bg-elev-2) !important;
border: 1px solid var(--sx-line-strong) !important;
border-radius: var(--sx-radius) !important;
box-shadow: var(--sx-shadow-modal);
color: var(--sx-text-dim);
font-family: inherit;
}
div[id^="monthpicker_"] .ui-datepicker-header {
background: transparent !important; border: 0 !important;
padding: 0 0 8px !important; text-align: center;
}
div[id^="monthpicker_"] select.mtz-monthpicker-year {
width: 100%; height: 30px; padding: 2px 8px;
background: var(--sx-bg-elev) !important;
color: var(--sx-text) !important;
border: 1px solid var(--sx-line) !important;
border-radius: var(--sx-radius-sm);
font-size: 13px; font-weight: 600; text-align: center;
outline: none;
}
/* поле года получает фокус при открытии — снимаем синюю рамку браузера */
div[id^="monthpicker_"] select.mtz-monthpicker-year:focus {
border-color: var(--sx-violet) !important;
box-shadow: 0 0 0 3px var(--sx-violet-soft);
outline: none;
}
div[id^="monthpicker_"] table.mtz-monthpicker {
width: 100%; margin: 0; border-collapse: separate; border-spacing: 4px;
}
div[id^="monthpicker_"] td.mtz-monthpicker-month {
padding: 7px 0 !important; text-align: center;
font-size: 12px; font-weight: 500;
color: var(--sx-text-dim) !important;
background: var(--sx-fill-subtle) !important;
border: none !important;
border-radius: var(--sx-radius-sm);
cursor: pointer !important;
transition: background .12s, color .12s;
}
div[id^="monthpicker_"] td.mtz-monthpicker-month:hover {
background: var(--sx-violet-soft) !important;
color: var(--sx-text) !important;
}
div[id^="monthpicker_"] td.ui-state-active {
background: linear-gradient(100deg, var(--sx-grad-from) 0%, var(--sx-grad-mid) 52%, var(--sx-grad-to) 100%) !important;
color: var(--sx-on-violet) !important;
}
/* недоступные месяцы: зачёркнуты, а не просто бледные — видно, что это запрет */
div[id^="monthpicker_"] td.ui-state-disabled,
div[id^="monthpicker_"] td.ui-state-disabled:hover {
background: transparent !important;
color: var(--sx-text-faint) !important;
text-decoration: line-through;
cursor: not-allowed !important;
}
/* ── Поля даты ───────────────────────────────────────────────────────
Способов выбрать дату в системе три: самодельный календарь с кнопкой рядом,
такая же кнопка, приклеенная к полю, и родное браузерное поле. Свести их к
одному поведению — отдельная работа, она трогает скрипты. Здесь они сведены
к одному виду: поле как все прочие, иконка календаря одного размера и
нейтральная — акцент оставляем действиям, а не открытию календаря. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: var(--sx-picker-filter);
opacity: .55; cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
#datepicker-btn, .of-icon-btn, .pp-icon-btn {
height: 36px; width: 38px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--sx-fill-subtle);
border: 1px solid var(--sx-line-strong);
color: var(--sx-text-dim);
border-radius: var(--sx-radius-sm);
}
#datepicker-btn:hover, .of-icon-btn:hover, .pp-icon-btn:hover {
background: var(--sx-fill-subtle-2); color: var(--sx-text);
border-color: var(--sx-violet); filter: none; box-shadow: none;
}
/* Кнопка стояла отдельной строкой под полем: в шаблоне у неё нет обёртки
input-group, только span рядом с полем */
.input-group-btn.add-on { display: inline-block; vertical-align: top; margin-left: 6px; }
/* Карточки филиалов приподняты над страницей. Приём разный по темам, и это
не прихоть: на светлом работает тень, на тёмном она не видна вовсе — там
карточку поднимает подложка на ступень светлее панелей и тонкая светлая
грань сверху. Днём подложку намеренно не трогаем: страница уже темнее
панели, и затемнение карточки сократило бы разницу, а не увеличило. */
.br-card {
background: var(--sx-card-bg);
border: 1px solid var(--sx-line-strong);
box-shadow: inset 0 1px 0 var(--sx-card-top), var(--sx-shadow-card);
}
.br-card:hover { border-color: var(--sx-violet); }
/* Справочник в сумерках берёт строй списка «Требует внимания» со страницы
профиля: тип — тёплая плашка с цифрой-акцентом, название — светлое и
заметное, остальное приглушено, строка подсвечивается под курсором.
Приём заведён только для этой темы: в дне и ночи справочник уже согласован
с трекером, и переносить туда чужой строй значило бы ломать то согласие. */
:root[data-theme="dusk"] #dir-table > tbody > tr > td.dir-col-name { color: var(--sx-text); }
:root[data-theme="dusk"] #dir-table .dir-col-type .dir-chip {
background: var(--sx-amber-soft);
color: var(--sx-amber-text);
border-radius: 7px;
padding: 3px 9px;
font-weight: 600;
}
:root[data-theme="dusk"] #dir-table .dir-col-company .dir-chip {
background: var(--sx-fill-subtle-2);
color: var(--sx-text-dim);
}
:root[data-theme="dusk"] #dir-table > tbody > tr:hover > td { background: var(--sx-fill-subtle); }
/* ── Карточка компании ────────────────────────────────────────────────
Форма шаблона — bootstrap form-horizontal: одно поле в строке, подпись в
узкой колонке слева, само поле на всю оставшуюся ширину. На широком экране
«Телефон» растягивался на тысячу пикселей, а страница уезжала в долгий
скролл. Здесь та же разметка раскладывается сеткой в три колонки с подписью
над полем — как на «New order».
Обёртка адреса раскрыта через display:contents, чтобы её поля попали в ту же
сетку, а не остались отдельным блоком. Сложные блоки (сценарии оплаты,
форматы фабрики, адреса доставки) идут во всю ширину: внутри у них своя
вёрстка, ломать её не нужно. */
#cmp-pane-details #signupForm {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px 22px;
align-items: start;
}
#cmp-pane-details #adress-selector { display: contents; }
#cmp-pane-details #scenarios_div,
#cmp-pane-details #format-selector,
#cmp-pane-details #signupForm > .collapse,
#cmp-pane-details #signupForm > .alert { grid-column: 1 / -1; }
#cmp-pane-details .form-group {
border-bottom: 0 !important;
margin: 0;
padding: 9px 0 0;
}
/* Раскладываем только простые строки «подпись + поле»: это прямые дети формы и
блока адреса. Внутри сценариев оплаты и форматов фабрики своя колоночная
вёрстка, и её трогать нельзя — иначе чекбоксы выстраиваются в столбик. */
#cmp-pane-details #signupForm > .form-group > label.control-label,
#cmp-pane-details #adress-selector > .form-group > label.control-label {
float: none; width: auto; text-align: left; display: block;
padding: 0 0 4px;
font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
color: var(--sx-text-faint);
}
#cmp-pane-details #signupForm > .form-group > div[class*="col-"],
#cmp-pane-details #adress-selector > .form-group > div[class*="col-"] {
float: none; width: auto; padding: 0;
}
/* Строки без подписи — это свёрнутые списки адресов и портов, им нужна вся ширина */
#cmp-pane-details #signupForm > .form-group:not(:has(> label.control-label)) { grid-column: 1 / -1; }
#cmp-pane-details #signupForm > button { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
#cmp-pane-details #signupForm > button#submit { justify-self: end; }
/* Адрес в две строки обрезался: поле осталось высотой в одну */
#cmp-pane-details textarea.form-control { min-height: 64px; }
/* Возврат к списку — действие второстепенное, а в шаблоне оно было главной
кнопкой. Табы поднимаем к заголовку, как на остальных страницах. */
.goback.btn-theme {
background: var(--sx-fill-subtle);
border: 1px solid var(--sx-line-strong);
color: var(--sx-text-dim);
}
.goback.btn-theme:hover, .goback.btn-theme:focus {
background: var(--sx-fill-subtle-2); color: var(--sx-text); filter: none; box-shadow: none;
}
/* Шеврон в заголовке страницы стоял вплотную к тексту */
h4 > .fa-angle-right, h3 > .fa-angle-right { margin-right: 7px; }
/* Открытая строка заказа. Раньше JS красил её сплошным #635bcd прямо в style,
а текст ячеек оставался прежним — строка превращалась в нечитаемую полосу.
Мягкая заливка помечает строку не хуже, но не спорит ни с текстом, ни со
статусами и точками внутри неё. */
#hidden-table-info_wrapper table.dataTable > tbody > tr.tr-open > td,
#hidden-table-info tbody tr.tr-open > td {
background: var(--sx-violet-soft);
}
#hidden-table-info tbody tr.tr-open > td:first-child {
box-shadow: inset 2px 0 0 var(--sx-violet);
}
/* Мгновенная подсказка трекера (tracker_tips.js) */
.tr-tip {
position: fixed; z-index: 3000; max-width: 320px; padding: 7px 10px;
background: var(--sx-bg-elev-2); color: var(--sx-text); font-size: 12px; line-height: 1.4;
border: 1px solid var(--sx-line); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45); pointer-events: none;
opacity: 0; transition: opacity .1s; white-space: normal;
}
.tr-tip.show { opacity: 1; }
.tr-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tr-dot.on { background: var(--sx-dot-on); }
.tr-dot.off { background: var(--sx-line); border: 1px solid var(--sx-line-strong); }
.tr-dot.na { background: transparent; border: 1px dashed var(--sx-line-strong); }
.tr-dot.part { background: var(--sx-amber-text, #F0CE6A); }
/* Карточка «что внесено» у точек Data (tracker_tips.js, класс is-card) */
.tr-tip.is-card { min-width: 300px; max-width: 560px; padding: 10px 12px; border-color: var(--sx-line-strong); }
.tr-tip-head { font-weight: 600; margin-bottom: 6px; color: var(--sx-text); }
.tr-tip-row { display: grid; grid-template-columns: 14px 118px 1fr; gap: 6px; padding: 2px 0; }
.tr-tip-mark { font-weight: 700; text-align: center; }
.tr-tip-label { color: var(--sx-text-dim); }
.tr-tip-row.is-on .tr-tip-mark { color: var(--sx-dot-on); }
.tr-tip-row.is-off .tr-tip-mark { color: var(--sx-coral-text, var(--sx-coral)); }
.tr-tip-row.is-part .tr-tip-mark { color: var(--sx-amber-text, #F0CE6A); }
.tr-tip-row.is-off .tr-tip-val, .tr-tip-row.is-na .tr-tip-val, .tr-tip-row.is-na .tr-tip-mark { color: var(--sx-text-faint); }
.tr-view-toggle { display: inline-flex; margin-left: 14px; vertical-align: middle; border: 1px solid var(--sx-line-strong); border-radius: 14px; overflow: hidden; font-size: 12px; font-weight: 600; }
.tr-view-toggle a { padding: 3px 12px; color: var(--sx-text-dim); }
.tr-view-toggle a.active { background: linear-gradient(100deg, var(--sx-grad-from) 0%, var(--sx-grad-mid) 52%, var(--sx-grad-to) 100%); color: var(--sx-on-violet); }
.tr-view-toggle a:hover { text-decoration: none; }
/* Раскладка страницы трекера: шапка → фильтры → чипы+поиск → таблица, без пустых полос */
.tracker-page .tracker-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.tracker-page .tracker-head h3 { margin: 0; flex: 1; }
.tracker-page .tracker-head-actions { display: flex; gap: 6px; }
.tracker-page .content-panel.tracker-panel { padding: 6px 10px 4px; margin-bottom: 0; }
.tracker-page .full.mb { margin-bottom: 0; }
.tracker-page .dataTables_wrapper .dataTables_scrollHead { margin-top: 0; }
.tracker-filter-row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.tracker-filter-row .form-group { flex: 1 1 150px; min-width: 140px; max-width: 260px; }
.tracker-filter-row .tr-f-date { flex: 0 0 180px; }
.tracker-filter-row .tr-f-branch { flex: 0 0 190px; }
.tracker-chips .dataTables_filter { margin-left: auto; float: none; flex: 0 0 auto; width: auto; text-align: left; }
.tracker-chips .dataTables_filter label { margin: 0; font-size: 11px; color: var(--sx-text-faint); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.tracker-chips .dataTables_filter input { width: 200px; height: 26px; padding: 2px 8px; font-size: 12px; margin: 0; display: inline-block;
background: var(--sx-bg-elev-2); color: var(--sx-text); border: 1px solid var(--sx-line); border-radius: 6px; box-shadow: none; }
.tracker-chips .dataTables_filter input:focus { border-color: var(--sx-violet); outline: none; }
.tracker-chips .tracker-totals { margin-left: 14px; }
.tracker-filters { margin: 6px 0 4px; }
.tracker-filters label { font-size: 11px; color: var(--sx-text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.tracker-filters .form-group { margin-bottom: 6px; }
.tracker-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.tr-chip { cursor: pointer; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--sx-line-strong); color: var(--sx-text-dim); font-size: 12px; user-select: none; }
.tr-chip.active { background: linear-gradient(100deg, var(--sx-grad-from) 0%, var(--sx-grad-mid) 52%, var(--sx-grad-to) 100%); border-color: transparent; color: var(--sx-on-violet); }
/* Кнопки-памяти View 1 / View 2: как чипы, но с квадратным углом — это не фильтр, а сохранённый вид */
.tr-views { display: inline-flex; gap: 6px; margin-left: 4px; vertical-align: middle; }
.tr-view { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--sx-line-strong); color: var(--sx-text-dim); font-size: 12px; user-select: none; white-space: nowrap; }
.tr-view:hover { color: var(--sx-text); border-color: var(--sx-violet); }
.tr-view.is-empty { border-style: dashed; color: var(--sx-text-faint); }
.tr-view.is-active { border-color: var(--sx-violet); color: var(--sx-text); background: var(--sx-violet-soft); }
.tr-view-save { font-size: 11px; color: var(--sx-text-faint); opacity: .55; }
.tr-view:hover .tr-view-save { opacity: 1; }
.tr-view-save:hover { color: var(--sx-violet); }
.tracker-totals { margin-left: auto; color: var(--sx-text-dim); font-size: 12px; white-space: nowrap; }
.tracker-totals b { color: var(--sx-text); }
/* Кнопки-иконки в строках (раскрыть, редактировать, документы) */
.tr-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0; margin: 0;
border: 1px solid var(--sx-line); border-radius: 6px;
background: var(--sx-fill-subtle); color: var(--sx-text-dim);
font-size: 11px; line-height: 1; cursor: pointer; vertical-align: middle;
transition: background .12s, color .12s, border-color .12s;
}
.tr-icon-btn:hover, .tr-icon-btn:focus { background: var(--sx-violet-soft); border-color: var(--sx-violet); color: var(--sx-text); outline: none; text-decoration: none; }
.tr-icon-btn i { transition: transform .15s; }
.tr-icon-btn.open i { transform: rotate(180deg); }
.lots-table .lot-row { cursor: pointer; }
.lots-table .lot-row:hover td { background: var(--sx-fill-subtle); }
.lots-table .lot-orders > td { padding: 6px 10px 10px; }
.lots-table .lot-orders table { margin: 0; background: var(--sx-stripe); }
.lots-table .lot-orders table > thead > tr > th { font-size: 10px; color: var(--sx-text-faint); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--sx-line); }
.lots-table .lot-orders table > tbody > tr > td { padding: 4px 7px; font-size: 12px; vertical-align: middle; }
.lots-table .num, .lots-table .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.lots-table .pos { color: var(--sx-teal); font-weight: 600; }
.lots-table .neg { color: var(--sx-coral); font-weight: 600; }
/* Управление таблицей: поиск, «показывать N», подпись — в тон */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 12px; }
/* Прочее */
.nav-tabs > li > a { padding: 8px 12px; font-size: 13px; }
.alert { padding: 10px 13px; }
.modal-header, .modal-body { padding: 13px; }
/* ──────────────────────────────────────────────────────────────────────────
Таблица товаров заказа (карточка заказа и раскрытая строка трекера).
Раньше: bootstrap table-bordered + светлая шапка table-success — рамка на
каждой ячейке и бледная полоса, выпадающая из тёмной темы.
────────────────────────────────────────────────────────────────────────── */
.order-products {
width: 100%;
margin: 4px 0 10px;
font-size: 13px;
border-collapse: separate;
border-spacing: 0;
background: var(--sx-stripe);
border: 1px solid var(--sx-fill-subtle-2);
border-radius: 10px;
overflow: hidden;
}
.order-products thead th {
background: var(--sx-fill-subtle);
color: var(--sx-text-faint);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
padding: 9px 12px;
border: none;
border-bottom: 1px solid var(--sx-line);
vertical-align: middle;
}
.order-products tbody td {
padding: 9px 12px;
border: none;
border-top: 1px solid var(--sx-fill-subtle);
color: var(--sx-text-dim);
vertical-align: middle;
white-space: nowrap;
}
.order-products tbody tr:first-child td { border-top: none; }
.order-products tbody tr:hover td { background: var(--sx-fill-subtle); }
.order-products td.num { text-align: right; font-variant-numeric: tabular-nums; }
.order-products td.strong { font-weight: 600; color: var(--sx-text); }
.order-products td.actions { white-space: nowrap; }
.order-products td.actions .btn { margin-left: 4px; }
.order-products td.actions .btn:first-child { margin-left: 0; }
/* Кнопки действий: ровные и неяркие — ими пользуются по одной на строку */
.order-products td.actions .btn-info,
.order-products td.actions .btn-danger {
padding: 3px 10px;
font-size: 12px;
line-height: 18px;
border-radius: 6px;
}
.order-products td.actions .btn-danger {
background: transparent;
border: 1px solid var(--sx-coral);
color: var(--sx-coral);
}
.order-products td.actions .btn-danger:hover {
background: var(--sx-coral-soft);
border-color: var(--sx-coral);
color: var(--sx-coral);
}
/* Подпись со значениями, одинаковыми во всех заказах: формат, тип, толщина,
сертификаты. Они не выводятся колонками, чтобы не занимать ширину. */
.order-products-note {
font-size: 12px;
color: var(--sx-text-faint);
margin: 2px 0 6px;
}
/* Единица измерения второй строкой под названием — подпись остаётся узкой */
.order-products thead th small {
display: block;
font-size: 10px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
opacity: .75;
margin-top: 1px;
}
.order-products thead th.num { text-align: right; }
/* ──────────────────────────────────────────────────────────────────────────
Раскрытая строка трекера: панель действий + карточка с товарами заказа
────────────────────────────────────────────────────────────────────────── */
.order-details-cell {
padding: 0 !important;
border: none !important;
background: var(--sx-bg) !important;
}
.order-details {
padding: 14px 16px 16px;
margin: 8px 10px 12px;
background: var(--sx-bg-elev-2);
border: 1px solid var(--sx-line);
border-radius: var(--sx-radius);
}
/* DataTables оборачивает ответ сервера в собственную ячейку: оформление вешаем на неё,
иначе вложенный | из ответа браузер отбрасывает как недопустимый. */
table.dataTable tbody tr.LP > td,
table.dataTable tbody tr.LP:hover > td {
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.order-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 12px;
}
.order-actions .btn {
float: none;
width: auto;
padding: 5px 12px;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.order-actions .btn i { margin-right: 5px; }
/* Удаление: заметно, но не кричит — рядом с ним стоят обычные действия */
.btn-quiet-danger {
background: transparent;
border: 1px solid rgba(255, 107, 111, 0.45);
color: var(--sx-coral);
}
.btn-quiet-danger:hover,
.btn-quiet-danger:focus {
background: rgba(255, 107, 111, 0.14);
border-color: var(--sx-coral);
color: var(--sx-coral);
}
/* ──────────────────────────────────────────────────────────────────────────
Форма товара в модальном окне (Edit / Add product).
Чекбоксы здесь — переключатели с подписью справа: в теме есть общее правило
input[type=checkbox] на 50px, а с классом form-control они становились
блочными пустыми квадратами под длинными подписями.
────────────────────────────────────────────────────────────────────────── */
.product-form .pf-section { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--sx-line); }
.product-form .pf-section:last-of-type { border-bottom: none; margin-bottom: 4px; }
.product-form .pf-caption {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--sx-text-faint); margin: 0 0 10px 15px;
}
.product-form .pf-field { margin-bottom: 4px; }
.product-form .pf-field > label {
display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .04em; color: var(--sx-text-faint); margin-bottom: 5px;
}
.product-form .pf-inline { display: flex; align-items: center; gap: 10px; }
.product-form .pf-inline .form-control { flex: 1; min-width: 0; }
.product-form .pf-checks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px; }
.product-form .pf-check {
display: inline-flex; align-items: center; gap: 8px; margin: 0;
padding: 7px 13px; border: 1px solid var(--sx-line-strong); border-radius: 999px;
font-size: 13px; font-weight: 400; color: var(--sx-text-dim); cursor: pointer;
white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.product-form .pf-check:hover { border-color: var(--sx-violet); color: var(--sx-text); }
.product-form .pf-check.on { background: var(--sx-violet-soft); border-color: var(--sx-violet); color: var(--sx-text); }
.product-form .pf-check input[type="checkbox"] {
width: 15px !important; height: 15px; flex: 0 0 15px; margin: 0 !important;
border-radius: 4px; border: 1.5px solid var(--sx-line-strong) !important;
background-color: transparent !important; position: relative;
}
.product-form .pf-check input[type="checkbox"]:checked {
background-color: var(--sx-violet) !important; border-color: var(--sx-violet) !important;
}
.product-form .pf-check input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 4px; top: 0.5px; width: 4px; height: 8px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); font-size: 0; line-height: 0;
}
.product-form .pf-check input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
.product-form .pf-footer {
display: flex; justify-content: flex-end;
padding-top: 14px; border-top: 1px solid var(--sx-line);
}
/* --- Переключатель темы в шапке -------------------------------------- */
.sx-theme-toggle {
background: transparent; border: 1px solid var(--sx-line-strong);
color: var(--sx-text-dim); border-radius: 999px;
width: 30px; height: 30px; line-height: 1; padding: 0;
margin-right: 10px; cursor: pointer;
/* пункты top-menu плавающие, у кнопки Logout свой margin-top: 15px —
это смещение выравнивает переключатель по её центру */
margin-top: 16px; vertical-align: middle;
}
.sx-theme-toggle:hover, .sx-theme-toggle:focus {
color: var(--sx-text); border-color: var(--sx-violet);
background: var(--sx-violet-soft); outline: none;
}
/* --- Страница «Мой аккаунт» (/user) -----------------------------------
Раньше здесь был дашборд с шестью десятками графиков. Теперь — короткая
личная сводка: кто я, что в работе, чего не хватает. Всё на токенах темы,
поэтому одинаково читается и в ночной, и в дневной. */
.user-page { padding-bottom: 24px; }
.user-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.user-avatar {
flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--sx-violet) 0%, var(--sx-violet-hi) 100%);
color: var(--sx-on-violet); font-size: 19px; font-weight: 600; letter-spacing: .02em;
}
.user-id { flex: 1; min-width: 0; }
.user-id h3 { margin: 0 0 2px; font-size: 20px; }
.user-sub { font-size: 13px; color: var(--sx-text-dim); }
.user-sub .user-role {
display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
background: var(--sx-violet-soft); color: var(--sx-violet-2); margin-right: 4px;
}
.user-inactive { color: var(--sx-coral); }
.user-meta { font-size: 11px; color: var(--sx-text-faint); margin-top: 2px; }
.user-head-actions { display: flex; gap: 6px; }
.user-periods { margin: 0 0 10px; }
.user-periods .tr-chip { text-decoration: none; }
.user-periods .tr-chip:hover { color: var(--sx-text); text-decoration: none; }
.user-period-note { margin-left: 10px; font-size: 11px; color: var(--sx-text-faint); }
/* Плитки */
.user-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.user-tile {
display: block; padding: 12px 14px; border-radius: var(--sx-radius);
background: var(--sx-bg-elev); border: 1px solid var(--sx-line);
color: var(--sx-text-dim); text-decoration: none; transition: border-color .12s, transform .12s;
}
.user-tile:hover { border-color: var(--sx-violet); color: var(--sx-text-dim); text-decoration: none; transform: translateY(-1px); }
.user-tile .ut-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-text-faint); }
.user-tile .ut-value { font-size: 26px; font-weight: 600; color: var(--sx-text); line-height: 1.25; margin: 2px 0; font-variant-numeric: tabular-nums; }
.user-tile .ut-value small { font-size: 13px; font-weight: 400; color: var(--sx-text-faint); }
.user-tile .ut-sub { font-size: 11px; color: var(--sx-text-faint); min-height: 15px; }
.user-tile.warn .ut-value { color: var(--sx-amber-text); }
.user-tile.warn { border-color: var(--sx-amber-soft); }
/* Панели */
.user-panel { padding: 12px 14px; margin-bottom: 10px; }
.user-panel-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-text-faint); margin-bottom: 10px; }
.user-panel-head small { text-transform: none; letter-spacing: 0; color: var(--sx-text-dim); }
.user-empty { font-size: 13px; color: var(--sx-text-faint); padding: 6px 0; }
.user-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.user-foot { font-size: 12px; color: var(--sx-text-faint); padding: 2px 2px 0; }
/* Полоса статусов */
.status-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; gap: 2px; }
.status-bar .sb-seg {
display: flex; align-items: center; justify-content: center; min-width: 4px;
font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer;
transition: filter .12s;
}
.status-bar .sb-seg:hover { filter: brightness(1.08); text-decoration: none; }
.status-bar .sb-seg span { opacity: .95; }
.status-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.status-legend a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sx-text-dim); text-decoration: none; }
.status-legend a:hover { color: var(--sx-text); text-decoration: none; }
.status-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-legend b { color: var(--sx-text); font-variant-numeric: tabular-nums; }
/* Требует внимания */
.att-row {
display: flex; align-items: center; gap: 12px; padding: 8px 6px;
border-top: 1px solid var(--sx-line); color: var(--sx-text-dim); text-decoration: none;
}
.att-row:first-of-type { border-top: none; }
.att-row:hover { background: var(--sx-fill-subtle); color: var(--sx-text-dim); text-decoration: none; }
.att-n {
flex: 0 0 46px; text-align: center; padding: 3px 0; border-radius: 7px;
background: var(--sx-amber-soft); color: var(--sx-amber-text);
font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.att-text { flex: 1; display: flex; flex-direction: column; }
.att-text b { font-size: 13px; font-weight: 500; color: var(--sx-text); }
.att-text small { font-size: 11px; color: var(--sx-text-faint); }
.att-row .fa { color: var(--sx-text-faint); }
/* Столбики оборота */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: help; }
.spark-bar { background: var(--sx-violet); border-radius: 3px 3px 0 0; transition: background .12s; min-height: 2px; }
.spark-col:hover .spark-bar { background: var(--sx-violet-hi); }
.spark-lab { font-size: 9px; color: var(--sx-text-faint); text-align: center; margin-top: 4px; white-space: nowrap; }
/* Аккаунт */
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin-bottom: 12px; }
.acc-grid > div { font-size: 13px; color: var(--sx-text); }
.acc-grid label { display: block; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-text-faint); font-weight: 400; }
.acc-theme { display: inline-block; margin-left: 8px; }
.acc-form { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sx-line); }
.acc-form.open { display: block; }
.acc-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.acc-form-grid label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-text-faint); margin-bottom: 2px; }
.acc-form-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 1100px) {
.user-tiles { grid-template-columns: repeat(2, 1fr); }
.user-cols { grid-template-columns: 1fr; }
.acc-grid, .acc-form-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Число филиалов в шапке профиля: список показывается подсказкой (tracker_tips.js) */
.user-branches { border-bottom: 1px dotted var(--sx-line-strong); cursor: help; }
/* Ссылки внутри таблиц DataTables: в app.css им прибит белый цвет селектором
сильнее нашего, поэтому на светлом фоне они исчезали. */
table.dataTable td a { color: var(--sx-violet-2); }
table.dataTable td a.tr-f { color: inherit; }
.wht-bg h4 { color: var(--sx-text-dim); }
/* Белый текст без собственного фона. В шаблоне это работало, потому что фон был
всегда тёмным; на светлой теме такие надписи исчезают. Страницу логина сюда не
включаем — она намеренно остаётся ночной. */
.fc-grid .fc-day-number { color: var(--sx-text-dim); }
/* Сегодняшний день залит акцентом — число на нём должно быть контрастным. */
.fc-state-highlight .fc-day-number,
td.fc-state-highlight .fc-day-number { color: var(--sx-on-violet); }
.fc-header-title h2 { color: var(--sx-text) !important; }
.credits, .credits a, #copyrights p, #copyrights a { color: var(--sx-text-dim); }
.table-advance thead th { color: var(--sx-text); }
.dropdown-menu.extended.logout > li:last-child > a { color: var(--sx-text-dim); }
.panel.terques-chart .chart-tittle .value,
.user-head .user-name h5 a,
#showtime,
#add-product-card .card-header h4,
#edit-product-card .card-header h4 { color: var(--sx-text); }
.chat-tools i { color: var(--sx-text-dim); }
/* Приглушённый текст: в aqualeaf-custom он прибит литералом с !important. */
.text-muted, .dashBcards .text-muted { color: var(--sx-text-faint) !important; }
/* Вход и безопасность на странице пользователя */
.sec-dim { color: var(--sx-text-faint); font-size: 12px; margin-left: 6px; }
.sec-warn { color: var(--sx-coral-text); font-weight: 600; }
.sec-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.sec-table th { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sx-text-faint); padding: 4px 6px; border-bottom: 1px solid var(--sx-line); text-align: left; }
.sec-table td { font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--sx-line); color: var(--sx-text); }
.sec-table td.muted { color: var(--sx-text-faint); }
.sec-ev { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; background: var(--sx-fill-subtle-2); color: var(--sx-text-dim); }
.sec-ev[data-event="success"] { background: var(--sx-teal-soft); color: var(--sx-teal-text); }
.sec-ev[data-event="failed"] { background: var(--sx-amber-soft); color: var(--sx-amber-text); }
.sec-ev[data-event="locked"] { background: var(--sx-coral-soft); color: var(--sx-coral-text); }
.sec-note { font-size: 12px; color: var(--sx-text-faint); margin-top: 10px; }
/* Источник веса брутто: норматив (по умолчанию, без пометки), документ завода, ручной ввод */
.product-form .pf-src { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--sx-text-faint); }
.product-form .pf-src-document { color: var(--sx-teal-text); }
.product-form .pf-src-manual { color: var(--sx-amber-text); }
.tr-wsrc { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; margin-left: 3px; padding: 1px 4px; border-radius: 4px; background: var(--sx-fill-subtle); color: var(--sx-text-faint); }
.tr-wsrc-document { color: var(--sx-teal-text); }
.tr-wsrc-manual { color: var(--sx-amber-text); }
/* Расхождение с документом завода: заказ ждёт решения человека */
.tr-attn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: 10.5px; font-weight: 600; cursor: help; vertical-align: middle;
background: var(--sx-amber-soft); color: var(--sx-amber-text); }
.tr-attn i { font-size: 10px; }
.sidebar .menu-badge, #sidebar .menu-badge, .menu-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; background: var(--sx-amber-soft); color: var(--sx-amber-text); vertical-align: 1px; }
/* Метка «Agent»: действие выполнил агент ввода документов (автор пустой). Одна на всю систему:
история заказа, Needs attention, счета экспедиторов */
.sx-agent { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px;
background: var(--sx-violet-soft); color: var(--sx-violet-hi, var(--sx-violet)); white-space: nowrap; vertical-align: middle; }
.sx-agent .fa { font-size: 10px; }
.sx-open-events { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px;
background: var(--sx-amber-soft); color: var(--sx-amber-text); vertical-align: middle; }
/* События по счёту экспедитора на его странице */
.fi-events { border: 1px solid var(--sx-line-strong); border-radius: var(--sx-radius-sm, 8px); margin: 4px 0 14px; font-size: 12px; overflow: hidden; }
.fi-events.is-open { border-color: var(--sx-amber-text); }
.fi-events-head { padding: 7px 10px; font-weight: 600; background: var(--sx-fill-subtle, rgba(255,255,255,0.04)); }
.fi-events.is-open .fi-events-head { background: var(--sx-amber-soft); color: var(--sx-amber-text); }
.fi-event { padding: 6px 10px; border-top: 1px solid var(--sx-line); }
.fi-event.is-done { opacity: .6; }
/* Tracker → Lots: заказ клиента — ход отгрузки, отгрузки по коносаментам, группы в раскрытой строке */
.lot-progress { min-width: 170px; }
.lot-state { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; }
.lot-state.is-not_shipped { background: var(--sx-fill-subtle, rgba(255,255,255,0.05)); color: var(--sx-text-dim); }
.lot-state.is-partly { background: var(--sx-amber-soft); color: var(--sx-amber-text); }
.lot-state.is-shipped { background: var(--sx-violet-soft); color: var(--sx-violet-hi, var(--sx-violet)); }
.lot-state.is-closed { background: var(--sx-teal-soft); color: var(--sx-teal-text); }
.lot-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin: 5px 0 3px; background: var(--sx-line); max-width: 160px; }
.lot-bar i { display: block; height: 100%; }
.lot-bar .is-inv { background: var(--sx-teal-text); }
.lot-bar .is-ship { background: var(--sx-violet, #7c5cff); }
.lot-bar .is-rest { background: transparent; }
.lot-ships { white-space: normal; min-width: 180px; max-width: 280px; }
.lot-ship { display: block; font-size: 12px; line-height: 1.5; }
.lot-ship small { color: var(--sx-text-faint); }
.lot-group td { background: var(--sx-fill-subtle, rgba(255,255,255,0.04)); font-size: 12px; color: var(--sx-text-dim); }
/* Меню выбора колонок — трекер и Shipments (перенесено из Tracker/index.blade.php) */
/* Четыре группы в четыре столбца; при узком окне столбцы переносятся */
.tr-cols-wrap { position: relative; }
.tr-cols-menu { display: none; position: absolute; z-index: 50; top: 32px; left: 0; width: max-content; max-width: calc(100vw - 24px);
background: var(--sx-bg-elev); border: 1px solid var(--sx-line-strong); border-radius: var(--sx-radius-sm, 8px); padding: 10px 10px 6px;
box-shadow: var(--sx-shadow-modal, 0 10px 30px rgba(0,0,0,0.45)); }
.tr-cols-menu .tr-cols-grid { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tr-cols-menu .tr-cols-group { min-width: 150px; }
.tr-cols-menu .tr-cols-head { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-text-faint); padding: 0 6px 4px; }
.tr-cols-menu label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 400; color: var(--sx-text-dim); text-transform: none;
letter-spacing: 0; margin: 0; padding: 3px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.tr-cols-menu label:hover { background: var(--sx-fill-subtle, rgba(255,255,255,0.06)); color: var(--sx-text); }
.tr-cols-menu input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 13px !important; height: 13px; flex: 0 0 13px; margin: 0 !important; border-radius: 3px;
border: 1.5px solid var(--sx-line-strong) !important; background-color: transparent !important; position: relative; cursor: pointer; }
.tr-cols-menu input[type="checkbox"]:checked { background-color: var(--sx-violet, #7c6cf0) !important; border-color: var(--sx-violet, #7c6cf0) !important; }
.tr-cols-menu input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 3px; top: 0; width: 3.5px; height: 7px;
border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.tr-cols-menu .tr-cols-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--sx-line); margin-top: 8px; padding: 7px 6px 2px; font-size: 12px; }
.tr-cols-menu .tr-cols-count { color: var(--sx-text-faint); margin-right: auto; }
.tr-cols-menu .tr-cols-foot a { color: var(--sx-text-dim); } .tr-cols-menu .tr-cols-foot a:hover { color: var(--sx-violet, #7c6cf0); text-decoration: none; }
/* Архив заказов (27.09.2026): пометка в трекере и режим «только просмотр» */
.tr-archived { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--sx-text-dim); border: 1px solid var(--sx-line-strong); vertical-align: 1px; }
.tr-archived-lock { color: var(--sx-text-faint); cursor: default; }
.sx-archive-banner { display: flex; gap: 8px; align-items: center; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; border: 1px solid var(--sx-line-strong); background: var(--sx-fill-subtle); color: var(--sx-text-dim); font-size: 12.5px; }
.sx-archive-banner .fa { color: var(--sx-text-faint); }
/* ──────────────────────────────────────────────────────────────────────────
Таблицы отчётов (Reports: Overview, Sales, Products, Money, Economics).
Раньше: bootstrap table-bordered — рамка на каждой ячейке, а строка Total в
tfoot получала светлую рамку bootstrap и отдельную заливку (тема перекрашивала
границы только у thead и tbody). Теперь как таблица товаров заказа: карточка
со скруглением, только горизонтальные линии, итог — жирный, с чертой сверху,
на фоне таблицы (задача владельца 29.09.2026).
────────────────────────────────────────────────────────────────────────── */
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th { border-color: var(--sx-line) !important; }
.ec-table, .mo-table, .pr-table, .sales-table, .ov-table {
border-collapse: separate !important;
border-spacing: 0;
border: 1px solid var(--sx-fill-subtle-2) !important;
border-radius: 10px;
background: var(--sx-stripe);
font-size: 13px;
margin-bottom: 0;
}
/* Широкие отчёты (Order economics — 13 колонок) прокручиваются внутри блока, а не обрезаются */
.adv-table:has(> .ec-table), .adv-table:has(> .mo-table), .adv-table:has(> .pr-table),
.adv-table:has(> .sales-table), .adv-table:has(> .ov-table) { overflow-x: auto; margin-bottom: 16px; }
.ec-table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.ec-table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.ec-table > thead > tr > th, .mo-table > thead > tr > th, .pr-table > thead > tr > th,
.sales-table > thead > tr > th, .ov-table > thead > tr > th {
background: var(--sx-fill-subtle) !important;
color: var(--sx-text-faint);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
padding: 9px 12px !important;
border: none !important;
border-bottom: 1px solid var(--sx-line) !important;
vertical-align: bottom;
}
.ec-table > tbody > tr > td, .mo-table > tbody > tr > td, .pr-table > tbody > tr > td,
.sales-table > tbody > tr > td, .ov-table > tbody > tr > td {
padding: 8px 10px !important;
border: none !important;
border-top: 1px solid var(--sx-fill-subtle-2) !important;
vertical-align: middle;
}
.ec-table > tbody > tr:first-child > td, .mo-table > tbody > tr:first-child > td, .pr-table > tbody > tr:first-child > td,
.sales-table > tbody > tr:first-child > td, .ov-table > tbody > tr:first-child > td { border-top: none !important; }
.ec-table.table-striped > tbody > tr:nth-of-type(odd), .mo-table.table-striped > tbody > tr:nth-of-type(odd),
.pr-table.table-striped > tbody > tr:nth-of-type(odd), .sales-table.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.ec-table > tbody > tr:hover, .mo-table > tbody > tr:hover, .pr-table > tbody > tr:hover,
.sales-table > tbody > tr:hover, .ov-table > tbody > tr:hover { background: var(--sx-fill-subtle); }
.ec-table > tfoot > tr > td, .mo-table > tfoot > tr > td, .pr-table > tfoot > tr > td,
.sales-table > tfoot > tr > td, .ov-table > tfoot > tr > td,
.ec-table > tfoot > tr > th, .mo-table > tfoot > tr > th, .pr-table > tfoot > tr > th,
.sales-table > tfoot > tr > th, .ov-table > tfoot > tr > th {
background: transparent !important;
border: none !important;
border-top: 2px solid var(--sx-line) !important;
padding: 9px 12px !important;
font-weight: 700;
color: var(--sx-text);
}
|