/* ============================================================================
   OCPP BY - фирменное оформление менеджера

   Второй облик интерфейса. Включается глобально в настройках сервера
   ("Оформление интерфейса"), classic при этом остаётся нетронутым: все правила
   здесь живут под [data-design="ocppby"], и без атрибута файл ничего не делает.

   Язык взят из дизайн-системы мобильного приложения OCPP BY (палитра "Терракота",
   стекло, три гарнитуры). Перенесён именно язык, а не мобильные метрики: кнопка
   в 54 пикселя уместна под палец и разваливает плотную таблицу на 20 колонок,
   поэтому размеры здесь настольные, а цвет, радиусы, тени и типографика - те же.

   Темы две, как в приложении: "Дневной лён" (светлая) и "Ночной обжиг" (тёмная).
   Тёмная включается тем же тумблером, что и в classic - классом .dark-mode.
   ============================================================================ */

/* --- гарнитуры, локально: правило проекта - никакого CDN ------------------- */
@import url('../lib/fonts/_faces.css');

/* ============================ ТОКЕНЫ ====================================== */
/* Светлая тема "Дневной лён" - значения из раздела 4.1 дизайн-системы */
[data-design="ocppby"] {
    --ob-bg:            #EFEEEB;
    --ob-bg-deep:       #E3E1DC;
    --ob-surface:       #FFFFFF;
    --ob-surface-2:     #FBF8F6;
    --ob-on:            #1A1614;
    --ob-on-60:         rgba(26, 22, 20, .62);
    --ob-on-45:         rgba(26, 22, 20, .45);
    --ob-on-35:         rgba(26, 22, 20, .32);
    --ob-line:          rgba(26, 22, 20, .10);
    --ob-line-strong:   rgba(26, 22, 20, .16);

    --ob-primary:       #C4603C;
    --ob-primary-light: #E07C52;
    --ob-primary-dark:  #B14F2F;
    --ob-primary-soft:  rgba(196, 96, 60, .10);
    --ob-on-primary:    #FFFFFF;

    --ob-success:       #2E7D5B;
    --ob-success-soft:  rgba(46, 125, 91, .12);
    --ob-warning:       #C8801F;
    --ob-warning-soft:  rgba(200, 128, 31, .14);
    --ob-danger:        #D8433A;
    --ob-danger-soft:   rgba(216, 67, 58, .12);
    --ob-info:          #2E7BC4;
    --ob-info-soft:     rgba(46, 123, 196, .12);

    /* стекло: в светлой теме это белая полупрозрачная плёнка */
    --ob-glass:         linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,255,255,.66));
    --ob-glass-border:  rgba(255, 255, 255, .9);
    --ob-glass-shadow:  0 20px 40px -18px rgba(70, 45, 32, .38);
    --ob-glass-top:     rgba(255, 255, 255, .95);

    --ob-shadow-sm:     0 2px 8px -2px rgba(70, 45, 32, .16);
    --ob-shadow:        0 12px 28px -14px rgba(70, 45, 32, .34);
    --ob-shadow-lg:     0 26px 60px -24px rgba(70, 45, 32, .46);

    /* формы: радиусы из раздела 4.4, уменьшенные под настольную плотность */
    /* поле ввода светлее карточки и с заметной рамкой - иначе пустое поле
       читается как заполненное и недоступное */
    --ob-field:        #FFFFFF;
    --ob-field-soft:   rgba(255, 255, 255, .55);
    --ob-table:        #FAFAF8;
    --ob-table-head:   #EDEBE7;
    --ob-table-odd:    rgba(26, 22, 20, .022);
    --ob-field-border: rgba(26, 22, 20, .34);

    --ob-r-input:   12px;
    --ob-r-btn:     13px;
    --ob-r-chip:    9px;
    --ob-r-card:    18px;
    --ob-r-modal:   22px;

    --ob-font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ob-font-display: 'Unbounded', var(--ob-font-ui);
    --ob-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Тёмная тема "Ночной обжиг" - дефолт мобильного приложения */
[data-design="ocppby"] body.dark-mode {
    --ob-bg:            #100E0D;
    --ob-bg-deep:       #0A0908;
    --ob-surface:       #1C1817;
    --ob-surface-2:     #241E1C;
    --ob-on:            #F6F1ED;
    --ob-on-60:         rgba(246, 241, 237, .60);
    --ob-on-45:         rgba(246, 241, 237, .45);
    --ob-on-35:         rgba(246, 241, 237, .35);
    --ob-line:          rgba(255, 255, 255, .10);
    --ob-line-strong:   rgba(255, 255, 255, .18);

    --ob-primary:       #C4603C;
    --ob-primary-light: #E07C52;
    --ob-primary-dark:  #A8482A;
    --ob-primary-soft:  rgba(224, 124, 82, .16);
    --ob-on-primary:    #FFFFFF;

    /* на тёмном статусные цвета берутся светлые: иначе не проходят по контрасту */
    --ob-success:       #4FD69C;
    --ob-success-soft:  rgba(79, 214, 156, .16);
    --ob-warning:       #E8A33C;
    --ob-warning-soft:  rgba(232, 163, 60, .16);
    --ob-danger:        #FF8A80;
    --ob-danger-soft:   rgba(242, 86, 75, .18);
    --ob-info:          #5BA8F0;
    --ob-info-soft:     rgba(91, 168, 240, .16);

    --ob-glass:         linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.045));
    --ob-glass-border:  rgba(255, 255, 255, .16);
    --ob-glass-shadow:  0 20px 40px -20px rgba(0, 0, 0, .85);
    --ob-glass-top:     rgba(255, 255, 255, .30);

    --ob-shadow-sm:     0 2px 10px -2px rgba(0, 0, 0, .6);
    --ob-shadow:        0 14px 30px -16px rgba(0, 0, 0, .8);
    --ob-shadow-lg:     0 28px 64px -24px rgba(0, 0, 0, .9);

    /* на тёмном поле наоборот - глубже фона карточки, рамка светлее */
    --ob-field:        #14100F;
    --ob-field-soft:   rgba(255, 255, 255, .05);
    --ob-table:        #1A1615;
    --ob-table-head:   #211C1A;
    --ob-table-odd:    rgba(255, 255, 255, .02);
    --ob-field-border: rgba(255, 255, 255, .34);
}

/* ============================ ОСНОВА ====================================== */
[data-design="ocppby"] body {
    background-color: var(--ob-bg);
    color: var(--ob-on);
    font-family: var(--ob-font-ui);
    font-size: 0.9rem;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
}

/* тёплое свечение сверху - в приложении так подсвечен каждый экран */
[data-design="ocppby"] body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 320px;
    background: radial-gradient(120% 100% at 50% -20%, var(--ob-primary-soft), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

[data-design="ocppby"] h1, [data-design="ocppby"] h2, [data-design="ocppby"] h3,
[data-design="ocppby"] h4, [data-design="ocppby"] h5, [data-design="ocppby"] .h4, [data-design="ocppby"] .h5 {
    font-family: var(--ob-font-display);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--ob-on);
}

[data-design="ocppby"] h4, [data-design="ocppby"] .h4 { font-size: 1.35rem; }
[data-design="ocppby"] h5, [data-design="ocppby"] .h5 { font-size: 1.1rem; }
[data-design="ocppby"] h6 { font-family: var(--ob-font-ui); font-weight: 700; font-size: .92rem; }

/* правило дизайн-системы: величина с единицей измерения - всегда моно */
[data-design="ocppby"] .ob-mono,
[data-design="ocppby"] code, [data-design="ocppby"] kbd, [data-design="ocppby"] pre,
[data-design="ocppby"] .badge-mono, [data-design="ocppby"] time {
    font-family: var(--ob-font-mono);
    font-variant-numeric: tabular-nums;
}

