/* Оформление сайта «Мягкий»: светлое полотно с лёгким зелёным отсветом,
   белые карточки с крупным скруглением и мягкой тенью, «парящее» левое
   меню и такая же панель фильтров дашборда, круглые кнопки, скруглённые
   всплывающие окна и списки, мягкие плашки статусов, таблицы без «зебры».
   Дашборды берут те же токены.

   Включается атрибутом <html data-skin="soft"> в base.html,
   operator_base.html и login.html; без атрибута — прежний вид (откат —
   убрать атрибут). Подключается после maska_theme.css. */

/* ------------------------------------------------------------------ */
/* Токены                                                              */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] {
    --sk-canvas: #f1f4ee;
    --sk-card: #ffffff;
    --sk-ink: #23272a;
    --sk-muted: #6f777d;
    --sk-rule: #e6e9e3;
    --sk-soft: #f6f7f4;
    --sk-salad: #e3f0cf;
    --sk-green: #5e8a35;
    --sk-green-ink: #3f6a1f;
    --sk-shadow: 0 2px 6px rgba(35, 39, 42, .04), 0 18px 40px rgba(35, 39, 42, .08);
    --sk-pop-shadow: 0 4px 12px rgba(35, 39, 42, .06), 0 24px 48px rgba(35, 39, 42, .14);
    --sk-radius: 20px;
    --sk-radius-sm: 14px;
    --sk-control-radius: 12px;
    --sk-pop-radius: 18px;
    --soft-panel: rgba(255, 255, 255, .96);
    --soft-gap: 12px;
    --soft-panel-radius: 22px;
}
html[data-skin="soft"][data-bs-theme="dark"] {
    --sk-canvas: #111416;
    --sk-card: #1b1f21;
    --sk-ink: #e7eae5;
    --sk-muted: #969e98;
    --sk-rule: #2a2f31;
    --sk-soft: #22272a;
    --sk-salad: #2c3824;
    --sk-green: #8fbd5a;
    --sk-green-ink: #b9dc8c;
    --sk-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --sk-pop-shadow: 0 16px 48px rgba(0, 0, 0, .55);
    --soft-panel: rgba(27, 31, 33, .97);
}

/* Дашборды берут те же токены — сайт и дашборды в одном стиле. */
html[data-skin="soft"] {
    --dash-canvas: var(--sk-canvas);
    --dash-card: var(--sk-card);
    --dash-rule: var(--sk-rule);
    --dash-shadow: var(--sk-shadow);
    --dash-radius: var(--sk-radius);
}

/* ------------------------------------------------------------------ */
/* Страница и карточки                                                 */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] { background: var(--sk-canvas); }
html[data-skin="soft"] body,
html[data-skin="soft"] .main-content,
html[data-skin="soft"].sidebar-animating body {
    background: transparent;
    color: var(--sk-ink);
}
/* Зелёный отсвет полотна — отдельный неподвижный слой под страницей.
   Раньше это был фон с background-attachment: fixed: браузер перерисовывал
   его на каждом шаге прокрутки, и на экранах 60 Гц прокрутка дёргалась.
   Слой рисуется один раз, видеокарта двигает страницу поверх него. */
html[data-skin="soft"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(1200px 600px at 100% -10%, rgba(116, 166, 67, .10), transparent 60%);
    transform: translateZ(0);
}
@media (min-width: 768px) { html[data-skin="soft"] .main-content { padding: 28px 32px; } }
html[data-skin="soft"] .text-muted { color: var(--sk-muted) !important; }
html[data-skin="soft"] h1, html[data-skin="soft"] h2, html[data-skin="soft"] h3,
html[data-skin="soft"] .h1, html[data-skin="soft"] .h2, html[data-skin="soft"] .h3 { color: var(--sk-ink); font-weight: 700; letter-spacing: -.015em; }
html[data-skin="soft"] .main-content h1,
html[data-skin="soft"] .main-content h2 { font-weight: 800; }

html[data-skin="soft"] .card {
    background: var(--sk-card);
    border: 0;
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
}
/* Карточка при наведении чуть приподнимается, тень мягко растёт. */
html[data-skin="soft"] .card { transition: transform .2s ease, box-shadow .2s ease; }
html[data-skin="soft"] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(35, 39, 42, .05), 0 22px 46px rgba(35, 39, 42, .11);
}
html[data-skin="soft"][data-bs-theme="dark"] .card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html[data-skin="soft"] .card-header,
html[data-skin="soft"] .card-footer { background: transparent; border-color: var(--sk-rule); }
html[data-skin="soft"] .card-header:first-child { border-radius: var(--sk-radius) var(--sk-radius) 0 0; }
html[data-skin="soft"] .card-header.bg-light { background: var(--sk-soft) !important; }
/* Цветные шапки карточек (заголовок анкеты у оператора) — светлые. */
html[data-skin="soft"] .card-header.bg-primary { background: transparent !important; color: var(--sk-ink) !important; }
html[data-skin="soft"] .card-header.bg-primary.text-white * { color: inherit !important; }

