/**
 * SCADA App2 Monolithic CSS Bundle
 * Generated: 2026-11-02 07:20:39
 * Version: 3.3.22
 */



/* ==================== [CSS: css/style.css] ==================== */
:root {
    --bg-color: #eceff1;
    --text-color: #212121;
    --block-bg: #ffffff;
    --block-shadow: rgba(0,0,0,0.08);
    --table-header-bg: #1976d2;
    --table-header-color: #fff;
    --input-bg: #f0f0f0;
    --input-color: #212121;
    --button-bg: #1976d2;
    --button-hover-bg: #1565c0;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --row-light: #f9f9f9;
    --row-dark: #f0f0f0;
}

/* Large multicolor control buttons */
.control-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 14px; 
    width: 100%;
    box-sizing: border-box;
}
.control-bar .big-btn {
    min-width: 0;
    flex-direction: row;
    box-shadow: 0 4px 8px rgba(0,0,0,0.14);
    border-radius: 10px;
}
.control-bar .process-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    height: 50px;
    font-size: 0.95em;
    box-sizing: border-box;
}
.control-bar .process-btn .big-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}
.control-bar .process-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
}
.control-bar .process-btn .btn-label {
    font-size: 0.76em;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
}
.control-bar .process-btn .process-name {
    font-size: 1.05em;
    font-weight: 800;
    margin-top: 1px;
    color: #FFD700;
}
body.dark .control-bar .process-btn .process-name {
    color: #FFEA00;
}
.control-bar .app-settings-btn {
    margin-left: auto; /* стыкуем строго к правому краю */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    height: 50px !important; /* строго равна высоте левой кнопки процесса */
    font-size: 0.95em !important;
    min-width: 0 !important;
    flex-direction: row !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #37474f, #263238) !important;
    color: #eceff1 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
}
.control-bar .app-settings-btn:hover {
    filter: brightness(1.15);
}
.control-bar .app-settings-btn:active {
    opacity: 0.85;
}
.control-bar .app-settings-btn .big-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.control-bar .app-settings-btn .btn-label {
    font-size: 0.95em !important;
    font-weight: 700 !important;
}

