/* ==========================================================================
   BI Dashboard Enterprise - Tema "Ruang Kendali"
   Bahasa visual diambil dari papan andon lantai produksi: latar grafit,
   rel status berwarna, pelat nama huruf renggang, dan angka monospace.
   ========================================================================== */

:root {
  /* Permukaan */
  --ink-950:#0A0E13; --ink-900:#111721; --ink-850:#161E29; --ink-800:#1C2632;
  --line:#26303E; --line-soft:#1E2733;
  --text:#E5EAF1; --text-dim:#9DAABC; --text-mute:#6B7A8F;

  /* Aksen */
  --signal:#FFB020;      /* kuning peringatan mesin - aksen utama */
  --data:#35C4E0;        /* biru instrumen - deret data */
  --andon-green:#25C05C; --andon-yellow:#F5A524; --andon-red:#F0324B; --andon-grey:#5A6A7D;

  /* Bentuk */
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --rail:3px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

  --sidebar-w:252px; --topbar-h:56px;

  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","Consolas",ui-monospace,monospace;
}

[data-theme="light"] {
  --ink-950:#EEF1F5; --ink-900:#FFFFFF; --ink-850:#F7F9FB; --ink-800:#FFFFFF;
  --line:#D8DEE7; --line-soft:#E6EAF0;
  --text:#101720; --text-dim:#4C5A6B; --text-mute:#78889B;
  --signal:#B36F00; --data:#0E7C93;
  --shadow:0 1px 2px rgba(16,23,32,.06), 0 8px 20px -14px rgba(16,23,32,.25);
}

* { box-sizing:border-box }

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

/* Pelat nama: label kecil huruf renggang, seperti label pada panel mesin */
.nameplate {
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute);
}

/* Angka besar memakai monospace agar digit tidak bergeser saat menyegarkan */
.figure { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em }

a { color:var(--data); text-decoration:none }
a:hover { color:var(--signal) }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; border-radius:var(--r-sm) }

/* ------------------------------------------------------------- KERANGKA */
.app { display:flex; min-height:100vh }

.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--ink-900); border-right:1px solid var(--line);
  position:fixed; inset:0 auto 0 0; z-index:1040;
  display:flex; flex-direction:column; transition:transform .22s ease;
}
.sidebar__brand {
  height:var(--topbar-h); display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.sidebar__mark {
  width:28px; height:28px; border-radius:var(--r-sm); flex:0 0 28px;
  background:linear-gradient(150deg,var(--signal),#C97A00);
  display:grid; place-items:center; color:#12181F;
  font-family:var(--font-display); font-weight:700; font-size:15px;
}
.sidebar__name { font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:.04em; line-height:1 }
.sidebar__sub  { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute) }
.sidebar__nav { overflow-y:auto; padding:10px 8px 24px; flex:1 1 auto; scrollbar-width:thin }
.sidebar__nav::-webkit-scrollbar { width:6px }
.sidebar__nav::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px }

.nav-group { margin-top:14px }
.nav-group__label { padding:0 12px 6px; }
.nav-link {
  display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--r-sm);
  color:var(--text-dim); font-size:13.5px; border-left:var(--rail) solid transparent;
}
.nav-link i { width:17px; text-align:center; font-size:13px; color:var(--text-mute) }
.nav-link:hover { background:var(--ink-850); color:var(--text) }
.nav-link:hover i { color:var(--data) }
.nav-link.is-active {
  background:var(--ink-850); color:var(--text); border-left-color:var(--signal); font-weight:500;
}
.nav-link.is-active i { color:var(--signal) }
.nav-link__badge {
  margin-left:auto; background:var(--andon-red); color:#fff; font-family:var(--font-mono);
  font-size:10px; padding:1px 6px; border-radius:9px;
}

/* --------------------------------------------------------------- TOPBAR */
.main { flex:1 1 auto; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column }
.topbar {
  height:var(--topbar-h); background:var(--ink-900); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  position:sticky; top:0; z-index:1030;
}
.topbar__title { font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:.02em; margin:0 }
.topbar__crumb { font-size:11px; color:var(--text-mute); letter-spacing:.06em; text-transform:uppercase }

.search-box { position:relative; max-width:300px; flex:1 1 190px }
.search-box input {
  width:100%; background:var(--ink-850); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-md); padding:6px 10px 6px 30px; font-size:13px;
}
.search-box i { position:absolute; left:10px; top:9px; color:var(--text-mute); font-size:12px }
.search-results {
  position:absolute; top:104%; left:0; right:0; background:var(--ink-800);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow);
  max-height:320px; overflow:auto; display:none; z-index:1050;
}
.search-results a { display:block; padding:8px 12px; color:var(--text); border-bottom:1px solid var(--line-soft) }
.search-results a:hover { background:var(--ink-850) }

.icon-btn {
  width:34px; height:34px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--ink-850); color:var(--text-dim); display:grid; place-items:center; cursor:pointer;
}
.icon-btn:hover { color:var(--signal); border-color:var(--signal) }
.icon-btn__dot {
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  background:var(--andon-red); color:#fff; border-radius:8px;
  font-family:var(--font-mono); font-size:9px; display:grid; place-items:center;
}

/* --------------------------------------------------- STRIP ANDON (TANDA) */
/* Elemen penanda antarmuka ini: deret ubin status mesin di bawah topbar,
   meniru papan andon yang tergantung di atas lantai produksi. */
.andon-strip {
  display:flex; gap:3px; padding:6px 16px; background:var(--ink-900);
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
.andon-strip::-webkit-scrollbar { display:none }
.andon-tile {
  flex:0 0 auto; min-width:72px; padding:5px 9px 6px; border-radius:var(--r-sm);
  background:var(--ink-850); border-top:var(--rail) solid var(--andon-grey);
  cursor:pointer; transition:transform .12s ease;
}
.andon-tile:hover { transform:translateY(-1px) }
.andon-tile__code { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:-.02em }
.andon-tile__meta { font-size:9.5px; color:var(--text-mute); letter-spacing:.05em; text-transform:uppercase }
.andon-tile[data-state="GREEN"]  { border-top-color:var(--andon-green) }
.andon-tile[data-state="YELLOW"] { border-top-color:var(--andon-yellow) }
.andon-tile[data-state="RED"]    { border-top-color:var(--andon-red); animation:pulse 1.9s ease-in-out infinite }
@keyframes pulse { 50% { background:rgba(240,50,75,.13) } }
@media (prefers-reduced-motion:reduce) { .andon-tile[data-state="RED"] { animation:none } }

/* -------------------------------------------------------------- KONTEN */
.content { padding:16px; flex:1 1 auto }

.filterbar {
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:10px 12px; margin-bottom:14px;
}
.filterbar .form-select, .filterbar .form-control {
  background:var(--ink-850); border:1px solid var(--line); color:var(--text); font-size:13px;
}
.filterbar .form-select:focus, .filterbar .form-control:focus {
  background:var(--ink-850); color:var(--text); border-color:var(--signal); box-shadow:none;
}
.period-chips { display:flex; gap:4px; flex-wrap:wrap }
.chip {
  padding:4px 10px; border-radius:99px; border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-size:12px; cursor:pointer;
}
.chip:hover { border-color:var(--data); color:var(--text) }
.chip.is-active { background:var(--signal); border-color:var(--signal); color:#12181F; font-weight:600 }

/* Kartu dengan rel status di sisi kiri */
.card-panel {
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; height:100%;
}
.card-panel__head {
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line-soft);
}
.card-panel__title { font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.03em; margin:0 }
.card-panel__body { padding:14px }
.card-panel__tools { margin-left:auto; display:flex; gap:4px }

.kpi-card {
  position:relative; background:var(--ink-900); border:1px solid var(--line);
  border-left:var(--rail) solid var(--andon-grey); border-radius:var(--r-md);
  padding:12px 14px; height:100%; transition:border-color .15s ease, transform .12s ease;
}
.kpi-card:hover { transform:translateY(-2px) }
.kpi-card[data-status="GREEN"]  { border-left-color:var(--andon-green) }
.kpi-card[data-status="YELLOW"] { border-left-color:var(--andon-yellow) }
.kpi-card[data-status="RED"]    { border-left-color:var(--andon-red) }
.kpi-card__value { font-size:26px; font-weight:600; line-height:1.15; margin:4px 0 2px }
.kpi-card__unit  { font-size:13px; color:var(--text-dim); font-weight:400; margin-left:3px }
.kpi-card__foot  { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim) }
.kpi-card__delta { font-family:var(--font-mono); font-size:11.5px }
.kpi-card__delta.up   { color:var(--andon-green) }
.kpi-card__delta.down { color:var(--andon-red) }
.kpi-card.is-clickable { cursor:pointer }

