/*
   Мониторинг
*/

/* Sticker badge button (global — used inside DataTable RenderFragment slots) */
.btn-sticker-badge {
    background: none;
    border: none;
    padding: 0 3px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--c-muted);
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
    vertical-align: middle;
}
.btn-sticker-badge:hover        { color: var(--c-text-mid); }
.btn-sticker-badge.has-stickers { color: var(--c-danger); }

.sticker-count {
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: super;
    margin-left: 1px;
}

/*  Toolbar  */
.monitor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1 200px;
    max-width: 360px;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .85rem;
}

.toolbar-filter-chip {
    display: flex;
    align-items: stretch;
    min-width: 136px;
    height: 32px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--c-white);
    flex-shrink: 0;
}

.toolbar-filter-chip-active {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 1px var(--c-danger-light);
}

.toolbar-filter-main,
.toolbar-filter-reset {
    border: 0;
    background: transparent;
    color: var(--c-text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.toolbar-filter-main {
    gap: 6px;
    min-width: 100px;
    padding: 0 10px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.toolbar-filter-reset {
    width: 32px;
    border-left: 1px solid var(--c-border-light);
    font-size: .78rem;
}

.toolbar-filter-main:hover,
.toolbar-filter-reset:hover:not(:disabled) {
    background: var(--c-bg-soft);
    color: var(--c-text);
}

.toolbar-filter-chip-active .toolbar-filter-main {
    color: var(--c-danger);
}

.toolbar-filter-chip-active .toolbar-filter-main i {
    color: var(--c-danger);
}

.toolbar-filter-reset:disabled {
    color: var(--c-muted);
    cursor: default;
    opacity: .55;
}

.monitor-freshness {
    color: var(--c-text-light);
    font-size: .8rem;
    white-space: nowrap;
}

.btn-teal {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #fff;
    border-radius: 6px;
    padding: 5px 16px;
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;
}
.btn-teal:hover    { background-color: #17a385; border-color: #17a385; color: #fff; }
.btn-teal:disabled { background-color: #57ccb5; border-color: #57ccb5; color: #fff; }

/*  Переключатель вида  */
.view-toggle {
    display: flex;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: none;
    cursor: pointer;
    color: #9eaab8;
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.view-toggle-btn.active             { background: #2f3f4f; color: #fff; }
.view-toggle-btn:hover:not(.active) { background: #f0f2f5; color: #4a5568; }

.toolbar-group-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-white);
    color: var(--c-text-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}

.toolbar-group-toggle:hover {
    background: var(--c-bg-soft);
    color: var(--c-text);
}

.toolbar-group-toggle-active {
    background: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-white);
}

.toolbar-group-toggle-active:hover {
    background: var(--c-dark-hover);
    color: var(--c-white);
}

/*  Группы  */
.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #eef2f7;
    border-radius: 6px;
    border-left: 3px solid #2f3f4f;
    font-size: .8rem;
    font-weight: 700;
    color: #4a5568;
    margin-top: 8px;
    margin-bottom: 4px;
}
.group-header:first-child { margin-top: 0; }
.group-header-ungrouped {
    border-left-color: #9eaab8;
    background: #f5f6f8;
    color: #9eaab8;
}
.group-name { flex: 1; }
.group-badge {
    background: #2f3f4f;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
}
.group-header-ungrouped .group-badge { background: #9eaab8; }

/*  Selection bar  */
.selection-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #2f3f4f;
    color: #fff;
    border-radius: 8px;
    flex-wrap: wrap;
    font-size: .83rem;
    position: sticky;
    top: 4px;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.sel-all-check   { cursor: pointer; accent-color: #1ab394; }
.selection-count { font-weight: 700; color: #7ee8cf; }

.btn-sel {
    font-size: .78rem;
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.btn-sel:hover        { background: rgba(255,255,255,.15); }
.btn-sel-danger       { border-color: rgba(231,76,60,.5); color: #ff9f9f; }
.btn-sel-danger:hover { background: rgba(231,76,60,.3); }
.ms-auto              { margin-left: auto; }

/*  LIST VIEW: 2 в ряд  */
.terminals-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

@media (max-width: 900px) {
    .terminals-list-grid { grid-template-columns: 1fr; }
}

/* Виртуализированный List: строка из 2 карточек */
.terminals-list-row {
    display: flex;
    gap: 5px;
    margin-bottom: 4px;
}
.terminals-list-row > * {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 900px) {
    .terminals-list-row { flex-direction: column; }
}

/* Виртуализированные Cells: строка из N ячеек */
.terminals-cells-row {
    display: flex;
    gap: 5px;
    margin-bottom: 4px;
}
.terminals-cells-row > .terminal-cell {
    flex: 1 1 0;
    min-width: 0;
}

/*  Карточка терминала  */
.terminal-card {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    overflow: hidden;
}
.terminal-card.idle-alert   { border-left: 4px solid #e74c3c; }
.terminal-card.card-selected { background: #f4fcfa; border-color: #1ab394; }

/*  Заголовок карточки  */
.terminal-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    border-bottom: 1px solid #eef0f3;
}

.terminal-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

.terminal-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.terminal-checkbox {
    cursor: pointer;
    accent-color: #1ab394;
    width: 15px; height: 15px;
    flex-shrink: 0;
}

.terminal-num {
    font-size: .85rem;
    font-weight: 700;
    background: #eef0f3;
    border-radius: 4px;
    padding: 1px 6px;
    cursor: default;
    color: #2f3f4f;
}

.terminal-name {
    font-size: .88rem;
    font-weight: 600;
    cursor: default;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.response-badge, .success-badge, .idle-badge {
    font-size: .75rem;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}
.response-badge { background: #eef0f3; color: #4a5568; }
.response-badge-warn { background: #fff0ee; color: #c0392b; font-weight: 700; border: 1px solid #f5a89a; }
.success-badge  { background: #edfaf5; color: #1ab394; }
.success-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
}
.success-badge-link:hover {
    color: var(--c-white);
    background: var(--c-teal);
}
.idle-badge     { background: #eef0f3; color: #6c7a8d; }
.idle-badge.idle-badge-warn { background: #fff0f0; color: #c0392b; font-weight: 700; }

.btn-action {
    width: 26px; height: 26px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
    background: #f0f2f5;
    border: 1px solid #dde3ea;
    color: #4a5568;
    font-size: .82rem;
    transition: background .15s;
}
.btn-action:hover      { background: #e2e6ea; color: #2c3e50; }
.btn-action-warn       { background: #fff0f0; border-color: rgba(231,76,60,.4); color: #e74c3c; }
.btn-action-warn:hover { background: rgba(231,76,60,.2); }
.btn-action-muted        { background: #f8f9fb; color: #9eaab8; }
.btn-action-muted:hover  { background: #e2e6ea; color: #4a5568; }
.btn-action-danger       { background: #fff0f0; border-color: rgba(192,30,15,.45); color: #c01e0f; }
.btn-action-danger:hover { background: rgba(192,30,15,.18); }

.btn-action[data-tooltip] { position: relative; }
.btn-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-dark);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .72rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 200;
}
.btn-action[data-tooltip]:hover::after { opacity: 1; }

/*  Тело карточки  */
.terminal-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/*  Иконка-фон секции  */
.section-bg-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
    opacity: 0.06;
    pointer-events: none;
    color: #2c3e50;
    z-index: 0;
}

/*  Блок кассет  */
.info-block {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-right: 1px solid #eef0f3;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 120px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    position: relative;
    z-index: 1;
}

.info-ico   { font-size: .72rem; color: #9eaab8; width: 13px; text-align: center; flex-shrink: 0; }
.info-value { color: #2c3e50; font-weight: 600; white-space: nowrap; }
.info-count { font-size: .7rem; color: #9eaab8; white-space: nowrap; }

/*  Кабинки  */
.cabins-block {
    flex: 1 1 200px;
    padding: 7px 10px;
    border-right: 1px solid #eef0f3;
    position: relative;
    display: flex;
    align-items: center;
}

.cabins-row { display: flex; gap: 6px; width: 100%; position: relative;}

.cabin {
    width: 50%; 
    border-radius: 6px;
    padding: 5px 8px;
    border: 2px solid transparent;
    background: #f4f6f8;
    position: relative;
    overflow: hidden;
    min-width: 130px;
}

/* Жирные стрелки через clip-path */
.cabin-left::before, .cabin-right::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 25px;
    background: #2c3e50;
    opacity: 0.09;
    pointer-events: none;
}
.cabin-right::before { clip-path: polygon(0 28%, 60% 28%, 60% 0%, 100% 50%, 60% 100%, 60% 72%, 0 72%); }
.cabin-left::before  { clip-path: polygon(100% 28%, 40% 28%, 40% 0%, 0% 50%, 40% 100%, 40% 72%, 100% 72%); }

.cabin.cabin-working { background: #edfaf5; border-color: #1ab394; }
.cabin.cabin-idle    { background: #fafaf4; border-color: #d4c85a; }
.cabin.cabin-blocked { background: #fff0f0; border-color: #e74c3c; }
.cabin.cabin-error   { background: #fff5ee; border-color: #e67e22; }

.cabin-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    position: relative;
}

.cabin-time { font-size: .72rem; color: #4a5568; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sensor { border-radius: 3px; padding: 1px 6px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.sensor-off  { background: #e8f5e9; color: #27ae60; }
.sensor-on   { background: #e74c3c; color: #fff; }
.sensor-warn { background: #f39c12; color: #fff; }

.status-pill { border-radius: 10px; padding: 1px 8px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.status-pill.status-working { background: #1ab394; color: #fff; }
.status-pill.status-idle    { background: #d4c85a; color: #5a4e00; }
.status-pill.status-blocked { background: #e74c3c; color: #fff; }
.status-pill.status-error   { background: #e67e22; color: #fff; }

/*  Уведомления (фиксированная ширина, 4 в ряд)  */
.notifications-block {
    flex: 0 0 116px;
    width: 116px;
    padding: 7px 10px;
    border-right: 1px solid #eef0f3;
    position: relative;
    display: flex;
    align-items: center;
}

.notif-icons-row {
    display: grid;
    grid-template-columns: repeat(4, 22px);
    gap: 3px;
    position: relative;
    z-index: 1;
}

.notif-icons-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.notif-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: default;
    font-size: .85rem;
    transition: transform .1s;
}
.notif-icon:hover          { transform: scale(1.25); }
.notif-info     { background: var(--c-info-light); color: var(--c-info); }
.notif-warning  { background: var(--c-warning);    color: #fff; }
.notif-danger   { background: var(--c-danger);     color: #fff; }

/*  Баки (вертикальные)  */
.tanks-side {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px 10px;
    background: #f8f9fb;
    border-left: 1px solid #eef0f3;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}

.tank-v-item { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; }
.tank-v-ico  { font-size: .65rem; }
.tank-ico-white { color: #0984e3; }
.tank-ico-gray  { color: #636e72; }

.tank-v-bar {
    width: 10px; height: 44px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.tank-v-fill { width: 100%; transition: height .4s ease; }

/* Белая вода: много = синий (хорошо), мало = красный (плохо) */
.tw-ok   { background: linear-gradient(0deg, #0984e3, #74b9ff); }
.tw-warn { background: linear-gradient(0deg, #f39c12, #fdcb6e); }
.tw-crit { background: linear-gradient(0deg, #e74c3c, #fd79a8); }

/* Серая вода: мало = зелёный (хорошо), много = красный (плохо) */
.tg-ok   { background: linear-gradient(0deg, #27ae60, #2ecc71); }
.tg-warn { background: linear-gradient(0deg, #f39c12, #fdcb6e); }
.tg-crit { background: linear-gradient(0deg, #e74c3c, #fd79a8); }

.tank-v-pct { font-size: .62rem; font-weight: 600; color: #4a5568; white-space: nowrap; }

/* 
   CELLS VIEW
    */
.terminals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 5px;
}

.terminal-cell {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 7px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    transition: box-shadow .15s;
    cursor: default;
}
.terminal-cell:hover       { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.terminal-cell.idle-alert  { border-left: 3px solid #e74c3c; }
.terminal-cell.cell-selected { background: #f4fcfa; border-color: #1ab394; }

.cell-top { display: flex; align-items: center; gap: 5px; }
.cell-checkbox { cursor: pointer; accent-color: #1ab394; flex-shrink: 0; }
.cell-num { font-size: .8rem; font-weight: 700; color: #2f3f4f; flex-shrink: 0; }

.cell-notif-dots {
    display: flex; gap: 3px; flex-wrap: wrap;
    margin-left: auto; align-items: center;
}

.notif-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.notif-dot.notif-dot-danger  { background: var(--c-danger); }
.notif-dot.notif-dot-warning { background: var(--c-warning); }
.notif-dot.notif-dot-info    { background: var(--c-info); }

.cell-name {
    font-size: .74rem; color: #4a5568;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}

.cell-info { display: flex; justify-content: space-between; font-size: .7rem; color: #6c7a8d; gap: 4px; }

.cell-cabins { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.cabin-badge {
    font-size: .7rem; font-weight: 700;
    border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.cabin-badge.cabin-working { background: #1ab394; color: #fff; }
.cabin-badge.cabin-idle    { background: #d4c85a; color: #5a4e00; }
.cabin-badge.cabin-blocked { background: #e74c3c; color: #fff; }
.cabin-badge.cabin-error   { background: #e67e22; color: #fff; }

.cell-hare   { font-size: .72rem; color: #e74c3c; }
.cell-flush60 { font-size: .68rem; border-radius: 3px; padding: 1px 4px; }

.cell-tanks { display: flex; flex-direction: column; gap: 3px; }

.cell-tank-bar { height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.cell-tank-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* Cell horizontal water colors */
.ctw-tw-ok   { background: linear-gradient(90deg, #74b9ff, #0984e3); }
.ctw-tw-warn { background: linear-gradient(90deg, #fdcb6e, #f39c12); }
.ctw-tw-crit { background: linear-gradient(90deg, #fd79a8, #e74c3c); }
.ctg-tg-ok   { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.ctg-tg-warn { background: linear-gradient(90deg, #fdcb6e, #f39c12); }
.ctg-tg-crit { background: linear-gradient(90deg, #fd79a8, #e74c3c); }

/*
   TABLE VIEW
   Базовые стили таблицы перенесены из DataTable.razor.css (была CSS isolation).
   Теперь глобальные, т.к. таблица рендерится напрямую через Virtualize.
*/
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .75rem;
    table-layout: auto;
}
.data-table th {
    background: var(--c-text-mid, #4a5568);
    color: #fff;
    font-weight: 600;
    padding: 7px 6px;
    font-size: .76rem;
    white-space: nowrap;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
    border-right: 1px solid rgba(255,255,255,.1);
}
.data-table th:last-child { border-right: none; }
.data-table td {
    padding: 3px 5px;
    border-bottom: 1px solid var(--c-border-light, #eef0f3);
    border-right: 1px solid var(--c-border-light, #eef0f3);
    white-space: nowrap;
    vertical-align: middle;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.data-table td:last-child { border-right: none; }
.data-table tbody tr:hover td       { background: var(--c-bg-soft, #f8f9fb); }
.data-table .row-selected td        { background: var(--c-teal-light, #f4fcfa); }
.data-table .row-idle-alert > td:first-child { border-left: 3px solid var(--c-danger, #e74c3c); }
.dt-group-header-row .dt-group-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dt-group-header-row td {
    background: var(--c-bg-group, #eef2f7);
    font-weight: 700;
    padding: 5px 8px;
    border-top: 2px solid var(--c-border, #dde3ea);
    color: var(--c-text-mid, #4a5568);
    font-size: .8rem;
}
.dt-sort-th { cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s; }
.dt-sort-th:hover { background: var(--c-text, #2c3e50); }
.dt-sort-icon      { font-size: .6rem;  opacity: .95; margin-left: 3px; }
.dt-sort-indicator { font-size: .55rem; opacity: .35; margin-left: 3px; }
.dt-totals-row td {
    background: #f0f4f8;
    font-weight: 600;
    font-size: .78rem;
    border-top: 1px solid var(--c-border, #dde3ea);
    border-bottom: 2px solid var(--c-border, #dde3ea);
    padding: 4px 8px;
    white-space: nowrap;
    vertical-align: middle;
}
.dt-grand-total-row td {
    background: #e8eef4;
    font-weight: 700;
    font-size: .78rem;
    border-top: 2px solid var(--c-border-mid, #b0bec5);
    padding: 5px 8px;
    white-space: nowrap;
    vertical-align: middle;
}

.t-name-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.table-actions { display: flex; gap: 3px; }

.water-pct { font-size: .75rem; font-weight: 600; padding: 1px 5px; border-radius: 3px; }
.water-tw-ok   { color: var(--c-info,    #0984e3); }
.water-tw-warn { color: var(--c-orange,  #e67e22); }
.water-tw-crit { color: var(--c-danger,  #e74c3c); font-weight: 700; }
.water-tg-ok   { color: var(--c-success, #27ae60); }
.water-tg-warn { color: var(--c-orange,  #e67e22); }
.water-tg-crit { color: var(--c-danger,  #e74c3c); font-weight: 700; }

/* 
   FILTER FAB + SIDE PANEL
    */
.filter-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #1ab394;
    color: #fff;
    border: none;
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    z-index: 1030;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.filter-fab:hover  { background: #17a385; color: #fff; transform: scale(1.06); }
.filter-fab.fab-active { background: #2f3f4f; }

.fab-badge {
    position: absolute;
    top: -3px; right: -3px;
    background: #e74c3c; color: #fff;
    border-radius: 50%;
    width: 17px; height: 17px;
    font-size: .62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
}

.filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1040; }

.filter-side-panel {
    position: fixed;
    top: 0; right: 0;
    width: 400px; height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.filter-side-panel.fsp-open { transform: translateX(0); }

.fsp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid #eef0f3;
    background: #2f3f4f; color: #fff;
    flex-shrink: 0;
}
.fsp-title { font-weight: 700; font-size: .92rem; }
.fsp-close {
    background: none; border: none;
    color: rgba(255,255,255,.75);
    font-size: .95rem; cursor: pointer;
    padding: 3px 6px; border-radius: 4px; line-height: 1;
    transition: background .15s;
}
.fsp-close:hover { background: rgba(255,255,255,.15); color: #fff; }

.fsp-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.fsp-section { margin-bottom: 14px; }
.fsp-section-title {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #9eaab8; margin-bottom: 7px;
}

.fsp-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.fsp-check-grid .fsp-check-wide { grid-column: 1 / -1; justify-content: center; }
.fsp-cabin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fsp-cabin-col  { display: flex; flex-direction: column; gap: 5px; }
.fsp-cabin-col-title { font-size: .72rem; font-weight: 600; color: var(--c-text-mid); margin-bottom: 2px; }
.fsp-check-label {
    display: flex; align-items: center; gap: 5px;
    font-size: .8rem; color: #2c3e50;
    cursor: pointer; user-select: none;
    min-width: 0;
}
.fsp-check-label input[type="checkbox"] {
    width: 14px; height: 14px; cursor: pointer;
    accent-color: #1ab394; flex-shrink: 0;
}
.fsp-check-label i { flex-shrink: 0; }
.fsp-label-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
}

.fsp-range { display: flex; gap: 6px; align-items: center; }
.fsp-input {
    flex: 1; border: 1px solid #dde3ea; border-radius: 5px;
    padding: 4px 8px; font-size: .8rem; color: #2c3e50;
    min-width: 0; transition: border-color .15s;
}
.fsp-input:focus { outline: none; border-color: #1ab394; }
.fsp-range-sep { font-size: .75rem; color: #9eaab8; flex-shrink: 0; }

.fsp-select {
    width: 100%; border: 1px solid var(--c-border, #dde3ea); border-radius: 5px;
    padding: 5px 8px; font-size: .8rem; color: var(--c-text, #2c3e50);
    background: var(--c-white, #fff); transition: border-color .15s; cursor: pointer;
}
.fsp-select:focus { outline: none; border-color: var(--c-teal, #1ab394); }

.fsp-footer {
    padding: 10px 16px; border-top: 1px solid #eef0f3;
    display: flex; gap: 8px; flex-shrink: 0;
}
.fsp-footer button {
    flex: 1; padding: 7px; border-radius: 6px;
    font-size: .82rem; font-weight: 500;
    cursor: pointer; border: 1px solid; transition: background .15s;
}
.btn-fsp-reset { background: #fff; border-color: #dde3ea; color: #6c7a8d; }
.btn-fsp-reset:hover { background: #f5f6f8; }
.btn-fsp-apply { background: #1ab394; border-color: #1ab394; color: #fff; }
.btn-fsp-apply:hover { background: #17a385; border-color: #17a385; }

/*  Диалог подтверждения  */
.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }

.confirm-dialog {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1080;
    width: 360px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2); padding: 24px;
}
.confirm-backdrop { z-index: 1090; }
.confirm-dialog-confirm { z-index: 1100; }
.confirm-dialog-body p { margin: 0; font-size: .95rem; color: #2c3e50; white-space: pre-line; }

/* ═══ User terminal access modal ═══ */
.user-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: 600px; max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.user-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--c-dark); color: #fff;
    flex-shrink: 0;
}
.user-modal-title { font-weight: 700; font-size: .95rem; }
.user-modal-close {
    background: none; border: none; color: rgba(255,255,255,.7);
    font-size: .9rem; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    transition: background .1s, color .1s;
}
.user-modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }

.user-modal-subheader {
    padding: 6px 16px;
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
    font-size: .78rem;
    flex-shrink: 0;
}
.user-modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 12px 10px;
    padding: 8px 10px;
    color: var(--c-text-mid);
    background: var(--c-warning-light);
    border: 1px solid var(--c-warning);
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.35;
    flex-shrink: 0;
}
.user-modal-warning i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--c-warning);
}
.user-modal-error {
    margin: 0 12px 10px;
    padding: 7px 10px;
    color: var(--c-danger);
    background: var(--c-danger-light);
    border: 1px solid var(--c-danger-border);
    border-radius: 6px;
    font-size: .8rem;
    flex-shrink: 0;
}
.user-modal-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.user-modal-search .search-input {
    min-width: 0;
    flex: 1;
}
.btn-all-terminals {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 3px 9px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--c-teal);
    background: var(--c-teal-light);
    border: 1px solid var(--c-teal-muted);
    border-radius: 5px;
    line-height: 1;
    white-space: nowrap;
}
.btn-all-terminals:hover:not(:disabled) {
    color: var(--c-white);
    background: var(--c-teal);
    border-color: var(--c-teal);
}
.btn-all-terminals:disabled {
    opacity: .55;
    cursor: default;
}
.user-modal-list { flex: 1; overflow-y: auto; }

.umt-group {
    border-bottom: 1px solid var(--c-border-light);
}
.umt-group-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 16px;
    background: var(--c-bg-group);
    border-bottom: 1px solid var(--c-border-light);
    font-size: .78rem;
}
.umt-group-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--c-text-mid);
}
.umt-group-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.umt-group-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-muted);
    white-space: nowrap;
}
.umt-group-btn {
    width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-teal);
    background: var(--c-white);
    border: 1px solid var(--c-teal-muted);
    border-radius: 5px;
    font-size: .78rem;
}
.umt-group-btn:hover:not(:disabled) {
    color: var(--c-white);
    background: var(--c-teal);
    border-color: var(--c-teal);
}
.umt-group-btn:disabled {
    opacity: .6;
    cursor: default;
}

.umt-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--c-border-light);
    font-size: .82rem;
    transition: background .1s;
}
.umt-row:hover           { background: var(--c-bg-soft); }
.umt-row.umt-row-active  { background: var(--c-teal-light); }
.umt-check { width: 22px; text-align: center; flex-shrink: 0; }
.umt-num   { font-weight: 700; color: var(--c-text-mid); min-width: 40px; flex-shrink: 0; }
.umt-name  { flex: 1; font-weight: 500; color: var(--c-text); }
.umt-addr  { color: var(--c-muted); font-size: .74rem; }

/*  Sort bar (List / Cells)  */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.sort-bar-label {
    font-size: .75rem;
    color: var(--c-muted, #9eaab8);
    white-space: nowrap;
    margin-right: 2px;
}
.sort-btn {
    font-size: .75rem;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--c-border, #dde3ea);
    background: var(--c-white, #fff);
    color: var(--c-text-mid, #4a5568);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sort-btn:hover        { background: var(--c-bg-light, #eef0f3); border-color: #b0bec5; }
.sort-btn-active       { background: var(--c-dark, #2f3f4f); border-color: var(--c-dark, #2f3f4f); color: #fff; }
.sort-btn-active:hover { background: var(--c-dark-hover, #263545); }

/*  Info modal  */
.info-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: 420px; max-width: calc(100vw - 24px);
    background: var(--c-white, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--c-dark, #2f3f4f);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}
.info-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.info-modal-row  { display: flex; gap: 10px; font-size: .85rem; }
.info-modal-label { flex: 0 0 150px; color: var(--c-muted, #9eaab8); font-size: .8rem; padding-top: 1px; }
.info-modal-value { flex: 1; color: var(--c-text, #2c3e50); word-break: break-all; }
.info-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--c-border-light, #eef0f3);
    display: flex;
    justify-content: flex-end;
}

/*  Адаптив  */
@media (max-width: 768px) {
    .monitor-toolbar .search-input {
        max-width: none;
        flex-basis: 100%;
    }

    .monitor-freshness {
        width: 100%;
        text-align: right;
        white-space: normal;
    }

    .terminal-body { flex-wrap: wrap; }
    .info-block, .cabins-block, .notifications-block {
        border-right: none;
        border-bottom: 1px solid #eef0f3;
        flex: 1 1 auto;
    }
    .notifications-block { flex: 0 0 auto; width: auto; }
    .tanks-side { flex-direction: row; border-left: none; border-top: 1px solid #eef0f3; width: 100%; justify-content: flex-start; }
    .filter-side-panel { width: 100%; }
    .terminals-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 420px) {
    .view-toggle-list {
        display: none;
    }
}
/* ═══ Info / form modals (UserInfoModal, UserCreateModal, UserEditModal) ═══ */

.tmodal-wide  { width: 580px !important; }
.tmodal-subtitle { font-size: .75rem; opacity: .75; margin-top: 2px; }

.uinfo-modal,
.uform-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: 440px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 60px);
    background: var(--c-white);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    display: flex; flex-direction: column;
    overflow: hidden;
}

.uinfo-body,
.uform-body {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uinfo-group {
    background: var(--c-bg-soft);
    border-radius: 7px;
    border: 1px solid var(--c-border);
    overflow: hidden;
}

.uinfo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--c-border-light);
}
.uinfo-row:last-child { border-bottom: none; }

.uinfo-label {
    font-size: .78rem;
    color: var(--c-text-mid);
    min-width: 150px;
    flex-shrink: 0;
}

.uinfo-value {
    font-size: .82rem;
    color: var(--c-text);
}

.uinfo-code {
    font-family: monospace;
    font-size: .88rem;
    font-weight: 700;
    color: var(--c-text);
    background: var(--c-bg-light);
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.uinfo-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-muted);
}

.uinfo-footer {
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    margin-top: 4px;
}

/* Form */

.uform-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.uform-field label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-text-mid);
}

.uform-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 10px;
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    background: var(--c-bg-soft);
}

@media (max-width: 520px) {
    .uform-codes-grid {
        grid-template-columns: 1fr;
    }
}

.uform-optional {
    font-weight: 400;
    font-size: .73rem;
    color: var(--c-muted);
}

.uform-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid var(--c-border-light);
}

.uform-success {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--c-success-light);
    border-radius: 7px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-success);
}

/* ═══ Group regen button (Users page) ═══ */

.btn-group-regen {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--c-border-mid);
    background: transparent;
    color: var(--c-text-mid);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.btn-group-regen:hover {
    background: var(--c-warning-light);
    border-color: var(--c-warning);
    color: var(--c-warning);
}

/* ─── Cash-out popover content ─────────────────────────────────────────────── */
.co-cell-link {
    cursor: default;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.co-pop { font-size: .78rem; min-width: 180px; }

.co-pop-header {
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.co-pop-device {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.co-pop-dname {
    font-weight: 600;
}

.co-pop-den {
    padding-left: 6px;
    color: #555;
    font-size: .76rem;
}

.co-pop-type {
    font-style: italic;
    font-size: .72rem;
    opacity: .8;
}

.co-pop-bill-icon {
    font-size: .72rem;
    opacity: .8;
}

.co-pop-subtotal {
    font-weight: 600;
    margin-top: 2px;
    font-size: .76rem;
}

.co-pop-grand {
    font-weight: 700;
    border-top: 2px solid rgba(0,0,0,.15);
    margin-top: 6px;
    padding-top: 4px;
    color: #1ab394;
}

.co-pop-time {
    color: #888;
    font-size: .72rem;
    margin-top: 3px;
}

/* ─── Bulk command dropdown in selection bar ────────────────────────────────── */
.bulk-cmd-wrap {
    position: relative;
}

.bulk-cmd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--c-white, #fff);
    border: 1px solid var(--c-border, #dde3ea);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    min-width: 200px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 4px 0;
    z-index: 1;
}

.bulk-cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: .82rem;
    color: var(--c-text, #2c3e50);
    cursor: pointer;
    gap: 8px;
    white-space: nowrap;
}

.bulk-cmd-item:hover {
    background: var(--c-bg-light, #f4f6f8);
    color: var(--c-teal, #1ab394);
}

/* Date picker bar shown below selection bar */
.bulk-date-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--c-bg-soft, #f8f9fb);
    border: 1px solid var(--c-border, #dde3ea);
    border-radius: 6px;
    flex-wrap: wrap;
}

.bulk-date-label {
    font-size: .82rem;
    color: var(--c-text-mid, #4a5568);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   STATUS MODAL
   ═══════════════════════════════════════════════════════ */

.status-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    width: min(960px, calc(100vw - 32px));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.status-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--c-border, #dde3ea);
    flex-shrink: 0;
}

.status-modal-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--c-text, #2c3e50);
}

.status-modal-subtitle {
    font-size: .8rem;
    color: var(--c-muted, #9eaab8);
    margin-top: 2px;
}

.status-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    padding: 16px 20px;
}

.status-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid var(--c-border, #dde3ea);
    flex-shrink: 0;
    background: #fff;
}

/* Info block at top of modal */
.status-info-block {
    background: #eef6fb;
    border: 1px solid #b8d9ec;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: .82rem;
    color: var(--c-text-mid, #4a5568);
}

.status-info-row {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.status-info-ico {
    color: var(--c-info, #0984e3);
    flex-shrink: 0;
}

/* Section */
.status-section {
    margin-bottom: 18px;
}

.status-section-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-text, #2c3e50);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-empty {
    color: var(--c-muted, #9eaab8);
    font-size: .82rem;
    padding: 8px 10px;
    border: 1px solid var(--c-border-light, #eef0f3);
    border-radius: 6px;
    background: var(--c-bg-soft, #f8f9fb);
}

.status-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--c-border, #dde3ea);
    background: var(--c-white, #fff);
    color: var(--c-text, #2c3e50);
    font-size: .8rem;
    font-weight: 500;
}

.status-user-chip i {
    color: var(--c-teal, #1ab394);
}

/* Status table */
.status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.status-table th {
    background: var(--c-bg-light, #f4f6f8);
    border: 1px solid var(--c-border, #dde3ea);
    padding: 7px 10px;
    font-weight: 600;
    color: var(--c-text-mid, #4a5568);
    white-space: nowrap;
    text-align: left;
}

.status-table td {
    border: 1px solid var(--c-border-light, #eef0f3);
    padding: 5px 10px;
    vertical-align: middle;
    color: var(--c-text, #2c3e50);
}

.status-table tbody tr:nth-child(odd) td {
    background: var(--c-bg, #f8f9fb);
}

/* Device status badges */
.dev-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.dev-status-success { background: #1c84c6; color: #fff; }
.dev-status-info    { background: #23c6c8; color: #fff; }
.dev-status-works   { background: #d1dade; color: #555; border-color: #c5cdd4; }
.dev-status-normal  { background: #fff; color: #555; border-color: #dde3ea; }
.dev-status-warning { background: #f8ac59; color: #fff; }
.dev-status-danger  { background: #ed5565; color: #fff; }

/* Legend */
.status-legend {
    background: var(--c-bg, #f8f9fb);
    border: 1px solid var(--c-border, #dde3ea);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .82rem;
    color: var(--c-text, #2c3e50);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-swatch {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 3px;
}

.totp-disable-btn {
    align-self: center;
}

.totp-disable-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.history-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1300;
    width: min(1240px, calc(100vw - 24px));
    max-height: 94vh;
    max-width: calc(100vw - 32px);
    transform: translate(-50%, -50%);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-shadow: 0 14px 42px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.history-modal .status-modal-body {
    overflow: auto;
}

.history-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
}

.history-tab {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    color: var(--c-text-mid);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .84rem;
    font-weight: 600;
}

.history-tab:hover {
    color: var(--c-teal);
    background: var(--c-white);
    border-color: var(--c-teal-muted);
}

.history-tab-active {
    color: var(--c-teal);
    background: var(--c-white);
    border-color: var(--c-teal-muted);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.history-modal .modal-backdrop-custom {
    z-index: 1310;
}

.history-modal .mdh-filter-modal,
.history-modal .mdh-terminal-modal {
    z-index: 1320;
}

.history-modal .mdh-filter-modal {
    width: min(1120px, calc(100vw - 40px));
    max-height: 90vh;
}

.history-section {
    padding: 12px;
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    background: var(--c-bg-soft);
}

.history-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.history-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text);
    font-size: .9rem;
    font-weight: 700;
}

.history-section-title i {
    color: var(--c-teal);
}

.history-section-subtitle {
    margin-top: 2px;
    color: var(--c-muted);
    font-size: .76rem;
}

.history-range-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.history-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.history-range-shift {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-white);
    color: var(--c-text-mid);
    transition: background .12s, border-color .12s, color .12s;
}

.history-range-shift:hover:not(:disabled) {
    border-color: var(--c-teal);
    background: var(--c-teal-light);
    color: var(--c-teal);
}

.history-range-shift:disabled {
    color: var(--c-muted);
    background: var(--c-bg-light);
    cursor: not-allowed;
    opacity: .7;
}

.history-range-picker {
    flex: 0 0 auto;
}

.history-range-picker .drp-trigger {
    min-width: 320px;
}

.history-range-picker .drp-panel {
    z-index: 1400;
}

.history-chart-wrap {
    height: 260px;
    padding: 8px;
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    background: var(--c-white);
}

.history-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    color: var(--c-text-light);
    font-size: .86rem;
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    background: var(--c-white);
}

.history-state-empty {
    color: var(--c-muted);
}

.history-table th,
.history-table td {
    text-align: right;
}

.history-table th:first-child,
.history-table td:first-child {
    text-align: left;
    white-space: nowrap;
}

.history-modal .table-responsive {
    max-height: 210px;
    overflow: auto;
}

@media (max-width: 640px) {
    .history-tabs {
        flex-direction: column;
    }

    .history-tab {
        width: 100%;
    }

    .history-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .history-range-controls {
        align-items: stretch;
    }

    .history-range-row {
        width: 100%;
    }

    .history-range-picker,
    .history-range-picker .drp-wrapper,
    .history-range-picker .drp-trigger {
        width: 100%;
        min-width: 0;
    }

    .history-range-picker {
        flex: 1 1 auto;
    }
}