/* =====================================================================
   ti24.css — единый визуальный слой для company / tech / waybill
   ---------------------------------------------------------------------
   Подключать ПОСЛЕДНИМ, после всех существующих стилей, в layout.jte:
       <link href="/css/ti24.css" rel="stylesheet" type="text/css">
   Ничего в JTE/JS менять не нужно — слой перекрывает вид по текущим
   классам. Доводка делается здесь же, итеративно.

   Темизация на сервис: задаётся переменными --accent / --bar (см. ниже).
   Плотность интерфейса: одна переменная --density (1 = норма,
   0.85 — компактнее, 1.1 — просторнее). Меняется в одном месте.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =====================================================================
   @layer legacy-base — бывший style.css (старая база: каркас, сайдбар,
   шапка, таблицы). Мёртвые правила выброшены при слиянии. Слой ПРОИГРЫВАЕТ
   всем незалэйренным стилям (page-CSS и правилам этого файла ниже) — это
   в точности воспроизводит прежний порядок загрузки «style.css первым».
   Новые правила писать ВНЕ слоя; отсюда — только удалять по мере доводки.
   ===================================================================== */
@layer legacy-base {
:root {
    --text-color: #000000;
    --border-extra-color: #fff;
    --border-color: #d3d3d3;
    --bg-color: #efefef;
    --bg-control-header: #d6d8e073;
    --bg-color-content: #fff;
    --border-color-control: #848484 #c1c1c1 #e1e1e1;
    --color-control: #000;
    --scroll-background-color: #f1f1f1;
    --scroll-thumb-color: #9ba1b1;
    --scroll-hover-color: #62697b;
}
html, body {
    height: 100%;
}
body {
    overflow-y: hidden;
    font-family: 'Roboto', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 0;
    margin: 0;
    font-size: 14px;
}
input.error {
    border-color: #ff0000 #ff9494 #ecd1d1;
    display: block;
}
select.error {
    border-color: #ff0000 #ff9494 #ecd1d1;
    display: block;
}
label.error, .err {
    color: red;
}
@media screen and (min-width: 600px) {
.logo {
        margin: 10px 50px;
}
}
@media screen and (max-width: 600px) {
.logo {
        margin: 10px 38px;
}
}
.multi-root {
    display: flex;
    margin: 0 auto;
    margin: 90px 3% 15px 3%;
}
.a-back-link {
    background: url(../images/arrow_blue_48.png) no-repeat;
    padding-left: 22px;
    background-size: 16px;
    color: #2a4262;
    background-position-y: 1px;;
}
.external-link {
    background: url(../images/link-ext-20.png) no-repeat;
    padding-right: 22px;
    background-size: 14px;
    background-position: right 14px center;
}
#scroll-pane {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}
#content-pane {
    overflow: hidden;
    padding: 80px 20px 4px 20px;
    margin: 0;
}
#loader {
    margin: 100px auto;
    width: 40px;
    height: 40px;
}
.pageable {
    display: inline-block;
    width: 100%;
}
.header {
    width: 100%;
    border-width: 0 1px;
    border-color: rgb(128, 128, 128);
    border-style: solid;
}
.body {
    overflow: auto;
    border-top: none;
}
input [type="text"] {
    max-width: 120px;
    height: 18px;
}
input[type="date"] {
    height: 24px;
}
select {
    border-radius: 0;
    padding: 2px 10px;
    background: var(--bg-color-content);
    height: 24px;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
a:hover {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.app {
    height: 100vh;
}
.logo {
    color: white;
    display: inline-block;
}
.title {
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 1px 2px 5px 0 rgb(0 0 0 / 14%), 0 1px 4px 0 rgb(0 0 0 / 12%);
    z-index: 10;
    height: 40px;
    top: 0;
    position: fixed;
    padding: 0.62em 1em;
    width: 100%;
    background-color: #353942;
}
.title > .logo {
    font-weight: bold;
    font-size: large;
}
.content {
    table-layout: auto;
    width: 100%;
    border-spacing: 1px;
    border-collapse: separate;
    border: 1px solid rgb(128, 128, 128);
    border-top: none;
}
.content thead {
    background-color: #d6d8e0;
}
.content > tbody > tr:hover {
    border-top: 1px solid #ccc;
    background-color: #eaecee;
}
.clickable > tbody > tr:hover {
    background-color: #3c42520f;
    cursor: pointer;
}
table {
    border-collapse: collapse;
    table-layout: fixed;
}
.body tr {
    border-top: 1px solid var(--border-color, #ddd);
    height: 30px;
}
tr > th {
    padding: 8px;
}
tr > td {
    padding: 2px 8px;
    text-align: left;
}
table > tfoot > tr {
    background-color: #cfd2db;
}
.fa {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.fa:hover {
}
.table-entity {
    width: 100%;
    border-collapse: separate;
    table-layout: auto;
    margin-top: 10px;
}
.table-entity td {
    vertical-align: top;
}
.icon-car {
    background: url("../images/outline_directions_car_white_18dp.png") no-repeat;
    background-size: contain;
}
.icon-company {
    background: url("../images/outline_emoji_transportation_white_18dp.png") no-repeat;
    background-size: contain;
}
.icon-driver {
    background: url("../images/driver.png") no-repeat;
    background-size: contain;
}
.icon-tasks {
    background: url("../images/tasks.png") no-repeat;
    background-size: contain;
}
.icon-api {
    background: url("../images/api32.png") no-repeat;
    background-size: contain;
}
.filter-block {
    margin: 10px 0;
    text-align: right;
}
.main-car-image {
    height: 175px;
    width: 310px;
    object-fit: contain;
}
.small-car-icon {
    height: 35px;
    cursor: pointer;
    display: block;
    width: 50px;
    object-fit: contain;
    background: #696969;
}
.ava {
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
}
button {
    padding: 5px 10px;
    color: black;
    cursor: pointer;
    background-color: #e7e7e7;
    border: 0.1em solid;
    border-color: #848484 #c1c1c1 #e1e1e1;
    outline: 0;
    font-weight: normal;
    font-family: 'Varela Round', sans-serif;
}
button:active {
    background-color: #ddd;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-sizing: border-box;
}
.button-icon {
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 0;
    border: 1px solid #ccc;
    background-color: #e7e7e7;
    cursor: pointer;
    float: left;
    color: #333;
    outline: 0;
    transition: all 0.1s;
}
.button-def:hover {
    background-color: #efefef;
    color: #111;
}
.button-def:active {
    background-color: #ddd;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-sizing: border-box;
}
button:active, input[type="submit"]:active, input[type="button"]:active {
    background-color: #ddd;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-sizing: border-box;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
}
button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled {
    color: #333333;
    background-color: #eee;
    box-shadow: none;
    border-color: #ccc #ccc #eee;
    cursor: auto;
}
button:disabled:hover, input[type="submit"]:disabled:hover, input[type="button"]:disabled:hover {
    color: #333333;
    background-color: #eee;
    box-shadow: none;
    border-color: #ccc #ccc #eee;
    cursor: auto;
}
input:focus, textarea:focus {
    outline: 1px solid #2c75d694;
    outline-offset: 1px;
}
.multi-list, #scrollPane {
    height: 55px;
    overflow: scroll;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.multi-select, #scrollPane {
    width: 100%;
}
#scrollPane {
    overflow: hidden;
    overflow-y: auto;
    overflow-x: auto;
    height: 100%;
    width: 100%;
}
#scrollPane form {
    margin-top: 100px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scroll-background-color, #f1f1f1);
}
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color, #9ba1b1);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover-color, #62697b);
}
.sidebar {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 57px;
    overflow: hidden;
    background-color: #303030;
    -webkit-transform: translateZ(0);
    visibility: visible;
    -webkit-backface-visibility: hidden;
    transform: translateX(-300px);
    transition: transform 250ms ease-in-out;
    z-index: 15;
}
header {
    background-color: #3C4252;
    width: 100%;
    display: block;
    padding: 0.75em 1em;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 10;
    position: relative;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}
input[type="submit"] {
    padding: 0 16px;
    letter-spacing: .5px;
    cursor: pointer;
    height: 24px;
    background-color: #e7e7e7;;
}
input[type="button"] {
    letter-spacing: .5px;
    cursor: pointer;
    height: 24px;
    background-color: #e7e7e7;;
}
#openSidebarMenu {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: fixed;
    z-index: 99;
    top: 22px;
    left: 15px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input, select {
    box-sizing: border-box;
    background-color: var(--bg-color-content);
    border: 0.1em solid;
    border-color: var(--border-color-control);
    color: var(--color-control);
    outline: 0;
    padding: 0 0.3em;
    height: 1.8em;
}
input:focus, select:focus, input:active, select:active, button:active, button:active {
    z-index: 1;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}