.big-btn { display:inline-flex; flex-direction:column; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; background: linear-gradient(135deg,var(--button-bg), var(--button-hover-bg)); color:#fff; border:none; cursor:pointer; box-shadow: 0 6px 12px rgba(0,0,0,0.12); font-size:1.05em; min-width:140px; }
.big-btn .big-icon { display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center; }
.big-btn .big-icon svg { width: 100%; height: 100%; display: block; }
.big-btn .btn-label { font-weight:900; text-align:center; display:block; }
.big-btn.process-btn { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.big-btn.theme-btn { background: linear-gradient(135deg, #FFD54F, #FF8A65); color: #2b2b2b; }
.big-btn.settings-btn { background: linear-gradient(135deg, #8E24AA, #42A5F5); color: #fff; }
.big-btn.display-btn { background: linear-gradient(135deg, #2e7d32, #1565c0); color: #fff; }
.big-btn.process-config-btn { background: linear-gradient(135deg, #00897b, #004d40); color: #fff; }
.big-btn.admin-pass-btn { background: linear-gradient(135deg, #6a1b9a, #4a148c); color: #fff; }
.big-btn:hover { filter: brightness(1.08); }
.big-btn:active { transform: scale(0.98); }

/* Table header icon styling */
/* keep th as table-cell; use an inner wrapper (.th-content) with flex
   so we don't break table layout. This preserves column alignment. */
th {
    /* default table header behavior preserved */
    padding: 8px 12px;
    vertical-align: middle;
}
.th-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.th-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    flex: 0 0 36px;
}
.th-label { display: inline-block; text-align: center; line-height: 1.15; }

/* Process selector modal styling */
.process-modal .modal-content {
    max-width: 480px;
    width: 94%;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 14px;
}
.process-modal .process-select { width:100%; font-size:1.05em; }

/* Quick process buttons in modal */
.quick-process-bar {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
body.dark .quick-process-bar {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.quick-process-title {
    font-size: 0.86em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
    margin-bottom: 10px;
    text-align: left;
}

.quick-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.quick-proc-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.14);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
    text-align: center;
    min-height: 64px;
    box-sizing: border-box;
}

.quick-proc-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.22);
}

.quick-proc-btn:active {
    transform: translateY(1px);
}

.quick-proc-btn.quick-proc-btn-full {
    grid-column: span 2;
}

.quick-proc-btn .quick-proc-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
}

.quick-proc-btn .quick-proc-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: #ffffff;
    opacity: 0.95;
    transition: stroke 0.15s ease;
}

.quick-proc-btn .quick-proc-name {
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.15;
    text-align: center;
}

/* Active indicator for currently selected process */
.quick-proc-btn.active {
    border-color: #FFD700 !important;
    background: linear-gradient(135deg, #0d47a1, #0a3880);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.55), inset 0 0 6px rgba(255, 215, 0, 0.2);
}

.quick-proc-btn.active .quick-proc-icon svg {
    stroke: #FFD700;
}

/* Особый стиль для кнопки Мастер (яркий золотисто-янтарный / благородный градиент для контраста) */
.quick-proc-btn.quick-proc-master {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 3px 6px rgba(180, 83, 9, 0.35);
    border-color: #f59e0b;
}
.quick-proc-btn.quick-proc-master:hover {
    filter: brightness(1.12);
    box-shadow: 0 5px 12px rgba(180, 83, 9, 0.45);
}
.quick-proc-btn.quick-proc-master.active {
    border-color: #ffffff !important;
    background: linear-gradient(135deg, #b45309, #78350f);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
}
.quick-proc-btn.quick-proc-master.active .quick-proc-icon svg {
    stroke: #ffffff;
}

/* Особый стиль для кнопки Все процессы (строгий графитово-сланцевый градиент) */
.quick-proc-btn.quick-proc-all {
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.28);
}
.quick-proc-btn.quick-proc-all:hover {
    filter: brightness(1.15);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.38);
}
.quick-proc-btn.quick-proc-all.active {
    border-color: #FFD700 !important;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.65), inset 0 0 6px rgba(255, 215, 0, 0.3);
}

body.dark .quick-proc-btn {
    background: linear-gradient(135deg, #263238, #1a2327);
    color: #eceff1;
    border: 2px solid #37474f;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

body.dark .quick-proc-btn.quick-proc-master {
    background: linear-gradient(135deg, #5b21b6, #312e81);
    border-color: #6d28d9;
}
body.dark .quick-proc-btn.quick-proc-master:hover {
    background: linear-gradient(135deg, #6d28d9, #3730a3);
    border-color: #8b5cf6;
}

body.dark .quick-proc-btn.quick-proc-all {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-color: #334155;
}
body.dark .quick-proc-btn.quick-proc-all:hover {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-color: #475569;
}

body.dark .quick-proc-btn:hover {
    background: linear-gradient(135deg, #37474f, #263238);
    border-color: #607d8b;
}

body.dark .quick-proc-btn.active {
    border-color: #FFEA00 !important;
    background: linear-gradient(135deg, #1b3855, #102438);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 234, 0, 0.45);
}

body.dark .quick-proc-btn.quick-proc-master.active {
    background: linear-gradient(135deg, #4c1d95, #1e1b4b);
}

body.dark .quick-proc-btn.quick-proc-all.active {
    background: linear-gradient(135deg, #020617, #0f172a);
}

body.dark .quick-proc-btn.active .quick-proc-icon svg {
    stroke: #FFEA00;
}

/* make table use fixed layout so percent widths work reliably */
#sensorsTable {
    table-layout: fixed;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
#sensorsTable tr, #sensorsTable td, #sensorsTable th {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* default column widths (percent) - can be overridden by JS */
#sensorsTable col.col-name { width: 34%; }
#sensorsTable col.col-value { width: 38%; }
#sensorsTable col.col-details { width: 18%; }
#sensorsTable col.col-chart { width: 10%; }

/* Ячейка таблицы и кнопка графика (непрозрачный синий SCADA фон, белая иконка, 100% ширины) */
#sensorsTable td.chart-cell {
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
}
.sensor-chart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 2px 4px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: #ffffff !important;
    cursor: pointer;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: none !important;
}
.sensor-chart-btn .sensor-chart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #ffffff !important;
}
.sensor-chart-btn:hover {
    filter: brightness(1.12);
}
.sensor-chart-btn:active {
    filter: brightness(0.88);
}
body.dark .sensor-chart-btn {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
body.dark .sensor-chart-btn:hover {
    filter: brightness(1.15);
}
body.dark .sensor-chart-btn:active {
    filter: brightness(0.88);
}

/* Кнопка закрытия модальных окон (крестик ✕) контрастная в любой теме */
.modal-close-cross {
    background: transparent !important;
    border: none !important;
    font-size: 1.6em !important;
    color: var(--text-color) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    box-shadow: none !important;
}
.modal-close-cross:hover {
    color: #e53935 !important;
    filter: none !important;
}

/* allow long names to wrap into multiple lines */
.sensor-name-text {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    white-space: normal;
}
/* Allow display settings to override name color/background directly without transitions */
.sensor-name-text { padding: 2px 6px; border-radius: 6px; }

/* Значение и уменьшенная на 50% единица измерения внутри бэйджа значения */
.val-text {
    display: inline-block;
    vertical-align: middle;
}
.val-num {
    display: inline;
}
.val-unit {
    font-size: 0.5em !important; /* ровно 50% от размера значения */
    font-weight: 500;
    opacity: 0.85;
    margin-left: 2px;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
}
#sensorsTable td { }

/* Дискретные индикаторы DI (ВКЛ / ВЫКЛ) */
.di-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.di-badge.di-on {
    background: #2fb344;
    color: #ffffff;
    border: 1px solid #249637;
}
.di-badge.di-off {
    background: #6c757d;
    color: #f8f9fa;
    border: 1px solid #5a6268;
    opacity: 0.85;
}
body.dark .di-badge.di-off {
    background: #495057;
    color: #ced4da;
    border-color: #343a40;
}

body.dark {
    --bg-color: #1f1f1f;
    --text-color: #e0e0e0;
    --block-bg: #2a2a2a;
    --block-shadow: rgba(0,0,0,0.3);
    --table-header-bg: #1565c0;
    --table-header-color: #fff;
    --input-bg: #3a3a3a;
    --input-color: #fff;
    --button-bg: #1565c0;
    --button-hover-bg: #0d3d6b;
    --row-light: #2f2f2f;
    --row-dark: #262626;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 6px 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-weight: 600;
    font-size: 15px;
}

h2 { margin-bottom: 12px; font-size: 1.6em; }

.process-select {
    font-size: 1em;
    width: 90%;
    max-width: 300px;
    margin-bottom: 12px;
}

/* Контейнер таблицы с минимальными отступами */
.table-container, #sensorTableContainer {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Таблица с фиксированными колонками и скруглённой шапкой */
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: var(--block-bg);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--block-shadow);
    font-size: 1em;
    table-layout: fixed;
}

/* Скругление шапки таблицы */
thead th:first-child { border-top-left-radius: 15px; }
thead th:last-child { border-top-right-radius: 15px; }

th, td {
    border: 1px solid #ddd;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

/* Keep header single-line with ellipsis */
th { white-space: nowrap; text-overflow: ellipsis; }

/* Allow body cells to wrap lines */
tbody td { white-space: normal; word-wrap: break-word; }

/* Tighten spacing between value and min/max lines in value column */
.val-text { margin: 0; padding: 0; line-height: 1.1; }
.warn-text { margin: 2px 0 0 0; padding: 0; font-size: 0.95em; color: rgba(0,0,0,0.7); }

.val-text, .speed-text { display: inline-block; transition: background 180ms ease, color 180ms ease; }

/* header second line (e.g. "Мин/Макс") */
.th-line2 { display: block; margin-top: 2px; font-size: 0.85em; color: var(--table-header-color); }

/* modern large toggle switch for display settings checkbox */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle-switch input { display: none; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px; width: 26px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background: linear-gradient(135deg, #66bb6a, #43a047);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(26px);
}

/* ===============================================================================
   Модальное окно настроек отображения: #displaySettingsModal
   =============================================================================== */

#displaySettingsModal .modal-content {
    max-width: 900px;
    width: 95vw;
}

.display-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    align-items: center;
}

.display-settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.display-settings-grid input[type="number"],
.display-settings-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: var(--input-bg, #fff);
    color: var(--text-color, #222);
    font-size: 13px;
    font-family: inherit;
}

.display-settings-grid label.checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    grid-column: 1 / -1;
    cursor: pointer;
    margin-top: 6px;
}

.display-settings-grid .checkbox-text {
    font-weight: 700;
    font-size: 13.5px;
}

.col-settings-wrapper {
    overflow-x: auto;
    margin: 10px 0;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
    background: var(--block-bg);
}

.col-settings-table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    table-layout: fixed;
}

.col-settings-table th {
    background: var(--table-header-bg);
    color: var(--table-header-color);
    padding: 9px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.col-settings-table th:first-child {
    text-align: left;
    padding-left: 14px;
    width: 160px;
}

.col-settings-table td {
    padding: 7px 8px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.col-settings-table td.col-param-title {
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    padding-left: 14px;
    color: var(--text-color);
}

.col-settings-table input[type="number"],
.col-settings-table select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: var(--input-bg, #fff);
    color: var(--text-color, #222);
    font-size: 13px;
    font-family: inherit;
    text-align: center;
}

.col-settings-table input:focus,
.col-settings-table select:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.col-settings-table input[type="color"] {
    width: 48px;
    height: 32px;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

.col-settings-table .dual-inputs {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.col-settings-table .dual-inputs input,
.col-settings-table .dual-inputs select {
    width: 50%;
}

/* Табличные заголовки */
th {
    background: var(--table-header-bg);
    color: var(--table-header-color);
    font-weight: 700;
    font-size: 1.05em;
}

/* ===============================================================================
   Модальное окно настроек датчиков: #settingsTable и .settings-table-wrapper
   Свободная горизонтальная прокрутка, фиксация шапки и точные комфортные колонки
   =============================================================================== */

.settings-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    margin-top: 10px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 6px;
    background: var(--block-bg);
}

#settingsTable {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto !important;
    border-collapse: collapse;
}

#settingsTable thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--table-header-bg);
    color: var(--table-header-color);
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#settingsTable tbody td {
    padding: 4px 6px;
    font-size: 13px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

#settingsTable input,
#settingsTable select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: var(--input-bg, #fff);
    color: var(--text-color, #222);
    font-size: 13px;
    font-family: inherit;
}

#settingsTable input:focus,
#settingsTable select:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

#settingsTable input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

#settingsTable input[type="color"] {
    width: 48px;
    height: 32px;
    padding: 2px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
    border: none;
    background: transparent;
}

/* Точные комфортные минимальные ширины для всех 17 колонок */
#settingsTable th:nth-child(1), #settingsTable td:nth-child(1) { width: 50px; min-width: 50px; text-align: center; font-weight: bold; } /* № */
#settingsTable th:nth-child(2), #settingsTable td:nth-child(2) { width: 170px; min-width: 170px; } /* Название */
#settingsTable th:nth-child(3), #settingsTable td:nth-child(3) { width: 140px; min-width: 140px; } /* Процесс */
#settingsTable th:nth-child(4), #settingsTable td:nth-child(4) { width: 85px; min-width: 85px; }   /* Мин */
#settingsTable th:nth-child(5), #settingsTable td:nth-child(5) { width: 85px; min-width: 85px; }   /* Макс */
#settingsTable th:nth-child(6), #settingsTable td:nth-child(6) { width: 110px; min-width: 110px; } /* Мин пред. */
#settingsTable th:nth-child(7), #settingsTable td:nth-child(7) { width: 110px; min-width: 110px; } /* Макс пред. */
#settingsTable th:nth-child(8), #settingsTable td:nth-child(8) { width: 75px; min-width: 75px; }   /* Округл. */
#settingsTable th:nth-child(9), #settingsTable td:nth-child(9) { width: 95px; min-width: 95px; }   /* График мин */
#settingsTable th:nth-child(10), #settingsTable td:nth-child(10) { width: 95px; min-width: 95px; } /* График макс */
#settingsTable th:nth-child(11), #settingsTable td:nth-child(11) { width: 85px; min-width: 85px; text-align: center; } /* Цвет графика */
#settingsTable th:nth-child(12), #settingsTable td:nth-child(12) { width: 95px; min-width: 95px; } /* Ед. измерения */
#settingsTable th:nth-child(13), #settingsTable td:nth-child(13) { width: 75px; min-width: 75px; text-align: center; } /* Активный */
#settingsTable th:nth-child(14), #settingsTable td:nth-child(14) { width: 150px; min-width: 150px; } /* MsgLow */
#settingsTable th:nth-child(15), #settingsTable td:nth-child(15) { width: 150px; min-width: 150px; } /* MsgHigh */
#settingsTable th:nth-child(16), #settingsTable td:nth-child(16) { width: 150px; min-width: 150px; } /* MsgWarnLow */
#settingsTable th:nth-child(17), #settingsTable td:nth-child(17) { width: 150px; min-width: 150px; } /* MsgWarnHigh */
#settingsTable th:nth-child(18), #settingsTable td:nth-child(18) { width: 110px; min-width: 110px; } /* Слоты 535 */
#settingsTable th:nth-child(19), #settingsTable td:nth-child(19) { width: 90px; min-width: 90px; }   /* Окно */
#settingsTable th:nth-child(20), #settingsTable td:nth-child(20) { width: 110px; min-width: 110px; } /* Барьеры */
#settingsTable th:nth-child(21), #settingsTable td:nth-child(21) { width: 125px; min-width: 125px; } /* Режим */
#settingsTable th:nth-child(22), #settingsTable td:nth-child(22) { width: 115px; min-width: 115px; } /* Оффсеты SP */

/* Основная таблица датчиков: компактное оформление, нулевой min-width и полная свобода сжатия */
#sensorsTable th, #sensorsTable td {
    min-width: 0 !important;
    box-sizing: border-box;
}
#sensorsTable th {
    padding: 6px 2px !important;
    vertical-align: middle;
    overflow: hidden;
}
#sensorsTable .th-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
#sensorsTable .th-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    flex: 0 0 18px;
}
#sensorsTable .th-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    flex-shrink: 0;
}
#sensorsTable .th-label {
    display: inline-block;
    text-align: center;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Колонка деталей (3-я колонка) */
#sensorsTable th:nth-child(3),
#sensorsTable td:nth-child(3) {
    padding: 4px 2px !important;
    min-width: 0 !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
#sensorsTable th:nth-child(3) .th-content {
    gap: 3px;
    min-width: 0;
}
#sensorsTable th:nth-child(3) .th-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
#sensorsTable th:nth-child(3) .th-label {
    font-size: 0.9em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sensorsTable td.speed-cell {
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    min-width: 0 !important;
    padding: 4px 1px !important;
}

/* Колонка статуса (4-я колонка) */
#sensorsTable th:nth-child(4),
#sensorsTable td:nth-child(4) {
    padding: 4px 2px !important;
    min-width: 0 !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
#sensorsTable td:nth-child(4) .status-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Поля ввода и селекты */
input[type="text"], input[type="number"], input[type="color"], select {
    width: 90%;
    max-width: 120px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: var(--input-bg);
    color: var(--input-color);
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

/* Кнопки */
button {
    padding: 6px 14px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    background: var(--button-bg);
    color: #fff;
    border: none;
}
button:hover { filter: brightness(1.08); }
button:active { opacity: 0.85; }

/* Кнопка графика */
.graphBtn {
    padding: 6px 14px;
    font-size: 0.95em;
    border-radius: 6px;
    cursor: pointer;
    background: var(--button-bg);
    color: #fff;
    border: none;
}
.graphBtn:active { background: var(--button-hover-bg); }

/* Статусы */
.status-ok { color:green; font-weight:bold; }
.status-warning { color:orange; font-weight:bold; }
.status-critical { color:red; font-weight:bold; }

/* Цвет строки по статусу */
tbody tr.status-ok { background-color: rgba(0, 255, 0, 0.1); }
tbody tr.status-warning { background-color: rgba(255, 165, 0, 0.2); }
tbody tr.status-critical { background-color: rgba(255, 0, 0, 0.2); }

/* Hover поверх строки - только на устройствах с мышью (не тач) и НЕ перебивает аварию/предупреждение */
@media (hover: hover) and (pointer: fine) {
    tbody tr:not(.status-warning):not(.status-critical):hover {
        background-color: rgba(0, 0, 0, 0.04);
    }
    body.dark tbody tr:not(.status-warning):not(.status-critical):hover {
        background-color: rgba(255, 255, 255, 0.04);
    }
}

/* Заголовок и сетка блока настроек в футере */
.footer-section-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-color);
    padding: 6px 4px 6px 4px;
    border-bottom: 2px solid rgba(127, 127, 127, 0.2);
    width: 100%;
    box-sizing: border-box;
    opacity: 0.9;
}
#footerControls {
    flex-direction: column;
}
.footer-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

/* Кнопки настроек и отладки отображаются строго при активном режиме администратора */
.big-btn.admin-only {
    display: none !important;
}
body.is-admin .big-btn.admin-only {
    display: inline-flex !important;
}

/* Badges процессов */
.process-badge {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 700;
    display: inline-block;
}
.process-бродилка{ background: rgba(76,175,80,0.2); color:#2e7d32; }
.process-дрожанка{ background: rgba(255,152,0,0.2); color:#e65100; }
.process-разваривание{ background: rgba(33,150,243,0.2); color:#0d47a1; }
.process-ректификация{ background: rgba(244,67,54,0.2); color:#b71c1c; }

/* Модальные окна без тяжелых анимаций */
.modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); 
    justify-content: center; align-items: center; 
    z-index: 9999;
}
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.status-dot.status-ok { background-color: #28a745; }
.status-dot.status-warning { background-color: #ff9800; }
.status-dot.status-critical { background-color: #f44336; }
.status-dot.status-off { background-color: #6c757d; }
.modal-content {
    background: var(--block-bg);
    padding: 20px 16px;
    border-radius: 12px;
    width: 96%;
    max-width: 1200px;
    max-height: 85%;
    overflow-x: auto;
    overflow-y: auto;
    box-shadow: 0 12px 24px var(--block-shadow);
    font-size: 1em;
}

/* Display settings modal specific */
.display-settings-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; align-items:center; }
.display-settings-grid label { display:block; font-weight:700; }
.display-settings-grid input[type="number"], .display-settings-grid select { width:100%; padding:8px; border-radius:6px; }

/* Column settings table inside display settings modal */
.col-settings-table { width: 100%; border-collapse: collapse; margin-top:6px; }
.col-settings-table thead th { background: transparent; color: var(--text-color); font-weight: 700; padding:6px 8px; text-align:center; }
.col-settings-table td { padding:6px 8px; text-align:center; }
.col-settings-table input[type="number"], .col-settings-table select { width:80px; padding:6px; border-radius:6px; }
.col-settings-table td:first-child { text-align:left; padding-left:0; }
.col-settings-table thead th:first-child { text-align:left; }

/* Meta блок обновления */
#meta {
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

/* Время обновления крупное, жирное, строго в одну строку */
#meta .update-time {
    display: inline-block;
    font-size: 1.8em;
    font-weight: 900;
    color: #008800;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
    text-align: center;
    margin: 4px 0 10px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: color 0.3s ease;
}
#meta .update-time .data-age {
    font-size: 0.52em;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.72;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
}
#meta .update-time .data-age.warning {
    color: #f57c00;
    opacity: 0.95;
}
#meta .update-time.offline {
    color: #d32f2f !important;
    text-shadow: none !important;
}
#meta .offline-label {
    display: block;
    color: #d32f2f;
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: none !important;
    margin-top: 2px;
    margin-bottom: 8px;
    text-align: center;
}
body.dark #meta .update-time {
    color: #00e676;
    text-shadow: 0 0 12px rgba(0,230,118,0.3);
}
body.dark #meta .update-time.offline {
    color: #ff5252 !important;
    text-shadow: none !important;
}
body.dark #meta .offline-label {
    color: #ff5252;
    text-shadow: none !important;
}

/* ==========================================================================
   Process Cards (Технологические карточки-мнемосхемы над/под таблицей)
   ========================================================================== */
.process-cards-slot {
    width: 100%;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.drobilka-card {
    background: var(--block-bg);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--block-shadow);
    padding: 12px 14px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.06);
}

body.dark .drobilka-card {
    border: 1px solid rgba(255,255,255,0.08);
}

.pcard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.dark .pcard-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pcard-title {
    font-size: 1.05em;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pcard-header-icon {
    font-size: 1.2em;
}

.pcard-legend {
    display: flex;
    gap: 12px;
    font-size: 0.82em;
    opacity: 0.85;
}
.pcard-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Таблица мнемосхемы линии */
.drobilka-flow-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 5px;
}

.pcard-cell {
    padding: 6px 8px !important;
    height: 38px;
    border-radius: 8px;
    background: rgba(0, 188, 212, 0.07);
    border: 1px solid rgba(0, 188, 212, 0.2);
    vertical-align: middle;
    box-sizing: border-box;
}
body.dark .pcard-cell {
    background: rgba(0, 188, 212, 0.14);
    border: 1px solid rgba(0, 188, 212, 0.25);
}

.pcard-cell-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* Центрирование строк в одностолбчатой части таблицы */
.pcard-cell-single .pcard-cell-inner {
    justify-content: center !important;
    text-align: center !important;
}

.pcard-name {
    font-size: 1.25em;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.1px;
}

.pcard-val {
    margin-left: auto;
    font-size: 2.1em;
    font-weight: 900;
    color: #0d47a1;
    background: rgba(25, 118, 210, 0.12);
    border: 1px solid rgba(25, 118, 210, 0.28);
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.0;
    box-sizing: border-box;
}
body.dark .pcard-val {
    color: #90caf9;
    background: rgba(144, 202, 249, 0.15);
    border: 1px solid rgba(144, 202, 249, 0.35);
}

.pcard-badge-val {
    font-size: 1.55em;
    font-weight: 900;
    color: #1b5e20;
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.28);
    padding: 1px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    line-height: 1.0;
    box-sizing: border-box;
}
body.dark .pcard-badge-val {
    color: #a5d6a7;
    background: rgba(165, 214, 167, 0.15);
    border: 1px solid rgba(165, 214, 167, 0.35);
}