[data-design="ocppby"] a { color: var(--ob-primary); }
[data-design="ocppby"] a:hover { color: var(--ob-primary-light); }
[data-design="ocppby"] .text-muted { color: var(--ob-on-60) !important; }
[data-design="ocppby"] hr { border-top-color: var(--ob-line); }

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

/* ============================ ШАПКА ======================================= */
/* стекло держим на немногих слоях - шапка, модалка, выпадающий список. на карточках
   его нет намеренно: их на дашборде сотни, и backdrop-filter на каждой роняет прокрутку */
[data-design="ocppby"] .navbar {
    position: relative;
    z-index: 1030;
    background: var(--ob-glass) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
    border-bottom: 1px solid var(--ob-glass-border);
    box-shadow: var(--ob-shadow-sm);
}

[data-design="ocppby"] .navbar-brand {
    /* вордмарк дизайн-системы набирается Manrope ExtraBold; Unbounded оставлен
       заголовкам и числам-героям, в мелком кегле он расплывается */
    font-family: var(--ob-font-ui);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    color: var(--ob-on) !important;
}

[data-design="ocppby"] .navbar .nav-link {
    /* 60% дизайн-система разрешает вторичному тексту, но пункты меню - основная
       навигация, и на стекле они читались плохо */
    color: var(--ob-on) !important;
    opacity: .82;
    font-weight: 500;
    border-radius: var(--ob-r-chip);
    transition: color .18s ease, background-color .18s ease;
}

[data-design="ocppby"] .navbar .nav-link:hover,
[data-design="ocppby"] .navbar .nav-link.active {
    color: var(--ob-on) !important;
    opacity: 1;
    background: var(--ob-primary-soft);
}

/* ============================ КНОПКИ ====================================== */
[data-design="ocppby"] .btn {
    font-family: var(--ob-font-ui);
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: -0.01em;
    border-radius: var(--ob-r-btn);
    padding: .45rem 1rem;
    border-width: 1px;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

/* нажатие: 0.98, как в приложении */
[data-design="ocppby"] .btn:active { transform: scale(.98); }
[data-design="ocppby"] .btn:focus, [data-design="ocppby"] .btn.focus {
    box-shadow: 0 0 0 3px var(--ob-primary-soft);
}

[data-design="ocppby"] .btn-sm {
    font-size: .78rem;
    padding: .3rem .7rem;
    border-radius: var(--ob-r-chip);
}

[data-design="ocppby"] .btn-lg { font-size: .95rem; padding: .7rem 1.5rem; }

/* главная кнопка: градиент и тёплая тень - единственный такой акцент на экране */
[data-design="ocppby"] .btn-primary {
    background: linear-gradient(160deg, var(--ob-primary-light), var(--ob-primary-dark));
    border-color: transparent;
    color: var(--ob-on-primary);
    box-shadow: 0 10px 22px -10px rgba(224, 124, 82, .70),
                inset 0 1px 0 rgba(255, 255, 255, .40);
}

[data-design="ocppby"] .btn-primary:hover {
    background: linear-gradient(160deg, #E9895F, var(--ob-primary));
    color: var(--ob-on-primary);
    box-shadow: 0 14px 28px -10px rgba(224, 124, 82, .8),
                inset 0 1px 0 rgba(255, 255, 255, .45);
}

[data-design="ocppby"] .btn-success {
    background: var(--ob-success); border-color: transparent; color: #fff;
    box-shadow: 0 10px 22px -12px var(--ob-success);
}
[data-design="ocppby"] .btn-danger {
    background: var(--ob-danger); border-color: transparent; color: #fff;
    box-shadow: 0 10px 22px -12px var(--ob-danger);
}
[data-design="ocppby"] .btn-warning {
    background: var(--ob-warning); border-color: transparent; color: #fff;
    box-shadow: 0 10px 22px -12px var(--ob-warning);
}
[data-design="ocppby"] .btn-secondary {
    background: var(--ob-on); border-color: transparent; color: var(--ob-bg);
}
[data-design="ocppby"] body.dark-mode .btn-success,
[data-design="ocppby"] body.dark-mode .btn-danger,
[data-design="ocppby"] body.dark-mode .btn-warning { color: #14100F; }

/* контурные: на стекле сплошная заливка выглядит заплаткой, поэтому только рамка */
[data-design="ocppby"] .btn-outline-secondary,
[data-design="ocppby"] .btn-outline-dark {
    color: var(--ob-on-60);
    border-color: var(--ob-line-strong);
    background: transparent;
}
[data-design="ocppby"] .btn-outline-secondary:hover,
[data-design="ocppby"] .btn-outline-dark:hover {
    background: var(--ob-primary-soft);
    border-color: var(--ob-primary);
    color: var(--ob-on);
}

[data-design="ocppby"] .btn-outline-primary { color: var(--ob-primary); border-color: var(--ob-primary); }
[data-design="ocppby"] .btn-outline-primary:hover { background: var(--ob-primary); color: #fff; }
[data-design="ocppby"] .btn-outline-danger { color: var(--ob-danger); border-color: var(--ob-danger); }
[data-design="ocppby"] .btn-outline-danger:hover { background: var(--ob-danger); color: #fff; }
[data-design="ocppby"] .btn-outline-success { color: var(--ob-success); border-color: var(--ob-success); }
[data-design="ocppby"] .btn-outline-success:hover { background: var(--ob-success); color: #fff; }

/* группа кнопок: скругление снаружи, стык внутри */
[data-design="ocppby"] .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[data-design="ocppby"] .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ============================ ФОРМЫ ======================================= */
[data-design="ocppby"] .form-control,
[data-design="ocppby"] .custom-select {
    background-color: var(--ob-field);
    border: 1px solid var(--ob-field-border);
    border-radius: var(--ob-r-input);
    color: var(--ob-on);
    font-family: var(--ob-font-ui);
    font-size: .875rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

[data-design="ocppby"] .form-control:focus,
[data-design="ocppby"] .custom-select:focus {
    background-color: var(--ob-surface);
    border-color: rgba(224, 124, 82, .55);
    box-shadow: 0 0 0 3px rgba(224, 124, 82, .16);
    color: var(--ob-on);
}

[data-design="ocppby"] .form-control::placeholder { color: var(--ob-on-35); font-weight: 400; }

/* недоступное поле обязано отличаться от обычного: штриховка и курсор "нельзя",
   иначе пустое поле читается как заполненное и заблокированное */
[data-design="ocppby"] .form-control:disabled,
[data-design="ocppby"] .form-control[readonly],
[data-design="ocppby"] .custom-select:disabled {
    background-color: var(--ob-bg-deep);
    border-style: dashed;
    color: var(--ob-on-45);
    cursor: not-allowed;
}
[data-design="ocppby"] .form-control-sm, [data-design="ocppby"] .custom-select-sm { border-radius: var(--ob-r-chip); }
[data-design="ocppby"] label,
[data-design="ocppby"] .flow-label { font-weight: 600; font-size: .82rem; color: var(--ob-on-60); }
[data-design="ocppby"] .input-group-text {
    background: var(--ob-bg-deep);
    border-color: var(--ob-line-strong);
    color: var(--ob-on-60);
    border-radius: var(--ob-r-input);
}

/* переключатели и галочки в терракоте */
[data-design="ocppby"] .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--ob-primary-soft);
}

/* ============================ КАРТОЧКИ ==================================== */
[data-design="ocppby"] .card {
    background-color: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-card);
    box-shadow: var(--ob-shadow-sm);
}

/* скругление шапке и подвалу даём напрямую: overflow:hidden на карточке обрезал бы
   всё, что из неё выходит - выпадающие списки, подсказки, календарь */
[data-design="ocppby"] .card > .card-header:first-child {
    border-radius: calc(var(--ob-r-card) - 1px) calc(var(--ob-r-card) - 1px) 0 0;
}
[data-design="ocppby"] .card > .card-footer:last-child {
    border-radius: 0 0 calc(var(--ob-r-card) - 1px) calc(var(--ob-r-card) - 1px);
}

[data-design="ocppby"] .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ob-line);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: -0.01em;
    padding: .7rem 1rem;
}


/* цветные шапки станций: у classic это заливка, здесь - мягкая подложка и
   цветная полоса сверху. сплошной красный на каждой второй плитке утомляет глаз */
[data-design="ocppby"] .card-header.successColor,
[data-design="ocppby"] .card-header.errorColor,
[data-design="ocppby"] .card-header.infoColor,
[data-design="ocppby"] .card-header.unavailableColor {
    color: var(--ob-on);
    position: relative;
    border-bottom: 1px solid var(--ob-line);
}


[data-design="ocppby"] .card-header.successColor      { background: var(--ob-success-soft); }
[data-design="ocppby"] .card-header.errorColor        { background: var(--ob-primary-soft); }
[data-design="ocppby"] .card-header.infoColor         { background: var(--ob-warning-soft); }
[data-design="ocppby"] .card-header.unavailableColor  { background: var(--ob-danger-soft); }

/* идёт зарядка - шапку прокатывает блик, как линзу в приложении */
[data-design="ocppby"] .card-header.errorColor::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(224, 124, 82, .22), transparent);
    animation: ob-sheen 5.5s ease-in-out infinite;
}

