/* =========================================================
   HYDROSENSE - MAIN CSS
   TEAM ANTASENA
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(16, 106, 150, 0.08),
            transparent 35%
        ),
        #061522;

    color: #f4f8fc;

    min-height: 100vh;

    overflow-x: hidden;
}


button,
select {
    font-family: inherit;
}


button {
    outline: none;
}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --bg: #061522;
    --bg-2: #081b2b;

    --sidebar: #071827;

    --card: #0b2132;
    --card-2: #0d2638;

    --border:
        rgba(76, 177, 224, 0.18);

    --cyan:
        #20c8ff;

    --cyan-dark:
        #079bd0;

    --blue:
        #4caeff;

    --green:
        #13d99a;

    --red:
        #ff5365;

    --yellow:
        #ffb21c;

    --text:
        #f4f8fc;

    --text-2:
        #8eafc8;

    --text-3:
        #62849e;

    --sidebar-width:
        360px;
}


/* =========================================================
   APP
   ========================================================= */

.app {

    display: flex;

    width: 100%;

    min-height: 100vh;
}


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

.sidebar {

    width:
        var(--sidebar-width);

    min-width:
        var(--sidebar-width);

    height:
        100vh;

    min-height:
        100vh;

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    display:
        flex;

    flex-direction:
        column;

    padding:
        42px 26px 24px;

    background:
        linear-gradient(
            180deg,
            #061522 0%,
            #071b2b 100%
        );

    border-right:
        1px solid
        rgba(95, 185, 225, 0.15);
}


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

.sidebar-top {

    width: 100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-container {

    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;
}


.antasena-logo {

    width:
        118px;

    height:
        118px;

    display:
        block;

    object-fit:
        contain;

    border-radius:
        50%;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {

    text-align:
        center;

    margin-bottom:
        42px;
}


.brand h1 {

    font-size:
        34px;

    font-weight:
        800;

    letter-spacing:
        -1.5px;

    color:
        #f6f9fc;
}


.brand p {

    margin-top:
        8px;

    color:
        #6f9abb;

    font-size:
        17px;
}


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

.sidebar-menu {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.menu-item {

    width:
        100%;

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        0 24px;

    border-radius:
        17px;

    border-left:
        4px solid
        transparent;

    color:
        #769ab5;

    font-size:
        18px;

    font-weight:
        600;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.menu-item:hover {

    background:
        rgba(23, 150, 201, 0.09);

    color:
        #d9f4ff;
}


.menu-item.active {

    background:
        linear-gradient(
            90deg,
            rgba(13, 153, 207, 0.24),
            rgba(12, 88, 123, 0.32)
        );

    border-left-color:
        var(--cyan);

    color:
        #ffffff;
}


.menu-icon {

    width:
        30px;

    min-width:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--cyan);

    font-size:
        22px;
}


/* =========================================================
   TEAM
   ========================================================= */

.sidebar-team {

    width:
        100%;

    margin-top:
        auto;

    padding:
        22px;

    text-align:
        center;

    border-radius:
        18px;

    border:
        1px solid
        rgba(67, 155, 201, 0.20);

    background:
        rgba(9, 34, 52, 0.70);
}


.sidebar-team span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #50748e;

    font-size:
        11px;

    letter-spacing:
        3px;
}


.sidebar-team strong {

    color:
        var(--cyan);

    font-size:
        17px;

    letter-spacing:
        0.5px;
}


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

.main-content {

    flex:
        1;

    min-width:
        0;

    padding:
        54px 54px 40px;
}


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

.top-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        34px;
}


.header-title h2 {

    color:
        #f5f9fc;

    font-size:
        38px;

    font-weight:
        800;

    letter-spacing:
        -1.4px;
}


.header-title p {

    margin-top:
        10px;

    color:
        #6188a5;

    font-size:
        16px;
}


.header-status {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    white-space:
        nowrap;

    color:
        #6d95b0;
}


.online-indicator {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #65a1c3;
}


.status-dot {

    width:
        10px;

    height:
        10px;

    display:
        inline-block;

    border-radius:
        50%;
}


.status-dot.green {

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(19, 217, 154, 0.08),

        0 0 15px
        rgba(19, 217, 154, 0.40);
}


.current-time {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #62849f;
}


/* =========================================================
   CONNECTION ALERT
   ========================================================= */

.connection-alert {

    width:
        100%;

    min-height:
        90px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-bottom:
        28px;

    padding:
        18px 24px;

    border-radius:
        18px;

    border:
        1px solid
        rgba(28, 181, 237, 0.25);

    background:
        linear-gradient(
            90deg,
            rgba(8, 71, 101, 0.70),
            rgba(9, 46, 67, 0.75)
        );
}


.alert-icon {

    width:
        50px;

    height:
        50px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        rgba(12, 177, 231, 0.13);

    color:
        var(--cyan);

    font-size:
        20px;
}


.alert-content h3 {

    margin-bottom:
        7px;

    font-size:
        16px;
}


.alert-content p {

    color:
        #5f8ca7;

    font-size:
        14px;
}


.alert-content strong {

    color:
        #e9f8ff;
}


.separator {

    margin:
        0 8px;
}


/* =========================================================
   SENSOR GRID
   ========================================================= */

.sensor-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-bottom:
        38px;
}


