@font-face {
    font-family: "Poppins", sans-serif;
}

@font-face {
    font-family: "Poppins", sans-serif;
}

:root {
    --bg-body: #1d2120;
    --color-footer: white;
    --var-bg-form-date-range: #3c3c3c;
    --color-bg-date-range: white;
    --bg-card-calendar: #2f3231;
    --bg-color-footer: #1b1b19;
}

[data-theme="dark"] {
    --bg-body: #f4f4f2;
    --color-footer: #000000;
    --var-bg-form-date-range: #3c3c3c;
    --color-bg-date-range: white;
    --bg-card-calendar: #2f3231;
    --bg-color-footer: white;
}

body {
    overflow-y: hidden;
    overflow-x: hidden;
    background: var(--bg-body);
    font-family: "Poppins", sans-serif;
    margin: 0;
}

/* LAYOUT UTAMA */
.wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    align-items: stretch;
}

.content {
    flex: 1; /* Ambil sisa lebar setelah sidebar */
    height: 100vh; /* Tinggi penuh */
    display: flex;
    flex-direction: column; /* Susunan vertikal (Header -> Section -> Footer) */
    overflow: hidden; /* Hide scroll content utama (biar section yang scroll) */
    padding: 0px;
    min-height: 100vh;
    background: var(--bg-body);
    transition: all 0.3s;
}

/* Section Dashboard  */
section {
    flex: 1; /* Ambil SEMUA sisa ruang vertikal */
    width: 100%;
    padding: 0.5rem;
    min-height: 0;
    overflow-y: auto; /* Scroll hanya di area dashboard jika konten panjang */
    overflow-x: hidden;
    display: flex; /* Supaya child (grid) bisa fill height */
    flex-direction: column;
}

/* FOOTER  */
.footer {
    flex-shrink: 0; /* Footer JANGAN mengecil/hilang saat zoom */
    color: var(--color-footer);
    font-size: 0.8rem;
    background: var(--bg-color-footer);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
    height: 40px;
}

.icon-footer {
    fill: var(--color-footer);
}

/* GLOBAL ELEMENTS  */
a {
    text-decoration: none !important;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

/* STATUS INDICATOR (TEXT BOX) */
.status {
    width: 100%;
    padding: 0.1rem 0.2rem;
    text-align: center;
    font-style: italic;
    border-radius: 0.2rem;
}

/* Status Colors */
.alarm {
    background: #ed1c24;
    color: #ffffff;
    -webkit-animation: alarm 0.6s infinite alternate;
    animation: alarm 0.6s infinite alternate;
}

.running {
    background: #4caf50 !important;
    color: #ffffff !important;
}

.idle {
    background: #ffff01 !important;
    color: #000000 !important;
}

.default {
    background: #ffd7b1;
    color: #000000;
}

/* Status Boxes (Legend) */
.box-alarm {
    width: 1rem;
    height: 1rem;
    background: #ed1c24;
    margin-right: 0.3rem;
}

.box-running {
    width: 1rem;
    height: 1rem;
    background: #4caf50;
    margin-right: 0.3rem;
}

.box-off {
    width: 1rem;
    height: 1rem;
    background: #ffff01;
    margin-right: 0.3rem;
}

.box-disconnect {
    width: 1rem;
    height: 1rem;
    background: #b7b7b7;
    margin-right: 0.3rem;
}

.st-circle {
    border-radius: 50%;
}

/* ANIMATIONS  */
@-webkit-keyframes alarm {
    0% {
        background-color: #ed1c24;
    }
    100% {
        background-color: #ed1c2448;
    }
}
@keyframes alarm {
    0% {
        background-color: #ed1c24;
    }
    100% {
        background-color: #ed1c2448;
    }
}

.blink {
    animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* TYPOGRAPHY & UTILS  */
.jdl {
    color: #c7c7c7;
    font-family: "Poppins", sans-serif;
    margin: 0rem;
}

.card-judul {
    color: #c7c7c7;
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    margin: 0rem;
}

.btn-target-chart {
    width: auto;
    background: transparent;
    padding: 0.1rem 0.8rem;
    border-radius: 0.2rem;
    border: 1px solid #8e8e8e;
    color: #8e8e8e;
}

.btn-target-chart i {
    margin-right: 0.5rem;
}

.btn-target-chart:hover {
    background: #8e8e8e !important;
    color: #2f3231 !important;
}

.font-st {
    color: #ffffff;
    font-size: 0.8rem;
    margin-right: 1rem;
}

.icon-warning {
    content: url("icon/icon-warning.svg");
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
}

.icon-failur {
    content: url("icon/icon-failur.svg");
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
}

/* GANTT CHART STATUS COLORS */
.axis path,
.axis line {
    fill: none;
    stroke: white;
    shape-rendering: crispEdges;
}

.tick text {
    fill: white;
}

.tick .domain {
    stroke: white;
}

.running-gc {
    fill: #4caf50;
}
.idle-gc {
    fill: #ffff01;
}
.alarm-gc {
    fill: #ed1c24;
}
.abnormal-gc {
    fill: #8e8e8e;
}

.text-foot {
    color: #ffffff;
    font-size: 0.7rem;
}

/* CONNECTION STATUS */
.footer-left {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid var(--color-footer);
    transition: all 0.3s ease;
}

/* Status Online (Hijau) */
.status-dot.online {
    background-color: #4caf50;
    box-shadow: 0 0 6px #4caf50;
}

/* Status Offline (Merah) */
.status-dot.offline {
    background-color: #ed1c24;
    box-shadow: 0 0 6px #ed1c24;
    animation: blinker 1s linear infinite;
}

.status-text {
    font-weight: bold;
    font-size: 0.85rem;
}