@keyframes ob-sheen {
    0%   { left: -45%; }
    45%  { left: 105%; }
    100% { left: 105%; }
}

/* ============================ ТАБЛИЦЫ ===================================== */

[data-design="ocppby"] .table thead th {
    font-family: var(--ob-font-mono);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--ob-on-45);
    border-bottom: 1px solid var(--ob-line-strong);
    border-top: 0;
    padding: .6rem .55rem;
    white-space: nowrap;
}

[data-design="ocppby"] .table td {
    border-top: 1px solid var(--ob-line);
    padding: .55rem;
    vertical-align: middle;
}

[data-design="ocppby"] .table-hover tbody tr:hover { background-color: var(--ob-primary-soft); }
[data-design="ocppby"] body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .022); }
[data-design="ocppby"] .table-row { cursor: pointer; transition: background-color .15s ease; }
[data-design="ocppby"] .table-danger  { background-color: var(--ob-danger-soft) !important; }
[data-design="ocppby"] .table-warning { background-color: var(--ob-warning-soft) !important; }
[data-design="ocppby"] .table-success { background-color: var(--ob-success-soft) !important; }

/* идентификаторы, время и величины - моно, как требует дизайн-система */
[data-design="ocppby"] .table td small,
[data-design="ocppby"] .table .text-monospace { font-family: var(--ob-font-mono); }

/* ============================ ВКЛАДКИ ===================================== */
[data-design="ocppby"] .nav-tabs {
    border-bottom: 1px solid var(--ob-line-strong);
    gap: 2px;
}

[data-design="ocppby"] .nav-tabs .nav-link {
    border: 0;
    border-radius: var(--ob-r-chip) var(--ob-r-chip) 0 0;
    color: var(--ob-on-60);
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .9rem;
    position: relative;
    transition: color .18s ease, background-color .18s ease;
}

[data-design="ocppby"] .nav-tabs .nav-link:hover { color: var(--ob-on); background: var(--ob-primary-soft); }

[data-design="ocppby"] .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--ob-primary);
}

/* подчёркивание вместо коробки: активная вкладка не должна выглядеть кнопкой */
[data-design="ocppby"] .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: .6rem; right: .6rem; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ob-primary-light), var(--ob-primary));
}

[data-design="ocppby"] .tab-content.border { border-color: var(--ob-line) !important; border-radius: 0 0 var(--ob-r-card) var(--ob-r-card); }
[data-design="ocppby"] .nav-pills .nav-link.active { background-color: var(--ob-primary); border-radius: var(--ob-r-chip); }

/* ============================ МОДАЛКИ ===================================== */
[data-design="ocppby"] .modal-content {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid var(--ob-glass-border);
    border-radius: var(--ob-r-modal);
    box-shadow: var(--ob-glass-shadow);
    color: var(--ob-on);
}

