/* ============================================================
   SMART WORKSHOP — Design Tokens
   Tema "instrument cluster": panel gelap ala dashboard mobil untuk
   halaman kerja internal, lampu status meniru indikator dashboard.
   Hanya 1 web font (dipakai seperlunya) demi kecepatan akses.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

:root {
    /* Cockpit surfaces (diredam sedikit biar nyaman di mata, tidak terlalu gelap-kontras) */
    --ink: #121A2B;
    --panel: #182337;
    --panel-2: #202D45;
    --steel: #34435F;
    --steel-soft: #445876;

    /* Gauge accents (saturasi diturunkan sedikit, tidak menyala berlebihan) */
    --cyan: #6FCBDA;
    --cyan-dim: rgba(111, 203, 218, 0.12);
    --amber: #E8A93E;
    --amber-dim: rgba(232, 169, 62, 0.12);
    --red: #F0616F;
    --red-dim: rgba(240, 97, 111, 0.14);
    --green: #4BBF93;
    --green-dim: rgba(75, 191, 147, 0.12);

    --mist: #93A2BC;
    --white: #D8E1EF;

    /* Paper surfaces (halaman pelanggan) */
    --paper: #F5F7FB;
    --paper-ink: #0F1B2E;
    --paper-line: #E1E7F0;
    --paper-sub: #64748B;

    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-body: -apple-system, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    --radius: 16px;
    --radius-sm: 9px;
}

/* ---------- Tema Terang (opsional, per-perangkat via localStorage) ----------
   Palet dirancang ulang utk kontras yang enak di layar terang, bukan cuma
   dibalik warnanya — aksen (cyan/amber/red/green) sengaja dibikin lebih
   gelap/pekat drpd versi gelap, karena warna neon pucat kurang kebaca di
   atas latar putih. */
html[data-theme="light"] {
    --ink: #F3F5FA;
    --panel: #FFFFFF;
    --panel-2: #EEF1F8;
    --steel: #D7DEEA;
    --steel-soft: #C3CCDD;

    --cyan: #0E8598;
    --cyan-dim: rgba(14, 133, 152, 0.10);
    --amber: #B07019;
    --amber-dim: rgba(176, 112, 25, 0.12);
    --red: #C6394A;
    --red-dim: rgba(198, 57, 74, 0.12);
    --green: #22855F;
    --green-dim: rgba(34, 133, 95, 0.12);

    --mist: #5C6B85;
    --white: #182337;
}
html[data-theme="light"] .status-light.sl-off { background: #AEB8C9; }
html[data-theme="light"] .warning-danger { color: var(--red); }

* { box-sizing: border-box; }

/* ---------- Wordmark (dipakai di semua panel & booking) ---------- */
.sw-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sw-wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sw-wordmark-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.sw-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--cyan);
    text-transform: uppercase;
}
.sw-sub {
    font-size: 11px;
    color: var(--mist);
}
.sw-version-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mist);
    opacity: 0.75;
    text-transform: none;
    margin-left: 2px;
}

/* ---------- Status light (pengganti dot biasa) ---------- */
.status-light {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-light.sl-idle { background: var(--steel-soft); }
.status-light.sl-amber { background: var(--amber); box-shadow: 0 0 8px 1px var(--amber-dim); }
.status-light.sl-red { background: var(--red); box-shadow: 0 0 8px 1px var(--red-dim); }
.status-light.sl-green { background: var(--green); box-shadow: 0 0 8px 1px var(--green-dim); }
.status-light.sl-off { background: #D9DFE8; }

/* ---------- Chip / pill badge dasar ---------- */
.sw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}

@keyframes sw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sw-pulse { animation: sw-pulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .sw-pulse { animation: none; }
}