* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background: #f3f6f9;
    color: #00213d;
}

.dashboard {
    max-width: 1450px;
    margin: auto;
    padding: 20px;
}

header {
    background: linear-gradient(135deg, #102a43, #183b56);
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

header h1 {
    font-size: 32px;
}

header p {
    margin-top: 8px;
    color: #d9e2ec;
}

/* ================= ALERT BOX ================= */

.alert-box {
    background: #fff1f1;
    color: #9b0000;
    border: 1px solid #ffb4b4;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* ================= TOP DASHBOARD GRID ================= */

.top-dashboard-grid {
    display: grid;

    /* Remaining cards stretch/expand neatly when admin hides some cards */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 14px;
    margin-bottom: 25px;
    align-items: stretch;
}

.card {
    background: white;
    padding: 16px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 0;
}

.metric-card,
.selected-trap-card {
    min-height: 165px;
    display: flex;
    flex-direction: column;
}

.card h3 {
    color: #3b5f82;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.25;
}

.sensor-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    color: #3b5f82;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #001f3f;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.15;
    margin-top: 4px;
}

.card-description {
    margin-top: auto;
    padding-top: 14px;
    color: #486581;
    font-size: 13px;
    line-height: 1.4;
}

.selected-trap-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #24496b;
    font-size: 13px;
}

.selected-trap-card select {
    width: 100%;
    padding: 10px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    margin-bottom: 12px;
}

.selected-trap-value {
    font-size: 18px;
    margin-top: 4px;
    line-height: 1.25;
    word-break: break-word;
}

/* ================= STATUS COLORS ================= */

.status-active {
    color: #16a34a !important;
}

.status-warning {
    color: #f59e0b !important;
}

.status-danger,
.status-full {
    color: #dc2626 !important;
}

.alert-normal {
    color: #16a34a;
    font-weight: bold;
}

.alert-warning {
    color: #f59e0b;
    font-weight: bold;
}

.alert-danger {
    color: #dc2626;
    font-weight: bold;
}

/* ================= OVERVIEW ================= */

.overview-section {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow-x: auto;
}

.overview-section h2 {
    margin-bottom: 15px;
}

/* ================= MAIN LAYOUT ================= */

.main-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: stretch;
}

.left-panel,
.right-panel {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: auto;
}

.right-panel {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* =====================================================
   SMART PANEL HIDE / EXPAND UPDATE
   This version works with classes added by script.js.
   ===================================================== */

.panel-hidden {
    display: none !important;
}

.main-layout.single-panel-layout {
    grid-template-columns: 1fr !important;
}

.main-layout.single-panel-layout .left-panel,
.main-layout.single-panel-layout .right-panel {
    width: 100%;
}

/* 
   When Live Activity Detection Log is hidden:
   1. Left panel expands full width.
   2. Motion Graph / System Guidelines move below the left panel.
   3. No big empty space beside the left panel.
*/
.main-layout.live-log-hidden-layout {
    grid-template-columns: 1fr !important;
    align-items: start;
}

.main-layout.live-log-hidden-layout .left-panel,
.main-layout.live-log-hidden-layout .right-panel {
    width: 100%;
    align-self: start;
}

.main-layout.live-log-hidden-layout .right-panel {
    margin-top: 0;
}

/*
   NEW CLEANER UPDATE:
   When left-side features are hidden but the Live Activity Detection Log
   is still visible, the right panel should become compact instead of
   forcing a very tall layout.

   This makes the right side reduce in height and use scrolling for logs.
*/
.main-layout.compact-right-layout {
    align-items: start;
}

.main-layout.compact-right-layout .left-panel,
.main-layout.compact-right-layout .right-panel {
    align-self: start;
}

.main-layout.compact-right-layout .right-panel {
    height: auto;
}

.main-layout.compact-right-layout .live-log-section {
    flex: 0 0 auto;
}

.main-layout.compact-right-layout .live-log-scroll {
    flex: 0 0 auto;

    /*
       script.js can later adjust --live-log-compact-height
       to match the left panel more accurately.
    */
    min-height: 280px;
    max-height: var(--live-log-compact-height, 480px);

    overflow-y: auto;
    overflow-x: auto;
}

/* When the left panel has some features hidden but still has visible content,
   make it shrink to the visible content only. */
.left-panel.panel-compact {
    align-self: start;
}

/* When the right panel needs compact mode, make it shrink to content only. */
.right-panel.panel-compact {
    align-self: start;
}

.right-panel.panel-compact .graph-section,
.right-panel.panel-compact .guidelines-panel {
    margin-bottom: 0;
}

.right-panel.panel-compact .live-log-section {
    flex: 0 0 auto;
}

.right-panel.panel-compact .live-log-scroll {
    flex: 0 0 auto;
    min-height: 280px;
    max-height: var(--live-log-compact-height, 480px);
    overflow-y: auto;
    overflow-x: auto;
}

/* ================= CSS-ONLY BACKUP FOR CHROME / EDGE ================= */

/* Hide the left panel when every feature inside it is hidden. */
.left-panel:not(:has([data-feature]:not(.feature-hidden))) {
    display: none;
}

/* Hide the right panel when every feature inside it is hidden. */
.right-panel:not(:has([data-feature]:not(.feature-hidden))) {
    display: none;
}

/* If the left panel is empty/hidden, make the right panel full width. */
.main-layout:has(.left-panel:not(:has([data-feature]:not(.feature-hidden)))) {
    grid-template-columns: 1fr;
}

/* If the right panel is empty/hidden, make the left panel full width. */
.main-layout:has(.right-panel:not(:has([data-feature]:not(.feature-hidden)))) {
    grid-template-columns: 1fr;
}

/* If some left-side features are hidden but at least one is still visible,
   shrink the left white panel to the visible content only. */
.left-panel:has([data-feature].feature-hidden):has([data-feature]:not(.feature-hidden)) {
    align-self: start;
}

/*
   CSS backup:
   If Live Detection Log is hidden, force the page into one-column layout.
   This makes the left panel full width and moves graph/guidelines below it.
*/
.main-layout:has(.live-log-section.feature-hidden) {
    grid-template-columns: 1fr !important;
    align-items: start;
}

.main-layout:has(.live-log-section.feature-hidden) .left-panel,
.main-layout:has(.live-log-section.feature-hidden) .right-panel {
    width: 100%;
    align-self: start;
}

/* When Live Detection Log is hidden, do not force the right panel to stretch
   just to match the left panel. */
.right-panel:has(.live-log-section.feature-hidden) {
    align-self: start;
}

.right-panel:has(.live-log-section.feature-hidden) .graph-section,
.right-panel:has(.live-log-section.feature-hidden) .guidelines-panel {
    margin-bottom: 0;
}

/*
   CSS backup:
   If any left-side feature is hidden while the Live Detection Log is still visible,
   compact the right-side log instead of letting it create a very tall layout.
*/
.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) {
    align-items: start;
}

.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .left-panel,
.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .right-panel {
    align-self: start;
}

.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .right-panel {
    height: auto;
}

.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .live-log-section {
    flex: 0 0 auto;
}

.main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .live-log-scroll {
    flex: 0 0 auto;
    min-height: 280px;
    max-height: var(--live-log-compact-height, 480px);
    overflow-y: auto;
    overflow-x: auto;
}

/* ================= GENERAL TEXT ================= */

h2 {
    margin-bottom: 15px;
    color: #00213d;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.section-title-row h2 {
    margin-bottom: 0;
}

.small-edit-btn,
.map-btn,
.guidelines-btn {
    background: #102a43;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.small-edit-btn:hover,
.map-btn:hover,
.guidelines-btn:hover {
    background: #1d4f7a;
}

.export-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================= LOCATION / INFO BOXES ================= */

.location-box,
.info-section,
.map-control-box,
.floor-plan-section,
.graph-section {
    background: #eef2f6;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 15px;
    line-height: 1.7;
}

.fixed-location-box {
    border-left: 5px solid #102a43;
}

.fixed-location-title {
    font-weight: bold;
    font-size: 16px;
    color: #102a43;
    margin-bottom: 8px;
}

.map-control-box h2 {
    margin-bottom: 10px;
}

.map-btn {
    margin-top: 10px;
    margin-bottom: 10px;
}

hr {
    border: none;
    border-top: 1px solid #d9e2ec;
    margin: 20px 0;
}

.note {
    font-size: 13px;
    color: #486581;
    margin-top: 10px;
    line-height: 1.35;
}

/* ================= EDIT LOCATION FORM ================= */

.location-edit-section {
    background: #f8fafc;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #d9e2ec;
    margin-bottom: 18px;
}

.location-edit-section h2 {
    margin-bottom: 12px;
}

.manual-backup-section {
    background: #eef2f6;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    border-left: 5px solid #f59e0b;
}

.manual-backup-section h3 {
    color: #102a43;
    margin-bottom: 8px;
}

form label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #24496b;
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

form input[readonly] {
    background: #eef2f6;
    color: #486581;
    cursor: not-allowed;
}

form textarea {
    height: 80px;
    resize: vertical;
}

form button {
    width: 100%;
    background: #102a43;
    color: white;
    border: none;
    padding: 13px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

form button:hover {
    background: #1d4f7a;
}

.delete-btn {
    width: 100%;
    background: #dc2626;
    color: white;
    border: none;
    padding: 13px;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.delete-btn:hover {
    background: #991b1b;
}

/* ================= TABLES ================= */

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid #d9e2ec;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    background: #eef2f6;
    color: #00213d;
}

tr:hover {
    background: #f8fafc;
}

/* ================= GRAPH ================= */

.graph-section {
    margin-top: 20px;
    overflow-x: auto;
    border-left: 5px solid #102a43;
}

#activityChart {
    width: 100%;
    max-width: 100%;
    background: white;
    border-radius: 10px;
    border: 1px solid #d9e2ec;
    margin-top: 8px;
}

/* ================= FLOOR PLAN / DEVICE LOCATION IMAGE ================= */

.floor-plan-section {
    margin-top: 20px;
}

.floor-plan-box {
    position: relative;
    width: 100%;
    min-height: 250px;
    background: white;
    border: 2px dashed #bcccdc;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 15px;
}

.floor-plan-box img {
    width: 100%;
    display: block;
    max-height: 420px;
    object-fit: contain;
    background: white;
}

.floor-plan-empty {
    padding: 80px 20px;
    text-align: center;
    color: #486581;
    font-weight: bold;
}

.device-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #dc2626;
    font-size: 32px;
    line-height: 1;
    text-shadow: 0 0 4px white, 0 0 6px white;
    cursor: pointer;
}

/* ================= GUIDELINES ================= */

.guidelines-btn {
    margin-top: 20px;
}

.guidelines-panel {
    margin-top: 18px;
}

.guidelines-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.guidelines-header h2 {
    margin-bottom: 0;
}

.close-guidelines-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 9px 13px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.close-guidelines-btn:hover {
    background: #991b1b;
}

/* ================= ADMIN FEATURE UPDATE ================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.admin-header-btn {
    background: white;
    color: #102a43;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.admin-header-btn:hover {
    background: #eef2f6;
}

.feature-hidden {
    display: none !important;
}

.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 15px;
    overflow-y: auto;
}

.admin-modal-content {
    background: white;
    width: 100%;
    max-width: 780px;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.admin-modal-header h2 {
    margin-bottom: 0;
}

.admin-close-btn {
    background: #dc2626;
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
}

.admin-close-btn:hover {
    background: #991b1b;
}

.admin-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.admin-message-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #86efac;
}

.admin-message-error {
    background: #fff1f1;
    color: #991b1b;
    border: 1px solid #ffb4b4;
}

.admin-message-info {
    background: #eef2f6;
    color: #102a43;
    border: 1px solid #bcccdc;
}

.admin-login-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: #eef2f6;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* ================= ADMIN FULL VIEW / USER PREVIEW UPDATE ================= */

.admin-view-banner {
    background: #eef8ff;
    color: #102a43;
    border: 1px solid #7cc4ff;
    padding: 13px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: bold;
}

.admin-view-controls {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 18px;
}

.admin-view-controls h3 {
    color: #102a43;
    margin-bottom: 6px;
}

.admin-view-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.admin-view-btn {
    background: #eef2f6;
    color: #102a43;
    border: 1px solid #bcccdc;
    padding: 11px 13px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.admin-view-btn:hover {
    background: #d9e2ec;
}

.admin-view-btn.active {
    background: #102a43;
    color: white;
    border-color: #102a43;
}

.admin-view-mode-note {
    margin-top: 12px;
    color: #486581;
    font-size: 13px;
}


.admin-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.admin-feature-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 10px;
    font-weight: bold;
    color: #24496b;
    margin: 0;
}

.admin-feature-grid input[type="checkbox"] {
    width: auto;
}

.dashboard-feature-block {
    margin-bottom: 15px;
}

/* ================= LIVE LOG ALIGNMENT UPDATE ================= */

.live-log-section {
    margin-bottom: 18px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.live-log-scroll {
    flex: 1 1 auto;
    min-height: 420px;
    max-height: none;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
}

.live-log-scroll table {
    margin: 0;
}

.live-log-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}


/* ================= ADMIN USER MANAGEMENT UPDATE ================= */

.admin-add-user-form {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    padding: 15px;
    margin-top: 12px;
}

.admin-users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 18px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.admin-users-header h4 {
    color: #102a43;
    font-size: 16px;
}

.admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    padding: 12px;
}

.admin-user-email {
    font-weight: bold;
    color: #102a43;
    word-break: break-word;
}

.admin-user-meta {
    margin-top: 4px;
    color: #486581;
    font-size: 12px;
    line-height: 1.4;
}

.admin-current-badge {
    display: inline-block;
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #86efac;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 6px;
}

.admin-delete-user-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.admin-delete-user-btn:hover {
    background: #991b1b;
}

.admin-delete-user-btn:disabled {
    background: #bcccdc;
    color: #486581;
    cursor: not-allowed;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {
    .main-layout {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    header h1 {
        font-size: 26px;
    }

    .card-value {
        font-size: 24px;
    }
}

@media (max-width: 800px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-header-btn {
        width: 100%;
    }

    .admin-feature-grid,
    .admin-view-buttons {
        grid-template-columns: 1fr;
    }

    .admin-login-status {
        align-items: stretch;
    }

    .live-log-scroll {
        min-height: 320px;
    }

    .main-layout.compact-right-layout .live-log-scroll,
    .right-panel.panel-compact .live-log-scroll,
    .main-layout:has(.left-panel [data-feature].feature-hidden):not(:has(.live-log-section.feature-hidden)) .live-log-scroll {
        min-height: 260px;
        max-height: 360px;
    }
}

@media (max-width: 600px) {
    .dashboard {
        padding: 12px;
    }

    header {
        padding: 18px;
    }

    .card,
    .left-panel,
    .right-panel,
    .overview-section {
        padding: 16px;
    }

    .top-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .selected-trap-value {
        font-size: 20px;
    }

    .card-value {
        font-size: 25px;
    }

    th,
    td {
        padding: 10px;
        font-size: 13px;
    }

    .export-actions {
        width: 100%;
    }

    .export-actions .small-edit-btn {
        width: 100%;
    }

    .section-title-row,
    .guidelines-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================= FAN CONTROL ================= */

.fan-control-card {
    min-height: 165px;
    display: flex;
    flex-direction: column;
}

/* Same label style as Selected Device */
.fan-control-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #24496b;
    font-size: 13px;
}

/* Same dropdown style as Selected Device */
.fan-control-card select {
    width: 100%;
    padding: 10px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    margin-bottom: 10px;
}

/* Put the two buttons side by side */
.fan-control-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Fan ON button */
.fan-on-btn {
    flex: 1;
    background: #102a43;
    color: white;
    border: none;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.fan-on-btn:hover {
    background: #1d4f7a;
}

/* Return to Auto button */
.fan-auto-btn {
    flex: 1;
    background: #e7eef5;
    color: #102a43;
    border: 1px solid #bcccdc;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.fan-auto-btn:hover {
    background: #d9e2ec;
}

.fan-control-status {
    margin-top: auto;
    padding-top: 10px;
}

/* ================= TEMPERATURE CARD ================= */

.temperature-card {
    min-height: 165px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.temperature-card-header {
    margin-bottom: 3px;
}

.temperature-date {
    font-size: 13px;
    color: #3b5f82;
    font-weight: bold;
}

.temperature-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-top: 8px;
    margin-bottom: 6px;
}

.temperature-reading {
    display: flex;
    align-items: flex-start;
    color: #001f3f;
    font-weight: bold;
}

#insideTemperatureValue {
    font-size: 38px;
    line-height: 1;
}

.temperature-degree {
    font-size: 17px;
    margin-top: 3px;
    margin-left: 2px;
    color: #486581;
}

.temperature-emoji {
    font-size: 40px;
    line-height: 1;
}

.temperature-small-info {
    border-top: 1px solid #e5ebf0;
    padding-top: 7px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 12px;
    color: #486581;
}

.temperature-small-info strong {
    color: #24496b;
    font-size: 13px;
}

/* ================= FAN CONTROL CARD ================= */

.fan-control-card {
    min-height: 165px;
    display: flex;
    flex-direction: column;
}

.fan-control-card h3 {
    color: #3b5f82;
    margin-bottom: 10px;
}


/* ================= STATUS + MODE ================= */

.fan-status-row,
.fan-mode-row,
.fan-remaining-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 13px;
    color: #486581;

    margin-bottom: 6px;
}

.fan-status-row {
    font-weight: bold;
}

.fan-mode-row strong,
.fan-remaining-row strong {
    color: #24496b;
}


/* ================= STATUS DOT ================= */

.fan-status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    margin-right: 4px;

    background: #dc2626;
}

.fan-status-off {
    color: #dc2626;
    font-weight: bold;
}

.fan-status-off .fan-status-dot {
    background: #dc2626;
}

.fan-status-on {
    color: #16a34a;
    font-weight: bold;
}

.fan-status-on .fan-status-dot {
    background: #16a34a;
}


/* ================= DURATION ================= */

.fan-control-card label {
    display: block;

    margin-top: 3px;
    margin-bottom: 5px;

    font-weight: bold;
    color: #24496b;
    font-size: 12px;
}

.fan-control-card select {
    width: 100%;

    padding: 8px;

    border: 1px solid #bcccdc;
    border-radius: 8px;

    font-size: 13px;

    background: white;

    margin-bottom: 8px;
}


/* ================= BUTTONS ================= */

.fan-control-buttons {
    display: flex;
    gap: 7px;

    width: 100%;

    margin-bottom: 7px;
}

.fan-on-btn,
.fan-auto-btn {
    flex: 1;

    padding: 8px 5px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 12px;
    font-weight: bold;
}

.fan-on-btn {
    background: #102a43;
    color: white;
    border: none;
}

.fan-on-btn:hover {
    background: #1d4f7a;
}

.fan-auto-btn {
    background: #e7eef5;
    color: #102a43;

    border: 1px solid #bcccdc;
}

.fan-auto-btn:hover {
    background: #d9e2ec;
}


/* ================= REMAINING ================= */

.fan-remaining-row {
    margin-top: auto;
    margin-bottom: 0;

    padding-top: 5px;

    border-top: 1px solid #e5ebf0;
}

/* ================= TEMPERATURE GRAPH CARD ================= */

.temperature-graph-card {
    grid-column: span 5;

    min-height: 165px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.temperature-graph-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 5px;
}

.temperature-graph-header h3 {
    margin-bottom: 2px;
}

.temperature-graph-subtitle {
    font-size: 11px;
    color: #6b8299;
}

.temperature-graph-latest {
    font-size: 18px;
    font-weight: bold;
    color: #00213d;
}

.temperature-graph-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

#temperatureChart {
    width: 100%;
    min-height: 150px;
    display: block;
}

/* ================= TEMPERATURE GRAPH RANGE ================= */

#temperatureGraphRange {
    padding: 10px;

    border: 1px solid #bcccdc;
    border-radius: 8px;

    font-size: 14px;

    background: white;

    color: #102a43;

    cursor: pointer;

    min-width: 165px;
}

#temperatureGraphRange:hover {
    border-color: #829ab1;
}

#temperatureGraphRange:focus {
    outline: none;
    border-color: #486581;

    box-shadow:
        0 0 0 2px
        rgba(72, 101, 129, 0.15);
}

/* ================= APEXCHARTS TEMPERATURE GRAPH ================= */

.temperature-apex-chart {
    width: 100%;
    min-height: 150px;
}

.temperature-graph-card {
    overflow: visible;
}

.temperature-graph-card .apexcharts-toolbar {
    top: -2px !important;
    right: 2px !important;
}

.temperature-chart-error {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 13px;
    text-align: center;
}

.temperature-fullscreen-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    background: #ffffff;
    color: #102a43;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.temperature-fullscreen-btn:hover {
    background: #eef2f6;
    border-color: #829ab1;
}

.temperature-graph-card:fullscreen,
.temperature-graph-card.is-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    grid-column: auto;
    border-radius: 0;
    padding: 24px 28px;
    background: #ffffff;
    overflow: hidden;
}

.temperature-graph-card:fullscreen .temperature-apex-chart,
.temperature-graph-card.is-fullscreen .temperature-apex-chart {
    flex: 1 1 auto;
    min-height: 420px;
}

@media (max-width: 700px) {
    .temperature-graph-card:fullscreen,
    .temperature-graph-card.is-fullscreen {
        padding: 14px;
    }
}

/* =====================================================
   FAN CONTROL: STATUS BADGE + SEGMENTED ON / AUTO TOGGLE
   ===================================================== */

.fan-status-on,
.fan-status-off {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fan-status-off {
    background: #fdecec;
    color: #dc2626;
}

.fan-status-on {
    background: #e8f7ee;
    color: #16a34a;
}

.fan-status-on .fan-status-dot,
.fan-status-off .fan-status-dot {
    margin-right: 0;
}

.fan-status-on .fan-status-dot {
    animation: fanDotPulse 1.6s ease-in-out infinite;
}

@keyframes fanDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.fan-segmented {
    display: flex;
    gap: 2px;
    width: 100%;
    padding: 3px;
    margin-bottom: 8px;
    background: #e7eef5;
    border: 1px solid #d3dee9;
    border-radius: 10px;
}

.fan-seg-btn {
    flex: 1;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #486581;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.fan-seg-btn:hover {
    color: #102a43;
}

.fan-seg-btn.is-active {
    background: #102a43;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 42, 67, 0.3);
}

.fan-seg-btn:focus-visible {
    outline: 2px solid #2f80ed;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fan-status-on .fan-status-dot {
        animation: none;
    }
}

/* =====================================================
   BATTERY GAUGE (ring with 20% / 50% thresholds)
   ===================================================== */

.status-critical {
    color: #dc2626 !important;
}

.battery-gauge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.battery-gauge {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    --gauge-color: #9fb3c8;
}

