/* =========================================================================
   SmartSiaga — portal klien

   Arah desain: padat, presisi, tenang. Acuannya perkakas engineering
   (Linear, Vercel, Datadog), bukan dasbor pemasaran. Untuk produk keamanan,
   tampilan yang terlalu ramai justru mengurangi kepercayaan — yang dijual
   adalah ketelitian.

   FONT: tumpukan font sistem, BUKAN Google Fonts. Memuat font dari server
   Google berarti setiap kali klien membuka portal, alamat IP mereka terkirim
   ke pihak ketiga. Untuk vendor keamanan itu kontradiksi yang akan ditanyakan
   saat vendor onboarding — dan jawabannya harus "tidak ada".
   ========================================================================= */

:root {
  /* Permukaan: empat tingkat kedalaman, bukan dua. Hierarki datang dari
     kedalaman, bukan dari garis tebal. */
  --bg:        #070b14;
  --surface:   #0d1422;
  --surface-2: #131c2e;
  --surface-3: #1a2438;
  --border:    #1b2438;
  --border-2:  #26334c;

  --ink:   #eef3fa;
  --ink-2: #9fb0c9;
  --ink-3: #64758f;

  --accent:      #2dd4bf;
  --accent-deep: #0d9488;
  --accent-glow: rgba(45, 212, 191, .16);

  /* Palet STATUS, bukan kategorikal.
     Kontras terverifikasi >= 3:1 terhadap --bg. Jarak CVD antar-severity tidak
     lolos sebagai palet kategorikal, dan itu diterima sadar: setiap severity
     SELALU tampil bersama labelnya, jadi warna tidak pernah jadi satu-satunya
     pembawa makna. Itu mitigasi yang memang ditentukan untuk warna status. */
  --sev-critical: #f04747;
  --sev-high:     #f4864f;
  --sev-medium:   #f7b93e;
  --sev-low:      #5b9dfa;
  --sev-info:     #7d90ac;
  --good:         #35c759;

  --r-sm: 7px;
  --r:    11px;
  --r-lg: 15px;

  --sidebar: 248px;
  --maxw: 1420px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px -4px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.6);
  --ring: 0 0 0 1px rgba(255,255,255,.04) inset;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc; --surface: #fff; --surface-2: #f4f7fb; --surface-3: #eaf0f7;
    --border: #e3e9f2; --border-2: #cfd9e6;
    --ink: #0b1220; --ink-2: #4a5a70; --ink-3: #8494a8;
    --accent: #0d9488; --accent-deep: #0f766e; --accent-glow: rgba(13,148,136,.1);
    --sev-critical:#c5342f; --sev-high:#c2410c; --sev-medium:#a16207;
    --sev-low:#1d4ed8; --sev-info:#64748b; --good:#15803d;
    --shadow-1: 0 1px 2px rgba(15,23,42,.05);
    --shadow-2: 0 4px 12px -6px rgba(15,23,42,.1), 0 14px 34px -18px rgba(15,23,42,.18);
    --ring: 0 0 0 1px rgba(15,23,42,.02) inset;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 13.5px/1.6 ui-sans-serif, "Segoe UI Variable Text", "Segoe UI",
        -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Tipografi mikro — dipakai untuk semua label kecil. */
.eyebrow {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ================================================================ Masuk == */

.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  position: relative; overflow: hidden;
}
/* Cahaya latar yang sangat halus — memberi kedalaman tanpa menarik perhatian. */
.login::before {
  content: ''; position: absolute; width: 620px; height: 620px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 62%);
  filter: blur(46px); pointer-events: none;
}
.login-card {
  position: relative; width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 38px 36px 32px;
  box-shadow: var(--shadow-2), var(--ring);
}
.login-card img { height: 32px; margin-bottom: 30px; }
.login h1 { font-size: 19px; font-weight: 620; margin: 0 0 5px; letter-spacing: -.02em; }
.login .sub { color: var(--ink-3); margin: 0 0 26px; font-size: 13px; }

label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 7px; font-weight: 500; }

input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 10px 13px; margin-bottom: 17px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-glow);
  background: var(--surface-2);
}
select { cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #04211d; border: none; border-radius: var(--r-sm);
  padding: 10px 17px; font-weight: 620; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-1);
  transition: filter .15s, transform .08s var(--ease), box-shadow .15s;
}
.btn:hover { filter: brightness(1.09); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 4px 14px -4px var(--accent-glow); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.btn-block { width: 100%; }
.btn-ghost {
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border-2); box-shadow: none;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); filter: none; box-shadow: none; }
.btn-sm { padding: 6.5px 12px; font-size: 12.5px; }

