```css
/* =========================
   GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #071116;
    color: #e8f7fa;
    min-height: 100vh;
}

button,
select,
input {
    font-family: inherit;
}


/* =========================
   SIDEBAR
========================= */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 245px;
    height: 100vh;

    background: #0a171d;
    border-right: 1px solid #183038;

    padding: 25px 18px;

    display: flex;
    flex-direction: column;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 5px 8px 35px;
}

.logo-icon {
    width: 42px;
    height: 42px;

    border-radius: 10px;

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

    background: linear-gradient(
        135deg,
        #54d8f4,
        #36b58b
    );

    color: #061216;
    font-weight: bold;
}

.logo h2 {
    font-size: 18px;
}

.logo span {
    color: #6e8b94;
    font-size: 11px;
}


nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nav-item {
    text-decoration: none;
    color: #78929a;

    padding: 13px 14px;

    border-radius: 8px;

    display: flex;
    gap: 12px;
    align-items: center;

    font-size: 14px;

    transition: 0.2s;
}

.nav-item:hover,
.nav-item.active {
    color: #dffbff;
    background: #10272e;
}

.nav-item.active {
    border-left: 3px solid #55d9f5;
}

.sidebar-bottom {
    margin-top: auto;
    padding: 15px 10px;
    border-top: 1px solid #183038;
}

.connection {
    font-size: 12px;
    color: #9cb3b9;
    margin-bottom: 10px;
}

.green-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #38d49b;

    margin-right: 6px;
}

.sidebar-bottom small {
    color: #526d75;
}


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

.main-content {
    margin-left: 245px;
    padding: 30px;

    max-width: 1700px;
}


/* =========================
   HEADER
========================= */

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

    margin-bottom: 35px;
}

.eyebrow {
    color: #5bcce4;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: bold;

    margin-bottom: 7px;
}

.header h1 {
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.header h1 span {
    color: #56d8a3;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.live-indicator {
    border: 1px solid #1d5e54;
    background: #0b2524;

    padding: 8px 13px;

    border-radius: 20px;

    color: #59dfad;
    font-size: 11px;
    font-weight: bold;
}

.live-indicator span {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #43dc9e;

    margin-right: 5px;
}

.time {
    color: #718b93;
    font-size: 13px;
}


/* =========================
   SECTION TITLE
========================= */

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 18px;
}

.section-title h2,
.panel h2 {
    font-size: 18px;
}

.well-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.well-selector label {
    font-size: 12px;
    color: #718b93;
}

select {
    background: #0d2027;
    color: #dffbff;

    border: 1px solid #25424a;

    padding: 9px 30px 9px 12px;

    border-radius: 6px;
}


/* =========================
   SENSOR CARDS
========================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 20px;
}

.sensor-card {
    background: #0c1b21;

    border: 1px solid #19343c;

    border-radius: 10px;

    padding: 20px;

    min-height: 175px;

    transition: 0.25s;
}

.sensor-card:hover {
    border-color: #28606c;
    transform: translateY(-2px);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-label {
    font-size: 10px;
    color: #718e96;
    letter-spacing: 1.5px;
    font-weight: bold;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.status-dot.blue {
    background: #53d5f3;
}

.status-dot.green {
    background: #4bdaa2;
}

.sensor-value {
    margin: 22px 0;

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

.sensor-value small {
    font-size: 14px;
    color: #6e8991;
    font-weight: normal;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #617a82;
    font-size: 11px;
}


/* Slider */

input[type="range"] {
    width: 105px;

    accent-color: #4fd3ed;

    cursor: pointer;
}


/* =========================
   SRP
========================= */

.srp-status {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 17px 0;
}

.srp-icon {
    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: #103b31;
    color: #54dfa9;

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

    font-weight: bold;
}

.srp-status strong {
    color: #5ee0ae;
    font-size: 14px;
}

.srp-status p {
    color: #687f86;
    font-size: 11px;

    margin-top: 4px;
}

.control-btn {
    width: 100%;

    background: transparent;

    border: 1px solid #31525a;

    color: #8ca5ab;

    padding: 8px;

    border-radius: 6px;

    cursor: pointer;
}

.control-btn:hover {
    border-color: #5bd8f0;
    color: #5bd8f0;
}


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

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 18px;
}

.panel {
    background: #0c1b21;

    border: 1px solid #19343c;

    border-radius: 10px;

    padding: 22px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}


/* =========================
   CHART
========================= */

.chart-container {
    height: 310px;
    position: relative;
}

.graph-legend {
    display: flex;
    gap: 15px;

    font-size: 11px;
    color: #718a92;
}

.graph-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.graph-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-blue {
    background: #53d5f3;
}

.legend-green {
    background: #4bdaa2;
}


/* =========================
   WELL INFO
========================= */

.info-row {
    display: flex;
    justify-content: space-between;

    padding: 14px 0;

    border-bottom: 1px solid #173039;

    font-size: 12px;
}

.info-row span {
    color: #68828a;
}

.info-row strong {
    color: #cfe5e9;
}

.green-text {
    color: #51dba4 !important;
}

.primary-btn {
    width: 100%;

    margin-top: 20px;

    padding: 11px;

    border: none;

    border-radius: 6px;

    background: linear-gradient(
        90deg,
        #3bc5e5,
        #42c995
    );

    color: #061216;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

.primary-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}


/* =========================
   BOTTOM CARDS
========================= */

.bottom-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-top: 18px;
}

.mini-panel {
    background: #0c1b21;

    border: 1px solid #19343c;

    border-radius: 10px;

    padding: 18px;
}

.mini-title {
    display: block;

    color: #627c84;

    font-size: 9px;

    letter-spacing: 1.5px;

    margin-bottom: 10px;
}

.mini-panel strong {
    font-size: 23px;
}

.mini-panel strong small {
    font-size: 10px;
    color: #6c858d;
}

.mini-panel p {
    font-size: 10px;
    margin-top: 7px;
}

.positive {
    color: #4edaa0;
}


/* =========================
   FOOTER
========================= */

footer {
    text-align: center;

    color: #465f67;

    font-size: 10px;

    padding: 30px 0 10px;
}


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

@media (max-width: 1100px) {

    .cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .bottom-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 800px) {

    .sidebar {
        position: relative;

        width: 100%;
        height: auto;

        border-right: none;
        border-bottom: 1px solid #183038;
    }

    .sidebar nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .sidebar-bottom {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: 20px;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;

        gap: 15px;
    }

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


@media (max-width: 550px) {

    .cards,
    .bottom-grid {
        grid-template-columns: 1fr;
    }

    .header h1 {
        font-size: 20px;
    }

    .section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }
}
```
/* =====================================
   HISTORICAL DATA
===================================== */