.progress-rail { height:4px; background:var(--ink-800); border-radius:2px; overflow:hidden; margin-top:9px }
.progress-rail > span { display:block; height:100%; background:var(--data); border-radius:2px; transition:width .5s ease }

.chart-box { position:relative; width:100%; height:280px }
.chart-box.is-tall { height:360px }
.chart-box.is-short { height:200px }

/* Tabel */
table.dataTable, .table { color:var(--text); font-size:13px }
.table thead th {
  background:var(--ink-850); border-bottom:1px solid var(--line) !important;
  font-family:var(--font-display); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); font-weight:600; white-space:nowrap;
}
.table td, .table th { border-color:var(--line-soft) !important; padding:7px 10px !important; vertical-align:middle }
.table tbody tr:hover td { background:var(--ink-850) }
.table .num { font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums }

.status-pill {
  display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:99px;
  font-size:11px; font-weight:500; letter-spacing:.03em;
}
.status-pill::before { content:""; width:6px; height:6px; border-radius:50% }
.status-pill.green  { background:rgba(37,192,92,.13);  color:var(--andon-green) }
.status-pill.green::before  { background:var(--andon-green) }
.status-pill.yellow { background:rgba(245,165,36,.13); color:var(--andon-yellow) }
.status-pill.yellow::before { background:var(--andon-yellow) }
.status-pill.red    { background:rgba(240,50,75,.13);  color:var(--andon-red) }
.status-pill.red::before    { background:var(--andon-red) }
.status-pill.grey   { background:rgba(90,106,125,.15); color:var(--text-dim) }
.status-pill.grey::before   { background:var(--andon-grey) }

/* Skor perusahaan */
.score-dial { display:flex; align-items:center; gap:16px }
.score-dial__value { font-size:44px; font-weight:600; line-height:1 }
.score-dial__grade {
  width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center;
  font-family:var(--font-display); font-size:26px; font-weight:700;
  background:var(--ink-800); border:1px solid var(--line);
}

.refresh-note { font-size:11px; color:var(--text-mute); font-family:var(--font-mono) }
.skeleton {
  background:linear-gradient(90deg,var(--ink-850) 25%,var(--ink-800) 50%,var(--ink-850) 75%);
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:var(--r-sm); color:transparent;
}
@keyframes shimmer { to { background-position:-200% 0 } }

.empty-state { text-align:center; padding:34px 16px; color:var(--text-mute) }
.empty-state i { font-size:28px; opacity:.4; display:block; margin-bottom:8px }

