/* VSM Finance — styles (extracted from index.html) */
/* ===== Liquid Glass UI (iOS-inspired) 2026 ===== */
:root{
--primary:#0a84ff;
--primary-dark:#0071e3;
--primary-soft:rgba(10,132,255,.14);
--green:#30d158;
--green-soft:rgba(48,209,88,.14);
--red:#ff453a;
--red-soft:rgba(255,69,58,.14);
--orange:#ff9f0a;
--orange-soft:rgba(255,159,10,.14);
--purple:#bf5af2;
--purple-soft:rgba(191,90,242,.16);
--bg:#e8eef8;
--bg-mesh:radial-gradient(1200px 600px at 10% -10%,rgba(10,132,255,.22),transparent 55%),
radial-gradient(900px 500px at 90% 0%,rgba(191,90,242,.16),transparent 50%),
radial-gradient(700px 400px at 50% 100%,rgba(48,209,88,.10),transparent 45%),
linear-gradient(180deg,#eef2f9 0%,#e4ebf6 100%);
--card:rgba(255,255,255,.55);
--card-solid:rgba(255,255,255,.78);
--border:rgba(255,255,255,.55);
--border-strong:rgba(15,23,42,.10);
--text:#0f172a;
--muted:#3d4f63;
--muted-light:#64748b;
--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
--shadow-md:0 8px 32px rgba(15,23,42,.10);
--shadow-lg:0 16px 48px rgba(15,23,42,.14);
--radius:20px;
--radius-sm:14px;
--radius-xs:10px;
--ring:0 0 0 3px rgba(10,132,255,.22);
--glass-blur:22px;
--glass-sat:1.35;
--glass-bg:rgba(255,255,255,.48);
--glass-border:1px solid rgba(255,255,255,.65);
--nav-h:54px;
}
[data-theme="dark"]{
--primary:#0a84ff;
--primary-dark:#409cff;
--primary-soft:rgba(10,132,255,.22);
--green:#30d158;
--green-soft:rgba(48,209,88,.18);
--red:#ff6961;
--red-soft:rgba(255,69,58,.18);
--orange:#ffb340;
--orange-soft:rgba(255,159,10,.18);
--purple:#da8fff;
--purple-soft:rgba(191,90,242,.22);
--bg:#06080f;
--bg-mesh:radial-gradient(1000px 520px at 15% -15%,rgba(10,132,255,.28),transparent 55%),
radial-gradient(800px 480px at 90% 5%,rgba(191,90,242,.20),transparent 50%),
radial-gradient(600px 360px at 40% 110%,rgba(48,209,88,.08),transparent 45%),
linear-gradient(180deg,#0a0e18 0%,#070a12 100%);
--card:rgba(22,28,42,.55);
--card-solid:rgba(18,24,38,.82);
--border:rgba(255,255,255,.08);
--border-strong:rgba(255,255,255,.14);
--text:#f2f4f8;
--muted:#9aa8b8;
--muted-light:#6b7a8c;
--shadow:0 1px 2px rgba(0,0,0,.25),0 8px 28px rgba(0,0,0,.35);
--shadow-md:0 10px 36px rgba(0,0,0,.45);
--shadow-lg:0 18px 50px rgba(0,0,0,.55);
--ring:0 0 0 3px rgba(10,132,255,.32);
--glass-bg:rgba(22,28,42,.48);
--glass-border:1px solid rgba(255,255,255,.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
background:var(--bg);
background-image:var(--bg-mesh);
background-attachment:fixed;
margin:0;color:var(--text);font-size:14px;line-height:1.5;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
min-height:100vh;
}
/* Glass utility */
.glass{
background:var(--glass-bg);
backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
border:var(--glass-border);
box-shadow:var(--shadow);
}
.app{max-width:1180px;margin:0 auto;padding:18px 14px 48px;}
.app-header{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
margin-bottom:14px;padding:10px 14px;
background:var(--glass-bg);
backdrop-filter:blur(28px) saturate(1.4);
-webkit-backdrop-filter:blur(28px) saturate(1.4);
border:var(--glass-border);
border-radius:22px;
box-shadow:var(--shadow-md);
/* z-index HARUS > panel-backdrop (90) agar dropdown notif/settings bisa diklik */
position:sticky;top:10px;z-index:110;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
width:40px;height:40px;border-radius:13px;
background:linear-gradient(145deg,#0a84ff 0%,#5e5ce6 100%);
display:flex;align-items:center;justify-content:center;color:#fff;
font-weight:700;font-size:1rem;
box-shadow:0 4px 14px rgba(10,132,255,.35);
letter-spacing:-.02em;
}
.brand-text h1{font-size:1.08rem;margin:0;font-weight:700;letter-spacing:-.03em;}
.brand-text p{margin:0;font-size:.68rem;color:var(--muted);font-weight:500;}
.header-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.control-group{
display:flex;gap:6px;align-items:center;
background:rgba(255,255,255,.35);
padding:5px 10px;border-radius:999px;
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(12px);
}
[data-theme="dark"] .control-group{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.08);
}
.control-group label{font-size:.66rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.control-group select{
padding:5px 8px;border-radius:8px;border:1px solid transparent;
background:transparent;font-size:.8rem;font-weight:500;color:var(--text);
font-family:inherit;cursor:pointer;
}
.user-pill{
display:flex;align-items:center;gap:8px;
background:rgba(255,255,255,.35);
padding:5px 10px 5px 5px;border-radius:999px;
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(12px);
}
[data-theme="dark"] .user-pill{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.08);
}
.user-avatar{
width:30px;height:30px;border-radius:50%;
background:linear-gradient(145deg,var(--primary-soft),rgba(94,92,230,.2));
color:var(--primary);display:flex;align-items:center;justify-content:center;
font-size:.72rem;font-weight:700;
}
.user-meta{display:flex;flex-direction:column;line-height:1.2;}
.user-meta .name{font-size:.8rem;font-weight:600;}
.user-meta .role{font-size:.65rem;color:var(--muted);text-transform:capitalize;}
.theme-btn,.notif-btn{
width:36px;height:36px;border-radius:50%;
border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.35);
backdrop-filter:blur(12px);
cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--muted);padding:0;flex-shrink:0;
transition:transform .15s,background .15s,color .15s;
}
[data-theme="dark"] .theme-btn,[data-theme="dark"] .notif-btn{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.08);
}
.theme-btn:hover,.notif-btn:hover{color:var(--text);transform:scale(1.05);}
.theme-btn svg,.notif-btn svg{width:16px;height:16px;}
nav.main-nav{
display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;
background:var(--glass-bg);
backdrop-filter:blur(24px) saturate(1.3);
-webkit-backdrop-filter:blur(24px) saturate(1.3);
padding:5px;border-radius:18px;
border:var(--glass-border);
box-shadow:var(--shadow);
position:relative;
z-index:300; /* di atas insight-bar & konten agar dropdown tidak tertutup */
overflow:visible;
}
nav.main-nav button{
flex:1;min-width:0;padding:10px 10px;border:none;background:transparent;
border-radius:13px;cursor:pointer;font-weight:600;color:var(--muted);
font-size:.78rem;font-family:inherit;transition:all .18s;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
white-space:nowrap;
}
nav.main-nav button svg{width:15px;height:15px;flex-shrink:0;opacity:.75;}
nav.main-nav button:hover{background:rgba(255,255,255,.35);color:var(--text);}
[data-theme="dark"] nav.main-nav button:hover{background:rgba(255,255,255,.08);}
nav.main-nav button.active{
background:linear-gradient(145deg,#0a84ff,#5e5ce6);
color:#fff;box-shadow:0 4px 16px rgba(10,132,255,.35);
}
nav.main-nav button.active svg{opacity:1;}
nav.main-nav .nav-group{flex:1;min-width:0;}
nav.main-nav .nav-group > .tab-btn{width:100%;}
.tab{display:none !important;}
.tab.active{display:block !important;animation:tabIn .28s cubic-bezier(.22,1,.36,1);}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px;}
.card{
background:var(--glass-bg);
backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
border:var(--glass-border);
border-radius:var(--radius);
padding:16px 18px;
box-shadow:var(--shadow);
transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card .label{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-weight:700;}
.card .value{font-size:1.2rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.25;}
.card.pemasukan .value{color:var(--primary);}
.card.pengeluaran .value{color:var(--red);}
.card.investasi .value{color:var(--orange);}
.card.net .value{color:var(--primary);}
.card .sub{font-size:.72rem;color:var(--muted);margin-top:4px;}
.card.hero{
grid-column:span 2;padding:24px 26px;
background:linear-gradient(135deg,rgba(10,132,255,.18),rgba(255,255,255,.5));
border-color:rgba(10,132,255,.22);
box-shadow:0 8px 32px rgba(10,132,255,.12);
order:-1;
}
.card.hero .label{color:var(--primary-dark);font-size:.72rem;}
.card.hero .value{font-size:2rem;letter-spacing:-.03em;}
.card.hero .sub{font-size:.78rem;margin-top:6px;}
@media (max-width:560px){.card.hero{grid-column:span 1;}.card.hero .value{font-size:1.45rem;}}
[data-theme="dark"] .card.hero{
background:linear-gradient(135deg,rgba(10,132,255,.22),rgba(22,28,42,.55));
}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;margin-top:6px;padding:2px 8px;border-radius:999px;}
.trend.up{background:var(--green-soft);color:var(--green);}
.trend.down{background:var(--red-soft);color:var(--red);}
.trend.flat{background:rgba(148,163,184,.15);color:var(--muted);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:720px){
#confirmMsg{white-space:pre-wrap;word-break:break-word;}
.toast{left:16px;right:16px;bottom:90px;text-align:center;}
.grid-2{grid-template-columns:1fr;}
}
.panel{
background:var(--glass-bg);
backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
border:var(--glass-border);
border-radius:var(--radius);
padding:20px 22px;margin-bottom:18px;
box-shadow:var(--shadow);
}
.panel h3{margin:0 0 14px;font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;}
#formLiabTitle,#formPortoTitle,#formLikuidTitle,h3#formUserTitle{scroll-margin-top:80px;}
#panelUserForm .panel-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
#panelUserForm .panel-head h3{margin:0;}
#btnToggleUserForm{
flex:0 0 auto;font-size:.78rem;padding:8px 12px;
}
#userFormBody.collapsed{display:none;}
.panel h3::before{content:'';width:3px;height:14px;background:var(--primary);border-radius:2px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.panel-head h3{margin:0;display:flex;align-items:center;gap:8px;}
.panel-head h3::before{content:'';width:3px;height:14px;background:var(--primary);border-radius:2px;}
/* Month-over-Month comparison cards */
.mom-panel-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.mom-panel-head h3{margin:0;}
.mom-panel-head .mom-sub{font-size:.78rem;color:var(--muted);margin:4px 0 0;line-height:1.4;}
.mom-select-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mom-select-wrap label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.mom-select-wrap select{
min-width:140px;padding:7px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.25);
background:var(--card);color:var(--text);font:inherit;font-size:.82rem;font-weight:600;
}
.mom-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
@media (min-width:720px){
.mom-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.mom-card{
border-radius:14px;padding:12px 14px;
background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.14);
min-width:0;
}
[data-theme="dark"] .mom-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
.mom-card .mom-k{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}
.mom-card .mom-v{font-size:1.05rem;font-weight:750;color:var(--text);line-height:1.2;word-break:break-word;}
.mom-card .mom-delta{
display:inline-flex;align-items:center;gap:4px;margin-top:8px;
font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;
}
.mom-card .mom-delta.up{background:var(--green-soft);color:var(--green);}
.mom-card .mom-delta.down{background:var(--red-soft);color:var(--red);}
.mom-card .mom-delta.flat{background:rgba(148,163,184,.15);color:var(--muted);}
.mom-card .mom-prev{margin-top:6px;font-size:.7rem;color:var(--muted);line-height:1.35;}
.mom-bars{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.mom-bar-row{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;}
.mom-bar-row .mom-bar-label{font-size:.72rem;font-weight:650;color:var(--muted);}
.mom-bar-track{
position:relative;height:10px;border-radius:999px;background:rgba(148,163,184,.14);overflow:hidden;
}
.mom-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;min-width:2px;transition:width .35s ease;}
.mom-bar-fill.in{background:var(--green);}
.mom-bar-fill.out{background:var(--red);}
.mom-bar-fill.inv{background:var(--orange);}
.mom-bar-fill.net-pos{background:var(--primary);}
.mom-bar-fill.net-neg{background:var(--red);}
.mom-insight{
margin-top:14px;padding:12px 14px;border-radius:12px;
background:linear-gradient(135deg, rgba(10,132,255,.08), rgba(48,209,88,.06));
border:1px solid rgba(10,132,255,.12);
font-size:.8rem;line-height:1.5;color:var(--text);
}
[data-theme="dark"] .mom-insight{background:linear-gradient(135deg, rgba(100,181,255,.1), rgba(48,209,88,.06));border-color:rgba(100,181,255,.16);}
.mom-insight strong{font-weight:700;}
.mom-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:.85rem;}
#tab-dashboard > .panel{margin-bottom:28px;}
#tab-dashboard > .panel:first-of-type{margin-top:6px;}
table{width:100%;border-collapse:collapse;font-size:.82rem;}
th,td{padding:11px 10px;border-bottom:1px solid rgba(148,163,184,.12);text-align:left;}
th{
color:#475569;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;
/* solid agar sticky header tidak tembus konten */
background:#f1f5f9;
}
[data-theme="dark"] th{color:#94a3b8;background:#161c2a;}
td{color:var(--text);}
tbody tr:hover td{background:rgba(15,23,42,.04);}
[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,.05);}
tbody tr:last-child td{border-bottom:none;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
/* Kolom Aksi: header tengah; tombol SEJAJAR kiri-kanan (bukan tumpuk atas-bawah) */
th.col-aksi{
text-align:center !important;
white-space:nowrap;
width:1%;
min-width:168px;
}
td.actions{
text-align:right !important;
white-space:nowrap !important;
width:1%;
min-width:168px;
/* override .actions { flex-wrap:wrap } agar tidak turun baris */
display:inline-flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center;
justify-content:flex-end;
gap:6px;
}
td.actions .btn{
margin:0 !important;
vertical-align:middle;
flex:0 0 auto;
white-space:nowrap;
}
/* Samakan Portofolio, Liabilitas, Likuid, Transaksi, Tong Sampah */
#tblPortofolio th.col-aksi, #tblLiabilitas th.col-aksi, #tblLikuid th.col-aksi,
#tblTransaksi th.col-aksi, #tblTrash th.col-aksi{
text-align:center !important;
}
#tblPortofolio td.actions, #tblLiabilitas td.actions, #tblLikuid td.actions,
#tblTransaksi td.actions, #tblTrash td.actions{
text-align:right !important;
display:inline-flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
justify-content:flex-end;
gap:6px;
}
/* Tong sampah: tombol lebih ringkas agar tidak menutupi kolom Jumlah */
#tblTrash th.col-aksi, #tblTrash td.actions{
min-width:148px;
width:1%;
vertical-align:middle;
}
#tblTrash td.actions .btn{
padding:4px 8px !important;
font-size:.72rem !important;
line-height:1.2;
}
#tblTrash td.num{
padding-right:12px;
white-space:nowrap;
}
td.num{font-size:.88rem;color:var(--text);}
tr.row-warn{background:color-mix(in srgb,var(--orange) 8%,transparent);}
.card .icon{
width:30px;height:30px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
margin-bottom:10px;
}
.card .icon svg{width:16px;height:16px;}
.card.hero .icon{width:34px;height:34px;border-radius:10px;margin-bottom:12px;}
.card.hero .icon svg{width:18px;height:18px;}
.card.net .icon{background:var(--primary-soft);color:var(--primary);}
.card.pengeluaran .icon{background:var(--red-soft);color:var(--red);}
.card.pemasukan .icon{background:var(--green-soft);color:var(--green);}
.card.investasi .icon{background:var(--orange-soft);color:var(--orange);}
.card .icon.muted{background:rgba(148,163,184,.15);color:var(--muted);}
tr.row-danger{border-left:3px solid var(--red);}
tr.row-warn{border-left:3px solid var(--orange);}
tr.row-success{border-left:3px solid var(--green);}
.empty .empty-icon{
width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
background:rgba(148,163,184,.12);color:var(--muted);
display:flex;align-items:center;justify-content:center;
}
.empty .empty-icon svg{width:24px;height:24px;}
tr.row-danger{background:color-mix(in srgb,var(--red) 8%,transparent);}
tr.row-success{background:color-mix(in srgb,var(--green) 7%,transparent);}
tr.row-leaving{opacity:0;transform:translateX(12px);transition:opacity .28s ease,transform .28s ease;}
/* Rekonsiliasi saldo likuid vs cashflow (dashboard) */
.likuid-recon{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
margin-bottom:14px;padding:14px 16px;border-radius:var(--radius-sm);
background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.12);
}
[data-theme="dark"] .likuid-recon{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
.likuid-recon .lr-item{display:flex;flex-direction:column;gap:3px;}
.likuid-recon .lr-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.likuid-recon .lr-value{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.likuid-recon .lr-hint{font-size:.7rem;color:var(--muted);line-height:1.35;}
.likuid-recon .lr-status{
display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
font-size:.72rem;font-weight:700;width:fit-content;margin-top:2px;
}
.likuid-recon .lr-status.ok{background:var(--green-soft);color:var(--green);}
.likuid-recon .lr-status.warn{background:var(--orange-soft);color:var(--orange);}
.likuid-recon .lr-status.bad{background:var(--red-soft);color:var(--red);}
.likuid-recon .lr-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
/* Legacy bar (fallback) */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.bar-track{flex:1;min-width:120px;background:rgba(148,163,184,.15);border-radius:8px;height:8px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#5e5ce6);border-radius:8px;transition:width .35s ease;}
.bar-fill.over{background:linear-gradient(90deg,var(--red),#ff6961);}
.bar-label{width:150px;min-width:110px;font-size:.78rem;color:var(--muted);font-weight:500;}
.bar-val{min-width:190px;text-align:right;font-size:.78rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.bar-pct{
display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.02em;
background:var(--primary-soft);color:var(--primary-dark);
vertical-align:middle;
}
.bar-pct.over{background:var(--red-soft);color:var(--red);}
.bar-pct.hampir{background:var(--orange-soft);color:var(--orange);}
/* Anggaran vs Realisasi — compact 2-line cards */
.budget-summary{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
padding:10px 12px;margin-bottom:12px;border-radius:12px;
background:var(--orange-soft,rgba(255,159,10,.14));
border:1px solid rgba(255,159,10,.25);
font-size:.8rem;font-weight:600;color:var(--text);
}
.budget-summary.ok{
background:var(--green-soft);border-color:rgba(48,209,88,.25);
}
.budget-summary button{
border:none;background:rgba(15,23,42,.08);color:var(--primary);
font-size:.75rem;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;
}
[data-theme="dark"] .budget-summary button{background:rgba(255,255,255,.1);}
/* ===== Budget progress rows (desktop + mobile) ===== */
.budget-item{
display:flex;
flex-direction:column;
gap:8px;
padding:12px 4px 14px;
margin:0;
border-bottom:1px solid rgba(148,163,184,.12);
}
.budget-item:last-child{border-bottom:none;}
.budget-item.problem{
background:rgba(255,69,58,.05);
margin:0 -6px 6px;
padding:12px 10px 14px;
border-radius:12px;
border-bottom:none;
}
[data-theme="dark"] .budget-item.problem{background:rgba(255,69,58,.08);}
.budget-item-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:22px;
}
.budget-item-name{
font-size:.86rem;
font-weight:650;
color:var(--text);
line-height:1.3;
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.budget-item-name .inv-tag{
display:inline-block;
margin-left:6px;
padding:1px 7px;
border-radius:999px;
font-size:.62rem;
font-weight:700;
color:var(--orange);
background:var(--orange-soft);
vertical-align:middle;
}
.budget-item-status{
font-size:.72rem;
font-weight:700;
white-space:nowrap;
flex-shrink:0;
display:inline-flex;
align-items:center;
gap:6px;
padding:3px 10px;
border-radius:999px;
line-height:1.2;
max-width:48%;
overflow:hidden;
text-overflow:ellipsis;
}
.budget-dot{
width:7px;height:7px;border-radius:50%;flex-shrink:0;
background:currentColor;
}
.budget-item-status.aman{
color:var(--green);
background:var(--green-soft);
}
.budget-item-status.hampir{
color:var(--orange);
background:var(--orange-soft);
}
.budget-item-status.over{
color:var(--red);
background:var(--red-soft);
}
.budget-item-status.belum{
color:var(--muted);
background:rgba(148,163,184,.15);
}
.budget-item.belum-set{opacity:0.95;}
/* Bar selalu full-width, tinggi seragam */
.budget-bar-track{
width:100%;
height:10px;
border-radius:999px;
overflow:hidden;
background:rgba(148,163,184,.18);
flex-shrink:0;
}
.budget-bar-fill{
height:100%;
border-radius:999px;
transition:width .35s ease;
min-width:0;
}
.budget-bar-fill.status-aman{background:linear-gradient(90deg,#34d399,#16a34a);}
.budget-bar-fill.status-hampir{background:linear-gradient(90deg,#fbbf24,#d97706);}
.budget-bar-fill.status-over{background:linear-gradient(90deg,#f87171,#dc2626);}
.budget-bar-fill.status-belum{
background:repeating-linear-gradient(90deg,
rgba(148,163,184,.5) 0 5px,
rgba(148,163,184,.18) 5px 10px);
}
/* Meta: realisasi / anggaran di kiri, % di kanan — tabular & rapi */
.budget-item-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:.72rem;
font-weight:600;
color:var(--muted);
font-variant-numeric:tabular-nums;
line-height:1.3;
min-height:18px;
}
.budget-item-meta .bm-vals{
display:inline-flex;
align-items:baseline;
gap:5px;
min-width:0;
overflow:hidden;
}
.budget-item-meta .bm-real{
color:var(--text);
font-weight:700;
}
.budget-item-meta .bm-sep{
color:rgba(148,163,184,.7);
font-weight:500;
}
.budget-item-meta .bm-bud{
color:var(--muted);
font-weight:600;
}
.budget-item-meta .pct{
flex-shrink:0;
font-weight:800;
font-size:.74rem;
min-width:3.2em;
text-align:right;
}
.budget-item-meta .pct.aman{color:var(--green);}
.budget-item-meta .pct.hampir{color:var(--orange);}
.budget-item-meta .pct.over{color:var(--red);}
.budget-item-meta .pct.belum{color:var(--muted);}
/* Mobile: sedikit lebih padat, bar tetap sama tinggi */
@media (max-width:720px){
.budget-item{
gap:7px;
padding:11px 2px 13px;
}
.budget-item.problem{
margin:0 -4px 6px;
padding:11px 8px 13px;
}
.budget-item-name{font-size:.82rem;}
.budget-item-status{
font-size:.68rem;
padding:3px 8px;
max-width:52%;
}
.budget-bar-track{height:9px;}
.budget-item-meta{font-size:.68rem;}
.budget-item-meta .pct{font-size:.7rem;min-width:2.8em;}
}
.budget-zero-group{margin-top:14px;}
.budget-zero-toggle{
width:100%;text-align:left;border:none;background:transparent;
padding:8px 2px;font-size:.78rem;font-weight:600;color:var(--muted);
cursor:pointer;display:flex;align-items:center;justify-content:space-between;
}
.budget-zero-toggle:hover{color:var(--text);}
.budget-zero-list{display:none;padding-top:4px;}
.budget-zero-list.open{display:block;}
.budget-zero-list .budget-item{opacity:.75;}
.budget-item-name .inv-tag{color:var(--orange);font-size:.68rem;font-weight:600;margin-left:4px;}
form.inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px;margin-bottom:14px;}
form.inline label{font-size:.7rem;color:var(--muted);display:block;margin-bottom:4px;font-weight:600;}
input,select,textarea{
width:100%;padding:10px 12px;border-radius:var(--radius-xs);
border:1px solid rgba(148,163,184,.22);
font-size:.85rem;font-family:inherit;
background:rgba(255,255,255,.55);
color:var(--text);
transition:border-color .15s,box-shadow .15s,background .15s;
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
background:rgba(0,0,0,.25);
border-color:rgba(255,255,255,.08);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring);background:rgba(255,255,255,.75);}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{background:rgba(0,0,0,.35);}
input.money-input,input.anggaran-input{text-align:right;font-variant-numeric:tabular-nums;}
input:disabled{opacity:.55;cursor:not-allowed;}
#formTransaksi #txJumlah,#formPortofolio #pfModal,#formPortofolio #pfNilaiSaatIni,
#formLiabilitas #lbPokok,#formLiabilitas #lbSisa,#formLikuid #likSaldo{font-size:1.1rem;font-weight:600;}
#formTransaksi > div:has(#txCatatan),#formPortofolio > div:has(#pfCatatan),
#formLiabilitas > div:has(#lbCatatan),#formLikuid > div:has(#likCatatan){grid-column:1 / -1;}
.btn{
background:linear-gradient(145deg,#0a84ff,#0071e3);
color:#fff;border:none;padding:10px 16px;border-radius:var(--radius-xs);
cursor:pointer;font-weight:600;font-size:.82rem;font-family:inherit;
display:inline-flex;align-items:center;gap:6px;
transition:transform .12s,box-shadow .15s,opacity .15s;
box-shadow:0 2px 10px rgba(10,132,255,.28);
}
.btn:hover{box-shadow:0 4px 16px rgba(10,132,255,.38);}
.btn:active{transform:scale(.97);}
.btn.secondary{
background:rgba(255,255,255,.45);
color:var(--text);
border:1px solid rgba(255,255,255,.55);
box-shadow:none;
backdrop-filter:blur(10px);
}
[data-theme="dark"] .btn.secondary{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.10);
}
.btn.secondary:hover{background:rgba(255,255,255,.6);}
[data-theme="dark"] .btn.secondary:hover{background:rgba(255,255,255,.12);}
.btn.danger{background:linear-gradient(145deg,#ff453a,#d70015);box-shadow:0 2px 10px rgba(255,69,58,.3);}
.btn.danger:hover{box-shadow:0 4px 16px rgba(255,69,58,.4);}
.btn.small{padding:5px 10px;font-size:.72rem;border-radius:8px;}
.btn svg{width:14px;height:14px;flex-shrink:0;}
.btn.small svg{width:12px;height:12px;}
.btn.is-loading{opacity:.75;pointer-events:none;position:relative;}
.btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
.btn.secondary .spinner{border-color:rgba(100,116,139,.3);border-top-color:var(--muted);}
@keyframes spin{to{transform:rotate(360deg);}}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.status-badge,.role-badge{padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:700;display:inline-block;letter-spacing:.01em;}
.status-badge.aman{background:var(--green-soft);color:var(--green);}
.status-badge.hampir{background:var(--orange-soft);color:var(--orange);}
.status-badge.over{background:var(--red-soft);color:var(--red);}
.status-badge.na{background:rgba(148,163,184,.15);color:var(--muted);}
.status-badge.pending{background:var(--orange-soft);color:#c77700;}
.status-badge.approved{background:var(--green-soft);color:var(--green);}
.status-badge.rejected{background:var(--red-soft);color:var(--red);}
.role-badge.master{background:var(--purple-soft);color:var(--purple);}
.role-badge.pasangan{background:var(--primary-soft);color:var(--primary);}
.role-badge.anggota{background:rgba(148,163,184,.15);color:var(--muted);}
.role-badge.main-admin{background:linear-gradient(135deg,#bf5af2,#5e5ce6);color:#fff;border:none;}
[data-theme="dark"] .role-badge.main-admin{background:linear-gradient(135deg,#da8fff,#7d7aff);color:#0f172a;}
.status-online{background:var(--green-soft);color:var(--green);}
.status-recent{background:var(--orange-soft);color:var(--orange);}
.status-offline{background:rgba(148,163,184,.15);color:var(--muted);}
.diff-line{font-size:.75rem;line-height:1.5;}
.diff-old{color:var(--red);text-decoration:line-through;opacity:.85;}
.diff-new{color:var(--green);font-weight:600;}
.diff-label{color:var(--muted);font-weight:600;}
.toast{
position:fixed;bottom:24px;right:24px;
background:rgba(15,23,42,.88);color:#fff;
backdrop-filter:blur(16px);
padding:12px 18px;border-radius:14px;font-size:.82rem;font-weight:500;
opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none;
/* Harus di atas forcePwModal (9100) agar error ganti password terlihat */
z-index:9500;
box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08);
max-width:min(420px, calc(100vw - 32px));
}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto;}
[data-theme="dark"] .toast{background:rgba(242,244,248,.92);color:#0f172a;}
/* Global loading overlay (hapus / proses penting) */
#globalLoading{
display:none;position:fixed;inset:0;z-index:500;
align-items:center;justify-content:center;flex-direction:column;gap:14px;
background:rgba(15,23,42,.42);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
pointer-events:auto;
}
#globalLoading.show{display:flex;}
[data-theme="dark"] #globalLoading{background:rgba(0,0,0,.55);}
#globalLoading .gl-card{
background:var(--glass-bg);
backdrop-filter:blur(28px) saturate(1.4);
-webkit-backdrop-filter:blur(28px) saturate(1.4);
border:var(--glass-border);
border-radius:20px;padding:28px 32px;min-width:220px;max-width:90vw;
box-shadow:var(--shadow-lg);
display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
#globalLoading .gl-spin{
width:36px;height:36px;border-radius:50%;
border:3px solid rgba(10,132,255,.2);
border-top-color:var(--primary);
animation:spin .7s linear infinite;
}
[data-theme="dark"] #globalLoading .gl-spin{
border-color:rgba(255,255,255,.15);
border-top-color:#0a84ff;
}
#globalLoading .gl-text{
font-size:.9rem;font-weight:600;color:var(--text);letter-spacing:-.01em;
}
#globalLoading .gl-sub{
font-size:.75rem;color:var(--muted);font-weight:500;margin-top:-6px;
}
.chart-wrap{position:relative;height:280px;}
.chart-wrap .chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;border:none;background:transparent;}
.empty{color:var(--muted);font-size:.85rem;padding:32px 20px;text-align:center;background:rgba(255,255,255,.25);border-radius:var(--radius-sm);border:1px dashed rgba(148,163,184,.3);}
[data-theme="dark"] .empty{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);}
.empty strong{display:block;color:var(--text);margin-bottom:6px;font-size:.95rem;}
.empty .empty-cta{margin-top:14px;}
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);position:relative;max-height:min(60vh,520px);overflow:auto;border:1px solid rgba(148,163,184,.12);}
table thead th{
position:sticky;top:0;z-index:3;
box-shadow:0 1px 0 rgba(148,163,184,.15);
background:#f1f5f9;
backdrop-filter:none;
}
[data-theme="dark"] table thead th{
background:#1a2233;
box-shadow:0 1px 0 rgba(255,255,255,.06);
}
tbody tr:nth-child(even) td{background:rgba(148,163,184,.06);}
[data-theme="dark"] tbody tr:nth-child(even) td{background:rgba(148,163,184,.04);}
tbody tr:hover td{background:rgba(15,23,42,.05) !important;}
[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,.06) !important;}
.readonly-note{background:var(--orange-soft);color:#92400e;padding:10px 14px;border-radius:var(--radius-sm);font-size:.8rem;margin-bottom:14px;border:1px solid rgba(255,159,10,.25);font-weight:500;}
[data-theme="dark"] .readonly-note{color:#ffb340;border-color:rgba(255,159,10,.3);}
.hidden{display:none !important;}
.insight-bar{
background:linear-gradient(135deg,rgba(10,132,255,.12),rgba(48,209,88,.10));
border:1px solid rgba(10,132,255,.18);
border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:.82rem;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
backdrop-filter:blur(16px);
box-shadow:var(--shadow);
}
[data-theme="dark"] .insight-bar{background:linear-gradient(135deg,rgba(10,132,255,.15),rgba(48,209,88,.08));border-color:rgba(10,132,255,.2);}
.insight-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;box-shadow:0 0 0 3px rgba(10,132,255,.2);}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:flex-end;}
.filter-row .fg{flex:1;min-width:140px;}
.filter-row label{font-size:.68rem;color:var(--muted);font-weight:600;display:block;margin-bottom:4px;}
.filter-row input,.filter-row select{width:100%;padding:8px 10px;border-radius:var(--radius-xs);border:1px solid rgba(148,163,184,.22);font-size:.82rem;font-family:inherit;background:rgba(255,255,255,.55);color:var(--text);}
[data-theme="dark"] .filter-row input,[data-theme="dark"] .filter-row select{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.08);}
.skeleton-wrap{padding:8px 0 24px;}
.sk{background:linear-gradient(90deg,rgba(148,163,184,.15) 25%,rgba(148,163,184,.28) 50%,rgba(148,163,184,.15) 75%);background-size:200% 100%;animation:skShine 1.2s ease-in-out infinite;border-radius:12px;}
[data-theme="dark"] .sk{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;}
@keyframes skShine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.sk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;}
.sk-card{height:88px;border-radius:var(--radius);}
.sk-panel{height:220px;border-radius:var(--radius);margin-bottom:14px;}
.sk-row{height:14px;margin-bottom:10px;width:100%;}
.sk-row.w60{width:60%;}.sk-row.w40{width:40%;}.sk-row.w80{width:80%;}
.sk-table-row{height:36px;margin:6px 0;border-radius:8px;}
/* Login + session boot */
html.session-restoring #loginScreen{display:none !important;}
html.session-restoring #mainContent{display:none !important;}
#sessionBoot{
display:none;position:fixed;inset:0;z-index:9999;
align-items:center;justify-content:center;flex-direction:column;gap:14px;
font-family:inherit;
/* Light: background lembut + teks gelap */
background:
radial-gradient(ellipse 80% 50% at 50% -20%,rgba(10,132,255,.22),transparent 55%),
radial-gradient(ellipse 60% 40% at 100% 100%,rgba(94,92,230,.12),transparent 50%),
linear-gradient(160deg,#dfe8f6 0%,#e8eef8 45%,#d5e0f0 100%);
color:#0f172a;
}
[data-theme="dark"] #sessionBoot{
background:
radial-gradient(ellipse 70% 50% at 50% -10%,rgba(10,132,255,.32),transparent 55%),
radial-gradient(ellipse 50% 40% at 90% 90%,rgba(191,90,242,.18),transparent 50%),
linear-gradient(160deg,#0a0e18 0%,#121a2e 50%,#0d1528 100%);
color:#e5e7eb;
}
html.session-restoring #sessionBoot{display:flex;}
#sessionBoot .boot-logo{
width:56px;height:56px;border-radius:16px;
background:linear-gradient(145deg,#0a84ff,#5e5ce6);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:1.25rem;
box-shadow:0 8px 28px rgba(10,132,255,.4);
}
#sessionBoot .boot-spin{
width:28px;height:28px;border:3px solid rgba(15,23,42,.15);
border-top-color:#0a84ff;border-radius:50%;animation:spin .7s linear infinite;
}
[data-theme="dark"] #sessionBoot .boot-spin{
border-color:rgba(255,255,255,.2);
border-top-color:#fff;
}
#sessionBoot .boot-text{
font-size:.9rem;font-weight:600;letter-spacing:.01em;
color:#0f172a;opacity:1;
}
[data-theme="dark"] #sessionBoot .boot-text{
color:#e5e7eb;opacity:.9;
}
/* Login — kontras jelas di light & dark mode */
#loginScreen{
min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:20px;position:relative;overflow:hidden;
/* Light default: soft cool mesh (tidak menimpa teks) */
background:
radial-gradient(ellipse 80% 50% at 50% -20%,rgba(10,132,255,.22),transparent 55%),
radial-gradient(ellipse 60% 40% at 100% 100%,rgba(94,92,230,.12),transparent 50%),
linear-gradient(160deg,#dfe8f6 0%,#e8eef8 45%,#d5e0f0 100%);
}
#loginScreen::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(10,132,255,.18),transparent);
pointer-events:none !important;
}
[data-theme="dark"] #loginScreen{
background:
radial-gradient(ellipse 70% 50% at 50% -10%,rgba(10,132,255,.32),transparent 55%),
radial-gradient(ellipse 50% 40% at 90% 90%,rgba(191,90,242,.18),transparent 50%),
linear-gradient(160deg,#0a0e18 0%,#121a2e 50%,#0d1528 100%);
}
.login-box{
/* Light: kartu putih glass, teks gelap */
background:rgba(255,255,255,.72);
backdrop-filter:blur(40px) saturate(1.5);
-webkit-backdrop-filter:blur(40px) saturate(1.5);
border-radius:28px;padding:36px 32px;width:100%;max-width:380px;
box-shadow:0 20px 50px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.8);
position:relative;z-index:10;
border:1px solid rgba(255,255,255,.85);
color:#0f172a;
}
[data-theme="dark"] .login-box{
background:rgba(22,28,42,.55);
box-shadow:0 24px 64px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.12);
color:#f2f4f8;
}
#loginScreen .btn{position:relative;z-index:11;cursor:pointer;pointer-events:auto !important;}
#loginScreen input{
position:relative;z-index:11;pointer-events:auto !important;
background:rgba(15,23,42,.04);
border:1px solid rgba(15,23,42,.12);
color:#0f172a;
}
#loginScreen input::placeholder{color:rgba(15,23,42,.35);}
#loginScreen input:focus{
background:rgba(10,132,255,.06);
border-color:rgba(10,132,255,.55);
box-shadow:0 0 0 3px rgba(10,132,255,.18);
}
[data-theme="dark"] #loginScreen input{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
color:#f2f4f8;
}
[data-theme="dark"] #loginScreen input::placeholder{color:rgba(255,255,255,.35);}
[data-theme="dark"] #loginScreen input:focus{
background:rgba(255,255,255,.12);
border-color:rgba(10,132,255,.55);
}
#loginScreen label{color:#5b6b7c;}
[data-theme="dark"] #loginScreen label{color:rgba(255,255,255,.6);}
.login-logo{
width:56px;height:56px;border-radius:16px;margin:0 auto 16px;
background:linear-gradient(145deg,#0a84ff,#5e5ce6);
display:flex;align-items:center;justify-content:center;color:#fff;
font-weight:700;font-size:1.25rem;box-shadow:0 8px 24px rgba(10,132,255,.4);
}
.login-box h2{
margin:0 0 4px;font-size:1.35rem;text-align:center;font-weight:700;
letter-spacing:-.02em;color:#0f172a;
}
[data-theme="dark"] .login-box h2{color:#fff;}
.login-box p.sub{
text-align:center;color:#5b6b7c;font-size:.82rem;margin:0 0 24px;
}
[data-theme="dark"] .login-box p.sub{color:rgba(255,255,255,.55);}
.login-box label{font-size:.75rem;display:block;margin:14px 0 5px;font-weight:600;}
.login-box input{padding:12px 14px;font-size:.9rem;border-radius:12px;}
.pw-field{position:relative;display:block;}
.pw-field input{padding-right:44px !important;}
.pw-toggle{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
border:none;background:transparent;cursor:pointer;padding:6px;
color:var(--muted);display:flex;align-items:center;justify-content:center;
border-radius:8px;line-height:0;
/* HARUS di atas input (login input z-index:11) agar bisa diklik */
z-index:20;pointer-events:auto !important;
width:36px;height:36px;
}
.pw-toggle:hover{color:var(--text);background:rgba(15,23,42,.06);}
[data-theme="dark"] .pw-toggle:hover{background:rgba(255,255,255,.08);}
.pw-toggle svg{width:18px;height:18px;pointer-events:none;}
#loginScreen .pw-toggle{
color:rgba(15,23,42,.55);
z-index:20;pointer-events:auto !important;
}
[data-theme="dark"] #loginScreen .pw-toggle{color:rgba(255,255,255,.65);}
.login-box .btn{
width:100%;margin-top:20px;padding:13px;font-size:.9rem;justify-content:center;
border-radius:14px;box-shadow:0 4px 18px rgba(10,132,255,.4);
}
.login-error{
background:rgba(255,69,58,.12);color:#d70015;
padding:10px 12px;border-radius:12px;font-size:.8rem;margin-top:14px;
display:none;font-weight:500;border:1px solid rgba(255,69,58,.25);
}
[data-theme="dark"] .login-error{background:rgba(255,69,58,.15);color:#ff6961;}
.login-error.show{display:block;}
.login-footer{text-align:center;margin-top:20px;font-size:.7rem;color:#8b9aab;}
[data-theme="dark"] .login-footer{color:rgba(255,255,255,.35);}
.req-link{text-align:center;margin-top:14px;font-size:.8rem;color:#5b6b7c;}
[data-theme="dark"] .req-link{color:rgba(255,255,255,.5);}
.req-link a{color:#0071e3;font-weight:600;text-decoration:none;cursor:pointer;}
[data-theme="dark"] .req-link a{color:#64b5ff;}
.req-link a:hover{text-decoration:underline;}
.modal-overlay:not(.show){display:none !important;pointer-events:none !important;opacity:0 !important;}
.modal-overlay{
position:fixed;inset:0;background:rgba(6,8,15,.55);z-index:200;
display:flex;align-items:center;justify-content:center;padding:16px;
opacity:0;pointer-events:none;transition:.22s;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
#forcePwModal.modal-overlay,#tempPwModal.modal-overlay,#requestModal.modal-overlay,#confirmModal.modal-overlay,#changeEmailModal.modal-overlay,#changePasswordModal.modal-overlay,#logoutModal.modal-overlay,#quickTxModal.modal-overlay{z-index:9100;}
/* Link request di login harus bisa diklik */
#loginScreen .req-link,#loginScreen .req-link a{
position:relative;z-index:12;pointer-events:auto !important;cursor:pointer;
-webkit-tap-highlight-color:rgba(10,132,255,.2);
}
#welcomeOverlay{
display:none;position:fixed;inset:0;z-index:8800;
align-items:center;justify-content:center;flex-direction:column;gap:14px;
background:rgba(15,23,42,.42);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
padding:24px;text-align:center;
}
#welcomeOverlay.show{display:flex;}
#welcomeOverlay .wo-card{
background:var(--glass-bg);
backdrop-filter:blur(28px) saturate(1.4);
-webkit-backdrop-filter:blur(28px) saturate(1.4);
border:var(--glass-border);
border-radius:22px;padding:28px 32px;max-width:360px;width:100%;
box-shadow:var(--shadow-lg);
}
#welcomeOverlay .wo-emoji{font-size:2rem;margin-bottom:8px;line-height:1;}
#welcomeOverlay .wo-greet{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--text);}
#welcomeOverlay .wo-sub{font-size:.85rem;color:var(--muted);margin:0 0 16px;line-height:1.45;}
#welcomeOverlay .wo-spin{
width:28px;height:28px;border-radius:50%;margin:0 auto;
border:3px solid rgba(10,132,255,.2);border-top-color:var(--primary);
animation:spin .7s linear infinite;
}
.temp-pw-box{
margin:12px 0;padding:12px 14px;border-radius:12px;
background:rgba(10,132,255,.08);border:1px dashed rgba(10,132,255,.3);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-align:center;
word-break:break-all;color:var(--text);user-select:all;
}
#tempPwModal .modal-box{text-align:center;}
#tempPwModal .modal-actions{justify-content:center;flex-wrap:wrap;}
.modal-box{
background:var(--glass-bg);
backdrop-filter:blur(32px) saturate(1.4);
-webkit-backdrop-filter:blur(32px) saturate(1.4);
border-radius:24px;width:100%;max-width:420px;padding:28px 24px;
box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;
border:var(--glass-border);
}
.modal-box h3{margin:0 0 6px;font-size:1.1rem;font-weight:700;text-align:center;letter-spacing:-.02em;}
.modal-box .modal-sub{text-align:center;color:var(--muted);font-size:.8rem;margin:0 0 18px;}
.modal-box label{font-size:.75rem;color:var(--muted);display:block;margin:12px 0 4px;font-weight:600;}
.modal-box input,.modal-box select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.22);font-size:.9rem;font-family:inherit;background:rgba(255,255,255,.5);color:var(--text);}
[data-theme="dark"] .modal-box input,[data-theme="dark"] .modal-box select,[data-theme="dark"] .modal-box textarea{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.08);}
#confirmReason{
width:100%;padding:10px 12px;border-radius:12px;
border:1px solid rgba(148,163,184,.22);
font-size:.85rem;font-family:inherit;resize:vertical;
background:rgba(255,255,255,.55);color:var(--text);
transition:border-color .15s,box-shadow .15s,background .15s;
}
#confirmReason:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring);}
[data-theme="dark"] #confirmReason{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
color:var(--text);
}
[data-theme="dark"] #confirmReason:focus{
background:rgba(255,255,255,.12);
border-color:rgba(10,132,255,.55);
}
[data-theme="dark"] #confirmReason::placeholder{color:rgba(255,255,255,.35);}
#confirmReason::placeholder{color:rgba(15,23,42,.35);}
.modal-actions{display:flex;gap:8px;margin-top:20px;}
.modal-actions .btn{flex:1;justify-content:center;}
.req-success-box{text-align:center;padding:12px 0 4px;}
.req-success-box .icon{width:56px;height:56px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.6rem;}
.req-success-box h3{color:var(--green);margin-bottom:8px;}
.req-success-box p{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0;}
#confirmModal .modal-box{
max-width:400px;text-align:center;
background:#ffffff !important;
color:#0f172a !important;
border:1px solid rgba(15,23,42,.12) !important;
box-shadow:0 20px 50px rgba(15,23,42,.22) !important;
}
[data-theme="dark"] #confirmModal .modal-box{
background:#161c2a !important;
color:#f2f4f8 !important;
border-color:rgba(255,255,255,.12) !important;
box-shadow:0 20px 50px rgba(0,0,0,.55) !important;
}
#confirmModal h3,
#confirmModal .modal-title,
#confirmTitle{
color:#0f172a !important;
font-weight:750 !important;
}
[data-theme="dark"] #confirmModal h3,
[data-theme="dark"] #confirmModal .modal-title,
[data-theme="dark"] #confirmTitle{
color:#f2f4f8 !important;
}
#confirmModal .confirm-icon{
width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
display:flex;align-items:center;justify-content:center;
background:#fff4e0;color:#c2410c;
font-size:1.55rem;font-weight:800;line-height:1;
border:2px solid rgba(194,65,12,.28);
box-shadow:0 4px 14px rgba(194,65,12,.12);
}
[data-theme="dark"] #confirmModal .confirm-icon{
background:rgba(255,159,10,.18);color:#ffb340;
border-color:rgba(255,159,10,.35);
box-shadow:0 4px 14px rgba(0,0,0,.25);
}
#confirmModal.danger .confirm-icon{
background:#fde8e8;color:#b91c1c;
border-color:rgba(185,28,28,.28);
box-shadow:0 4px 14px rgba(185,28,28,.12);
}
[data-theme="dark"] #confirmModal.danger .confirm-icon{
background:rgba(255,69,58,.18);color:#ff6961;
border-color:rgba(255,69,58,.35);
}
#confirmTypeWrap{margin:14px 0 4px;text-align:left;}
#confirmTypeWrap label{font-size:.75rem;color:var(--muted);font-weight:600;display:block;margin-bottom:6px;}
#confirmTypeInput{
width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.35);
background:var(--card);color:var(--text);font:inherit;font-size:.9rem;font-weight:650;
letter-spacing:.04em;text-transform:uppercase;
}
#confirmTypeInput:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring);}
#confirmTypeErr{color:var(--red);font-size:.72rem;margin:6px 0 0;font-weight:500;}
.toast.toast-action{
display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
max-width:min(420px, calc(100vw - 32px)); left:50%; right:auto; transform:translate(-50%, 12px);
text-align:left; padding:12px 16px;
pointer-events:auto !important;
z-index:9600;
}
.toast.toast-action.show{transform:translate(-50%, 0); pointer-events:auto !important;}
.toast.toast-action .toast-msg{flex:1;min-width:140px;pointer-events:none;}
.toast.toast-action .toast-undo-btn{
border:0;background:rgba(255,255,255,.22);color:inherit;font:inherit;font-weight:700;
font-size:.82rem;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;
pointer-events:auto !important; position:relative; z-index:1;
-webkit-tap-highlight-color:rgba(255,255,255,.25);
}
.toast.toast-action .toast-undo-btn:hover{background:rgba(255,255,255,.28);}
[data-theme="dark"] .toast.toast-action .toast-undo-btn{background:rgba(15,23,42,.12);color:#0f172a;}
#confirmModal .confirm-msg{
color:#334155 !important;
font-size:.88rem;line-height:1.55;margin:0 0 4px;
white-space:pre-line;text-align:left;
background:rgba(15,23,42,.04);
border-radius:12px;padding:12px 14px;
}
[data-theme="dark"] #confirmModal .confirm-msg{
color:#e2e8f0 !important;
background:rgba(255,255,255,.06);
}
/* ===== Connectivity status ===== */
#connStatus{
display:inline-flex;align-items:center;gap:7px;
padding:5px 11px 5px 9px;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.03em;
border:1px solid transparent;
background:rgba(48,209,88,.12);color:var(--green,#30d158);
white-space:nowrap;flex:0 0 auto;
transition:background .25s,color .25s,border-color .25s,box-shadow .25s;
}
#connStatus .conn-dot{
width:7px;height:7px;border-radius:50%;
background:currentColor;
box-shadow:0 0 0 0 rgba(48,209,88,.45);
animation:connPulse 2.2s ease-out infinite;
}
#connStatus.offline{
background:rgba(255,69,58,.12);color:#ff6b6b;
border-color:rgba(255,69,58,.22);
box-shadow:0 0 12px rgba(255,69,58,.08);
}
#connStatus.offline .conn-dot{
animation:connPulseOff 1.4s ease-in-out infinite;
box-shadow:none;
}
#connStatus.reconnecting{
background:rgba(255,159,10,.12);color:var(--orange,#ff9f0a);
border-color:rgba(255,159,10,.25);
}
#connStatus.reconnecting .conn-dot{animation:connPulse 1s ease-out infinite;}
@keyframes connPulse{
0%{box-shadow:0 0 0 0 rgba(48,209,88,.5);}
70%{box-shadow:0 0 0 6px rgba(48,209,88,0);}
100%{box-shadow:0 0 0 0 rgba(48,209,88,0);}
}
@keyframes connPulseOff{
0%,100%{opacity:1;}
50%{opacity:.35;}
}
#connLive{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (max-width:720px){
#connStatus .conn-label{display:none;}
#connStatus{padding:6px 8px;}
}
/* Logout button accent */
.btn-logout{
color:#ff6b8a !important;
border:1px solid rgba(255,107,138,.35) !important;
background:rgba(255,107,138,.06) !important;
border-radius:999px !important;
font-weight:650 !important;
}
.btn-logout:hover,.btn-logout:focus-visible{
background:rgba(255,107,138,.14) !important;
border-color:rgba(255,107,138,.55) !important;
}
[data-theme="dark"] .btn-logout{
color:#ff8fab !important;
border-color:rgba(255,143,171,.4) !important;
}
/* Dedicated logout modal */
#logoutModal.modal-overlay{z-index:9300;}
#logoutModal .logout-box{
max-width:380px;width:min(92vw,380px);
text-align:center;padding:28px 24px 22px;
border-radius:20px;
background:var(--card-solid,var(--card));
border:1px solid rgba(148,163,184,.18);
box-shadow:0 24px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
#logoutModal .logout-icon{
width:56px;height:56px;margin:0 auto 14px;
border-radius:16px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(145deg,rgba(255,107,138,.18),rgba(255,69,58,.1));
color:#ff6b8a;
border:1px solid rgba(255,107,138,.25);
}
#logoutModal .logout-icon svg{width:26px;height:26px;}
#logoutModal h3{margin:0 0 8px;font-size:1.1rem;font-weight:750;letter-spacing:-.02em;}
#logoutModal .logout-msg{margin:0 0 6px;font-size:.88rem;line-height:1.5;color:var(--muted);}
#logoutModal .logout-secure{
margin:0 0 18px;font-size:.72rem;color:var(--muted);
display:flex;align-items:center;justify-content:center;gap:6px;
}
#logoutModal .logout-secure svg{width:13px;height:13px;opacity:.8;flex-shrink:0;}
#logoutModal .modal-actions{justify-content:center;gap:10px;}
#logoutModal .btn-logout-confirm{
background:linear-gradient(135deg,#ff453a,#ff6b8a) !important;
border:none !important;color:#fff !important;
border-radius:12px !important;font-weight:700 !important;
min-width:120px;
}
#confirmModal h3{text-align:center;}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(148,163,184,.12);font-size:.8rem;color:var(--muted);}
.pager .pager-info{font-weight:500;}
.pager .pager-btns{display:flex;gap:6px;align-items:center;}
.pager .pager-btns button{min-width:32px;height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.4);color:var(--text);cursor:pointer;font-weight:600;font-size:.78rem;font-family:inherit;}
.pager .pager-btns button:hover:not(:disabled){background:rgba(255,255,255,.65);}
.pager .pager-btns button:disabled{opacity:.4;cursor:not-allowed;}
.pager .pager-btns button.active-page{background:var(--primary);color:#fff;border-color:var(--primary);}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:#ff453a;color:#fff;font-size:.65rem;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--card);}
nav.main-nav button.active .nav-badge{box-shadow:0 0 0 2px #0a84ff;}
.bottom-nav .nav-badge{position:absolute;top:2px;right:calc(50% - 18px);min-width:16px;height:16px;font-size:.58rem;margin:0;}
.bottom-nav button{position:relative;}
.nav-badge.hidden{display:none !important;}
/* Dropdown grup navigasi (desktop) — z-index tinggi agar tidak tertutup header/konten */
.nav-group{position:relative;display:inline-flex;z-index:1;}
.nav-group.open{z-index:400;}
.nav-group > .tab-btn{cursor:pointer;}
.nav-dropdown{
display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
min-width:220px;padding:8px;border-radius:14px;z-index:500;
background:var(--card);border:1px solid rgba(148,163,184,.28);
box-shadow:0 16px 48px rgba(15,23,42,.28), 0 0 0 1px rgba(148,163,184,.08);
backdrop-filter:blur(16px);
}
[data-theme="dark"] .nav-dropdown{
background:rgba(28,30,38,.98);
border-color:rgba(148,163,184,.2);
box-shadow:0 16px 48px rgba(0,0,0,.45);
}
.nav-group.open > .nav-dropdown{display:block;}
.nav-dropdown button{
display:flex;align-items:center;gap:8px;width:100%;text-align:left;
padding:11px 14px;border:0;border-radius:10px;background:transparent;
color:var(--text);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
white-space:nowrap;
}
.nav-dropdown button:hover{background:var(--primary-soft);color:var(--primary);}
.nav-dropdown button.active-sub{background:var(--primary-soft);color:var(--primary);}
/* Sub-tab bar di dalam halaman gabungan */
.subtab-bar{
display:none; /* default desktop: submenu via dropdown nav */
flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:6px;
border-radius:14px;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.14);
}
.subtab-bar button{
flex:1;min-width:120px;padding:10px 12px;border:0;border-radius:10px;
background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:650;cursor:pointer;
}
.subtab-bar button.active{
background:var(--card);color:var(--primary);box-shadow:0 2px 10px rgba(15,23,42,.08);
}
.subtab-bar .nav-badge{margin-left:6px;}
/* Laporan & Anggaran: 2 tingkat (grup + mode) biar rapi di mobile */
.subtab-bar-laporan{
flex-direction:column;align-items:stretch;gap:6px;flex-wrap:nowrap;
}
.subtab-bar-laporan .subtab-row{
display:flex;gap:6px;width:100%;flex-wrap:nowrap;
}
.subtab-bar-laporan .subtab-row button{
flex:1 1 0;min-width:0;padding:9px 8px;font-size:.78rem;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.subtab-bar-laporan .subtab-row-secondary button{
padding:7px 8px;font-size:.72rem;font-weight:600;
background:rgba(148,163,184,.08);
}
.subtab-bar-laporan .subtab-row-secondary button.active{
background:var(--primary-soft);color:var(--primary);box-shadow:none;
}
.subpanel{display:none;}
.subpanel.active{display:block;}
@media (max-width:959.98px){
/* Mobile/tablet: submenu di dalam halaman (side-rail tidak ada) */
.subtab-bar{display:flex !important;}
}
/* Admin Utama: toggle anggota Admin Family */
.btn-fam-toggle{
border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;
cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px;text-align:left;
}
.btn-fam-toggle:hover{color:var(--primary);}
.btn-fam-toggle .fam-chevron{display:inline-block;width:1em;color:var(--primary);font-weight:800;}
.btn-fam-toggle .fam-count{
font-size:.68rem;font-weight:600;color:var(--muted);
background:rgba(148,163,184,.14);padding:2px 7px;border-radius:999px;
}
tr.fam-child-row td:first-child{padding-left:28px;}
tr.fam-child-row{background:rgba(148,163,184,.04);}
[data-theme="dark"] tr.fam-child-row{background:rgba(255,255,255,.03);}
tr.fam-parent-row td{font-weight:600;}
.notif-wrap,.settings-wrap{position:relative;z-index:90;}
.notif-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ff453a;color:#fff;font-size:.58rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card);}
.notif-badge.hidden{display:none !important;}
/* Backdrop full-screen di atas semua UI (panel di body, bukan di header) */
.panel-backdrop{
display:none;position:fixed;inset:0;z-index:9000;
background:rgba(15,23,42,.45);
pointer-events:auto;
-webkit-tap-highlight-color:transparent;
}
[data-theme="dark"] .panel-backdrop{
background:rgba(0,0,0,.55);
}
.panel-backdrop.show{display:block;}
/* Panel overlay: selalu fixed ke viewport (hindari containing-block dari backdrop-filter header) */
.notif-panel{
z-index:250;
position:fixed;
left:50%;
top:max(12px, env(safe-area-inset-top, 0px) + 12px);
right:auto;
transform:translateX(-50%);
width:min(400px, calc(100vw - 24px));
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
border-radius:18px;
box-shadow:0 16px 48px rgba(15,23,42,.22);
z-index:9001;
max-height:min(78vh, calc(100dvh - 24px - env(safe-area-inset-bottom, 0px) - 72px));
overflow:hidden;
display:none;
flex-direction:column;
pointer-events:auto;
-webkit-overflow-scrolling:touch;
}
[data-theme="dark"] .notif-panel{
background:#161c2a;
border-color:rgba(255,255,255,.12);
box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.notif-panel.show{display:flex;}
.settings-panel-body{
overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;
padding:12px 14px 16px;
overscroll-behavior:contain;
touch-action:pan-y;
}
.notif-panel .notif-list{pointer-events:auto;overflow-y:auto;touch-action:pan-y;}
.notif-panel-head button,.notif-panel button{pointer-events:auto;cursor:pointer;}
.notif-panel-head{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.12);
font-weight:700;font-size:.85rem;
flex:0 0 auto;background:inherit;
}
.notif-panel-head button{border:none;background:transparent;color:var(--primary);font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit;}
.notif-list{
overflow-y:auto;padding:6px 0;flex:1 1 auto;min-height:0;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
}
.notif-item{padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.1);font-size:.78rem;line-height:1.4;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:rgba(15,23,42,.04);}
[data-theme="dark"] .notif-item:hover{background:rgba(255,255,255,.04);}
.notif-item .ni-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;}
.notif-item .ni-name{font-weight:700;font-size:.88rem;color:var(--text);}
.notif-item .ni-time{color:var(--muted);font-size:.7rem;white-space:nowrap;}
.notif-item .ni-aksi{font-weight:600;text-transform:capitalize;}
.notif-item .ni-aksi.hapus,.notif-item .ni-aksi.tolak{color:var(--red);}
.notif-item .ni-aksi.tambah,.notif-item .ni-aksi.setujui,.notif-item .ni-aksi.pulihkan{color:var(--green);}
.notif-item .ni-aksi.ubah,.notif-item .ni-aksi.ubah_password{color:var(--orange);}
.notif-item .ni-owner{font-size:.72rem;color:var(--primary);font-weight:600;margin-top:3px;}
.notif-item .ni-detail{color:var(--muted);font-size:.68rem;margin-top:3px;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.notif-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:.82rem;}
.table-loading{opacity:.55;pointer-events:none;position:relative;}
.table-wrap.is-loading::after{content:'Memuat…';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.8rem;font-weight:600;color:var(--muted);background:var(--glass-bg);padding:6px 14px;border-radius:999px;border:var(--glass-border);z-index:3;box-shadow:var(--shadow);backdrop-filter:blur(12px);}
.table-wrap.is-loading{min-height:120px;}
.table-wrap.is-loading table{opacity:.35;}
/* Refresh diam-diam saat data sudah ada — tanpa overlay Memuat */
.table-wrap.is-refreshing table{opacity:1;}
.table-wrap.is-refreshing::after{display:none !important;}
tbody.fade-in{animation:fadeInRows .28s ease;}
@keyframes fadeInRows{from{opacity:0;}to{opacity:1;}}
.print-only{display:none !important;}
.settings-wrap{position:relative;}
#settingsPanel{
width:min(320px, calc(100vw - 24px));
}
.settings-sec-title{
display:flex;align-items:center;gap:8px;
font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted);margin-bottom:10px;
}
.settings-sec-icon{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:9px;flex:0 0 auto;
background:rgba(10,132,255,.12);color:var(--primary);
}
.settings-sec-icon svg{width:15px;height:15px;}
.email-status-badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 10px;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.02em;
}
.email-status-badge.verified{background:rgba(48,209,88,.16);color:var(--green,#30d158);}
.email-status-badge.pending{background:rgba(255,159,10,.16);color:var(--orange,#ff9f0a);}
.email-status-badge.none{background:rgba(148,163,184,.14);color:var(--muted);}
[data-theme="dark"] .settings-sec-icon{background:rgba(100,181,255,.14);}
.settings-panel-body{padding:14px;}
.settings-panel-body label{font-size:.72rem;color:var(--muted);font-weight:600;display:block;margin-bottom:4px;}
.settings-panel-body select{width:100%;margin-bottom:14px;padding:8px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.5);color:var(--text);font-family:inherit;font-size:.85rem;}
.settings-panel-body p.hint{font-size:.72rem;color:var(--muted);margin:0;line-height:1.45;}
.bottom-nav{display:none;}
@media(max-width:720px){
nav.main-nav{display:none;}
.bottom-nav{
display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
background:var(--glass-bg);
backdrop-filter:blur(28px) saturate(1.4);
-webkit-backdrop-filter:blur(28px) saturate(1.4);
border-top:var(--glass-border);
box-shadow:0 -8px 32px rgba(15,23,42,.1);
padding:6px 6px calc(6px + env(safe-area-inset-bottom));
justify-content:space-between;align-items:stretch;gap:0;
overflow-x:hidden;-webkit-overflow-scrolling:touch;
}
.bottom-nav button{
flex:1 1 0;min-width:0;max-width:none;border:none;background:transparent;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:6px 2px;border-radius:12px;color:var(--muted);
font-size:clamp(.5rem,.12rem + 1.6vw,.62rem);font-weight:600;font-family:inherit;
transition:color .15s,background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bottom-nav button svg{width:18px;height:18px;flex-shrink:0;}
.bottom-nav button.active{color:var(--primary);background:var(--primary-soft);}
.bottom-nav .nav-badge{right:calc(50% - 14px);}
.app{padding-bottom:80px;}
/* Header relative agar position:fixed panel tidak ter-clip ancestor sticky */
.app-header{
position:relative !important;
z-index:110;
overflow:visible !important;
}
.header-controls,.settings-wrap,.notif-wrap{
overflow:visible !important;
}
.table-wrap{max-height:min(50vh,400px);}
/* Panel sudah fixed di body — hanya tune ukuran mobile */
.notif-panel{
left:10px !important;
right:10px !important;
width:auto !important;
max-width:none !important;
top:max(10px, env(safe-area-inset-top, 0px) + 10px) !important;
transform:none !important;
max-height:min(80dvh, calc(100dvh - 90px - env(safe-area-inset-bottom, 0px))) !important;
z-index:9001 !important;
border-radius:16px !important;
}
.panel-backdrop{z-index:9000 !important;}
.notif-panel-head{padding:12px 14px !important;font-size:.82rem !important;flex-shrink:0 !important;}
.notif-panel-head button{font-size:.74rem !important;}
.notif-panel .notif-list,
.notif-panel .settings-panel-body{
flex:1 1 auto !important;
min-height:140px !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding-bottom:16px !important;
}
.notif-item{padding:10px 14px !important;font-size:.74rem !important;}
.notif-item .ni-name{font-size:.88rem !important;}
.notif-item .ni-time{font-size:.66rem !important;}
.notif-item .ni-detail{font-size:.66rem !important;}
.notif-empty{padding:24px 14px !important;font-size:.78rem !important;}
#settingsPanel .settings-panel-body{padding:12px 14px 18px !important;}
#settingsPanel .settings-panel-body select,
#settingsPanel .settings-panel-body input{
font-size:.82rem !important;padding:8px 10px !important;min-height:40px;
}
}
#loginScreen:not(.hidden) ~ .bottom-nav,
body:has(#loginScreen:not(.hidden)) .bottom-nav{display:none !important;}
/* ===== Mobile list cards + action sheet ===== */
/* ===== Pull to refresh ===== */
#ptrIndicator{
position:fixed; top:0; left:0; right:0; z-index:8500;
display:flex; align-items:center; justify-content:center; gap:8px;
height:0; overflow:hidden; pointer-events:none;
background:transparent; color:var(--muted);
font-size:.78rem; font-weight:600;
transition:none;
padding-top: env(safe-area-inset-top, 0px);
}
#ptrIndicator.show{
height:56px;
background:rgba(148,163,184,.12);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#ptrIndicator .ptr-spin{
width:18px;height:18px;border-radius:50%;
border:2px solid rgba(148,163,184,.35);
border-top-color:var(--primary);
animation:ptrSpin .7s linear infinite;
opacity:0;
}
#ptrIndicator.refreshing .ptr-spin{opacity:1;}
#ptrIndicator .ptr-arrow{font-size:1rem; transition:transform .2s;}
#ptrIndicator.ready .ptr-arrow{transform:rotate(180deg); color:var(--primary);}
@keyframes ptrSpin{to{transform:rotate(360deg);}}
/* ===== Contrast / a11y polish ===== */
:root{
--muted:#5c6b7a;
--muted-light:#6b7c8f;
}
[data-theme="dark"]{
--muted:#a8b4c4;
--muted-light:#9aa8ba;
}
.list-card-badge{
font-weight:700;
}
.list-card-badge.out{background:rgba(255,69,58,.18);color:#c62828;}
[data-theme="dark"] .list-card-badge.out{background:rgba(255,69,58,.22);color:#ff8a80;}
.list-card-badge.in{background:rgba(48,209,88,.18);color:#1b7a3d;}
[data-theme="dark"] .list-card-badge.in{background:rgba(48,209,88,.2);color:#7ddea0;}
.list-card-badge.inv{background:rgba(255,159,10,.2);color:#b36b00;}
[data-theme="dark"] .list-card-badge.inv{background:rgba(255,159,10,.22);color:#ffc266;}
/* Prefer rem-friendly body scaling */
/* Cegah auto-zoom teks di iOS Safari; hindari text-size-adjust (peringatan Firefox) */
html{ -webkit-text-size-adjust: 100%; }
.list-cards{display:none;padding:0 0 8px;}
.list-card{
position:relative;
background:var(--card-solid,var(--card));
border:1px solid var(--border-strong,var(--border));
border-radius:14px;
padding:12px 14px;
margin:0 0 10px;
box-shadow:var(--shadow);
}
.list-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.list-card-title{font-weight:700;font-size:.92rem;line-height:1.3;color:var(--text);flex:1;min-width:0;word-break:break-word;}
.list-card-amount{font-weight:700;font-size:.92rem;white-space:nowrap;flex-shrink:0;}
.list-card-amount.pos{color:var(--green);}
.list-card-amount.neg{color:var(--red);}
.list-card-amount.neu{color:var(--orange);}
.list-card-sub{margin-top:4px;font-size:.75rem;color:var(--muted);line-height:1.35;}
.list-card-meta{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--muted-light,var(--muted));}
.list-card-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.4;background:var(--primary-soft);color:var(--primary);}
.list-card-badge.out{background:var(--red-soft);color:var(--red);}
.list-card-badge.in{background:var(--green-soft);color:var(--green);}
.list-card-badge.inv{background:var(--orange-soft);color:var(--orange);}
.list-card-kebab{
border:none;background:transparent;color:var(--muted);
width:36px;height:36px;border-radius:10px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
font-size:1.25rem;line-height:1;cursor:pointer;margin:-6px -8px 0 0;
}
.list-card-kebab:active,.list-card-kebab:hover{background:rgba(148,163,184,.18);color:var(--text);}
.list-cards-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:.85rem;}
#sessionWarnModal.modal-overlay{z-index:9700 !important;}
#listActionSheet.modal-overlay{align-items:flex-end;justify-content:center;padding:0;}
/* Action sheet di atas bottom-nav */
#listActionSheet.modal-overlay{
z-index: 9600 !important;
pointer-events: auto !important;
}
#listActionSheet .action-sheet{
position: relative;
z-index: 9601;
pointer-events: auto !important;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
#listActionSheet .action-sheet-cancel,
#listActionSheet .action-sheet-btn{
pointer-events: auto !important;
position: relative;
z-index: 2;
min-height: 48px;
-webkit-tap-highlight-color: transparent;
}
#listActionSheet .action-sheet-cancel{
margin-bottom: 8px;
}
.list-card-stats{
display:flex;flex-wrap:wrap;gap:6px 12px;
margin-top:8px;padding-top:8px;
border-top:1px solid var(--border-strong,rgba(148,163,184,.2));
font-size:.72rem;color:var(--muted);
}
.list-card-stats span strong{color:var(--text);font-weight:700;}
.list-card-stats .g-pos{color:var(--green);}
.list-card-stats .g-neg{color:var(--red);}
.list-card-more{
margin-top:6px;border:none;background:transparent;
color:var(--primary);font-size:.72rem;font-weight:600;
padding:4px 0;cursor:pointer;
}
.list-card-detail{
display:none;margin-top:6px;font-size:.72rem;color:var(--muted);
line-height:1.45;
}
.list-card-detail.open{display:block;}
.list-card-detail .d-row{
display:flex;justify-content:space-between;gap:8px;
padding:3px 0;
}
.list-card-detail .d-row strong{color:var(--text);}
#listActionSheet.show, #listActionSheet[style*="flex"]{display:flex !important;}
#listActionSheet .action-sheet{
width:100%;max-width:480px;margin:0 auto;
background:var(--card-solid,#fff);
border-radius:16px 16px 0 0;
padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px));
box-shadow:0 -8px 32px rgba(15,23,42,.18);
animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.action-sheet-head{
padding:6px 18px 12px;font-size:.82rem;font-weight:600;color:var(--muted);
border-bottom:1px solid var(--border-strong,rgba(148,163,184,.25));line-height:1.35;
}
.action-sheet-btn{
display:block;width:100%;text-align:left;border:none;background:transparent;
padding:14px 18px;font-size:.95rem;font-weight:600;color:var(--text);cursor:pointer;
}
.action-sheet-btn:active{background:rgba(148,163,184,.15);}
.action-sheet-btn.danger{color:var(--red);}
.action-sheet-sep{height:1px;background:var(--border-strong,rgba(148,163,184,.25));margin:4px 0;}
.action-sheet-info{
padding:10px 16px;font-size:.78rem;line-height:1.45;color:var(--muted);
white-space:pre-wrap;word-break:break-word;text-align:left;
}
.action-sheet-info strong{color:var(--text);font-weight:600;}
.action-sheet-cancel{
display:block;width:calc(100% - 24px);margin:8px 12px 0;text-align:center;border:none;border-radius:12px;
background:rgba(148,163,184,.15);padding:12px;font-size:.9rem;font-weight:600;color:var(--text);cursor:pointer;
}
@media (max-width: 768px){
.table-wrap.is-cardable > table{display:none !important;}
.table-wrap.is-cardable .list-cards{display:block;}
}
@media (min-width: 769px){
.list-cards{display:none !important;}
.users-mobile-only{display:none !important;}
}
/* ===== Akun cards (mobile) ===== */
.akun-filter-row{display:none;margin:0 0 12px;}
@media (max-width:768px){
.akun-filter-row{display:block;}
}
.akun-filter-row input{
width:100%;padding:10px 14px;border-radius:12px;
border:1px solid var(--border-strong,rgba(148,163,184,.25));
background:var(--card-solid,var(--card));color:var(--text);
font-family:inherit;font-size:.88rem;
}
.akun-sec-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
margin:14px 0 8px;padding:8px 10px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
border-radius:10px;background:rgba(148,163,184,.08);
}
.akun-sec-head:first-child{margin-top:4px;}
.akun-sec-head.is-toggle{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
.akun-sec-head.is-toggle:active{background:rgba(148,163,184,.16);}
.akun-sec-left{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.akun-sec-chevron{font-size:.85rem;opacity:.8;flex-shrink:0;}
.akun-sec-count{font-weight:600;opacity:.85;white-space:nowrap;}
.akun-card.fam-child-card.hidden{display:none !important;}
.akun-expand-hint{
margin-top:6px;font-size:.7rem;color:var(--muted);line-height:1.35;
}
.akun-card{
position:relative;display:flex;align-items:flex-start;gap:12px;
background:var(--card-solid,var(--card));
border:1px solid var(--border-strong,var(--border));
border-radius:14px;padding:12px 14px;margin:0 0 10px;
box-shadow:var(--shadow);
}
.akun-card.is-self{
border-left:3px solid var(--primary);
background:color-mix(in srgb, var(--primary) 7%, var(--card-solid, var(--card)));
}
.akun-avatar{
width:42px;height:42px;border-radius:12px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:.85rem;color:#fff;
background:linear-gradient(145deg,#0a84ff,#5e5ce6);
}
.akun-avatar.master{background:linear-gradient(145deg,#7c3aed,#a855f7);}
.akun-avatar.anggota{background:linear-gradient(145deg,#64748b,#94a3b8);}
.akun-body{flex:1;min-width:0;}
.akun-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.akun-nama{font-weight:700;font-size:.92rem;color:var(--text);line-height:1.3;}
.akun-anda-tag{
font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:999px;
background:var(--primary-soft);color:var(--primary);
}
.akun-username{margin-top:2px;font-size:.75rem;color:var(--muted);}
.akun-meta{
margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
}
.role-badge{
display:inline-flex;align-items:center;gap:4px;
padding:3px 10px;border-radius:999px;
font-size:.68rem;font-weight:600;white-space:nowrap;max-width:fit-content;
background:rgba(148,163,184,.15);color:var(--text);
}
.role-badge.master{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff;}
.role-badge.master.main-admin{background:linear-gradient(90deg,#5b21b6,#7c3aed);color:#fff;}
.role-badge.anggota,.role-badge.pasangan{background:rgba(148,163,184,.15);color:var(--text);}
.role-info-btn{
background:none;border:none;opacity:.75;font-size:.72rem;padding:0 2px;
cursor:pointer;line-height:1;color:inherit;
}
.role-info-btn:active{opacity:1;}
.status-pill{
display:inline-flex;align-items:center;gap:4px;
font-size:.68rem;font-weight:600;color:var(--muted);
}
.status-pill.online{color:var(--green);}
.status-pill.online::before,
.status-pill.status-online::before{
content:'';width:7px;height:7px;border-radius:50%;background:var(--green);
display:inline-block;
}
.status-pill.offline::before,
.status-pill.status-idle::before,
.status-pill.status-away::before{
content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);
display:inline-block;
}
.akun-kebab{
border:none;background:transparent;color:var(--muted);
width:36px;height:36px;border-radius:10px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
font-size:1.2rem;line-height:1;cursor:pointer;margin:-4px -6px 0 0;
}
.akun-kebab:active{background:rgba(148,163,184,.15);}
.akun-fam-note{margin-top:6px;font-size:.68rem;color:var(--muted-light,var(--muted));}
/* Aksesibilitas: kurangi motion jika user minta di OS */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print{
body{background:#fff !important;color:#000 !important;font-size:11pt;}
#loginScreen,.app-header,nav.main-nav,.bottom-nav,.theme-btn,.toast,.no-print,.filter-row,.editor-only,.actions button,.btn,#panelTrash,#loadingBox,.insight-bar,.modal-overlay,#sessionBoot{display:none !important;}
.app{max-width:100%;padding:0;margin:0;}
.tab{display:none !important;}
.tab.active{display:block !important;}
#tab-rincian{display:block !important;}
.panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:12px;padding:12px;backdrop-filter:none;background:#fff;}
.cards{grid-template-columns:repeat(4,1fr);gap:8px;}
.card{box-shadow:none;border:1px solid #ddd;padding:10px;break-inside:avoid;backdrop-filter:none;background:#fff;}
.card:hover{transform:none;box-shadow:none;}
.table-wrap{max-height:none !important;overflow:visible !important;border:1px solid #ccc;}
table thead th{position:static !important;background:#eee !important;color:#000 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
tbody tr:nth-child(even) td{background:#f5f5f5 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.print-only{display:block !important;}
.panel-head h3,.panel h3{color:#000;}
a{text-decoration:none;color:#000;}
@page{margin:12mm;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000;}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:10px 16px;background:var(--primary,#0a84ff);color:#fff;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.25);}
/* Anti-bocor: login menutupi seluruh layar; mainContent benar-benar tersembunyi */
#loginScreen:not(.hidden){
position:fixed !important;
inset:0 !important;
z-index:8000 !important;
min-height:100vh !important;
min-height:100dvh !important;
display:flex !important;
overflow:auto !important;
background:
radial-gradient(ellipse 80% 50% at 50% -20%,rgba(10,132,255,.22),transparent 55%),
radial-gradient(ellipse 60% 40% at 100% 100%,rgba(191,90,242,.12),transparent 50%),
linear-gradient(180deg,#eef2f9 0%,#e4ebf6 100%) !important;
}
[data-theme="dark"] #loginScreen:not(.hidden){
background:
radial-gradient(ellipse 70% 50% at 50% -10%,rgba(10,132,255,.32),transparent 55%),
linear-gradient(180deg,#0a0e18 0%,#070a12 100%) !important;
}
#loginScreen.hidden{display:none !important;}
#mainContent.hidden{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
height:0 !important;
overflow:hidden !important;
position:absolute !important;
left:-9999px !important;
}
body:has(#loginScreen:not(.hidden)) #mainContent,
body:has(#loginScreen:not(.hidden)) .bottom-nav{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body:has(#loginScreen:not(.hidden)) .panel-backdrop,
body:has(#loginScreen:not(.hidden)) .notif-panel{
display:none !important;
}
@media (max-width:720px){
/* Jarak header → konten lebih rapat & proporsional di mobile */
.app{padding:6px 8px 80px !important;}
.app-header{
margin-bottom:6px !important;
margin-top:0 !important;
padding:6px 8px !important;
gap:6px !important;
border-radius:14px !important;
position:relative !important;
top:0 !important;
overflow:visible !important;
}
.brand{gap:8px !important;}
.brand-mark{width:34px !important;height:34px !important;border-radius:11px !important;font-size:.9rem !important;}
.brand-text h1{font-size:.98rem !important;}
.brand-text p{font-size:.62rem !important;}
.theme-btn,.notif-btn{width:34px !important;height:34px !important;}
.user-pill{padding:4px 8px 4px 4px !important;}
.user-avatar{width:28px !important;height:28px !important;font-size:.68rem !important;}
.user-meta .name{font-size:.74rem !important;}
.user-meta .role{font-size:.6rem !important;}
.control-group{padding:4px 8px !important;}
.control-group select{font-size:.75rem !important;padding:4px 6px !important;}
nav.main-nav{display:none !important;margin:0 !important;padding:0 !important;height:0 !important;}
.insight-bar{margin-top:0 !important;margin-bottom:8px !important;padding:8px 10px !important;font-size:.76rem !important;gap:8px !important;}
.cards{gap:8px !important;margin-bottom:10px !important;}
.card{padding:12px 14px !important;}
.card.hero{padding:16px 16px !important;}
.panel{margin-bottom:10px !important;padding:12px 12px !important;}
#tab-dashboard > .panel{margin-bottom:14px !important;}
#tab-dashboard > .panel:first-of-type{margin-top:2px !important;}
.tab.active{animation:none;}
.header-controls{gap:5px !important;flex:1 1 auto;}
.user-pill{margin-top:0 !important;}
/* Banner admin view lebih rapat */
#adminViewBanner{margin:0 0 8px !important;padding:8px 12px !important;font-size:.76rem !important;}
}
/* Skeleton pulse */
.skeleton-line,.sk-card{
background:linear-gradient(90deg,rgba(148,163,184,.12) 25%,rgba(148,163,184,.22) 50%,rgba(148,163,184,.12) 75%);
background-size:200% 100%;animation:skPulse 1.2s ease-in-out infinite;border-radius:12px;
}
@keyframes skPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{height:88px;border-radius:var(--radius);}
tr.row-new{animation:rowIn .45s cubic-bezier(.22,1,.36,1);}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px);background:var(--primary-soft)}to{opacity:1;transform:none;background:transparent}}
.btn:active{transform:scale(.97);}
.btn.tap-pulse{animation:tapPulse .28s ease;}
@keyframes tapPulse{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}
/* FAB quick-add */
.fab-tx{
display:none;position:fixed;right:16px;bottom:88px;z-index:70;
width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
background:linear-gradient(145deg,#0a84ff,#5e5ce6);color:#fff;
box-shadow:0 8px 28px rgba(10,132,255,.45);font-size:1.6rem;font-weight:300;line-height:1;
align-items:center;justify-content:center;
}
/* FAB hanya di Dashboard (mobile) — dikontrol class .fab-visible via updateFabVisibility */
@media (max-width:720px){
body:has(#mainContent:not(.hidden)) .fab-tx.fab-visible{display:flex;}
#loginScreen:not(.hidden) ~ .fab-tx, body:has(#loginScreen:not(.hidden)) .fab-tx{display:none !important;}
}
.fab-tx:active{transform:scale(.92);}
#quickTxModal .modal-box{max-width:420px;max-height:90vh;overflow:auto;}
#quickTxModal .qt-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#quickTxModal label{display:block;margin:8px 0 4px;font-size:.78rem;color:var(--muted);}
#quickTxModal select,#quickTxModal input{width:100%;}
#quickTxModal #qtNoRekeningWrap{margin-top:4px;}
.insight-today{
margin:0 0 14px;padding:14px 16px;border-radius:var(--radius-sm);
background:var(--primary-soft);border:1px solid rgba(10,132,255,.2);
font-size:.84rem;line-height:1.55;
}
.insight-today strong{font-weight:700;}
.filter-agg-on #filterViewAs{
border-color:var(--orange)!important;box-shadow:0 0 0 2px rgba(255,159,10,.25);
}
.filter-agg-on .control-group label{color:var(--orange);}
.empty-cta{margin-top:12px;}
.retry-bar{
display:none;margin:8px 0 12px;padding:10px 14px;border-radius:12px;
background:var(--red-soft);border:1px solid rgba(255,69,58,.25);
font-size:.82rem;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.retry-bar.show{display:flex;}
#adminViewBanner{
position:sticky;top:68px;z-index:105;
backdrop-filter:blur(16px) saturate(1.2);
-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
@media (max-width:720px){
#adminViewBanner{top:auto;position:relative;z-index:1;}
}
.notif-date-sep{
padding:10px 14px 6px;font-size:.68rem;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);
background:rgba(148,163,184,.12);
border-bottom:1px solid rgba(148,163,184,.15);
/* Jangan sticky — banyak separator akan saling menumpuk di top:0 saat scroll */
position:relative;z-index:0;
}
[data-theme="dark"] .notif-date-sep{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.08);}
.notif-digest{
margin:8px 12px;padding:10px 12px;border-radius:12px;
background:var(--primary-soft);border:1px solid rgba(10,132,255,.18);
font-size:.78rem;line-height:1.45;
}
.notif-digest strong{display:block;margin-bottom:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);}
.notif-item .ni-headline{font-size:.8rem;line-height:1.4;color:var(--text);}
.notif-item .ni-headline .amt{font-weight:700;font-variant-numeric:tabular-nums;}
/* ============================================================
Desktop shell — Sales-dashboard reference (soft SaaS)
Sidebar kiri + surface putih + kartu rounded, ≥960px
Mobile/bottom-nav tidak diubah
============================================================ */
@media (min-width: 960px) {
:root {
--bg: #eef1f6;
--bg-mesh: #eef1f6;
--card: #ffffff;
--card-solid: #ffffff;
--glass-bg: #ffffff;
--glass-border: 1px solid rgba(15, 23, 42, 0.06);
--border: rgba(15, 23, 42, 0.06);
--border-strong: rgba(15, 23, 42, 0.10);
--shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
--shadow-md: 0 8px 28px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);
--radius: 22px;
--radius-sm: 16px;
--radius-xs: 12px;
--glass-blur: 0px;
--glass-sat: 1;
--sidebar-w: 76px;
--shell-pad: 20px;
}
body {
background: var(--bg) !important;
background-image: none !important;
}
/* Area aplikasi: ruang untuk sidebar fixed */
.app {
max-width: 1400px;
margin: 0 auto;
padding: 18px 24px 48px calc(var(--sidebar-w) + 28px) !important;
min-height: 100vh;
box-sizing: border-box;
}
/* ---- Sidebar navigasi vertikal ---- */
.main-nav {
position: fixed !important;
left: 16px;
top: 16px;
bottom: 16px;
width: var(--sidebar-w);
margin: 0 !important;
padding: 14px 10px !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-start;
gap: 6px !important;
border-radius: 28px !important;
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
box-shadow: var(--shadow-md) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 800;
overflow: visible;
}
/* Gaya icon-only lama DINONAKTIFKAN — label harus tampil di side-rail expanded */
.main-nav .tab-btn,
.main-nav .nav-group > .tab-btn {
/* jangan paksa 48px / font-size:0 — diatur ulang di blok .side-rail */
background: transparent;
border: none;
}
.side-rail .main-nav .tab-btn,
.side-rail .main-nav .nav-group > .tab-btn,
#sideRail .tab-btn,
#sideRailNavHost .tab-btn,
#sideRailNavHost .nav-group > .tab-btn {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: var(--rail-item-h, 46px) !important;
min-height: var(--rail-item-h, 46px) !important;
padding: 0 12px !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
font-size: .84rem !important;
line-height: 1.2 !important;
gap: 12px !important;
color: var(--desk-muted, var(--muted)) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.rail-expanded) .side-rail .tab-btn,
body:not(.rail-expanded) #sideRailNavHost .tab-btn {
justify-content: center !important;
padding: 0 !important;
gap: 0 !important;
}
.side-rail .tab-btn svg,
#sideRailNavHost .tab-btn svg {
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
.side-rail .tab-btn.active,
.side-rail .nav-group > .tab-btn.active,
#sideRailNavHost .tab-btn.active {
background: linear-gradient(145deg, rgba(91,108,255,.95), rgba(124,92,252,.95)) !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(91, 108, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.15) !important;
}
.side-rail .tab-btn:hover:not(.active),
#sideRailNavHost .tab-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.45) !important;
color: var(--primary) !important;
}
[data-theme="dark"] .side-rail .tab-btn:hover:not(.active),
[data-theme="dark"] #sideRailNavHost .tab-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.08) !important;
color: #93c5fd !important;
}
.side-rail .nav-badge,
#sideRailNavHost .nav-badge {
position: static !important;
margin-left: auto !important;
flex-shrink: 0;
min-width: 16px;
height: 16px;
font-size: 0.58rem !important;
}
body:not(.rail-expanded) .side-rail .nav-badge {
position: absolute !important;
top: 4px !important;
right: 4px !important;
margin-left: 0 !important;
}
.side-rail .nav-group,
#sideRailNavHost .nav-group {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
/* Flyout hanya jika main-nav TIDAK di side-rail */
.main-nav .nav-dropdown {
left: calc(100% + 10px) !important;
top: 0 !important;
right: auto !important;
min-width: 200px;
border-radius: 16px;
box-shadow: var(--shadow-lg);
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
}
.side-rail .main-nav .nav-dropdown,
#sideRailNavHost .nav-dropdown{
left: auto !important;
top: auto !important;
position: static !important;
min-width: 0 !important;
box-shadow: none !important;
background: transparent !important;
border: none !important;
}
/* Brand kecil di atas sidebar via ::before pada nav — skip, header tetap */
/* ---- Header top bar ---- */
.app-header {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: 24px !important;
box-shadow: var(--shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 12px 18px !important;
margin-bottom: 20px !important;
position: sticky;
top: 12px;
z-index: 50;
justify-content: flex-end !important;
}
.app-header .brand-mark {
background: linear-gradient(145deg, #5b6cff, #a855f7);
color: #fff;
border-radius: 14px;
}
.app-header .brand-text h1 {
font-weight: 750;
letter-spacing: -0.02em;
}
.app-header .brand-text p {
color: var(--muted-light);
}
.header-controls .theme-btn,
.header-controls .notif-btn {
background: #f3f5f9;
border: 1px solid transparent;
border-radius: 14px;
}
.header-controls .theme-btn:hover,
.header-controls .notif-btn:hover {
background: #e8ecf4;
}
.user-pill {
background: #f3f5f9 !important;
border-radius: 999px !important;
border: 1px solid rgba(15, 23, 42, 0.05) !important;
padding: 4px 6px 4px 8px !important;
}
/* ---- Kartu / panel ---- */
.panel {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: 22px !important;
box-shadow: var(--shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 20px 22px !important;
}
.panel-head h3,
.panel h3 {
font-weight: 700;
letter-spacing: -0.02em;
font-size: 1rem;
}
/* Stat / KPI cards di dashboard */
.dash-kpis,
.kpi-row,
.stats-row,
.dash-grid {
display: grid;
gap: 16px;
}
#tab-dashboard .panel {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#tab-dashboard .panel:hover {
box-shadow: var(--shadow-md);
}
/* Grid dashboard longgar */
#tab-dashboard {
display: block;
}
#tab-dashboard .dash-top-grid,
#tab-dashboard .grid-2 {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 16px;
}
@media (min-width: 1200px) {
#tab-dashboard .dash-charts-row,
#tab-dashboard .charts-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
}
/* Table di dalam panel lebih “soft” — overflow auto agar daftar bisa di-scroll */
.table-wrap {
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.05);
max-height: min(65vh, 640px);
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Transaksi, portofolio, dll. — pastikan scroll vertikal aktif di desktop */
#tblTransaksiWrap,
#tblPortofolioWrap,
#tblLiabilitasWrap,
#tblLikuidWrap,
#tblTrashWrap,
#tblPendingWrap,
#tblUsersWrap,
#tblRincianWrap,
#tblRequestAkunWrap {
max-height: min(65vh, 640px) !important;
overflow-x: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
table thead th {
background: #f1f5f9 !important;
font-weight: 650;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
backdrop-filter: none;
z-index: 3;
}
/* Filter bar */
.filter-row {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 16px;
padding: 12px 14px;
box-shadow: var(--shadow);
}
/* Tombol primer */
.btn:not(.secondary):not(.danger):not(.small) {
border-radius: 14px;
font-weight: 650;
box-shadow: 0 4px 14px rgba(10, 132, 255, 0.25);
}
.btn.secondary {
border-radius: 14px;
background: #f3f5f9;
border-color: transparent;
}
/* Sembunyikan bottom-nav di desktop */
.bottom-nav {
display: none !important;
}
/* FAB tetap pojok kanan */
.fab-tx {
right: 28px;
bottom: 28px;
}
/* Conn status pill */
#connStatus {
background: rgba(48, 209, 88, 0.12);
}
/* Form inputs */
input, select, textarea {
border-radius: 12px !important;
border-color: rgba(15, 23, 42, 0.10) !important;
background: #fafbfd !important;
}
input:focus, select:focus, textarea:focus {
background: #fff !important;
box-shadow: var(--ring) !important;
}
/* Modal */
.modal-box, .logout-box {
border-radius: 24px !important;
box-shadow: var(--shadow-lg) !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
}
/* Dark theme desktop: sidebar solid gelap */
@media (min-width: 960px) {
[data-theme="dark"] {
--bg: #0b0f18;
--bg-mesh: #0b0f18;
--card: #141a26;
--card-solid: #141a26;
--glass-bg: #141a26;
--glass-border: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] body {
background: #0b0f18 !important;
}
[data-theme="dark"] .main-nav {
background: #141a26 !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .app-header,
[data-theme="dark"] .panel,
[data-theme="dark"] .filter-row {
background: #141a26 !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .main-nav .nav-dropdown {
background: #1a2233;
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] table thead th {
/* solid — sticky header tidak tembus list saat scroll */
background: #1a2233 !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: none;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .user-pill,
[data-theme="dark"] .header-controls .theme-btn,
[data-theme="dark"] .header-controls .notif-btn,
[data-theme="dark"] .btn.secondary {
background: rgba(255, 255, 255, 0.06) !important;
}
}
/* KPI cards desktop refinement */
@media (min-width: 960px) {
#tab-dashboard > .cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 16px !important;
margin-bottom: 18px;
}
@media (min-width: 1200px) {
#tab-dashboard > .cards {
grid-template-columns: repeat(4, 1fr);
}
}
#tab-dashboard > .cards .card {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: 20px !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05) !important;
backdrop-filter: none !important;
padding: 18px 18px 16px !important;
margin: 0 !important;
}
#tab-dashboard > .cards .card.hero {
grid-column: span 1;
background: linear-gradient(135deg, rgba(10,132,255,.14), rgba(255,255,255,.85)) !important;
color: var(--text) !important;
border: 1px solid rgba(10,132,255,.18) !important;
box-shadow: 0 8px 28px rgba(10,132,255,.10) !important;
}
#tab-dashboard > .cards .card.hero .label,
#tab-dashboard > .cards .card.hero .sub {
color: var(--muted) !important;
}
#tab-dashboard > .cards .card.hero .label {
color: var(--primary-dark, var(--primary)) !important;
}
#tab-dashboard > .cards .card .label {
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
}
#tab-dashboard > .cards .card .value {
font-size: 1.35rem;
font-weight: 750;
letter-spacing: -0.03em;
margin-top: 6px;
}
#tab-dashboard > .cards .card .icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: #f3f5f9;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
#tab-dashboard > .cards .card.hero .icon {
background: rgba(10,132,255,0.12);
color: var(--primary);
}
/* Page title feel */
.app-header .brand-text h1 {
font-size: 1.15rem;
}
/* Akun cards list desktop */
.akun-card {
background: #fff !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: 16px !important;
box-shadow: var(--shadow);
}
}
@media (min-width: 960px) {
[data-theme="dark"] #tab-dashboard > .cards .card {
background: rgba(22, 28, 42, 0.72) !important;
border-color: rgba(255,255,255,0.08) !important;
backdrop-filter: blur(20px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
}
[data-theme="dark"] #tab-dashboard > .cards .card.hero {
background: linear-gradient(135deg, rgba(10,132,255,.28), rgba(22,28,42,.75)) !important;
color: #fff !important;
border: 1px solid rgba(10,132,255,.25) !important;
box-shadow: 0 8px 28px rgba(10,132,255,.15) !important;
}
[data-theme="dark"] #tab-dashboard > .cards .card.hero .label,
[data-theme="dark"] #tab-dashboard > .cards .card.hero .sub {
color: rgba(255,255,255,0.72) !important;
}
[data-theme="dark"] #tab-dashboard > .cards .card.hero .label {
color: rgba(147,197,255,0.95) !important;
}
[data-theme="dark"] #tab-dashboard > .cards .card .icon {
background: rgba(255,255,255,0.08);
}
[data-theme="dark"] #tab-dashboard > .cards .card.hero .icon {
background: rgba(255,255,255,0.14);
}
[data-theme="dark"] .akun-card {
background: rgba(22, 28, 42, 0.72) !important;
border-color: rgba(255,255,255,0.08) !important;
}
}
/* ============================================================
Desktop shell — referensi Sales Analysis (soft cards + side rail)
============================================================ */
:root{
--rail-w: 76px;
--rail-w-exp: 248px;
--desk-bg: #eef1f6;
--desk-card: #ffffff;
--desk-muted: #6b7a90;
--desk-radius: 20px;
--desk-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
--desk-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"]{
--desk-bg: #0b1220;
--desk-card: #141c2c;
--desk-muted: #9aa8ba;
--desk-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.desktop-only{display:none !important;}
.header-search{display:none !important;}
.side-rail{display:none !important;}
.side-rail[hidden]{display:none !important;visibility:hidden !important;pointer-events:none !important;}
.nav-item-desc{display:none;}
.nav-item-body{display:none;}
/* Mobile/tablet: pastikan side-rail & search tidak bocor */
@media (max-width: 959.98px){
.side-rail,
#sideRail,
.header-search,
.desktop-only{
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
position: fixed !important;
left: -9999px !important;
top: 0 !important;
opacity: 0 !important;
z-index: -1 !important;
}
/* Cegah SVG side-rail membengkak jika sempat ter-render */
.side-rail svg,
.header-search svg{
width: 20px !important;
height: 20px !important;
max-width: 24px !important;
max-height: 24px !important;
}
.app-main{
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Batasi ikon header agar tidak bocir */
.app-header svg{
width: 18px !important;
height: 18px !important;
max-width: 22px !important;
max-height: 22px !important;
flex-shrink: 0;
}
.app-header .brand-mark{
width: 36px !important;
height: 36px !important;
font-size: .85rem !important;
}
.user-avatar{
width: 28px !important;
height: 28px !important;
}
}
/* ===== Desktop shell ≥960px — menu rapi & proporsional ===== */
@media (min-width: 960px){
.desktop-only{display:flex !important;}
.header-search{display:none !important;}
.mobile-only-settings{display:none !important;}
.brand-header-mobile{display:none !important;}
.bottom-nav{display:none !important;}
/* Side rail desktop — lebar ciut vs expand harus mengalahkan #id */
.side-rail,
#sideRail{
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
pointer-events: auto !important;
opacity: 1 !important;
position: fixed !important;
left: 12px !important;
top: 12px !important;
bottom: 12px !important;
width: var(--rail-w, 84px) !important;
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 200 !important;
}
body.rail-expanded .side-rail,
body.rail-expanded #sideRail{
width: var(--rail-w-exp, 260px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* hidden attr hanya untuk mobile; di desktop JS melepasnya */
.side-rail[hidden],
#sideRail[hidden]{
display: none !important;
}
:root{
--rail-w: 84px;
--rail-w-exp: 260px;
--desk-bg: #eef1f6;
--desk-card: #ffffff;
--desk-muted: #7b8798;
--desk-shadow: 0 10px 30px rgba(15,23,42,.06);
--desk-shadow-sm: 0 2px 10px rgba(15,23,42,.04);
--desk-radius: 22px;
--desk-pad: clamp(16px, 2vw, 28px);
--rail-item-h: 46px;
}
[data-theme="dark"]{
--desk-bg: #0b0f18;
--desk-card: #141a26;
--desk-muted: #8b97a8;
--desk-shadow: 0 12px 36px rgba(0,0,0,.45);
--desk-shadow-sm: 0 2px 12px rgba(0,0,0,.35);
}
body{
background: var(--desk-bg) !important;
background-image: none !important;
}
.app:not(.hidden),
#mainContent.app:not(.hidden){
display: flex !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 100vh;
min-height: 100dvh;
background: transparent;
}
/* —— Side rail — Liquid Glass (iOS-style) —— */
.side-rail,
#sideRail{
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
border-radius: 28px !important;
box-shadow:
0 0 0 0.5px rgba(255,255,255,0.6) inset,
0 8px 32px rgba(15, 23, 42, 0.08),
0 2px 8px rgba(15, 23, 42, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
padding: 14px 10px;
transition: width .22s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .side-rail,
[data-theme="dark"] #sideRail{
background: rgba(22, 28, 42, 0.55) !important;
backdrop-filter: blur(40px) saturate(160%) !important;
-webkit-backdrop-filter: blur(40px) saturate(160%) !important;
box-shadow:
0 0 0 0.5px rgba(255,255,255,0.08) inset,
0 12px 40px rgba(0, 0, 0, 0.45),
0 2px 10px rgba(0, 0, 0, 0.25) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.side-rail-top{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-bottom: 12px;
flex-shrink: 0;
}
.side-brand{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 0 4px;
}
body.rail-expanded .side-brand{ justify-content: flex-start; }
.side-brand .brand-mark{
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 12px;
}
.side-brand-text{
display: none;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
body.rail-expanded .side-brand-text{ display: flex; }
.side-brand-text strong{
font-size: .9rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.side-brand-text span{
font-size: .62rem;
color: var(--desk-muted);
font-weight: 500;
line-height: 1.25;
white-space: normal;
max-width: 160px;
}
.side-toggle{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text);
border-radius: 14px;
padding: 0 12px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: .78rem;
width: 100%;
transition: background .15s ease, color .15s ease;
}
.side-toggle:hover{ background: rgba(10,132,255,.14); color: var(--primary); border-color: rgba(10,132,255,.2); }
[data-theme="dark"] .side-toggle{
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.9);
}
[data-theme="dark"] .side-toggle:hover{
background: rgba(10,132,255,.22);
color: #93c5fd;
border-color: rgba(10,132,255,.3);
}
.side-toggle svg{ width: 18px; height: 18px; flex-shrink: 0; }
.side-toggle-label{ display: none; }
body.rail-expanded .side-toggle{ justify-content: flex-start; }
body.rail-expanded .side-toggle-label{ display: inline; }
.side-rail-nav{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px 0;
scrollbar-width: thin;
min-height: 0;
}
/* Reset main-nav when inside rail */
.side-rail .main-nav,
.side-rail-nav .main-nav{
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
.side-rail .nav-group{
position: relative;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* —— Item tombol: tinggi tetap, ikon + label sejajar —— */
.side-rail .tab-btn,
.side-rail-nav .tab-btn{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center;
gap: 14px;
width: 100%;
height: var(--rail-item-h);
min-height: var(--rail-item-h);
max-height: var(--rail-item-h);
box-sizing: border-box;
border: none;
background: transparent;
color: var(--desk-muted);
border-radius: 12px;
padding: 0 10px 0 12px;
font-family: inherit;
font-size: .84rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
position: relative;
transition: background .15s ease, color .15s ease;
}
body.rail-expanded .side-rail .tab-btn,
body.rail-expanded .side-rail-nav .tab-btn{
justify-content: flex-start;
}
.side-rail .tab-btn svg,
.side-rail-nav .tab-btn svg{
width: 20px !important;
height: 20px !important;
min-width: 20px;
flex-shrink: 0;
display: block;
}
/* Label body — sembunyi saat ciut, tampil penuh saat expand */
.side-rail .nav-item-body{
display: none !important;
flex-direction: row;
align-items: center;
min-width: 0;
flex: 1 1 auto;
overflow: visible;
}
body.rail-expanded .side-rail .nav-item-body,
body.rail-expanded #sideRail .nav-item-body,
body.rail-expanded .side-rail .tab-btn .nav-item-body,
body.rail-expanded .side-rail .tab-btn.active .nav-item-body{
display: flex !important;
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
opacity: 1 !important;
visibility: visible !important;
color: inherit !important;
}
body.rail-expanded .side-rail .tab-btn .nav-item-title,
body.rail-expanded .side-rail .tab-btn.active .nav-item-title{
display: block !important;
opacity: 1 !important;
visibility: visible !important;
color: inherit !important;
}
body:not(.rail-expanded) .side-rail .nav-item-body,
body:not(.rail-expanded) .side-rail .nav-item-title,
body:not(.rail-expanded) .side-rail .side-label,
body:not(.rail-expanded) .side-rail .side-toggle-label,
body:not(.rail-expanded) .side-rail .side-brand-text{
display: none !important;
}
.side-rail .nav-item-title{
display: block !important;
font-size: .84rem !important;
font-weight: 600 !important;
color: inherit !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
}
.side-rail .nav-item-desc{ display: none !important; }
/* Pastikan item bisa diklik (di atas elemen lain) */
.side-rail, .side-rail-nav, .side-rail .main-nav, .side-rail .tab-btn{
pointer-events: auto !important;
}
.side-rail .tab-btn{
overflow: visible !important;
}
body.rail-expanded .side-rail .tab-btn{
padding: 0 12px 0 14px !important;
gap: 14px !important;
}
.side-rail .tab-btn .nav-badge{
position: absolute;
top: 6px;
right: 8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px !important;
line-height: 16px;
border-radius: 999px;
}
body.rail-expanded .side-rail .tab-btn .nav-badge{
position: static;
margin-left: auto;
flex-shrink: 0;
}
.side-rail .tab-btn:hover{
background: rgba(10,132,255,.08);
color: var(--primary);
}
.side-rail .tab-btn.active,
.side-rail .tab-btn[aria-current="page"]{
background: rgba(10,132,255,.14);
color: #fff;
}
body.rail-expanded .side-rail .tab-btn.active .nav-item-title,
body.rail-expanded .side-rail .tab-btn[aria-current="page"] .nav-item-title{
color: #fff !important;
}
[data-theme="dark"] body.rail-expanded .side-rail .tab-btn.active{
background: linear-gradient(135deg, #5b6cff, #7c5cfc);
color: #fff;
}
/* Submenu — indent rapi, tinggi konsisten */
/* Submenu vertikal — hanya saat expand + group open */
.side-rail .nav-dropdown,
#sideRailNavHost .nav-dropdown,
.side-rail nav.main-nav .nav-dropdown{
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
transform: none !important;
display: none !important;
flex-direction: column !important;
gap: 2px;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 2px 0 6px 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden !important;
z-index: 1;
}
body.rail-expanded .side-rail .nav-group.open > .nav-dropdown,
body.rail-expanded #sideRailNavHost .nav-group.open > .nav-dropdown{
display: flex !important;
}
.side-rail .nav-dropdown button,
#sideRailNavHost .nav-dropdown button{
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
height: 34px;
min-height: 34px;
border: none;
background: transparent;
text-align: left;
/* Sejajar dengan teks judul menu (setelah ikon) */
padding: 0 12px 0 46px !important;
border-radius: 10px;
font-family: inherit;
font-size: .78rem;
font-weight: 500;
color: var(--desk-muted);
cursor: pointer;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.side-rail .nav-dropdown button:hover,
.side-rail .nav-dropdown button.active-sub,
#sideRailNavHost .nav-dropdown button:hover,
#sideRailNavHost .nav-dropdown button.active-sub{
background: rgba(10,132,255,.10) !important;
color: var(--primary) !important;
}
.side-rail-foot{
margin-top: auto;
padding-top: 10px;
flex-shrink: 0;
border-top: 1px solid rgba(148,163,184,.12);
}
.side-foot-btn{
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
height: var(--rail-item-h);
border: none;
background: transparent;
color: var(--desk-muted);
border-radius: 12px;
padding: 0 12px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: .84rem;
}
body.rail-expanded .side-foot-btn{ justify-content: flex-start; }
.side-foot-btn:hover{ background: rgba(255,255,255,0.45); color: var(--primary); }
[data-theme="dark"] .side-foot-btn:hover{ background: rgba(255,255,255,0.08); color: #93c5fd; }
.side-foot-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
.side-label{ display: none; }
body.rail-expanded .side-label{ display: inline; }
/* Override gaya main-nav horizontal yang bocor ke side rail */
.side-rail nav.main-nav,
.side-rail-nav nav.main-nav,
#sideRailNavHost nav.main-nav,
#sideRailNavHost.side-rail-nav .main-nav{
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 4px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
overflow: visible !important;
}
.side-rail nav.main-nav .nav-group,
#sideRailNavHost .nav-group{
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important;
}
.side-rail nav.main-nav button,
.side-rail nav.main-nav .tab-btn,
#sideRailNavHost .tab-btn{
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
/* —— Main column —— */
.app-main{
flex: 1;
min-width: 0;
margin-left: calc(var(--rail-w) + 24px);
padding: 12px var(--desk-pad) 40px;
max-width: 100%;
transition: margin-left .22s ease;
}
body.rail-expanded .app-main{
margin-left: calc(var(--rail-w-exp) + 24px);
}
.app-main > .main-nav{ display: none !important; }
.app-main > .app-header,
.app-header{
display: flex !important;
align-items: center;
justify-content: flex-end; /* rata kanan di desktop */
gap: 12px;
flex-wrap: nowrap;
margin: 0 0 16px;
padding: 10px 18px;
background: var(--desk-card) !important;
border: 1px solid rgba(148,163,184,.12) !important;
border-radius: var(--desk-radius);
box-shadow: var(--desk-shadow-sm);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: sticky;
top: 12px;
z-index: 110;
width: 100%;
box-sizing: border-box;
}
.header-search{ display: none !important; }
.header-controls{
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: nowrap;
margin-left: auto;
width: auto;
max-width: 100%;
}
.user-pill, .control-group{
background: var(--desk-bg) !important;
border-color: transparent !important;
backdrop-filter: none !important;
}
.header-controls .theme-btn,
.header-controls .notif-btn{
flex-shrink: 0;
}
.app-main .card,
.app-main .panel,
.app-main .dash-card,
.tab .card{
background: var(--desk-card) !important;
border: 1px solid rgba(148,163,184,.12) !important;
border-radius: var(--desk-radius) !important;
box-shadow: var(--desk-shadow-sm) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.app-main .cards-grid,
.app-main .dash-grid,
#tab-dashboard .cards,
#tab-dashboard .sk-cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: clamp(12px, 1.5vw, 18px);
}
.app-main .tab{ max-width: min(1600px, 100%); }
}
@media (min-width: 1400px){
:root{
--rail-w-exp: 280px;
--desk-pad: 28px;
}
}
@media (min-width: 1800px){
:root{ --desk-pad: 36px; }
.app-main .tab{ max-width: 1760px; }
}
@media (min-width: 960px) and (max-width: 1199px){
:root{
--rail-w: 76px;
--rail-w-exp: 240px;
}
}
/* Desktop: panel Pengaturan lebih lebar & proporsional */
@media (min-width: 960px){
#settingsPanel.notif-panel,
#settingsPanel{
width: min(520px, 42vw) !important;
max-width: 560px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
top: max(72px, 10vh) !important;
max-height: min(84vh, calc(100dvh - 80px)) !important;
border-radius: 20px !important;
}
#settingsPanel .settings-panel-body{
padding: 16px 20px 22px !important;
}
#settingsPanel .notif-panel-head{
padding: 14px 20px !important;
font-size: .92rem !important;
}
}
/* Paksa label menu tampil di side-rail expanded */
@media (min-width: 960px){
body.rail-expanded .side-rail .nav-item-body,
body.rail-expanded #sideRail .nav-item-body,
body.rail-expanded #sideRailNavHost .nav-item-body{
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
body.rail-expanded .side-rail .nav-item-title,
body.rail-expanded #sideRail .nav-item-title,
body.rail-expanded #sideRailNavHost .nav-item-title,
body.rail-expanded .side-rail .tab-btn .nav-item-title,
body.rail-expanded .side-rail .nav-group > .tab-btn .nav-item-title{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: .84rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: inherit !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* ===== Desktop-only: settings panel center + wider; side-brand subtitle ===== */
@media (min-width: 960px) {
#settingsPanel.notif-panel,
#settingsPanel {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
width: min(560px, 92vw) !important;
max-width: 560px !important;
max-height: min(82vh, 720px) !important;
margin: 0 !important;
border-radius: 20px !important;
z-index: 9600 !important;
}
#settingsPanel .settings-panel-body {
max-height: min(68vh, 560px);
overflow-y: auto;
}
.side-brand-text span {
font-size: .62rem !important;
line-height: 1.3 !important;
white-space: normal !important;
max-width: 170px;
}
}
/* Side-rail: jangan tampilkan menu yang di-hide oleh applyBootUI */
@media (min-width: 960px) {
.side-rail .tab-btn.hidden,
#sideRail .tab-btn.hidden,
#sideRailNavHost .tab-btn.hidden,
.side-rail .nav-group.hidden,
#sideRailNavHost .nav-group.hidden,
.side-rail .main-admin-only.hidden,
#sideRailNavHost .main-admin-only.hidden {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
opacity: 0 !important;
}
}
/* notifBadge force visible when not .hidden */
#notifBadge:not(.hidden),
.notif-badge:not(.hidden){
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #ef4444 !important;
color: #fff !important;
font-size: .65rem !important;
font-weight: 700 !important;
line-height: 1;
z-index: 5;
}
/* Desktop: form set anggaran — scroll internal seperti mobile */
@media (min-width: 960px) {
html, body {
overflow-x: hidden;
overflow-y: auto !important;
height: auto !important;
min-height: 100%;
}
#mainContent.app:not(.hidden),
.app:not(.hidden) {
overflow: visible !important;
height: auto !important;
min-height: 100dvh !important;
}
.app-main {
overflow: visible !important;
height: auto !important;
}
/* Tabel set anggaran: area scroll internal (sama pola mobile) */
#tab-anggaran .panel .table-wrap {
max-height: min(60vh, 520px) !important;
overflow-x: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
}
/* —— Tombol ⓘ detail perubahan saldo transaksi —— */
:root{
--tx-info-size: 22px;
--tx-info-icon: 0.72rem;
--tx-info-gap: 8px;
}
.col-tx-info{
width: 32px !important;
min-width: 32px !important;
max-width: 36px !important;
padding-left: 4px !important;
padding-right: 4px !important;
text-align: center !important;
vertical-align: middle !important;
}
.tx-info-btn,
button.tx-info-btn{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: var(--tx-info-size);
height: var(--tx-info-size);
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--muted-light, #94a3b8);
font-size: var(--tx-info-icon);
font-weight: 700;
line-height: 1;
cursor: pointer;
vertical-align: middle;
flex-shrink: 0;
opacity: 0.75;
transition: color .15s ease, background .15s ease, opacity .15s ease;
-webkit-tap-highlight-color: transparent;
}
.tx-info-btn:hover,
.tx-info-btn:focus-visible{
color: var(--primary, #0a84ff);
background: rgba(10, 132, 255, 0.12);
opacity: 1;
outline: none;
}
.tx-info-btn:active{
opacity: 0.85;
transform: scale(0.94);
}
/* Desktop: ikon lebih pudar sampai hover baris */
@media (min-width: 960px){
#tblTransaksi tbody tr .tx-info-btn{
opacity: 0.45;
}
#tblTransaksi tbody tr:hover .tx-info-btn,
#tblTransaksi tbody tr:focus-within .tx-info-btn{
opacity: 0.9;
}
#tblTransaksi tbody tr .tx-info-btn:hover,
#tblTransaksi tbody tr .tx-info-btn:focus-visible{
opacity: 1;
}
}
/* Mobile card: grup kanan (nominal + ⓘ + ⋮) */
.list-card-end{
display: flex;
align-items: center;
gap: var(--tx-info-gap);
flex-shrink: 0;
margin-left: 8px;
}
.list-card-end .list-card-amount{
margin: 0;
}
.list-card-end .tx-info-btn.list-card-info{
order: 2;
}
.list-card-end .list-card-kebab{
order: 3;
}
.list-card-top{
align-items: flex-start;
}