.history-section {
    margin-top: 25px;
    padding: 20px;
    background: #0d171b;
    border: 1px solid #193039;
    border-radius: 12px;
}

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

.section-title h2 {
    margin: 0;
    color: #e8f3f5;
    font-size: 20px;
}

#historyRefresh {
    background: #13252b;
    color: #53d5f3;
    border: 1px solid #24515c;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
}

#historyRefresh:hover {
    background: #19343c;
}

.history-table-container {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
}
#historyTable thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #101e23;
}

#historyTable {
    width: 100%;
    border-collapse: collapse;
}

#historyTable th {
    text-align: left;
    padding: 12px;
    color: #607980;
    font-size: 12px;
    border-bottom: 1px solid #193039;
}

#historyTable td {
    padding: 8px 12px;
    color: #c9d9dc;
    font-size: 13px;
    border-bottom: 1px solid #14262b;
}

#historyTable tbody tr:hover {
    background: #112126;
}
/* =====================================
   ANALYTICS
===================================== */

.analytics-section {
    margin-top: 25px;
    padding: 20px;
    background: #0d171b;
    border: 1px solid #193039;
    border-radius: 12px;
}

.analytics-section .section-title {
    margin-bottom: 18px;
}

.analytics-section .section-title h2 {
    margin: 0;
    color: #e8f3f5;
    font-size: 20px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.analytics-card {
    background: #101e23;
    border: 1px solid #1d363e;
    border-radius: 10px;
    padding: 18px;
}

.analytics-card h3 {
    margin: 0 0 18px 0;
    color: #53d5f3;
    font-size: 15px;
}

.analytics-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.analytics-values div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-values span,
.records-card span {
    color: #71858a;
    font-size: 11px;
}

.analytics-values strong {
    color: #e8f3f5;
    font-size: 16px;
}

.records-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.records-card > strong {
    color: #5ee0ae;
    font-size: 32px;
    margin-bottom: 8px;
}
/* =====================================
   ANOMALY DETECTION
===================================== */

.anomaly-section {
    margin-top: 25px;
    padding: 20px;
    background: #0d171b;
    border: 1px solid #193039;
    border-radius: 12px;
}

.anomaly-section .section-title {
    margin-bottom: 18px;
}

.anomaly-section .section-title h2 {
    margin: 0;
    color: #e8f3f5;
    font-size: 20px;
}

.anomaly-panel {
    background: #101e23;
    border: 1px solid #1d363e;
    border-radius: 10px;
    padding: 20px;
}

.health-status {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.health-indicator {
    font-size: 32px;
}

.health-status span,
.anomaly-details span {
    display: block;
    color: #71858a;
    font-size: 12px;
    margin-bottom: 6px;
}

.health-status strong {
    color: #5ee0ae;
    font-size: 20px;
}

.anomaly-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.anomaly-details div {
    background: #0d171b;
    padding: 15px;
    border-radius: 8px;
}

.anomaly-details strong {
    color: #e8f3f5;
    font-size: 17px;
}

.warning-box {
    background: #0d171b;
    border-radius: 8px;
    padding: 15px;
}

.warning-box h3 {
    margin-top: 0;
    color: #53d5f3;
    font-size: 14px;
}

.warning-box p {
    color: #a9bec2;
    margin-bottom: 0;
}
/* =====================================
   ML PREDICTION
===================================== */

.prediction-section {
    margin-top: 25px;
    padding: 20px;
    background: #0d171b;
    border: 1px solid #193039;
    border-radius: 12px;
}

.prediction-section .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.prediction-section .section-title h2 {
    margin: 0;
    color: #e8f3f5;
    font-size: 20px;
}

#predictionStatus {
    padding: 6px 10px;
    border-radius: 5px;
    background: #102a24;
    color: #5ee0ae;
    font-size: 11px;
}

.prediction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.prediction-card {
    background: #101e23;
    border: 1px solid #1d363e;
    border-radius: 10px;
    padding: 20px;
}

.prediction-card h3 {
    margin: 0 0 15px 0;
    color: #71858a;
    font-size: 13px;
    font-weight: normal;
}

.prediction-card strong {
    color: #53d5f3;
    font-size: 28px;
    display: inline-block;
    margin-right: 5px;
}

.prediction-card span {
    color: #71858a;
    font-size: 12px;
}
/* =====================================
   PRODUCTION FORECAST
===================================== */

.production-section {
    margin-top: 25px;
    padding: 20px;
    background: #0d171b;
    border: 1px solid #193039;
    border-radius: 12px;
}

.production-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.production-card {
    background: #101e23;
    border: 1px solid #1d363e;
    border-radius: 10px;
    padding: 22px;
}

.production-card span {
    display: block;
    color: #71858a;
    font-size: 13px;
    margin-bottom: 12px;
}

.production-card strong {
    color: #53d5f3;
    font-size: 30px;
}

.production-card small {
    color: #71858a;
    margin-left: 6px;
}