.pageable-control {
    margin: 0;
    padding: 0;
    border-collapse: separate;
}
.pageable-control > .button-control {
    width: 50px;
}
.spec-simple-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    padding: 0 16px;
    height: 32px;
    width: 180px;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    color: white;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
    background-color: #0c53b0;
}
.spec-button::before, .spec-simple-button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: 0;
    transition: opacity 0.2s;
}
.spec-button::after, .spec-simple-button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    padding: 50%;
    width: 32px; 
    height: 32px; 
    background-color: white;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 1s, transform 0.5s;
}
.spec-simple-button:hover, .spec-simple-outline:hover {
    box-shadow: 0 1px 1px -1px rgb(0 0 0 / 20%), 0 2px 4px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
.spec-button:hover::before, .spec-simple-button:hover::before {
    opacity: 0.08;
}
.spec-simple-button:active {
    background-color: #0c53b0;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 20%);
}
.spec-button:active::after, .spec-simple-button:active::after, .spec-simple-outline:active::after {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0s;
}
.spec-button:disabled, .spec-simple-button:disabled, .spec-button:disabled:hover, .spec-simple-button:disabled:hover {
    background-color: #00000012;
    box-shadow: none;
    cursor: initial;
    color: rgb(128, 128, 128);
}
.loader {
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.sidebar {
    box-shadow: 2px 0 4px -1px rgb(0 0 0 / 20%), 4px 0 5px 0 rgb(0 0 0 / 14%), 1px 0 10px 0 rgb(0 0 0 / 12%);
}
.sidebar-nav {
    position: relative;
    background-color: #21252B;
    height: 100%;
    font-weight: 400;
    padding-bottom: 6em;
    z-index: 9;
    overflow: hidden;
    padding-top: 1em;
    -webkit-overflow-scrolling: touch;
}
.sidebar-nav ul {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
}
.sidebar-nav ul li {
    margin-left: 0;
    padding-left: 0;
    display: inline-block;
    width: 100%;
}
.sidebar-nav ul li a {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5em 1em;
    position: relative;
    display: block;
}
.sidebar-nav ul li ul {
    background-color: #282C34;
}
.sidebar-nav ul li ul li a {
    padding-left: 100px;
}
.sidebar-nav ul li ul li a:hover {
    background-color: #5b61718a;
}
.sidebar-nav ul li a:hover {
    background-color: #5b61718a;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.sidebar-nav ul li i {
    font-size: 1.4em;
    padding-right: 1em;
    display: inline;
    vertical-align: middle;
    margin: 0 1em;
}
.sidebar .external-link {
    display: inline-block;
    margin: 10px 30px;
    color: rgb(136, 183, 226);
    background-image: url("../images/link-ext-20_light.png");
}
.sidebar .external-link:hover {
    text-decoration: underline;
}
.ui-widget-content {
    border: 1px solid #dddddd;
    background: var(--bg-color-content);
    color: var(--text-color);
}
.ui-widget.ui-widget-content {
    padding: 0;
    font-size: 1em;
    background: var(--bg-color-content);
    color: var(--text-color);
}
.ui-dialog .ui-dialog-buttonpane {
    background: var(--bg-color-content);
    color: var(--text-color);
}
.ui-dialog .ui-dialog-buttonpane button, .simple-btn {
    border: 1px solid #c1c1c1;
    padding: 5px 20px;
    background-color: #f5f5f5;
    transition: all 0.1s;
}
.ui-dialog .ui-dialog-buttonpane button:hover, .simple-btn:hover {
    box-shadow: none;
    background-color: #f7f7f7;
    border: 1px solid #a9a9a9;
}
.ui-dialog .ui-dialog-buttonpane button:active, .simple-btn:active {
    box-shadow: inset 0 1px 5px rgb(0 0 0 / 20%);
    background-color: #f0f0f0;
}
.ui-dialog .ui-dialog-buttonpane button:disabled, .simple-btn:disabled {
    opacity: 0.6;
    color: rgb(128, 128, 128);
    box-shadow: none;
    border: 1px solid #c1c1c1;
    background-color: #f5f5f5;
}
.ui-dialog .ui-dialog-content {
    text-align: center;
}
.ui-button .ui-icon:hover {
    box-shadow: none;
}
}

/* ---------------------------------------------------------------------
   ТОКЕНЫ. По умолчанию — тема COMPANY (синий).
   Для TECH и WAYBILL переопредели --accent* / --bar в своём приложении
   (одним правилом :root после подключения этого файла), примеры внизу.
--------------------------------------------------------------------- */
:root {
    --font:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono:  'IBM Plex Mono', ui-monospace, monospace;

    --ink:        #1b2330;   /* основной текст              */
    --muted:      #687180;   /* вторичный текст             */
    --faint:      #97a0ae;   /* подписи, плейсхолдеры        */

    --bg:         #f1f2f4;   /* фон контента                */
    --surface:    #ffffff;   /* карточки, таблицы, поля      */
    --line:       #e4e7eb;   /* границы                     */
    --line-soft:  #eef0f2;   /* внутренние разделители       */
    --head:       #fafbfc;   /* шапка таблиц                */
    --hover:      #f6f8f9;   /* ховер строки                */

    /* акцент сервиса (COMPANY по умолчанию) */
    --accent:      #2f6bb5;
    --accent-ink:  #27568f;  /* акцентный текст на светлом    */
    --accent-tint: #ebf1f9;  /* акцентная подложка           */
    --bar:         #222a39;  /* верхняя панель + сайдбар      */

    /* семантика статусов */
    --ok-bg:#e7f3ec;   --ok-fg:#2c7a4f;
    --warn-bg:#fbf1de; --warn-fg:#946312;
    --bad-bg:#fbeae8;  --bad-fg:#b23b2c;
    --neu-bg:#eef0f2;  --neu-fg:#6b7480;

    --r:   9px;   /* радиус карточек/полей */
    --r-sm:7px;   /* радиус кнопок         */

    --density: 0.9; /* ← ЕДИНАЯ ручка плотности интерфейса (подбирается тюнером) */
    --ti24-overlay: 1; /* маркер «слой активен» — JS (dialog() в jdvpro.js) читает его,
                          чтобы диалоги делать auto-size только при включённом дизайне;
                          без ti24.css маркера нет → JS работает по-старому (фикс. размеры) */
}

/* =====================================================================
   БАЗА
===================================================================== */
body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#content-pane { padding: calc(8px * var(--density)); margin-top: 84px; }

/* потолок ширины контента — чтобы на больших мониторах (34" и т.п.) таблицы
   не растягивались от края до края. Запас большой, но ограничение есть.
   .centered на боевых страницах имеет только margin:0 auto без max-width. */
#content-pane .centered { max-width: 1420px; margin-left: auto; margin-right: auto; }
/* (wb3) карта профиля участника ЭДО: верхние карты (.top-first/second-child) были шире
   нижних — выравниваем ширину; #top-div под общий потолок */
.top-first-child, .top-second-child { width: 600px; min-width: 600px; padding: 10px 30px; }
#top-div { max-width: 1420px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c2c8d0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aab2bd; }

a { color: var(--accent-ink); }

/* =====================================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================================== */
.title {
    height: 58px;
    /* фикс. бар — прижимаем к вьюпорту по горизонтали (без этого ширина уезжала
       за край при гор. переполнении контента и #auth-icon уходил за экран) */
    left: 0;
    right: 0;
    width: auto;
    box-sizing: border-box;
    /* слева оставляем место под гамбургер меню (он fixed, left:20) */
    padding: 0 24px 0 60px;
    display: flex;
    align-items: center;
    background-color: var(--bar);
    box-shadow: none;
    border-bottom: 1px solid rgba(0,0,0,.18);
}
.title > .logo {
    font-family: var(--font);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .01em;
    color: #eaedf2;
    margin: 0;
}
.auth-icon, #auth-icon { color: #c3cad6; font-size: 23px; cursor: pointer; }
/* иконка пользователя/выход — абсолютна (account.css), центрируем по высоте бара справа */
.title .auth-icon, .title #auth-icon { right: 24px; top: 50%; transform: translateY(-50%); margin: 0; }

/* «Сервис | Страница» слева: .logo = имя сервиса, .title-page — имя страницы за разделителем */
.title > .logo { display: flex; align-items: baseline; min-width: 0; margin-right: 220px; }
.title .title-page {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0;
    color: #a7b0bf;
    border-left: 1px solid rgba(255,255,255,.18);
    padding-left: 12px;
    margin-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ФИО справа, перед иконкой аккаунта (иконка абсолютна на right:24) */
.title .auth-name {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #b6becb;
    white-space: nowrap;
}

/* гамбургер по центру новой высоты панели */
.sidebarIconToggle { top: 21px; left: 20px; }

/* =====================================================================
   САЙДБАР  — светлый, как в концепте (белый рельс, акцент-тинт активного).
   Белые PNG-иконки легаси (icon-ti/icon-car…) инвертируем в тёмные фильтром.
===================================================================== */
.sidebar      { width: 264px; top: 58px; background-color: var(--surface); border-right: 1px solid var(--line); box-shadow: 2px 0 16px -10px rgba(20,28,46,.18); }
.sidebar-nav  { background-color: var(--surface); padding-top: 14px; }

.sidebar-nav ul li a {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;           /* основная навигация — весомая */
    padding: 10px 12px;
    margin: 2px 12px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-nav ul li a:hover { background-color: var(--hover); color: var(--ink); }

/* иконки: заменяем легаси-PNG на Material Symbols (уже подключены в layout.jte).
   гасим фон-картинку и рисуем глиф через ::before лигатурой по имени иконки. */
.sidebar-nav ul li i { font-size: 1.1em; margin: 0; padding: 0; }
.sidebar-nav ul li a i[class*="icon-"] {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    margin: 0 12px 0 0;
    background: none !important;   /* убрать легаси png */
    filter: none;
    vertical-align: middle;
}
.sidebar-nav ul li a i[class*="icon-"]::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-size: 22px; line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    font-feature-settings: 'liga' 1;
    color: var(--muted);
}
.sidebar-nav ul li a i.icon-company::before { content: "apartment"; }
.sidebar-nav ul li a i.icon-car::before     { content: "directions_car"; }
.sidebar-nav ul li a i.icon-driver::before  { content: "person"; }
.sidebar-nav ul li a i.icon-api::before     { content: "api"; }
.sidebar-nav ul li a i.icon-tasks::before   { content: "checklist"; }
.sidebar-nav ul li a i.icon-purge::before   { content: "delete_forever"; }
.sidebar-nav ul li a i.icon-profile::before { content: "store"; }
/* tech */
.sidebar-nav ul li a i.icon-ti::before          { content: "fact_check"; }
.sidebar-nav ul li a i.icon-master::before      { content: "engineering"; }
.sidebar-nav ul li a i.icon-schema::before      { content: "schema"; }
.sidebar-nav ul li a i.icon-certificate::before { content: "verified"; }
.sidebar-nav ul li a i.icon-tariff::before      { content: "payments"; }
.sidebar-nav ul li a i.icon-place::before       { content: "location_on"; }
.sidebar-nav ul li a i.icon-dispatcher::before  { content: "headset_mic"; }
/* waybill */
.sidebar-nav ul li a i.icon-participant::before { content: "groups"; }
.sidebar-nav ul li a i.icon-waybill::before     { content: "receipt_long"; }
.sidebar-nav ul li a i.icon-employee::before    { content: "badge"; }
/* иконка активного пункта — акцентом */
.sidebar-nav ul li a.active i[class*="icon-"]::before { color: var(--accent-ink); }

/* --- ПОДПУНКТЫ (вложенный ul) — как подчинённые: отступ под текст пункта,
   направляющая линия, мягче и мельче; свой ховер перекрывает тёмный легаси --- */
.sidebar-nav ul li ul {
    list-style: none;
    background: transparent;   /* гасим легаси-плашку #282C34 */
    margin: 2px 0 6px;
    padding: 0;
    position: relative;
}
.sidebar-nav ul li ul::before {
    content: ""; position: absolute;
    left: 28px; top: 2px; bottom: 6px;
    width: 1px; background: var(--line);
}
.sidebar-nav ul li ul li a {
    padding: 8px 12px 8px 40px;
    margin: 1px 12px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
}
.sidebar-nav ul li ul li a:hover { background-color: var(--hover); color: var(--ink); }

/* активный пункт — класс .active вешает js/ti24-active-nav.js по текущему URL */
.sidebar-nav ul li a.active {
    background-color: var(--accent-tint);
    color: var(--accent-ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);   /* акцентная полоса слева — сразу видно, где мы */
}
.sidebar-nav ul li a.active i[class*="icon-"] { opacity: .85; }
/* родитель активного подпункта — лёгкий акцент без заливки */
.sidebar-nav ul li a.active-parent { color: var(--accent-ink); font-weight: 600; }
/* внешние ссылки на соседние сервисы — отдельными строками снизу, с разделителем
   (на скрине они слипались в один ряд и обрезались по краю) */
.sidebar .external-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    margin: 0 12px;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar .external-link:hover { background-color: var(--hover); color: var(--ink); }
.sidebar .external-link i[class*="icon-"] { filter: invert(1); opacity: .5; }
/* разделитель перед блоком внешних ссылок даёт инлайн-обёртка в layout.jte;
   приглушим её жёсткую серую линию под светлый рельс */
.sidebar-nav > div[style*="border-top"] { border-top-color: var(--line) !important; }

/* =====================================================================
   КНОПКИ
===================================================================== */
.ti-button {
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    height: calc(36px * var(--density));
    padding: 0 18px;
    border-radius: var(--r-sm);
    transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ti-button:hover { box-shadow: none; filter: brightness(.96); }
.ti-button:active { box-shadow: none; filter: brightness(.92); }

/* Заливка основных кнопок идёт через --btn (по умолчанию = --accent). Tech
   переопределяет --btn в layout.jte на осветлённый цвет верхней панели (--bar),
   company/waybill остаются на акценте. Семантические (positive/action) не трогаем. */
.ti-button-normal,
.search-button       { background-color: var(--btn, var(--accent)); color: #fff; border: none; border-radius: var(--r-sm); }
.ti-button-normal:active { background-color: var(--btn, var(--accent)); }
/* легаси красит :hover в белый — держим акцент */
.ti-button-normal:hover,
.search-button:hover {
    background-color: var(--btn, var(--accent)) !important;
    color: #fff !important;
    filter: brightness(.93);
    box-shadow: none;
}

.ti-button-outline,
.ti-button-normal-outline {
    background-color: var(--surface);
    color: var(--accent-ink);
    border: 1px solid var(--line);
}
.ti-button-normal-outline { border-color: #d2d8df; }

.ti-button-action          { background-color: var(--bad-fg); border-color: var(--bad-fg); color: #fff; }
/* унификация «голых» button:hover ниже красит заливку в серый — держим семантический цвет */
.ti-button-action:hover {
    background-color: var(--bad-fg) !important;
    color: #fff !important;
    filter: brightness(.93);
    box-shadow: none;
}
.ti-button-action-outline  { background-color: var(--surface); border: 1px solid #d8a39c; color: var(--bad-fg); }

/* кнопка поиска в фильтрах — легаси делало её мелкой и квадратной.
   тянем по высоте к полю/фильтрам (38px) и центрируем содержимое */
.search-button {
    height: calc(38px * var(--density)) !important;
    min-height: calc(38px * var(--density));
    padding: 0 24px !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--r-sm) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.search-button:active { background-color: var(--btn, var(--accent)); filter: brightness(.9); box-shadow: none; }

/* выровнять высоту полей и фильтр-кнопок в строке поиска под кнопку */
.filter-block input,
.filter-block select,
.filter-block .ti-button,
.filter-block .ti-button-outline,
.filter-block .ti-button-normal-outline {
    height: calc(38px * var(--density));
    box-sizing: border-box;
}

/* унификация «голых» <button> и кнопок jQuery-UI диалогов */
button,
.ui-dialog .ui-dialog-buttonpane button,
.simple-btn {
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 16px;
    transition: background-color .15s ease, border-color .15s ease;
}
button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover { background-color: var(--hover); border-color: #d2d8df; box-shadow: none; }
button:active { box-shadow: none; background-color: var(--line-soft); }

/* =====================================================================
   ПОЛЯ ВВОДА
===================================================================== */
input, select, textarea {
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid #d6dbe1;
    border-radius: var(--r-sm);
    padding: 0 10px;
    height: calc(36px * var(--density));
}
textarea { padding: 9px 11px; height: auto; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input.error, select.error { border-color: #d99; }
label.error, .err { color: var(--bad-fg); font-size: 12.5px; }

/* =====================================================================
   ФИЛЬТРЫ / ПОИСК
===================================================================== */
.filter-block { margin: calc(12px * var(--density)) 0; }
.input-icons input[type="text"],
.input-icons input[type="search"] {
    width: 100%;
    padding-left: 30px;
    background-color: var(--surface);
}
.input-icons { display: flex; align-items: center; position: relative; }
.input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--faint);
    pointer-events: none;
    z-index: 2;
}
.filter { padding-left: 30px; }

/* =====================================================================
   ТАБЛИЦЫ ДАННЫХ
   (бьём широко по содержимому #content-pane — ловит .cars/.tis/
    .waybills/.drivers/.jdv-table/.content и т.п. одинаково)
===================================================================== */
.jdv-table-container,
#content-pane .jdv-table-container {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    overflow-x: auto;            /* последняя колонка не уходит под скролл */
    background: var(--surface);
}

/* Раздельные <table> шапки и тела (их строит jdvpro-table.js) — забираем
   раскладку на себя. Это разом снимает три проблемы:
   1) кривой JS-расчёт ширины секции (обрезал колонку действий справа);
   2) замороженную inline-ширину секции из снапшота (style="width:1192px");
   3) cap обёртки .centered (max-width:1195) — таблица всегда влезает.
   table-layout:fixed + одинаковые классы cell-* в шапке и теле = идеальное
   выравнивание колонок. Ширины колонок берутся из легаси-css (.cell-*),
   незаданная cell-company тянется на остаток. */
.jdv-section { width: 100% !important; }
.jdv-section .header .jdv-table,
.jdv-section .body   .jdv-table { width: 100% !important; min-width: 0; table-layout: fixed; }
.jdv-section .jdv-table th,
.jdv-section .jdv-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* КЛЮЧЕВОЕ: border-box, чтобы заданная ширина колонки ВКЛЮЧАЛА padding. Иначе при
       table-layout:fixed реальная колонка = width + padding(~25px), и сумма колонок
       вылезала за секцию (фантомный гор. скролл, спрятанная колонка действий). */
    box-sizing: border-box; }
/* колонка «Год выпуска» — легаси-ширина (86px) обрезала заголовок при fixed.
   точечная правка под таблицу машин (cars) */
#cars-root .cell-date { width: 104px; }
/* tech, список ТО (#tis): id 5-значные + длинная «Машина» — расширяем колонки */
#tis-root .cell-id { width: 66px; }
#tis-root .cell-car { width: 230px; }
#tis-root .cell-timezone { width: 116px; }
#tis-root .cell-control { width: 130px; }
/* (tech2) Механики (#masters): легаси-ширины колонок (last-name 300 и пр.) в
   table-layout:fixed суммарно превышали контейнер → таблица переполнялась вправо,
   колонка «Компания» обрезалась даже после горизонтального скролла. Задаём
   компактные ширины, «Компания» забирает остаток (width:auto). */
#masters-root .cell-id          { width: 50px; }
#masters-root .cell-login       { width: 230px; }
#masters-root .cell-last-name   { width: 170px; }
#masters-root .cell-first-name  { width: 140px; }
#masters-root .cell-second-name { width: 160px; }
#masters-root .cell-cert        { width: 120px; }
#masters-root .cell-company     { width: auto; }

/* =====================================================================
   СПИСКИ — универсальная ширина по контейнеру без гор. скролла (3 проекта).
   Раздельные header/body + table-layout:fixed требуют, чтобы СУММА ширин колонок
   не превышала контейнер (fixed НЕ сжимает колонки ниже заданных → иначе переполнение
   и скролл с обрезанной крайней колонкой). Поэтому: служебные/узкие колонки —
   компактный фикс (перебиваем легаси px), текстовые — auto (делят остаток поровну).
   Конструкторы (.multi-root) защищены своими #root...!important; уже настроенные
   #tis-root/#cars-root/#masters-root выигрывают по #id-специфичности. ===================== */
.jdv-section .cell-id          { width: 54px; }
.jdv-section .cell-photo       { width: 86px; }
.jdv-section .cell-date,
.jdv-section .cell-till,
.jdv-section .cell-task-start,
.jdv-section .cell-task-finish { width: 116px; }
.jdv-section .cell-type,
.jdv-section .cell-status,
.jdv-section .cell-task-status,
.jdv-section .cell-prepost,
.jdv-section .cell-count,
.jdv-section .cell-main        { width: 110px; }
.jdv-section .cell-phone,
.jdv-section .cell-tin         { width: 132px; }
.jdv-section .cell-authority,
.jdv-section .cell-details,
.jdv-section .cell-task-icon   { width: 96px; }
/* (wb6) «Сертификат»/«Сертификаты» — 96px резал заголовок «Сертифи…» */
.jdv-section .cell-cert,
.jdv-section .cell-certificate { width: 132px; }
/* текстовые/тянущиеся — auto (перебивают легаси px), делят остаток */
.jdv-section .cell-last-name,
.jdv-section .cell-first-name,
.jdv-section .cell-second-name,
.jdv-section .cell-title,
.jdv-section .cell-task-title,
.jdv-section .cell-license,
.jdv-section .cell-vin,
.jdv-section .cell-number,
.jdv-section .cell-email,
.jdv-section .cell-brand,
.jdv-section .cell-model,
.jdv-section .cell-car,
.jdv-section .cell-master,
.jdv-section .cell-driver,
.jdv-section .cell-company,
.jdv-section .cell-company-title { width: auto; }

/* шапка таблицы рисовала лишние рамки (.header border-width 1px).
   на реальном проекте легаси перебивало по специфичности — гасим жёстко,
   разделитель под шапкой даёт .header th (border-bottom ниже) */
.header { border: 0 none !important; border-color: var(--line) !important; }

#content-pane thead th,
.jdv-table th,
.header th {
    font-family: var(--font);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background-color: var(--head);
    border: none;
    border-bottom: 1px solid var(--line);
    /* ВАЖНО: padding шапки держим СИММЕТРИЧНЫМ (верт == гориз).
       jdvpro-table.js считает ширину секции как parseInt(padding)*2 и берёт
       только первое значение — при несимметричном padding секция выходит уже
       таблицы и правый край (колонка действий) обрезается. Масштаб плотностью
       не нарушает симметрию (обе оси умножаются на --density). */
    padding: calc(14px * var(--density));
    text-align: left;
}

#content-pane tbody td,
.jdv-table td {
    font-size: 14px;
    color: var(--ink);
    border: none;
    border-bottom: 1px solid var(--line-soft);
    /* гориз. padding = как у шапки (14px*density), чтобы текст был на одной
       вертикали; верт. — чуть меньше */
    padding: calc(11px * var(--density)) calc(14px * var(--density));
    text-align: left;
}
#content-pane tbody tr:last-child td { border-bottom: none; }

/* убрать внутренние вертикальные линии легаси-таблиц (border-right:white и т.п.) */
#content-pane table th,
#content-pane table td { border-left: none !important; border-right: none !important; }

/* столбцы действий */
td.cell-control, .cell-control { width: 96px; min-width: 96px; white-space: nowrap; text-align: center; padding-left: 6px; padding-right: 10px;
    /* (comp1) кнопки (карандаш/корзина) НЕ должны обрезаться в «…» — отключаем
       ellipsis/overflow, который наследуется от общего правила ячеек таблицы */
    overflow: visible; text-overflow: clip; }
td.cell-photo, .cell-photo { white-space: nowrap; text-align: center; width: 78px; }

/* текстовые компактные кнопки в строках (напр. «Фото») */
.button-def {
    float: none;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
    font-size: 13px;
    transition: background-color .15s, border-color .15s, color .15s;
}
.button-def:hover { background: var(--hover); border-color: #d2d8df; box-shadow: none; }

/* квадратные иконочные кнопки (.button-icon = карандаш/корзина).
   убираем float:left из легаси — из-за него они налезали друг на друга */
.button-icon {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    margin: 0 2px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    vertical-align: middle;
    transition: background-color .15s, border-color .15s, color .15s;
}
.button-icon:hover { background: var(--hover); border-color: #d2d8df; color: var(--ink); box-shadow: none; }
.button-delete:hover { color: var(--bad-fg); border-color: #d8a39c; }

#content-pane tbody tr:hover,
.clickable > tbody > tr:hover,
.content > tbody > tr:hover { background-color: var(--hover); }

/* моноширинно — для номеров/VIN/ID/дат можно добавить class="mono" в ячейку */
.mono, .cell-vin, .cell-id, .cell-number { font-family: var(--mono); }
.cell-id { color: var(--faint); }

/* пагинация */
.pageable-control input[type="button"] {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    height: calc(32px * var(--density));
    margin-right: 6px;
}
.pageable-control input[type="button"]:hover { background-color: var(--hover); }

/* =====================================================================
   КАРТОЧКИ / ДИАЛОГИ
===================================================================== */
.card, .page.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 1px 2px rgba(20,28,46,.04);
    padding: calc(18px * var(--density));
}
.content-info {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.content-info td { border: none; border-top: 1px solid var(--line-soft); padding: calc(9px * var(--density)) 14px; font-size: 13.5px; }
.content-info tr:first-child td { border-top: none; }
.content-info td:first-child { color: var(--muted); width: 120px; }

/* профиль предприятия (company/profile) — key-value секции в карточке */
.profile-data { gap: 16px; justify-content: center; }
.profile-data section { margin: 10px 24px; }
.profile-data h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 6px 0 14px; }
.profile-data section td:first-child { color: var(--muted); text-align: left; white-space: nowrap; }
.profile-data section td:last-child { color: var(--ink); }
/* key-value таблицы внутри карточек (сертификат, полномочия и т.п.) — подпись приглушена */
.card section > table td:first-child { color: var(--muted); white-space: nowrap; vertical-align: top; }
/* редактируемые формы (entity/businessman create/edit/signup — в них есть <form>):
   метку прижимаем к верху + padding-top, чтобы она совпадала по центру с полем ввода
   и НЕ съезжала вниз, когда под полем появляется <label.error> (раньше vertical-align:
   middle центрировал метку по всей выросшей строке → метка уезжала). read-only карточки
   info/profile без <form> остаются с vertical-align:top выше. */
.card form section > table td:first-child { vertical-align: top; padding-top: 16px; }
/* звёздочка обязательности теперь в одной ячейке с полем (а не в отдельной 3-й
   колонке, где «висела» далеко). Поле — inline-block 200px, поэтому запрещаем
   перенос: <sup> встаёт вплотную справа и в одной колонке у всех строк */
.card form section > table td:last-child { white-space: nowrap; }
/* (tech3) карточки сертификата/полномочий: орден-картинка прижата к краям —
   оверлей ужал .card padding, а margin-right картинки до текста остался крупным.
   Возвращаем симметрию: равные поля вокруг картинки со всех сторон. */
.card:has(> img) { padding: calc(34px * var(--density)); }
.card > img { margin-right: calc(34px * var(--density)); }

/* =====================================================================
   РЕГИСТРАЦИЯ / вход (layout_signup) — приводим к общему виду
===================================================================== */
.top {
    background-color: var(--bar);
    box-shadow: none;
    border-bottom: 1px solid rgba(0,0,0,.18);
    display: flex; align-items: center;
}
.top h1 { top: 0; text-shadow: none; font-size: 16px; letter-spacing: .01em; }
.top h1 a { color: #eaedf2 !important; text-decoration: none; }
.top .a-login { color: #c3cad6; margin-left: auto; float: none; }
/* (tech login) «Скачать клиент» (.service-div) — float:right не работает во flex-баре,
   ссылка прилипала к названию. Отправляем вправо через margin-left:auto. */
.top .service-div { margin-left: auto; float: none; margin-top: 0; }
.top .service-div .service-link { margin: 0 20px 0 0; }
.header-signup { text-align: center; }
.header-signup h2 { font-weight: 600; color: var(--ink); }
.header-signup label { color: var(--muted); }
.all-fields { color: var(--muted); }
.footer-signup .signup-control { display: flex; justify-content: center; gap: 14px; }
/* подписи полей формы регистрации — приглушаем, значение-инпут — акцент фокуса */
.company-data table tr td:first-child,
.other-data table tr td:first-child { color: var(--muted); }
/* правый столбец = две отдельные <table> (Ген. директор + Профиль). Их колонки-метки
   раньше сайзились по контенту независимо: «Повторите пароль» делал колонку Профиля
   шире → поля ввода двух таблиц не вставали друг под друга. Фиксируем единую ширину
   метка-колонки (>= самой длинной метки) + nowrap → инпуты выравниваются по вертикали. */
.other-data table tr td:first-child { width: 135px; white-space: nowrap; }

/* =====================================================================
   КОНСТРУКТОР марок/моделей/параметров (multi-root) — admin/car_builder
===================================================================== */
.multi-root h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
/* простые таблицы марок/моделей — оборачиваем в карточку */
.multi-root .brands,
.multi-root .models { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.clickable-cell { cursor: pointer; }
/* выбранная строка — акцент-тинт вместо легаси-серого */
.simple-row.active-row, tr.active-row { background-color: var(--accent-tint) !important; }
.simple-row.active-row:hover, tr.active-row:hover { background-color: var(--accent-tint) !important; }
/* блок параметров — мягкая рамка, скругление */
.props-block { border: 1px solid var(--line); border-radius: var(--r); }
.props-block-big { background: var(--surface); }
.props-block ul li ul li:hover { background-color: var(--hover); }
/* кнопки переноса параметров в диалоге (>> > < <<) */
.button-controll button {
    width: 38px; height: 32px; padding: 0; margin: 0 0 6px 0;
    background: var(--surface); color: var(--accent-ink);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-weight: 600; cursor: pointer;
}
.button-controll button:hover { background: var(--hover); border-color: #d2d8df; box-shadow: none; }

/* =====================================================================
   INDEX / вход-лендинг — карточки выбора роли (switcher-icon)
===================================================================== */
.root .sign-up h2 { font-weight: 600; color: var(--ink); }
.switcher-icon {
    position: relative;
    /* как акцентные кнопки: tech/waybill переопределяют --btn (приглушённый тон шапки) */
    background-color: var(--btn, var(--accent));
    background-image: none !important;   /* убираем легаси-png, рисуем глиф ниже */
    border-radius: var(--r);
    box-shadow: 0 1px 2px rgba(20,28,46,.14);
    font-weight: 600;
    transition: filter .15s ease;
}
.switcher-icon::before {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-family: 'Material Symbols Outlined'; font-size: 24px; line-height: 1; color: #fff;
}
.switcher-icon-entity::before { content: "apartment"; }
.switcher-icon-person::before { content: "person"; }
.switcher-icon-entity:hover,
.switcher-icon-person:hover { background-color: var(--btn, var(--accent)); filter: brightness(1.06); }
.switcher-icon-entity:active,
.switcher-icon-person:active { background-color: var(--btn, var(--accent)); filter: brightness(.92); box-shadow: inset 0 2px 6px rgba(0,0,0,.22); }
.login-link { color: var(--accent-ink); }

/* =====================================================================
   TECH — карточка осмотра мастера (master/ti_info_open): фото-сетка + допуск
===================================================================== */
/* кнопка допуска — зелёная (ti-button-positive), отказ — красная (ti-button-action уже есть) */
.ti-button-positive { background-color: var(--ok-fg); color: #fff; border: none; border-radius: var(--r-sm); }
.ti-button-positive:hover { background-color: var(--ok-fg) !important; color: #fff !important; filter: brightness(.95); box-shadow: none; }
/* фото авто слева */
.multi-root .car-photo {
    width: 100%; height: 170px;
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
    background: var(--head); display: flex; align-items: center; justify-content: center;
}
.multi-root .car-photo img { height: 100%; width: 100%; object-fit: cover; }
/* (tech1) плейсхолдер «Нет фото» (no_image.png 360×360) под object-fit:cover заполнял
   весь бокс — уменьшаем и центрируем (contain), реальные фото остаются cover */
.multi-root .car-photo img[src*="no_image"] { width: 58%; height: 58%; object-fit: contain; opacity: .5; }
.car-info h5 { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.content-div { margin-left: 30px; }
/* сетка фото/видео осмотра — плитки как в концепте */
.photos-div, .videos-div { display: flex; flex-wrap: wrap; gap: 11px; align-content: baseline; }
.photo-div, .video-content {
    width: 200px; height: 200px; margin: 0; position: relative;
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--head);
}
.photo-div .media-image, .photo-div .media, .video-content .video {
    width: 100%; height: 100%; object-fit: cover;
    /* striped-плейсхолдер для пустых/битых фото (как в концепте) */
    background: repeating-linear-gradient(45deg,#eef0f2,#eef0f2 9px,#e5e8ec 9px,#e5e8ec 18px);
}
.photo-div .description, .video-content .description {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: rgba(20,24,30,.62); color: #fff; font-size: 11.5px; padding: 5px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diag-title { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
#diagnostic p { font-size: 13px; color: var(--muted); margin: 6px 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot.green { background: var(--ok-fg); }
.buttons-div { display: flex; justify-content: center; gap: 12px; }

/* TECH — профиль мастера: список «Предприятия» + info-card статуса ЭДО */
.note-title { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.scrollable-div {
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); height: 180px; padding: 4px; overflow: auto;
}
.scrollable-item { display: block; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink); }
.scrollable-item:hover { background-color: var(--hover); }
.info-card {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    box-shadow: 0 1px 2px rgba(20,28,46,.04); padding: 16px 18px; width: auto;
}

.ui-widget.ui-widget-content { border: 1px solid var(--line); border-radius: var(--r); }

/* Нативный <dialog> заменил jQuery-UI dialog (см. dialog() в jdvpro.js).
   Воспроизводим UA-поведение, которое перебивал .ui-dialog из jquery-ui.css. */
dialog.ui-dialog {
    position: fixed; inset: 0; margin: auto;        /* центр top-layer (вместо jquery-ui absolute top/left:0) */
    width: fit-content; height: fit-content;        /* размер по контенту; потолки/min-width — в .ui-dialog.ui-widget ниже */
    border: none;                                   /* UA-рамку гасим — рамку даёт .ui-widget.ui-widget-content */
}
dialog.ui-dialog:not([open]) { display: none; }      /* перебивает .ui-dialog.ui-widget{display:flex} у закрытого диалога */
dialog.ui-dialog::backdrop { background: rgba(0, 0, 0, .3); } /* как легаси .ui-widget-overlay (#000, .3) */

.ui-dialog.ui-widget {
    padding: 0; overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(20,28,46,.45);
    /* Размер диалога по контенту делает сам jQuery-UI: хелпер dialog() в jdvpro.js
       при активном слое создаёт диалог с width:'auto' (см. маркер --ti24-overlay).
       Здесь — только страховочные потолки, чтобы очень большой контент не вылезал. */
    max-width: min(94vw, 760px);
    max-height: 92vh;
    display: flex; flex-direction: column;
}
.ui-draggable .ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: calc(16px * var(--density)) calc(20px * var(--density));
}
.ui-dialog .ui-dialog-title { float: none; flex: 1; min-width: 0; }

/* крестик закрытия — чистый ×, без легаси-рамки и иконки-картинки.
   флекс в шапке прижимает его вправо (без absolute — надёжно в любом контексте) */
.ui-dialog .ui-dialog-titlebar-close {
    position: static;   /* сбрасываем jQuery-UI absolute, чтобы встал в флекс-ряд заголовка */
    flex: none;
    width: 28px; height: 28px; margin: 0; padding: 0;
    border: none; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; cursor: pointer;
    font-size: 0; color: var(--muted);
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--hover); color: var(--ink); }
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space { display: none; }
/* спрайт-иконку легаси превращаем в чистый × (псевдоэлемент на span — надёжно) */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    /* jQuery-UI делает .ui-button-icon-only .ui-icon абсолютным (top/left 50%,
       margin -8px) — сбрасываем, чтобы глиф × шёл в потоке и центрировался кнопкой */
    position: static; top: auto; left: auto;
    width: auto; height: auto; margin: 0; text-indent: 0;
    background: none; overflow: visible; color: inherit;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
    content: "\00d7"; /* × U+00D7 — есть в любом шрифте, в отличие от ✕ */
    display: block;
    font-family: var(--font);
    font-size: 24px; line-height: 22px; color: inherit;
}

/* тело диалога и кнопки — отступы масштабируются плотностью */
.ui-dialog .ui-dialog-content {
    padding: calc(24px * var(--density)) calc(28px * var(--density)); color: var(--ink);
    /* перебиваем inline width/height от jQuery-UI; высокий контент скроллится тут */
    width: auto !important; height: auto !important;
    flex: 1 1 auto; min-height: 0; overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
    margin: 0; padding: calc(15px * var(--density)) calc(20px * var(--density));
    border: none; border-top: 1px solid var(--line-soft);
    background: var(--head);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; display: flex; justify-content: flex-end; gap: 10px; }

/* (tech4) диалог «Схема шагов ТО» (dialogClass=edit-dialog-zindex): форма из двух
   таблиц (форма 320 + список шагов 260) в display:flex требует ~640px, а общий
   потолок .ui-dialog 560px зажимал их → таблицы сжимались и НАЕЗЖАЛИ друг на друга
   (поле «Название»/«Тип машины» на колонку шагов). Поднимаем потолок ИМЕННО этого
   диалога и запрещаем таблицам формы сжиматься (flex:none) + отступ между ними. */
.ui-dialog.edit-dialog-zindex { min-width: 700px !important; }
#dialog-edit form { gap: 26px; align-items: flex-start; }
#dialog-edit form > table { flex: none; }
/* список шагов был под легаси-рамкой #848484; приводим к системной рамке/радиусу,
   строки с hover и выделением как у таблиц */
#dialog-edit .vert-scrollable { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
#dialog-edit .step { cursor: pointer; border-radius: var(--r-sm); }
#dialog-edit .step:hover { background: var(--hover); }
#dialog-edit .vert-scrollable .selected, #dialog-edit .step.selected { background: var(--accent-tint); }

/* (tech1) «Новый мастер» (#dialog-create) и (tech2) «Редактор шага»
   (#dialog-create-step/#dialog-edit-step) — двухколоночные формы во flex; общий потолок
   их зажимал → узкие поля, наезд, гор. скролл. Запрещаем колонкам сжиматься + отступ. */
/* jQuery-UI width:'auto' НЕ расширяет диалог под многоколоночный контент → фиксируем
   ширину обёртки через уникальный dialogClass (передаётся в dialog() в master.js/schema.js). */
/* jQuery-UI зажимает .ui-dialog инлайновым размером; width/max-width его НЕ раздвигают,
   а min-width — форсит минимум и расширяет (эмпирически на боевой странице). */
.ui-dialog.wide-create-dialog { min-width: 740px !important; max-width: 96vw !important; }
/* step-редактор: min-width форсит читаемую ширину одной колонки; вторая колонка
   (внешняя камера) раздвинет дальше сама (min-width — это минимум, не потолок) */
.ui-dialog.step-dialog { min-width: 420px !important; }
#dialog-create form { gap: 26px; align-items: flex-start; }
#dialog-create form > section:first-child { flex: 0 0 auto; }
#dialog-create form > section:last-child { flex: 0 0 300px; }
#dialog-create .table-entity { width: auto; }
#dialog-create-step form > div, #dialog-edit-step form > div { gap: 22px; align-items: flex-start; }
#dialog-create-step form > div > div, #dialog-edit-step form > div > div { flex: none; }

/* форма свойств сущности (.table-entity) — поля на всю ширину, ровная сетка */
.table-entity { border-collapse: collapse; }
/* расстояние между строками формы тоже масштабируется плотностью */
.table-entity td { padding: calc(9px * var(--density)) calc(7px * var(--density)); vertical-align: middle; }
.table-entity td:first-child { width: 130px; color: var(--muted); font-size: 13.5px; text-align: right; padding-right: 16px; line-height: 1.35; }
.table-entity input,
.table-entity select { box-sizing: border-box; }
/* ширина поля — по ТИПУ (как в исходном дизайне):
   списки + текстовые/пароль — фиксированная средняя ширина (компактный диалог,
   ровные поля по бокам); числовые — узкие, чтобы рядом помещался суффикс
   (напр. «тыс. км.» у пробега) */
/* !important — перебиваем легаси-инлайны style="width:100%/60%" на части форм,
   чтобы ширина полей была единой по типу во всех диалогах */
.table-entity select,
.table-entity input[type="text"],
.table-entity input[type="password"],
.table-entity input[type="search"],
.table-entity input[type="date"] { width: 230px !important; max-width: 100%; }
.table-entity input[type="number"] { width: 84px !important; }

/* --- диалог «Выбор фото»: превью + строка загрузки файла --- */
/* без формы загрузки (только превью у read-only) диалог схлопывался в узкий —
   держим ширину как у варианта с формой (≈427px), чтобы оба выглядели одинаково */
.ui-dialog:has(#dialog-form) { min-width: 430px; }
/* контейнер превью (div вокруг #preview) — аккуратная рамка-дропзона с
   empty-state; реальное фото заполняет её при загрузке */
#dialog-form > div:has(> #preview) {
    position: relative;
    width: 100%; max-width: 300px; aspect-ratio: 4 / 3;
    margin: 0 auto calc(16px * var(--density));
    border: 1px dashed #cfd5dc; border-radius: var(--r);
    background: var(--head);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
#dialog-form > div:has(> #preview)::before {
    content: "add_a_photo";
    font-family: 'Material Symbols Outlined';
    font-size: 38px; color: var(--faint);
}
#preview.main-car-image,
#dialog-form .main-car-image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border: none; border-radius: 0; background: none;
}
/* пока стоит плейсхолдер (panorama) или src пуст — показываем CSS empty-state,
   а саму <img> прячем (убирает битую иконку и пустой бокс) */
#preview[src*="panorama"],
#preview:not([src]),
#preview[src=""] { display: none; }
#fileUploadForm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* убираем рамку/фон нативного поля — оно ужимается под содержимое (кнопка + имя
   файла), кнопку выбора стилизуем как ОТДЕЛЬНУЮ outline-кнопку, имя файла — текст */
#dialog-file {
    /* БЕЗ фиксированной высоты — поле подстраивается под кнопку, иначе на малой
       плотности контейнер обрезал бы её рамку сверху/снизу */
    flex: 0 1 auto; min-width: 0; box-sizing: border-box;
    height: auto; padding: 0; border: none; background: none;
    color: var(--muted); font-size: 13.5px; line-height: normal;
    vertical-align: middle;
}
#dialog-file::file-selector-button {
    /* отдельная настройка кнопки выбора: высота через padding (меньше прочих),
       рамка видна на любом масштабе */
    height: auto;
    margin: 0 12px 0 0;
    padding: calc(4px * var(--density)) 16px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--accent-ink);
    font-family: var(--font); font-weight: 600; font-size: 13.5px; line-height: 1.5;
    cursor: pointer; vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease;
}
#dialog-file::file-selector-button:hover { background: var(--hover); border-color: #d2d8df; }
/* кнопка «Загрузить» — акцентная, прижата вправо (перекрываем серый легаси .btn) */
#btnSubmit, #dialog-form .btn-primary {
    flex: none; margin-left: auto;
    height: calc(38px * var(--density)); padding: 0 20px;
    border: none; border-radius: var(--r-sm);
    background: var(--accent); color: #fff;
    font-family: var(--font); font-weight: 600; font-size: 14px; cursor: pointer;
    transition: filter .15s ease;
}
#btnSubmit:hover, #dialog-form .btn-primary:hover { filter: brightness(.95); box-shadow: none; }

/* =====================================================================
   СТАТУСЫ — единые «чипы»
   (вешай class="chip chip-ok|chip-warn|chip-bad|chip-neutral";
    старые .ti_allow/.ti_prevent тоже переопределены ниже)
===================================================================== */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600;
    padding: 4px 11px; border-radius: 20px;
    line-height: 1.4; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.chip-ok      { background: var(--ok-bg);  color: var(--ok-fg); }
.chip-warn    { background: var(--warn-bg); color: var(--warn-fg); }
.chip-bad     { background: var(--bad-bg);  color: var(--bad-fg); }
.chip-neutral { background: var(--neu-bg);  color: var(--neu-fg); }

/* подсветка строк техосмотра по результату — мягче, чем было */
.ti-allowed  td, .ti-allowed  th,
.ti_allow    { background-color: color-mix(in srgb, var(--ok-bg) 70%, transparent) !important; }
.ti-permitted td, .ti-permitted th,
.ti_prevent  { background-color: color-mix(in srgb, var(--bad-bg) 70%, transparent) !important; }

label.done  { color: var(--ok-fg); font-weight: 600; }
label.error { color: var(--bad-fg); }
.succeed    { color: var(--ok-fg); }
.red        { color: var(--bad-fg); }

/* =====================================================================
   ПУТЕВОЙ ЛИСТ — аккордеон файлов Т1–Т6
===================================================================== */
.file {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 12px;
    overflow: hidden;
}
.file-title {
    display: flex; align-items: center; gap: 12px;
    padding: calc(15px * var(--density)) 18px;
    cursor: pointer;
}
.file-title h3 { font-size: 15px; font-weight: 600; margin: 0; flex: 1; color: var(--ink); }
.file-title .toggle { color: var(--faint); }
.file-title .done-icon { color: var(--ok-fg); }

.page.card { box-shadow: none; border-radius: 0; border: none; border-top: 1px solid var(--line-soft); }
.sub-header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; margin-bottom: 12px; }
.sub-header h4 { font-size: 14px; font-weight: 600; margin: 0; color: var(--ink); }
.show-section, .edit-section { padding: 12px 4px 0px; border-bottom: 1px solid var(--line-soft); }
.show-section:first-child { margin-top: 0; }
/* (wb2) рядовые записи путевого листа были слишком мелкие — крупнее */
.item-row { display: flex; align-items: baseline; gap: 12px; margin: 0px 0; font-size: 14.5px; }
/* (wb2) статус-иконки (фон-картинка слева + текст) липли к надписи — больше зазор */
.icon-status-red, .icon-status-green, .icon-status-orange, .icon-status-yellow,
.icon-status-blue, .icon-status-gray, .icon-status-not-allowed { padding-left: 28px; }
.label-title, .label-title-edit { color: var(--muted); }
.edit-btn { background: var(--accent-tint); color: var(--accent-ink); border: none; border-radius: var(--r-sm); padding: 5px 9px; }
.edit-btn:hover { background: var(--accent-tint); filter: brightness(.97); }
.card-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 6px; }

/* =====================================================================
   МЕЛОЧИ
===================================================================== */
.a-back-link { color: var(--accent-ink); }
/* (comp1) back-div «Вернуться» был закапан легаси max-width:800 (центр), а карточка
   .container.card расширена до 1100 → ссылка висела с отступом от левого края карты.
   Выравниваем обёртку по той же ширине/центровке, что и карта. */
.back-div { max-width: min(1100px, 100%); margin: 0 auto 8px; text-align: left; }
.banner-info .bx { color: var(--ok-fg); }

/* ---------------------------------------------------------------------
   ТЕМЫ СЕРВИСОВ
   Этот файл по умолчанию = COMPANY. Для TECH и WAYBILL добавь ОДНО
   правило ниже (или в отдельном маленьком css каждого приложения):

   TECH (зелёный):
     :root { --accent:#2e8b5b; --accent-ink:#256f49; --accent-tint:#e9f4ee; --bar:#232f2a; }

   WAYBILL (фиолетовый):
     :root { --accent:#6a55bc; --accent-ink:#574aa0; --accent-tint:#f0ecf8; --bar:#2a2536; }
--------------------------------------------------------------------- */


#dialog-form input {
    padding: 0;
    height: calc(38px * var(--density));
}

/* =====================================================================
   ФИКСЫ ПО ОБРАТНОЙ СВЯЗИ С СЕРВЕРА (company)
===================================================================== */
/* (comp5) фильтры одной длины — «по предприятию» растягивался шире «по марке» */
.filter-block .input-icons { width: 180px; box-sizing: border-box; }

/* (comp1) кнопка «Добавить организацию» (spec-simple-button) — была квадратной
   и белела на ховере (текст белый на белом) */
.spec-simple-button {
    background: var(--btn, var(--accent)); color: #fff; border: none;
    /* легаси задаёт width:180px + overflow:hidden → текст «Добавить организацию» не
       влезал и липнул к краям. Растягиваем по содержимому. */
    width: auto; height: auto; overflow: hidden;
    border-radius: var(--r-sm); padding: 9px 24px;
    font-family: var(--font); font-weight: 600; font-size: 14px; cursor: pointer;
    transition: filter .15s ease;
    /* (comp) текст с иконкой fa-caret-down прижимался к низу — центрируем по вертикали */
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1;
    white-space: nowrap;
}
.spec-simple-button:hover { background: var(--btn, var(--accent)) !important; color: #fff !important; filter: brightness(.95); box-shadow: none; }

/* (comp2) карточка формы ЮЛ/ИП РАСТЁТ под форму (в signup.css .container фикс. 900px,
   из-за чего форма с длинной подписью OLF вылезала за карту); секции делятся и
   переносятся на узком экране */
.container.card { width: auto; max-width: min(1100px, 100%); box-sizing: border-box; }
.container.card > form { max-width: 100%; flex-wrap: wrap; gap: 0 30px; }
.container.card section { width: auto; flex: 1 1 380px; min-width: 0; }
.container.card .other-data { margin-left: 0; }   /* отступ даёт gap у формы */

/* (comp2) форма регистрации/редактирования ЮЛ-ИП: подписи по центру по вертикали
   (signup.css держал их вверху), поле типа date — в ширину как остальные */
.company-data table td, .other-data table td { vertical-align: middle; }
.company-data table tr td:first-child, .other-data table tr td:first-child { padding-top: 8px; padding-bottom: 8px; }
.company-data input[type="date"], .other-data input[type="date"] { width: 200px; box-sizing: border-box; }

/* (comp6/comp7) Таблицы конструкторов декорируются jdv-base-table.js в .jdv-section
   (header/body), как и основные. Но живут в УЗКИХ панелях, поэтому общая
   min-width:1000 их распирала (гор. скролл, спрятанные колонки), а width:100% секции
   растягивала и ломала ряд. Здесь снимаем и то и другое: секция по контенту,
   таблицы шапки/тела — на всю ширину секции (выравнивание колонок), без min-width. */
.multi-root .jdv-section { width: auto !important; }
.multi-root .jdv-section .header .jdv-table,
.multi-root .jdv-section .body   .jdv-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
.multi-root .jdv-table th, .multi-root .jdv-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-root .cell-control { width: 96px; white-space: nowrap; overflow: visible; text-overflow: clip; }
.multi-root .cell-id { width: 44px; }

/* ширины колонок конструкторов — фикс. через !important (перебивают инлайн style=
   "width:10px" в теле param_builder и узкие легаси), выравнивают шапку и тело;
   cell-title/Описание — остаток */
#brands-root .cell-id, #models-root .cell-id,
#groups-root .cell-id, #params-root .cell-id { width: 52px !important; }
#models-root .cell-type, #groups-root .cell-type { width: 120px !important; }
#models-root .cell-vehicle-type { width: 130px !important; }
#groups-root .cell-min, #groups-root .cell-max { width: 70px !important; }
#brands-root .cell-control, #models-root .cell-control,
#groups-root .cell-control, #params-root .cell-control { width: 96px !important; overflow: visible; text-overflow: clip; }
/* cell-title (Название/Описание) — тоже фикс. ширина, чтобы ВСЕ колонки были
   заданы → шапка и тело таблицы выровнены точно, без сжатия и ухода кнопок */
#brands-root .cell-title { width: 208px !important; }
#models-root .cell-title { width: 218px !important; }
#groups-root .cell-title { width: 168px !important; }
#params-root .cell-title { width: 348px !important; }

/* ширины панелей-секций конструкторов. brands/models НЕ фиксируем — пусть встают по
   содержимому колонок (фикс 340/600 распирал ряд и обрезал «Параметры»). groups/params
   (страница param_builder) оставляем фикс — там так выверено. */
#groups-root { width: 560px !important; }
#params-root { width: 480px !important; }

/* панели конструктора — в ряд, без переноса (на рабочей ширине влезают) */
.multi-root { display: flex; gap: 20px; align-items: flex-start; flex-wrap: nowrap; margin: 50px 3% 15px 3%; }

/*Чтобы иконка календаря не прижималась  вплотную к краю*/
input[type="date"] { padding-right: 6px; }

/* =====================================================================
   БАННЕРЫ-УВЕДОМЛЕНИЯ на странице (полноширинные, см. design/ti1-3.png):
   info — жёлтый («осмотр закреплён за вами»), warning — оранжевый с
   заголовком и кнопкой-действием, error — красный. Светлые варианты
   макетной палитры под светлую тему оверлея.
===================================================================== */
.ti-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1420px;
    margin: 14px auto 4px;
    padding: 12px 18px;
    border-radius: 9px;
    border: 1px solid;
    font-size: 14px;
    text-align: left;
    box-sizing: border-box;
}
.ti-banner .banner-icon {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px;
}
.ti-banner .banner-text { flex: 1; min-width: 0; }
.ti-banner .banner-text b { display: block; margin-bottom: 2px; }
.ti-banner .banner-text p { margin: 0; }
.ti-banner a.ti-button { flex: none; text-decoration: none; padding: 6px; white-space: nowrap; }

.ti-banner-info    { background: #fdf7dc; border-color: #e3d27a; color: #5c5410; }
.ti-banner-info    .banner-icon { background: #c9b93c; }
.ti-banner-warning { background: #fbf0e0; border-color: #e8bd7c; color: #6b4a12; }
.ti-banner-warning .banner-icon { background: #cf4a40; }
.ti-banner-error   { background: #fdeceb; border-color: #eba49e; color: #7a2620; }
.ti-banner-error   .banner-icon { background: #cf4a40; }

/* на страницах с центральной карточкой (.container.card, max-width 1100) баннер
   не должен быть шире карточки — выравниваем по ней */
.container.card ~ .ti-banner { max-width: min(1100px, 100%); }

/* =====================================================================
   БАЗА ДИАЛОГА И ТОСТОВ (замена jquery-ui.css / jquery.toast.min.css)
   ---------------------------------------------------------------------
   Файлы jquery-ui.css и jquery.toast.min.css удалены: jQuery UI в
   проекте больше нет, их классы переиспользуют нативные dialog()/toast()
   из jdvpro.js. Здесь — минимум правил, которые давали те файлы и
   которые слой выше не переопределял.
===================================================================== */

/* остатки базы jquery-ui.css; шрифт задаём явно — легаси ставил Arial на
   .ui-widget, теперь диалог целиком на шрифте слоя */
dialog.ui-dialog { outline: 0; background: var(--surface); font-family: var(--font); }
.ui-dialog .ui-dialog-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* вид заблокированных кнопок (car.js блокирует кнопки buttonset на время запроса);
   значения — из легаси-правила .ui-widget button:disabled */
.ui-dialog .ui-dialog-buttonpane button:disabled {
    color: #333; background-color: #eee;
    border-color: #ccc #ccc #eee;
    box-shadow: none; cursor: auto;
}

/* тосты: перенос из jquery.toast.min.css. Разметку строит toast() в jdvpro.js
   (.jq-toast-single.jq-has-icon.jq-icon-<status> + .close-jq-toast-single),
   позиционирование он же задаёт инлайном на обёртке #ti24-toast-wrap.
   Шрифт — var(--font) вместо легаси arial (единственное осознанное отличие). */
.jq-toast-single {
    display: block; width: 100%; padding: 10px; margin: 0 0 5px;
    border-radius: 4px; font-family: var(--font); font-size: 12px; line-height: 17px;
    position: relative; pointer-events: all !important;
    background-color: #444; color: #fff;
}
.close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; }
.jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; }
.jq-icon-info { background-color: #31708f; color: #d9edf7; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=); }
.jq-icon-warning { background-color: #8a6d3b; color: #fcf8e3; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=); }
.jq-icon-error { background-color: #a94442; color: #f2dede; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=); }
.jq-icon-success { background-color: #3c763d; color: #dff0d8; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==); }

/* =====================================================================
   ВИДЖЕТНЫЕ СЛОИ — бывшие account.css / spinner.css / loader.css.
   Слои объявлены ПОСЛЕ legacy-base (побеждают его), но проигрывают
   незалэйренным стилям — как при прежнем порядке подключения файлов.
   ===================================================================== */

/* --- spinner.css --- */
@layer w-spinner {
.sk-fading-circle {
   margin: 100px auto;
   width: 40px;
   height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
}

/* --- account.css --- */
@layer w-account {
.auth-icon {
    position: absolute;
    right: 50px;
    top: 14px;
    font-size: 28px;
    text-align: right;
    color: #dddddd;
    transition: all 0.2s;
    cursor: pointer;
}

.account-popup{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
}

.account-popup-content{
    width: auto;
    height: auto;
    background-color: #f7f7f7;
    box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 -1px 6px 0 rgba(0, 0, 0, 0.12);
    right: 16px;
    top: 55px;
    position: absolute;
    z-index: 12;
    font-size: 0.9rem;
    border: 1px solid white;
    padding: 12px 20px 12px 12px;
    display: flex;
    border-radius: 4px;
}

.account-popup-icon{
    font-size: 28px;
    line-height: 34px;
    margin-right: 10px;
}

.account-popup-content label{
    font-size: 16px;
    display: block;
}

.account-popup-content a{
    font-size: 14px;
    text-decoration: underline;
}
}