/* ============================================================
   Portal Rekon Opsen PKB — Tema selaras dengan halaman Login
   (tidak ada perubahan struktural; file ini disertakan apa adanya
   supaya paket unduhan lengkap dan siap pakai bersama dashboard.html)
   ============================================================ */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #eef1f8;
  color: #111827;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(120deg, #0b1330 0%, #10193f 55%, #1d4ed8 130%);
  color: #ffffff;
}
.topbar h2 { margin:0; font-size:16px; }
.who { color: rgba(255,255,255,0.9); font-weight: 600; font-size: 13px; }
.admin-badge { background:#2563eb; color:#fff; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; margin-left:6px; }

.app-body { display:flex; min-height: calc(100vh - 60px); }
.sidebar { width:232px; background:#fff; border-right:1px solid #e5e7eb; padding:20px 14px; }
.menu-label { font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase; padding:0 10px; margin-bottom:8px; }
.nav-item { display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:3px; border-radius:10px; color:#374151; text-decoration:none; font-weight:600; font-size:13.5px; }
.nav-item.sub { padding-left:20px; font-weight:500; }
.nav-item:hover { background:#f9fafb; }
.nav-item.active { background:linear-gradient(120deg,#2563eb,#1d4ed8); color:#fff; }
.content { flex:1; padding:24px 28px 60px; }
.view { display:none; }
.view.active { display:block; }

.hero-card { background:linear-gradient(135deg,#0b1330,#1d4ed8); color:#fff; padding:28px 30px; border-radius:16px; margin-bottom:26px; }
.hero-eyebrow { display:inline-flex; font-size:11.5px; font-weight:700; text-transform:uppercase; background:rgba(255,255,255,0.12); padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.hero-title { font-size:24px; margin:0 0 8px 0; }
.hero-subtitle { font-size:14px; opacity:0.85; max-width:640px; }

.controls { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.controls label { display:block; margin:0 0 4px 0; font-weight:700; font-size:12.5px; color:#374151; }

select, input[type="text"], input[type="number"], textarea {
  padding:8px 12px; border-radius:10px; border:1px solid #d1d5db; background:#f9fafb; font-size:13px; font-family:inherit;
}
select:focus, input:focus, textarea:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.15); background:#fff; }

.btn { display:inline-flex; align-items:center; gap:6px; border:none; padding:9px 16px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
.btn:hover { filter:brightness(1.06); }
.btn-primary { background:linear-gradient(120deg,#2563eb,#1d4ed8); color:#fff; }
.btn-success { background:#16a34a; color:#fff; }
.btn-neutral { background:#4b5563; color:#fff; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-purple { background:#7c3aed; color:#fff; }

.print-row { white-space:nowrap; }

.table-wrap { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:auto; max-height:72vh; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
thead th { background:#f9fafb; color:#374151; font-weight:700; text-transform:uppercase; font-size:10.5px; padding:10px 8px; text-align:center; position:sticky; top:0; z-index:5; }
tbody td { padding:9px 8px; border:1px solid #e5e7eb; text-align:center; }
.name-col { text-align:left !important; min-width:160px; }
tbody tr:nth-child(even) td { background:#fbfcff; }
tbody tr:hover td { background:#dbeafe; }
.row-unmatched td { background:#fef2f2; }
.row-unmatched:hover td { background:#fde0e0; }
table .field { width:100%; min-width:90px; padding:5px 7px; text-align:right; }
.link-btn { background:none; border:none; color:#2563eb; font-weight:700; cursor:pointer; text-decoration:underline; font-size:12.5px; }
.icon-btn { background:#f9fafb; border:1px solid #e5e7eb; padding:5px 9px; border-radius:8px; cursor:pointer; }
.selisih-cell { font-weight:800; }
.selisih-cell.is-unmatched { color:#dc2626; }
.selisih-cell.is-matched { color:#16a34a; }

.chart-card, .widget-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }