/* StWebChartViewer/wwwroot/css/app.css */
.realtime-chart-container {
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Aggiungere queste regole CSS */

.split-charts-container {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 30px;
    background-color: #f8f9fa;
}

.split-chart-item {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 20px;
    background-color: white;
}

.split-chart-controls {
    background-color: #e9ecef;
    padding: 15px;
    border-radius: 4px;
    border-bottom: 1px solid #dee2e6;
}

/* Draggable series chips used to regroup series between splits (drag to another split's card,
   or to the "new split" drop zone to pull it into its own group). */
.split-series-chip-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.split-series-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--chip-color, #6c757d);
    background-color: color-mix(in srgb, var(--chip-color, #6c757d) 12%, transparent);
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: grab;
    user-select: none;
}

.split-series-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--chip-color, #6c757d);
    flex-shrink: 0;
}

.split-series-chip:active {
    cursor: grabbing;
    opacity: 0.7;
}

.split-new-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
}

.realtime-chart-container .card {
    transition: transform 0.2s ease-in-out;
}

    .realtime-chart-container .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.chart-controls {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.chart-controls .form-label {
    font-weight: 600;
    color: #495057;
}

/* Separate Legend Styles */
.chart-legend-container {
    display: flex;
    align-items: stretch;
    position: relative;
    user-select: none;
    flex-shrink: 0;
}

.chart-legend-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%; /* Altezza uguale al contenitore, che sarà vincolato all'altezza del grafico */
    overflow-y: hidden;
    overflow-x: hidden; /* Scrollbar orizzontale nascosto */
    min-width: 0;
    min-height: 0;
    flex: 1;
    resize: none;
    box-sizing: border-box;
}

.chart-legend-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.chart-legend-items-empty {
    padding-right: 0;
}

/* Resize handle per la legenda */
.legend-resize-handle {
    width: 4px;
    background: #dee2e6;
    cursor: e-resize;
    transition: background 0.2s ease, width 0.2s ease;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 0;
    position: relative;
    z-index: 10;
    user-select: none;
    touch-action: none;
}

.legend-resize-handle:hover {
    background: #0d6efd;
    width: 6px;
    box-shadow: 2px 0 4px rgba(13, 110, 253, 0.3);
}

.legend-resize-handle.resizing {
    background: #0d6efd;
    width: 6px;
    box-shadow: 2px 0 8px rgba(13, 110, 253, 0.5);
}

/* Scrollbar personalizzata per la legenda - stile non invasivo */
.chart-legend-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* Altezza per scrollbar orizzontale */
}

.chart-legend-panel::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.chart-legend-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.chart-legend-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Stile scrollbar per Firefox */
.chart-legend-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.chart-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    min-width: 0; /* Consente al testo interno di troncarsi con ellipsis invece di forzare l'item a eccedere la larghezza del pannello */
    max-width: 100%;
}

.chart-legend-item:hover {
    background-color: #e9ecef;
    transform: translateX(2px);
}

/* Stile per item nascosto */
.chart-legend-item.legend-item-hidden {
    opacity: 0.5;
    background-color: #f8f9fa;
}

.chart-legend-item.legend-item-hidden:hover {
    opacity: 0.7;
    background-color: #e9ecef;
}

.chart-legend-item.legend-item-hidden .legend-label {
    text-decoration: line-through;
    color: #adb5bd;
}

.chart-legend-item.legend-item-hidden .legend-description {
    color: #ced4da;
}

.legend-visibility-indicator {
    font-size: 0.68rem;
    line-height: 1;
    margin-top: 2px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.legend-visibility-indicator.is-visible {
    color: #198754;
    opacity: 0.95;
    transform: translateX(0);
}

.legend-visibility-indicator.is-hidden {
    color: #6c757d;
    opacity: 0.75;
    transform: translateX(2px);
}

.legend-forced-range {
    display: inline-block;
    font-size: 0.67rem;
    line-height: 1.1;
    margin-top: 2px;
    color: #5f6b7a;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .legend-forced-range {
    color: #aeb8c4;
}

/* Legend Toggle Styles */
.legend-header-with-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.legend-header-with-toggle h6 {
    transition: opacity 0.2s ease;
}

.btn-icon-legend {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
}

.btn-icon-legend:hover {
    background-color: #e9ecef;
    color: #212529;
}

.btn-icon-legend:active {
    transform: scale(0.95);
}

/* Hide legend with smooth transition - show only toggle button */
.chart-legend-container.legend-hidden {
    width: 40px !important;
    flex-shrink: 0;
}

.chart-legend-container.legend-hidden .chart-legend-panel {
    width: 40px;
    padding: 4px 0 !important;
    align-items: stretch;
}

.chart-legend-container.legend-hidden .chart-legend-items {
    overflow: hidden;
    padding-right: 0;
}

.chart-legend-container.legend-hidden .legend-header-with-toggle {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    justify-content: center;
    align-items: center;
}

.chart-legend-container.legend-hidden .legend-header-with-toggle h6 {
    display: none;
}

.chart-legend-container.legend-hidden .chart-legend-item {
    display: none;
}

.chart-legend-container.legend-hidden .btn-icon-legend {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 40px;
    height: auto;
    padding: 8px 2px;
    min-width: unset;
    font-size: 0.6rem;
}

.collapsed-legend-points {
    display: none;
}

.historian-chart-page .chart-legend-container.legend-hidden .collapsed-legend-points,
.realtime-chart-page .chart-legend-container.legend-hidden .collapsed-legend-points,
.datalogger-chart-page .chart-legend-container.legend-hidden .collapsed-legend-points {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0 2px 6px;
    overflow-y: auto;
    overflow-x: hidden;
}

.collapsed-legend-point {
    width: 14px;
    height: 14px;
    border: 1px solid #7c8793;
    border-radius: 2px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.collapsed-legend-point:hover {
    transform: scale(1.12);
    border-color: #3d4650;
    box-shadow: 0 0 0 1px rgba(61, 70, 80, 0.25), 0 0 6px rgba(61, 70, 80, 0.25);
}

.collapsed-legend-point-hidden {
    opacity: 0.35;
    border-style: dashed;
}

.collapsed-legend-point-color {
    width: 100%;
    height: 100%;
    border-radius: 1px;
}

.collapsed-legend-point-hidden .collapsed-legend-point-color {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.55) 0,
        rgba(255, 255, 255, 0.55) 2px,
        rgba(255, 255, 255, 0) 2px,
        rgba(255, 255, 255, 0) 4px
    );
}

.collapsed-legend-point:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.collapsed-legend-points.collapsed-legend-points-dense {
    gap: 3px;
    margin-top: 6px;
    padding-bottom: 4px;
}

.collapsed-legend-points.collapsed-legend-points-dense .collapsed-legend-point {
    width: 10px;
    height: 10px;
    border-radius: 1px;
}