/* Круглые индикаторы (светодиоды в 1.5 раза больше, 20px, без размытия) */
.pcard-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 20px;
    box-sizing: border-box;
    border: 1.5px solid rgba(0,0,0,0.2);
}

body.dark .pcard-dot {
    border: 1.5px solid rgba(255,255,255,0.25);
}

.pcard-dot.on {
    background: #00e676 !important;
    box-shadow: none !important; /* без сложных размытий */
}

.pcard-dot.starting {
    background: #ffd600 !important; /* желтый индикатор: Запуск */
    box-shadow: none !important;
}

.pcard-dot.off {
    background: #e53935 !important; /* Уверенный сильный красный */
    opacity: 0.95;
    box-shadow: none !important;
}

body.dark .pcard-dot.off {
    background: #d32f2f !important;
    opacity: 0.95;
}

.pcard-dot.inactive {
    background: #90a4ae !important; /* Нейтральный серый по умолчанию */
    opacity: 0.35 !important;
    box-shadow: none !important;
}

body.dark .pcard-dot.inactive {
    background: #546e7a !important;
    opacity: 0.4 !important;
}

/* Отдельная область Дробилок 1 и 2 */
.pcard-drob-section {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(233, 30, 99, 0.05);
    border: 1.5px solid rgba(233, 30, 99, 0.22);
    box-sizing: border-box;
}
body.dark .pcard-drob-section {
    background: rgba(233, 30, 99, 0.1);
    border: 1.5px solid rgba(233, 30, 99, 0.35);
}

