/* Tema panel admin — biru tua & emas (melengkapi tampilan bawaan Filament) */
:root { --ni-navy: #0A2F6B; --ni-navy-d: #061737; --ni-blue: #1557C0; --ni-gold: #E7B53C; --ni-gold-l: #F6D46E; --ni-line: #DCE6F5; }

/* ----- Sidebar ----- */
.fi-sidebar { background: linear-gradient(180deg, var(--ni-navy-d) 0%, var(--ni-navy) 100%) !important; }
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; --tw-ring-color: transparent !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.fi-sidebar-header .fi-icon-btn { color: #C9D8F2 !important; }
.fi-sidebar-group-label { color: #6F8FC9 !important; letter-spacing: .1em; text-transform: uppercase; font-size: 11px !important; }
.fi-sidebar-group-button .fi-icon-btn, .fi-sidebar-group-collapse-button { color: #6F8FC9 !important; }
.fi-sidebar-item-button { border-radius: 12px !important; }
.fi-sidebar-item-label { color: #C9D8F2 !important; font-weight: 600; }
.fi-sidebar-item-icon { color: #8FB0E6 !important; }
.fi-sidebar-item-button:hover { background: rgba(255,255,255,.07) !important; }
.fi-sidebar-item-active .fi-sidebar-item-button { background: linear-gradient(90deg, #1557C0, #2A6BD6) !important; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.fi-sidebar-item-active .fi-sidebar-item-label, .fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar-item-grouped-border > div { background: rgba(255,255,255,.18) !important; }
.fi-sidebar .fi-badge { background: var(--ni-gold) !important; color: var(--ni-navy) !important; --tw-ring-color: transparent !important; font-weight: 800; }
.fi-sidebar-nav { scrollbar-color: rgba(255,255,255,.2) transparent; }

/* ----- Merek ----- */
.ni-brand { display: flex; align-items: center; gap: 10px; }
.ni-brand-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--ni-navy); border: 3px solid var(--ni-gold); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.ni-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.ni-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ni-brand-name { font-weight: 800; font-size: 15px; color: var(--ni-navy); }
.ni-brand-sub { font-size: 11px; color: #B8860B; font-weight: 600; }
.fi-sidebar .ni-brand-name { color: #fff; }
.fi-sidebar .ni-brand-sub { color: var(--ni-gold); }
.fi-simple-layout .ni-brand { justify-content: center; }

/* ----- Topbar ----- */
.fi-topbar nav { box-shadow: 0 1px 0 var(--ni-line) !important; }
.ni-visit { font-size: 13px; font-weight: 700; color: var(--ni-blue); padding: 8px 12px; border: 1px solid #C9DAF4; border-radius: 10px; margin-right: 8px; white-space: nowrap; }
.ni-visit:hover { background: #EEF4FD; }
@media (max-width: 640px) { .ni-visit { display: none; } }

/* ----- Latar halaman ----- */
.fi-body { background: #F2F6FC !important; }
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-wi-chart > section { border-radius: 18px !important; }
.fi-wi-stats-overview-stat { box-shadow: 0 6px 18px rgba(10,47,107,.05) !important; }

/* ----- Banner sambutan ----- */
.ni-hero { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(120deg, #0A2F6B 0%, #1557C0 100%); color: #fff; padding: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.ni-hero-ring { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(231,181,60,.18); }
.ni-hero-dot { position: absolute; right: 180px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.06); }
.ni-hero-main { flex: 1 1 380px; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.ni-chip-gold { align-self: flex-start; background: rgba(231,181,60,.2); color: var(--ni-gold-l); border: 1px solid rgba(231,181,60,.5); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ni-hero-title { font-size: 22px; font-weight: 800; line-height: 1.3; }
.ni-hero-row { display: flex; justify-content: space-between; font-size: 13px; color: #DCE7FA; margin-bottom: 6px; gap: 10px; }
.ni-hero-row strong { color: #fff; }
.ni-progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.ni-progress > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ni-gold-l), var(--ni-gold)); }
.ni-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.ni-btn-gold { font-size: 14px; font-weight: 800; padding: 11px 18px; border-radius: 12px; background: var(--ni-gold); color: var(--ni-navy); min-height: 44px; display: inline-flex; align-items: center; }
.ni-btn-gold:hover { background: #F0C452; }
.ni-btn-ghost { font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; min-height: 44px; cursor: pointer; }
.ni-btn-ghost:hover { background: rgba(255,255,255,.1); }
.ni-hero-boxes { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.ni-hero-box { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 14px 16px; text-align: center; min-width: 96px; max-width: 150px; }
.ni-hero-box .n { font-size: 30px; font-weight: 800; }
.ni-hero-box .l { font-size: 12px; color: #DCE7FA; }

/* ----- Tahapan ----- */
.ni-funnel { display: flex; flex-direction: column; gap: 14px; }
.ni-funnel-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; color: #34476A; }
.ni-funnel-row strong { color: var(--ni-navy); }
.ni-bar { height: 9px; border-radius: 999px; background: #EEF3FA; overflow: hidden; }
.ni-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1557C0, #4C86D9); }
.ni-note { font-size: 13px; color: #4A5B78; background: #F7FAFE; border-radius: 12px; padding: 10px 12px; }

/* ----- Daftar ----- */
.ni-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ni-list { display: flex; flex-direction: column; }
.ni-list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #EEF3FA; }
.ni-list-row:first-child { border-top: 0; padding-top: 0; }
.ni-list .t { font-size: 14px; font-weight: 700; color: #13233F; }
.ni-list .s { font-size: 12px; color: #4A5B78; font-weight: 400; }
.ni-link { font-size: 13px; font-weight: 700; color: var(--ni-blue); }
.ni-empty { font-size: 14px; color: #4A5B78; }
.ni-agenda { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.ni-date { width: 50px; height: 50px; flex-shrink: 0; border-radius: 12px; background: #EEF4FD; color: var(--ni-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; line-height: 1.1; }
.ni-date span { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ni-date-dark { background: var(--ni-navy); color: #fff; }

/* ----- Halaman cadangan ----- */
.ni-card { background: #fff; border: 1px solid var(--ni-line); border-radius: 18px; padding: 22px; }
.ni-steps { margin: 8px 0 0; padding-left: 20px; color: #34476A; font-size: 14px; line-height: 1.8; }
.ni-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ni-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--ni-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.ni-doc a { color: var(--ni-blue); font-weight: 700; }
.ni-doc .miss { color: #B42318; font-weight: 700; font-size: 12px; }
.ni-list-row > div:first-child { min-width: 0; }
.ni-list-row .fi-badge { flex-shrink: 0; white-space: nowrap; max-width: none; }
.ni-list-row .fi-badge span { overflow: visible !important; text-overflow: clip !important; }