/* ==========================================================================
   EMS — design system
   Tema terang. Semua warna lewat token supaya konsisten di seluruh halaman.
   Tidak bergantung pada Bootstrap, Ace, jQuery UI, atau font icon eksternal.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Bidang & permukaan */
    --plane:        #f4f5f7;
    --surface:      #ffffff;
    --surface-2:    #fafbfc;
    --surface-sunk: #f1f3f5;

    /* Tinta */
    --ink:          #10151c;
    --ink-2:        #4a5461;
    --ink-muted:    #7b8794;

    /* Garis */
    --line:         #e3e7eb;
    --line-strong:  #cfd6dd;
    --grid:         #eceff2;

    /* Merek — biru korporat yang sudah dipakai header lama, dinaikkan kontrasnya */
    --brand:        #1668b8;
    --brand-ink:    #0f4c88;
    --brand-wash:   #e8f1fb;

    /* Deret data (urutan tetap, tidak pernah diputar ulang) */
    --series-1:     #2a78d6;   /* biru   — periode berjalan */
    --series-2:     #eb6834;   /* jingga — periode pembanding */
    --series-3:     #1baf7a;   /* aqua   — deret ketiga */

    /* Status (tidak pernah dipakai sebagai warna deret) */
    --good:         #0ca30c;
    --good-ink:     #006300;
    --warn:         #fab219;
    --warn-ink:     #8a5b00;
    --serious:      #ec835a;
    --crit:         #d03b3b;
    --crit-ink:     #a32020;

    --good-wash:    #e7f6e7;
    --warn-wash:    #fdf3dd;
    --crit-wash:    #fbeaea;

    /* Bentuk */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
    --shadow:    0 1px 2px rgba(16, 21, 28, .05), 0 1px 3px rgba(16, 21, 28, .04);
    --shadow-md: 0 2px 4px rgba(16, 21, 28, .05), 0 8px 20px rgba(16, 21, 28, .07);

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--plane);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

/* ==========================================================================
   Kerangka halaman
   ========================================================================== */

.ems-top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.ems-top__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px;
}

.ems-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* Header memakai lambang bulat TIM (favicon.png), bukan lockup penuh
   tim-mini.png. Dua alasan: tim-mini.png seluruhnya piksel putih sehingga
   hilang di header terang, dan wordmark tiga barisnya tidak terbaca lagi
   kalau dikecilkan sampai setinggi bilah header. Lockup penuh tetap dipakai
   di halaman login, di atas latar biru, dalam ukuran besar. */
.ems-brand__mark { display: block; flex: none; }
.ems-brand__mark img { height: 30px; width: 30px; display: block; }

.ems-brand__txt { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.ems-brand__sub { font-size: 11px; color: var(--ink-muted); }

.ems-top__spacer { flex: 1 1 auto; }

.ems-clock {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--ink-2);
    white-space: nowrap;
}

.ems-user {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.ems-user__av {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-wash); color: var(--brand-ink);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
}

/* Navigasi */
.ems-nav {
    display: flex;
    gap: 2px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ems-nav::-webkit-scrollbar { display: none; }

.ems-nav a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.ems-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.ems-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.ems-nav svg { width: 15px; height: 15px; flex: none; }

.ems-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px 20px 48px;
}

