/* Yanblik — tema Apple: terang, SF, spasi lega, kartu putih lembut. */
:root{
  --bg:#fbfbfd; --panel:#f5f5f7; --card:#ffffff;
  --ink:#1d1d1f; --muted:#6e6e73; --faint:#aeaeb2;
  --line:#d2d2d7; --blue:#0066cc; --green:#1d8127;
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{background:var(--bg)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif!important;font-weight:700!important;letter-spacing:-.02em}
.ui,.top nav,.r-nav,button,input,select,textarea,label,.metric-l,.sub,.err,.foot{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif}
/* Navigasi */
.r-nav{max-width:1024px;margin:0 auto;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.r-nav .brand{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.r-nav .brand img{width:28px;height:28px;border-radius:8px;object-fit:cover}
.r-nav .links{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.r-nav .links a,.r-nav .links button{font-size:14px;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:8px;border:none;background:transparent;cursor:pointer;opacity:.8}
.r-nav .links a.cur{opacity:1;font-weight:600}
.r-nav .links a:hover,.r-nav .links button:hover{background:var(--panel);opacity:1}
.r-wrap{max-width:980px;margin:0 auto;padding:24px 28px 60px}
/* Tombol */
.btn-dark,.btn-primary,.btn-success{background:var(--blue)!important;border:none!important;color:#fff!important;border-radius:10px!important}
.btn-line,.btn-outline-secondary{background:var(--panel)!important;border:none!important;color:var(--blue)!important;border-radius:10px!important}
/* Kartu */
.card{background:var(--card)!important;border:none!important;box-shadow:0 4px 24px rgba(0,0,0,.06)!important;border-radius:18px!important;color:var(--ink)!important}
.section-header{color:var(--ink)!important;border:none!important;font-size:19px!important}
.form-label{color:var(--ink)!important;font-size:13px!important;font-weight:600!important}
.form-control,.form-select{background:#fff!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:10px!important}
.form-control:focus,.form-select:focus{border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(0,102,204,.15)!important;color:var(--ink)!important}
.alert-light{background:var(--panel)!important;border:none!important;color:var(--muted)!important;border-radius:12px!important}
/* Override Tailwind monitoring */
.glass-card{background:#fff!important;border:none!important;box-shadow:0 4px 24px rgba(0,0,0,.06)!important;border-radius:18px!important}
header.bg-gradient-to-r{background:var(--bg)!important}
thead.bg-gray-50{background:var(--panel)!important}
tbody.bg-white{background:#fff!important}
th[data-sort]:not([data-sort=""]){cursor:pointer;user-select:none;white-space:nowrap}
th[data-sort]:not([data-sort=""]):hover{color:var(--blue)}
.sort-ind{font-size:10px;color:var(--faint)}
#dbOverlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(251,251,253,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#dbOverlay .box{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;padding:24px 32px;box-shadow:0 8px 32px rgba(0,0,0,.1);font-size:15px;color:var(--ink)}
#dbOverlay.hide{display:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}