/* ============================================================
   ECCLIVION — Church Finance & Management
   Palet warna diturunkan dari logo: biru royal + emas
   ============================================================ */
:root{
  --navy-950:#07264D;
  --navy-900:#0A3568;
  --navy-800:#0C3B75;
  --blue-600:#1257A6;
  --blue-500:#2E7CD1;
  --blue-300:#7FB2E8;
  --sky-100:#E4EEF9;
  --gold-600:#D98E04;
  --gold-500:#F0A202;
  --gold-300:#FFC94D;
  --gold-100:#FDF2D9;
  --bg:#F2F5FA;
  --card:#FFFFFF;
  --ink:#14273F;
  --muted:#5B6B80;
  --line:#E1E8F2;
  --danger:#C0392B;
  --ok:#1E8E5A;
  --radius:14px;
  --shadow:0 1px 2px rgba(10,53,104,.06), 0 8px 24px -12px rgba(10,53,104,.14);
  --sidebar-w:264px;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{font-size:16px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
img{max-width:100%; display:block}
a{color:var(--blue-600)}

/* ---------- Layout ---------- */
.app{display:flex; min-height:100vh}
.main{flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:40;
  background:linear-gradient(178deg, var(--navy-950) 0%, var(--navy-800) 62%, #0F4486 100%);
  color:#DCE8F7; display:flex; flex-direction:column;
  overflow-y:auto; scrollbar-width:thin;
}
.brand{
  display:flex; align-items:center; gap:14px;
  padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.brand-logo{
  width:68px; height:68px; flex:none; background:#fff; border-radius:15px;
  display:flex; align-items:center; justify-content:center; padding:5px;
  box-shadow:0 5px 16px -4px rgba(0,0,0,.45);
}
.brand-logo img{width:100%; height:100%; object-fit:contain}
.brand-name{font-weight:800; font-size:1.5rem; letter-spacing:.2px; color:#fff; line-height:1.1}
.brand-sub{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-300); font-weight:600}

.nav{padding:14px 12px 20px; flex:1}
.nav-label{
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,201,77,.85); padding:16px 12px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; background:transparent; color:#C7D8EE;
  border-radius:10px; cursor:pointer; font-size:.9rem; font-weight:500;
  text-align:left; transition:background .18s, color .18s; position:relative;
}
.nav-item svg{width:19px; height:19px; flex:none; stroke:currentColor}
.nav-item:hover{background:rgba(255,255,255,.08); color:#fff}
.nav-item.active{background:rgba(255,255,255,.12); color:#fff; font-weight:700}
.nav-item.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
}
.nav-item .soon{
  margin-left:auto; font-size:.58rem; font-weight:700; letter-spacing:.06em;
  color:var(--navy-900); background:var(--gold-300);
  padding:2px 7px; border-radius:99px;
}
/* ---- Collapsible report groups (Sentral Laporan) ---- */
.nav-group{margin:1px 0}
.nav-group-head{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; background:transparent; color:#C7D8EE;
  border-radius:10px; cursor:pointer; font-size:.9rem; font-weight:600;
  text-align:left; transition:background .18s, color .18s;
}
.nav-group-head svg{width:19px; height:19px; flex:none; stroke:currentColor}
.nav-group-head:hover{background:rgba(255,255,255,.08); color:#fff}
.nav-group-head .chev{margin-left:auto; display:inline-flex; opacity:.75; transition:transform .22s ease}
.nav-group-head .chev svg{width:15px; height:15px}
.nav-group.open>.nav-group-head{color:#fff}
.nav-group.open>.nav-group-head .chev{transform:rotate(180deg); opacity:1}
.nav-group-body{overflow:hidden; max-height:0; transition:max-height .26s ease; margin-left:9px; padding-left:8px; border-left:1px solid rgba(255,255,255,.10)}
.nav-group.open>.nav-group-body{max-height:520px}
.nav-item.nav-sub{padding:9px 12px 9px 26px; font-size:.855rem; font-weight:500}
.nav-item.nav-sub .nav-dot{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; box-sizing:border-box;
  border:1.5px solid rgba(199,216,238,.5); background:transparent; transition:border-color .18s, background .18s;
}
.nav-item.nav-sub:hover .nav-dot{border-color:rgba(255,255,255,.85)}
.nav-item.nav-sub.active .nav-dot{border-color:var(--gold-300); background:var(--gold-300)}
.nav-item.nav-sub.active::before{display:none}
.sidebar-foot{padding:14px 18px; font-size:.8rem; line-height:1.55; white-space:nowrap; color:rgba(199,216,238,.62); border-top:1px solid rgba(255,255,255,.09)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  padding:14px 28px; display:flex; align-items:center; gap:16px;
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 45%, var(--gold-500) 100%);
  opacity:.85;
}
.page-title{font-size:1.22rem; font-weight:800; letter-spacing:-.01em}
.page-crumb{font-size:.74rem; color:var(--muted); font-weight:500}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.date-chip{
  font-size:.78rem; color:var(--muted); background:var(--sky-100);
  padding:7px 13px; border-radius:99px; font-weight:600; white-space:nowrap;
}
.user-chip{display:flex; align-items:center; gap:9px}
.user-chip .avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-600), var(--navy-900));
  color:#fff; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}
.user-chip .u-name{font-size:.82rem; font-weight:700; line-height:1.1}
.user-chip .u-role{font-size:.68rem; color:var(--muted)}

/* ---------- Content ---------- */
.content{padding:24px 28px 48px; max-width:1440px; width:100%}
.hidden{display:none !important}

/* ---------- Slicer bar ---------- */
.slicer-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow); margin-bottom:20px;
}
.slicer-title{
  display:flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-600); padding-right:6px;
}
.slicer-title svg{width:15px;height:15px}
.slicer{position:relative}
.slicer-btn{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; border-radius:10px;
  padding:8px 12px; font-size:.82rem; font-weight:600; color:var(--ink);
  transition:border-color .15s, background .15s;
}
.slicer-btn:hover{border-color:var(--blue-500)}
.slicer-btn.on{border-color:var(--gold-500); background:var(--gold-100)}
.slicer-btn .cnt{
  background:var(--gold-500); color:#fff; border-radius:99px;
  font-size:.66rem; font-weight:800; padding:1px 7px;
}
.slicer-btn svg{width:13px; height:13px; color:var(--muted)}
.slicer-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:215px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 38px -10px rgba(10,53,104,.28); padding:8px;
  max-height:290px; overflow-y:auto;
}
.slicer-opt{
  display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px;
  font-size:.83rem; cursor:pointer; user-select:none;
}
.slicer-opt:hover{background:var(--sky-100)}
.slicer-opt input{accent-color:var(--blue-600); width:15px; height:15px; cursor:pointer}
.slicer-opt .n{margin-left:auto; font-size:.7rem; color:var(--muted); font-weight:600}
.slicer-reset{
  margin-left:auto; border:0; background:transparent; color:var(--blue-600);
  font-size:.79rem; font-weight:700; cursor:pointer; padding:8px 10px; border-radius:8px;
  display:flex; align-items:center; gap:6px;
}
.slicer-reset:hover{background:var(--sky-100)}
.slicer-reset svg{width:14px;height:14px}
.filter-note{font-size:.74rem; color:var(--muted); width:100%; padding:2px 4px 0}
.filter-note b{color:var(--gold-600)}