.pcard-drob-box {
    flex: 1 1 50%;
    min-width: 0;
    height: 46px; /* Больше по высоте */
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(233, 30, 99, 0.22);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
body.dark .pcard-drob-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(233, 30, 99, 0.35);
}

/* Объединяющие карточки силосов 1-4 и 5-8 */
.pcard-silos-col {
    padding: 0 !important;
    vertical-align: top;
    box-sizing: border-box;
}

.pcard-silos-card {
    background: rgba(33, 150, 243, 0.05);
    border: 1.5px solid rgba(33, 150, 243, 0.25);
    border-radius: 9px;
    padding: 6px 7px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.dark .pcard-silos-card {
    background: rgba(33, 150, 243, 0.1);
    border: 1.5px solid rgba(33, 150, 243, 0.35);
}

.pcard-silos-header {
    font-size: 1.05em;
    font-weight: 900;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 3px;
    border-bottom: 1px dashed rgba(33, 150, 243, 0.3);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.dark .pcard-silos-header {
    color: #64b5f6;
    border-bottom: 1px dashed rgba(100, 181, 246, 0.35);
}

.pcard-silo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0,0,0,0.06);
    height: 36px;
    box-sizing: border-box;
}
body.dark .pcard-silo-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Нория замеса */
.pcard-noria-wrap {
    justify-content: center;
    gap: 12px;
}
.pcard-noria-wrap .pcard-val {
    margin-left: 0;
}

