/* =========================================================
   SMARTWATCH TRACKER
========================================================= */

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


:root {

    --bg: #081323;

    --panel: #142238;

    --panel-light: #1a2b45;

    --border: #263b59;

    --text: #f1f5ff;

    --muted: #8191aa;

    --blue: #2785f5;

    --green: #12c77a;

    --pink: #f53288;

    --red: #f23838;

    --orange: #e98600;

    --purple: #a84dd1;

    --cyan: #1f6478;
}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    font-size:
        13px;

    overflow-x:
        hidden;
}


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

.topbar {

    height:
        58px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        0 28px;

    background:
        #0b1728;

    border-bottom:
        1px solid var(--border);
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.brand-icon {

    width:
        34px;

    height:
        34px;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #20385c;

    font-size:
        18px;
}


.brand-name {

    font-size:
        15px;

    font-weight:
        800;
}


.brand-subtitle {

    color:
        #7390bb;

    font-size:
        9px;

    margin-top:
        2px;
}


.header-right {

    display:
        flex;

    align-items:
        center;

    gap:
        17px;
}


.theme-btn {

    width:
        34px;

    height:
        34px;

    border:
        1px solid var(--border);

    background:
        #172842;

    color:
        #fff;

    border-radius:
        8px;

    cursor:
        pointer;
}


.online-status {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #19d282;

    font-size:
        10px;

    font-weight:
        700;
}


.online-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #19d282;
}


.user-box {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.user-avatar {

    width:
        31px;

    height:
        31px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #2774e8;

    font-weight:
        700;
}


.user-info {

    display:
        flex;

    flex-direction:
        column;
}


.user-info strong {

    font-size:
        11px;
}


.user-info small {

    color:
        #8394ad;

    font-size:
        8px;
}


.logout-btn {

    border:
        none;

    background:
        transparent;

    color:
        #ff5d6e;

    font-weight:
        700;

    font-size:
        10px;

    cursor:
        pointer;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width:
        calc(100% - 56px);

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        17px 0 30px;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-card {

    min-height:
        95px;

    border-radius:
        13px;

    padding:
        20px 28px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    background:
        linear-gradient(
            105deg,
            #1769ed,
            #3b9aeb
        );

    margin-bottom:
        16px;
}


.welcome-label {

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

    margin-bottom:
        6px;
}


.welcome-card h1 {

    font-size:
        21px;

    margin-bottom:
        5px;
}


.welcome-card p {

    font-size:
        10px;

    opacity:
        .9;
}


.welcome-time {

    text-align:
        right;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.welcome-time small {

    font-size:
        9px;
}


.welcome-time strong {

    font-size:
        19px;
}


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

.section-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        8px;
}


.section-header h2 {

    font-size:
        14px;

    margin-bottom:
        3px;
}


.section-header p {

    color:
        var(--muted);

    font-size:
        9px;
}


.device-online {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #15d07f;

    font-size:
        8px;

    font-weight:
        700;
}


.device-online span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #15d07f;
}


/* =========================================================
   STATUS PERANGKAT
========================================================= */

.status-grid {

    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        10px;
}


.status-card {

    min-height:
        132px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        11px;

    padding:
        15px;
}


.card-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        12px;
}


.card-icon {

    width:
        24px;

    height:
        24px;

    border-radius:
        6px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #edf3fc;

    color:
        #2769da;

    font-size:
        12px;

    font-weight:
        800;
}


.heart-icon {

    color:
        #ef405d;
}


.card-title {

    font-size:
        9px;

    color:
        #9baac0;

    margin-bottom:
        6px;
}


.card-value {

    font-size:
        23px;

    font-weight:
        800;

    margin-bottom:
        6px;
}


.card-value small {

    font-size:
        8px;

    font-weight:
        500;

    color:
        #8798af;
}


.card-description {

    font-size:
        8px;

    color:
        #8191a8;
}


.badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        3px 7px;

    border-radius:
        10px;

    font-size:
        7px;

    font-weight:
        800;
}


.badge.live {

    color:
        #09be76;

    background:
        #e6fff4;
}


.badge.active {

    color:
        #0bc77b;

    background:
        #e5fff4;
}


.heart-progress {

    width:
        100%;

    height:
        4px;

    background:
        #e7edf5;

    border-radius:
        5px;

    overflow:
        hidden;

    margin:
        8px 0 5px;
}