/* ---------- KPI ---------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-bottom:20px;
}
.kpi{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow);
}
.kpi .swoosh{position:absolute; right:-14px; top:-16px; width:96px; height:96px; opacity:.9; pointer-events:none}
.kpi-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.kpi-icon{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--blue-500), var(--navy-900));
}
.kpi:nth-child(2n) .kpi-icon{background:linear-gradient(135deg, var(--gold-300), var(--gold-600))}
.kpi-icon svg{width:19px; height:19px}
.kpi-label{font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); line-height:1.3}
.kpi-value{font-size:1.9rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.kpi-value small{font-size:1rem; font-weight:700; color:var(--muted)}
.kpi-sub{font-size:.74rem; color:var(--muted); margin-top:5px; font-weight:500}
.kpi-sub b{color:var(--blue-600)}
.kpi::after{
  content:""; position:absolute; left:18px; bottom:0; height:3px; width:52px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

/* ---------- Charts ---------- */
.chart-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}
.card h3{font-size:.95rem; font-weight:800; letter-spacing:-.01em}
.card .card-sub{font-size:.74rem; color:var(--muted); margin-bottom:12px}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.chart-box{position:relative; height:280px}
.chart-box.tall{height:300px}

/* ---------- Toolbar / table ---------- */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.search-wrap{position:relative; flex:1; min-width:230px; max-width:400px}
.search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted)}
.search-input{
  width:100%; padding:10px 12px 10px 38px; border:1.5px solid var(--line);
  border-radius:10px; font-family:inherit; font-size:.87rem; background:#fff; color:var(--ink);
}
.search-input:focus{outline:2px solid var(--blue-500); outline-offset:1px; border-color:var(--blue-500)}
select.mini{
  padding:9px 11px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.83rem; font-weight:600; background:#fff; color:var(--ink); cursor:pointer;
}
.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:0; border-radius:10px; padding:10px 16px;
  font-size:.85rem; font-weight:700; transition:filter .15s, background .15s;
}
.btn svg{width:16px; height:16px}
.btn-gold{background:linear-gradient(135deg, var(--gold-500), var(--gold-600)); color:#fff; box-shadow:0 6px 14px -6px rgba(217,142,4,.6)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-blue{background:var(--blue-600); color:#fff}
.btn-blue:hover{background:var(--navy-800)}
.btn-ghost{background:transparent; color:var(--blue-600); border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--sky-100)}
.btn-danger{background:#FBEAE8; color:var(--danger)}
.btn-danger:hover{background:#F6D8D4}

.table-card{padding:0; overflow:hidden}
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:.85rem}
table.data th{
  text-align:left; padding:12px 16px; white-space:nowrap;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
  color:var(--navy-800); background:var(--sky-100); border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none;
}
table.data th .arrow{color:var(--gold-600); font-size:.75rem}
table.data td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tbody tr{cursor:pointer; transition:background .12s}
table.data tbody tr:hover{background:#F7FAFE}
.cell-name{display:flex; align-items:center; gap:11px; min-width:210px}
.avatar-s{
  width:34px; height:34px; border-radius:50%; flex:none; color:#fff;
  font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.cell-name .nm{font-weight:700; line-height:1.2}
.cell-name .no{font-size:.7rem; color:var(--muted)}
.badge{
  display:inline-block; padding:3px 11px; border-radius:99px;
  font-size:.7rem; font-weight:800; letter-spacing:.02em;
}
.badge.aktif{background:#E2F5EC; color:var(--ok)}
.badge.pindah{background:var(--gold-100); color:var(--gold-600)}
.badge.meninggal{background:#EDEFF3; color:#68758A}
.muted{color:var(--muted)}

.table-foot{
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  font-size:.79rem; color:var(--muted); flex-wrap:wrap;
}
.pager{margin-left:auto; display:flex; gap:5px}
.pager button{
  min-width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; font-weight:700; font-size:.8rem; color:var(--ink);
  transition:background .12s;
}
.pager button:hover:not(:disabled){background:var(--sky-100)}
.pager button.cur{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.pager button:disabled{opacity:.4; cursor:default}

/* ---------- Modal ---------- */
.modal-back{
  position:fixed; inset:0; z-index:80; background:rgba(7,38,77,.5);
  display:flex; align-items:center; justify-content:center;
  padding:4vh 18px; overflow-y:auto; backdrop-filter:blur(3px);
}
.modal{
  background:#fff; border-radius:18px; width:100%; max-width:760px;
  box-shadow:0 30px 70px -20px rgba(7,38,77,.55); overflow:hidden;
  animation:pop .22s ease;
  max-height:90vh; display:flex; flex-direction:column;
}
@keyframes pop{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .modal{animation:none} *{transition:none !important} }
.modal-head{
  display:flex; align-items:center; gap:14px; padding:20px 24px;
  background:linear-gradient(120deg, var(--navy-950), var(--blue-600));
  color:#fff; flex-shrink:0;
}
.modal-head .avatar-l{
  width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
  border:1.5px solid rgba(255,255,255,.3);
}
.modal-head h2{font-size:1.12rem; font-weight:800}
.modal-head .mh-sub{font-size:.76rem; opacity:.85}
.modal-x{
  margin-left:auto; background:rgba(255,255,255,.14); border:0; color:#fff;
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:1rem; font-weight:700;
}
.modal-x:hover{background:rgba(255,255,255,.26)}
.modal-body{padding:22px 24px 26px; overflow-y:auto; flex:1 1 auto; min-height:0}
.detail-sect{
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-600); border-bottom:1px solid var(--line);
  padding-bottom:6px; margin:18px 0 12px;
}
.detail-sect:first-child{margin-top:0}
.detail-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 18px}
.d-item .d-label{font-size:.68rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.d-item .d-val{font-size:.88rem; font-weight:600; overflow-wrap:anywhere}
.d-item.wide{grid-column:span 3}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:14px 24px; flex-shrink:0; border-top:1px solid var(--line); background:#fff; flex-wrap:wrap}

/* ---------- Form ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 16px}
.f-item.wide{grid-column:span 2}
.f-item label{display:block; font-size:.74rem; font-weight:700; margin-bottom:5px; color:var(--navy-800)}
.f-item input, .f-item select, .f-item textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.86rem; background:#fff; color:var(--ink);
}
.f-item input:focus, .f-item select:focus, .f-item textarea:focus{
  outline:2px solid var(--blue-500); outline-offset:1px; border-color:var(--blue-500);
}

/* ---------- Placeholder (Keuangan) ---------- */
.placeholder{
  background:linear-gradient(135deg, #fff 0%, var(--sky-100) 100%);
  border:1.5px dashed var(--blue-300); border-radius:var(--radius);
  padding:56px 30px; text-align:center;
}
.placeholder .ph-ic{
  width:66px; height:66px; margin:0 auto 18px; border-radius:18px; color:#fff;
  background:linear-gradient(135deg, var(--blue-500), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
}
.placeholder .ph-ic svg{width:30px; height:30px}
.placeholder h2{font-size:1.25rem; font-weight:800; margin-bottom:8px}
.placeholder p{color:var(--muted); max-width:520px; margin:0 auto; font-size:.9rem}

.toast{
  position:fixed; bottom:26px; right:26px; z-index:99;
  background:var(--navy-900); color:#fff; padding:13px 20px; border-radius:12px;
  font-size:.85rem; font-weight:600; box-shadow:0 16px 40px -12px rgba(7,38,77,.6);
  display:flex; align-items:center; gap:10px;
  animation:pop .25s ease;
}
.toast .dot{width:9px; height:9px; border-radius:50%; background:var(--gold-300)}

.demo-note{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gold-100); border:1px solid #F3D89A; color:#8A5D02;
  font-size:.73rem; font-weight:700; border-radius:99px; padding:5px 13px;
}
.demo-note svg{width:13px;height:13px}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .kpi-grid{grid-template-columns:repeat(3, 1fr)}
  .span-8, .span-6, .span-4{grid-column:span 12}
}
@media (max-width:920px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%); transition:transform .25s; width:264px}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:flex !important}
  .kpi-grid{grid-template-columns:repeat(2, 1fr)}
  .detail-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .f-item.wide{grid-column:span 1}
  .d-item.wide{grid-column:span 2}
  .content{padding:18px 16px 40px}
  .topbar{padding:12px 16px}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr}
  .date-chip, .user-chip .u-txt{display:none}
}
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; color:var(--navy-800);
}
.menu-btn svg{width:19px; height:19px}