/* Весы */
.pcard-vesy-wrap {
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 1.25em;
    font-weight: 900;
}
.pcard-vesy-title {
    font-weight: 900;
    color: #e65100;
}
body.dark .pcard-vesy-title {
    color: #ffb74d;
}
.pcard-metric b {
    font-weight: 900;
    font-size: 1.12em;
    color: #1b5e20;
}
body.dark .pcard-metric b {
    color: #a5d6a7;
}

/* Бункер и его 3 лампочки (20px, без размытия) */
.pcard-bunker-wrap {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.pcard-bunker-title {
    font-weight: 900;
    font-size: 1.25em;
}
.pcard-bunker-lights {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pcard-bunker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2em;
    font-weight: 900;
}
.pcard-bunker-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 20px;
    box-sizing: border-box;
    border: 1.5px solid rgba(0,0,0,0.2);
    box-shadow: none !important; /* без размытия */
}
body.dark .pcard-bunker-dot {
    border: 1.5px solid rgba(255,255,255,0.25);
}
.pcard-bunker-dot.off {
    background: #546e7a !important;
    opacity: 0.4;
}
.pcard-bunker-dot.green.on {
    background: #00e676 !important;
}
.pcard-bunker-dot.yellow.on {
    background: #ffd600 !important;
}
.pcard-bunker-dot.red.on {
    background: #ff1744 !important;
}