.heart-progress div {

    width:
        62%;

    height:
        100%;

    background:
        #ef4354;
}


/* =========================================================
   PANEL
========================================================= */

.panel {

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        10px;

    overflow:
        hidden;
}


.panel-header {

    min-height:
        48px;

    padding:
        10px 12px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.panel-header h2 {

    font-size:
        13px;

    margin-bottom:
        3px;
}


.panel-header p {

    font-size:
        8px;

    color:
        var(--muted);
}


.panel-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.small-icon-btn {

    width:
        27px;

    height:
        27px;

    border:
        1px solid #315075;

    border-radius:
        6px;

    background:
        #172a46;

    color:
        #fff;

    cursor:
        pointer;
}


/* =========================================================
   CAMERA + GPS + RIGHT COLUMN
========================================================= */

.main-monitor-grid {

    display:
        grid;

    grid-template-columns:
        1.35fr
        1.15fr
        .9fr;

    gap:
        10px;

    margin-bottom:
        10px;

    align-items:
        stretch;
}


.camera-panel,
.map-panel {

    height:
        320px;
}


.right-monitor-column {

    height:
        320px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


/* =========================================================
   CAMERA
========================================================= */

.camera-panel {

    display:
        flex;

    flex-direction:
        column;
}


.camera-feed {

    flex:
        1;

    min-height:
        0;

    margin:
        0 10px;

    border-radius:
        8px;

    background:
        #02060b;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .08
        );

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;
}


.camera-placeholder {

    width:
        68%;

    max-width:
        390px;

    min-height:
        130px;

    padding:
        20px;

    border:
        1px solid #31577e;

    background:
        #111f34;

    border-radius:
        8px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    gap:
        7px;
}


.camera-big-icon {

    font-size:
        24px;
}


.camera-placeholder strong {

    font-size:
        12px;
}


.camera-placeholder span {

    font-size:
        9px;

    color:
        #8799b2;
}


.camera-footer {

    height:
        30px;

    padding:
        0 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    font-size:
        8px;

    color:
        #8292aa;
}


.camera-offline {

    color:
        #f14359;

    font-weight:
        700;
}


#cameraVideo {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   GPS
========================================================= */

.map-panel {

    display:
        flex;

    flex-direction:
        column;
}


#map {

    flex:
        1;

    min-height:
        0;

    margin:
        0 10px;

    border-radius:
        8px;

    overflow:
        hidden;
}


.coordinates {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px;

    padding:
        8px 10px 10px;
}


.coordinate-box {

    background:
        #1b2d49;

    border-radius:
        6px;

    padding:
        7px 9px;
}


.coordinate-box span {

    display:
        block;

    font-size:
        7px;

    color:
        #7f93ae;

    margin-bottom:
        2px;
}


.coordinate-box strong {

    font-size:
        9px;
}


/* =========================================================
   SYSTEM MODE CONTROL
========================================================= */

.mode-control-panel {

    min-height:
        125px;

    flex-shrink:
        0;
}


.mode-buttons {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding:
        0 10px;

    margin-bottom:
        8px;
}


