/* ============================================================
   Usul Buku — Professional Theme v3.5
   Dark mode menyeluruh untuk komponen admin + iframe laporan
   ============================================================ */
:root{
  --ub-primary:#4f46e5; --ub-primary2:#7c3aed; --ub-accent:#06b6d4;
  --ub-bg:#f6f8fb; --ub-card:#ffffff; --ub-text:#0f172a; --ub-muted:#64748b; --ub-border:#e2e8f0;
  --ub-ok:#10b981; --ub-warn:#f59e0b; --ub-err:#ef4444;
  --ub-radius:14px; --ub-shadow:0 6px 24px rgba(2,6,23,.07);
}
html.ub-dark{
  --ub-bg:#0b1220; --ub-card:#111a2e; --ub-text:#e2e8f0; --ub-muted:#94a3b8; --ub-border:#1e293b;
  --ub-shadow:0 6px 24px rgba(0,0,0,.45);
}

/* Latar dasar ikut gelap (termasuk dokumen iframe laporan) */
html.ub-dark body{background:var(--ub-bg)!important}

/* Scope area plugin */
.ub-page{background:var(--ub-bg);color:var(--ub-text);border-radius:var(--ub-radius);padding:16px;transition:background .3s,color .3s}
.ub-page h2,.ub-page h3,.ub-page h4{color:var(--ub-text)}
.ub-page .text-muted,.ub-page small{color:var(--ub-muted)!important}
.ub-page strong,.ub-page label{color:var(--ub-text)}
.ub-page a{color:#4f46e5}
.ub-dark .ub-page a{color:#818cf8}
.ub-dark .ub-page .text-secondary,.ub-dark .ub-page .text-info{color:#94a3b8!important}

/* Kartu profesional */
.ub-card{background:var(--ub-card);border:1px solid var(--ub-border);border-radius:var(--ub-radius);
  box-shadow:var(--ub-shadow);padding:16px;margin-bottom:16px;transition:transform .18s,box-shadow .18s}
.ub-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,.12)}
.ub-grad{background:linear-gradient(135deg,var(--ub-primary),var(--ub-primary2));color:#fff;border:none}
.ub-stat-num{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--ub-primary),var(--ub-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Badge stylish */
.ub-badge{display:inline-block;padding:.32em .75em;border-radius:999px;font-size:.74em;font-weight:700;color:#fff;letter-spacing:.2px}

/* ============================================================
   DARK MODE MENYELURUH: tabel, tombol, alert, form admin SLiMS
   ============================================================ */
.ub-dark .ub-page .form-control{background:#0f172a;color:#e2e8f0;border-color:#1e293b}
.ub-dark .ub-page select.form-control option{background:#0f172a;color:#e2e8f0}
.ub-dark .ub-page .bg-light{background:#111a2e!important}

/* --- Tabel (s-table / table Bootstrap) --- */
.ub-dark .ub-page table,
.ub-dark .ub-page .table{background:var(--ub-card);color:var(--ub-text)}
.ub-dark .ub-page table th,
.ub-dark .ub-page table td{background:transparent;color:var(--ub-text);border-color:var(--ub-border)!important}
.ub-dark .ub-page table thead th,
.ub-dark .ub-page .s-table thead th{background:#16213a;color:#cbd5e1}
.ub-dark .ub-page table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.ub-dark .ub-page .table-hover tbody tr:hover{background:rgba(79,70,229,.08)}

/* Baris penanda usulan menua */
.ub-dark .ub-page .table-warning,
.ub-dark .ub-page .table-warning td{background:rgba(245,158,11,.14)!important}
.ub-dark .ub-page .table-danger,
.ub-dark .ub-page .table-danger td{background:rgba(239,68,68,.14)!important}

/* --- Tombol admin (btn-default / s-btn) --- */
.ub-dark .ub-page .btn-default,
.ub-dark .ub-page .s-btn{background:#1e293b;color:#e2e8f0;border-color:#334155}
.ub-dark .ub-page .btn-default:hover,
.ub-dark .ub-page .s-btn:hover{background:#334155;color:#fff}
.ub-dark .ub-page .btn-outline-primary,
.ub-dark .ub-page .btn-outline-secondary{background:transparent;border-color:#334155;color:#cbd5e1}

/* --- infoBox / sub_section / detail --- */
.ub-dark .ub-page .infoBox{background:#16213a;color:#cbd5e1;border-color:var(--ub-border)}
.ub-dark .ub-page .sub_section{background:var(--ub-card);border-color:var(--ub-border)}
.ub-dark .ub-page details summary{background:#1e293b;color:#e2e8f0}
.ub-dark .ub-page details[open] summary{border-bottom:1px solid var(--ub-border)}
.ub-dark .ub-page .table-borderless td{border:none!important}

/* --- Alert --- */
.ub-dark .ub-page .alert-info{background:rgba(6,182,212,.12);color:#a5f3fc;border:1px solid rgba(6,182,212,.3)}
.ub-dark .ub-page .alert-warning{background:rgba(245,158,11,.12);color:#fde68a;border:1px solid rgba(245,158,11,.3)}
.ub-dark .ub-page .alert-danger{background:rgba(239,68,68,.12);color:#fecaca;border:1px solid rgba(239,68,68,.3)}
.ub-dark .ub-page .alert-success{background:rgba(16,185,129,.12);color:#a7f3d0;border:1px solid rgba(16,185,129,.3)}
.ub-dark .ub-page .alert-secondary{background:#1e293b;color:#e2e8f0;border:1px solid #334155}

/* --- Paging & lain-lain --- */
.ub-dark .ub-page .paging-area a,.ub-dark .ub-page .paging-area span{color:var(--ub-text)}
.ub-dark .ub-page .divRow label{color:var(--ub-text)}
.ub-dark .ub-page input[type="checkbox"]{accent-color:var(--ub-primary)}

/* Toast notifications */
#ub-toast-wrap{position:fixed;top:18px;right:18px;z-index:99999;display:flex;flex-direction:column;gap:10px}
.ub-toast{min-width:260px;max-width:380px;background:var(--ub-card);color:var(--ub-text);
  border-left:4px solid var(--ub-primary);border-radius:10px;box-shadow:var(--ub-shadow);
  padding:12px 14px;animation:ub-in .35s ease;font-size:.9rem}
.ub-toast.success{border-color:var(--ub-ok)} .ub-toast.danger{border-color:var(--ub-err)} .ub-toast.warning{border-color:var(--ub-warn)}
.ub-toast.out{animation:ub-out .3s ease forwards}
@keyframes ub-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes ub-out{to{opacity:0;transform:translateX(40px)}}

/* Loading skeleton */
.ub-skeleton{position:relative;overflow:hidden;background:var(--ub-border);border-radius:8px;height:16px;margin:6px 0}
.ub-skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:ub-shimmer 1.2s infinite}
.ub-dark .ub-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
@keyframes ub-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ub-loading{opacity:.45;pointer-events:none;filter:saturate(.6)}

/* Empty state */
.ub-empty{text-align:center;padding:42px 10px;color:var(--ub-muted)}
.ub-empty svg{width:130px;height:auto;margin-bottom:12px;opacity:.85}
.ub-empty h4{margin-bottom:4px;color:var(--ub-text)}

/* Tombol tema floating */
.ub-theme-floating{position:fixed;bottom:18px;right:18px;z-index:99999;width:52px;height:52px;border-radius:50%;
  border:none;cursor:pointer;font-size:22px;color:#fff;
  background:linear-gradient(135deg,var(--ub-primary),var(--ub-primary2));
  box-shadow:0 6px 20px rgba(79,70,229,.35);transition:transform .25s,box-shadow .25s}
.ub-theme-floating:hover{transform:scale(1.12) rotate(15deg);box-shadow:0 10px 28px rgba(79,70,229,.5)}

/* Tombol tema inline (OPAC form) */
.ub-theme-btn-inline{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ub-card);color:var(--ub-text);border:2px solid var(--ub-border);
  padding:12px 24px;border-radius:12px;cursor:pointer;font-size:.95rem;font-weight:600;
  transition:all .25s;margin:0 auto;box-shadow:var(--ub-shadow)}
.ub-theme-btn-inline:hover{background:linear-gradient(135deg,var(--ub-primary),var(--ub-primary2));
  color:#fff;border-color:transparent;transform:translateY(-2px)}
.ub-theme-btn-inline .ub-theme-icon{font-size:1.3em}
.ub-theme-inline-target{text-align:center;margin:20px 0;padding:16px;
  border-top:1px dashed var(--ub-border);border-bottom:1px dashed var(--ub-border)}

/* Bar statistik drill-down */
.ub-bar-link{display:block;color:inherit;text-decoration:none}
.ub-bar-link:hover .ub-bar-fill{filter:brightness(1.15)}
.ub-bar-track{background:var(--ub-border);border-radius:6px;height:14px;overflow:hidden}
.ub-bar-fill{height:14px;border-radius:6px;transition:width .6s ease,filter .2s}

/* ============================================================
   v3.6 OVERRIDE KUAT — dark mode menembus CSS admin & iframe
   ============================================================ */
html.ub-dark body, html.ub-dark .ub-page{background:var(--ub-bg)!important}

/* Tabel datagrid (iframe laporan) */
html.ub-dark table, html.ub-dark .table{background:var(--ub-card)!important;color:var(--ub-text)!important}
html.ub-dark table th, html.ub-dark table td,
html.ub-dark .table th, html.ub-dark .table td{
  background:var(--ub-card)!important;
  color:var(--ub-text)!important;
  border-color:var(--ub-border)!important}
html.ub-dark table thead th, html.ub-dark .s-table thead th{
  background:#16213a!important;color:#cbd5e1!important}
html.ub-dark table tbody tr:nth-child(even) td{background:#0e1830!important}
html.ub-dark .table-warning td{background:rgba(245,158,11,.16)!important}
html.ub-dark .table-danger td{background:rgba(239,68,68,.16)!important}

/* Alert (Debug Box dll) */
html.ub-dark .alert-info{background:rgba(6,182,212,.15)!important;color:#a5f3fc!important;border:1px solid rgba(6,182,212,.35)!important}
html.ub-dark .alert-warning{background:rgba(245,158,11,.15)!important;color:#fde68a!important;border:1px solid rgba(245,158,11,.35)!important}
html.ub-dark .alert-danger{background:rgba(239,68,68,.15)!important;color:#fecaca!important;border:1px solid rgba(239,68,68,.35)!important}
html.ub-dark .alert-success{background:rgba(16,185,129,.15)!important;color:#a7f3d0!important;border:1px solid rgba(16,185,129,.35)!important}
html.ub-dark .alert-secondary{background:#1e293b!important;color:#e2e8f0!important;border:1px solid #334155!important}

/* Tombol, kotak, paging, form */
html.ub-dark .btn-default, html.ub-dark .s-btn{background:#1e293b!important;color:#e2e8f0!important;border-color:#334155!important}
html.ub-dark .infoBox{background:#16213a!important;color:#cbd5e1!important}
html.ub-dark .sub_section{background:var(--ub-card)!important}
html.ub-dark .paging-area, html.ub-dark #pagingBox{background:transparent!important;color:var(--ub-text)!important}
html.ub-dark .paging-area a, html.ub-dark .paging-area span{color:var(--ub-text)!important}
html.ub-dark label, html.ub-dark strong, html.ub-dark .divRow label{color:var(--ub-text)!important}
html.ub-dark .form-control{background:#0f172a!important;color:#e2e8f0!important;border-color:#1e293b!important}
html.ub-dark a{color:#818cf8}