.alert {
  background: color-mix(in srgb, var(--sev-critical) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev-critical) 34%, transparent);
  padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 18px;
}

/* ================================================================ Rangka == */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100dvh; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 24px 15px 18px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
}
.sidebar > img { height: 26px; margin: 2px 0 30px 11px; align-self: flex-start; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9.5px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; font-size: 13.5px;
  position: relative; transition: background .14s, color .14s;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a.active {
  background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 100%);
  color: var(--accent);
}
.nav a.active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav svg { width: 17px; height: 17px; flex: none; stroke-width: 1.85; opacity: .9; }
.nav .count {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--ink-3);
  padding: 1.5px 7px; border-radius: 9px; font-weight: 600;
}
.nav a.active .count { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.sidebar-foot { margin-top: auto; padding: 15px 12px 0; border-top: 1px solid var(--border); }
.sidebar-foot .who { font-size: 13px; font-weight: 600; }
.sidebar-foot .org { font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; }

main { padding: 0 0 72px; min-width: 0; }
.wrap { max-width: var(--maxw); padding: 0 36px; margin: 0 auto; }

/* Topbar tipis — memberi konteks tanpa memakan ruang vertikal. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 15px 0; margin-bottom: 28px;
}
.topbar .wrap { display: flex; align-items: center; gap: 16px; }
.topbar h1 { font-size: 17px; font-weight: 620; margin: 0; letter-spacing: -.02em; }
.topbar .crumb { color: var(--ink-3); font-size: 13px; }
.topbar .spacer { flex: 1; }

/* ================================================================== Hero == */

.hero {
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 30px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 30px; margin-bottom: 16px;
  box-shadow: var(--ring);
}
.hero-n {
  font-size: 58px; font-weight: 680; line-height: .96;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--ink) 20%, var(--ink-2) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-l { margin-top: 9px; }
.hero-note { color: var(--ink-3); font-size: 12.5px; margin-top: 7px; }

/* Distribusi severity: satu batang bertumpuk. Menjawab "seberapa parah
   komposisinya" dalam satu pandangan — pertanyaan yang lima angka terpisah
   tidak jawab. Celah 2px antar segmen adalah pemisah permukaan, bukan hiasan. */
.dist { display: flex; gap: 2px; height: 11px; margin-bottom: 15px; }
.dist span {
  border-radius: 3px; min-width: 4px;
  transition: filter .15s, transform .15s var(--ease);
}
.dist span:hover { filter: brightness(1.25); transform: scaleY(1.28); }
.dist-legend { display: flex; gap: 20px; flex-wrap: wrap; }
.dist-legend .it { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dist-legend .sw { width: 9px; height: 9px; border-radius: 2.5px; flex: none; }
.dist-legend .v { font-weight: 640; font-variant-numeric: tabular-nums; }
.dist-legend .k { color: var(--ink-3); }

/* =========================================================== Kartu & tile = */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px 22px; box-shadow: var(--ring);
}
.card > h2 {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); margin: 0 0 16px;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px;
  position: relative; overflow: hidden; box-shadow: var(--ring);
  transition: border-color .16s, transform .16s var(--ease);
}
.tile:hover { border-color: var(--border-2); transform: translateY(-1px); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, var(--tint, transparent) 0%, transparent 58%);
  opacity: .5; pointer-events: none;
}
.tile .n {
  font-size: 30px; font-weight: 660; line-height: 1.08;
  font-variant-numeric: tabular-nums; letter-spacing: -.035em;
  color: var(--tile-color, var(--ink));
}
.tile .l { margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }

/* ============================================================== Lencana === */

/* Warna status TIDAK PERNAH sendirian — setiap lencana memuat teksnya. */
.badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
  padding: 3px 7.5px; border-radius: 5px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) inset;
}
.sev-critical { --c: var(--sev-critical); }
.sev-high     { --c: var(--sev-high); }
.sev-medium   { --c: var(--sev-medium); }
.sev-low      { --c: var(--sev-low); }
.sev-info     { --c: var(--sev-info); }
.tag-new      { --c: var(--sev-high); }
.tag-regressed{ --c: var(--sev-critical); }
.tag-resolved { --c: var(--good); }