.mode-btn {

    height:
        32px;

    border:
        none;

    border-radius:
        6px;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.mode-btn.manual,
.mode-btn.auto {

    background:
        #293d70;
}


.mode-btn.manual.active {

    background:
        #f53288;
}


.mode-btn.auto.active {

    background:
        #2769dd;
}


.mode-btn:hover {

    filter:
        brightness(1.1);
}


.system-status {

    margin:
        0 10px 8px;

    height:
        30px;

    border-radius:
        6px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        8px;

    font-weight:
        800;
}


.system-status.inactive {

    background:
        #f2382f;

    color:
        white;
}


.system-status.active {

    background:
        #12b968;

    color:
        white;
}


.mode-status-info {

    margin:
        0 10px;

    padding:
        7px 9px;

    border-radius:
        6px;

    background:
        #1c2d48;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    font-size:
        7px;

    color:
        #8293aa;
}


.mode-status-info strong {

    color:
        #ffffff;
}


/* =========================================================
   INFORMASI PERANGKAT
========================================================= */

.device-panel {

    flex:
        1;

    min-height:
        0;
}


.device-main {

    height:
        75px;

    margin:
        0 10px 6px;

    border-radius:
        8px;

    background:
        #172944;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;
}


.device-watch-icon {

    width:
        30px;

    height:
        30px;

    border-radius:
        9px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        #294d7c;

    margin-bottom:
        3px;

    font-size:
        15px;
}


.device-main span {

    font-size:
        6px;

    color:
        #8294ac;
}


.device-main strong {

    font-size:
        10px;
}


.device-details {

    padding:
        0 10px;
}


.detail-row {

    min-height:
        28px;

    border-bottom:
        1px solid #293c58;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;
}


.detail-row:last-child {

    border-bottom:
        none;
}


.detail-row span {

    color:
        #8192aa;

    font-size:
        7px;
}


.detail-row strong {

    font-size:
        7px;

    text-align:
        right;
}


.status-online {

    color:
        #12d181;
}


/* =========================================================
   DRIVER + GRAPH
========================================================= */

.driver-chart-grid {

    display:
        grid;

    grid-template-columns:
        .9fr
        .9fr
        .9fr
        .9fr
        2.8fr;

    gap:
        10px;

    margin-bottom:
        10px;

    align-items:
        stretch;
}


.driver-card,
.heart-panel {

    min-height:
        142px;
}


.driver-card {

    padding:
        15px;
}


.driver-status-value {

    color:
        #10d27e;

    font-size:
        25px;

    font-weight:
        900;

    margin:
        13px 0 8px;
}


.driver-number {

    font-size:
        25px;

    font-weight:
        800;

    margin:
        13px 0 8px;
}


.heart-panel {

    display:
        flex;

    flex-direction:
        column;
}


.chart-label {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    font-size:
        8px;

    color:
        #a1b0c5;
}


.chart-label span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #f73e76;
}


.chart-container {

    position:
        relative;

    flex:
        1;

    min-height:
        80px;

    padding:
        0 10px 10px;
}


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

.bottom-grid {

    display:
        grid;

    grid-template-columns:
        1.55fr
        1fr;

    gap:
        10px;

    align-items:
        stretch;
}


.bottom-grid > .panel {

    min-height:
        205px;
}


/* =========================================================
   CALIBRATION
========================================================= */

.calibration-panel {

    padding-bottom:
        10px;
}


.calibration-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    padding:
        0 12px;

    margin-top:
        4px;
}


.calibration-step {

    padding:
        0 12px;

    border-right:
        1px solid #30435d;
}


.calibration-step:first-child {

    padding-left:
        0;
}


.calibration-step:last-child {

    border-right:
        none;

    padding-right:
        0;
}


.calibration-step h3 {

    font-size:
        10px;

    margin-bottom:
        6px;
}


.calibration-step p {

    color:
        #8a9ab0;

    font-size:
        8px;

    line-height:
        1.45;

    min-height:
        25px;

    margin-bottom:
        8px;
}


.calibration-buttons {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}


.calibration-btn {

    border:
        none;

    border-radius:
        6px;

    min-height:
        32px;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.calibration-btn:hover {

    filter:
        brightness(1.08);
}


.calibration-btn.awake {

    background:
        #13a94f;
}


.calibration-btn.drowsy {

    background:
        #f03324;
}


.calibration-btn.stop {

    background:
        #4b4b4b;
}


.calibration-btn.calculate {

    background:
        #1689e9;
}


.calibration-btn.apply {

    background:
        #ac54c7;
}


.calibration-btn.reset {

    background:
        #dc8200;
}


.calibration-btn.default {

    background:
        #23556a;
}


.calibration-bottom-buttons {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding:
        0 12px;

    margin-top:
        12px;
}


.calibration-message {

    padding:
        9px 12px 0;

    font-size:
        8px;

    color:
        #8293aa;
}


/* =========================================================
   SYSTEM INFO
========================================================= */

.system-info-content {

    display:
        grid;

    gap:
        9px;

    padding:
        0 12px;
}


.mode-info {

    padding:
        12px;

    border-radius:
        7px;

    background:
        #1a2c47;

    border-left:
        5px solid;
}


.manual-info {

    border-left-color:
        #f23880;
}


.auto-info {

    border-left-color:
        #258af0;
}


.mode-info-title {

    font-size:
        11px;

    font-weight:
        800;

    margin-bottom:
        4px;
}


.mode-info p {

    font-size:
        8px;

    color:
        #9bacbf;

    line-height:
        1.55;
}


.mode-info strong {

    color:
        #ffffff;
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light {

    --bg:
        #eef3f9;

    --panel:
        #ffffff;

    --border:
        #d8e0ea;

    --text:
        #18243a;

    --muted:
        #718096;
}


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

@media (max-width: 1250px) {

    .status-grid {

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


    .main-monitor-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .right-monitor-column {

        grid-column:
            1 / -1;

        height:
            auto;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .driver-chart-grid {

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


    .heart-panel {

        grid-column:
            1 / -1;
    }


    .bottom-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 800px) {

    .topbar {

        padding:
            0 15px;
    }


    .header-right {

        gap:
            8px;
    }


    .user-info,
    .theme-btn {

        display:
            none;
    }


    .container {

        width:
            calc(100% - 24px);
    }


    .welcome-card {

        padding:
            17px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;
    }


    .welcome-time {

        text-align:
            left;
    }


    .status-grid {

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


    .main-monitor-grid {

        grid-template-columns:
            1fr;
    }


    .camera-panel,
    .map-panel {

        height:
            320px;
    }


    .right-monitor-column {

        grid-column:
            auto;

        display:
            flex;

        height:
            320px;
    }


    .driver-chart-grid {

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


    .heart-panel {

        grid-column:
            1 / -1;
    }


    .calibration-layout {

        grid-template-columns:
            1fr;
    }


    .calibration-step {

        padding:
            12px 0;

        border-right:
            none;

        border-bottom:
            1px solid #30435d;
    }


    .calibration-step:last-child {

        border-bottom:
            none;
    }

}


@media (max-width: 500px) {

    .status-grid {

        grid-template-columns:
            1fr;
    }


    .driver-chart-grid {

        grid-template-columns:
            1fr;
    }


    .heart-panel {

        grid-column:
            auto;
    }


    .calibration-buttons {

        grid-template-columns:
            1fr 1fr;
    }


    .calibration-bottom-buttons {

        grid-template-columns:
            1fr;
    }


    .camera-placeholder {

        width:
            85%;
    }

}

/* =========================================================
   LOGIN PAGE
========================================================= */

body.login-page {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        radial-gradient(
            circle at top,
            #142a48 0%,
            #081323 45%,
            #050c16 100%
        );

    color:
        var(--text);
}


/* =========================================================
   LOGIN CONTAINER
========================================================= */

.login-container {

    width:
        100%;

    max-width:
        430px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


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

.login-logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        18px;
}


.logo-icon {

    width:
        52px;

    height:
        52px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #2785f5,
            #1769ed
        );

    box-shadow:
        0 10px 30px
        rgba(
            39,
            133,
            245,
            .25
        );

    font-size:
        26px;
}


.login-logo h1 {

    font-size:
        24px;

    font-weight:
        800;

    line-height:
        1.1;

    color:
        #ffffff;
}


.login-logo span {

    display:
        block;

    margin-top:
        3px;

    color:
        #8191aa;

    font-size:
        11px;

    letter-spacing:
        1px;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    width:
        100%;

    padding:
        28px;

    background:
        rgba(
            20,
            34,
            56,
            .96
        );

    border:
        1px solid var(--border);

    border-radius:
        16px;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            .35
        );
}


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

.login-header {

    margin-bottom:
        24px;
}


.login-header h2 {

    font-size:
        20px;

    font-weight:
        800;

    margin-bottom:
        7px;
}


.login-header p {

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {

    margin-bottom:
        16px;
}


.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #b8c5d8;

    font-size:
        10px;

    font-weight:
        700;
}


/* =========================================================
   INPUT
========================================================= */

.form-group input[type="text"],
.form-group input[type="password"] {

    width:
        100%;

    height:
        42px;

    padding:
        0 12px;

    border:
        1px solid #304764;

    border-radius:
        8px;

    outline:
        none;

    background:
        #0d1c30;

    color:
        #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    transition:
        .2s ease;
}


.form-group input[type="text"]::placeholder,
.form-group input[type="password"]::placeholder {

    color:
        #657993;
}


.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {

    border-color:
        #2785f5;

    box-shadow:
        0 0 0 3px
        rgba(
            39,
            133,
            245,
            .12
        );
}


/* =========================================================
   PASSWORD WRAPPER
========================================================= */

.password-wrapper {

    position:
        relative;

    width:
        100%;
}


.password-wrapper input {

    padding-right:
        45px !important;
}


.password-toggle {

    position:
        absolute;

    top:
        50%;

    right:
        6px;

    transform:
        translateY(-50%);

    width:
        32px;

    height:
        32px;

    border:
        none;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #8da0ba;

    cursor:
        pointer;

    font-size:
        14px;
}


.password-toggle:hover {

    background:
        #1b2d49;

    color:
        #ffffff;
}


/* =========================================================
   LOGIN OPTIONS
========================================================= */

.login-options {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin:
        2px 0 15px;
}


.remember {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #9aabc0;

    font-size:
        10px;

    cursor:
        pointer;
}


.remember input {

    width:
        14px;

    height:
        14px;

    accent-color:
        #2785f5;

    cursor:
        pointer;
}


/* =========================================================
   LOGIN MESSAGE
========================================================= */

.login-message {

    min-height:
        18px;

    margin-bottom:
        8px;

    color:
        #f23838;

    font-size:
        10px;

    line-height:
        1.4;

    text-align:
        center;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-button {

    width:
        100%;

    height:
        43px;

    border:
        none;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #2785f5,
            #1769ed
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .5px;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(
            39,
            133,
            245,
            .2
        );

    transition:
        .2s ease;
}


.login-button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 10px 25px
        rgba(
            39,
            133,
            245,
            .3
        );
}


.login-button:active {

    transform:
        translateY(0);
}


.login-button:disabled {

    opacity:
        .6;

    cursor:
        not-allowed;

    transform:
        none;
}


/* =========================================================
   LOGIN INFO
========================================================= */

.login-info {

    margin-top:
        18px;

    text-align:
        center;

    color:
        #71839c;

    font-size:
        9px;
}


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

.login-footer {

    margin-top:
        18px;

    color:
        #5f718a;

    font-size:
        9px;

    text-align:
        center;
}


/* =========================================================
   LOGIN LIGHT MODE
========================================================= */

body.login-page.light {

    background:
        linear-gradient(
            135deg,
            #eef3f9,
            #dfe8f3
        );

    color:
        #18243a;
}


body.login-page.light .login-card {

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    border-color:
        #d8e0ea;

    box-shadow:
        0 20px 60px
        rgba(
            45,
            65,
            90,
            .15
        );
}


body.login-page.light .login-logo h1 {

    color:
        #18243a;
}


body.login-page.light .login-header p {

    color:
        #718096;
}


body.login-page.light .form-group label {

    color:
        #52647c;
}


body.login-page.light .form-group input[type="text"],
body.login-page.light .form-group input[type="password"] {

    background:
        #f7f9fc;

    color:
        #18243a;

    border-color:
        #ccd7e5;
}


body.login-page.light .remember {

    color:
        #718096;
}


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

@media (max-width: 500px) {

    body.login-page {

        padding:
            15px;
    }


    .login-logo {

        margin-bottom:
            14px;
    }


    .logo-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            22px;
    }


    .login-logo h1 {

        font-size:
            21px;
    }


    .login-card {

        padding:
            22px;

        border-radius:
            13px;
    }


    .login-header h2 {

        font-size:
            18px;
    }

}

/* =========================================================
   DROWSINESS HISTORY
   TAMBAHAN SAJA
========================================================= */

.drowsiness-history-panel {

    width:
        100%;

    margin-top:
        10px;

    min-height:
        210px;

}


/* =========================================================
   HISTORY TABLE WRAPPER
========================================================= */

.history-table-wrapper {

    margin:
        0 10px 10px;

    max-height:
        235px;

    overflow-y:
        auto;

    overflow-x:
        auto;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    background:
        rgba(
            8,
            19,
            35,
            .35
        );

}


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

.history-table-wrapper::-webkit-scrollbar {

    width:
        7px;

    height:
        7px;

}


.history-table-wrapper::-webkit-scrollbar-track {

    background:
        #0d1b2e;

}


.history-table-wrapper::-webkit-scrollbar-thumb {

    background:
        #30496c;

    border-radius:
        10px;

}


.history-table-wrapper::-webkit-scrollbar-thumb:hover {

    background:
        #42658f;

}


/* =========================================================
   HISTORY TABLE
========================================================= */

.history-table {

    width:
        100%;

    min-width:
        850px;

    border-collapse:
        collapse;

    font-size:
        10px;

}


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

.history-table thead {

    position:
        sticky;

    top:
        0;

    z-index:
        5;

}


.history-table th {

    padding:
        9px 8px;

    background:
        #172842;

    color:
        #dce8f8;

    border-bottom:
        1px solid var(--border);

    text-align:
        left;

    font-size:
        9px;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
   TABLE BODY
========================================================= */

.history-table td {

    padding:
        9px 8px;

    color:
        #dce5f3;

    border-bottom:
        1px solid
        rgba(
            38,
            59,
            89,
            .65
        );

    vertical-align:
        middle;

}


.history-table tbody tr:hover {

    background:
        rgba(
            39,
            133,
            245,
            .06
        );

}


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

.history-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #ffffff;

    font-weight:
        700;

    white-space:
        nowrap;

}


.history-status-dot {

    width:
        8px;

    height:
        8px;

    min-width:
        8px;

    border-radius:
        50%;

    background:
        #f23838;

    box-shadow:
        0 0 7px
        rgba(
            242,
            56,
            56,
            .55
        );

}


/* =========================================================
   LOCATION
========================================================= */

.history-location {

    white-space:
        nowrap;

}


/* =========================================================
   EMPTY
========================================================= */

.history-empty {

    padding:
        25px 10px !important;

    text-align:
        center !important;

    color:
        var(--muted) !important;

}


/* =========================================================
   NOTIFICATION CONTAINER
========================================================= */

.notification-container {

    position:
        fixed;

    top:
        68px;

    right:
        20px;

    width:
        360px;

    max-width:
        calc(
            100vw - 30px
        );

    z-index:
        99999;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    pointer-events:
        none;

}


/* =========================================================
   NOTIFICATION TOAST
========================================================= */

.notification-toast {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    width:
        100%;

    min-height:
        67px;

    padding:
        11px 12px;

    background:
        #142238;

    border:
        1px solid #29415f;

    border-left:
        3px solid #f53288;

    border-radius:
        8px;

    box-shadow:
        0 12px 32px
        rgba(
            0,
            0,
            0,
            .38
        );

    pointer-events:
        auto;

    animation:
        notificationSlideIn
        .28s ease
        forwards;

}


/* =========================================================
   NOTIFICATION ICON
========================================================= */

.notification-icon {

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f53288;

    color:
        #ffffff;

    font-size:
        18px;

}


/* =========================================================
   NOTIFICATION CONTENT
========================================================= */

.notification-content {

    flex:
        1;

    min-width:
        0;

    padding-right:
        12px;

}


.notification-title {

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    margin-bottom:
        3px;

}


.notification-message {

    color:
        #9aacbf;

    font-size:
        10px;

    line-height:
        1.4;

}


.notification-time {

    color:
        #72869e;

    font-size:
        8px;

    margin-top:
        4px;

}


/* =========================================================
   NOTIFICATION CLOSE
========================================================= */

.notification-close {

    position:
        absolute;

    top:
        5px;

    right:
        6px;

    width:
        20px;

    height:
        20px;

    border:
        none;

    background:
        transparent;

    color:
        #8191aa;

    cursor:
        pointer;

    font-size:
        15px;

    line-height:
        20px;

}


.notification-close:hover {

    color:
        #ffffff;

}


/* =========================================================
   NOTIFICATION ANIMATION
========================================================= */

@keyframes notificationSlideIn {

    from {

        opacity:
            0;

        transform:
            translateX(
                35px
            );

    }

    to {

        opacity:
            1;

        transform:
            translateX(
                0
            );

    }

}


@keyframes notificationSlideOut {

    from {

        opacity:
            1;

        transform:
            translateX(
                0
            );

    }

    to {

        opacity:
            0;

        transform:
            translateX(
                35px
            );

    }

}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light .history-table-wrapper {

    background:
        rgba(
            255,
            255,
            255,
            .65
        );

}


body.light .history-table th {

    background:
        #e8eef7;

    color:
        #1b2b42;

}


body.light .history-table td {

    color:
        #34465e;

}


body.light .notification-toast {

    background:
        #ffffff;

    border-color:
        #d5dfeb;

    box-shadow:
        0 12px 32px
        rgba(
            45,
            65,
            90,
            .20
        );

}


body.light .notification-title {

    color:
        #1b2b42;

}


body.light .notification-message {

    color:
        #66778d;

}


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

@media (max-width: 800px) {

    .notification-container {

        top:
            65px;

        right:
            10px;

        width:
            340px;

    }


    .history-table-wrapper {

        margin-left:
            8px;

        margin-right:
            8px;

    }

}


@media (max-width: 500px) {

    .notification-container {

        width:
            calc(
                100vw - 20px
            );

        right:
            10px;

    }


    .notification-toast {

        min-height:
            62px;

        padding:
            10px;

    }

}