.sensor-card {

    min-height:
        225px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        26px;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #0b2234,
            #091d2c
        );

    border:
        1px solid
        rgba(70, 157, 201, 0.20);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.12);
}


.sensor-card::after {

    content:
        "";

    position:
        absolute;

    width:
        95px;

    height:
        95px;

    right:
        -25px;

    bottom:
        -25px;

    border-radius:
        50% 0 0 0;

    background:
        rgba(24, 143, 191, 0.07);
}


.sensor-card-header {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.sensor-icon {

    width:
        43px;

    height:
        43px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(24, 156, 211, 0.12);

    color:
        var(--cyan);

    font-size:
        18px;
}


.tds-icon {
    color:
        #3ccaff;
}


.rain-icon {
    color:
        #65b8ff;
}


.water-level-icon {
    color:
        #42c6ff;
}


.flood-icon {
    color:
        #ffb21c;
}


.sensor-name {

    flex:
        1;

    min-width:
        0;

    color:
        #80a7c1;

    font-size:
        15px;
}


.sensor-status {

    padding:
        7px 11px;

    border-radius:
        7px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

    white-space:
        nowrap;
}


.status-normal {

    background:
        rgba(19, 217, 154, 0.12);

    color:
        var(--green);
}


.status-safe {

    background:
        rgba(19, 217, 154, 0.12);

    color:
        var(--green);
}


.status-warning {

    background:
        rgba(255, 178, 28, 0.12);

    color:
        var(--yellow);
}


.status-danger {

    background:
        rgba(255, 83, 101, 0.12);

    color:
        var(--red);
}


.sensor-value {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    margin-top:
        28px;
}


.sensor-value span {

    font-size:
        36px;

    font-weight:
        800;

    letter-spacing:
        -1px;
}


.sensor-value small {

    color:
        #7397b0;

    font-size:
        13px;
}


.rain-text-value span {

    font-size:
        25px;

    letter-spacing:
        -0.5px;
}


.sensor-progress {

    position:
        relative;

    z-index:
        2;

    height:
        7px;

    overflow:
        hidden;

    margin-top:
        20px;

    border-radius:
        20px;

    background:
        #17374b;
}


.progress-bar {

    width:
        40%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #0b9ed0,
            #32d0ff
        );

    transition:
        width 0.5s ease;
}


.sensor-info {

    position:
        relative;

    z-index:
        2;

    margin-top:
        15px;

    color:
        #6387a1;

    font-size:
        12px;
}


/* =========================================================
   FLOOD
   ========================================================= */

.flood-card.flood-active {

    border-color:
        rgba(255, 83, 101, 0.35);

    box-shadow:

        0 0 0 1px
        rgba(255, 83, 101, 0.08),

        0 15px 35px
        rgba(255, 50, 70, 0.10);
}


.flood-indicator {

    position:
        relative;

    z-index:
        2;

    height:
        12px;

    display:
        flex;

    align-items:
        center;

    margin-top:
        17px;
}


.flood-indicator span {

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:

        0 0 0 5px
        rgba(19, 217, 154, 0.10),

        0 0 15px
        rgba(19, 217, 154, 0.28);
}


.flood-indicator.active span {

    background:
        var(--red);

    box-shadow:

        0 0 0 5px
        rgba(255, 83, 101, 0.10),

        0 0 15px
        rgba(255, 83, 101, 0.35);
}


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

.monitoring-section {

    margin-top:
        12px;

    margin-bottom:
        38px;
}


.section-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        20px;

    margin-bottom:
        18px;
}


.section-header h2 {

    font-size:
        20px;

    font-weight:
        750;
}


.section-header h2 i {

    margin-right:
        9px;

    color:
        var(--cyan);
}


.section-header p {

    margin-top:
        7px;

    color:
        #6489a3;

    font-size:
        13px;
}


/* =========================================================
   MAP LEGEND
   ========================================================= */

.map-legend {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}


.legend-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #6b91aa;

    font-size:
        12px;
}