[data-design="ocppby"] body.dark-mode .modal-content { background: linear-gradient(155deg, #262120, #191514); }
[data-design="ocppby"] .modal-footer { border-top: 1px solid var(--ob-line); padding: .85rem 1.25rem; }
[data-design="ocppby"] .modal-backdrop.show { opacity: .6; }
[data-design="ocppby"] .close { color: var(--ob-on-45); text-shadow: none; opacity: 1; }
[data-design="ocppby"] .close:hover { color: var(--ob-on); }

/* ============================ МЕТКИ И СООБЩЕНИЯ =========================== */
[data-design="ocppby"] .badge {
    font-family: var(--ob-font-mono);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .06em;
    padding: .3em .6em;
    border-radius: var(--ob-r-chip);
}

[data-design="ocppby"] .badge-success   { background: var(--ob-success-soft); color: var(--ob-success); }
[data-design="ocppby"] .badge-danger    { background: var(--ob-danger-soft);  color: var(--ob-danger); }
[data-design="ocppby"] .badge-warning   { background: var(--ob-warning-soft); color: var(--ob-warning); }
[data-design="ocppby"] .badge-info      { background: var(--ob-info-soft);    color: var(--ob-info); }
[data-design="ocppby"] .badge-primary   { background: var(--ob-primary-soft); color: var(--ob-primary); }
[data-design="ocppby"] .badge-secondary { background: var(--ob-line);         color: var(--ob-on-60); }
[data-design="ocppby"] .badge-light     { background: var(--ob-bg-deep);      color: var(--ob-on-60); }
[data-design="ocppby"] .badge-dark      { background: var(--ob-on);           color: var(--ob-bg); }

[data-design="ocppby"] .alert {
    border: 1px solid var(--ob-line);
    border-left-width: 3px;
    border-radius: var(--ob-r-input);
    font-size: .86rem;
}

[data-design="ocppby"] .alert-success { background: var(--ob-success-soft); border-left-color: var(--ob-success); color: var(--ob-on); }
[data-design="ocppby"] .alert-danger  { background: var(--ob-danger-soft);  border-left-color: var(--ob-danger);  color: var(--ob-on); }
[data-design="ocppby"] .alert-warning { background: var(--ob-warning-soft); border-left-color: var(--ob-warning); color: var(--ob-on); }
[data-design="ocppby"] .alert-info    { background: var(--ob-info-soft);    border-left-color: var(--ob-info);    color: var(--ob-on); }

/* ============================ СПИСКИ И ПРОЧЕЕ ============================= */

[data-design="ocppby"] body.dark-mode .dropdown-menu { background: linear-gradient(155deg, #272220, #1A1615); }
[data-design="ocppby"] .dropdown-item {
    border-radius: var(--ob-r-chip);
    color: var(--ob-on);
    font-size: .85rem;
    font-weight: 500;
    padding: .45rem .7rem;
}
[data-design="ocppby"] .dropdown-item:hover { background: var(--ob-primary-soft); color: var(--ob-on); }
[data-design="ocppby"] .dropdown-divider { border-top-color: var(--ob-line); }

[data-design="ocppby"] .list-group-item {
    background: var(--ob-surface);
    border-color: var(--ob-line);
    color: var(--ob-on);
}

[data-design="ocppby"] .page-link:hover { background: var(--ob-primary-soft); color: var(--ob-on); }

[data-design="ocppby"] .progress { background-color: var(--ob-bg-deep); border-radius: 99px; height: .5rem; }
[data-design="ocppby"] .progress-bar { background: linear-gradient(90deg, var(--ob-primary-light), var(--ob-primary)); }

[data-design="ocppby"] .breadcrumb { background: transparent; padding-left: 0; font-size: .82rem; }
[data-design="ocppby"] .tooltip-inner { background: var(--ob-on); color: var(--ob-bg); border-radius: var(--ob-r-chip); font-family: var(--ob-font-ui); }
[data-design="ocppby"] .popover { border-radius: var(--ob-r-card); border-color: var(--ob-line); background: var(--ob-surface); }

/* полоса прокрутки под тему: в тёмной белая по умолчанию режет глаз */
[data-design="ocppby"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-design="ocppby"] ::-webkit-scrollbar-track { background: transparent; }
[data-design="ocppby"] ::-webkit-scrollbar-thumb { background: var(--ob-line-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
[data-design="ocppby"] ::-webkit-scrollbar-thumb:hover { background: var(--ob-on-35); background-clip: content-box; }

/* ============================ ДАШБОРД ===================================== */
[data-design="ocppby"] .dash-dock .btn.active,
[data-design="ocppby"] .dash-dock .btn-secondary {
    background: var(--ob-primary);
    border-color: var(--ob-primary);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(224, 124, 82, .8);
}

/* кнопка автообновления: живой значок вместо статичного - видно, что связь есть */
[data-design="ocppby"] #autoRefreshToggle.btn-success {
    background: var(--ob-success);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -10px var(--ob-success);
}
[data-design="ocppby"] body.dark-mode #autoRefreshToggle.btn-success { color: #14100F; }

[data-design="ocppby"] .compact-station-card,
[data-design="ocppby"] #dashboard-container .card {
    transition: transform .16s ease, box-shadow .2s ease;
}
[data-design="ocppby"] #dashboard-container .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ob-shadow);
}

/* подпись знака платформы - строго по дизайн-системе: моно, разрядка, приглушённо */
[data-design="ocppby"] .ob-powered {
    font-family: var(--ob-font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ob-on-35);
}

/* ============================ ВХОД ======================================== */
/* вход остаётся тёмным в обеих темах: на светлом фоне белые линии сцены и
   белая ссылка на документы не читаются */
[data-design="ocppby"] body.login-body {
    background:
        radial-gradient(90% 70% at 50% 100%, rgba(196, 96, 60, .35), transparent 65%),
        linear-gradient(160deg, #241E1C 0%, #16110F 55%, #100E0D 100%);
}

[data-design="ocppby"] body.login-body .card {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid var(--ob-glass-border);
    border-radius: var(--ob-r-modal);
    box-shadow: var(--ob-glass-shadow);
}

/* уважение к системной настройке: пружины и блики отключаются вместе с анимациями */
@media (prefers-reduced-motion: reduce) {
    [data-design="ocppby"] .card-header.errorColor::before { animation: none; }
    [data-design="ocppby"] .btn,
    [data-design="ocppby"] #dashboard-container .card { transition: none; }
}

/* ============================ УТИЛИТЫ BOOTSTRAP =========================== */
/* у них !important, поэтому и здесь без него никак: иначе в тёмной теме
   bg-light остаётся белым пятном посреди чёрного экрана */
[data-design="ocppby"] .bg-light  { background-color: var(--ob-surface-2) !important; }
[data-design="ocppby"] .bg-white  { background-color: var(--ob-surface) !important; }
[data-design="ocppby"] .bg-dark   { background-color: var(--ob-on) !important; color: var(--ob-bg); }
[data-design="ocppby"] .bg-secondary { background-color: var(--ob-line) !important; }
[data-design="ocppby"] .text-dark  { color: var(--ob-on) !important; }
[data-design="ocppby"] .text-white { color: var(--ob-bg) !important; }
[data-design="ocppby"] body.dark-mode .text-white { color: var(--ob-on) !important; }
[data-design="ocppby"] .text-secondary { color: var(--ob-on-60) !important; }
[data-design="ocppby"] .text-success { color: var(--ob-success) !important; }
[data-design="ocppby"] .text-danger  { color: var(--ob-danger) !important; }
[data-design="ocppby"] .text-warning { color: var(--ob-warning) !important; }
[data-design="ocppby"] .text-info    { color: var(--ob-info) !important; }
[data-design="ocppby"] .text-primary { color: var(--ob-primary) !important; }

[data-design="ocppby"] .border,
[data-design="ocppby"] .border-top, [data-design="ocppby"] .border-bottom,
[data-design="ocppby"] .border-left, [data-design="ocppby"] .border-right { border-color: var(--ob-line) !important; }
[data-design="ocppby"] .rounded { border-radius: var(--ob-r-input) !important; }

/* тёмная шапка таблицы: в этой палитре она инородна, у заголовков своя разрядка */
[data-design="ocppby"] .thead-dark th,
[data-design="ocppby"] .table-dark {
    background-color: transparent !important;
    color: var(--ob-on-45) !important;
    border-color: var(--ob-line-strong) !important;
}

/* моно-текст в разметке: bootstrap красит code в розовый, здесь он нейтральный */
[data-design="ocppby"] code {
    color: var(--ob-on);
    background: var(--ob-primary-soft);
    padding: .1em .35em;
    border-radius: 5px;
    font-size: .84em;
}
[data-design="ocppby"] pre code { background: transparent; padding: 0; }

/* обычные галочки и переключатели - терракотовые, как и custom-control */
[data-design="ocppby"] input[type="checkbox"],
[data-design="ocppby"] input[type="radio"] { accent-color: var(--ob-primary); }

/* оставшиеся цвета кнопок */
[data-design="ocppby"] .btn-info { background: var(--ob-info); border-color: transparent; color: #fff; }
[data-design="ocppby"] .btn-outline-info { color: var(--ob-info); border-color: var(--ob-info); }
[data-design="ocppby"] .btn-outline-info:hover { background: var(--ob-info); color: #fff; }
[data-design="ocppby"] .btn-outline-warning { color: var(--ob-warning); border-color: var(--ob-warning); }
[data-design="ocppby"] .btn-outline-warning:hover { background: var(--ob-warning); color: #fff; }
[data-design="ocppby"] .btn-light { background: var(--ob-surface-2); border-color: var(--ob-line); color: var(--ob-on); }
[data-design="ocppby"] .btn-dark { background: var(--ob-on); border-color: transparent; color: var(--ob-bg); }
[data-design="ocppby"] .btn-link { color: var(--ob-primary); }

/* таблица внутри карточки не должна рисовать вторую рамку поверх её скругления */
[data-design="ocppby"] .card > .table:last-child { margin-bottom: 0; }
[data-design="ocppby"] .table-responsive { border-radius: var(--ob-r-input); }

/* ============================ ЧАСТНЫЕ БЛОКИ =============================== */
/* то, что в classic живёт в dark-theme.css. здесь этот файл не подключается вовсе:
   две тёмные темы поверх друг друга дают конфликты с !important, и выигрывает
   в них та, что подключена позже, а не та, что задумана */

[data-design="ocppby"] .footer {
    background: transparent;
    border-top: 1px solid var(--ob-line);
    color: var(--ob-on-45);
}

[data-design="ocppby"] .form-text { color: var(--ob-on-45); }

/* быстрые команды на карточке станции */
[data-design="ocppby"] .command-trigger { color: var(--ob-on-45); cursor: pointer; transition: color .15s ease; }
[data-design="ocppby"] .command-trigger:hover { color: var(--ob-primary); }

[data-design="ocppby"] .quick-commands-container,
[data-design="ocppby"] .custom-dropdown-menu {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-card);
    box-shadow: var(--ob-shadow);
    color: var(--ob-on);
}

[data-design="ocppby"] .custom-dropdown-item { color: var(--ob-on); border-radius: var(--ob-r-chip); }
[data-design="ocppby"] .custom-dropdown-item:hover { background: var(--ob-primary-soft); }
[data-design="ocppby"] .custom-dropdown-divider { border-top: 1px solid var(--ob-line); }

[data-design="ocppby"] .table-info > td      { background-color: var(--ob-info-soft) !important; }
[data-design="ocppby"] .table-light > td     { background-color: var(--ob-surface-2) !important; }
[data-design="ocppby"] .table-secondary > td { background-color: var(--ob-line) !important; }
[data-design="ocppby"] .table-success > td   { background-color: var(--ob-success-soft) !important; }
[data-design="ocppby"] .table-warning > td   { background-color: var(--ob-warning-soft) !important; }
[data-design="ocppby"] .table-danger > td    { background-color: var(--ob-danger-soft) !important; }
[data-design="ocppby"] .thead-light th       { background-color: transparent; color: var(--ob-on-45); }

[data-design="ocppby"] #adminPasswordModal .list-group-item { background: transparent; border-color: var(--ob-line); }
[data-design="ocppby"] #adminPasswordModal .list-group-item:hover { background: var(--ob-primary-soft); }

/* карта: подложка тайлов в тёмной теме гасится, чтобы не слепила */
[data-design="ocppby"] .leaflet-popup-content-wrapper,
[data-design="ocppby"] .leaflet-popup-tip {
    background: var(--ob-surface);
    color: var(--ob-on);
    border-radius: var(--ob-r-input);
}

/* ============================ ИСПРАВЛЕНИЯ ================================= */

/* Выпадающий список: пункт обязан занимать всю ширину полосы, иначе нажатие
   срабатывает только по самим буквам, а мимо текста - в пустоту */
[data-design="ocppby"] .dropdown-item,
[data-design="ocppby"] .custom-dropdown-item {
    display: block;
    box-sizing: border-box;
    clear: both;
    text-align: inherit;
    white-space: nowrap;
}

/* стекло под списком создаёт свой слой наложения; без явного слоя пункты
   местами оказывались под ним и не принимали нажатие */
[data-design="ocppby"] .dropdown-menu > * { position: relative; z-index: 1; }
[data-design="ocppby"] .dropdown-menu {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid var(--ob-glass-border);
    border-radius: var(--ob-r-card);
    box-shadow: var(--ob-glass-shadow);
    padding: .35rem;
    z-index: 1050;
}

/* списки подсказок и поиска (права, станции, теги) - те же правила, что и у
   обычного выпадающего списка: они рисуются своей разметкой, не bootstrap */
[data-design="ocppby"] .autocomplete-items,
[data-design="ocppby"] .search-results,
[data-design="ocppby"] .typeahead,
[data-design="ocppby"] .tt-menu {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-card);
    box-shadow: var(--ob-shadow);
    color: var(--ob-on);
    z-index: 1050;
}

[data-design="ocppby"] .autocomplete-items div,
[data-design="ocppby"] .search-results div,
[data-design="ocppby"] .tt-suggestion {
    display: block;
    width: 100%;
    padding: .45rem .7rem;
    color: var(--ob-on);
    cursor: pointer;
}

[data-design="ocppby"] .autocomplete-items div:hover,
[data-design="ocppby"] .search-results div:hover,
[data-design="ocppby"] .tt-suggestion:hover,
[data-design="ocppby"] .autocomplete-active {
    background: var(--ob-primary-soft) !important;
    color: var(--ob-on) !important;
}

/* Тёмная шапка таблицы: bootstrap красит её в #343a40 и белым текстом. В светлой
   теме получалась чёрная полоса, в тёмной - тёмное на тёмном */
[data-design="ocppby"] .thead-dark th,
[data-design="ocppby"] thead.thead-dark th,
[data-design="ocppby"] .table .thead-dark th {
    background-color: var(--ob-bg-deep) !important;
    color: var(--ob-on-60) !important;
    border-color: var(--ob-line-strong) !important;
}

/* Кнопки в группе режимов были крупнее соседних: bootstrap задаёт размер через
   .btn-group-sm > .btn, и правило для .btn-sm их не касается */
[data-design="ocppby"] .btn-group-sm > .btn {
    font-size: .78rem;
    padding: .3rem .7rem;
    border-radius: var(--ob-r-chip);
}
[data-design="ocppby"] .btn-group-sm > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[data-design="ocppby"] .btn-group-sm > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Переключатели в модалке: bootstrap рисует ползунок псевдоэлементом, а настоящий
   input лежит поверх прозрачным. Свой accent-color на нём подменял отрисовку, и
   переключатель переставал гаснуть - для custom-control он не нужен */
[data-design="ocppby"] .custom-control-input { accent-color: auto; }

/* Карта остаётся светлой в обеих темах, значит и панели поверх неё - светлые.
   Наследованный светлый текст делал легенду нечитаемой */
[data-design="ocppby"] body.dark-mode .map-legend,
[data-design="ocppby"] body.dark-mode .leaflet-control,
[data-design="ocppby"] body.dark-mode .leaflet-popup-content-wrapper,
[data-design="ocppby"] body.dark-mode .leaflet-popup-tip {
    background: #FFFFFF;
    color: #1A1614;
}

[data-design="ocppby"] body.dark-mode .map-legend a,
[data-design="ocppby"] body.dark-mode .leaflet-control a { color: var(--ob-primary); }
[data-design="ocppby"] body.dark-mode .map-legend .text-muted { color: rgba(26, 22, 20, .6) !important; }

/* тайлы не гасим: карта задумана светлой, притушенная делает легенду поверх мутной */
[data-design="ocppby"] body.dark-mode .leaflet-tile { filter: none; }

/* оставшиеся виды сообщений: без них светлая плашка остаётся белой в тёмной теме */
[data-design="ocppby"] .alert-secondary,
[data-design="ocppby"] .alert-light {
    background: var(--ob-surface-2);
    border-left-color: var(--ob-line-strong);
    color: var(--ob-on);
}
[data-design="ocppby"] .alert-primary { background: var(--ob-primary-soft); border-left-color: var(--ob-primary); color: var(--ob-on); }
[data-design="ocppby"] .alert-dark { background: var(--ob-bg-deep); border-left-color: var(--ob-line-strong); color: var(--ob-on); }

/* блоки-обёртки, которые в разметке помечены только рамкой */
[data-design="ocppby"] .list-group-item-action:hover { background: var(--ob-primary-soft); }
[data-design="ocppby"] .card.bg-light,
[data-design="ocppby"] .jumbotron { background: var(--ob-surface-2) !important; }
[data-design="ocppby"] .modal-body .border:not(.flow-pick-menu):not(.dropdown-menu),
[data-design="ocppby"] .card-body .border:not(.flow-pick-menu):not(.dropdown-menu) { background-color: transparent; }

/* поля поиска и подсказки внутри модалок - тот же слой, что и списки */
[data-design="ocppby"] .modal .dropdown-menu { z-index: 1060; }

/* Списки с галочками (права, станции, теги): у custom-control подпись шириной по
   тексту, и нажатие переключало только попав в сами буквы - остальные четыре пятых
   строки были мёртвой зоной. Растягиваем подпись на всю строку */
[data-design="ocppby"] .perm-item,
[data-design="ocppby"] .check-list-item {
    display: block;
    border-radius: var(--ob-r-chip);
    transition: background-color .12s ease;
}

[data-design="ocppby"] .perm-item .custom-control-label,
[data-design="ocppby"] .check-list-item .custom-control-label {
    display: block;
    width: 100%;
    padding: .22rem .4rem .22rem .3rem;
    cursor: pointer;
}

[data-design="ocppby"] .perm-item:hover,
[data-design="ocppby"] .check-list-item:hover { background: var(--ob-primary-soft); }

/* выпадающий список прав: своя разметка, поэтому цвета задаём явно */
[data-design="ocppby"] #permDropdown,
[data-design="ocppby"] #permSelectWrap .border {
    background: var(--ob-surface) !important;
    border-color: var(--ob-line) !important;
    border-radius: var(--ob-r-card) !important;
    box-shadow: var(--ob-shadow);
}

/* ============================ ПОЛИРОВКА =================================== */

/* содержимое не должно упираться в шапку */
[data-design="ocppby"] header + .container,
[data-design="ocppby"] header + .container-fluid { padding-top: 1rem; }

/* --- галочки и переключатели: серые читались как недоступные --- */
[data-design="ocppby"] .custom-control-label::before {
    border: 1.5px solid var(--ob-field-border);
    background-color: var(--ob-field);
}
[data-design="ocppby"] .custom-control-label { cursor: pointer; }
[data-design="ocppby"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ob-primary);
    border-color: var(--ob-primary);
    box-shadow: 0 3px 10px -4px rgba(224, 124, 82, .9);
}
[data-design="ocppby"] .custom-control-input:disabled ~ .custom-control-label {
    color: var(--ob-on-35);
    cursor: not-allowed;
}
[data-design="ocppby"] .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--ob-bg-deep);
    border-style: dashed;
}

/* --- шаги мастера: активная вкладка терракотовая, и номер на ней сливался --- */
[data-design="ocppby"] .nav-pills .nav-link:hover { background: var(--ob-primary-soft); color: var(--ob-on); }
[data-design="ocppby"] .nav-pills .nav-link.active {
    background: linear-gradient(160deg, var(--ob-primary-light), var(--ob-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(224, 124, 82, .8);
}

/* номер шага - кружок ровного размера, на активном шаге читается по белому */
[data-design="ocppby"] .nav-pills .nav-link {
    border-radius: 99px;
    font-weight: 600;
    font-size: .84rem;
    padding: .4rem .9rem;
    color: var(--ob-on-60);
    border: 1px solid var(--ob-line);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    line-height: 1.2;
}

[data-design="ocppby"] .nav-pills .nav-link .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 21px; height: 21px;
    padding: 0;
    margin: 0 !important;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 600;
}
[data-design="ocppby"] .nav-pills .nav-link.active .badge {
    background: rgba(255, 255, 255, .95) !important;
    color: var(--ob-primary) !important;
}

/* --- выбор файла: голый системный элемент выбивался из всего остального --- */
[data-design="ocppby"] input[type="file"] {
    font-family: var(--ob-font-ui);
    font-size: .82rem;
    color: var(--ob-on-60);
    max-width: 100%;
}
[data-design="ocppby"] input[type="file"]::file-selector-button {
    font-family: var(--ob-font-ui);
    font-weight: 600;
    font-size: .8rem;
    color: var(--ob-on);
    background: var(--ob-surface-2);
    border: 1px solid var(--ob-field-border);
    border-radius: var(--ob-r-chip);
    padding: .32rem .8rem;
    margin-right: .6rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
[data-design="ocppby"] input[type="file"]::file-selector-button:hover {
    background: var(--ob-primary-soft);
    border-color: var(--ob-primary);
}

/* --- журналы: сплошной текст, ему нужен левый край и построчная разлиновка --- */
[data-design="ocppby"] .table tbody tr:hover td { background-color: var(--ob-primary-soft); }
[data-design="ocppby"] .table-sm td,
[data-design="ocppby"] .table-sm th { padding: .38rem .5rem; }
[data-design="ocppby"] .table td { color: var(--ob-on); }
[data-design="ocppby"] .table td .text-muted,
[data-design="ocppby"] .table td small { color: var(--ob-on-60) !important; }

/* --- шапка карточки коннектора: длинное имя растягивало плитку --- */
[data-design="ocppby"] #dashboard-container .card-header {
    height: 46px;
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* длинное имя ужимается до двух строк с многоточием: плитка обязана быть одного
   роста с соседями, иначе ряд разъезжается по высоте */
[data-design="ocppby"] #dashboard-container .card-header > span:not(.command-trigger),
[data-design="ocppby"] #dashboard-container .card-header {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-design="ocppby"] #dashboard-container .card-header > i { flex: 0 0 auto; }

/* кнопка быстрых команд - не текст: правило многоточия выше делало из неё -webkit-box,
   и на тач-экране значок уезжал в левый верхний угол своей 44-пиксельной зоны */
[data-design="ocppby"] #dashboard-container .card-header > .command-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* имя ужимается до двух строк и дальше многоточием: плитки обязаны быть одного роста */
[data-design="ocppby"] #dashboard-container .card-header {
    display: flex;
    overflow: hidden;
    line-height: 1.15;
    font-size: .82rem;
}
[data-design="ocppby"] .compact-station-card .card-header .text-truncate { min-width: 0; }

/* Карточки в двухколоночных вкладках: без общего ритма отступов и с разной высотой
   блоки читаются как насыпанные. Одинаковые поля, заметные заголовки, ровные ряды */
[data-design="ocppby"] .tab-pane .row > [class*="col-"] > .card { margin-bottom: 1rem; }
[data-design="ocppby"] .tab-pane .card-header {
    font-size: .84rem;
    letter-spacing: .01em;
    text-transform: none;
    background: var(--ob-surface-2);
}
[data-design="ocppby"] .tab-pane .card-body { padding: 1rem 1.1rem; }

/* подзаголовки внутри карточки - разделяют группы полей, без них всё сливается */
[data-design="ocppby"] .card-body h6,
[data-design="ocppby"] .card-body > strong {
    display: block;
    font-family: var(--ob-font-mono);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--ob-on-45);
    margin: 1.1rem 0 .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--ob-line);
}
[data-design="ocppby"] .card-body > h6:first-child,
[data-design="ocppby"] .card-body > strong:first-child { margin-top: 0; }