.delta-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.delta-row:last-child { border-bottom: none; }
.delta-row .v { margin-left: auto; font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.delta-row .v.zero { color: var(--ink-3); font-weight: 500; }

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

.table-wrap {
  border-radius: var(--r); border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--ring);
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .085em; color: var(--ink-3);
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
tbody tr.clickable:hover .title { color: var(--accent); }
.title { font-weight: 550; transition: color .12s; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: -.01em; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters input { margin-bottom: 0; width: auto; min-width: 210px; padding: 7.5px 12px; font-size: 13px; }
.seg {
  display: inline-flex; background: var(--surface-2); padding: 3px;
  border-radius: 9px; border: 1px solid var(--border); gap: 2px;
}
.seg button {
  padding: 5.5px 12px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
  border: none; background: transparent; color: var(--ink-3); font-weight: 500;
  transition: all .14s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-1); }
.chip {
  padding: 6.5px 13px; border-radius: 99px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent; color: var(--ink-2);
  transition: all .14s var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

/* =============================================================== Drawer === */

.drawer-bg {
  position: fixed; inset: 0; background: rgba(3,6,13,.66);
  backdrop-filter: blur(3px); z-index: 40; animation: fade .18s var(--ease);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 95vw);
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 41; overflow-y: auto; padding: 30px 32px 64px;
  box-shadow: -24px 0 60px -30px rgba(0,0,0,.8);
  animation: slide .24s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
@keyframes slide { from { transform: translateX(34px); opacity: .3 } }

.drawer h2 { font-size: 20px; font-weight: 620; margin: 14px 0 8px; letter-spacing: -.025em; }
.drawer .close {
  position: absolute; top: 22px; right: 26px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-3); cursor: pointer; font-size: 17px; line-height: 1;
  transition: all .14s;
}
.drawer .close:hover { color: var(--ink); background: var(--surface-3); }
.field { margin-top: 22px; }
.field > .k { margin-bottom: 7px; }
.hosts {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 13px; word-break: break-all;
}
.hosts div + div { margin-top: 4px; }
.fix {
  background: color-mix(in srgb, var(--good) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 26%, transparent);
  border-left: 2.5px solid var(--good);
  padding: 12px 15px; border-radius: var(--r-sm);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 18px 24px;
  border-left: 1.5px solid var(--border); margin-left: 4px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -5.2px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ev, var(--ink-3));
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px color-mix(in srgb, var(--ev, var(--ink-3)) 26%, transparent);
}
.timeline .when { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline .what { font-size: 13.5px; font-weight: 500; }
.timeline .note { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

/* ================================================================= Tren === */

.chart { position: relative; }
.spark { width: 100%; height: 190px; display: block; }
.spark .grid-line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .series { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.spark .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.spark .hit { fill: transparent; cursor: crosshair; }
.spark .cross { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-foot { display: flex; justify-content: space-between; margin-top: 10px; }

.tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: 12.5px;
  box-shadow: var(--shadow-2); white-space: nowrap;
}
.tip .tv { font-weight: 640; font-variant-numeric: tabular-nums; }
.tip .tk { color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }

/* ================================================================= Lain === */

.empty {
  text-align: center; padding: 60px 24px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--ring);
}
.empty strong { display: block; color: var(--ink-2); margin-bottom: 6px; font-size: 14.5px; font-weight: 580; }

.skeleton {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: shimmer 1.3s infinite linear;
  border-radius: var(--r); height: 82px;
}
@keyframes shimmer { to { background-position: -220% 0 } }

.banner {
  display: flex; gap: 13px; align-items: flex-start;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--sev-medium) 11%, transparent) 0%,
    color-mix(in srgb, var(--sev-medium) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--sev-medium) 26%, transparent);
  border-radius: var(--r); padding: 14px 17px; margin-bottom: 18px; font-size: 13px;
}
.banner svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--sev-medium); }

.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 10px; }
.mt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: 0; z-index: 30; height: auto;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 11px 16px; border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .sidebar > img { margin: 0 6px 0 0; height: 23px; }
  .nav { flex-direction: row; }
  .nav a { white-space: nowrap; padding: 7px 11px; }
  .nav a.active::before { display: none; }
  .nav .count { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; border: none; padding: 0; }
  .sidebar-foot .who, .sidebar-foot .org { display: none; }
  .wrap { padding: 0 16px; }
  .topbar { margin-bottom: 20px; padding: 13px 0; }
  .hero { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .hero-n { font-size: 46px; }
}