.legend-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;
}


.legend-dot.online {
    background:
        var(--green);
}


.legend-dot.offline {
    background:
        var(--red);
}


.legend-dot.warning {
    background:
        var(--yellow);
}


/* =========================================================
   MAP LAYOUT
   ========================================================= */

.map-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(330px, 0.95fr);

    gap:
        20px;

    align-items:
        stretch;
}


/* =========================================================
   MAP WRAPPER
   ========================================================= */

.map-wrapper {

    position:
        relative;

    width:
        100%;

    height:
        510px;

    overflow:
        hidden;

    border-radius:
        22px;

    border:
        1px solid
        rgba(65, 157, 203, 0.28);

    background:
        #d7f5e5;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.20);
}


.device-map {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        #d7f5e5;
}


/* =========================================================
   MANUAL MAP
   ========================================================= */

.manual-map {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        #d7f5e5;
}


.manual-map-image {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        fill;

    z-index:
        1;

    user-select:
        none;

    pointer-events:
        none;

    -webkit-user-drag:
        none;
}


.manual-map-markers {

    position:
        absolute;

    inset:
        0;

    z-index:
        10;

    pointer-events:
        none;
}


/* =========================================================
   MANUAL DEVICE MARKER
   ========================================================= */

.manual-device-marker {

    position:
        absolute;

    width:
        36px;

    height:
        36px;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    pointer-events:
        auto;

    z-index:
        20;

    transition:
        transform 0.18s ease;
}


.manual-device-marker:hover {

    transform:
        translate(-50%, -50%)
        scale(1.18);
}


.manual-marker-dot {

    display:
        block;

    width:
        22px;

    height:
        22px;

    border:
        4px solid
        white;

    border-radius:
        50%;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.35);
}


/* ONLINE */

.manual-device-marker.online
.manual-marker-dot {

    background:
        var(--green);

    box-shadow:

        0 0 0 6px
        rgba(19, 217, 154, 0.20),

        0 4px 12px
        rgba(0, 0, 0, 0.35);
}


/* OFFLINE */

.manual-device-marker.offline
.manual-marker-dot {

    background:
        var(--red);

    box-shadow:

        0 0 0 6px
        rgba(255, 83, 101, 0.18),

        0 4px 12px
        rgba(0, 0, 0, 0.35);
}


/* WARNING */

.manual-device-marker.warning
.manual-marker-dot {

    background:
        var(--yellow);

    box-shadow:

        0 0 0 6px
        rgba(255, 178, 28, 0.20),

        0 4px 12px
        rgba(0, 0, 0, 0.35);
}


/* SELECTED */

.manual-device-marker.selected {

    transform:
        translate(-50%, -50%)
        scale(1.2);

    z-index:
        30;
}


.manual-device-marker.selected
.manual-marker-dot {

    width:
        27px;

    height:
        27px;
}


/* =========================================================
   DEVICE LIST
   ========================================================= */

.device-list-panel {

    width:
        100%;

    height:
        510px;

    overflow:
        hidden;

    border-radius:
        22px;

    border:
        1px solid
        rgba(69, 159, 203, 0.20);

    background:
        linear-gradient(
            145deg,
            #0b2234,
            #081c2b
        );
}


.panel-header {

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 25px;

    border-bottom:
        1px solid
        rgba(76, 161, 199, 0.15);
}


.panel-header h3 {

    font-size:
        16px;
}


.panel-header i {

    margin-right:
        9px;

    color:
        var(--cyan);
}


