/* ============================================================
   COR-02 UI Polish — font lebih kecil + kontras lebih nyaman
   (light-surface on dark-header) tanpa merusak struktur view.
   ============================================================ */

:root{
  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.82);
  --ink: #0b1220;
  --ink2:#0f172a;
  --muted-ink:#475569;
  --line-soft: rgba(15,23,42,.10);
}

/* Skala tipografi: lebih rapih, tidak "teriak" */
html{font-size:14px}
body{font-size:14px; line-height:1.5}
.hero h1{font-size:28px}
.hero p{font-size:14px}

/* Chip/Badge lebih ringkas */
.chip{font-size:11px; padding:5px 10px}
.badge{font-size:11px; padding:4px 9px}

/* Kartu & panel jadi light surface (seperti referensi Anda) */
.card, .panel{
  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,.86)) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.12) !important;
  color: var(--ink) !important;
}
.card h3, .panel-title{color: var(--ink2) !important}
.card p, .panel-body p{color: var(--muted-ink) !important}
.panel-head{
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(167,139,250,.08)) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink2) !important;
}
.panel-body{color: var(--ink)}

/* Tombol: kecilkan sedikit, kontras tidak terlalu tajam */
.btn{padding:9px 12px; border-radius:14px; font-size:13px}
.btn-sm{padding:8px 10px; font-size:12px}
.btn-ghost{background: rgba(255,255,255,.55) !important; color: var(--ink2) !important}
.btn-ghost:hover{background: rgba(255,255,255,.70) !important}
.btn-danger{background: rgba(239,68,68,.10) !important; color: var(--ink2) !important}

/* Input: putih, border jelas */
.input, .select{
  background: rgba(255,255,255,.92) !important;
  color: var(--ink2) !important;
  border: 2px solid rgba(148,163,184,.35) !important;
}
.input:focus, .select:focus{border-color: rgba(99,102,241,.55) !important}

/* Tabel: header lembut, isi jelas */
.table-wrap{
  border: 1px solid rgba(148,163,184,.25) !important;
  background: rgba(255,255,255,.86) !important;
}
table{min-width: 860px}
thead th{
  font-size: 11px !important;
  padding: 9px 10px !important;
  color: var(--ink2) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(167,139,250,.12)) !important;
  border-right: 1px solid rgba(15,23,42,.08) !important;
}
tbody td{
  font-size: 13px !important;
  color: var(--ink2) !important;
  background: rgba(255,255,255,.90) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
}
tbody tr:hover td{background: rgba(99,102,241,.06) !important}

/* Badge status: tetap berwarna tapi lebih halus */
.badge.good{background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.25) !important; color: var(--ink2) !important}
.badge.warn{background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.28) !important; color: var(--ink2) !important}
.badge.bad{background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.25) !important; color: var(--ink2) !important}

/* Dropdown menu (grouped) supaya nyatu dengan light surface */
.nav-menu{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.22) !important;
}
.nav-item{
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(148,163,184,.22) !important;
  color: var(--ink2) !important;
}
.nav-item-desc{color: var(--muted-ink) !important}
.nav-item:hover{background: rgba(99,102,241,.08) !important}
.nav-item.active{
  border-color: rgba(99,102,241,.35) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(167,139,250,.08)) !important;
}
.nav-trigger{
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(148,163,184,.22) !important;
}
.nav-dd[open] .nav-trigger, .nav-dd.active .nav-trigger{
  border-color: rgba(99,102,241,.45) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(167,139,250,.10)) !important;
}

/* Footer lebih kalem */
.footer{color: rgba(148,163,184,.92)}