.battery-gauge.is-good    { --gauge-color: #16a34a; }
.battery-gauge.is-fair    { --gauge-color: #f59e0b; }
.battery-gauge.is-low     { --gauge-color: #dc2626; }
.battery-gauge.is-unknown { --gauge-color: #9fb3c8; }

.battery-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.battery-gauge-track,
.battery-gauge-arc {
    fill: none;
    stroke-width: 10;
}

.battery-gauge-track {
    stroke: #e7eef5;
}

.battery-gauge-arc {
    stroke: var(--gauge-color);
    stroke-linecap: butt;
    transition: stroke-dasharray 0.6s ease, stroke 0.3s ease;
}

/* white cuts that mark where the thresholds sit on the ring */
.battery-gauge-tick {
    stroke: #ffffff;
    stroke-width: 2.5;
}

.battery-gauge-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #001f3f;
    font-variant-numeric: tabular-nums;
}

.battery-gauge-value span {
    font-size: 22px;
    line-height: 1;
}

.battery-gauge-value small {
    font-size: 11px;
    margin-left: 1px;
    margin-top: 6px;
    color: #486581;
}

.battery-gauge-info {
    min-width: 0;
}

.battery-gauge-info .card-value {
    font-size: 18px;
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .battery-gauge-arc {
        transition: none;
    }
}

/* ================= GPS MINI MAP ================= */

.gps-card .gps-map-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 110px;
    margin-top: 10px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #eef2f6;
    overflow: hidden;
    isolation: isolate;
}

.gps-map-wrap.has-location { cursor: pointer; }

.gps-mini-map {
    position: absolute;
    inset: 0;
    display: none;
}

.gps-map-wrap.has-location .gps-mini-map { display: block; }

.gps-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: #6b8299;
}

.gps-map-wrap.has-location .gps-map-empty { display: none; }

.gps-card .gps-caption {
    margin-top: 8px;
    padding-top: 0;
    font-size: 12px;
}

.gps-mini-map .leaflet-control-attribution { font-size: 9px; }

.fan-log-on  { color: #2f80ed; font-weight: bold; }
.fan-log-off { color: #486581; font-weight: bold; }


/* =========================================================
   RESPONSIVE UPDATE — LAPTOP / TABLET / MOBILE
   Desktop/laptop styles above remain unchanged.
   These rules only activate on narrower screens.
   ========================================================= */

/* ---------- TABLET LANDSCAPE / SMALL LAPTOP ---------- */
@media (max-width: 1200px) {

    .dashboard {
        padding: 16px;
    }

    .top-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .temperature-graph-card {
        grid-column: 1 / -1;
    }

    .card {
        min-width: 0;
    }

    .main-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        min-width: 0;
    }

    .overview-section,
    .live-log-scroll,
    .right-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #temperatureChart,
    .temperature-apex-chart,
    #activityChart {
        max-width: 100%;
    }
}

/* ---------- TABLET PORTRAIT ---------- */
@media (max-width: 900px) {

    .top-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .temperature-graph-card {
        grid-column: 1 / -1;
    }

    .dashboard-header {
        align-items: stretch;
    }

    .card,
    .metric-card,
    .selected-trap-card,
    .fan-control-card,
    .temperature-card,
    .temperature-graph-card {
        height: auto;
    }

    .gps-card .gps-map-wrap {
        min-height: 140px;
    }

    .section-title-row {
        align-items: stretch;
    }

    .export-actions {
        width: 100%;
    }

    .export-actions .small-edit-btn {
        flex: 1 1 180px;
    }

    .admin-modal-content {
        max-width: 92vw;
    }

    .floor-plan-box {
        min-height: 220px;
    }

    .live-log-scroll {
        min-height: 300px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {

    body {
        overflow-x: hidden;
    }

    .dashboard {
        width: 100%;
        max-width: 100%;
        padding: 10px;
    }

    header {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    header h1 {
        font-size: 23px;
        line-height: 1.15;
    }

    header p {
        font-size: 13px;
        line-height: 1.35;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .admin-header-btn {
        width: 100%;
    }

    .top-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }

    .temperature-graph-card {
        grid-column: 1;
    }

    .card,
    .metric-card,
    .selected-trap-card,
    .fan-control-card,
    .temperature-card,
    .temperature-graph-card {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        padding: 14px;
        border-radius: 12px;
    }

    .card h3 {
        font-size: 14px;
    }

    .card-value {
        font-size: 22px;
    }

    .selected-trap-value {
        font-size: 18px;
    }

    .selected-trap-card select,
    .fan-control-card select,
    form input,
    form select,
    form textarea {
        font-size: 16px;
    }

    .temperature-main-row {
        min-height: 72px;
    }

    #insideTemperatureValue {
        font-size: 34px;
    }

    .temperature-emoji {
        font-size: 34px;
    }

    .temperature-graph-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .temperature-graph-controls {
        gap: 8px;
        margin-left: auto;
    }

    .temperature-graph-latest {
        font-size: 16px;
    }

    .temperature-fullscreen-btn {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    #temperatureChart,
    .temperature-apex-chart {
        min-height: 180px;
    }

    .gps-card .gps-map-wrap {
        min-height: 170px;
    }

    .battery-gauge-row {
        flex-wrap: wrap;
    }

    .main-layout {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .left-panel,
    .right-panel,
    .overview-section {
        width: 100%;
        min-width: 0;
        padding: 14px;
        border-radius: 12px;
    }

    .location-box,
    .info-section,
    .map-control-box,
    .floor-plan-section,
    .graph-section {
        padding: 13px;
    }

    .section-title-row,
    .guidelines-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .small-edit-btn,
    .map-btn,
    .guidelines-btn,
    .delete-btn {
        width: 100%;
        min-height: 44px;
    }

    .export-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .export-actions .small-edit-btn {
        width: 100%;
    }

    .overview-section,
    .live-log-scroll,
    .right-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 760px;
    }

    th,
    td {
        padding: 9px;
        font-size: 12px;
        white-space: nowrap;
    }

    .live-log-scroll {
        min-height: 280px;
        max-height: 420px;
    }

    .floor-plan-box {
        min-height: 190px;
    }

    .floor-plan-box img {
        max-height: 320px;
    }

    #activityChart {
        width: 100%;
        height: auto;
    }

    .admin-modal {
        padding: 12px 8px;
    }

    .admin-modal-content {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 12px;
    }

    .admin-feature-grid,
    .admin-view-buttons {
        grid-template-columns: 1fr;
    }

    .admin-user-row {
        grid-template-columns: 1fr;
    }

    .admin-delete-user-btn {
        width: 100%;
    }

    .admin-login-status {
        align-items: stretch;
    }

    .fan-segmented {
        min-height: 44px;
    }

    .fan-seg-btn {
        min-height: 38px;
    }

    .temperature-graph-card:fullscreen,
    .temperature-graph-card.is-fullscreen {
        padding: 10px;
    }
}

/* ---------- VERY SMALL MOBILE ---------- */
@media (max-width: 380px) {

    .dashboard {
        padding: 8px;
    }

    header h1 {
        font-size: 21px;
    }

    .card-value {
        font-size: 20px;
    }

    #insideTemperatureValue {
        font-size: 30px;
    }

    .battery-gauge {
        flex-basis: 74px;
        width: 74px;
        height: 74px;
    }
}


/* =========================================================
   TABLET + MOBILE HEADER FIX — KEEP ADMIN BUTTON ON THE RIGHT
   ========================================================= */
@media (max-width: 900px) {
    .dashboard-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between;
        gap: 12px;
    }

    .dashboard-header > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .admin-header-btn {
        width: auto !important;
        flex: 0 0 auto;
        padding: 10px 14px;
    }
}

@media (max-width: 380px) {
    .dashboard-header {
        gap: 8px;
    }

    .admin-header-btn {
        padding: 9px 11px;
        font-size: 13px;
    }
}


/* =========================================================
   MOBILE TOP CARDS — 2 CARDS PER ROW
   ========================================================= */
@media (max-width: 600px) {
    .top-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    /* Keep the large temperature graph full-width */
    .temperature-graph-card {
        grid-column: 1 / -1 !important;
    }

    .top-dashboard-grid > .card {
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 12px;
    }

    .top-dashboard-grid .card h3 {
        font-size: 13px;
        line-height: 1.2;
    }

    .top-dashboard-grid .card-value {
        font-size: 19px;
    }

    .top-dashboard-grid .card-description {
        font-size: 11px;
        line-height: 1.35;
        padding-top: 10px;
    }

    .top-dashboard-grid .selected-trap-value {
        font-size: 15px;
    }

    .top-dashboard-grid .selected-trap-card select,
    .top-dashboard-grid .fan-control-card select {
        padding: 8px;
        font-size: 14px;
    }

    .top-dashboard-grid .gps-card .gps-map-wrap {
        min-height: 110px;
    }

    .top-dashboard-grid .battery-gauge {
        flex: 0 0 68px;
        width: 68px;
        height: 68px;
    }

    .top-dashboard-grid .battery-gauge-value span {
        font-size: 18px;
    }

    .top-dashboard-grid #insideTemperatureValue {
        font-size: 29px;
    }

    .top-dashboard-grid .temperature-emoji {
        font-size: 29px;
    }

    .top-dashboard-grid .fan-status-row,
    .top-dashboard-grid .fan-mode-row,
    .top-dashboard-grid .fan-remaining-row {
        font-size: 11px;
    }

    .top-dashboard-grid .fan-control-card label {
        font-size: 11px;
    }

    .top-dashboard-grid .fan-seg-btn {
        font-size: 11px;
        padding: 7px 4px;
    }
}