.device-item {

    min-height:
        106px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        16px 22px;

    border-bottom:
        1px solid
        rgba(77, 154, 190, 0.13);

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.device-item:hover {

    background:
        rgba(23, 152, 203, 0.08);
}


.device-item.active-device {

    background:
        linear-gradient(
            90deg,
            rgba(17, 153, 207, 0.12),
            transparent
        );

    border-left:
        3px solid
        var(--cyan);
}


.device-status-dot {

    width:
        10px;

    height:
        10px;

    flex-shrink:
        0;

    border-radius:
        50%;
}


.device-status-dot.online {
    background:
        var(--green);
}


.device-status-dot.offline {
    background:
        var(--red);
}


.device-status-dot.warning {
    background:
        var(--yellow);
}


.device-information {

    min-width:
        0;

    flex:
        1;
}


.device-name-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.device-name-row strong {

    font-size:
        14px;
}


.device-badge {

    padding:
        5px 8px;

    border-radius:
        6px;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.device-badge.online {

    background:
        rgba(19, 217, 154, 0.10);

    color:
        var(--green);
}


.device-badge.offline {

    background:
        rgba(255, 83, 101, 0.10);

    color:
        var(--red);
}


.device-badge.warning {

    background:
        rgba(255, 178, 28, 0.10);

    color:
        var(--yellow);
}


.device-location {

    display:
        block;

    margin-top:
        7px;

    color:
        #59809b;

    font-size:
        11px;
}


.device-mini-data {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        9px;

    color:
        #5d839d;

    font-size:
        9px;
}


.device-mini-data b {

    color:
        #b7d6e8;

    font-weight:
        600;
}


.device-item > i {

    color:
        #527a95;

    font-size:
        12px;
}


/* =========================================================
   SELECTED DEVICE
   ========================================================= */

.selected-device {

    margin-bottom:
        38px;

    padding:
        25px;

    border-radius:
        20px;

    border:
        1px solid
        rgba(65, 157, 203, 0.18);

    background:
        linear-gradient(
            145deg,
            #0b2437,
            #091e2e
        );
}


.selected-device-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(72, 155, 195, 0.14);
}


.section-label {

    color:
        #4f7c96;

    font-size:
        10px;

    letter-spacing:
        2px;
}


.selected-device-header h2 {

    margin-top:
        5px;

    font-size:
        22px;
}


.selected-status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        11px;

    font-weight:
        800;
}


.selected-status span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--green);
}


.selected-status.online {
    color:
        var(--green);
}


.selected-status.offline {
    color:
        var(--red);
}


.selected-status.warning {
    color:
        var(--yellow);
}


.selected-status.offline span {
    background:
        var(--red);
}


.selected-status.warning span {
    background:
        var(--yellow);
}


.selected-sensor-grid {

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        12px;

    margin-top:
        20px;
}


.selected-sensor {

    padding:
        17px;

    border-radius:
        13px;

    border:
        1px solid
        rgba(67, 150, 191, 0.12);

    background:
        rgba(8, 29, 44, 0.70);
}


.selected-sensor span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #6287a0;

    font-size:
        11px;
}


.selected-sensor strong {

    display:
        block;

    font-size:
        18px;

    word-break:
        break-word;
}


.selected-device-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        18px;

    color:
        #5d839e;

    font-size:
        11px;
}


.selected-device-footer strong {

    color:
        #b7d8e9;
}


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

.chart-section {

    margin-bottom:
        38px;

    padding:
        25px;

    border-radius:
        20px;

    border:
        1px solid
        rgba(69, 157, 201, 0.18);

    background:
        linear-gradient(
            145deg,
            #0b2234,
            #081d2d
        );
}


.chart-select {

    min-width:
        170px;

    padding:
        10px 13px;

    border-radius:
        9px;

    border:
        1px solid
        rgba(68, 157, 201, 0.25);

    outline:
        none;

    background:
        #0a1e2d;

    color:
        #b9d5e6;

    cursor:
        pointer;
}


.chart-select:focus {

    border-color:
        rgba(32, 200, 255, 0.50);
}


.chart-container {

    position:
        relative;

    width:
        100%;

    height:
        320px;

    margin-top:
        10px;
}


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

#sensorChart {

    width:
        100% !important;

    height:
        100% !important;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.activity-section {

    margin-bottom:
        38px;

    padding:
        25px;

    border-radius:
        20px;

    border:
        1px solid
        rgba(69, 157, 201, 0.18);

    background:
        linear-gradient(
            145deg,
            #0b2234,
            #081d2d
        );
}


.view-all-button {

    border:
        none;

    background:
        transparent;

    color:
        var(--cyan);

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        600;
}


.view-all-button:hover {

    color:
        #8ce5ff;
}


.activity-list {

    display:
        flex;

    flex-direction:
        column;
}


.activity-item {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        15px 4px;

    border-bottom:
        1px solid
        rgba(74, 151, 189, 0.12);
}


.activity-icon {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(23, 153, 207, 0.10);

    color:
        var(--cyan);
}


.activity-content {

    min-width:
        0;

    flex:
        1;
}


.activity-content strong {

    display:
        block;

    font-size:
        13px;
}


.activity-content span {

    display:
        block;

    margin-top:
        4px;

    color:
        #62879f;

    font-size:
        11px;
}


/* =========================================================
   DEVICE INFO
   ========================================================= */

.device-info-section {

    display:
        grid;

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

    gap:
        15px;

    margin-bottom:
        35px;
}


.device-info-card {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        18px;

    border-radius:
        15px;

    border:
        1px solid
        rgba(66, 153, 195, 0.15);

    background:
        #0a2031;
}


.device-info-icon {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(22, 156, 210, 0.10);

    color:
        var(--cyan);
}