/* строка формы: подпись и поле не должны липнуть друг к другу */
[data-design="ocppby"] .form-group { margin-bottom: .85rem; }
[data-design="ocppby"] .custom-control { min-height: 1.6rem; padding-left: 1.9rem; }
[data-design="ocppby"] .custom-control-label::before,
[data-design="ocppby"] .custom-control-label::after { top: .15rem; }

/* плавность: страница не должна дёргаться при наведении и раскрытии */
[data-design="ocppby"] .card,
[data-design="ocppby"] .nav-link,
[data-design="ocppby"] .badge,
[data-design="ocppby"] .list-group-item { transition: background-color .16s ease, border-color .16s ease, color .16s ease; }

[data-design="ocppby"] .tab-pane.show { animation: ob-tab-in .22s ease both; }
@keyframes ob-tab-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="ocppby"] .tab-pane.show { animation: none; }
}

/* Заголовок модалки по центру. Крестик при этом выводится из потока, иначе он
   съедает часть строки и заголовок оказывается смещённым влево от настоящего центра */
[data-design="ocppby"] .modal-header {
    border-bottom: 1px solid var(--ob-line);
    padding: 1rem 1.25rem;
    justify-content: center;
    position: relative;
    padding-right: 3rem;
    padding-left: 3rem;
}