/* =========================================================
   FINAL RESPONSIVE CARD ORDER
   Phone:
   - 2 cards per row
   - Battery immediately after Temperature
   - Temperature Trend after Battery, full width

   Tablet:
   - 3-column top grid
   - Battery under Connection Status
   - Temperature Trend beside Battery and spans 2 columns
   ========================================================= */

/* ---------- TABLET: 601px to 900px ---------- */
@media (min-width: 601px) and (max-width: 900px) {

    .top-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    /* Keep normal cards in their existing flow */
    .top-dashboard-grid > [data-feature="selected_device"] {
        order: 1;
    }

    .top-dashboard-grid > [data-feature="activity_status"] {
        order: 2;
    }

    .top-dashboard-grid > [data-feature="no_activity"] {
        order: 3;
    }

    .top-dashboard-grid > [data-feature="pir1_activity"] {
        order: 4;
    }

    .top-dashboard-grid > [data-feature="pir2_activity"] {
        order: 5;
    }

    .top-dashboard-grid > [data-feature="gps_status"] {
        order: 6;
    }

    .top-dashboard-grid > [data-feature="connection_status"] {
        order: 7;
        grid-column: 1;
    }

    .top-dashboard-grid > [data-feature="fan_control"] {
        order: 8;
    }

    .top-dashboard-grid > [data-feature="temperature_condition"] {
        order: 9;
    }

    /* Start a new row under Connection Status */
    .top-dashboard-grid > [data-feature="battery_status"] {
        order: 10;
        grid-column: 1;
    }

    /* Temperature Trend sits beside Battery and uses 2 card spaces */
    .top-dashboard-grid > [data-feature="temperature_graph"] {
        order: 11;
        grid-column: 2 / span 2 !important;
    }
}