/* Ensure chart expands when legend is hidden */
.d-flex > div:first-child {
    transition: flex 0.3s ease;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.legend-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.legend-label {
    font-size: 0.72rem;
    color: #495057;
    line-height: 1.15;
    white-space: nowrap; /* Mantiene il testo su una riga */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Consente il troncamento invece del taglio a metà carattere quando il testo (es. in grassetto/corsivo da focus) eccede la larghezza del pannello */
}

.legend-description {
    margin-top: 2px;
    font-size: 0.72rem;
    color: #6c757d;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

    .loading-progress circle:last-child {
        stroke: #1b6ec2;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20% - 0.25rem) 0 auto 0.25rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Stili per la configurazione dei colori delle serie */
.series-color-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
    min-height: 120px; /* Ridotto da altezza precedente */
}

    .series-color-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

.series-color-header {
    padding: 8px 12px;
    text-align: center;
    font-weight: bold;
}

.series-name {
    margin: 0;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.series-color-body {
    padding: 8px; /* Ridotto da 10px */
}

.color-picker {
    width: 45px; /* Ridotto da 50px */
    height: 30px; /* Ridotto da 35px */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

/* Rimuovere completamente questi stili non più necessari */
/* .preset-colors e .preset-color-btn non servono più */

.preset-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.preset-color-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

    .preset-color-btn:hover {
        transform: scale(1.1);
        border-color: #333;
    }

    .preset-color-btn:active {
        transform: scale(0.95);
    }

/* Dropdown filtrabile */
.filterable-dropdown {
    position: relative;
    width: 100%;
}

.filterable-dropdown.open {
    z-index: 25000;
}

.dropdown-container {
    position: relative;
}

.dropdown-input-container {
    position: relative;
    cursor: pointer;
}

.dropdown-input {
    padding-right: 35px;
    cursor: pointer;
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    pointer-events: none;
    font-size: 12px;
    color: #6c757d;
}

    .dropdown-arrow.open {
        transform: translateY(-50%) rotate(180deg);
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 26000;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: white !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Hidden by default */
    min-width: 200px; /* Ensure minimum width */
}

.dropdown-menu.show {
    display: block !important; /* Shown when has .show class */
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

.dropdown-actions {
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    gap: 8px;
}

.dropdown-display-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    background: rgba(37, 99, 235, 0.03);
}

.dropdown-display-toggle .toggle-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
}

[data-theme="dark"] .dropdown-display-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .dropdown-display-toggle .toggle-label {
    color: var(--text-dark);
}

.dropdown-items {
    max-height: 250px;
    overflow-y: auto;
    background-color: inherit;
}

.dropdown-item-container {
    border-bottom: 1px solid #f8f9fa;
    background-color: inherit;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease-in-out;
    color: #212529;
}

    .dropdown-item:hover {
        background-color: #f8f9fa;
    }

    .dropdown-item.selected {
        background-color: #e7f3ff;
    }

    .dropdown-item input[type="checkbox"] {
        margin-right: 8px;
        cursor: pointer;
    }

.filterable-dropdown .dropdown-item {
    white-space: normal;
}

.filterable-dropdown .dropdown-item input[type="checkbox"] {
    flex-shrink: 0;
}

.filterable-dropdown .item-text {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-dark) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dropdown-item.selected {
    background-color: rgba(33, 150, 83, 0.3);
    color: var(--servitecno-green-light) !important;
}

.dropdown-no-items {
    padding: 12px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.dropdown-status {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

    .dropdown-status.loading {
        color: #0d6efd;
    }

    .dropdown-status.disconnected {
        color: #ffc107;
    }

    .dropdown-status.connected {
        color: #198754;
    }

    .dropdown-status i {
        font-size: 14px;
    }

.dropdown-input-container {
    position: relative;
}

/* Stili per controlli disabilitati */
.disabled-control {
    opacity: 0.6;
    pointer-events: none;
}

.filterable-dropdown.disabled {
    opacity: 0.6;
    pointer-events: none;
}

    .filterable-dropdown.disabled .dropdown-input {
        background-color: #f8f9fa;
        cursor: not-allowed;
    }

/* Stili per il toggle dei controlli */
.controls-toggle {
    text-align: right;
}

    .controls-toggle .btn {
        border-radius: 0 0 0.375rem 0.375rem;
        font-size: 0.875rem;
    }

/* Stile compatto per le card colori */
.series-color-card.compact {
    min-height: 100px;
    max-height: 120px;
}

    .series-color-card.compact .series-color-header {
        padding: 6px 8px;
    }

    .series-color-card.compact .series-name {
        font-size: 0.8rem;
        margin: 0;
    }

    .series-color-card.compact .series-color-body {
        padding: 6px;
    }

    .series-color-card.compact .color-picker {
        width: 40px;
        height: 28px;
    }

/* Stili per il container del single chart */
.single-chart-container {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    background-color: #f8f9fa;
}

.single-chart-controls {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    border-left: 4px solid #007bff;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

.single-chart-controls:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    border-left-color: #0056b3;
}

    .single-chart-controls h6 {
        margin-bottom: 10px;
        color: #2c3e50;
        font-weight: 700;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .single-chart-controls h6::before {
        content: '⚙️';
        font-size: 1rem;
    }

    .single-chart-controls .form-check {
        margin-bottom: 8px;
    }

    .single-chart-controls .form-check-input {
        width: 1.1em;
        height: 1.1em;
        margin-top: 0.15em;
        cursor: pointer;
    }

    .single-chart-controls .form-check-input:checked {
        background-color: #007bff;
        border-color: #007bff;
    }

    .single-chart-controls .form-check-label {
        font-weight: 500;
        color: #495057;
        cursor: pointer;
        user-select: none;
    }

    .single-chart-controls .form-control-sm {
        font-size: 0.875rem;
        border: 1px solid #ced4da;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .single-chart-controls .form-control-sm:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15);
    }

/* Compact variant for tighter spaces */
.single-chart-controls.compact-controls {
    padding: 10px 14px;
    border-left-width: 3px;
    position: relative;
    padding-right: 180px; /* Space for the button */
    min-height: 50px;
}

.single-chart-controls.compact-controls h6 {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.single-chart-controls.compact-controls h6::before {
    font-size: 0.9rem;
}

/* Fit to Data button positioned top-right */
.single-chart-controls .btn-fit-to-data {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
}

/* ===== SERVITECNO VARIABLES ===== */
:root {
    /* Header Colors */
    --header-bg: #ffffff;
    --header-text: #333333;
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Snapshot Viewer accent (home card + viewer page outline) */
    --snapshot-color: #00ACC1;
    --snapshot-color-dark: #00838F;
    /* Primary Colors */
    --servitecno-green: #009639;
    --servitecno-green-dark: #007a2f;
    --servitecno-green-light: #4CAF50;
    --servitecno-lime: #8BC34A;
    /* Text Colors */
    --text-white: #ffffff;
    --text-dark: #333333;
    --text-gray: #666666;
    --text-secondary: #6c757d;
    /* Background Colors */
    --background-light: #f8f9fa;
    --surface: #ffffff;
    --border: #dee2e6;
    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Header Colors */
    --header-bg: #1e1e1e;
    --header-text: #ffffff;
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    /* Primary Colors */
    --servitecno-green: #4CAF50;
    --servitecno-green-dark: #2E7D32;
    --servitecno-green-light: #66BB6A;
    /* Background Colors */
    --background-light: #121212;
    --surface: #1e1e1e;
    /* Text Colors */
    --text-dark: #ffffff;
    --text-gray: #e0e0e0;
    --text-secondary: #cccccc;
    /* Border */
    --border: #404040;
    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
}

/* ===== GLOBAL RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    transition: all var(--transition-normal);
    overflow-x: hidden;
}

/* ===== NAVIGATION TOGGLE BUTTON ===== */
.nav-toggle-fixed {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
}

.nav-toggle-btn {
    background: var(--servitecno-green);
    border: 2px solid var(--servitecno-green-dark);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(0, 150, 57, 0.3);
    color: var(--text-white);
}

.nav-toggle-btn:hover {
    transform: scale(1.1);
    background: var(--servitecno-green-dark);
    box-shadow: 0 6px 20px rgba(0, 150, 57, 0.4);
}

.nav-toggle-icon {
    font-size: 1.2rem;
    transition: transform var(--transition-normal);
}

.nav-toggle-btn:hover .nav-toggle-icon {
    transform: rotate(15deg);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-fixed {
    /* In basso a sinistra, incolonnato SOPRA il pulsante del manuale ("?"),
       che si trova a bottom: 12px con altezza 50px. */
    position: fixed;
    bottom: 74px;   /* 12px + 50px (pulsante "?") + 12px di spazio */
    left: 22px;
    z-index: 9999;
}

.theme-toggle-btn {
    /* Pulsante circolare con icona sole/luna, stessa misura del pulsante "?". */
    background: linear-gradient(135deg, var(--servitecno-green), var(--servitecno-green-dark));
    border: 2px solid var(--servitecno-green-dark);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 12px rgba(0, 150, 57, 0.35);
    color: var(--text-white);
}

.theme-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 150, 57, 0.45);
}

.theme-toggle-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Se il pulsante del manuale non c'è (UIConfiguration:ShowUserManual = false),
   il pulsante del tema scende al posto suo invece di lasciare un vuoto. */
body:not(:has(.manual-toggle-fixed)) .theme-toggle-fixed {
    bottom: 12px;
}

.theme-toggle-icon {
    font-size: 1.5rem;
    line-height: 1;
}

:root[data-theme="dark"] .theme-toggle-btn {
    background: linear-gradient(135deg, #1d1d1d, #2f2f2f);
    border-color: #0f0f0f;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    color: #f0f0f0;
}

:root[data-theme="dark"] .theme-toggle-icon {
    color: #ffd166;   /* il sole resta ben visibile sul fondo scuro */
}

/* ===== SIDEBAR & NAVIGATION ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 9998;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transform: translateX(0);
    transition: transform var(--transition-normal);
    box-shadow: 2px 0 10px var(--shadow);
}

.sidebar-custom {
    height: 100%;
    overflow-y: auto;
}

/* ===== MAIN LAYOUT ===== */
.main-content {
    width: 100%;
    min-height: 100vh;
    transition: all var(--transition-normal);
    overflow-x: hidden;
}

.main-content.with-nav {
    margin-left: 280px;
    width: calc(100% - 280px);
}

/* ===== HEADER STYLES ===== */
.servitecno-header {
    background: var(--surface);
    color: var(--text-dark);
    padding: 1.5rem 0;
    box-shadow: 0 2px 8px var(--shadow);
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
    .logo-section .logo-text {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-dark);
        letter-spacing: -0.5px;
        margin: 0;
        cursor: pointer;
        transition: color var(--transition-fast);
    }
        .logo-section .logo-text:hover {
            color: var(--servitecno-green);
        }

.logo-text {
    font-size: 1.4rem !important;
}

.company-logo {
    height: 50px;
    width: auto;
    margin-right: 15px;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

    .company-logo:hover {
        transform: scale(1.05);
    }

/* ===== HERO SECTIONS ===== */
.hero-section {
    background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
    padding: 4rem 0 2rem 0;
    text-align: center;
}

[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #2c2c2c 0%, var(--background-light) 100%);
}

.hero-section-realtime {
    background: linear-gradient(135deg, var(--servitecno-green) 0%, var(--servitecno-green-dark) 100%);
    padding: 2rem 0 1rem 0;
    text-align: center;
    color: var(--text-white);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* FocusOnNavigate (App.razor) moves focus to the page's h1 after every navigation for
   accessibility; suppress the resulting outline so no title looks "boxed" on load/refresh. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-title-realtime {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle,
.hero-subtitle-realtime {
    display: block;
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
    font-weight: 400;
}

.hero-subtitle-realtime {
    color: rgba(255, 255, 255, 0.9);
}

.discover-text {
    display: block;
    font-size: 1.8rem;
    color: var(--text-gray);
    margin-top: 1rem;
    font-weight: 400;
}

/* ===== CHART SECTIONS ===== */
.chart-section {
    padding: 0.2rem 0;
    background: var(--background-light);
    min-height: auto;
}

.chart-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.main-content .chart-container,
.main-content .realtime-chart-container,
.main-content .single-chart-container,
.main-content .split-charts-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* Force ECharts components to resize properly */
.main-content [id^="chart_"],
.main-content [id^="realtime_chart_"],
.main-content [id^="split_chart_"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== CHART COMPONENTS ===== */
.realtime-chart-container {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.chart-controls {
    background: var(--surface);
    border: 2px solid var(--servitecno-green);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-controls .form-label {
    font-weight: 600;
    color: var(--servitecno-green-dark);
    font-size: 0.95rem;
}

[data-theme="dark"] .chart-controls .form-label {
    color: var(--servitecno-green-light) !important;
}

[data-theme="dark"] .realtime-chart-container,
[data-theme="dark"] .single-chart-container,
[data-theme="dark"] .split-charts-container {
    color: var(--text-dark);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--text-dark) !important;
    background-color: var(--surface) !important;
}

/* Stili per la legenda in dark mode */
[data-theme="dark"] .chart-legend-panel {
    background: #1e1e1e;
    border-color: #404040;
}

[data-theme="dark"] .chart-legend-item:hover {
    background-color: #2d2d2d;
}

[data-theme="dark"] .legend-label {
    color: #e0e0e0;
}

[data-theme="dark"] .legend-description {
    color: #b0b0b0;
}

/* Scrollbar per dark mode (verticale e orizzontale) */
[data-theme="dark"] .chart-legend-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .chart-legend-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .chart-legend-panel {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Stili dark mode per item nascosti */
[data-theme="dark"] .chart-legend-item.legend-item-hidden {
    opacity: 0.5;
    background-color: #1e1e1e;
}

[data-theme="dark"] .chart-legend-item.legend-item-hidden:hover {
    opacity: 0.7;
    background-color: #2d2d2d;
}

[data-theme="dark"] .chart-legend-item.legend-item-hidden .legend-label {
    text-decoration: line-through;
    color: #6c757d;
}

[data-theme="dark"] .chart-legend-item.legend-item-hidden .legend-description {
    color: #495057;
}

/* ===== CONTROLS TOGGLE ===== */
.controls-toggle {
    text-align: right;
    margin-bottom: 1rem;
}

.controls-toggle .btn {
    background-color: var(--servitecno-green);
    border-color: var(--servitecno-green);
    color: var(--text-white);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.controls-toggle .btn:hover {
    background-color: var(--servitecno-green-dark);
    border-color: var(--servitecno-green-dark);
    transform: translateY(-1px);
}

/* ===== SOLUTIONS SECTION (Homepage) ===== */

/* Trovare o aggiungere questa regola per il titolo */
.card-content .card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #ffffff !important; /* ✅ Bianco per HomePage */
}

/* Trovare o aggiungere questa regola per la descrizione */
.card-content .card-description {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #ffffff !important; /* ✅ Bianco per HomePage */
}

/* ===== SPLIT CHART COMPONENTS ===== */
.split-charts-container {
    border: 2px solid var(--servitecno-green);
    border-radius: 12px;
    padding: 1.5rem;
    background-color: var(--surface);
}

.split-chart-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    background-color: var(--background-light);
    margin-bottom: 1rem;
    transition: all var(--transition-fast);
}

.split-chart-item:hover {
    box-shadow: var(--shadow-card);
}

.split-chart-controls {
    background-color: var(--surface);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--servitecno-green);
    margin-bottom: 1rem;
}

/* ===== SINGLE CHART CONTAINER ===== */
.single-chart-container {
    border: 2px solid var(--servitecno-green);
    border-radius: 12px;
    padding: 1.5rem;
    background-color: var(--surface);
}

.single-chart-controls {
    background-color: var(--background-light);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}

.single-chart-controls h6 {
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 600;
}

/* ===== SERIES COLOR CONFIGURATION ===== */
.series-color-card {
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
    min-height: 120px;
}

.series-color-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-hover);
    border-color: var(--servitecno-green);
}

.series-color-card.compact {
    min-height: 100px;
    max-height: 120px;
}

.series-color-header {
    padding: 8px 12px;
    text-align: center;
    font-weight: bold;
}

.series-color-card.compact .series-color-header {
    padding: 6px 8px;
}

.series-name {
    margin: 0;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.series-color-card.compact .series-name {
    font-size: 0.8rem;
}

.series-color-body {
    padding: 8px;
}

.series-color-card.compact .series-color-body {
    padding: 6px;
}

.color-picker {
    width: 45px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}

.series-color-card.compact .color-picker {
    width: 40px;
    height: 28px;
}

.color-picker:hover {
    transform: scale(1.05);
}

/* ===== SOLUTIONS SECTION (Homepage) ===== */
.solutions-section {
    padding: 3rem 0 4rem 0;
    background: var(--background-light);
}

.home-ownership {
    padding: 0 0 2.5rem 0;
    background: var(--background-light);
}

.home-ownership-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.home-ownership-container a {
    color: var(--servitecno-green);
    font-weight: 600;
    text-decoration: none;
}

.home-ownership-container a:hover {
    text-decoration: underline;
}

.solutions-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.solution-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-slow);
    box-shadow: var(--shadow-card);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px var(--shadow-hover);
}

/* Solution Card Backgrounds */
.realtime-solution {
    background-image: linear-gradient(45deg, rgba(0, 150, 57, 0.8), rgba(76, 175, 80, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23009639"/><g fill="white" opacity="0.1"><circle cx="100" cy="100" r="50"/><circle cx="300" cy="200" r="40"/><rect x="150" y="50" width="100" height="80" rx="10"/><path d="M50 200 L150 150 L250 180 L350 120" stroke="white" stroke-width="3" fill="none"/></g></svg>');
}

.historian-solution {
    background-image: linear-gradient(45deg, rgba(33, 150, 243, 0.8), rgba(63, 81, 181, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%232196F3"/><g fill="white" opacity="0.1"><rect x="50" y="100" width="300" height="100" rx="10"/><rect x="80" y="120" width="240" height="20" rx="2"/><rect x="80" y="150" width="200" height="20" rx="2"/><rect x="80" y="180" width="180" height="20" rx="2"/></g></svg>');
}

.datalogger-solution {
    background-image: linear-gradient(45deg, rgba(255, 152, 0, 0.8), rgba(255, 193, 7, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23FF9800"/><g fill="white" opacity="0.1"><rect x="100" y="80" width="200" height="140" rx="15"/><circle cx="150" cy="130" r="20"/><circle cx="250" cy="130" r="20"/><rect x="120" y="170" width="160" height="30" rx="5"/></g></svg>');
}

.telecontrol-solution {
    background-image: linear-gradient(45deg, rgba(156, 39, 176, 0.8), rgba(233, 30, 99, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%239C27B0"/><g fill="white" opacity="0.1"><rect x="100" y="100" width="200" height="120" rx="10"/><circle cx="150" cy="140" r="15"/><circle cx="200" cy="140" r="15"/><circle cx="250" cy="140" r="15"/><rect x="120" y="180" width="160" height="20" rx="10"/></g></svg>');
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.7) 100%);
    transition: all var(--transition-normal);
}

.solution-card:hover .card-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    color: var(--text-white);
    z-index: 2;
}

.card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-description {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== LICENSE STATUS (disabled cards) ===== */
.solution-card--disabled {
    cursor: not-allowed;
    filter: grayscale(0.65);
    opacity: 0.6;
}

.solution-card--disabled:hover {
    transform: none;
    box-shadow: var(--shadow-card);
}

.card-lock-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ===== FILTERABLE DROPDOWN ===== */
.filterable-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-container {
    position: relative;
}

.dropdown-input-container {
    position: relative;
    cursor: pointer;
}

.dropdown-input {
    padding-right: 35px;
    cursor: pointer;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-dark);
    transition: all var(--transition-fast);
}

.dropdown-input:focus {
    border-color: var(--servitecno-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 150, 57, 0.25);
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-normal);
    pointer-events: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.dropdown-arrow.open {
    transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background-color: var(--surface);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-actions {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
}

.dropdown-items {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-item-container {
    border-bottom: 1px solid var(--background-light);
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background-color var(--transition-fast);
    color: var(--text-dark);
}

.dropdown-item:hover {
    background-color: var(--background-light);
}

.dropdown-item.selected {
    background-color: rgba(0, 150, 57, 0.1);
    color: var(--servitecno-green-dark);
}

.dropdown-item input[type="checkbox"] {
    margin-right: 8px;
}

.item-text {
    flex: 1;
}

.dropdown-no-items {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* ===== FORM CONTROLS ===== */
.form-control, 
.form-select {
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-dark);
    transition: all var(--transition-fast);
}

.form-control:focus, 
.form-select:focus {
    border-color: var(--servitecno-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 150, 57, 0.25);
}

.form-check-input:checked {
    background-color: var(--servitecno-green);
    border-color: var(--servitecno-green);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 150, 57, 0.25);
}

/* ===== BUTTONS ===== */
.btn-success {
    background-color: var(--servitecno-green);
    border-color: var(--servitecno-green);
    color: var(--text-white);
    transition: all var(--transition-fast);
}

.btn-success:hover {
    background-color: var(--servitecno-green-dark);
    border-color: var(--servitecno-green-dark);
    transform: translateY(-1px);
}

.btn-info {
    background-color: var(--servitecno-green-light);
    border-color: var(--servitecno-green-light);
    color: var(--text-white);
}

.btn-info:hover {
    background-color: var(--servitecno-green);
    border-color: var(--servitecno-green);
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-secondary {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
}

/* ===== DISABLED CONTROLS ===== */
.disabled-control {
    opacity: 0.6;
    pointer-events: none;
}

.filterable-dropdown.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.filterable-dropdown.disabled .dropdown-input {
    background-color: var(--background-light);
    cursor: not-allowed;
}

/* ===== BLAZOR ERROR UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== LOADING PROGRESS ===== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--servitecno-green);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20% - 0.25rem) 0 auto 0.25rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

    /* Navigation toggles */
    .nav-toggle-fixed,
    .theme-toggle-fixed {
        top: 15px;
    }
    
    .nav-toggle-fixed {
        left: 15px;
    }
    
    .theme-toggle-fixed {
        right: 15px;
    }
    
    .nav-toggle-btn {
        width: 45px;
        height: 45px;
    }

    .theme-toggle-btn {
        height: 38px;
        min-width: 96px;
        padding: 0 12px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .theme-toggle-dot {
        width: 8px;
        height: 8px;
    }
    
    .nav-toggle-icon {
        font-size: 1rem;
    }

    /* Sidebar */
    .sidebar-overlay {
        width: 250px;
    }
    
    .main-content.with-nav {
        margin-left: 0;
        width: 100%;
    }

    /* Hero sections */
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-title-realtime {
        font-size: 1.8rem;
    }
    
    .hero-subtitle-realtime {
        font-size: 1rem;
    }
    
    .discover-text {
        font-size: 1.4rem;
    }

    /* Charts */
    .chart-section {
        padding: 1rem 0;
    }
    
    .chart-container {
        padding: 0 0.5rem;
    }
    
    .realtime-chart-container {
        padding: 1rem;
    }
    
    .chart-controls {
        padding: 1rem;
    }

    /* Solutions grid */
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .solution-card {
        height: 300px;
    }
    
    .card-content {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.5rem;
    }

    .servitecno-header {
        padding: 1rem 0;
    }

    .header-container {
        padding: 0 1rem;
        justify-content: center; /* Mantieni centrato anche su mobile */
    }

    .company-logo {
        height: 40px;
    }

    .logo-text {
        font-size: 1.4rem !important;
    }

    .logo-section {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    /* Navigation toggles */
    .nav-toggle-fixed,
    .theme-toggle-fixed {
        top: 10px;
    }
    
    .nav-toggle-btn {
        width: 40px;
        height: 40px;
    }

    .theme-toggle-btn {
        height: 34px;
        min-width: 88px;
        padding: 0 10px;
        font-size: 0.55rem;
        letter-spacing: 0.1em;
    }

    .theme-toggle-dot {
        width: 7px;
        height: 7px;
    }
    
    .nav-toggle-icon {
        font-size: 0.9rem;
    }

    /* Hero sections */
    .hero-section {
        padding: 2rem 0 1rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-title-realtime {
        font-size: 1.5rem;
    }
    
    .hero-subtitle-realtime {
        font-size: 0.9rem;
    }
    
    .discover-text {
        font-size: 1.2rem;
    }

    /* Solutions */
    .solutions-section {
        padding: 2rem 0 3rem 0;
    }

    .home-ownership {
        padding: 0 0 2rem 0;
    }

    .home-ownership-container {
        padding: 0 1rem;
        font-size: 0.82rem;
    }
    
    .solution-card {
        height: 250px;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    .card-description {
        font-size: 0.9rem;
    }

    /* Charts */
    .realtime-chart-container {
        padding: 0.75rem;
    }
    
    .chart-controls {
        padding: 0.75rem;
    }

    .company-logo {
        height: 35px;
    }

    .logo-text {
        font-size: 1.2rem !important;
    }

    .logo-section {
        gap: 12px;
    }
}

/* ===== NAVIGATION LINK IMPROVEMENTS FOR LIGHT MODE ===== */
.sidebar-overlay .nav-link,
.sidebar-custom .nav-link,
.navigation-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.sidebar-overlay .nav-link:hover,
.sidebar-custom .nav-link:hover,
.navigation-link:hover {
    color: var(--servitecno-green-dark) !important;
    background-color: rgba(0, 150, 57, 0.1);
}

.sidebar-overlay .nav-link.active,
.sidebar-custom .nav-link.active,
.navigation-link.active {
    color: var(--servitecno-green) !important;
    background-color: rgba(0, 150, 57, 0.15);
    font-weight: 600;
}

/* Ensure navigation text is dark enough in light mode */
.sidebar-overlay,
.sidebar-custom {
    color: #333333;
}

.sidebar-overlay a,
.sidebar-custom a {
    color: #333333 !important;
    text-decoration: none;
}

.sidebar-overlay a:hover,
.sidebar-custom a:hover {
    color: var(--servitecno-green-dark) !important;
}

/* ===== CHART TEXT IMPROVEMENTS FOR DARK MODE ===== */
[data-theme="dark"] .chart-controls .form-label {
    color: var(--servitecno-green-light) !important;
}

[data-theme="dark"] .realtime-chart-container,
[data-theme="dark"] .single-chart-container,
[data-theme="dark"] .split-charts-container {
    color: var(--text-dark);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--text-dark) !important;
    background-color: var(--surface) !important;
}

/* ===== ECHARTS DARK MODE TEXT VISIBILITY ===== */
[data-theme="dark"] .echarts-container,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .realtime-chart-container {
    /* Force ECharts text elements to be visible in dark mode */
    color: #ffffff !important;
}

/* ECharts specific text elements */
[data-theme="dark"] .echarts-container text,
[data-theme="dark"] .chart-container text,
[data-theme="dark"] .realtime-chart-container text {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ECharts title and labels */
[data-theme="dark"] .echarts-container .echarts-title,
[data-theme="dark"] .echarts-container .echarts-axis-label,
[data-theme="dark"] .echarts-container .echarts-axis-tick,
[data-theme="dark"] .echarts-container .echarts-legend-text {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ECharts toolbar icons and text */
[data-theme="dark"] .echarts-container .echarts-toolbox,
[data-theme="dark"] .echarts-container .echarts-toolbox-feature {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ECharts grid lines */
[data-theme="dark"] .echarts-container .echarts-grid-line {
    stroke: #666666 !important;
}

/* ECharts axis lines */
[data-theme="dark"] .echarts-container .echarts-axis-line {
    stroke: #ffffff !important;
}

/* Generic SVG text elements inside chart containers */
[data-theme="dark"] .chart-container svg text,
[data-theme="dark"] .realtime-chart-container svg text {
    fill: #ffffff !important;
}

/* If using canvas rendering, apply to canvas container */
[data-theme="dark"] .chart-container canvas,
[data-theme="dark"] .realtime-chart-container canvas {
    filter: invert(0) contrast(1) brightness(1.2);
}


/* Animazione per il pulsante Pause quando è attivo */
.btn-warning.pause-active {
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
}

/* Badge per il conteggio buffer */
.badge.bg-light.text-dark {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

/* Aggiungi alla fine del file esistente */

/* ===== HISTORIAN SPECIFIC STYLES ===== */
.hero-section-historian {
    background: linear-gradient(135deg, #2196F3 0%, #3F51B5 100%);
    padding: 2rem 0 1rem 0;
    text-align: center;
    color: var(--text-white);
}

.hero-title-historian {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle-historian {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    font-weight: 400;
}

.historian-chart-container {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.historian-controls {
    border-color: #2196F3 !important;
}

    .historian-controls .form-label {
        color: #2196F3 !important;
    }

[data-theme="dark"] .historian-controls .form-label {
    color: #64B5F6 !important;
}

.historian-controls .btn-primary {
    background-color: #2196F3;
    border-color: #2196F3;
    color: var(--text-white);
    transition: all var(--transition-fast);
}

    .historian-controls .btn-primary:hover {
        background-color: #1976D2;
        border-color: #1976D2;
        transform: translateY(-1px);
    }

/* ===== DATALOGGER SPECIFIC STYLES ===== */
.hero-section-datalogger {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    padding: 2rem 0 1rem 0;
    text-align: center;
    color: var(--text-white);
}

.hero-title-datalogger {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle-datalogger {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    font-weight: 400;
}

.datalogger-chart-container {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.datalogger-controls {
    border-color: #FF9800 !important;
}

    .datalogger-controls .form-label {
        color: #F57C00 !important;
    }

[data-theme="dark"] .datalogger-controls .form-label {
    color: #FFB74D !important;
}

.datalogger-controls .btn-primary {
    background-color: #FF9800;
    border-color: #FF9800;
    color: var(--text-white);
    transition: all var(--transition-fast);
}

    .datalogger-controls .btn-primary:hover {
        background-color: #F57C00;
        border-color: #F57C00;
        transform: translateY(-1px);
    }

.datalogger-controls .btn-info {
    background-color: #FFB74D;
    border-color: #FFB74D;
    color: var(--text-dark);
}

    .datalogger-controls .btn-info:hover {
        background-color: #FFA726;
        border-color: #FFA726;
    }

/* DataLogger color scheme for series */
.datalogger-chart-container .series-color-card {
    border-color: #FF9800;
}

    .datalogger-chart-container .series-color-card:hover {
        border-color: #F57C00;
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    }

/* DataLogger dropdown styling */
.datalogger-controls .dropdown-input:focus {
    border-color: #FF9800;
    box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.25);
}

.datalogger-controls .dropdown-item.selected {
    background-color: rgba(255, 152, 0, 0.1);
    color: #F57C00;
}

/* DataLogger form controls */
.datalogger-controls .form-control:focus,
.datalogger-controls .form-select:focus {
    border-color: #FF9800;
    box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.25);
}

.datalogger-controls .form-check-input:checked {
    background-color: #FF9800;
    border-color: #FF9800;
}

.datalogger-controls .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.25);
}

/* DataLogger single chart container */
.datalogger-chart-container .single-chart-container {
    border-color: #FF9800;
}

.datalogger-chart-container .single-chart-controls {
    border-color: #FFB74D;
}

/* DataLogger controls toggle button */
.datalogger-chart-container .controls-toggle .btn {
    background-color: #FF9800;
    border-color: #FF9800;
}

    .datalogger-chart-container .controls-toggle .btn:hover {
        background-color: #F57C00;
        border-color: #F57C00;
    }

/* Dark theme adjustments for DataLogger */
[data-theme="dark"] .hero-section-datalogger {
    background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
}

[data-theme="dark"] .datalogger-controls .btn-primary {
    background-color: #FFB74D;
    border-color: #FFB74D;
    color: #333333;
}

    [data-theme="dark"] .datalogger-controls .btn-primary:hover {
        background-color: #FFA726;
        border-color: #FFA726;
    }

.template-manager {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 10px;
}

/* Rendered outside the sidebar (see TemplateDialogsComponent), so it always centers on the
   full viewport - regardless of sidebar scroll position - instead of being trapped inside it. */
.template-dialog-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1060;
    box-sizing: border-box;
}

.template-dialog-shell {
    width: min(26rem, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
}

.template-dialog-shell-wide {
    width: min(34rem, calc(100% - 2rem));
}

.template-dialog-content,
.modal-content {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.template-dialog-content {
    overflow: hidden;
}

.template-dialog-content .modal-body {
    max-height: min(60vh, 24rem);
    overflow-y: auto;
}

.template-choices {
    display: grid;
    gap: 0.5rem;
}

.template-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
}

.template-choice:hover, .template-choice.is-selected {
    border-color: var(--servitecno-green);
    background: var(--background-light);
}

.template-choice.is-selected {
    box-shadow: inset 3px 0 0 var(--servitecno-green);
}

.template-choice-select {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
    border-radius: 0.3rem;
}

.template-choice-select:focus-visible {
    outline: 2px solid var(--servitecno-green);
    outline-offset: -2px;
}

.template-choice-icon {
    flex-shrink: 0;
    color: var(--servitecno-green);
    font-size: 1.1rem;
}

.template-choice-text {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.template-choice-name, .template-choice-file {
    overflow-wrap: anywhere;
}

.template-choice-name {
    font-weight: 600;
    line-height: 1.3;
}

.template-choice-file {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

.template-choice-delete {
    flex-shrink: 0;
}

/* Keeps the title and the Reset/Cancel/Apply row always visible: only the settings list in
   between scrolls, instead of the whole dialog (which used to carry header and footer off-screen
   together with it on a tall form). */
.chart-appearance-modal .modal-dialog {
    max-height: 90vh;
}

.chart-appearance-modal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-appearance-modal .modal-header,
.chart-appearance-modal .modal-footer {
    flex-shrink: 0;
}

.chart-appearance-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Foldable groups of the Chart Appearance dialog. */
.chart-appearance-modal .appearance-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
}

.chart-appearance-modal .appearance-section-toggle:hover {
    color: var(--servitecno-green, #198754);
}

.chart-appearance-modal .appearance-section-toggle .bi {
    font-size: 0.7rem;
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.list-group-item:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05);
}

.template-manager button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

    .template-manager button:disabled:hover {
        transform: none;
    }


/* Logo Fixed - Always Visible */
.logo-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .logo-fixed:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .logo-fixed img {
        height: 120px;
        width: auto;
        display: block;
    }

[data-theme="dark"] .logo-fixed {
    background-color: rgba(30, 30, 30, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

    [data-theme="dark"] .logo-fixed:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

/* ===== TEMPLATE LIBRARY SPECIFIC STYLES ===== */
.hero-section-template {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    padding: 2rem 0 1rem 0;
    text-align: center;
    color: var(--text-white);
}

.hero-title-template {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle-template {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    font-weight: 400;
}

/* Dark theme adjustments for Template Library */
[data-theme="dark"] .hero-section-template {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);
}

.template-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.template-header {
    text-align: center;
    margin-bottom: 3rem;
}

    .template-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: var(--primary-color, #2563eb);
    }

.subtitle {
    color: var(--text-secondary, #6b7280);
    font-size: 1.1rem;
}

.filters-section {
    background: var(--card-bg, #ffffff);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-box {
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s;
}

    .search-input:focus {
        outline: none;
        border-color: var(--primary-color, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.filter-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-select {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

    .filter-select:hover {
        border-color: var(--primary-color, #2563eb);
    }

.btn-refresh {
    padding: 0.75rem 1.5rem;
    background: var(--primary-color, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-refresh:hover {
        background: var(--primary-hover, #1d4ed8);
        transform: translateY(-2px);
    }

.category-section {
    margin-bottom: 3rem;
}

.category-title {
    font-size: 1.3rem; /* Ridotto da 1.5rem */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.count-badge {
    background: var(--badge-bg, #eff6ff);
    color: var(--primary-color, #2563eb);
    padding: 0.2rem 0.6rem; /* Ridotto da 0.25rem 0.75rem */
    border-radius: 12px;
    font-size: 0.8rem; /* Ridotto da 0.9rem */
    font-weight: 600;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.template-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.template-details-row {
    display: grid;
    grid-template-columns: minmax(200px, 1.3fr) minmax(320px, 2fr) auto;
    align-items: center;
    gap: 0.85rem 1rem;
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    border-left: 4px solid var(--card-accent, #2563eb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.details-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.details-title {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.details-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

.details-actions {
    display: flex;
    gap: 0.5rem;
}

.details-actions .btn-action {
    padding: 0.55rem 0.8rem;
}

.template-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.template-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.template-table th,
.template-table td {
    padding: 0.8rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.template-table th {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    background: rgba(156, 39, 176, 0.06);
}

.template-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.05);
}

.template-table .col-name {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.template-compact-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg, #ffffff);
    border-left: 4px solid var(--card-accent, #2563eb);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.compact-name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-actions {
    display: flex;
    gap: 0.4rem;
}

.compact-actions .btn-action {
    min-width: 42px;
    padding: 0.4rem 0.5rem;
    line-height: 1;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

.table-actions .btn-action {
    min-width: 92px;
    padding: 0.55rem 0.75rem;
}

.template-card {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s;
    border-left: 4px solid var(--card-accent, #2563eb);
}

    .template-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

.template-solution {
    background-image: linear-gradient(45deg, rgba(156, 39, 176, 0.8), rgba(123, 31, 162, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%239C27B0"/><g fill="white" opacity="0.1"><rect x="80" y="80" width="80" height="100" rx="8"/><rect x="170" y="80" width="80" height="100" rx="8"/><rect x="260" y="80" width="80" height="100" rx="8"/><circle cx="120" cy="110" r="15"/><circle cx="210" cy="110" r="15"/><circle cx="300" cy="110" r="15"/></g></svg>');
}

.snapshot-solution {
    background-image: linear-gradient(45deg, rgba(0, 172, 193, 0.8), rgba(0, 131, 143, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%2300ACC1"/><g fill="white" opacity="0.1"><rect x="90" y="90" width="220" height="130" rx="14"/><circle cx="200" cy="155" r="42"/><circle cx="200" cy="155" r="22"/><rect x="130" y="68" width="60" height="22" rx="6"/><path d="M60 250 L140 215 L220 235 L340 190" stroke="white" stroke-width="3" fill="none"/></g></svg>');
}

/* Snapshot Viewer page: the chart panel is outlined with the same accent as its Home card. */
.snapshot-viewer-page.realtime-chart-page .realtime-chart-container,
.snapshot-viewer-page.realtime-chart-page .snapshot-open-card {
    border: 2px solid var(--snapshot-color);
    box-shadow: 0 0 0 1px var(--snapshot-color-dark), var(--shadow-card);
}

.card-realtime {
    --card-accent: #10b981;
}

.card-historian {
    --card-accent: #f59e0b;
}

.card-datalogger {
    --card-accent: #8b5cf6;
}

.card-general {
    --card-accent: #6b7280;
}

.card-template {
    --card-accent: #9C27B0;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem; /* Aggiunto per spaziatura tra titolo e badge */
}

.card-title {
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-primary, #111827);
    font-weight: 600; /* Ridotto da default per mantenere leggibilità */
    line-height: 1.3;
    word-break: break-word; /* Permette al testo lungo di andare a capo */
}

.card-content .card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #ffffff !important; /* Bianco solo per HomePage */
}

.badge {
    background: var(--card-accent, #2563eb);
    color: white;
    padding: 0.2rem 0.6rem; /* Ridotto da 0.25rem 0.75rem */
    border-radius: 12px;
    font-size: 0.7rem; /* Ridotto da 0.75rem */
    font-weight: 600;
    white-space: nowrap;
}

.card-body {
    margin-bottom: 1rem;
}

.card-info {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.info-label {
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

.info-value {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.card-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-action {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-load {
    background: var(--primary-color, #2563eb);
    color: white;
}

    .btn-load:hover {
        background: var(--primary-hover, #1d4ed8);
    }

.btn-delete {
    background: #ef4444;
    color: white;
}

    .btn-delete:hover {
        background: #dc2626;
    }

.loading-spinner {
    text-align: center;
    padding: 4rem;
}

/* Full-page overlay reusing the .loading-spinner / .spinner pair above, for a wait that has
   nowhere else on screen to show itself yet (e.g. the historian component's first load, before
   its own sidebar/chart chrome has anything meaningful to display). */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
}

.page-loading-overlay .loading-spinner {
    padding: 0;
}

.page-loading-overlay .loading-spinner p {
    margin-top: 0.75rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.95rem;
}

[data-theme="dark"] .page-loading-overlay {
    background: rgba(17, 24, 39, 0.92);
}

.spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    border: 4px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #2563eb);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.no-templates {
    text-align: center;
    padding: 4rem;
}

    .no-templates p {
        font-size: 1.5rem;
        color: var(--text-secondary, #6b7280);
        margin-bottom: 2rem;
    }

.btn-primary {
    padding: 1rem 2rem;
    background: var(--primary-color, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-primary:hover {
        background: var(--primary-hover, #1d4ed8);
        transform: translateY(-2px);
    }

/* Dark Theme */
[data-theme="dark"] {
    --card-bg: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --badge-bg: #1e3a8a;
}

/* Aggiungere nella sezione @media per mobile (circa riga 2200) */

@media (max-width: 768px) {
    .card-title {
        font-size: 0.95rem; /* Ancora più piccolo su mobile */
    }

    .template-details-row {
        grid-template-columns: 1fr;
    }

    .details-meta {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        font-size: 0.85rem;
    }

    .details-actions {
        width: 100%;
    }

    .details-actions .btn-action {
        flex: 1;
    }

    .compact-actions .btn-action {
        min-width: 40px;
        padding: 0.45rem;
    }

    .category-title {
        font-size: 1.15rem;
    }

    .badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }

    .count-badge {
        font-size: 0.75rem;
        padding: 0.15rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .card-title {
        font-size: 0.9rem;
    }

    .category-title {
        font-size: 1.05rem;
    }
}

/* ===== Chart Sidebar Component Styles ===== */
.chart-sidebar-wrapper {
    position: relative;
    z-index: 1000;
}

/* Sidebar Panel */
.chart-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
}

.chart-sidebar.sidebar-left {
    left: 0;
    transform: translateX(-100%);
}

.chart-sidebar.sidebar-left.open {
    transform: translateX(0);
}

.chart-sidebar.sidebar-right {
    right: 0;
    transform: translateX(100%);
}

.chart-sidebar.sidebar-right.open {
    transform: translateX(0);
}

/* Sidebar Header */
.chart-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 2;
}

.sidebar-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-close-sidebar {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.2s;
}

.btn-close-sidebar:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Sidebar Content */
.chart-sidebar-content {
    padding: 1.25rem;
}

/* Sidebar Toggle Button (Tab) */
.chart-sidebar-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem 0.5rem;
    cursor: pointer;
    z-index: 1000;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.chart-sidebar-toggle.toggle-left {
    left: 0;
}

.chart-sidebar-toggle.toggle-left.open {
    left: var(--chart-sidebar-width, 500px);
}

.chart-sidebar-toggle.toggle-right {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.chart-sidebar-toggle.toggle-right.open {
    right: var(--chart-sidebar-width, 500px);
}

.chart-sidebar-toggle:hover {
    filter: brightness(1.1);
    transform: translateY(-50%) scale(1.05);
}

/* Collapsed by default (closed state only) to a slim text-only tab, so it takes up as little
   room as possible over the chart; hovering it reveals the gear icon again. */
.chart-sidebar-toggle:not(.open) {
    padding: 0.6rem 0.35rem;
}

.chart-sidebar-toggle:not(.open):hover {
    padding: 1rem 0.5rem;
}

.chart-sidebar-toggle:not(.open) .toggle-icon {
    font-size: 0;
    margin-bottom: 0;
    transition: font-size 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
}

.chart-sidebar-toggle:not(.open):hover .toggle-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ===== CENTERED SIDEBAR VARIANT ===== */
.chart-sidebar.sidebar-left.sidebar-centered,
.chart-sidebar.sidebar-right.sidebar-centered {
    top: 50%;
    bottom: auto;
    height: auto;
    max-height: 85vh;
    min-height: 400px;
    margin: 0;
    border: 3px solid #667eea;
}

.chart-sidebar.sidebar-left.sidebar-centered {
    transform: translateY(-50%) translateX(-100%);
    border-radius: 0 12px 12px 0;
    border-left: none;
    box-shadow: 4px 0 20px rgba(102, 126, 234, 0.4), 2px 0 10px rgba(0, 0, 0, 0.2);
}

.chart-sidebar.sidebar-left.sidebar-centered.open {
    transform: translateY(-50%) translateX(0);
}

.chart-sidebar.sidebar-right.sidebar-centered {
    transform: translateY(-50%) translateX(100%);
    border-radius: 12px 0 0 12px;
    border-right: none;
    box-shadow: -4px 0 20px rgba(102, 126, 234, 0.4), -2px 0 10px rgba(0, 0, 0, 0.2);
}

.chart-sidebar.sidebar-right.sidebar-centered.open {
    transform: translateY(-50%) translateX(0);
}

/* Toggle button adjustment for centered sidebar */
.chart-sidebar-toggle.toggle-left.toggle-centered,
.chart-sidebar-toggle.toggle-right.toggle-centered {
    top: 50%;
    transform: translateY(-50%);
}

.chart-sidebar-toggle.toggle-left.toggle-centered.open {
    left: var(--chart-sidebar-width, 500px);
}

.chart-sidebar-toggle.toggle-right.toggle-centered.open {
    right: var(--chart-sidebar-width, 500px);
}

.chart-sidebar-toggle.toggle-left.toggle-centered:hover,
.chart-sidebar-toggle.toggle-right.toggle-centered:hover {
    transform: translateY(-50%) scale(1.05);
}

.toggle-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.toggle-text {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Sidebar Overlay for mobile */
.chart-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-sidebar {
        width: 90% !important;
        max-width: 400px !important;
    }

    .chart-sidebar-toggle.toggle-left.open,
    .chart-sidebar-toggle.toggle-right.open {
        left: auto;
        right: auto;
    }

    .chart-sidebar-toggle.toggle-left.open {
        left: 90%;
    }

    .chart-sidebar-toggle.toggle-right.open {
        right: 90%;
    }
}

@media (max-width: 480px) {
    .chart-sidebar {
        width: 100% !important;
    }

    .chart-sidebar-toggle.toggle-left.open {
        left: calc(100% - 3rem);
    }

    .chart-sidebar-toggle.toggle-right.open {
        right: calc(100% - 3rem);
    }

    .chart-sidebar-content {
        padding: 1rem;
    }
}

/* ===== HISTORIAN CHART PAGE - NO SCROLL LAYOUT ===== */

/* Base layout: 100vh with flexbox, no overflow */
.historian-chart-page {
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.historian-chart-page .servitecno-header {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 0.75rem 0;
    overflow: hidden;
}

.historian-chart-page .company-logo {
    height: 45px;
}

.historian-chart-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Critical for flex children */
}

.historian-chart-page .hero-section-historian {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 1rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.historian-chart-page .hero-title-historian {
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.historian-chart-page .hero-subtitle-historian {
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.historian-chart-page .chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* No scroll at section level */
    padding: 0.1rem 0;
    min-height: 0;
    background: var(--background-light);
}

.historian-chart-page .chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0.4rem;
    min-height: 0;
    overflow: hidden;
}

.historian-chart-page .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.historian-chart-page .row {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.historian-chart-page .col-12 {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    min-height: 0;
}

/* Wrapper for historian chart component - manages flex layout */
.historian-chart-page .historian-component-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

/* Chart component maintains fixed size */
.historian-chart-page .historian-chart-container {
    flex: 1;
    /* Column flex: the toolbar takes its height and .single-chart-container (flex: 1) fills what is
       left, so the coloured frame ends inside the page instead of overflowing by the toolbar's height. */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    border: 1px solid var(--border);
    margin: 0;
    overflow-y: hidden; /* Prevent visual overflow on chart frame */
    overflow-x: visible; /* Allow horizontal elements like dropdowns */
    min-height: 0;
}

/* Fixed controls (Granularity and Template buttons) - always visible */
.historian-chart-page .historian-fixed-controls {
    flex-shrink: 0; /* Don't shrink - always visible */
    display: block;
    width: 100%;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1rem;
    border: 1px solid var(--border);
    margin-top: 1rem;
}

/* Ensure ECharts components maintain their size */
.historian-chart-page [id^="chart_"],
.historian-chart-page [id^="historian_chart_"],
.historian-chart-page [id^="split_chart_"] {
    width: 100% !important;
    min-height: 0 !important;
}

/* Chart wrapper divs maintain size */
.historian-chart-page .single-chart-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 3px solid #00bcd4;
    border-radius: 12px;
    box-shadow: 
        0 0 20px rgba(0, 188, 212, 0.4),
        0 0 40px rgba(0, 188, 212, 0.2),
        inset 0 0 20px rgba(0, 188, 212, 0.05);
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 8px;
}

.historian-chart-page .single-chart-controls {
    margin-bottom: 8px;
    padding: 8px 12px;
}

.historian-chart-page .single-chart-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00bcd4, #2196f3, #00bcd4);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.historian-chart-page .split-charts-container {
    display: block;
    width: 100%;
    min-height: 0;
    border: 3px solid #00bcd4;
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(0, 188, 212, 0.4),
        0 0 40px rgba(0, 188, 212, 0.2),
        inset 0 0 20px rgba(0, 188, 212, 0.05);
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 1rem;
}

.historian-chart-page .split-charts-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00bcd4, #2196f3, #00bcd4);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.historian-chart-page .split-chart-item {
    border: 2px solid #00bcd4;
    border-radius: 8px;
    box-shadow:
        0 0 15px rgba(0, 188, 212, 0.3),
        inset 0 0 10px rgba(0, 188, 212, 0.03);
    background: rgba(0, 188, 212, 0.02);
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.historian-chart-page .split-chart-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, #00bcd4, #2196f3, #00bcd4);
    border-radius: 10px;
    z-index: -1;
    opacity: 0.2;
    filter: blur(6px);
}

.historian-chart-page .split-chart-item:last-child {
    margin-bottom: 0;
}

.historian-chart-page .split-chart-controls {
    background-color: var(--surface);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.75rem;
}

/* Compact view: shrinks split items and condenses the Y-axis controls onto one line,
   so more splits fit in the available height without vertical scrolling. */
.historian-chart-page .split-chart-item.compact {
    padding: 0.4rem;
    margin-bottom: 0.4rem;
}

.historian-chart-page .split-chart-item.compact:last-child {
    margin-bottom: 0;
}

.historian-chart-page .split-chart-controls.compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: var(--surface);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.4rem;
}

.historian-chart-page .split-chart-controls.compact .split-compact-title {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.historian-chart-page .split-chart-controls.compact .form-check {
    margin-bottom: 0;
    white-space: nowrap;
}

.historian-chart-page .split-chart-controls.compact input[type="number"] {
    width: 80px;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    height: auto;
}

.historian-chart-page .split-compact-title-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.historian-chart-page .split-chart-wrapper {
    display: block;
    width: 100%;
    min-height: 300px; /* Half height for split */
}

/* Sidebar with internal scroll */
.historian-chart-page .chart-sidebar {
    max-height: calc(100vh - 70px - 70px - 2rem) !important;
    overflow-y: auto;
    overflow-x: visible; /* Allow dropdown to be visible */
}

.historian-chart-page .chart-sidebar-content {
    padding: 1rem;
    overflow: visible; /* Allow dropdown menus to overflow */
}

/* Optimize form spacing for no-scroll layout */
.historian-chart-page .form-group {
    margin-bottom: 0.75rem;
    overflow: visible; /* Allow dropdowns to overflow */
    position: relative; /* For absolute positioned dropdowns */
}

.historian-chart-page .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

/* Ensure ALL containers allow dropdown overflow */
.historian-chart-page .card,
.historian-chart-page .card-body {
    overflow: visible !important;
}

.historian-chart-page .row,
.historian-chart-page .col-12,
.historian-chart-page .col-md-6 {
    overflow: visible !important;
}

/* Ensure dropdown containers don't clip */
.historian-chart-page .filterable-dropdown,
.historian-chart-page .dropdown-container {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.historian-chart-page .dropdown-menu {
    z-index: 10000 !important; /* Ensure dropdown appears above all chart elements */
    position: absolute !important;
    display: block !important; /* Force display */
}

.historian-chart-page .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.historian-chart-page .dropdown-items {
    max-height: 250px;
    overflow-y: auto;
    display: block !important;
}

.historian-chart-page .dropdown-item-container {
    display: block !important;
}

.historian-chart-page .dropdown-item {
    display: flex !important;
    visibility: visible !important;
}

/* Medium height optimization */
@media (max-height: 800px) {
    .historian-chart-page .servitecno-header {
        height: 60px;
        min-height: 60px;
        padding: 0.5rem 0;
    }

    .historian-chart-page .company-logo {
        height: 40px;
    }

    .historian-chart-page .hero-section-historian {
        height: 60px;
        min-height: 60px;
        padding: 0.75rem 0;
    }

    .historian-chart-page .hero-title-historian {
        font-size: 1.2rem;
    }

    .historian-chart-page .hero-subtitle-historian {
        font-size: 0.8rem;
    }

    .historian-chart-page .chart-section {
        padding: 0.2rem 0;
    }

    .historian-chart-page .historian-chart-container {
        padding: 0.4rem;
        border-radius: 10px;
    }

    .historian-chart-page .historian-fixed-controls {
        padding: 0.75rem;
        border-radius: 10px;
        margin-top: 0.75rem;
    }

    .historian-chart-page .chart-sidebar {
        max-height: calc(100vh - 60px - 60px - 1.5rem) !important;
        overflow-x: visible;
    }

    .historian-chart-page .chart-sidebar-content {
        padding: 0.75rem;
        overflow: visible;
    }

    .historian-chart-page .form-group {
        margin-bottom: 0.6rem;
    }

    .historian-chart-page .form-label {
        font-size: 0.85rem;
    }

    .historian-chart-page .form-control,
    .historian-chart-page .form-select {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .historian-chart-page .btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
}

/* Low height optimization */
@media (max-height: 650px) {
    .historian-chart-page .servitecno-header {
        height: 50px;
        min-height: 50px;
        padding: 0.4rem 0;
    }

    .historian-chart-page .company-logo {
        height: 35px;
    }

    .historian-chart-page .hero-section-historian {
        height: 50px;
        min-height: 50px;
        padding: 0.5rem 0;
    }

    .historian-chart-page .hero-title-historian {
        font-size: 1.1rem;
    }

    .historian-chart-page .hero-subtitle-historian {
        display: none; /* Hide subtitle on low screens */
    }

    .historian-chart-page .chart-section {
        padding: 0.5rem 0;
    }

    .historian-chart-page .chart-container {
        padding: 0 0.75rem;
    }

    .historian-chart-page .historian-chart-container {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .historian-chart-page .historian-fixed-controls {
        padding: 0.5rem;
        border-radius: 8px;
        margin-top: 0.5rem;
    }

    .historian-chart-page .chart-sidebar {
        max-height: calc(100vh - 50px - 50px - 1rem) !important;
        overflow-x: visible;
    }

    .historian-chart-page .chart-sidebar-content {
        padding: 0.5rem;
        overflow: visible;
    }

    .historian-chart-page .form-group {
        margin-bottom: 0.5rem;
    }

    .historian-chart-page .form-label {
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
    }

    .historian-chart-page .form-control,
    .historian-chart-page .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        min-height: 30px;
    }

    .historian-chart-page .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .historian-chart-page .card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Very low height - maximize chart area */
@media (max-height: 550px) {
    .historian-chart-page .servitecno-header {
        height: 45px;
        min-height: 45px;
        padding: 0.3rem 0;
    }

    .historian-chart-page .company-logo {
        height: 30px;
    }

    .historian-chart-page .hero-section-historian {
        height: 40px;
        min-height: 40px;
        padding: 0.3rem 0;
    }

    .historian-chart-page .hero-title-historian {
        font-size: 1rem;
    }

    .historian-chart-page .chart-section {
        padding: 0.4rem 0;
    }

    .historian-chart-page .chart-container {
        padding: 0 0.5rem;
    }

    .historian-chart-page .historian-chart-container {
        padding: 0.4rem;
        border-radius: 6px;
    }

    .historian-chart-page .historian-fixed-controls {
        padding: 0.4rem;
        border-radius: 6px;
        margin-top: 0.4rem;
    }

    .historian-chart-page .chart-sidebar {
        max-height: calc(100vh - 45px - 40px - 0.8rem) !important;
        overflow-x: visible;
    }

    .historian-chart-page .chart-sidebar-content {
        padding: 0.4rem;
        overflow: visible;
    }

    .historian-chart-page .form-group {
        margin-bottom: 0.4rem;
    }

    .historian-chart-page .form-label {
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
    }

    .historian-chart-page .form-control,
    .historian-chart-page .form-select {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        min-height: 28px;
    }

    .historian-chart-page .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    .historian-chart-page .card {
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .historian-chart-page .card-body {
        padding: 0.3rem;
    }

}

/* ===== REALTIME CHART PAGE - NO SCROLL LAYOUT ===== */

/* Base layout: 100vh with flexbox, no overflow */
.realtime-chart-page {
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.realtime-chart-page .servitecno-header {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 0.75rem 0;
    overflow: hidden;
}

.realtime-chart-page .company-logo {
    height: 45px;
}

.realtime-chart-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.realtime-chart-page .hero-section-realtime {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 1rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.realtime-chart-page .hero-title-realtime {
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.realtime-chart-page .hero-subtitle-realtime {
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.realtime-chart-page .chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.1rem 0;
    min-height: 0;
    background: var(--background-light);
}

.realtime-chart-page .chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0.4rem;
    min-height: 0;
    overflow: hidden;
}

.realtime-chart-page .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.realtime-chart-page .row {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.realtime-chart-page .col-12 {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    min-height: 0;
}

.realtime-chart-page .realtime-chart-container {
    flex: 1;
    /* Column flex: see .historian-chart-page .historian-chart-container. */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    border: 1px solid var(--border);
    margin: 0;
    overflow-y: hidden;
    /* A new point can add a Y axis and widen ECharts' canvas. Keep that width inside
       this panel; the Series Details grid owns its own horizontal scrollbar. */
    overflow-x: hidden;
}

.realtime-chart-page [id^="chart_"],
.realtime-chart-page [id^="realtime_chart_"],
.realtime-chart-page [id^="split_chart_"] {
    width: 100% !important;
    min-height: 0 !important;
}

.realtime-chart-page .single-chart-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 3px solid #4caf50;
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(76, 175, 80, 0.4),
        0 0 40px rgba(76, 175, 80, 0.2),
        inset 0 0 20px rgba(76, 175, 80, 0.05);
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 8px;
}

.realtime-chart-page .single-chart-controls {
    margin-bottom: 8px;
    padding: 8px 12px;
}

.realtime-chart-page .single-chart-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4caf50, #8bc34a, #4caf50);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

/* The snapshot metadata is useful but should not consume the height of a chart control panel. */
.offline-snapshot-summary {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    min-height: 0;
}

.offline-snapshot-summary-icon {
    font-size: 1.2rem;
}

.offline-snapshot-summary-content {
    min-width: 0;
    font-size: 0.9rem;
}

.offline-snapshot-summary .badge {
    font-size: 0.72rem;
}

.offline-snapshot-summary .btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
}

.realtime-chart-page .split-charts-container {
    display: block;
    width: 100%;
    min-height: 0;
    border: 3px solid #4caf50;
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(76, 175, 80, 0.4),
        0 0 40px rgba(76, 175, 80, 0.2),
        inset 0 0 20px rgba(76, 175, 80, 0.05);
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 1rem;
}

.realtime-chart-page .split-charts-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4caf50, #8bc34a, #4caf50);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.realtime-chart-page .split-chart-item {
    border: 2px solid #4caf50;
    border-radius: 8px;
    box-shadow:
        0 0 15px rgba(76, 175, 80, 0.3),
        inset 0 0 10px rgba(76, 175, 80, 0.03);
    background: rgba(76, 175, 80, 0.02);
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.realtime-chart-page .split-chart-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, #4caf50, #8bc34a, #4caf50);
    border-radius: 10px;
    z-index: -1;
    opacity: 0.2;
    filter: blur(6px);
}

.realtime-chart-page .split-chart-item:last-child {
    margin-bottom: 0;
}

.realtime-chart-page .split-chart-controls {
    background-color: var(--surface);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.75rem;
}

/* Compact view: shrinks split items and condenses the Y-axis controls onto one line,
   so more splits fit in the available height without vertical scrolling. */
.realtime-chart-page .split-chart-item.compact {
    padding: 0.4rem;
    margin-bottom: 0.4rem;
}

.realtime-chart-page .split-chart-item.compact:last-child {
    margin-bottom: 0;
}

.realtime-chart-page .split-chart-controls.compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: var(--surface);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.4rem;
}

.realtime-chart-page .split-chart-controls.compact .split-compact-title {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.realtime-chart-page .split-chart-controls.compact .form-check {
    margin-bottom: 0;
    white-space: nowrap;
}

.realtime-chart-page .split-chart-controls.compact input[type="number"] {
    width: 80px;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    height: auto;
}

.realtime-chart-page .split-chart-wrapper {
    display: block;
    width: 100%;
    min-height: 300px;
}

.realtime-chart-page .chart-sidebar {
    max-height: calc(100vh - 70px - 70px - 2rem) !important;
    overflow-y: auto;
    overflow-x: visible;
}

.realtime-chart-page .chart-sidebar-content {
    padding: 1rem;
    overflow: visible;
}

.realtime-chart-page .form-group {
    margin-bottom: 0.75rem;
    overflow: visible;
    position: relative;
}

.realtime-chart-page .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.realtime-chart-page .card,
.realtime-chart-page .card-body {
    overflow: visible !important;
}

.realtime-chart-page .filterable-dropdown,
.realtime-chart-page .dropdown-container {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.realtime-chart-page .dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
    display: block !important;
}

.realtime-chart-page .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.realtime-chart-page .dropdown-items {
    max-height: 250px;
    overflow-y: auto;
    display: block !important;
}

.realtime-chart-page .dropdown-item-container {
    display: block !important;
}

.realtime-chart-page .dropdown-item {
    display: flex !important;
    visibility: visible !important;
}

@media (max-height: 800px) {
    .realtime-chart-page .servitecno-header {
        height: 60px;
        min-height: 60px;
        padding: 0.5rem 0;
    }

    .realtime-chart-page .company-logo {
        height: 40px;
    }

    .realtime-chart-page .hero-section-realtime {
        height: 60px;
        min-height: 60px;
        padding: 0.75rem 0;
    }

    .realtime-chart-page .hero-title-realtime {
        font-size: 1.2rem;
    }

    .realtime-chart-page .hero-subtitle-realtime {
        font-size: 0.8rem;
    }

    .realtime-chart-page .chart-section {
        padding: 0.75rem 0;
    }

    .realtime-chart-page .realtime-chart-container {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .realtime-chart-page .chart-sidebar {
        max-height: calc(100vh - 60px - 60px - 1.5rem) !important;
        overflow-x: visible;
    }

    .realtime-chart-page .chart-sidebar-content {
        padding: 0.75rem;
        overflow: visible;
    }

    .realtime-chart-page .form-group {
        margin-bottom: 0.6rem;
    }

    .realtime-chart-page .form-label {
        font-size: 0.85rem;
    }

    .realtime-chart-page .form-control,
    .realtime-chart-page .form-select {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .realtime-chart-page .btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
}

@media (max-height: 650px) {
    .realtime-chart-page .servitecno-header {
        height: 50px;
        min-height: 50px;
        padding: 0.4rem 0;
    }

    .realtime-chart-page .company-logo {
        height: 35px;
    }

    .realtime-chart-page .hero-section-realtime {
        height: 50px;
        min-height: 50px;
        padding: 0.5rem 0;
    }

    .realtime-chart-page .hero-title-realtime {
        font-size: 1.1rem;
    }

    .realtime-chart-page .hero-subtitle-realtime {
        display: none;
    }

    .realtime-chart-page .chart-section {
        padding: 0.5rem 0;
    }

    .realtime-chart-page .chart-container {
        padding: 0 0.75rem;
    }

    .realtime-chart-page .realtime-chart-container {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .realtime-chart-page .chart-sidebar {
        max-height: calc(100vh - 50px - 50px - 1rem) !important;
        overflow-x: visible;
    }

    .realtime-chart-page .chart-sidebar-content {
        padding: 0.5rem;
        overflow: visible;
    }

    .realtime-chart-page .form-group {
        margin-bottom: 0.5rem;
    }

    .realtime-chart-page .form-label {
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
    }

    .realtime-chart-page .form-control,
    .realtime-chart-page .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        min-height: 30px;
    }

    .realtime-chart-page .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .realtime-chart-page .card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-height: 550px) {
    .realtime-chart-page .servitecno-header {
        height: 45px;
        min-height: 45px;
        padding: 0.3rem 0;
    }

    .realtime-chart-page .company-logo {
        height: 30px;
    }

    .realtime-chart-page .hero-section-realtime {
        height: 40px;
        min-height: 40px;
        padding: 0.3rem 0;
    }

    .realtime-chart-page .hero-title-realtime {
        font-size: 1rem;
    }

    .realtime-chart-page .chart-section {
        padding: 0.4rem 0;
    }

    .realtime-chart-page .chart-container {
        padding: 0 0.5rem;
    }

    .realtime-chart-page .realtime-chart-container {
        padding: 0.4rem;
        border-radius: 6px;
    }

    .realtime-chart-page .chart-sidebar {
        max-height: calc(100vh - 45px - 40px - 0.8rem) !important;
        overflow-x: visible;
    }

    .realtime-chart-page .chart-sidebar-content {
        padding: 0.4rem;
        overflow: visible;
    }

    .realtime-chart-page .form-group {
        margin-bottom: 0.4rem;
    }

    .realtime-chart-page .form-label {
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
    }

    .realtime-chart-page .form-control,
    .realtime-chart-page .form-select {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        min-height: 28px;
    }

    .realtime-chart-page .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    .realtime-chart-page .card {
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .realtime-chart-page .card-body {
        padding: 0.3rem;
    }


}

/* ===== DATALOGGER CHART PAGE - NO SCROLL LAYOUT ===== */

.datalogger-chart-page {
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.datalogger-chart-page .servitecno-header {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 0.75rem 0;
    overflow: hidden;
}

.datalogger-chart-page .company-logo {
    height: 45px;
}

.datalogger-chart-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.datalogger-chart-page .hero-section-datalogger {
    flex-shrink: 0;
    height: 70px;
    min-height: 70px;
    padding: 1rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.datalogger-chart-page .hero-title-datalogger {
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.datalogger-chart-page .hero-subtitle-datalogger {
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.datalogger-chart-page .chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.1rem 0;
    min-height: 0;
    background: var(--background-light);
}

.datalogger-chart-page .chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0.4rem;
    min-height: 0;
    overflow: hidden;
}

.datalogger-chart-page .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.datalogger-chart-page .row {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.datalogger-chart-page .col-12 {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    min-height: 0;
}

.datalogger-chart-page .datalogger-chart-container {
    flex: 1;
    /* Column flex: see .historian-chart-page .historian-chart-container. */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    border: 1px solid var(--border);
    margin: 0;
    overflow-y: hidden;
    overflow-x: visible;
}

.datalogger-chart-page [id^="chart_"],
.datalogger-chart-page [id^="datalogger_chart_"],
.datalogger-chart-page [id^="split_chart_"] {
    width: 100% !important;
    min-height: 0 !important;
}

.datalogger-chart-page .single-chart-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 3px solid #ff9800;
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(255, 152, 0, 0.4),
        0 0 40px rgba(255, 152, 0, 0.2),
        inset 0 0 20px rgba(255, 152, 0, 0.05);
    background: linear-gradient(145deg, rgba(255, 152, 0, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 8px;
}

.datalogger-chart-page .single-chart-controls {
    margin-bottom: 8px;
    padding: 8px 12px;
}

.datalogger-chart-page .single-chart-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff9800, #ffc107, #ff9800);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.datalogger-chart-page .split-charts-container {
    display: block;
    width: 100%;
    min-height: 0;
    border: 3px solid #ff9800;
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(255, 152, 0, 0.4),
        0 0 40px rgba(255, 152, 0, 0.2),
        inset 0 0 20px rgba(255, 152, 0, 0.05);
    background: linear-gradient(145deg, rgba(255, 152, 0, 0.03) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    padding: 1rem;
}

.datalogger-chart-page .split-charts-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff9800, #ffc107, #ff9800);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.datalogger-chart-page .split-chart-item {
    border: 2px solid #ff9800;
    border-radius: 8px;
    box-shadow:
        0 0 15px rgba(255, 152, 0, 0.3),
        inset 0 0 10px rgba(255, 152, 0, 0.03);
    background: rgba(255, 152, 0, 0.02);
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.datalogger-chart-page .split-chart-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, #ff9800, #ffc107, #ff9800);
    border-radius: 10px;
    z-index: -1;
    opacity: 0.2;
    filter: blur(6px);
}

.datalogger-chart-page .split-chart-item:last-child {
    margin-bottom: 0;
}

.datalogger-chart-page .split-chart-controls {
    background-color: var(--surface);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.75rem;
}

/* Compact view: shrinks split items and condenses the Y-axis controls onto one line,
   so more splits fit in the available height without vertical scrolling. */
.datalogger-chart-page .split-chart-item.compact {
    padding: 0.4rem;
    margin-bottom: 0.4rem;
}

.datalogger-chart-page .split-chart-item.compact:last-child {
    margin-bottom: 0;
}

.datalogger-chart-page .split-chart-controls.compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: var(--surface);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #6c757d;
    margin-bottom: 0.4rem;
}

.datalogger-chart-page .split-chart-controls.compact .split-compact-title {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.datalogger-chart-page .split-chart-controls.compact .form-check {
    margin-bottom: 0;
    white-space: nowrap;
}

.datalogger-chart-page .split-chart-controls.compact input[type="number"] {
    width: 80px;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    height: auto;
}

.datalogger-chart-page .split-chart-wrapper {
    display: block;
    width: 100%;
    min-height: 300px;
}

.datalogger-chart-page .chart-sidebar {
    max-height: calc(100vh - 70px - 70px - 2rem) !important;
    overflow-y: auto;
    overflow-x: visible;
}

/* In split mode, only the chart list scrolls. The drop zone stays visible below it so a user can
   always create a new split, even when the existing charts fill the available page height. */
.historian-chart-page .split-charts-container,
.realtime-chart-page .split-charts-container,
.datalogger-chart-page .split-charts-container {
    /* A zero flex basis is essential here: `auto` starts from the combined height of every
       chart, which makes the flex item grow past the viewport before overflow can apply. */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.historian-chart-page .split-chart-list,
.realtime-chart-page .split-chart-list,
.datalogger-chart-page .split-chart-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Shared split cursor: a precise, instrument-like ruler spanning the independently rendered
   charts of the split list (Historian, Data Logger and Real Time). */
.historian-chart-page .split-chart-list,
.realtime-chart-page .split-chart-list,
.datalogger-chart-page .split-chart-list {
    position: relative;
}

.historian-split-cursor-line {
    position: absolute;
    top: 0;
    z-index: 8;
    display: none;
    width: 2px;
    transform: translateX(-1px);
    pointer-events: none;
    background: #ef3e3e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 8px rgba(239, 62, 62, 0.55);
}

.historian-split-cursor-handle {
    position: absolute;
    top: 0;
    z-index: 9;
    display: none;
    width: 14px;
    margin-left: -7px;
    padding: 0;
    cursor: ew-resize;
    touch-action: none;
    border: 0;
    outline: 0;
    background: transparent;
}

.historian-split-cursor-handle:focus-visible {
    outline: 2px solid #ef3e3e;
    outline-offset: 2px;
}

.historian-split-cursor-tooltip {
    position: fixed;
    z-index: 1080;
    display: none;
    min-width: 13rem;
    max-width: min(28rem, calc(100vw - 24px));
    padding: 0.55rem 0.7rem;
    color: #e9fbff;
    background: rgba(9, 30, 38, 0.96);
    border: 1px solid rgba(0, 188, 212, 0.85);
    border-radius: 5px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.35;
    pointer-events: none;
}

.historian-split-cursor-time {
    margin-bottom: 0.36rem;
    padding-bottom: 0.3rem;
    color: var(--historian-split-cursor-header-color, #7ee7f7);
    border-bottom: 1px solid var(--historian-split-cursor-border-color, rgba(126, 231, 247, 0.28));
    font-weight: 700;
    letter-spacing: 0.015em;
}

.historian-split-cursor-row {
    display: grid;
    grid-template-columns: 0.55rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.08rem 0;
}

.historian-split-cursor-swatch {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.historian-split-cursor-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historian-split-cursor-value {
    color: var(--historian-split-cursor-value-color, #ffffff);
    font-weight: 700;
}

.historian-chart-page .split-new-zone,
.realtime-chart-page .split-new-zone,
.datalogger-chart-page .split-new-zone {
    flex: 0 0 auto;
    margin: 0.75rem 0 0;
    background: var(--surface);
    position: relative;
    z-index: 1;
}

/* Hide sidebar scrollbar while keeping vertical scroll behavior */
.historian-chart-page .chart-sidebar,
.realtime-chart-page .chart-sidebar,
.datalogger-chart-page .chart-sidebar,
.historian-chart-page .split-charts-container,
.realtime-chart-page .split-charts-container,
.datalogger-chart-page .split-charts-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.historian-chart-page .chart-sidebar::-webkit-scrollbar,
.realtime-chart-page .chart-sidebar::-webkit-scrollbar,
.datalogger-chart-page .chart-sidebar::-webkit-scrollbar,
.historian-chart-page .split-charts-container::-webkit-scrollbar,
.realtime-chart-page .split-charts-container::-webkit-scrollbar,
.datalogger-chart-page .split-charts-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.datalogger-chart-page .chart-sidebar-content {
    padding: 1rem;
    overflow: visible;
}

.datalogger-chart-page .form-group {
    margin-bottom: 0.75rem;
    overflow: visible;
    position: relative;
}

.datalogger-chart-page .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.datalogger-chart-page .card,
.datalogger-chart-page .card-body {
    overflow: visible !important;
}

.datalogger-chart-page .filterable-dropdown,
.datalogger-chart-page .dropdown-container {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.datalogger-chart-page .filterable-dropdown.open {
    z-index: 30000 !important;
}

.datalogger-chart-page .dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
    display: block !important;
}

.datalogger-chart-page .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.datalogger-chart-page .dropdown-items {
    max-height: 250px;
    overflow-y: auto;
    display: block !important;
}

.datalogger-chart-page .dropdown-item-container {
    display: block !important;
}

.datalogger-chart-page .dropdown-item {
    display: flex !important;
    visibility: visible !important;
}

@media (max-height: 800px) {
    .datalogger-chart-page .servitecno-header {
        height: 60px;
        min-height: 60px;
        padding: 0.5rem 0;
    }

    .datalogger-chart-page .company-logo {
        height: 40px;
    }

    .datalogger-chart-page .hero-section-datalogger {
        height: 60px;
        min-height: 60px;
        padding: 0.75rem 0;
    }

    .datalogger-chart-page .hero-title-datalogger {
        font-size: 1.2rem;
    }

    .datalogger-chart-page .hero-subtitle-datalogger {
        font-size: 0.8rem;
    }

    .datalogger-chart-page .chart-section {
        padding: 0.75rem 0;
    }

    .datalogger-chart-page .datalogger-chart-container {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .datalogger-chart-page .chart-sidebar {
        max-height: calc(100vh - 60px - 60px - 1.5rem) !important;
        overflow-x: visible;
    }

    .datalogger-chart-page .chart-sidebar-content {
        padding: 0.75rem;
        overflow: visible;
    }

    .datalogger-chart-page .form-group {
        margin-bottom: 0.6rem;
    }

    .datalogger-chart-page .form-label {
        font-size: 0.85rem;
    }

    .datalogger-chart-page .form-control,
    .datalogger-chart-page .form-select {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .datalogger-chart-page .btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
}

@media (max-height: 650px) {
    .datalogger-chart-page .servitecno-header {
        height: 50px;
        min-height: 50px;
        padding: 0.4rem 0;
    }

    .datalogger-chart-page .company-logo {
        height: 35px;
    }

    .datalogger-chart-page .hero-section-datalogger {
        height: 50px;
        min-height: 50px;
        padding: 0.5rem 0;
    }

    .datalogger-chart-page .hero-title-datalogger {
        font-size: 1.1rem;
    }

    .datalogger-chart-page .hero-subtitle-datalogger {
        display: none;
    }

    .datalogger-chart-page .chart-section {
        padding: 0.5rem 0;
    }

    .datalogger-chart-page .chart-container {
        padding: 0 0.75rem;
    }

    .datalogger-chart-page .datalogger-chart-container {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .datalogger-chart-page .chart-sidebar {
        max-height: calc(100vh - 50px - 50px - 1rem) !important;
        overflow-x: visible;
    }

    .datalogger-chart-page .chart-sidebar-content {
        padding: 0.5rem;
        overflow: visible;
    }

    .datalogger-chart-page .form-group {
        margin-bottom: 0.5rem;
    }

    .datalogger-chart-page .form-label {
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
    }

    .datalogger-chart-page .form-control,
    .datalogger-chart-page .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        min-height: 30px;
    }

    .datalogger-chart-page .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .datalogger-chart-page .card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-height: 550px) {
    .datalogger-chart-page .servitecno-header {
        height: 45px;
        min-height: 45px;
        padding: 0.3rem 0;
    }

    .datalogger-chart-page .company-logo {
        height: 30px;
    }

    .datalogger-chart-page .hero-section-datalogger {
        height: 40px;
        min-height: 40px;
        padding: 0.3rem 0;
    }

    .datalogger-chart-page .hero-title-datalogger {
        font-size: 1rem;
    }

    .datalogger-chart-page .chart-section {
        padding: 0.4rem 0;
    }

    .datalogger-chart-page .chart-container {
        padding: 0 0.5rem;
    }

    .datalogger-chart-page .datalogger-chart-container {
        padding: 0.4rem;
        border-radius: 6px;
    }

    .datalogger-chart-page .chart-sidebar {
        max-height: calc(100vh - 45px - 40px - 0.8rem) !important;
        overflow-x: visible;
    }

    .datalogger-chart-page .chart-sidebar-content {
        padding: 0.4rem;
        overflow: visible;
    }

    .datalogger-chart-page .form-group {
        margin-bottom: 0.4rem;
    }

    .datalogger-chart-page .form-label {
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
    }

    .datalogger-chart-page .form-control,
    .datalogger-chart-page .form-select {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        min-height: 28px;
    }

    .datalogger-chart-page .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    .datalogger-chart-page .card {
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .datalogger-chart-page .card-body {
        padding: 0.3rem;
    }

}

    /* Global compact overrides for all chart pages */
    .historian-chart-page .chart-section,
    .realtime-chart-page .chart-section,
    .datalogger-chart-page .chart-section {
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
    }

    .historian-chart-page .chart-container,
    .realtime-chart-page .chart-container,
    .datalogger-chart-page .chart-container {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .historian-chart-page .historian-chart-container,
    .realtime-chart-page .realtime-chart-container,
    .datalogger-chart-page .datalogger-chart-container {
        padding: 0.5rem !important;
    }

    .historian-chart-page .single-chart-container,
    .realtime-chart-page .single-chart-container,
    .datalogger-chart-page .single-chart-container {
        padding: 8px !important;
    }

    .historian-chart-page .single-chart-controls,
    .realtime-chart-page .single-chart-controls,
    .datalogger-chart-page .single-chart-controls {
        margin-bottom: 8px !important;
        padding: 8px 12px !important;
    }


/* ===== HOME PAGE - NO SCROLL COMPACT LAYOUT ===== */

/* Compact header */
.home-page .servitecno-header {
    padding: 0.75rem 0;
}

.home-page .company-logo {
    height: 72px;
}

/* Compact hero */
.home-page .hero-section {
    padding: 1rem 0 0.5rem 0;
}

.home-page .hero-title {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

/* Compact solutions section */
.home-page .solutions-section {
    padding: 0.75rem 0 1rem 0;
}

.home-page .solutions-grid {
    gap: 1rem;
}

/* Cards sized to fit viewport height without scrollbar.
   Formula: (100vh - overhead) / 2 where overhead accounts for
   header + hero + paddings (~220px). Clamped min 160px, max 360px. */
.home-page .solution-card {
    height: clamp(160px, calc((100vh - 220px) / 2), 360px);
}

@media (max-width: 640.98px) {
    .home-page .hero-title {
        font-size: 1.3rem;
    }

    .home-page .solutions-grid {
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    /* On mobile cards stack 5 rows - use 1/5 of available height */
    .home-page .solution-card {
        height: clamp(120px, calc((100vh - 220px) / 5), 220px);
    }
}

/* ===== SERIES DETAILS GRID (below chart + timeline bar) ===== */

/* Wraps the Highlight Areas grid and the Series Details grid so the chart can reserve the room of
   both with a single measurement. Flex (not block) so the grids' own top margins stay inside it. */
.chart-grids-dock {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* Takes the room the chart frame has left under the chart. With one or two grids the dock fits and
   nothing scrolls; with three the chart is already at its minimum height, so the dock scrolls here
   instead of being clipped (Series Details would otherwise disappear below the frame). The dock
   inside keeps its natural height, which is what the chart reserves room for. */
.chart-grids-viewport {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Segmented switch above the grids (ChartGridsTabs.razor): All / Highlight / Alarms / Series. */
.chart-grids-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 0 auto;
    padding: 3px;
    background: var(--background-light);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-x: auto;
}

.chart-grids-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.chart-grids-tab:hover {
    color: var(--servitecno-green);
}

.chart-grids-tab.active {
    background: var(--servitecno-green);
    color: #fff;
}

.chart-grids-tab:focus-visible {
    outline: 2px solid var(--servitecno-green);
    outline-offset: 1px;
}

/* The chosen grid alone. Hidden, not removed: each grid keeps its filters and selection. */
.chart-grids-dock[data-tab="highlight"] > .alarms-grid-wrapper,
.chart-grids-dock[data-tab="highlight"] > .series-grid-wrapper,
.chart-grids-dock[data-tab="alarms"] > .highlight-grid-wrapper,
.chart-grids-dock[data-tab="alarms"] > .series-grid-wrapper:not(.alarms-grid-wrapper),
.chart-grids-dock[data-tab="series"] > .highlight-grid-wrapper,
.chart-grids-dock[data-tab="series"] > .alarms-grid-wrapper {
    display: none;
}

/* Text size buttons: the grid that carries them may be the hidden one, so the visible grid shows its own. */
.chart-grids-dock:not([data-tab="all"]) .series-grid-wrapper .series-grid-size {
    display: inline-flex;
}

.series-grid-wrapper {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Same look as the Series Details grid, for the Highlight Areas grid above it. */
.highlight-grid-wrapper {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Splitter on the grid's top edge: drag to resize the grid (wwwroot/js/seriesGridResize.js). */
.series-grid-resizer {
    position: relative;
    flex-shrink: 0;
    height: 8px;
    cursor: ns-resize;
    touch-action: none;
    background: transparent;
    transition: background var(--transition-fast);
}

/* Larger grab area than the 8px bar: the handle is thin, so extend it over the neighbouring edges. */
.series-grid-resizer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    bottom: -6px;
}

.series-grid-resizer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 3px;
    width: 36px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--border);
}

.series-grid-resizer:hover,
.series-grid-resizer:focus-visible,
.series-grid-resizer.resizing {
    background: rgba(76, 175, 80, 0.12);
    outline: none;
}

.series-grid-resizer:hover::after,
.series-grid-resizer:focus-visible::after,
.series-grid-resizer.resizing::after {
    background: var(--servitecno-green);
}

/* Follows the pointer while dragging; the new height is applied on release. */
.series-grid-resize-guide {
    position: fixed;
    height: 0;
    border-top: 2px dashed var(--servitecno-green, #4caf50);
    pointer-events: none;
    z-index: 3000;
}

.series-grid-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.series-grid-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 2px 4px;
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.series-grid-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .series-grid-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

.series-grid-chevron {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.series-grid-chevron.expanded {
    transform: rotate(90deg);
}

.series-grid-title {
    letter-spacing: 0.01em;
}

.series-grid-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--servitecno-green);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.series-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.series-grid-visible-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.series-grid-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
    display: inline-block;
}

/* Explicit height controls next to the drag handle: taller / shorter / default. */
.series-grid-size {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.series-grid-size-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-right: 2px;
}

.series-grid-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.series-grid-size-btn:hover {
    background: var(--background-light);
    border-color: var(--servitecno-green);
}

.series-grid-search {
    position: relative;
    width: 220px;
}

.series-grid-search .form-control {
    font-size: 0.75rem;
    padding: 3px 24px 3px 8px;
    height: 26px;
}

.series-grid-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.series-grid-search-clear:hover {
    color: var(--text-dark);
}

.series-grid-empty,
.series-grid-nomatch {
    padding: 14px 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
}

/* One table for all areas, styled as the Series Details table (.series-grid-table): a header row per
   area (tinted with the area's own colour, inline) with that area's series rows under it. */
/* The rows are tinted with the area's colour, so the numeric cells must not paint their own tint
   over it the way they do in Series Details. */
.series-grid-table.highlight-areas-table tbody td.col-num,
.series-grid-table.highlight-areas-table tbody tr:hover td.col-num {
    background: transparent;
}

.series-grid-table tbody tr.highlight-area-group-row td {
    padding-top: 0;
    padding-bottom: 0;
}

.highlight-area-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20px;
}

.highlight-area-range {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 16px;
    font-size: calc(0.74rem * var(--series-grid-scale, 1));
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.highlight-area-range-label {
    margin-right: 4px;
    font-size: calc(0.66rem * var(--series-grid-scale, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.highlight-area-toggle {
    max-width: 100%;
}

.highlight-area-meta {
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
    font-weight: 500;
    color: var(--text-secondary);
}

/* The series name sits on the same line as its colour dot (Series Details' name is a block). */
.highlight-areas-table .series-grid-name {
    display: inline-block;
    vertical-align: middle;
}

/* The text size buttons exist once: while the Highlight Areas grid is open (above Series Details in
   the dock) its toolbar carries them and Series Details hides its own. */
.chart-grids-dock .highlight-grid-wrapper:has(.series-grid-scroll) ~ .series-grid-wrapper .series-grid-size {
    display: none;
}

/* The user's calculated KPIs (KPI page) are columns like the built-in ones; their headers carry the
   expression as a tooltip, which the dotted underline hints at. */
.highlight-areas-table th.highlight-kpi-header {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.highlight-series-dot {
    display: inline-block;
    width: calc(10px * var(--series-grid-scale, 1));
    height: calc(10px * var(--series-grid-scale, 1));
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: baseline;
}

.series-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(260px, 28vh);
    overflow-y: auto;
    /* Shown whenever the columns do not fit, thick enough to be seen and grabbed (see below). */
    overflow-x: auto;
    border-top: 1px solid var(--border);
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.06);
}

.series-grid-scroll::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

.series-grid-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
}

.series-grid-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.series-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}

[data-theme="dark"] .series-grid-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .series-grid-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .series-grid-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
}

[data-theme="dark"] .series-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
    background-clip: padding-box;
}

.series-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* --series-grid-scale (1 = normal) is set on the wrapper by the Text size buttons
       (wwwroot/js/seriesGridResize.js). Every size in the cells below goes through it, so the
       text, the fields and the row height grow and shrink together. */
    font-size: calc(0.74rem * var(--series-grid-scale, 1));
    color: var(--text-dark);
}

.series-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--background-light);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: calc(0.68rem * var(--series-grid-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: calc(6px * var(--series-grid-scale, 1)) calc(8px * var(--series-grid-scale, 1));
    border-bottom: 1px solid var(--border);
    text-align: left;
    user-select: none;
}

.series-grid-table thead th.sortable {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.series-grid-table thead th.sortable:hover {
    color: var(--text-dark);
}

.series-grid-table thead th.sorted {
    color: var(--servitecno-green);
}

.series-grid-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.55rem;
}

.series-grid-table tbody td {
    padding: calc(4px * var(--series-grid-scale, 1)) calc(8px * var(--series-grid-scale, 1));
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.series-grid-table tbody tr:last-child td {
    border-bottom: none;
}

.series-grid-table tbody tr {
    transition: background var(--transition-fast);
}

.series-grid-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.035);
}

[data-theme="dark"] .series-grid-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.series-grid-table tbody tr.series-row-hidden {
    opacity: 0.5;
}

.series-grid-table tbody tr.series-row-hidden .series-grid-name {
    text-decoration: line-through;
}

/* Row selection: picks the series the chart's Y axis is scaled to (replaces the legend click). */
.series-grid-table tbody tr.series-row-selectable {
    cursor: pointer;
}

.series-grid-table tbody tr.series-row-selected {
    background: rgba(0, 150, 57, 0.1);
    box-shadow: inset 3px 0 0 var(--servitecno-green);
}

.series-grid-table tbody tr.series-row-selected:hover {
    background: rgba(0, 150, 57, 0.15);
}

.series-grid-table tbody tr.series-row-selected .series-grid-name {
    color: var(--servitecno-green);
}

[data-theme="dark"] .series-grid-table tbody tr.series-row-selected {
    background: rgba(76, 175, 80, 0.16);
}

[data-theme="dark"] .series-grid-table tbody tr.series-row-selected:hover {
    background: rgba(76, 175, 80, 0.22);
}

.series-grid-axis-marker {
    display: inline-block;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--servitecno-green);
    color: #fff;
    font-size: calc(0.6rem * var(--series-grid-scale, 1));
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 1px;
}

.series-grid-table .col-desc {
    max-width: calc(260px * var(--series-grid-scale, 1));
}

.series-grid-desc-empty {
    color: var(--text-secondary);
    opacity: 0.6;
}

.series-grid-table .col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The computed statistics (Min/Max/Avg/Last) get their own tint, accent font color and a
   divider before Min, so the read-only results of the window read at a glance apart from the
   raw Points count and the editable configuration columns. One set of variables per theme -
   change these to restyle the whole block. */
:root {
    --series-grid-computed-bg: #eef2f5;
    --series-grid-computed-bg-hover: #e4eaef;
    --series-grid-stat-bg: #e4eefb;
    --series-grid-stat-bg-hover: #d6e7f8;
    --series-grid-stat-text: #205a8c;
}

[data-theme="dark"] {
    --series-grid-computed-bg: #26303a;
    --series-grid-computed-bg-hover: #2e3a46;
    --series-grid-stat-bg: #1c3348;
    --series-grid-stat-bg-hover: #234058;
    --series-grid-stat-text: #7fb8ee;
}

.series-grid-table thead th.col-num,
.series-grid-table tbody td.col-num {
    background: var(--series-grid-computed-bg);
}

.series-grid-table tbody tr:hover td.col-num {
    background: var(--series-grid-computed-bg-hover);
}

.series-grid-table thead th.col-stat,
.series-grid-table tbody td.col-stat {
    background: var(--series-grid-stat-bg);
}

.series-grid-table tbody td.col-stat {
    color: var(--series-grid-stat-text);
    font-weight: 600;
}

.series-grid-table tbody tr:hover td.col-stat {
    background: var(--series-grid-stat-bg-hover);
}

.series-grid-table thead th.col-stat-first,
.series-grid-table tbody td.col-stat-first {
    border-left: 2px solid var(--series-grid-stat-text);
}

/* The selected row keeps its own accent: it must stay readable across the whole row. */
.series-grid-table tbody tr.series-row-selected td.col-num {
    background: transparent;
}

.series-grid-table tbody tr.series-row-selected td.col-stat {
    color: var(--series-grid-stat-text);
}

.series-grid-scope {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--series-grid-computed-bg);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.series-grid-scope.is-zoomed {
    border-color: var(--servitecno-green);
    color: var(--servitecno-green);
}

.series-grid-table .col-visible,
.series-grid-table .col-auto,
.series-grid-table .col-axisvis,
.series-grid-table .col-split,
.series-grid-table .col-actions {
    text-align: center;
}

/* ===== Alarms & Events grid (reuses .series-grid-* look; adds type toggle, quality badge) ===== */
.alarms-grid-typetoggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.alarms-grid-type-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
    font-weight: 600;
    padding: calc(4px * var(--series-grid-scale, 1)) calc(10px * var(--series-grid-scale, 1));
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.alarms-grid-type-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}

.alarms-grid-type-btn:hover {
    color: var(--text-dark);
    background: var(--background-light);
}

.alarms-grid-type-btn.active {
    background: var(--servitecno-green);
    color: #fff;
}

.alarms-grid-reload-btn {
    white-space: nowrap;
}

.alarms-grid-filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
    font-weight: 600;
    padding: calc(4px * var(--series-grid-scale, 1)) calc(10px * var(--series-grid-scale, 1));
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.alarms-grid-filter-btn:hover {
    color: var(--text-dark);
    background: var(--background-light);
}

.alarms-grid-filter-btn.active {
    background: var(--servitecno-green);
    color: #fff;
    border-color: var(--servitecno-green);
}

.alarms-events-table .alarms-grid-filter-header {
    vertical-align: top;
}

.alarms-grid-filter-header label {
    display: block;
    margin-bottom: 4px;
}

.alarms-grid-header-search {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.alarms-grid-header-search .form-control {
    min-width: 0;
    height: auto;
    padding: 3px 6px;
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
    text-transform: none;
    letter-spacing: normal;
}

.alarms-grid-header-search .series-grid-search-clear {
    position: static;
    transform: none;
    flex-shrink: 0;
}

.alarms-grid-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
}

.alarms-grid-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--servitecno-green);
    border-radius: 50%;
    display: inline-block;
    animation: alarms-grid-spin 0.8s linear infinite;
}

@keyframes alarms-grid-spin {
    to { transform: rotate(360deg); }
}

.alarms-grid-error {
    color: var(--danger, #dc3545);
}

.alarms-events-table .col-ae-desc {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alarms-events-table .col-ae-source {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alarms-events-table .col-ae-sev {
    text-align: right;
}

.alarms-grid-quality {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: calc(0.64rem * var(--series-grid-scale, 1));
    font-weight: 600;
    line-height: 1.4;
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.alarms-grid-quality.q-3 {
    background: rgba(40, 167, 69, 0.15);
    color: #1e7e34;
    border-color: rgba(40, 167, 69, 0.35);
}

.alarms-grid-quality.q-1,
.alarms-grid-quality.q-2 {
    background: rgba(255, 193, 7, 0.18);
    color: #a07800;
    border-color: rgba(255, 193, 7, 0.4);
}

.alarms-grid-quality.q-0 {
    background: rgba(220, 53, 69, 0.15);
    color: #b02a37;
    border-color: rgba(220, 53, 69, 0.35);
}

[data-theme="dark"] .alarms-grid-quality.q-3 {
    color: #5cd27e;
}

[data-theme="dark"] .alarms-grid-quality.q-1,
[data-theme="dark"] .alarms-grid-quality.q-2 {
    color: #e6c44d;
}

[data-theme="dark"] .alarms-grid-quality.q-0 {
    color: #f28b94;
}


.series-grid-color-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.series-grid-color {
    width: calc(28px * var(--series-grid-scale, 1));
    height: calc(20px * var(--series-grid-scale, 1));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.series-grid-dice {
    background: transparent;
    border: none;
    padding: 0 2px;
    font-size: calc(0.75rem * var(--series-grid-scale, 1));
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.series-grid-dice:hover {
    opacity: 1;
}

.series-grid-check {
    cursor: pointer;
    margin: 0;
}

.series-grid-name {
    display: block;
    max-width: calc(220px * var(--series-grid-scale, 1));
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.series-grid-desc {
    display: block;
    max-width: calc(220px * var(--series-grid-scale, 1));
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: calc(0.66rem * var(--series-grid-scale, 1));
    color: var(--text-secondary);
    font-weight: 400;
}

/* Give names and descriptions the flexible space; other columns keep their content width. */
.series-details-table .col-name,
.series-details-table .col-desc {
    width: 30%;
    min-width: calc(180px * var(--series-grid-scale, 1));
    max-width: none;
}

.series-details-table thead th:not(.col-name):not(.col-desc) {
    width: 1%;
}

.series-details-table .series-grid-name,
.series-details-table .series-grid-desc {
    max-width: none;
}

.series-grid-sticky .series-details-table :is(th, td):is(.col-color, .col-visible, .col-name, .col-desc) {
    position: sticky;
    z-index: 2;
}

.series-grid-sticky .series-details-table :is(th, td).col-color { left: var(--series-sticky-0, 0px); }
.series-grid-sticky .series-details-table :is(th, td).col-visible { left: var(--series-sticky-1, 0px); }
.series-grid-sticky .series-details-table :is(th, td).col-name { left: var(--series-sticky-2, 0px); }
.series-grid-sticky .series-details-table :is(th, td).col-desc { left: var(--series-sticky-3, 0px); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.12); }

.series-grid-sticky .series-details-table thead th:is(.col-color, .col-visible, .col-name, .col-desc) {
    z-index: 4;
    background: var(--background-light);
}

.series-grid-sticky .series-details-table tbody td:is(.col-color, .col-visible, .col-name, .col-desc) {
    background: var(--surface);
}

.series-grid-sticky .series-details-table tbody tr:hover td:is(.col-color, .col-visible, .col-name, .col-desc) {
    background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.035)), var(--surface);
}

.series-grid-sticky .series-details-table tbody tr.series-row-selected td:is(.col-color, .col-visible, .col-name, .col-desc) {
    background: linear-gradient(rgba(0, 150, 57, 0.1), rgba(0, 150, 57, 0.1)), var(--surface);
}

[data-theme="dark"] .series-grid-sticky .series-details-table tbody tr:hover td:is(.col-color, .col-visible, .col-name, .col-desc) {
    background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255,255, 0.07)), var(--surface);
}

[data-theme="dark"] .series-grid-sticky .series-details-table tbody tr.series-row-selected td:is(.col-color, .col-visible, .col-name, .col-desc) {
    background: linear-gradient(rgba(76, 175, 80, 0.16), rgba(76, 175, 80, 0.16)), var(--surface);
}

.series-grid-select {
    font-size: calc(0.7rem * var(--series-grid-scale, 1));
    padding: calc(2px * var(--series-grid-scale, 1)) calc(18px * var(--series-grid-scale, 1)) calc(2px * var(--series-grid-scale, 1)) calc(6px * var(--series-grid-scale, 1));
    height: calc(24px * var(--series-grid-scale, 1));
    min-width: calc(96px * var(--series-grid-scale, 1));
    background-position: right 4px center;
    background-size: calc(16px * var(--series-grid-scale, 1)) calc(12px * var(--series-grid-scale, 1));
}

.series-grid-number {
    font-size: calc(0.7rem * var(--series-grid-scale, 1));
    padding: calc(2px * var(--series-grid-scale, 1)) calc(6px * var(--series-grid-scale, 1));
    height: calc(24px * var(--series-grid-scale, 1));
    width: calc(78px * var(--series-grid-scale, 1));
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.series-grid-number:disabled {
    opacity: 0.45;
}

.series-grid-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--background-light);
    border: 1px solid var(--border);
    font-size: calc(0.66rem * var(--series-grid-scale, 1));
    font-weight: 600;
}

.series-grid-remove {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: calc(0.75rem * var(--series-grid-scale, 1));
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.series-grid-remove:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

/* Custom series (calculated from other series, see CustomSeriesDialogComponent): an ƒ before the name,
   a warning when a series they need is missing, and a pencil next to the remove button. */
.series-grid-custom-marker {
    display: inline-block;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--servitecno-green);
    color: var(--text-white);
    font-style: italic;
    font-weight: 700;
    font-size: calc(0.72rem * var(--series-grid-scale, 1));
    line-height: 1.35;
    vertical-align: middle;
}

/* The clock distinguishes scheduled series while sharing the custom-series badge. */
.series-grid-scheduled-marker {
    font-style: normal;
}

.series-grid-custom-warning {
    margin-left: 5px;
    color: #b45309;
    cursor: help;
}

.series-grid-edit {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: calc(0.8rem * var(--series-grid-scale, 1));
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.series-grid-edit:hover {
    background: var(--background-light);
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .series-grid-toolbar {
        gap: 6px;
    }

    .series-grid-search {
        width: 140px;
    }

    .series-grid-visible-count,
    .series-grid-size-label {
        display: none;
    }
}

/* Home: header + content fill the window exactly, so no vertical scrollbar unless the cards need one. */
.home-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.home-page > .main-content {
    flex: 1 0 auto;
    min-height: 0;
}

/* ============================================================
   CHART TOOLBAR (persistent 3-button bar above the chart)
   Extracted from the Settings sidebar: Data Selection, Time
   Range and Chart Options now live in anchored popover panels.
   ============================================================ */
.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.chart-toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-toolbar-spacer {
    flex: 1 1 auto;
}

.chart-toolbar-popover {
    position: relative;
    display: inline-flex;
}

/* Toolbar button */
.chart-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-left: 4px solid #adb5bd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.chart-toolbar-btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.chart-toolbar-btn.active {
    box-shadow: 0 0 0 0.18rem rgba(0, 123, 255, 0.15);
}

.chart-toolbar-btn .chart-toolbar-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.chart-toolbar-popover.open .chart-toolbar-caret {
    transform: rotate(180deg);
}

/* Accent color modifiers (match the highlighted boxes in the sidebar) */
.chart-toolbar-btn.accent-data { border-left-color: #e53935; }
.chart-toolbar-btn.accent-data.active { box-shadow: 0 0 0 0.18rem rgba(229, 57, 53, 0.18); }
.chart-toolbar-btn.accent-time { border-left-color: #2e7d32; }
.chart-toolbar-btn.accent-time.active { box-shadow: 0 0 0 0.18rem rgba(46, 125, 50, 0.18); }
.chart-toolbar-btn.accent-options { border-left-color: #f9a825; }
.chart-toolbar-btn.accent-options.active { box-shadow: 0 0 0 0.18rem rgba(249, 168, 37, 0.22); }
.chart-toolbar-btn.accent-profile { border-left-color: #1e88e5; }
.chart-toolbar-btn.accent-profile.active { box-shadow: 0 0 0 0.18rem rgba(30, 136, 229, 0.18); }
.chart-toolbar-btn.accent-save { border-left-color: #2e7d32; }
.chart-toolbar-btn.accent-load { border-left-color: #1e88e5; }
.chart-toolbar-btn.accent-update { border-left-color: #f9a825; }
.chart-toolbar-btn.accent-axes { border-left-color: #8e24aa; }
.chart-toolbar-btn.accent-axes.active { box-shadow: 0 0 0 0.18rem rgba(142, 36, 170, 0.18); }

/* Run state dot on the Real-Time Settings button (Start/Stop/Pause live inside its panel) */
.chart-toolbar-btn.state-running::before,
.chart-toolbar-btn.state-paused::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-toolbar-btn.state-running::before {
    background: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.22);
}

.chart-toolbar-btn.state-paused::before {
    background: #f9a825;
    box-shadow: 0 0 0 3px rgba(249, 168, 37, 0.28);
}

/* A toolbar button that can't be used yet (e.g. no points selected to save a template) */
.chart-toolbar-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Popover panel */
.chart-toolbar-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    min-width: 340px;
    max-width: min(440px, 92vw);
    max-height: min(70vh, 620px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    animation: chartToolbarPanelIn 0.14s ease-out;
}

.chart-toolbar-popover.align-end .chart-toolbar-panel {
    left: auto;
    right: 0;
}

@keyframes chartToolbarPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-toolbar-panel-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #2c3e50;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 10px 10px 0 0;
}

.chart-toolbar-panel-body {
    padding: 14px 16px;
}

/* Keep moved rows tight inside the narrow panel */
.chart-toolbar-panel-body .row {
    margin-bottom: 12px;
}

.chart-toolbar-panel-body .row:last-child {
    margin-bottom: 0;
}

.historian-server-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.historian-server-label-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--servitecno-green);
    border-radius: 999px;
    color: var(--text-dark);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

/* FilterableDropdown inside a toolbar panel: render the list in-flow so the
   panel grows with it, instead of an absolute menu that gets clipped and
   produces nested scrollbars. Only the item list scrolls. */
.chart-toolbar-panel .filterable-dropdown .dropdown-menu {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6px;
    box-shadow: none;
}

.chart-toolbar-panel .filterable-dropdown .dropdown-items {
    max-height: min(280px, 40vh) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.chart-toolbar-panel .filterable-dropdown .dropdown-item {
    min-width: 0;
}

/* Y Axes popover: add form + one card per custom axis */
.yaxes-add {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yaxes-add-name {
    flex: 1 1 auto;
    min-width: 0;
}

.yaxes-color {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    padding: 2px 4px;
}

.yaxes-add-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.yaxes-add-error {
    display: block;
    margin-top: 4px;
}

.yaxes-empty {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: #6c757d;
}

.yaxes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.yaxis-card {
    padding: 8px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid #8e24aa;
    border-radius: 8px;
    cursor: grab;
}

.yaxis-card:active {
    cursor: grabbing;
}

.yaxis-card-head,
.yaxis-card-scale {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yaxis-card-scale {
    margin-top: 8px;
}

.yaxis-grip {
    flex: 0 0 auto;
    color: #adb5bd;
    font-size: 1.1rem;
    line-height: 1;
}

.yaxis-name {
    flex: 1 1 auto;
    min-width: 0;
}

.yaxis-remove {
    flex: 0 0 auto;
}

.yaxis-autoscale {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.85rem;
}

.yaxis-limit {
    flex: 1 1 0;
    min-width: 0;
}

/* Assign series to splits (inside Chart Options, split mode only) */
.split-assign-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.split-assign-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.split-assign-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.split-assign-select {
    flex: 0 0 auto;
    width: 8.5rem;
}

/* Profile switcher panel (list of profiles inside the popover) */
.chart-toolbar-panel .chart-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chart-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.chart-profile-item:hover {
    background: #f1f3f5;
}

.chart-profile-item.current {
    background: rgba(30, 136, 229, 0.1);
    border-color: rgba(30, 136, 229, 0.35);
}

.chart-profile-item-name {
    flex: 1 1 auto;
}

.chart-profile-item-lock {
    opacity: 0.55;
    font-size: 0.8rem;
}

/* ===== Dark theme ===== */
[data-theme="dark"] .chart-toolbar {
    background: linear-gradient(135deg, #2a2d31 0%, #23262a 100%);
    border-color: #3a3f44;
}

[data-theme="dark"] .chart-toolbar-btn {
    color: #e9ecef;
    background: #2b2f33;
    border-color: #3a3f44;
}

[data-theme="dark"] .chart-toolbar-panel {
    background: #23262a;
    border-color: #3a3f44;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .chart-toolbar-panel-header {
    color: #e9ecef;
    background: #2b2f33;
    border-bottom-color: #3a3f44;
}

[data-theme="dark"] .chart-profile-item {
    color: #e9ecef;
}

[data-theme="dark"] .chart-profile-item:hover {
    background: #2b2f33;
}

[data-theme="dark"] .chart-profile-item.current {
    background: rgba(30, 136, 229, 0.2);
}

[data-theme="dark"] .yaxis-card {
    background: #2b2f33;
    border-color: #3a3f44;
    border-left-color: #8e24aa;
}

[data-theme="dark"] .yaxes-empty {
    color: #adb5bd;
}

/* Inside the chart pages' column-flex container everything keeps its natural height (toolbar,
   alerts, split charts, grids): only the single-chart frame stretches to the room left under them. */
.historian-chart-page .historian-chart-container > :not(.single-chart-container),
.datalogger-chart-page .datalogger-chart-container > :not(.single-chart-container),
.realtime-chart-page .realtime-chart-container > :not(.single-chart-container) {
    flex-shrink: 0;
}

/* Alarms & Events grid: rows are clickable to show/hide the alarm on the chart (icon + vertical line). */
.alarms-events-table tbody tr.ae-row-selectable {
    cursor: pointer;
}

.alarms-events-table tbody tr.ae-row-selected {
    background: rgba(255, 193, 7, 0.16);
    box-shadow: inset 3px 0 0 #fd7e14;
}

.alarms-events-table tbody tr.ae-row-selected:hover {
    background: rgba(255, 193, 7, 0.24);
}

[data-theme="dark"] .alarms-events-table tbody tr.ae-row-selected {
    background: rgba(253, 126, 20, 0.2);
}

[data-theme="dark"] .alarms-events-table tbody tr.ae-row-selected:hover {
    background: rgba(253, 126, 20, 0.28);
}

/* Time-anchored annotations in the RealTime, Historian and DataLogger charts. */
.chart-hover-samples { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.chart-hover-sample {
    position: absolute; width: var(--hover-sample-size, 7px); height: var(--hover-sample-size, 7px); border-radius: 50%;
    border: 1px solid var(--surface, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}
.series-grid-table thead th.col-hover-value,
.series-grid-table tbody td.col-hover-value,
.series-grid-table tbody tr:hover td.col-hover-value,
.series-grid-table tbody tr.series-row-selected td.col-hover-value {
    background: #fbe3e3; color: #842c32; font-variant-numeric: tabular-nums; font-weight: 600;
}
[data-theme="dark"] .series-grid-table thead th.col-hover-value,
[data-theme="dark"] .series-grid-table tbody td.col-hover-value,
[data-theme="dark"] .series-grid-table tbody tr:hover td.col-hover-value,
[data-theme="dark"] .series-grid-table tbody tr.series-row-selected td.col-hover-value {
    background: #573238; color: #ffe1e1;
}
.chart-label-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.chart-label-marker, .chart-label-popup { pointer-events: auto; position: absolute; }
.chart-label-line { position: absolute; width: var(--chart-label-line-width, 1px); transform: translateX(-50%); pointer-events: none; }
.chart-label-layer.is-bold .chart-label-text { font-weight: 700; }
.chart-label-layer.is-area-selecting .chart-label-marker { pointer-events: none; }
.chart-label-layer.is-readonly .chart-label-action { display: none; }
.chart-label-marker {
    z-index: 1; display: flex; align-items: center; gap: 0.25rem; width: max-content;
    max-width: min(24rem, 75%); max-height: 100%;
    transform: translate(0, -50%); padding: 0.25rem 0.35rem 0.25rem 0.55rem;
    color: var(--text-dark); background: var(--surface); border: var(--chart-label-line-width, 1px) solid var(--servitecno-green);
    border-radius: 0.35rem; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); font-size: var(--chart-label-font-size, 0.8rem);
}
.chart-label-text { min-width: 0; max-height: 100%; overflow-y: auto; overflow-wrap: anywhere; white-space: normal; }
.chart-label-action { flex-shrink: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0 0.2rem; font-size: 1rem; }
.chart-label-action:hover { color: var(--servitecno-green); }
.chart-label-delete:hover { color: #c53030; }
.chart-label-popup { z-index: 11; padding: 0.4rem; border: 1px solid var(--border); border-radius: 0.35rem; background: var(--surface); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24); }
.chart-label-popup button { padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; background: var(--surface); color: var(--text-dark); cursor: pointer; }
.chart-label-editor { display: flex; gap: 0.25rem; flex-wrap: wrap; width: min(230px, 100%); }
.chart-label-editor input { width: 100%; border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.3rem; background: var(--surface); color: var(--text-dark); }