/* Komponen Bootstrap yang diselaraskan dengan tema */
.dropdown-menu {
  background:var(--ink-800); border:1px solid var(--line); box-shadow:var(--shadow); font-size:13.5px;
}
.dropdown-item { color:var(--text-dim) }
.dropdown-item:hover, .dropdown-item:focus { background:var(--ink-850); color:var(--text) }
.dropdown-divider { border-color:var(--line-soft) }
.modal-content { background:var(--ink-900); border:1px solid var(--line); color:var(--text) }
.modal-header, .modal-footer { border-color:var(--line-soft) }
.form-control, .form-select {
  background:var(--ink-850); border-color:var(--line); color:var(--text);
}
.form-control:focus, .form-select:focus {
  background:var(--ink-850); color:var(--text); border-color:var(--signal); box-shadow:0 0 0 2px rgba(255,176,32,.15);
}
.form-label { font-size:12px; color:var(--text-dim); margin-bottom:3px }
.btn-signal { background:var(--signal); border-color:var(--signal); color:#12181F; font-weight:600 }
.btn-signal:hover { background:#E39A0F; border-color:#E39A0F; color:#12181F }
.btn-outline-line { border-color:var(--line); color:var(--text-dim) }
.btn-outline-line:hover { border-color:var(--data); color:var(--data); background:transparent }
.nav-tabs { border-color:var(--line) }
.nav-tabs .nav-link { color:var(--text-dim); border:none; border-bottom:2px solid transparent }
.nav-tabs .nav-link.active {
  background:transparent; color:var(--text); border-bottom-color:var(--signal);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background:var(--ink-850); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm);
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color:var(--text-dim) !important; font-size:12.5px }
.page-link { background:var(--ink-850); border-color:var(--line); color:var(--text-dim) }
.page-item.active .page-link { background:var(--signal); border-color:var(--signal); color:#12181F }

/* ------------------------------------------------------------ MASUK */
.login-shell {
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--ink-950);
}
.login-visual {
  position:relative; overflow:hidden; padding:44px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(255,176,32,.16), transparent 62%),
    radial-gradient(760px 420px at 88% 108%, rgba(53,196,224,.14), transparent 60%),
    var(--ink-900);
  border-right:1px solid var(--line);
}
/* Latar berpola kisi, meniru lantai pabrik bergaris */
.login-visual::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(160deg, #000 8%, transparent 74%);
}
.login-visual > * { position:relative; z-index:1 }
.login-headline { font-family:var(--font-display); font-size:48px; line-height:1.02; font-weight:600; letter-spacing:.01em; margin:0 }
.login-lede { color:var(--text-dim); max-width:44ch; margin-top:12px }
.login-stats { display:flex; gap:26px; flex-wrap:wrap }
.login-stat__num { font-family:var(--font-mono); font-size:24px; color:var(--signal) }
.login-form-wrap { display:grid; place-items:center; padding:40px 30px }
.login-card { width:100%; max-width:376px }
@media (max-width:900px) {
  .login-shell { grid-template-columns:1fr }
  .login-visual { display:none }
}

/* ---------------------------------------------------- PAPAN ANDON PENUH */
.tv-board { background:var(--ink-950); min-height:100vh; padding:20px 26px }
.tv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px }
.tv-cell {
  border-radius:var(--r-lg); padding:14px; background:var(--ink-900);
  border-left:6px solid var(--andon-grey);
}
.tv-cell[data-state="GREEN"]  { border-left-color:var(--andon-green) }
.tv-cell[data-state="YELLOW"] { border-left-color:var(--andon-yellow) }
.tv-cell[data-state="RED"]    { border-left-color:var(--andon-red); background:rgba(240,50,75,.09) }
.tv-cell__code { font-family:var(--font-mono); font-size:19px; font-weight:600 }
.tv-cell__status { font-family:var(--font-display); font-size:15px; letter-spacing:.1em; text-transform:uppercase }

/* --------------------------------------------------------- RESPONSIF */
@media (max-width:1199px) { .chart-box { height:250px } }
@media (max-width:991px) {
  .sidebar { transform:translateX(-100%) }
  .sidebar.is-open { transform:translateX(0) }
  .main { margin-left:0 }
  .content { padding:12px }
  .kpi-card__value { font-size:22px }
  .topbar__title { font-size:16px }
}
@media (max-width:575px) {
  .chart-box { height:220px }
  .search-box { display:none }
  .andon-strip { padding:5px 10px }
}
@media print {
  .sidebar, .topbar, .filterbar, .andon-strip, .card-panel__tools { display:none !important }
  .main { margin-left:0 } body { background:#fff; color:#000 }
  .card-panel { border:1px solid #ccc; box-shadow:none; break-inside:avoid }
}