.info-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #547990;

    font-size:
        9px;

    letter-spacing:
        1.5px;
}


.device-info-card strong {

    color:
        #c5dfec;

    font-size:
        12px;

    word-break:
        break-word;
}


.connection-online {

    color:
        var(--green) !important;
}


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

.footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 5px;

    color:
        #466a82;

    font-size:
        10px;
}


/* =========================================================
   RESPONSIVE 1350px
   ========================================================= */

@media (max-width: 1350px) {

    :root {

        --sidebar-width:
            300px;
    }


    .main-content {

        padding:
            40px 35px;
    }


    .sensor-grid {

        gap:
            15px;
    }


    .sensor-card {

        padding:
            21px;
    }


    .sensor-value span {

        font-size:
            31px;
    }


    .rain-text-value span {

        font-size:
            22px;
    }


    .selected-sensor-grid {

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

}


/* =========================================================
   RESPONSIVE 1100px
   ========================================================= */

@media (max-width: 1100px) {

    :root {

        --sidebar-width:
            250px;
    }


    .main-content {

        padding:
            35px 25px;
    }


    .sensor-grid {

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


    .map-layout {

        grid-template-columns:
            1fr;
    }


    .device-list-panel {

        height:
            auto;
    }


    .device-info-section {

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


    .selected-sensor-grid {

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

}


/* =========================================================
   RESPONSIVE 800px
   ========================================================= */

@media (max-width: 800px) {

    .app {

        display:
            block;
    }


    .sidebar {

        position:
            relative;

        width:
            100%;

        min-width:
            0;

        height:
            auto;

        min-height:
            auto;

        padding:
            25px;

        border-right:
            none;

        border-bottom:
            1px solid
            rgba(70, 157, 201, 0.15);
    }


    .logo-container {

        width:
            90px;

        height:
            90px;
    }


    .antasena-logo {

        width:
            70px;

        height:
            70px;
    }


    .brand {

        margin-bottom:
            25px;
    }


    .sidebar-menu {

        display:
            grid;

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

        gap:
            10px;
    }


    .menu-item {

        height:
            58px;

        font-size:
            15px;
    }


    .sidebar-team {

        margin-top:
            20px;
    }


    .top-header {

        flex-direction:
            column;
    }


    .header-status {

        width:
            100%;

        justify-content:
            space-between;
    }


    .sensor-grid {

        grid-template-columns:
            1fr;
    }


    .selected-sensor-grid {

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


    .device-info-section {

        grid-template-columns:
            1fr;
    }


    .map-wrapper {

        height:
            430px;
    }

}


/* =========================================================
   RESPONSIVE 550px
   ========================================================= */

@media (max-width: 550px) {

    .main-content {

        padding:
            25px 15px;
    }


    .header-title h2 {

        font-size:
            29px;
    }


    .header-title p {

        font-size:
            13px;
    }


    .header-status {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;
    }


    .section-header {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .map-legend {

        gap:
            13px;

        flex-wrap:
            wrap;
    }


    .map-wrapper {

        height:
            350px;

        border-radius:
            18px;
    }


    .device-list-panel {

        border-radius:
            18px;
    }


    .selected-device {

        padding:
            20px;
    }


    .selected-device-header {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .selected-sensor-grid {

        grid-template-columns:
            1fr;
    }


    .selected-device-footer {

        flex-direction:
            column;

        gap:
            8px;
    }


    .chart-section,
    .activity-section {

        padding:
            20px;
    }


    .chart-select {

        width:
            100%;
    }


    .chart-container {

        height:
            260px;
    }


    .sidebar-menu {

        grid-template-columns:
            1fr;
    }


    .menu-item {

        font-size:
            16px;
    }


    .footer {

        flex-direction:
            column;

        gap:
            8px;
    }

}


/* =========================================================
   EXTRA - MAP IMAGE SAFETY
   ========================================================= */

.manual-map img {

    max-width:
        none;
}


/* =========================================================
   EXTRA - PREVENT IMAGE DRAG
   ========================================================= */

.manual-map-image {

    -webkit-user-drag:
        none;

    user-drag:
        none;
}


/* =========================================================
   EXTRA - SCROLL DEVICE LIST ON SMALL HEIGHT
   ========================================================= */

@media (min-width: 801px) {

    .device-list-panel {

        overflow-y:
            auto;

        scrollbar-width:
            thin;

        scrollbar-color:
            #1b526c transparent;
    }

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        7px;

    height:
        7px;
}


::-webkit-scrollbar-track {

    background:
        #061522;
}


::-webkit-scrollbar-thumb {

    background:
        #16465d;

    border-radius:
        20px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #1b607e;
}