[data-design="ocppby"] .modal-title {
    font-family: var(--ob-font-display);
    font-weight: 300;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
}

[data-design="ocppby"] .modal-header .close {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: .4rem .6rem;
    font-size: 1.4rem;
    line-height: 1;
}

/* Переключатель: дорожка не может быть того же цвета, что и бегунок - вместе они
   сливаются в белое пятно, по которому не понять ни что это, ни включено ли оно.
   Дорожка серая, бегунок белый с тенью, включённая дорожка терракотовая */
[data-design="ocppby"] .custom-switch .custom-control-label::before {
    background-color: var(--ob-line-strong);
    border-color: transparent;
    height: 1.15rem;
    width: 2.1rem;
    border-radius: 99px;
    top: .12rem;
}

[data-design="ocppby"] .custom-switch .custom-control-label::after {
    background-color: #FFFFFF;
    width: calc(1.15rem - 4px);
    height: calc(1.15rem - 4px);
    border-radius: 50%;
    top: calc(.12rem + 2px);
    left: calc(-2.25rem + 2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .16s ease;
}

[data-design="ocppby"] .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ob-primary);
    border-color: transparent;
}

[data-design="ocppby"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(.95rem);
    background-color: #FFFFFF;
}

[data-design="ocppby"] .custom-switch .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--ob-line);
}