/* Сообщения */
html[data-skin="soft"] .alert { border: 0; border-radius: var(--sk-radius-sm); }
html[data-skin="soft"] .alert-info { background: #e8f0f7; color: #23507a; }
html[data-skin="soft"] .alert-success { background: var(--sk-salad); color: var(--sk-green-ink); }
html[data-skin="soft"] .alert-warning { background: #fdf3dc; color: #6b4d00; }
html[data-skin="soft"] .alert-danger { background: #fbe6e8; color: #8f1f2a; }
html[data-skin="soft"] .alert-secondary, html[data-skin="soft"] .alert-light { background: var(--sk-soft); color: var(--sk-ink); }
html[data-skin="soft"][data-bs-theme="dark"] .alert-info { background: #1f2d3b; color: #a9c8e8; }
html[data-skin="soft"][data-bs-theme="dark"] .alert-warning { background: #3a3220; color: #f0cf7a; }
html[data-skin="soft"][data-bs-theme="dark"] .alert-danger { background: #3d2226; color: #f2a3aa; }

/* ------------------------------------------------------------------ */
/* Всплывающие окна, меню и списки — скруглённые, с мягкой тенью        */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] .dropdown-menu,
html[data-skin="soft"] .popover,
html[data-skin="soft"] .modal-content,
html[data-skin="soft"] .toast,
html[data-skin="soft"] .offcanvas,
html[data-skin="soft"] .dash-dd[open] > .dash-slicer-list,
html[data-skin="soft"] .dfmt-pop,
html[data-skin="soft"] .dash-map-panel,
html[data-skin="soft"] .dash-size-menu,
html[data-skin="soft"] .offline-pending-menu {
    border: 0 !important;
    border-radius: var(--sk-pop-radius) !important;
    box-shadow: var(--sk-pop-shadow) !important;
    background-color: var(--sk-card);
}
html[data-skin="soft"] .dropdown-menu { padding: 6px; overflow: hidden; }
html[data-skin="soft"] .dropdown-item { border-radius: 10px; padding: .45rem .75rem; }
html[data-skin="soft"] .dropdown-item:active,
html[data-skin="soft"] .dropdown-item.active { background: var(--sk-salad); color: var(--sk-green-ink); }
html[data-skin="soft"] .dropdown-divider { border-color: var(--sk-rule); }
html[data-skin="soft"] .modal-header,
html[data-skin="soft"] .modal-footer { border-color: var(--sk-rule); }
html[data-skin="soft"] .modal-backdrop.show { opacity: .25; }
html[data-skin="soft"] .popover-header { background: transparent; border-color: var(--sk-rule); }
html[data-skin="soft"] .tooltip-inner { border-radius: 10px; padding: .4rem .65rem; }
/* Свои подсказки сайта ([data-tip]) и всплывающие окна карты. */
html[data-skin="soft"] [data-tip]::after { border-radius: 10px; }
html[data-skin="soft"] .maplibregl-popup-content,
html[data-skin="soft"] .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--sk-pop-shadow); }
/* Выпадающие списки в срезах и фильтрах дашборда. */
html[data-skin="soft"] .dash-dd > summary,
html[data-skin="soft"] .dash-slicer-list,
html[data-skin="soft"] .dcf-values,
html[data-skin="soft"] .dashboard-filter-checklist { border-radius: var(--sk-control-radius); }
/* Перетаскиваемый вопрос в конструкторе опроса. */
html[data-skin="soft"] .sortable-ghost,
html[data-skin="soft"] .sortable-drag { border-radius: var(--sk-radius-sm); }

/* ------------------------------------------------------------------ */
/* Поля ввода                                                          */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] .form-control,
html[data-skin="soft"] .form-select {
    border-radius: var(--sk-control-radius);
    border-color: transparent;
    background-color: var(--sk-soft);
}
html[data-skin="soft"] .form-control:focus,
html[data-skin="soft"] .form-select:focus {
    background-color: var(--sk-card);
    border-color: var(--sk-green);
    box-shadow: 0 0 0 3px rgba(116, 166, 67, .18);
}
html[data-skin="soft"] .input-group > .form-control,
html[data-skin="soft"] .input-group > .form-select,
html[data-skin="soft"] .input-group > .input-group-text,
html[data-skin="soft"] .input-group > .btn { border-radius: 0; }
html[data-skin="soft"] .input-group > :first-child { border-radius: var(--sk-control-radius) 0 0 var(--sk-control-radius); }
html[data-skin="soft"] .input-group > :last-child { border-radius: 0 var(--sk-control-radius) var(--sk-control-radius) 0; }
html[data-skin="soft"] .input-group-text { background: var(--sk-soft); border-color: transparent; }
html[data-skin="soft"] .form-check-input:checked { background-color: var(--sk-green); border-color: var(--sk-green); }
html[data-skin="soft"] .form-label { font-weight: 600; font-size: .85rem; color: var(--sk-muted); }

/* ------------------------------------------------------------------ */
/* Кнопки: круглые; главная — зелёная, остальные спокойные              */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] .btn { border-radius: 999px; font-weight: 500; padding-left: 1rem; padding-right: 1rem; }
html[data-skin="soft"] .btn-sm { padding-left: .75rem; padding-right: .75rem; }
html[data-skin="soft"] td .btn-sm,
html[data-skin="soft"] .card-header .btn-sm { padding: .3rem .55rem; }
html[data-skin="soft"] td:last-child { white-space: nowrap; }
html[data-skin="soft"] .btn-group > .btn { border-radius: 0; }
html[data-skin="soft"] .btn-group > .btn:first-child { border-radius: 999px 0 0 999px; }
html[data-skin="soft"] .btn-group > .btn:last-child { border-radius: 0 999px 999px 0; }
html[data-skin="soft"] .btn-group > .btn:only-child { border-radius: 999px; }
html[data-skin="soft"] .btn-outline-secondary,
html[data-skin="soft"] .btn-outline-info,
html[data-skin="soft"] .btn-outline-dark,
html[data-skin="soft"] .btn-outline-light,
html[data-skin="soft"] .btn-light,
html[data-skin="soft"] .btn-secondary,
html[data-skin="soft"] .btn-dark,
html[data-skin="soft"] .btn-info {
    --bs-btn-color: var(--sk-ink);
    --bs-btn-bg: var(--sk-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sk-ink);
    --bs-btn-hover-bg: var(--sk-rule);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--sk-rule);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: var(--sk-ink);
}
html[data-skin="soft"] .btn-outline-primary,
html[data-skin="soft"] .btn-outline-success {
    --bs-btn-bg: var(--sk-salad);
    --bs-btn-color: var(--sk-green-ink);
    --bs-btn-border-color: transparent;
}
html[data-skin="soft"] .btn-outline-danger {
    --bs-btn-bg: rgba(220, 53, 69, .08);
    --bs-btn-border-color: transparent;
}
html[data-skin="soft"] .btn-warning {
    --bs-btn-color: #6b4d00;
    --bs-btn-bg: #fdf0d3;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #6b4d00;
    --bs-btn-hover-bg: #fbe4b0;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #6b4d00;
    --bs-btn-active-bg: #f8d98f;
    --bs-btn-active-border-color: transparent;
}
html[data-skin="soft"][data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: #f0cf7a;
    --bs-btn-bg: #3a3220;
    --bs-btn-hover-color: #f0cf7a;
    --bs-btn-hover-bg: #4a3f26;
    --bs-btn-active-color: #f0cf7a;
    --bs-btn-active-bg: #4a3f26;
}