/* ---------- PHONE: 600px and below ---------- */
@media (max-width: 600px) {

    .top-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .top-dashboard-grid > [data-feature="selected_device"] {
        order: 1;
    }

    .top-dashboard-grid > [data-feature="activity_status"] {
        order: 2;
    }

    .top-dashboard-grid > [data-feature="no_activity"] {
        order: 3;
    }

    .top-dashboard-grid > [data-feature="pir1_activity"] {
        order: 4;
    }

    .top-dashboard-grid > [data-feature="pir2_activity"] {
        order: 5;
    }

    .top-dashboard-grid > [data-feature="gps_status"] {
        order: 6;
    }

    .top-dashboard-grid > [data-feature="connection_status"] {
        order: 7;
    }

    .top-dashboard-grid > [data-feature="fan_control"] {
        order: 8;
    }

    /* Temperature first */
    .top-dashboard-grid > [data-feature="temperature_condition"] {
        order: 9;
    }

    /* Battery immediately after Temperature */
    .top-dashboard-grid > [data-feature="battery_status"] {
        order: 10;
    }

    /* Temperature Trend comes after Battery and stays full width */
    .top-dashboard-grid > [data-feature="temperature_graph"] {
        order: 11;
        grid-column: 1 / -1 !important;
    }
}

	/* Fix Battery Status text wrapping */
	.battery-gauge-info .card-value {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    font-size: 18px;
    line-height: 1.15;
}


/* =========================================================
   MOTION CAPTURED GRAPH — APEXCHARTS STYLE
   Matches the Temperature Trend graph, but uses event dots
   instead of a continuous line.
   ========================================================= */

.motion-graph-section {
    background: #ffffff;
    border-left: none;
    border-radius: 15px;
    padding: 16px;
    overflow: visible;
}

.motion-graph-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 5px;
}

.motion-graph-header h2 {
    margin-bottom: 2px;
    font-size: 18px;
}

.motion-graph-subtitle {
    font-size: 11px;
    color: #6b8299;
}

.motion-graph-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.motion-graph-latest {
    font-size: 18px;
    font-weight: bold;
    color: #00213d;
}

.motion-apex-chart {
    width: 100%;
    min-height: 260px;
    display: block;
}

.motion-graph-section .apexcharts-toolbar {
    top: -2px !important;
    right: 2px !important;
}

.motion-chart-error {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 13px;
    text-align: center;
}

.motion-fullscreen-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    background: #ffffff;
    color: #102a43;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.motion-fullscreen-btn:hover {
    background: #eef2f6;
    border-color: #829ab1;
}

.motion-graph-section:fullscreen,
.motion-graph-section.is-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 24px 28px;
    background: #ffffff;
    overflow: hidden;
}

.motion-graph-section:fullscreen .motion-apex-chart,
.motion-graph-section.is-fullscreen .motion-apex-chart {
    min-height: 420px;
}

@media (max-width: 700px) {
    .motion-graph-header {
        flex-wrap: wrap;
    }

    .motion-graph-controls {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .motion-graph-section:fullscreen,
    .motion-graph-section.is-fullscreen {
        padding: 14px;
    }

    .motion-apex-chart {
        min-height: 220px;
    }
}



/* =========================================================
   DESKTOP TOP GRID UPDATE — FAN CONTROL REMOVED
   Temperature Trend uses 5 card spaces.
   ========================================================= */
@media (min-width: 1201px) {
    .temperature-graph-card {
        grid-column: span 5 !important;
    }
}

/* ================= EXPORT ICON BUTTON ================= */

.export-actions {
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap;
}

.export-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #102a43;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.export-icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.export-icon-btn:hover,
.export-icon-btn:focus-visible {
    background: #1d4f7a;
}

/* "Export" description shown when the mouse is over the icon */
.export-icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #102a43;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 20;
}

.export-icon-btn:hover::after,
.export-icon-btn:focus-visible::after {
    opacity: 1;
}

@media (max-width: 900px) {
    .section-title-row .export-actions {
        align-self: flex-end;
    }
}