/* галочка остаётся квадратной, но её рамка тоже должна быть видна на белом поле */
[data-design="ocppby"] .custom-checkbox .custom-control-label::before {
    border-radius: 5px;
    border: 1.5px solid var(--ob-field-border);
    background-color: var(--ob-field);
}
[data-design="ocppby"] .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ob-primary);
    border-color: var(--ob-primary);
}

/* Таблица во всю ширину карточки: у карточки скруглённые углы, у таблицы прямые, и
   без обрезки её углы торчат наружу. Режем внутри table-responsive - выпадающих
   списков там нет по определению, только таблица с горизонтальной прокруткой */
[data-design="ocppby"] .card > .card-body.p-0 > .table-responsive,
[data-design="ocppby"] .card > .table-responsive {
    border-radius: calc(var(--ob-r-card) - 1px);
    overflow: hidden;
    overflow-x: auto;
}

/* пейджер и выбор размера страницы: не должны упираться в край карточки */
[data-design="ocppby"] .card > .card-body.p-0 > .flow-table-footer {
    margin-top: 0;
    padding: .6rem .9rem;
    border-top: 1px solid var(--ob-line);
}

[data-design="ocppby"] .pagination { margin-bottom: 0; flex-wrap: wrap; }

/* --- список выбора с поиском --- */
[data-design="ocppby"] .flow-pick-menu {
    background: var(--ob-surface);
    border-color: var(--ob-line) !important;
    border-radius: var(--ob-r-card) !important;
    box-shadow: var(--ob-shadow);
}

[data-design="ocppby"] .flow-pick-group {
    background: var(--ob-surface-2);
    border-bottom: 1px solid var(--ob-line);
    font-family: var(--ob-font-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    color: var(--ob-on-45);
}

/* строка целиком кликабельна: подпись по ширине текста оставляла мёртвую зону */
[data-design="ocppby"] .flow-pick-item { display: block; border-radius: var(--ob-r-chip); }
[data-design="ocppby"] .flow-pick-item .custom-control-label {
    display: block;
    width: 100%;
    padding: .25rem .5rem .25rem .3rem;
    cursor: pointer;
}
[data-design="ocppby"] .flow-pick-item:hover { background: var(--ob-primary-soft); }

[data-design="ocppby"] .flow-pick-tag {
    background: var(--ob-primary-soft);
    border-color: transparent !important;
    color: var(--ob-on);
    border-radius: var(--ob-r-chip);
    font-family: var(--ob-font-ui);
    font-size: .72rem;
    letter-spacing: 0;
}
[data-design="ocppby"] .flow-pick-tag .close { color: var(--ob-on-60); text-shadow: none; }
[data-design="ocppby"] .flow-pick-all { color: var(--ob-primary); }

/* кнопки панели дашборда: общий размер кнопок оформления их раздувает, а они служебные */
[data-design="ocppby"] .dash-btn {
    width: 26px;
    height: 26px;
    min-height: 26px;
    min-width: 26px;
    padding: 0;
    font-size: .7rem;
    border-radius: 7px;
}

/* ручка сворачивания в фирменном оформлении: крупнее прячущихся кнопок */
[data-design="ocppby"] .dash-handle {
    width: 34px;
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    padding: 0;
    font-size: .8rem;
    border-radius: 9px;
}

[data-design="ocppby"] .dash-handle.active {
    background: var(--ob-primary);
    border-color: var(--ob-primary);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(224, 124, 82, .9);
}

/* док панели вида: своя подложка, чтобы кнопки не висели прямо на содержимом */
[data-design="ocppby"] .dash-dock {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--ob-glass-border);
    border-radius: 13px;
    padding: 4px;
    box-shadow: var(--ob-shadow);
}

[data-design="ocppby"] body.dark-mode .dash-dock { background: linear-gradient(155deg, #262120, #1A1615); }

/* подвал карточки: он несёт маркер связи, поэтому обязан читаться отдельно и от
   тела карточки, и от подложки страницы */
[data-design="ocppby"] .card-footer {
    background-color: var(--ob-surface-2);
    border-top: 1px solid var(--ob-line);
}

[data-design="ocppby"] body.dark-mode .card-footer { background-color: rgba(255, 255, 255, .035); }

/* свёрнутая ручка: у дока своя рамка, вторая вокруг кнопки лишняя */
[data-design="ocppby"] .dash-handle:not(.active) {
    background: transparent;
    border-color: transparent;
    color: var(--ob-on-60);
}
[data-design="ocppby"] .dash-handle:not(.active):hover {
    background: var(--ob-primary-soft);
    color: var(--ob-on);
}

/* свёрнутый док: только стрелка, без подложки и рамки - иначе они читаются как
   обводка вокруг одинокой кнопки */
[data-design="ocppby"] .dash-dock.dock-bare {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
}

/* ============================ ЕДИНЫЙ ВИД ЭЛЕМЕНТОВ ======================== */
/* Собрано после разбора: таблицы по проекту были кто в белом, кто без фона вовсе,
   поля поиска и пагинация - разного вида. Здесь один вид на всё. */

/* --- таблицы: бледная подложка у всех, независимо от обёртки --- */
[data-design="ocppby"] .table {
    color: var(--ob-on);
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--ob-table);
    border-radius: var(--ob-r-input);
}


[data-design="ocppby"] .table tbody tr { background-color: transparent; }
[data-design="ocppby"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ob-table-odd); }

/* таблица в карточке не рисует вторую подложку поверх её собственной */
[data-design="ocppby"] .card .table { background-color: transparent; }
[data-design="ocppby"] .card .table thead th { background-color: var(--ob-table-head); }

/* --- поля ввода фильтров: полупрозрачные, чтобы не выглядеть заплатками --- */
[data-design="ocppby"] input[type="search"],
[data-design="ocppby"] input[type="date"],
[data-design="ocppby"] input[type="datetime-local"],
[data-design="ocppby"] input[type="time"],
[data-design="ocppby"] .flow-pick-search,
[data-design="ocppby"] input[placeholder*="Поиск"],
[data-design="ocppby"] input[placeholder*="поиск"],
[data-design="ocppby"] .table-search,
[data-design="ocppby"] #pageSearch {
    background-color: var(--ob-field-soft);
    border-color: var(--ob-field-border);
    backdrop-filter: blur(2px);
}

[data-design="ocppby"] input[type="search"]:focus,
[data-design="ocppby"] input[type="date"]:focus,
[data-design="ocppby"] .flow-pick-search:focus,
[data-design="ocppby"] input[placeholder*="Поиск"]:focus,
[data-design="ocppby"] #pageSearch:focus {
    background-color: var(--ob-field);
}

/* --- пагинация: выбор размера, счётчик и стрелки одним стилем --- */
[data-design="ocppby"] .flow-table-footer select,
[data-design="ocppby"] #tablePageSizeSelect,
[data-design="ocppby"] .log-page-size-select {
    background-color: var(--ob-field-soft);
    border-color: var(--ob-field-border);
    color: var(--ob-on);
    border-radius: var(--ob-r-chip);
    font-size: .78rem;
}

[data-design="ocppby"] .page-link {
    background: transparent;
    border: 1px solid var(--ob-line-strong);
    border-radius: var(--ob-r-chip) !important;
    margin: 0 2px;
    font-size: .8rem;
    font-weight: 600;
    background-color: var(--ob-field-soft);
    border-color: var(--ob-field-border);
    color: var(--ob-on-60);
}

[data-design="ocppby"] .page-item.active .page-link {
    background: var(--ob-primary);
    border-color: var(--ob-primary);
    color: #fff;
}

[data-design="ocppby"] .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--ob-line);
    color: var(--ob-on-35);
}

/* --- поиску не нужен значок: по своду это просто строка --- */
[data-design="ocppby"] .input-group > .input-group-prepend > .input-group-text > .fa-search { display: none; }