/* Значки статусов — мягкие плашки. */
html[data-skin="soft"] .badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
html[data-skin="soft"] .badge.bg-success { background: var(--sk-salad) !important; color: var(--sk-green-ink) !important; }
html[data-skin="soft"] .badge.bg-secondary { background: var(--sk-soft) !important; color: var(--sk-muted) !important; }
html[data-skin="soft"] .badge.bg-warning { background: #fdf0d3 !important; color: #7a5600 !important; }
html[data-skin="soft"] .badge.bg-danger { background: #fbe1e3 !important; color: #a12631 !important; }
html[data-skin="soft"] .badge.bg-info, html[data-skin="soft"] .badge.bg-primary { background: #e1ecf7 !important; color: #23507a !important; }
html[data-skin="soft"][data-bs-theme="dark"] .badge.bg-warning { background: #3a3220 !important; color: #f0cf7a !important; }
html[data-skin="soft"][data-bs-theme="dark"] .badge.bg-danger { background: #3d2226 !important; color: #f2a3aa !important; }
html[data-skin="soft"][data-bs-theme="dark"] .badge.bg-info,
html[data-skin="soft"][data-bs-theme="dark"] .badge.bg-primary { background: #1f2d3b !important; color: #a9c8e8 !important; }

/* ------------------------------------------------------------------ */
/* Таблицы: без «зебры», тонкая линия, шапка мелкими серыми буквами     */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    margin-bottom: 0;
}
html[data-skin="soft"] .table > tbody > tr:nth-child(even) > * { box-shadow: none; }
html[data-skin="soft"] .table > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(116, 166, 67, .07); }
html[data-skin="soft"] .table > :not(caption) > * > * { border-bottom-color: transparent; padding: .75rem .9rem; vertical-align: middle; }
html[data-skin="soft"] .table > tbody > tr > * { border-bottom: 1px solid var(--sk-rule); }
html[data-skin="soft"] .table > thead > tr > * {
    border-bottom: 1px solid var(--sk-rule);
    color: var(--sk-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: transparent;
}
html[data-skin="soft"] .table > thead a { color: inherit; text-decoration: none; }
html[data-skin="soft"] .table-light { --bs-table-bg: transparent; }
html[data-skin="soft"] .table-responsive,
html[data-skin="soft"] .main-content > .table,
html[data-skin="soft"] .main-content > form > .table {
    background: var(--sk-card);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
}
html[data-skin="soft"] .card .table-responsive { box-shadow: none; border-radius: 0; }

html[data-skin="soft"] .nav-tabs { border-bottom-color: var(--sk-rule); }
html[data-skin="soft"] .nav-tabs .nav-link { border: 0; color: var(--sk-muted); font-weight: 500; }
html[data-skin="soft"] .nav-tabs .nav-link.active { background: transparent; color: var(--sk-ink); box-shadow: inset 0 -2px 0 var(--sk-green); }
html[data-skin="soft"] .page-link { border: 0; border-radius: var(--sk-radius-sm) !important; margin: 0 2px; color: var(--sk-ink); }
html[data-skin="soft"] .page-item.active .page-link { background: var(--sk-green); color: #fff; }
html[data-skin="soft"] .list-group-item { border-color: var(--sk-rule); }

/* ------------------------------------------------------------------ */
/* Левое меню — «парящая» карточка с отступом от края экрана            */
/* ------------------------------------------------------------------ */
/* Фон плотный, без размытия: размытие под панелью, меняющей ширину,
   пересчитывалось бы в каждом кадре — открытие шло бы рывками. */
html[data-skin="soft"] .sidebar { background: var(--soft-panel) !important; }
html[data-skin="soft"] .sidebar .nav-link { margin: 2px 10px; padding: 10px; border-radius: var(--sk-radius-sm); }
html[data-skin="soft"] .sidebar .nav-link.active {
    background: var(--sk-salad) !important;
    color: var(--sk-green-ink) !important;
    font-weight: 600;
}
@media (min-width: 768px) {
    html[data-skin="soft"] { --sidebar-width: 274px; --sidebar-width-collapsed: 88px; }
    html[data-skin="soft"] .sidebar {
        top: var(--soft-gap);
        left: var(--soft-gap);
        height: calc(100dvh - 2 * var(--soft-gap));
        width: calc(var(--sidebar-width) - 2 * var(--soft-gap));
        border-radius: var(--soft-panel-radius);
        border: 0 !important;
        box-shadow: var(--sk-shadow) !important;
    }
    html[data-skin="soft"].sidebar-collapsed .sidebar { width: calc(var(--sidebar-width-collapsed) - 2 * var(--soft-gap)); }
    html[data-skin="soft"] .sidebar-action { background: transparent !important; border-top: 0; }
    html[data-skin="soft"] .sidebar-header,
    html[data-skin="soft"] .sidebar-bottom { border-color: transparent !important; }
}

/* Шапка оператора — светлая, с тонкой линией. */
html[data-skin="soft"] .navbar.bg-dark {
    background: var(--soft-panel) !important;
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--sk-rule), 0 8px 24px rgba(35, 39, 42, .05);
}
html[data-skin="soft"] .navbar.bg-dark .navbar-brand,
html[data-skin="soft"] .navbar.bg-dark .text-light { color: var(--sk-ink) !important; }

/* Телефон: кнопки в углу и выезжающее меню — светлые, скруглённые. */
@media (max-width: 767.98px) {
    html[data-skin="soft"]:not([data-bs-theme="dark"]) .mobile-toolbar-btn {
        background: var(--soft-panel);
        color: var(--sk-ink);
        border: 1px solid var(--sk-rule);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(35, 39, 42, .08);
    }
    html[data-skin="soft"] .sidebar { border-radius: 0 22px 22px 0; }
}

/* Страница входа: форма по центру экрана. */
html[data-skin="soft"] body.login-page { display: flex; align-items: center; }
html[data-skin="soft"] body.login-page > .container { margin-top: 0 !important; padding-bottom: 8vh; }

/* ------------------------------------------------------------------ */
/* Панели дашборда справа (фильтры, меню фильтра, «Оформление») — как   */
/* левое меню: «парящая» карточка. Едут только transform (без размытия */
/* и без анимации right) — открываются и закрываются без рывков.        */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    html[data-skin="soft"] .dashboard-filters-panel,
    html[data-skin="soft"] .dcf-editor,
    html[data-skin="soft"] .dfmt-pane {
        top: var(--soft-gap);
        right: var(--soft-gap);
        height: calc(100dvh - 2 * var(--soft-gap));
        border-radius: var(--soft-panel-radius);
        background: var(--soft-panel);
        box-shadow: var(--sk-pop-shadow);
        border: 0;
    }
    html[data-skin="soft"] .dashboard-filters-panel {
        transform: translateX(calc(100% + 2 * var(--soft-gap)));
        will-change: transform;
    }
    html[data-skin="soft"].dashboard-filters-open .dashboard-filters-panel { transform: translateX(0); }
    html[data-skin="soft"] .dcf-editor,
    html[data-skin="soft"] .dfmt-pane { overflow: hidden; }
    /* Кнопка открытия — отдельная карточка у края; едет вместе с панелью
       через transform, а не right (right перекладывал страницу). */
    html[data-skin="soft"] .dashboard-filters-toggle {
        right: var(--soft-gap);
        border-radius: 16px;
        background: var(--soft-panel);
        color: var(--sk-ink);
        box-shadow: var(--sk-shadow);
        transition: transform var(--df-duration) var(--df-ease), background-color .2s;
        will-change: transform;
    }
    html[data-skin="soft"] .dashboard-filters-toggle:hover,
    html[data-skin="soft"] .dashboard-filters-toggle:focus-visible { background: var(--sk-salad); color: var(--sk-green-ink); }
    html[data-skin="soft"].dashboard-filters-open .dashboard-filters-toggle {
        right: var(--soft-gap);
        transform: translateX(calc(-1 * (var(--df-panel-width) + var(--soft-gap) + 8px)));
    }
}
html[data-skin="soft"] .dashboard-filters-head {
    background: var(--soft-panel);
    border-bottom-color: var(--sk-rule);
}
html[data-skin="soft"] .dashboard-filters-head h5 { font-weight: 700; }
html[data-skin="soft"] .dcf-head,
html[data-skin="soft"] .dcf-tabs { border-color: var(--sk-rule); }
html[data-skin="soft"] .dcf-card { border-radius: 14px; background: var(--sk-soft); }
html[data-skin="soft"] .dcf-values,
html[data-skin="soft"] .dashboard-filter-checklist { border-color: var(--sk-rule); background: var(--sk-card); }
html[data-skin="soft"] .dashboard-filters-backdrop { background: rgba(35, 39, 42, .18); }

/* Плавная перестройка дашборда при сворачивании левого меню: отступ
   контента меняется вместе с шириной панели (класс ставит base.html на
   время анимации), графики и карта подстраиваются в каждом кадре. */
html[data-skin="soft"].sidebar-flow .main-content {
    transition: margin-left var(--sidebar-duration) var(--sidebar-ease), background-color .2s ease, color .2s ease;
}

/* ------------------------------------------------------------------ */
/* Наведение — заметно темнее (кнопки, пункты меню, списки)             */
/* ------------------------------------------------------------------ */
html[data-skin="soft"] { --sk-hover: #dde3d6; --sk-press: #d0d8c7; --sk-salad-hover: #cfe3b3; }
html[data-skin="soft"][data-bs-theme="dark"] { --sk-hover: #353c40; --sk-press: #40484c; --sk-salad-hover: #3a4a2e; }
html[data-skin="soft"] .btn-outline-secondary,
html[data-skin="soft"] .btn-outline-info,
html[data-skin="soft"] .btn-outline-dark,
html[data-skin="soft"] .btn-outline-light,
html[data-skin="soft"] .btn-light,
html[data-skin="soft"] .btn-secondary,
html[data-skin="soft"] .btn-dark,
html[data-skin="soft"] .btn-info {
    --bs-btn-hover-bg: var(--sk-hover);
    --bs-btn-active-bg: var(--sk-press);
}
html[data-skin="soft"] .btn-outline-primary,
html[data-skin="soft"] .btn-outline-success {
    --bs-btn-hover-bg: var(--sk-salad-hover);
    --bs-btn-hover-color: var(--sk-green-ink);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--sk-salad-hover);
    --bs-btn-active-color: var(--sk-green-ink);
    --bs-btn-active-border-color: transparent;
}
html[data-skin="soft"] .dropdown-item:hover,
html[data-skin="soft"] .dropdown-item:focus { background: var(--sk-hover); color: var(--sk-ink); }
html[data-skin="soft"] .sidebar .nav-link:hover { background: var(--sk-hover) !important; color: var(--sk-ink) !important; }
html[data-skin="soft"] .sidebar .nav-link.active:hover { background: var(--sk-salad-hover) !important; color: var(--sk-green-ink) !important; }
html[data-skin="soft"] .sidebar-action { border-radius: var(--sk-radius-sm); margin: 1px 10px; width: calc(100% - 20px); padding-left: 10px; }
html[data-skin="soft"] .sidebar-action:hover,
html[data-skin="soft"] .sidebar-action:focus-visible { background: var(--sk-hover) !important; color: var(--sk-ink) !important; }
html[data-skin="soft"] .table > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(116, 166, 67, .11); }

/* В развёрнутом меню подписи видны — всплывающие подсказки у пунктов
   лишние (налезали на соседний пункт). В свёрнутом остаются. */
@media (min-width: 768px) {
    html[data-skin="soft"]:not(.sidebar-collapsed) .sidebar [data-tip]::after { display: none; }
}

/* Подсказки свёрнутого меню: псевдоэлемент обрезался краем меню — вместо
   него ярлык .sidebar-float-tip поверх страницы (base.html). */
html[data-skin="soft"] .sidebar [data-tip]::after { display: none !important; }
.sidebar-float-tip {
    position: fixed;
    z-index: 1090;
    transform: translateY(-50%);
    background: #212529;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    animation: sidebar-tip-in .12s ease;
}
html[data-bs-theme="dark"] .sidebar-float-tip { background: #e7eae5; color: #1b1f21; }
@keyframes sidebar-tip-in { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translateY(-50%); } }

/* «+ Фильтр» на дашборде — мягкая зелёная «таблетка», как кнопки, без
   пунктирной рамки. */
html[data-skin="soft"] .dash-add-filter {
    border: 0;
    background-color: var(--sk-salad);
    color: var(--sk-green-ink);
    font-weight: 600;
    padding: 5px 30px 5px 14px;
    max-width: 200px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
html[data-skin="soft"] .dash-add-filter:hover { background-color: var(--sk-salad-hover); }
html[data-skin="soft"] .dash-add-filter:focus { box-shadow: 0 0 0 3px rgba(116, 166, 67, .22); }

/* --- Окна выпадающих списков (<select>) — скруглённые, с мягкой тенью.
   Браузеры с настраиваемым списком (Chromium 135+: Яндекс.Браузер,
   Chrome, Edge); в остальных — системное окно, как раньше. --- */
@supports (appearance: base-select) {
    html[data-skin="soft"] select.form-select:not([multiple]):not([size]),
    html[data-skin="soft"] select.form-select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }
    /* Стрелка — прежняя (фон Bootstrap), своя у base-select лишняя. */
    html[data-skin="soft"] select.form-select::picker-icon { display: none; }
    html[data-skin="soft"] select.form-select::picker(select) {
        border: 0;
        border-radius: var(--sk-pop-radius);
        box-shadow: var(--sk-pop-shadow);
        background: var(--sk-card);
        color: var(--sk-ink);
        padding: 6px;
        margin-top: 6px;
        max-height: min(60vh, 420px);
        min-width: anchor-size(width);
        /* Сначала вниз, вверх — только если внизу не помещается (по умолчанию
           браузер выбирает сторону, где места больше, и список «прыгал» вверх). */
        position-try-order: normal;
        /* Тонкая полоса прокрутки без стрелок и с прозрачной дорожкой: квадратная
           полоса перекрывала скруглённые правые углы окна. */
        scrollbar-width: thin;
        scrollbar-color: var(--sk-rule) transparent;
        max-width: min(560px, calc(100vw - 32px));
        overflow-y: auto;
    }
    html[data-skin="soft"] select.form-select option {
        border-radius: 10px;
        padding: .45rem .75rem;
        font-size: .9rem;
        white-space: normal;
    }
    html[data-skin="soft"] select.form-select option:hover,
    html[data-skin="soft"] select.form-select option:focus-visible { background: var(--sk-hover); outline: 0; }
    html[data-skin="soft"] select.form-select option:checked { background: var(--sk-salad); color: var(--sk-green-ink); font-weight: 600; }
    html[data-skin="soft"] select.form-select option::checkmark { display: none; }
    html[data-skin="soft"] select.form-select optgroup {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--sk-muted);
        padding: 8px 6px 2px;
    }
    html[data-skin="soft"] select.form-select optgroup option { text-transform: none; letter-spacing: 0; color: var(--sk-ink); font-weight: 400; }
}

/* Панели дашборда справа (фильтры, меню фильтра, «Оформление») —
   сплошной белый фон, без прозрачности (в тёмной теме — цвет карточки). */
html[data-skin="soft"] .dashboard-filters-panel,
html[data-skin="soft"] .dashboard-filters-head,
html[data-skin="soft"] .dcf-editor,
html[data-skin="soft"] .dfmt-pane { background: var(--sk-card) !important; }

/* Подъём карточки (transform) делает её опорой для окон с position: fixed
   внутри: поиск по справочнику у оператора, список среза «Все ▾», меню
   размеров виджета уезжали в сторону и обрезались краем карточки. Пока
   внутри открыто такое окно, карточка (и все карточки вокруг неё) стоит
   на месте — сразу, без анимации, чтобы окно не дёрнулось. */
html[data-skin="soft"] .card:has(details[open]),
html[data-skin="soft"] .card:has(.dropdown-menu.show),
html[data-skin="soft"] .card:has(.dash-size-menu),
html[data-skin="soft"] .card:has(.combo-panel[style*="display: block"]),
html[data-skin="soft"] .card:has(.combo-arrow-open) { transform: none !important; transition: box-shadow .2s ease; }

/* Окно поиска по справочнику у оператора (.combo-panel, response_fill) —
   как окно списка «Да/Нет»: без рамки, скругление, мягкая тень, пункты —
   скруглённые плашки, выбранный — зелёный. */
html[data-skin="soft"] .combo-panel {
    border: 0;
    border-radius: var(--sk-pop-radius);
    box-shadow: var(--sk-pop-shadow);
    background: var(--sk-card);
    padding-bottom: 6px;
}
html[data-skin="soft"] .combo-panel .combo-search-wrap { background: var(--sk-card); border-bottom-color: var(--sk-rule); padding: 8px; }
html[data-skin="soft"] .combo-panel .combo-options-scroll { padding: 6px 0 0; }
html[data-skin="soft"] .combo-option { margin: 0 6px; padding: .45rem .75rem; border-radius: 10px; }
html[data-skin="soft"] .combo-option:hover { background-color: var(--sk-hover); }
html[data-skin="soft"] .combo-option[data-selected="true"] { background-color: var(--sk-salad); color: var(--sk-green-ink); }
html[data-skin="soft"] .combo-panel .form-check { border-radius: 10px; }
html[data-skin="soft"] .combo-panel .form-check:hover { background-color: var(--sk-hover); }

/* Поле поиска по справочнику у оператора (.combo-trigger: поле + кнопка-
   стрелка) — одно цельное поле, как обычный список: мягкий фон,
   скругление, стрелка внутри без своей рамки. */
html[data-skin="soft"] .combo-trigger {
    background: var(--sk-soft);
    border-radius: var(--sk-control-radius);
    transition: background-color .15s ease, box-shadow .15s ease;
}
html[data-skin="soft"] .combo-trigger:hover { background: var(--sk-hover); }
html[data-skin="soft"] .combo-select:has(.combo-arrow-open) .combo-trigger {
    background: var(--sk-card);
    box-shadow: 0 0 0 1px var(--sk-green), 0 0 0 4px rgba(116, 166, 67, .18);
}
html[data-skin="soft"] .combo-trigger .combo-trigger-input,
html[data-skin="soft"] .combo-trigger .combo-trigger-input:focus {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--sk-control-radius) 0 0 var(--sk-control-radius) !important;
    box-shadow: none !important;
    min-width: 0;
}
html[data-skin="soft"] .combo-trigger .combo-arrow-btn,
html[data-skin="soft"] .combo-trigger .combo-arrow-btn:focus {
    border: 0 !important;
    background: transparent;
    color: var(--sk-ink);
    width: 2.25rem;
    margin-left: 0;
    border-radius: 0 var(--sk-control-radius) var(--sk-control-radius) 0;
}
html[data-skin="soft"] .combo-trigger .combo-arrow-btn i { font-size: .8rem; }
html[data-skin="soft"] .combo-select-sm .combo-arrow-btn-sm { width: 1.9rem; }

/* Анкета оператора (operator_base: body[data-user-id]): строки таблиц-
   вопросов не подсвечиваются зелёным при наведении — подсветка мешала
   полям и спискам в ячейках. Поле поиска по справочнику при наведении —
   нейтрально-серое, без зелёного оттенка. */
html[data-skin="soft"] body[data-user-id] .table > tbody > tr:hover > * { box-shadow: none; }
html[data-skin="soft"] .combo-trigger:hover { background: #eceee9; }
html[data-skin="soft"][data-bs-theme="dark"] .combo-trigger:hover { background: #2a2f32; }

/* Без обводки у полей и списков в фокусе (тёмная рамка браузера у
   настраиваемого <select>, зелёное кольцо) и без смены фона: поле всегда
   одинаковое — до, во время и после выбора. */
html[data-skin="soft"] .form-select:focus,
html[data-skin="soft"] .form-select:focus-visible,
html[data-skin="soft"] .form-control:focus,
html[data-skin="soft"] .form-control:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    /* Тот же серый фон, что и без фокуса: поле не меняется после выбора. */
    background-color: var(--sk-soft);
}
html[data-skin="soft"] .combo-select:has(.combo-arrow-open) .combo-trigger {
    box-shadow: none;
    background: var(--sk-soft);
}
/* Открытый настраиваемый список — отдельным правилом: браузер без :open
   иначе отбросил бы и правила выше. */
html[data-skin="soft"] select.form-select:open { outline: none; box-shadow: none; border-color: transparent; }

/* Без синей рамки у ячейки матрицы, появившейся по условию
   (td.dependent-cell-visible — правило в question_widget.html). */
html[data-skin="soft"] td.dependent-cell-visible { box-shadow: none !important; }
/* И никакого синего свечения Bootstrap у галочек, переключателей и
   кнопок в фокусе. */
html[data-skin="soft"] .form-check-input:focus,
html[data-skin="soft"] .form-check-input:focus-visible { box-shadow: none; outline: none; border-color: var(--sk-muted); }
html[data-skin="soft"] .form-check-input:checked:focus { border-color: var(--sk-green); }
html[data-skin="soft"] .btn:focus-visible,
html[data-skin="soft"] .btn:focus,
html[data-skin="soft"] .btn-close:focus,
html[data-skin="soft"] .page-link:focus,
html[data-skin="soft"] .nav-link:focus-visible,
html[data-skin="soft"] .dropdown-item:focus { box-shadow: none; outline: none; }
/* Конструктор опроса: перетаскивание — зелёным, а не синим. */
html[data-skin="soft"] .drag-handle:hover { color: var(--sk-green) !important; }
html[data-skin="soft"] .sortable-chosen { box-shadow: 0 0 0 2px var(--sk-green) !important; border-radius: var(--sk-radius-sm); }

/* Полоса прокрутки во всплывающих окнах — тонкая, скруглённая, без
   стрелок и с отступом от углов: квадратная полоса со стрелками
   перекрывала скруглённые правые углы окна. */
html[data-skin="soft"] .combo-panel::-webkit-scrollbar,
html[data-skin="soft"] .dropdown-menu::-webkit-scrollbar,
html[data-skin="soft"] .dash-wview-list::-webkit-scrollbar,
html[data-skin="soft"] .dash-slicer-list::-webkit-scrollbar,
html[data-skin="soft"] .dcf-values::-webkit-scrollbar { width: 8px; }
html[data-skin="soft"] .combo-panel::-webkit-scrollbar-track,
html[data-skin="soft"] .dropdown-menu::-webkit-scrollbar-track,
html[data-skin="soft"] .dash-wview-list::-webkit-scrollbar-track,
html[data-skin="soft"] .dash-slicer-list::-webkit-scrollbar-track,
html[data-skin="soft"] .dcf-values::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
html[data-skin="soft"] .combo-panel::-webkit-scrollbar-thumb,
html[data-skin="soft"] .dropdown-menu::-webkit-scrollbar-thumb,
html[data-skin="soft"] .dash-wview-list::-webkit-scrollbar-thumb,
html[data-skin="soft"] .dash-slicer-list::-webkit-scrollbar-thumb,
html[data-skin="soft"] .dcf-values::-webkit-scrollbar-thumb {
    background: var(--sk-rule); border-radius: 8px; border: 2px solid var(--sk-card);
}
html[data-skin="soft"] .combo-panel::-webkit-scrollbar-thumb:hover,
html[data-skin="soft"] .dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--sk-muted); }
html[data-skin="soft"] .combo-panel::-webkit-scrollbar-button,
html[data-skin="soft"] .dropdown-menu::-webkit-scrollbar-button { display: none; height: 0; }


/* Анкета оператора: значения справочников в поиске («Регион», «Название
   сорта» и т. п.) — ЗАГЛАВНЫМИ, как бы они ни были записаны в справочнике
   («бенефис» и «АА АТЛАНТ» выглядят одинаково). Только отображение:
   сохраняется значение справочника как есть, поиск не зависит от
   регистра. Строка поиска — как набрал оператор. */
body[data-user-id] .combo-option,
body[data-user-id] .combo-panel .form-check-label,
body[data-user-id] .combo-trigger-input { text-transform: uppercase; }
body[data-user-id] .combo-trigger-input::placeholder { text-transform: none; }
/* …и все остальные варианты выбора в анкете оператора: выпадающие списки,
   подписи переключателей и галочек («Да», «Нет», «Не знаю / Нет ответа»),
   списки «Выберите варианты». Тексты вопросов, заголовки и список перехода
   по страницам — как есть. */
body[data-user-id] form select.form-select:not(#page-jump-select),
body[data-user-id] form select.form-select:not(#page-jump-select) option,
body[data-user-id] form .form-check-label,
body[data-user-id] form .dropdown-toggle.text-start { text-transform: uppercase; }

/* Панели редактирования (вопрос, страница, колонка матрицы — .card.bg-light,
   .bg-light.border) в светлой теме: панель заметно серее карточки, поля
   внутри — белые с тонкой рамкой, как контраст в тёмной теме (там панель
   светлее фона, поля — темнее панели). Иначе всё сливалось. */
html[data-skin="soft"]:not([data-bs-theme="dark"]) .card.bg-light,
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light.border.rounded {
    background-color: #eceee8 !important;
    box-shadow: inset 0 0 0 1px #e0e4da;
}
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .form-control,
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .form-select,
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .input-group-text,
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .form-control:focus,
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .form-select:focus {
    background-color: #ffffff;
    border: 1px solid #dde2d6;
}
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light .form-check-input:not(:checked) { background-color: #ffffff; border-color: #c9cfc2; }

/* Тёмная тема: окна разных уровней различимы — у каждой карточки тонкая
   светлая рамка, вложенные карточки (страница → вопрос → панель) с каждым
   уровнем чуть светлее. Раньше всё было одного цвета, а тень на тёмном
   фоне почти не видна. */
html[data-skin="soft"][data-bs-theme="dark"] .card { border: 1px solid #2c3235; }
html[data-skin="soft"][data-bs-theme="dark"] .card .card { background: #22282b; border-color: #333a3d; }
html[data-skin="soft"][data-bs-theme="dark"] .card .card .card { background: #2a3033; border-color: #3b4346; }
html[data-skin="soft"][data-bs-theme="dark"] .card .card .card .card { background: #30373a; }
/* Поля во вложенных карточках — темнее своей карточки, как в светлой теме
   поля белее панели. */
html[data-skin="soft"][data-bs-theme="dark"] .card .card .form-control,
html[data-skin="soft"][data-bs-theme="dark"] .card .card .form-select,
html[data-skin="soft"][data-bs-theme="dark"] .card .card .form-control:focus,
html[data-skin="soft"][data-bs-theme="dark"] .card .card .form-select:focus { background-color: #171b1d; }

/* Прокрутка внутри виджетов дашборда и таблиц — тоже тонкая скруглённая
   полоса без стрелок (квадратная со стрелками ломала скругление карточки). */
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar,
html[data-skin="soft"] .grid-stack-item-content::-webkit-scrollbar,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar,
html[data-skin="soft"] .dash-cov-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar-track,
html[data-skin="soft"] .grid-stack-item-content::-webkit-scrollbar-track,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar-track,
html[data-skin="soft"] .dash-cov-scroll::-webkit-scrollbar-track { background: transparent; margin: 10px; }
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar-thumb,
html[data-skin="soft"] .grid-stack-item-content::-webkit-scrollbar-thumb,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar-thumb,
html[data-skin="soft"] .dash-cov-scroll::-webkit-scrollbar-thumb { background: var(--sk-rule); border-radius: 8px; }
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar-thumb:hover,
html[data-skin="soft"] .grid-stack-item-content::-webkit-scrollbar-thumb:hover,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--sk-muted); }
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar-button,
html[data-skin="soft"] .grid-stack-item-content::-webkit-scrollbar-button,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar-button,
html[data-skin="soft"] .dash-cov-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html[data-skin="soft"] .grid-stack-item-content *::-webkit-scrollbar-corner,
html[data-skin="soft"] .table-responsive::-webkit-scrollbar-corner { background: transparent; }


/* Полосы прогресса (заполнение анкеты и т.п.) — зелёным цветом сайта, не синим. */
.progress { --bs-progress-bar-bg: var(--sk-green); --bs-progress-bg: var(--sk-rule); }
[data-bs-theme="dark"] .progress { --bs-progress-bar-color: #111416; }

/* Курсива на сайте нет: наклонный текст (описания вопросов, пояснения)
   читается тяжелее — везде прямое начертание. */
html[data-skin="soft"] *, html[data-skin="soft"] *::before, html[data-skin="soft"] *::after { font-style: normal !important; }

/* Кабинет оператора (operator_base.html, body[data-user-id]): при наведении
   ничего не приподнимается и не увеличивается — карточки, окна вопросов,
   иконки в кнопках стоят на месте, чтобы не мешать заполнению анкеты. */
html[data-skin="soft"] body[data-user-id] .card,
html[data-skin="soft"] body[data-user-id] .card:hover { transform: none !important; transition: none; }
html[data-skin="soft"] body[data-user-id] .card:hover { box-shadow: var(--sk-shadow); }
html[data-skin="soft"][data-bs-theme="dark"] body[data-user-id] .card:hover { box-shadow: var(--sk-shadow); }
html[data-skin="soft"] body[data-user-id] .btn:hover i { transform: none; }

/* Обычные выпадающие списки (<select>) ведут себя как список справочника
   (.combo-trigger): при наведении поле чуть темнеет, стрелка при открытии
   плавно переворачивается. Стрелка — ::picker-icon настраиваемого списка
   (та же картинка Bootstrap, со своей тёмной версией), фоновая стрелка
   Bootstrap у таких списков убрана. */
html[data-skin="soft"] select.form-select { transition: background-color .15s ease; }
html[data-skin="soft"] select.form-select:not(:disabled):hover { background-color: #eceee9; }
html[data-skin="soft"][data-bs-theme="dark"] select.form-select:not(:disabled):hover { background-color: #2a2f32; }
html[data-skin="soft"]:not([data-bs-theme="dark"]) .bg-light select.form-select:not(:disabled):hover { background-color: #f3f4f1; }
html[data-skin="soft"][data-bs-theme="dark"] .card .card select.form-select:not(:disabled):hover { background-color: #232a2d; }
@supports (appearance: base-select) {
    html[data-skin="soft"] select.form-select:not([multiple]):not([size]) {
        background-image: none;
        padding-right: .75rem;
        display: flex;
        align-items: center;
    }
    html[data-skin="soft"] select.form-select:not([multiple]):not([size])::picker-icon {
        display: block;
        content: '';
        flex: none;
        width: 16px;
        height: 12px;
        margin-inline-start: auto;
        padding-inline-start: 0;
        background: var(--bs-form-select-bg-img) center / 16px 12px no-repeat;
        transition: rotate .15s ease;
    }
    html[data-skin="soft"] select.form-select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
}