.ems-pagehead {
    display: flex; align-items: flex-end; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ems-pagehead p { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }

.ems-foot {
    max-width: 1600px; margin: 0 auto;
    padding: 20px; text-align: center;
    font-size: 12px; color: var(--ink-muted);
}

/* ==========================================================================
   Grid
   ========================================================================== */

.grid { display: grid; gap: 14px; }
.grid--1     { grid-template-columns: 1fr; }
.grid--kpi   { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--2     { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3     { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid + .grid { margin-top: 14px; }

.span-2 { grid-column: span 2; }
@media (max-width: 860px) { .span-2 { grid-column: span 1; } }

/* ==========================================================================
   Kartu
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.card__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.card__head h2 { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.card__head .sub { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.card__head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card__body { padding: 16px; }
.card__body--flush { padding: 8px 8px 12px; }

/* ==========================================================================
   Stat tile
   ========================================================================== */

.stat {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 14px 16px 12px;
    box-shadow: var(--shadow);
    min-height: 104px;
    display: flex; flex-direction: column; gap: 2px;
}
.stat__label {
    font-size: 12px; color: var(--ink-muted);
    display: flex; align-items: center; gap: 6px;
}
.stat__label svg { width: 14px; height: 14px; opacity: .75; }
.stat__value {
    font-size: 28px; font-weight: 650; letter-spacing: -.02em;
    color: var(--ink); line-height: 1.15;
}
.stat__value .unit { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-left: 3px; }
.stat__value .pre  { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-right: 3px; }
.stat__foot { margin-top: auto; font-size: 12px; color: var(--ink-muted); }

.stat--hero .stat__value { font-size: 40px; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.delta svg { width: 12px; height: 12px; }
.delta--up   { color: var(--crit-ink); }   /* naik = boros = buruk */
.delta--down { color: var(--good-ink); }
.delta--flat { color: var(--ink-muted); }

/* Sparkline di dalam stat tile */
.stat__spark { height: 30px; margin: 4px -4px -2px; }

/* ==========================================================================
   Meter (bar horizontal untuk PF / beban)
   ========================================================================== */

.meter { margin-top: 6px; }
.meter__track {
    height: 6px; border-radius: 999px;
    background: var(--surface-sunk);
    overflow: hidden;
}
.meter__fill {
    height: 100%; border-radius: 999px;
    background: var(--brand);
    transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s;
}
.meter__fill.is-warn { background: var(--warn); }
.meter__fill.is-crit { background: var(--crit); }
.meter__scale {
    display: flex; justify-content: space-between;
    font-size: 10px; color: var(--ink-muted);
    margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Gauge SVG
   ========================================================================== */

/* Tiga gauge berjajar dalam satu baris, bukan bertumpuk — kalau bertumpuk,
   kartunya jadi jauh lebih tinggi dari kartu di sebelahnya dan grid
   meregangkan keduanya. */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 420px) { .gauges { grid-template-columns: repeat(2, 1fr); } }

.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge svg { display: block; width: 100%; max-width: 150px; height: auto; margin-bottom: -6px; }
.gauge__val {
    font-size: 20px; font-weight: 650; letter-spacing: -.02em;
    color: var(--ink); line-height: 1;
}
.gauge__val .unit { font-size: 11px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.gauge__cap { font-size: 11.5px; color: var(--ink-muted); text-align: center; }

.gauge__track { fill: none; stroke: var(--surface-sunk); stroke-linecap: round; }
.gauge__bar   { fill: none; stroke: var(--series-1); stroke-linecap: round;
                transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1), stroke .3s; }
.gauge__bar.is-warn { stroke: var(--warn); }
.gauge__bar.is-crit { stroke: var(--crit); }
.gauge__bar.is-good { stroke: var(--good); }
.gauge__zone  { fill: none; stroke-width: 3; stroke-linecap: butt; opacity: .5; }
.gauge__tick  { stroke: var(--line-strong); stroke-width: 1; }
.gauge__tlabel{ fill: var(--ink-muted); font-size: 9px; font-family: var(--sans); }

/* ==========================================================================
   Chart
   ========================================================================== */

.chart { position: relative; width: 100%; }
.chart canvas { display: block; width: 100% !important; }
.chart--sm  { height: 170px; }
.chart--md  { height: 230px; }
.chart--lg  { height: 300px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px 2px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend__key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend__key--line { width: 14px; height: 2px; border-radius: 2px; }

/* Bar stack horizontal sederhana (WBP vs LWBP, shift) */
.sbar { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunk); }
.sbar__seg { position: relative; min-width: 2px; }
.sbar__seg + .sbar__seg { border-left: 2px solid var(--surface); }
.sbar__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sbar__row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sbar__row .k { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sbar__row .n { color: var(--ink-2); }
.sbar__row .v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.sbar__row .p { color: var(--ink-muted); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }

/* ==========================================================================
   Badge / pil status
   ========================================================================== */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    border: 1px solid transparent;
}
.pill svg { width: 12px; height: 12px; flex: none; }
.pill--good { background: var(--good-wash); color: var(--good-ink); border-color: #bfe6bf; }
.pill--warn { background: var(--warn-wash); color: var(--warn-ink); border-color: #f2dfae; }
.pill--crit { background: var(--crit-wash); color: var(--crit-ink);  border-color: #f0c4c4; }
.pill--mute { background: var(--surface-sunk); color: var(--ink-2); border-color: var(--line); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--good { background: var(--good); }
.dot--warn { background: var(--warn); }
.dot--crit { background: var(--crit); }
.dot--mute { background: var(--ink-muted); }
.dot--live { background: var(--good); box-shadow: 0 0 0 0 rgba(12,163,12,.55); animation: pulse 2.2s infinite; }

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(12,163,12,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(12,163,12,0); }
    100% { box-shadow: 0 0 0 0 rgba(12,163,12,0); }
}
@media (prefers-reduced-motion: reduce) {
    .dot--live { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Notifikasi
   ========================================================================== */

.alerts { display: grid; gap: 8px; }
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
}
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert__t { font-weight: 600; }
.alert__m { color: var(--ink-2); }
.alert--warn { background: var(--warn-wash); border-color: #f2dfae; }
.alert--warn svg { color: var(--warn-ink); }
.alert--crit { background: var(--crit-wash); border-color: #f0c4c4; }
.alert--crit svg { color: var(--crit-ink); }
.alert--info { background: var(--brand-wash); border-color: #cfe3f7; }
.alert--info svg { color: var(--brand-ink); }
.alert--good { background: var(--good-wash); border-color: #bfe6bf; }
.alert--good svg { color: var(--good-ink); }

/* ==========================================================================
   Kontrol
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 14px;
    font: inherit; font-size: 13px; font-weight: 550;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-muted); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn svg { width: 15px; height: 15px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-sunk); border-color: transparent; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn--danger:hover { background: var(--crit-ink); border-color: var(--crit-ink); }

.seg { display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-sm); padding: 2px; }
.seg button {
    font: inherit; font-size: 12px; font-weight: 550;
    padding: 5px 11px; border: 0; border-radius: 5px;
    background: transparent; color: var(--ink-2); cursor: pointer;
}
.seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; font-weight: 550; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--ink-muted); }

.input, select.input {
    font: inherit; font-size: 13px;
    padding: 8px 10px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    width: 100%;
    min-width: 0;
}
.input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

.toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    margin-bottom: 14px;
}
.toolbar .field { min-width: 150px; }
.toolbar .grow { flex: 1 1 auto; }

/* Sakelar lampu */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch__ui {
    position: absolute; inset: 0;
    background: var(--line-strong); border-radius: 999px;
    transition: background-color .22s;
}
.switch__ui::after {
    content: ''; position: absolute;
    top: 3px; left: 3px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .22s;
}
.switch input:checked + .switch__ui { background: var(--good); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch input:disabled { cursor: wait; }
.switch input:disabled + .switch__ui { opacity: .55; }

/* Kartu lampu */
.lamp {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    transition: border-color .2s, box-shadow .2s;
}
.lamp.is-on { border-color: #bfe6bf; background: linear-gradient(180deg, #f5fcf5, var(--surface)); }
.lamp__ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
             background: var(--surface-sunk); color: var(--ink-muted); flex: none; }
.lamp.is-on .lamp__ico { background: var(--good-wash); color: var(--good-ink); }
.lamp__ico svg { width: 18px; height: 18px; }
/* Wadah teks harus block/flex — kalau dibiarkan inline, nama ruangan dan
   keterangan statusnya menempel jadi satu baris ("TerasMenyala"). */
.lamp__txt { display: flex; flex-direction: column; min-width: 0; }
.lamp__n { display: block; font-weight: 550; font-size: 13.5px; line-height: 1.3; }
.lamp__s { display: block; font-size: 11.5px; color: var(--ink-muted); line-height: 1.3; }
.lamp__sw { margin-left: auto; padding-left: 8px; }

/* ==========================================================================
   Tabel
   ========================================================================== */

.tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 9px 12px; text-align: left; white-space: nowrap; }
table.tbl thead th {
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-muted); background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1;
}
table.tbl tbody tr + tr td { border-top: 1px solid var(--grid); }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; gap: 8px; padding: 10px 4px 0; font-size: 12.5px; color: var(--ink-2); }
.pager .grow { flex: 1 1 auto; }

/* ==========================================================================
   Keadaan kosong / memuat
   ========================================================================== */

.skel {
    background: linear-gradient(90deg, var(--surface-sunk) 25%, #e9edf1 37%, var(--surface-sunk) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: var(--r-sm);
    color: transparent !important;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.empty { padding: 34px 16px; text-align: center; color: var(--ink-muted); font-size: 13px; }
.empty svg { width: 30px; height: 30px; opacity: .4; display: block; margin: 0 auto 10px; }

.muted { color: var(--ink-muted); }
.tnum  { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.hidden { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Tooltip chart */
.ctip {
    position: absolute; pointer-events: none; z-index: 30;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    padding: 8px 10px; font-size: 12px;
    opacity: 0; transition: opacity .12s;
    min-width: 120px;
}
.ctip.is-on { opacity: 1; }
.ctip__t { font-weight: 600; margin-bottom: 5px; }
.ctip__r { display: flex; align-items: center; gap: 7px; }
.ctip__r + .ctip__r { margin-top: 3px; }
.ctip__k { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ctip__v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Notifikasi ringan */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; }
.toast {
    background: var(--ink); color: #fff;
    padding: 10px 14px; border-radius: var(--r-sm);
    font-size: 13px; box-shadow: var(--shadow-md);
    animation: toastin .2s ease-out;
    max-width: 340px;
}
.toast--bad { background: var(--crit-ink); }
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Login
   ========================================================================== */

/* Halaman login mempertahankan kesan versi sebelumnya: satu bidang biru
   penuh (#1D76BB), logo putih besar mengambang di atasnya, lalu kartu putih.
   Itu juga yang membuat logo putih terbaca apa adanya. */
.login {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 28px 20px 40px;
    background:
        radial-gradient(900px 500px at 50% 0%, #2b8ad4 0%, transparent 62%),
        linear-gradient(170deg, #1D76BB 0%, #14588c 100%);
}
.login__box { width: 100%; max-width: 380px; }

.login__logo {
    display: block;
    width: 190px; max-width: 62%;
    height: auto;
    margin: 0 auto 26px;
}

.login__card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 34px rgba(6, 34, 56, .28), 0 2px 6px rgba(6, 34, 56, .16);
    padding: 26px;
}
.login .field + .field { margin-top: 14px; }
.login .input { padding: 10px 12px; font-size: 14px; }
.login .btn { width: 100%; margin-top: 20px; padding: 11px; font-size: 14px; }
.login__foot {
    text-align: center; margin-top: 20px;
    font-size: 12px; color: rgba(255, 255, 255, .72);
}

@media (max-width: 420px) {
    .login__logo { margin-bottom: 20px; }
    .login__card { padding: 24px 20px 22px; }
}

@media (max-width: 640px) {
    .ems-main { padding: 14px 12px 40px; }
    .ems-top__bar { padding: 9px 12px; gap: 10px; }
    .ems-clock { display: none; }
    .stat__value { font-size: 24px; }
    .stat--hero .stat__value { font-size: 32px; }
}

@media print {
    .ems-nav, .ems-top__spacer, .btn, .toolbar { display: none !important; }
    body { background: #fff; }
    .card, .stat { box-shadow: none; break-inside: avoid; }
}