/* ---------- Foto anggota, tautan relasi & tabel mini ---------- */
.avatar-s.has-photo, .avatar-l.has-photo{background:var(--sky-100); padding:0; overflow:hidden}
.avatar-s img, .avatar-l img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}

.photo-up{display:flex; flex-direction:column; align-items:center; gap:6px}
.photo-up .avatar-l{cursor:pointer; transition:box-shadow .15s}
.photo-up .avatar-l:hover{box-shadow:0 0 0 3px rgba(240,162,2,.45)}
.photo-btns{display:flex; gap:6px}
.ph-btn{border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff;
  font:600 10.5px/1 var(--font); padding:5px 9px; border-radius:8px; cursor:pointer}
.ph-btn:hover{background:rgba(255,255,255,.24)}
.ph-btn.danger{border-color:rgba(255,120,120,.6); color:#ffd7d7}

.mem-link{color:var(--blue-600); font-weight:700; text-decoration:none; border-bottom:1px dashed rgba(18,87,166,.45)}
.mem-link:hover{color:var(--gold-600); border-bottom-color:var(--gold-500)}

.table-wrap.mini{margin:0 0 6px; border:1px solid var(--line); border-radius:12px}
.mini-table th{font-size:10.5px; padding:9px 12px}
.mini-table td{padding:9px 12px; font-size:12.5px}
.badge.rel{background:var(--gold-100); color:#8a5b00}
.empty-note{margin:2px 0 8px; padding:12px 14px; border:1px dashed var(--line); border-radius:10px;
  color:var(--muted); font-size:12.5px; background:var(--bg)}

/* ---------- Kontrol tambah/ubah pada seksi & tabel ---------- */
.detail-sect.with-btn{display:flex; align-items:center; justify-content:space-between; gap:10px}
.btn-mini{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--gold-300);
  background:var(--gold-100); color:#7a5200; font:700 11px/1 var(--font);
  padding:6px 10px; border-radius:9px; cursor:pointer; letter-spacing:.02em}
.btn-mini:hover{background:var(--gold-300)}
.btn-mini svg{width:12px; height:12px; stroke:currentColor}

.row-act{white-space:nowrap; text-align:right}
.icon-btn{border:1px solid var(--line); background:#fff; color:var(--blue-600);
  width:26px; height:26px; border-radius:8px; cursor:pointer; font:700 12px/1 var(--font);
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
.icon-btn svg{width:13px; height:13px; stroke:currentColor}
.icon-btn:hover{background:var(--sky-100)}
.icon-btn.danger{color:var(--danger)}
.icon-btn.danger:hover{background:#fdeaea; border-color:#f3c2c2}

.modal.sm{max-width:520px}
.lbl-opt{font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0}
.modal-head .avatar-l svg{width:22px; height:22px; stroke:#fff}

/* ---------- Tombol export pada slicer bar ---------- */
.bar-spacer{flex:1}
.btn.btn-sm{padding:8px 13px; font-size:12px; border-radius:10px}
.btn.btn-sm svg{width:13px; height:13px}
@media (max-width:920px){ .bar-spacer{display:none} }

/* ---------- Chart of Accounts ---------- */
.coa-code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700; color:var(--blue-600); font-size:12px}
tr.coa-header td{background:#EEF3FA; border-bottom:1px solid #DCE6F2}
tr.coa-header .coa-name{font-weight:800; color:var(--navy-900); letter-spacing:.01em}
tr.coa-header .coa-code{color:var(--navy-900)}
.coa-table td{vertical-align:top}

/* ---------- Aset tetap: form, ringkasan depresiasi, jurnal ---------- */
.f-hint{margin-top:4px; font-size:10.5px; line-height:1.45; color:var(--muted)}
.f-item input[disabled]{background:#EDF1F7; color:#7A8699; cursor:not-allowed}
.chk-row{display:flex; align-items:center; gap:8px; padding:10px 0 2px}
.chk-row input[type="checkbox"]{width:16px; height:16px; accent-color:var(--gold-500)}
.chk-row label{font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer}

.dep-summary{display:flex; gap:18px; padding:6px 2px}
.dep-summary > div{display:flex; flex-direction:column; gap:2px}
.dep-summary span{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.dep-summary b{font-size:14.5px; color:var(--navy-900)}

.warn-note{margin:0 18px 12px; padding:10px 14px; border:1px solid #F3DFAE; background:#FFF8E6;
  border-radius:10px; font-size:12.5px; color:#7A5200}

.coa-link{color:var(--blue-600); text-decoration:none; border-bottom:1px dashed rgba(18,87,166,.45)}
.coa-link:hover{color:var(--gold-600); border-bottom-color:var(--gold-500)}
.coa-link b{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px}

@media (max-width:920px){ .dep-summary{flex-wrap:wrap; gap:12px} }

/* ---------- Anggaran: pills, stat cards, chips ---------- */
.bud-pills{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.bud-pill{display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; font:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted); cursor:pointer; transition:all .15s}
.bud-pill svg{width:15px; height:15px; stroke:currentColor}
.bud-pill:hover{border-color:var(--blue-600); color:var(--blue-600)}
.bud-pill.income.on{background:#E8FAF2; border-color:#15C78A; color:#0E8A60}
.bud-pill.expense.on{background:#FFF4DE; border-color:var(--gold-500); color:#8A5B00}

.bud-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:14px}
.bud-stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px;
  border-top:4px solid var(--line); box-shadow:0 1px 2px rgba(10,53,104,.05);
  display:flex; flex-direction:column; gap:5px}
.bud-stat span{font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.bud-stat b{font-size:16.5px; color:var(--navy-900); letter-spacing:-.01em}
.bud-stat.green{border-top-color:#15C78A}  .bud-stat.green b{color:#0E8A60}
.bud-stat.blue{border-top-color:var(--blue-600)} .bud-stat.blue b{color:var(--blue-600)}
.bud-stat.orange{border-top-color:#F58A1F} .bud-stat.orange b{color:#C56A00}
.bud-stat.purple{border-top-color:#7B5CD6} .bud-stat.purple b{color:#5D3FC0}

.chip{display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:800; white-space:nowrap}
.chip.up{background:#E4F8EF; color:#0E8A60}
.chip.down{background:#FDE9E9; color:#C23333}
.chip.flat{background:#EEF1F6; color:#68758A}
.chip.capai.full{background:#FDE7EE; color:#C2255C}
.chip.capai.part{background:#FFF4DE; color:#8A5B00}
.chip.capai.zero{background:#E4F7FB; color:#0E7490}

.bud-table td{vertical-align:middle}
tr.bud-total td{background:#F4F7FB; border-top:2px solid #DCE6F2; padding-top:11px; padding-bottom:11px}
.slicer-label{font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--muted)}

@media (max-width:1100px){ .bud-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .bud-stats{grid-template-columns:1fr} }

/* ---------- Anggaran pengeluaran ---------- */
.bud-stat.red{border-top-color:#E25555} .bud-stat.red b{color:#C23333}
.page-btns{display:flex; gap:5px; align-items:center}
.page-num{min-width:30px; height:30px; padding:0 8px; border-radius:8px; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer}
.page-num:hover{border-color:var(--blue-600); color:var(--blue-600)}
.page-num.on{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.page-ellipsis{color:var(--muted); font-size:12px; padding:0 2px}

/* tautan lintas menu (kegiatan, anggaran penerimaan) */
.xref-link{color:var(--blue-600); text-decoration:none; border-bottom:1px dashed rgba(18,87,166,.45);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px}
.xref-link:hover{color:var(--gold-600); border-bottom-color:var(--gold-500)}

/* Jurnal Penerimaan KPI cards */
.jr-kpi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(10,53,104,.05); display:flex; flex-direction:column; gap:6px}
.jr-kpi span{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.jr-kpi b{font-size:1.5rem; letter-spacing:-.01em}

/* Pengeluaran Uang Muka — kartu ringkasan anggaran */
.adv-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:6px 0 4px}
.adv-card{background:#F6F8FC; border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:5px}
.adv-card span{font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.adv-card b{font-size:1.05rem}
.modal.lg{max-width:820px}
.cell-in{width:100%; border:1px solid var(--line); border-radius:6px; padding:5px 7px; font:inherit; font-size:12px}

/* Pertanggungjawaban uang muka — detail layout */
.stl-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
@media(max-width:900px){.stl-grid{grid-template-columns:1fr}}
.stl-sect{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px}
.stl-sect h4{margin:0 0 12px; font-size:13px; color:var(--navy); font-weight:800}
.stl-fin{display:flex; flex-direction:column; gap:2px}
.stl-fin-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.stl-fin-row:last-child{border-bottom:none}
.stl-fin-row span{color:var(--muted)} .stl-fin-row b{font-weight:700}
.stl-fin-row.hl b{font-size:1.05rem}
.stl-return{margin-top:12px; background:#F8FAFC; border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.stl-return-head{font-size:12px; font-weight:800; color:var(--muted); margin-bottom:6px}
.appr-chain{display:flex; flex-direction:column; gap:10px}
.appr-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:#F8FAFC; border:1px solid var(--line); border-radius:10px}
.appr-role{font-size:11px; color:var(--muted); font-weight:700}
.appr-name{font-size:13px; font-weight:700; color:var(--navy)}

/* Kas & Bank — kartu saldo per rekening */
.kb-acct-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px}
.kb-acct-card{text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; transition:all .15s; font-family:inherit}
.kb-acct-card:hover{border-color:var(--blue-600); box-shadow:0 4px 14px rgba(18,87,166,.10)}
.kb-acct-card.on{border-color:var(--blue-600); background:linear-gradient(180deg,#F4F8FD,#fff)}
.kb-acct-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.kb-acct-code{font-size:12px; font-weight:800; color:var(--navy); letter-spacing:.03em}
.kb-acct-name{font-size:12px; color:var(--muted); margin-bottom:8px; min-height:30px}
.kb-acct-saldo{font-size:1.15rem; font-weight:800; color:var(--blue-600); margin-bottom:6px}
.kb-acct-io{display:flex; justify-content:space-between; font-size:11px; font-weight:700}

/* Neraca Pembuka (Akuntansi ISAK 35) */
.ob-grid{display:grid; grid-template-columns:1fr 290px; gap:16px; align-items:start}
@media(max-width:1000px){.ob-grid{grid-template-columns:1fr}}
.ob-banner{background:#DDF6FB; color:#0E7490; border-radius:8px; padding:10px 14px; font-size:12.5px}
.ob-table td{vertical-align:middle}
.ob-table input, .ob-table select{border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-family:inherit; font-size:12.5px}
.ob-table input:disabled{background:#F4F6F9; color:var(--muted)}

/* Jurnal Umum (Akuntansi ISAK 35) */
.gj-banner{background:#E7F6EE; border:1px solid #BEE7D2; color:#1F5138; border-radius:10px; padding:12px 16px; font-size:12.5px; margin-bottom:14px; line-height:1.55}
.gj-table tr.gj-first td{border-top:2px solid var(--line)}

/* Buku Besar — mode filter periode */
.gl-modes{display:flex; border:1.5px solid var(--blue-600); border-radius:9px; overflow:hidden}
.gl-mode{background:#fff; color:var(--blue-600); border:none; padding:8px 16px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; border-right:1.5px solid var(--blue-600)}
.gl-mode:last-child{border-right:none}
.gl-mode.on{background:#EAF1FB; color:var(--navy)}


/* Laporan Keuangan (ISAK 35) */
.fr-table td{padding:8px 14px; font-size:12.5px}
.fr-table tr.fr-sect td{background:#EEF3FA; color:var(--navy); letter-spacing:.03em; font-size:12px; border-top:2px solid var(--line)}
.fr-table tr.bud-total td{border-top:1.5px solid var(--line)}

/* Tutup Buku (Akuntansi ISAK 35) */
.cl-banner{background:#FFF3DD; border:1px solid #F5D9A0; color:#B07800; border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.5; font-weight:600}
.cl-surplus{background:#F1F3F7; border-radius:10px; padding:16px; text-align:center; margin-top:14px}
.cl-surplus span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.cl-surplus b{display:block; font-size:1.5rem; margin:4px 0 2px}

/* Setting Pengguna */
.set-tabs{display:flex; align-items:center; border-bottom:1px solid var(--line)}
.set-tab{background:none; border:none; border-bottom:2px solid transparent; padding:14px 22px; font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:7px}
.set-tab svg{width:15px; height:15px}
.set-tab.on{color:var(--blue-600); border-bottom-color:var(--blue-600)}
.set-sect{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--blue-600); margin-bottom:10px}
.set-sect svg{width:16px; height:16px}
.set-lbl{font-size:12px; font-weight:600; color:#41505F; margin-bottom:5px; display:block}
.set-lbl .req, .req{color:#EF4444}
.set-logo-box{display:flex; gap:18px; align-items:center; background:#F8FAFC; border:1px solid var(--line); border-radius:10px; padding:16px}
.set-logo{width:78px; height:78px; border:1px dashed #C9D4E2; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden}
.set-logo img{max-width:100%; max-height:100%; object-fit:contain}
.hint{font-size:11px; color:var(--muted); margin-top:5px}
.sig-img{width:56px; height:38px; object-fit:contain; background:#F1F5F9; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center}
.sig-empty{font-size:16px}

/* User Management */
.um-form{display:grid; grid-template-columns:1fr; gap:14px; max-width:850px}
.um-toggle{display:flex; align-items:center; gap:9px; cursor:pointer}
.um-toggle input{display:none}
.um-slider{width:38px; height:21px; border-radius:999px; background:#CBD5E1; position:relative; transition:.18s}
.um-slider::after{content:''; position:absolute; top:2.5px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.18s}
.um-toggle input:checked + .um-slider{background:var(--blue-600)}
.um-toggle input:checked + .um-slider::after{left:19px}

/* Role & Permission Management */
.pm-note{display:inline-flex; align-items:center; gap:6px; background:#E0F5FA; color:#0E7490; border-radius:7px; padding:5px 10px; font-size:11.5px; font-weight:600; line-height:1.35; white-space:nowrap}
.pm-note svg{width:13px; height:13px; flex:none}
.pm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.pm-group{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#FBFCFE}
.pm-group-h{display:flex; align-items:center; justify-content:space-between; padding-bottom:7px; margin-bottom:7px; border-bottom:1px solid var(--line)}
.pm-group-h label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--navy); cursor:pointer}
.pm-item{display:flex; align-items:flex-start; gap:7px; padding:4px 0; font-size:12px; cursor:pointer}
.pm-item code{font-size:11.5px; color:var(--navy)}
.pager .pg{border:1px solid var(--line); background:#fff; border-radius:7px; padding:5px 11px; font-family:inherit; font-size:12px; cursor:pointer; margin-left:4px}
.pager .pg.on{background:var(--blue-600); color:#fff; border-color:var(--blue-600); font-weight:700}
.pager .pg:disabled{opacity:.5; cursor:not-allowed}

/* Audit Logs */
.al-filters{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; padding:14px 18px 4px; border-bottom:1px solid var(--line)}
.al-detail{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px}
.al-detail > div{display:flex; flex-direction:column; gap:2px; padding:7px 0; border-bottom:1px solid var(--line)}
.al-detail span{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.al-detail b{font-size:13px}
.al-detail code{font-size:12px; color:var(--blue-600)}
.pg-gap{padding:0 4px; color:var(--muted)}

/* Backup & Restore */
.br-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:900px){.br-grid{grid-template-columns:1fr}}
.br-card{text-align:center; padding:26px 24px}
.br-card h3{margin:10px 0 8px; font-size:17px; color:var(--navy)}
.br-card > p{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.6}
.br-card code{font-size:12px; color:var(--blue-600)}
.br-ico svg{width:34px; height:34px}
.br-warn{display:flex; align-items:flex-start; gap:7px; text-align:left; border-radius:8px; padding:9px 12px; font-size:11.5px; line-height:1.5}
.br-warn svg{width:13px; height:13px; flex:none; margin-top:2px}
.btn-lg{padding:11px 18px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn-lg svg{width:15px; height:15px}

/* Sentral Laporan — Unified Reports Console */
.sr-head{margin-bottom:14px}
.sr-head h2{margin:0 0 3px; font-size:20px; font-weight:800; color:#2C3E50; letter-spacing:.02em; display:inline-block; border-bottom:3px solid var(--blue-600); padding-bottom:4px}
.sr-console{padding:0}
.sr-cols{display:grid; grid-template-columns:1fr 1px 1fr; gap:0}
@media(max-width:900px){.sr-cols{grid-template-columns:1fr}}
.sr-cols > div{padding:16px 20px}
.sr-div{background:var(--line)}
.sr-legend{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5E7189; padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.sr-radios{display:flex; gap:20px; margin-bottom:12px}
.sr-radio{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}
.sr-fields{margin-top:4px}
.sr-check{display:flex; align-items:center; gap:8px; font-size:13px; margin-top:9px; cursor:pointer; color:#41505F}
.sr-bar{display:flex; align-items:center; gap:8px; padding:12px 20px; border-top:1px solid var(--line); flex-wrap:wrap}
.sr-report{margin-top:18px; padding:26px 28px}
.sr-kop{text-align:center; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line)}
.sr-kop img{height:44px; margin-bottom:8px; display:inline-block}
.sr-kop-name{font-size:17px; font-weight:800; color:var(--navy); letter-spacing:.01em}
.sr-kop-title{font-size:13.5px; font-weight:800; color:#2C3E50; margin-top:6px; letter-spacing:.02em}
.sr-kop-per{font-size:12px; color:var(--muted); margin-top:3px}
.sr-table td, .sr-table th{font-size:12.5px}
.sr-table .num{text-align:right; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; white-space:nowrap}
.sr-table thead th{background:#F8FAFC; font-size:10.5px; letter-spacing:.06em}
.sr-sect td{background:#E8EDF2 !important; font-weight:800; color:#2C3E50; text-transform:uppercase; font-size:11.5px; letter-spacing:.04em}
.sr-sub td{background:#F6F8FB !important; font-weight:700; color:#41505F}
.sr-total td{border-top:1.5px solid #CBD5E1; font-weight:800}
.sr-grand td{border-top:2px solid var(--navy); border-bottom:3px double var(--navy); font-weight:800; background:#F8FAFC}
.sr-foot{margin-top:14px; padding:9px 13px; border-radius:8px; font-size:12px; font-weight:700}
.sr-foot.ok{background:#E7F6EE; color:#0E8A60}
.sr-foot.bad{background:#FBE9E9; color:#C23333}

/* Sentral Laporan — Buku Besar */
.sr-acct{padding:14px 20px; border-top:1px solid var(--line)}
.sr-acct select{max-width:520px}
.bb-acc{margin-bottom:22px}
.bb-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#D7F3FA; color:#0E6F86; border-radius:7px; padding:9px 14px; margin-bottom:10px;
  font-size:12.5px; font-weight:700}
.bb-awal{font-weight:700; white-space:nowrap}

/* Sentral Laporan — Anggaran & Realisasi */
.ang-bar{position:relative; height:19px; border-radius:5px; background:#E8EDF2; overflow:hidden}
.ang-fill{position:absolute; inset:0 auto 0 0; border-radius:5px; transition:width .3s}
.ang-pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; letter-spacing:.02em}
.modal-lg{max-width:760px}

/* Pita konteks hierarki Sinode → Klasis → Gereja */
.hier-crumb{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#EAF2FD; border:1px solid #CFE0F7; color:#1257A6;
  border-radius:9px; padding:9px 14px; margin:0 0 14px; font-size:12.5px}
.hier-crumb a{color:#1257A6; text-decoration:none; font-weight:600}
.hier-crumb a:hover{text-decoration:underline}
.hier-crumb b{color:var(--navy)}
.hier-crumb .hc-sep{color:#8FB4E3}
.hier-crumb .muted{color:#5E7189}
.hier-crumb .btn-mini{margin-left:auto}

/* ===== Login / Autentikasi ===== */
.login-wrap{position:fixed;inset:0;display:flex;background:#fff;z-index:60;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.login-left{flex:1;background:#E9ECF0;display:flex;align-items:center;justify-content:center;padding:40px}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.login-logo img{width:190px;height:auto;background:transparent;mix-blend-mode:multiply;filter:drop-shadow(0 8px 20px rgba(10,53,104,.12))}
.login-word{font-weight:800;font-size:2.9rem;line-height:1;letter-spacing:.5px;margin-top:6px}
.login-word .lw1{color:#12325F}.login-word .lw2{color:#E6A100}
.login-tag{font-size:.72rem;letter-spacing:.34em;color:#8A93A3;font-weight:600;text-transform:uppercase;border-top:1px solid #C7CDD6;padding-top:6px;margin-top:2px}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.login-form{width:100%;max-width:390px}
.login-intro{color:#5B6B80;font-size:.98rem;line-height:1.5;margin:0 0 26px}
.lf-field{margin-bottom:18px}
.lf-field label{display:block;font-size:.9rem;color:#3A4557;font-weight:600;margin-bottom:7px}
.lf-row{display:flex;align-items:center;justify-content:space-between}
.forgot{color:#1257A6;font-size:.85rem;text-decoration:none}.forgot:hover{text-decoration:underline}
.login-form input[type=email],.login-form input[type=password],.login-form input[type=text]{width:100%;padding:12px 14px;border:1px solid #D6DEE8;border-radius:9px;font-size:.98rem;color:#23303F;background:#fff;transition:border-color .15s,box-shadow .15s}
.login-form input:focus{outline:none;border-color:#1B8FE3;box-shadow:0 0 0 3px rgba(27,143,227,.15)}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:44px}
.eye-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8A93A3;cursor:pointer;padding:6px;display:flex;border-radius:6px}
.eye-btn:hover{color:#5B6B80;background:#F0F3F7}
.remember{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#3A4557;margin:4px 0 20px;cursor:pointer}
.remember input{width:16px;height:16px;accent-color:#1B8FE3}
.login-btn{width:100%;background:#1B8FE3;color:#fff;border:none;padding:13px;border-radius:9px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s,transform .05s}
.login-btn:hover{background:#1580CF}.login-btn:active{transform:translateY(1px)}
.login-foot{text-align:center;margin-top:20px;color:#5B6B80;font-size:.92rem}
.login-foot a{color:#1257A6;font-weight:600;text-decoration:none}.login-foot a:hover{text-decoration:underline}
.login-hint{margin-top:22px;padding:10px 12px;background:#F4F7FB;border:1px solid #E1E9F3;border-radius:8px;font-size:.8rem;color:#5B6B80;text-align:center}
.login-hint code{background:#E7EEF7;padding:1px 6px;border-radius:4px;color:#1257A6;font-size:.78rem}
@media (max-width:820px){.login-left{display:none}}

/* Konfirmasi Akses modal */
.ak-modal{text-align:center;max-width:430px}
.ak-body{padding:30px 30px 26px}
.ak-icon{width:84px;height:84px;border-radius:50%;border:3px solid #D6DEE8;color:#9AA4B2;font-size:2.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.ak-modal h2{text-align:center;font-size:1.5rem;color:#3A4557;margin:0 0 12px}
.ak-body p{text-align:center;color:#7A8496;font-size:1rem;margin:0 0 22px}
.ak-actions{display:flex;gap:12px;justify-content:center}
.ak-yes{background:#1B8FE3;color:#fff;padding:9px 26px;font-weight:700;border:none;border-radius:8px;cursor:pointer}
.ak-yes:hover{background:#1580CF}
.ak-no{background:#EBEEF2;color:#7A8496;padding:9px 26px;font-weight:700;border:none;border-radius:8px;cursor:pointer}
.ak-no:hover{background:#E0E4EA}
.user-menu{position:relative}
.topbar .user-chip{display:flex; align-items:center; gap:9px; background:none; border:1px solid transparent; border-radius:10px; padding:4px 8px 4px 4px; cursor:pointer; transition:background .15s,border-color .15s}
.topbar .user-chip:hover{background:#EEF2F7; border-color:var(--line)}
.user-chip .u-txt{text-align:left}
.user-chip .u-caret{width:16px; height:16px; color:var(--muted); flex:none}
.user-dropdown{position:absolute; right:0; top:calc(100% + 8px); width:262px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 34px -10px rgba(10,53,104,.28); padding:8px; z-index:50}
.user-dropdown[hidden]{display:none}
.ud-head{display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:8px}
.ud-head .avatar.lg{width:44px; height:44px; font-size:1rem; flex:none}
.ud-info{min-width:0}
.ud-name{font-weight:800; font-size:.92rem; color:#1F2C3D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ud-email{font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ud-role{font-size:.72rem; color:var(--blue-600); font-weight:600; margin-top:2px}
.ud-logout{display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px; border:none; background:none; border-radius:8px; color:#C0392B; font-weight:700; font-size:.9rem; cursor:pointer; text-align:left; font-family:inherit}
.ud-logout:hover{background:#FCEBEA}

/* ===== Invoice item lines (Penerimaan Dari Penagihan) ===== */
.inv-items-head{display:flex; align-items:center; justify-content:space-between; margin:24px 0 10px}
.inv-items-title{font-weight:800; font-size:1rem; color:#1F2C3D; display:flex; align-items:center; gap:8px}
.inv-items-title svg{width:18px; height:18px; color:var(--blue-600)}
.inv-items-table th{background:#EEF1F6; color:#5B6B80; font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.inv-items-table td{vertical-align:middle}
.inv-items-table input{padding:8px 10px; border:1px solid #D6DEE8; border-radius:8px; font-size:.9rem; background:#fff}
.inv-items-table input:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(18,87,166,.12)}
.inv-grand{display:flex; justify-content:flex-end; align-items:center; gap:18px; background:#F3F5F9; border-radius:10px; padding:14px 20px; margin-top:14px; font-size:1.05rem; color:#5B6B80}
.inv-grand b{color:var(--blue-600); font-size:1.25rem; font-weight:800}

/* ===== Cetak Invoice (Penerimaan Dengan Penagihan) ===== */
.print-overlay{position:fixed; inset:0; z-index:200; background:#EEF1F6; overflow-y:auto; padding:0 0 50px}
.print-topbar{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:14px 22px; background:#F4F6F9; border-bottom:1px solid var(--line)}
.invoice-sheet{max-width:720px; margin:24px auto; background:#fff; border-radius:10px; box-shadow:0 12px 34px -14px rgba(7,38,77,.28); padding:0 36px 32px}
.inv-topline{height:5px; background:var(--blue-600); margin:0 -36px 26px; border-radius:10px 10px 0 0}
.inv-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.inv-hd-org{display:flex; gap:12px; align-items:flex-start}
.inv-logo{width:54px; height:54px; object-fit:contain}
.inv-org-name{font-weight:800; font-size:15px; color:#1F2C3D; line-height:1.25}
.inv-org-meta{font-size:11px; color:var(--muted); line-height:1.5; max-width:330px}
.inv-hd-box{border:1.5px solid var(--blue-600); border-radius:8px; padding:10px 18px; text-align:right; min-width:170px}
.inv-word{font-size:26px; font-weight:800; color:var(--blue-600); letter-spacing:1px; line-height:1}
.inv-box-no{font-size:12px; font-weight:700; color:#1F2C3D; margin-top:4px}
.inv-box-date{font-size:10px; color:var(--muted)}
.inv-hr{border-top:1px solid var(--line); margin:22px 0}
.inv-title-row{display:flex; justify-content:space-between; align-items:center}
.inv-big-no{font-size:23px; font-weight:800; color:#0A2A55}
.inv-big-date{font-size:12px; color:var(--muted); margin-top:2px}
.inv-status-chip{display:inline-block; background:#DDF3E4; color:#1B7F4C; font-weight:800; font-size:11px; letter-spacing:.04em; padding:6px 14px; border-radius:20px}
.inv-parties{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; margin:22px 0}
.inv-label{font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--blue-600); text-transform:uppercase; margin-bottom:6px}
.inv-cust-name{font-size:16px; font-weight:800; color:#1F2C3D}
.inv-cust-addr{font-size:12px; color:#5B6B80; line-height:1.55; margin-top:3px}
.inv-meta-row{display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:13px}
.inv-meta-row span{color:var(--muted)}
.inv-meta-row b{color:#1F2C3D; text-align:right}
.inv-items{width:100%; border-collapse:collapse; margin-top:4px}
.inv-items th{background:#F4F6F9; color:#5B6B80; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:11px 12px; text-align:left; border-bottom:1px solid var(--line)}
.inv-items td{padding:13px 12px; border-bottom:1px solid var(--line); font-size:13px; color:#1F2C3D}
.inv-totals{margin-top:16px; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.inv-tot-row{display:flex; gap:44px; justify-content:space-between; min-width:270px; font-size:13px; color:#5B6B80}
.inv-tot-row.grand{font-size:17px; font-weight:800; color:var(--blue-600); border-top:1px solid var(--line); padding-top:10px}
.inv-tot-row.grand span:first-child{color:#1F2C3D}
.inv-note{margin-top:20px; background:#EFF5FF; border:1px solid #DCE8FB; border-radius:8px; padding:12px 14px; font-size:12px; color:#3B5578}
.inv-sign{display:flex; margin-top:8px}
.inv-sign-col{min-width:240px}
.inv-sign-box{min-height:70px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end}
.inv-sign-img{max-height:66px; object-fit:contain; margin-bottom:2px}
.inv-sign-line{height:52px}
.inv-sign-name{font-weight:700; font-size:13px; color:#1F2C3D; border-top:1px solid #1F2C3D; padding-top:4px; min-width:190px}
.inv-sign-pos{font-size:11px; color:var(--muted)}
.inv-sign-picker{margin-top:12px}
.inv-sign-picker select{width:240px; padding:9px 11px; border:1px solid #D6DEE8; border-radius:8px; font-size:.9rem; background:#fff}
.inv-foot{text-align:center; font-size:11px; color:var(--muted); margin-top:28px}
@media print{
  body > *:not(.print-overlay){display:none !important;}
  .print-overlay{position:static !important; background:#fff !important; padding:0 !important; overflow:visible !important}
  .no-print{display:none !important;}
  .invoice-sheet{box-shadow:none !important; margin:0 auto !important; max-width:100% !important; border-radius:0}
}

/* ===== Form sections (Uang Muka) ===== */
.fsect{background:#FAFBFD; border:1px solid #EAEEF3; border-radius:12px; padding:20px 22px; margin-bottom:16px}
.fsect-title{font-weight:800; font-size:.95rem; color:#1F2C3D; margin:0 0 16px}
.fsect-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.f-item .req{color:#C0392B}
.adv-items th{background:#EEF1F6; color:#5B6B80; font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.adv-items td{vertical-align:middle; background:#fff}
.adv-items input{padding:8px 10px; border:1px solid #D6DEE8; border-radius:8px; font-size:.9rem; background:#fff}
.adv-items input:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(18,87,166,.12)}

/* ===== Bidang & Departemen (hierarki) ===== */
.dept-block{border:1px solid #E5EAF1; border-radius:12px; margin-top:14px; overflow:hidden}
.dept-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:linear-gradient(90deg,#F1F5FB,#F7F9FC)}
.dept-head-main{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dept-kode{font-weight:800; color:var(--blue-600); background:#E5EEFA; border-radius:7px; padding:3px 10px; font-size:13px; letter-spacing:.03em}
.dept-name{font-weight:800; color:#1F2C3D; font-size:1.02rem}
.dept-head-act{display:flex; align-items:center; gap:8px}
.dept-ket{padding:8px 16px 0; font-size:12.5px; color:#5B6B80}
.dept-block .table-wrap{padding:12px 16px 16px}
.dept-block table.data th{background:#EEF1F6}

/* ===== Detail Pertanggungjawaban Uang Muka (redesign) ===== */
.stl-hero{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; background:linear-gradient(100deg,#0A3568,#1257A6); color:#fff; border-radius:12px; padding:18px 22px; margin-bottom:16px}
.stl-hero-form{font-size:1.25rem; font-weight:800; letter-spacing:.02em}
.stl-hero-prog{font-size:.95rem; opacity:.96; margin-top:3px}
.stl-hero-meta{font-size:.78rem; opacity:.82; margin-top:7px}
.stl-hero-adv{font-size:.72rem; opacity:.85; margin-top:8px}
.stl-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px}
.stl-card{background:#F7F9FC; border:1px solid #E7EDF5; border-radius:11px; padding:14px 16px}
.stl-card span{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px}
.stl-card b{font-size:1.18rem; color:#0A2A55}

/* ===== Pemeriksaan Sistem ===== */
.dg-item{border:1px solid #E7EDF5;border-left-width:4px;border-radius:9px;padding:11px 14px;margin-bottom:9px;background:#fff}
.dg-item.ok{border-left-color:#22C55E}
.dg-item.bad{border-left-color:#EF4444;background:#FFF9F9}
.dg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dg-list{margin:9px 0 0 6px;padding-left:16px;font-size:12.5px;color:#3B4A5E;line-height:1.65}
.dg-list li{margin-bottom:3px}