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

body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: #0f172a;
    color: #e5e7eb;
}

/* ====== DASHBOARD WRAPPER ====== */
.dashboard {
    max-width: 1600px;
    margin: auto;
    padding: 16px;
}

/* ====== HEADER ====== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header h1 {
    font-size: 28px;
    font-weight: 600;
}

.datetime {
    font-size: 10px;
    color: #94a3b8;
}

.datetime-wrapper {
    display: flex;
    flex-direction: column;         /* stack date and screen size vertically */
    align-items: flex-end;          /* right justify content */
    text-align: right;              /* ensures text inside div is right-aligned */
    gap: 2px;                       /* optional spacing between date and size */
}

/* ====== TOP GRID ====== */
.top-grid {
    display: grid;
    grid-template-columns: 15.5fr 15.5fr 15.5fr 28fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ====== CARDS ====== */
.card {
    background: linear-gradient(180deg, #1e293b, #020617);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    position: relative;
    min-width: 200px;
    display: flex;
    flex-direction: column;      /* stack content vertically */
    /* Instead of centering all content, only center main content */
    justify-content: flex-start;  /* titles stay at top */
    align-items: center;          /* center horizontally */
}

/* ====== KPI GRID ====== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.card h3 {
    font-size: 14px;
    font-weight: 500;
    color: #cbd5f5;
    margin-bottom: 8px;
}

/* ====== KPI CARDS ====== */
.kpi {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: #38bdf8;
    min-height: 90px;
    min-width: 170px;

    text-align: center;
}

/* ====== CHART SECTION ====== */
.charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.chart-card {
    height: 340px;
    min-width: 324px;
    margin-bottom: 40px;
}

/* ====== CANVAS ====== */
canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-slider {
    width: 100%;
    margin-top: 10px;
}

/* ---------------- Pie Wrapper ---------------- */
.pie-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;       /* ensures square, keeps pie circular */
    
    /* Flexbox to center the canvas inside the wrapper */
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical */
}

/* ---------------- Canvas inside Pie Wrapper ---------------- */
.pie-wrapper canvas {
    width: 100% !important;    /* fill the wrapper width */
    height: 100% !important;   /* fill the wrapper height */
    display: block;            /* remove canvas default inline spacing */
    max-width: 100%;
    max-height: 100%;
}


.gauge-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;     /* keeps it square */
    display: flex;
    justify-content: center;  /* horizontal center */
    align-items: center;      /* vertical center */
}

.gauge-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* ====== GAUGE VALUE ====== */
.gauge-value {
    position: absolute;
    left: 70%;     /* 65% from the left */
    top: 70%;      /* 75% from the top */
    transform: translate(-50%, -50%); /* optional: center the text around the point */

    font-size: 22px;
    font-weight: 700;
    color: #22d3ee;

    pointer-events: none;      /* avoid blocking chart interaction */

    text-align: center;
}

.vector-wrapper {
    width: 100%;
    max-width: 300px;   /* or whatever fits your layout */
    aspect-ratio: 1 / 1; /* force square shape */
    display: flex;
    justify-content: center;
    align-items: center;
}

.vector-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

#dateTime {
    white-space: pre-line;
}



#license-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.hidden {
  display: none;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 8px;
}



@media (max-width: 1200px){
    html, body {
        margin: 0;
        height: 100%;
        overflow: hidden; /* no vertical scroll */
    }

    body {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    /* ====== Dashboard container ====== */
    #dashboard-scale {
        transform-origin: top center; /* default origin */
        /* scale is applied dynamically via JS */
    }
}