/* цветная шапка модалки: без скругления сверху она вылазит за края окна */
[data-design="ocppby"] .modal-header.bg-danger,
[data-design="ocppby"] .modal-header.bg-warning,
[data-design="ocppby"] .modal-header.bg-success,
[data-design="ocppby"] .modal-header.bg-info,
[data-design="ocppby"] .modal-header.bg-primary {
    border-radius: calc(var(--ob-r-modal) - 1px) calc(var(--ob-r-modal) - 1px) 0 0;
}

/* и сами цвета - из палитры, а не из bootstrap */
[data-design="ocppby"] .modal-header.bg-danger  { background-color: var(--ob-danger) !important; color: #fff; }
[data-design="ocppby"] .modal-header.bg-warning { background-color: var(--ob-warning) !important; color: #fff; }
[data-design="ocppby"] .modal-header.bg-warning .modal-title,
[data-design="ocppby"] .modal-header.bg-danger .modal-title { color: #fff; }
[data-design="ocppby"] .modal-header.bg-warning .close,
[data-design="ocppby"] .modal-header.bg-danger .close { color: #fff; opacity: .85; }

/* поле суммы с приписной валютой: без выравнивания подпись съезжает вниз за границу */
[data-design="ocppby"] .input-group-append .input-group-text,
[data-design="ocppby"] .input-group-prepend .input-group-text {
    display: flex;
    align-items: center;
    height: auto;
    font-size: .82rem;
}
[data-design="ocppby"] .input-group > .form-control { height: auto; }

/* всплывающие подтверждения и панель сохранения в фирменном виде */
[data-design="ocppby"] .flow-toast {
    border-radius: var(--ob-r-input);
    border: 1px solid var(--ob-line);
    font-family: var(--ob-font-ui);
}

[data-design="ocppby"] .flow-savebar {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
    border: 1px solid var(--ob-glass-border);
    border-radius: 14px;
    box-shadow: var(--ob-shadow);
}

[data-design="ocppby"] body.dark-mode .flow-savebar { background: linear-gradient(155deg, #262120, #1A1615); }
[data-design="ocppby"] .flow-savebar-text { color: var(--ob-on-60); font-family: var(--ob-font-ui); }

/* скелет и липкая шапка в фирменной палитре */
[data-design="ocppby"] .flow-skel-head,
[data-design="ocppby"] .flow-skel-row {
    background: linear-gradient(90deg, var(--ob-line) 25%, var(--ob-line-strong) 37%, var(--ob-line) 63%);
    background-size: 400% 100%;
}

/* у липкой шапки должна быть своя заливка, иначе сквозь неё видно строки */
[data-design="ocppby"] .table thead th { background-color: var(--ob-table-head); }

/* подсветка найденной строки в фирменной палитре */
[data-design="ocppby"] .flow-hl { animation: ob-hl-fade 2.6s ease; }

@keyframes ob-hl-fade {
    0%, 55% { background-color: rgba(224, 124, 82, .28); }
    100%    { background-color: transparent; }
}

/* ============================ ВЫРАВНИВАНИЕ В ТАБЛИЦАХ ===================== */
/* Элементы в ячейках были разной величины и разной высоты строки: где-то кнопка
   обычного размера, где-то мелкая, где-то метка выше соседней. Отсюда ощущение,
   что таблица кривая. Здесь один размер на всё, что стоит внутри ячейки. */

[data-design="ocppby"] .table td,
[data-design="ocppby"] .table th {
    border-top-color: var(--ob-line);
    vertical-align: middle;
}

/* кнопка в ячейке всегда одного размера, независимо от классов в разметке */
[data-design="ocppby"] .table td .btn {
    font-size: .74rem;
    padding: .22rem .5rem;
    line-height: 1.3;
    border-radius: var(--ob-r-chip);
}

[data-design="ocppby"] .table td .btn-group > .btn { padding: .22rem .45rem; }
[data-design="ocppby"] .table td .btn i { font-size: .78rem; }

/* метки одной высоты: в соседних ячейках они разъезжались по вертикали */
[data-design="ocppby"] .table td .badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    vertical-align: middle;
}

/* поля внутри ячейки - тоже одного роста с кнопками */
[data-design="ocppby"] .table td .form-control,
[data-design="ocppby"] .table td .custom-select {
    height: auto;
    padding: .18rem .45rem;
    font-size: .78rem;
}

/* формы в ячейке не должны ломать строку переносом */
[data-design="ocppby"] .table td form { display: inline-block; margin: 0; }
[data-design="ocppby"] .table td form + form { margin-left: 4px; }

/* мелкие удобства в фирменной палитре */
[data-design="ocppby"] .flow-mark { background: rgba(224, 124, 82, .38); }
[data-design="ocppby"] .flow-offline { background: var(--ob-danger); color: #fff; border-radius: 0 0 12px 12px; }
[data-design="ocppby"] .flow-reveal .flow-reveal-btn { color: var(--ob-on-45); }
[data-design="ocppby"] .flow-reveal .flow-reveal-btn:hover { color: var(--ob-on); }

/* новые слои в фирменной палитре */
[data-design="ocppby"] .flow-bulkbar {
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
    border: 1px solid var(--ob-glass-border);
    border-radius: 14px;
    box-shadow: var(--ob-shadow);
}
[data-design="ocppby"] body.dark-mode .flow-bulkbar { background: linear-gradient(155deg, #262120, #1A1615); }
[data-design="ocppby"] .flow-bulkbar-count { color: var(--ob-on-60); }

[data-design="ocppby"] .flow-chip {
    background: var(--ob-primary-soft);
    border-color: transparent !important;
    color: var(--ob-on);
    border-radius: var(--ob-r-chip);
}

[data-design="ocppby"] .flow-totop {
    background: var(--ob-surface);
    border-color: var(--ob-line);
    color: var(--ob-on-60);
    box-shadow: var(--ob-shadow);
}
[data-design="ocppby"] .flow-totop:hover { color: var(--ob-primary); }

[data-design="ocppby"] .flow-strength-bar { background: var(--ob-line); }
[data-design="ocppby"] .flow-strength-4 { background: var(--ob-success); }
[data-design="ocppby"] .flow-details > td { background: var(--ob-surface-2); }

/* текущий раздел в меню виден по заливке */
[data-design="ocppby"] .navbar .nav-link.active { background: var(--ob-primary-soft); opacity: 1; }

/* подвал таблицы держится в границах карточки: выбор размера и стрелки вылезали
   за края заливки, потому что лежали снаружи её отступов */
[data-design="ocppby"] .flow-table-footer {
    padding-left: .9rem;
    padding-right: .9rem;
    box-sizing: border-box;
    max-width: 100%;
}

[data-design="ocppby"] .card > .flow-table-footer,
[data-design="ocppby"] .card-body > .flow-table-footer { margin-left: 0; margin-right: 0; }

/* Палитра переходов в теме OCPP BY: своя подложка и свои цвета текста. */
[data-design="ocppby"] .flow-palette-box {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
}

[data-design="ocppby"] .flow-palette-item {
    color: var(--ob-on);
    border-top-color: var(--ob-line);
}

[data-design="ocppby"] .flow-palette-item:hover,
[data-design="ocppby"] .flow-palette-item.active {
    background: var(--ob-primary-soft);
    color: var(--ob-on);
}


/* Счётчик обновления в панели дашборда: тон берём из палитры оформления. */
[data-design="ocppby"] .dash-refresh .dash-count {
    border-color: rgba(46, 125, 91, .38);
    color: var(--ob-success);
    background: var(--ob-success-soft);
}

[data-design="ocppby"] .dash-refresh-on #autoRefreshToggle:not(.btn-success) + .dash-count {
    border-color: var(--ob-line-strong);
    color: var(--ob-on-60);
    background: rgba(26, 22, 20, .06);
}