/* Дизмембратор */
.pcard-dizm-wrap {
    justify-content: center;
    gap: 10px;
}
.pcard-dizm-wrap .pcard-val {
    margin-left: 0;
}

/* Адаптив для мобильного: 100% ширина без горизонтальной прокрутки */
@media (max-width: 768px) {
    body { font-size: 13px; }
    h2 { font-size: 1.3em; }
    #meta { font-size: 1.1em; margin-bottom: 8px; }
    #meta .update-time { 
        font-size: 1.35em !important; 
        white-space: nowrap !important;
        letter-spacing: 0.2px;
    }
    #meta .offline-label {
        font-size: 1.05em !important;
    }

    .process-select { width: 100%; font-size: 0.95em; }
    
    /* Таблица: 100% ширина экрана без горизонтального скролла */
    .table-container, #sensorTableContainer {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    table, #sensorsTable {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    th, td { 
        font-size: 0.85em; 
        padding: 4px 2px !important; 
        min-width: 0 !important;
        word-break: break-word;
    }
    
    /* Пропорции колонок по умолчанию на телефоне (переопределяются пользователем через JS) */
    #sensorsTable col.col-name { width: 33%; }
    #sensorsTable col.col-value { width: 37%; }
    #sensorsTable col.col-details { width: 17%; }
    #sensorsTable col.col-chart { width: 13%; }

    /* Шапка на мобильном: уменьшаем иконки */
    .th-content { gap: 3px; }
    .th-icon { width: 18px; height: 18px; font-size: 14px; flex: 0 0 18px; }
    .th-label { font-size: 0.82em; }
    
    /* Значение и мин/макс */
    .val-text { font-size: 0.95em; font-weight: 700; }
    .warn-text { font-size: 0.75em; opacity: 0.75; }

    /* Детали (статус) */
    .status-dot { width: 9px; height: 9px; margin-right: 3px; }
    .status-text { font-size: 0.8em; }

    /* Кнопка График */
    .sensor-chart-btn { width: 100% !important; height: 38px !important; }
    .graphBtn { padding: 4px 5px !important; font-size: 0.75em !important; border-radius: 4px; }
    
    /* Кнопки вверху */
    .control-bar { margin-bottom: 12px; width: 100%; justify-content: space-between; align-items: center; }
    .control-bar .big-btn { min-width: 0 !important; flex-direction: row !important; }
    .control-bar .process-btn { height: 46px !important; padding: 6px 12px !important; font-size: 0.9em; }
    .control-bar .process-btn .big-icon { width: 24px !important; height: 24px !important; flex: 0 0 24px; }
    .control-bar .process-btn .process-name { font-size: 0.98em; }
    .control-bar .app-settings-btn { height: 46px !important; padding: 6px 12px !important; font-size: 0.9em; margin-left: auto !important; }
    .control-bar .app-settings-btn .big-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
    .control-bar .app-settings-btn .btn-label { font-size: 0.92em; }
    .control-bar .theme-btn { padding: 7px 12px !important; font-size: 0.9em; margin-left: auto !important; }
    .control-bar .theme-btn .big-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
    .control-bar .theme-btn .btn-label { font-size: 0.92em; }
    .big-btn { min-width: 110px; padding: 8px 10px; font-size: 0.9em; }
    .big-btn .big-icon { width: 40px; height: 40px; }
    
    #infoBlock { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; text-align:center; }
    .process-name { display:block; font-size:0.95em; margin-top:6px; color:#FFD700; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
    .big-btn .btn-label .process-name { font-weight:900 !important; color:#FFD700 !important; }
    body.dark .process-name { color:#FFEA00; }

    /* Карточка Дробилки на мобильном */
    .drobilka-card { padding: 8px 6px !important; }
    .drobilka-flow-table { border-spacing: 4px !important; }
    .pcard-cell { padding: 5px 6px !important; height: 34px; }
    .pcard-cell-inner { gap: 4px !important; }
    .pcard-name { font-size: 1.15em !important; font-weight: 900 !important; }
    .pcard-val { font-size: 1.68em !important; font-weight: 900 !important; padding: 1px 4px !important; line-height: 1.0 !important; }
    .pcard-badge-val { font-size: 1.45em !important; font-weight: 900 !important; padding: 1px 4px !important; line-height: 1.0 !important; }
    .pcard-dot { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
    .pcard-bunker-dot { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
    .pcard-vesy-wrap { font-size: 1.14em !important; gap: 4px 10px !important; }
    .pcard-bunker-wrap { gap: 4px 10px !important; }
    .pcard-bunker-title { font-size: 1.14em !important; }
    .pcard-bunker-item { font-size: 1.12em !important; gap: 5px !important; }
    .pcard-bunker-lights { gap: 10px !important; }
    .pcard-silos-card { padding: 4px 5px !important; gap: 3px !important; }
    .pcard-silos-header { font-size: 0.95em !important; padding-bottom: 2px !important; }
    .pcard-silo-item { padding: 2px 4px !important; height: 32px !important; }
    .pcard-drob-section { padding: 6px 6px !important; gap: 6px !important; margin-bottom: 8px !important; }
    .pcard-drob-box { height: 40px !important; padding: 4px 6px !important; }
}

/* ===============================================================================
   Модальное окно SCADA-графика uPlot: #chartModal (Адаптивный модальный режим)
   =============================================================================== */
#chartModal {
    padding: 10px !important;
    box-sizing: border-box;
}

#chartModal .modal-content.chart-modal-dialog {
    max-width: 960px;
    width: 95vw;
    height: auto;
    max-height: 92vh;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.dark #chartModal .modal-content.chart-modal-dialog {
    background: #182433;
    color: #f8fafc;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.chart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 6px;
    margin-bottom: 6px;
    flex: 0 0 auto;
}
body.dark .chart-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.chart-modal-header h3 {
    margin: 0;
    font-size: 1.15em;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.chart-modal-body {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.chart-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}
body.dark .chart-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Бесшовное встраивание scada-chart внутрь диалога без двойных рамок и полей */
#chartModal scada-chart {
    width: 100% !important;
    display: block !important;
}
#chartModal scada-chart .scada-main-card {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Мобильная адаптация: вид модалки как на планшете, боковой зазор в 2 раза меньше (по ~8px), виден фон страницы */
@media (max-width: 768px) {
    #chartModal {
        padding: 8px 6px !important;
    }
    #chartModal .modal-content.chart-modal-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        height: auto !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
        margin: auto !important;
        padding: 8px 6px !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
    }
    .chart-modal-header {
        padding: 2px 4px 6px 4px !important;
        margin-bottom: 4px !important;
    }
    .chart-modal-header h3 {
        font-size: 1.05em !important;
    }
    .chart-modal-footer {
        display: flex !important;
        margin-top: 4px !important;
        padding-top: 4px !important;
    }
    #chartModal scada-chart .card-header {
        padding: 3px 4px !important;
        gap: 3px !important;
    }
    #chartModal scada-chart .card-footer {
        padding: 4px 4px !important;
        gap: 4px !important;
    }
    #chartModal scada-chart .btn-group-sm > .btn {
        padding: 3px 6px !important;
        font-size: 0.78rem !important;
    }
    #chartModal scada-chart #btn-rewind-back,
    #chartModal scada-chart #btn-rewind-now,
    #chartModal scada-chart #btn-rewind-forward {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
    }
    #chartModal scada-chart .scada-uplot-container {
        padding: 0 !important;
    }
}

/* Настройки системы: карточки переключения режима диапазона и кнопки интервалов */
.app-range-mode-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid rgba(128,128,128,0.25);
    border-radius: 8px;
    cursor: pointer;
    background: var(--block-bg);
    transition: all 0.15s ease;
    user-select: none;
}
.app-range-mode-card:hover {
    border-color: #1976d2;
}
.app-range-mode-card.active {
    border-color: #1976d2;
    background: rgba(25, 118, 210, 0.08);
    box-shadow: 0 0 0 1px #1976d2;
}
.btn-app-range {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(128,128,128,0.28);
    background: var(--block-bg);
    color: var(--text-color);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-app-range:hover {
    border-color: #1976d2;
    color: #1976d2;
}
.btn-app-range.active {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
    box-shadow: 0 2px 5px rgba(25,118,210,0.35);
}