/* ===== Finbase UI v2 — palet buku besar, desktop sidebar / mobile app-like ===== */ /* Tema: default gelap-hijau; data-theme="light" di untuk terang (disimpan di localStorage). */ :root{--bg:#0F1A14;--surface:#16231C;--surface-2:#1D2C24;--ink:#E4ECE7;--ink-2:#A8B6AE;--ink-3:#74837B;--line:#2C3B33;--line-2:#22302A; --accent:#4DBB82;--accent-ink:#0E1A14;--accent-soft:#1B3A2B;--out:#E0954B;--out-soft:#3B2A16;--warn:#E6B45A;--warn-soft:#3B3116;--info:#8FB0F0;--info-soft:#1E2A40; --side:#0B1410;--side-ink:#C9D6CE;--side-hi:#1B3A2B;--danger:#E5534B;--radius:12px;--shadow:none;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);color-scheme:dark} [data-theme=light]{--bg:#F3F6F3;--surface:#FFFFFF;--surface-2:#EAF0EB;--ink:#16221C;--ink-2:#4B5A52;--ink-3:#7C8A83;--line:#D9E1DB;--line-2:#EAF0EB; --accent:#1E7A4C;--accent-ink:#fff;--accent-soft:#DDEFE4;--out:#B5671C;--out-soft:#F6E8D6;--warn:#8a5a00;--warn-soft:#FBF1D6;--info:#3B5A9A;--info-soft:#E3E9F5; --side:#14231D;--side-ink:#C9D6CE;--side-hi:#1F3A2C;--danger:#B3261E;--shadow:0 1px 2px rgba(20,35,29,.06),0 4px 14px rgba(20,35,29,.06);color-scheme:light} *{box-sizing:border-box}html{-webkit-text-size-adjust:100%}[hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased} a{color:var(--accent)}button{font:inherit} h1,h2,h3{text-wrap:balance} .ic{width:22px;height:22px;fill:currentColor;flex:none} /* ---- shell ---- */ .shell{display:flex;min-height:100vh} .sidebar{width:244px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:none} .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;color:#fff;font-weight:600;overflow:hidden;white-space:nowrap} .brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;letter-spacing:-.02em;flex:none} .logo{width:36px;height:36px;flex:none;display:block}.brand.big .logo{width:56px;height:56px} .brand.big{justify-content:center;font-size:22px;margin-bottom:4px;color:var(--ink)}.brand.big .brand-mark{width:44px;height:44px;font-size:18px} .sidebar nav{flex:1;overflow-y:auto;padding:6px 10px} .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--side-ink);text-decoration:none;font-size:14px} .nav-item:hover{background:var(--side-hi);color:#fff}.nav-item.aktif{background:var(--accent);color:#fff} .nav-item.sub{padding-left:26px;font-size:13.5px}.nav-group{margin-top:8px} .nav-group-title{display:block;padding:10px 12px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .sidebar-foot{padding:14px 18px;border-top:1px solid var(--side-hi);display:flex;justify-content:space-between;align-items:center;gap:8px} .who{display:flex;flex-direction:column;font-size:13px;line-height:1.3;text-decoration:none}.who strong{color:#fff}.who span{color:var(--ink-3)} .btn-link{background:none;border:0;color:var(--side-ink);cursor:pointer;text-decoration:underline;padding:6px} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5} .topbar h1{margin:0;font-size:20px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-back{display:none;font-size:28px;line-height:1;text-decoration:none;color:var(--ink);width:36px;height:36px;border-radius:50%;text-align:center} .content{padding:22px 24px;display:grid;gap:16px;align-content:start} .foot{padding:12px 24px;color:var(--ink-3);font-size:12.5px} .banner-bantuan{background:var(--warn-soft);color:var(--warn);padding:8px 16px;font-size:13.5px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap} /* ---- kartu / tile ---- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)} .card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap} .card h2{margin:0;font-size:16px;font-weight:600}.card h3{font-size:14px;margin:14px 0 6px;color:var(--ink-2)} .card.center{text-align:center;padding:40px 18px}.kode{font-size:48px;font-weight:700;color:var(--ink-3)} .card.danger{border-color:var(--out)}.card.perhatian{border-left:4px solid var(--out)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)} .tile-hero{background:var(--side);color:#fff;border-color:var(--side)} .tile-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.tile-hero .tile-label{color:var(--side-ink)} .tile-value{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.tile-hero .tile-value{color:#fff} .in{color:var(--accent)}.out{color:var(--out)}.telat{color:var(--out)}.segera{color:var(--warn)} /* ---- tabel ---- */ .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}table{border-collapse:collapse;width:100%;font-size:14px} th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line-2);vertical-align:top} th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px} td.aksi{white-space:nowrap;text-align:right}td.sub{padding-left:22px}.nowrap{white-space:nowrap} tr.void td{color:var(--ink-3);text-decoration:line-through}tr.void td .pill{text-decoration:none} tr.bagian td{background:var(--surface-2);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:600} tr.kelompok td{font-weight:600}tr.total td{font-weight:600;border-top:2px solid var(--line)}tr.total.besar td{font-size:15px;background:var(--surface-2)} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--accent);vertical-align:middle} .muted{color:var(--ink-3)}.small{font-size:13px}.plain{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px} .pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);text-decoration:none;white-space:nowrap} .pill.ok{background:var(--accent-soft);color:var(--accent)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.telat{background:var(--out-soft);color:var(--out)}.pill.segera{background:var(--warn-soft);color:var(--warn)} /* ---- tombol & form ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;font-weight:500} .btn:hover{border-color:var(--ink-3)}.btn-sm{min-height:32px;padding:4px 10px;font-size:13px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-block{width:100%;margin-top:8px;min-height:48px;font-size:16px} .btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .form label,.filter label,.inline-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2)} .form input,.form select,.form textarea,.filter input,.filter select,.inline-form input,.login-card input{min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);min-width:0;width:100%} .form input[readonly]{background:var(--surface-2)}input[type=color]{padding:2px;height:44px}input[type=file]{padding:8px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}.grid2.top{align-items:start}.span2{grid-column:span 2} .aksi-form{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}.uang{text-align:right;font-variant-numeric:tabular-nums}.uang.besar{font-size:24px;font-weight:650;min-height:56px} .filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.filter .spacer{flex:1}.filter label{flex:1 1 140px} .tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto}.tab{padding:10px 16px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px;white-space:nowrap;text-decoration:none;color:var(--ink);background:var(--surface)} .tab input{display:none}.tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .inline{display:inline}.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.inline-form label{flex:1} .dl{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;margin:0}.dl dt{color:var(--ink-3);font-size:13px}.dl dd{margin:0} .flash{padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);transition:opacity .4s}.flash.hilang{opacity:0;pointer-events:none} .flash-error{background:var(--out-soft);border-color:var(--out);color:var(--out)}.flash-ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .bars{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:8px;margin-bottom:20px}.bar-col{flex:1;max-width:64px;display:flex;align-items:flex-end;gap:2px;height:100%;position:relative} .bar{flex:1;border-radius:3px 3px 0 0;min-height:2px}.bar.in{background:var(--accent)}.bar.out{background:var(--out)} .bar-col span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--ink-3)} .meter{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}.meter-bar{height:100%;background:var(--accent)}.meter-bar.warn{background:#D99A2B}.meter-bar.over{background:var(--out)} input.plafon{width:150px;padding:6px 8px;min-height:36px;font-size:14px} .menu-laporan{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px} .menu-laporan a{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)} .menu-laporan a:hover{border-color:var(--accent);background:var(--accent-soft)}.menu-laporan span{font-size:12.5px;color:var(--ink-3)} .matriks th{text-align:center}.matriks td.center{text-align:center}.matriks input[type=checkbox]{width:20px;height:20px} pre.json{white-space:pre-wrap;word-break:break-all;font-size:11px;max-width:420px;margin:4px 0;color:var(--ink-2)} /* ---- login ---- */ .login-body{display:grid;place-items:center;min-height:100vh;padding:16px;margin:0;background:var(--bg)} .login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)} .login-card label{font-size:13px;color:var(--ink-2);margin-top:8px} /* ---- daftar kartu (mobile) ---- */ .list-cards{display:none} /* ---- bottom nav / sheet / fab ---- */ .bottom-nav{display:none} .sheet{position:fixed;inset:0;z-index:40;pointer-events:none}.sheet.open{pointer-events:auto} .sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s}.sheet.open .sheet-backdrop{opacity:1} .sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;padding:8px 16px calc(16px + var(--sab));transform:translateY(100%);transition:transform .25s;max-height:80vh;overflow-y:auto} .sheet.open .sheet-panel{transform:none}.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 14px} .sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:12px;text-align:center;background:var(--surface-2)} .sheet-grid .ic{width:24px;height:24px;color:var(--accent)}.sheet-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)} .aksi-cepat{display:flex;gap:8px;flex-wrap:wrap}.aksi-cepat .btn{flex:1} details.lipat>summary{list-style:none;cursor:pointer}details.lipat>summary::-webkit-details-marker{display:none}details.lipat>summary .btn{width:100%} /* ===== MOBILE (≤ 820px): tampilan aplikasi ===== */ @media (max-width:820px){ .sidebar,.foot{display:none} .topbar{padding:calc(10px + var(--sat)) 14px 10px}.topbar h1{font-size:18px} body[data-halaman]:not([data-halaman="/"]) .topbar-back{display:grid;place-items:center} .content{padding:14px 14px calc(88px + var(--sab));gap:12px} .card{padding:14px;border-radius:14px}.tile{padding:12px 14px}.tile-value{font-size:22px} .grid2,.grid3{grid-template-columns:1fr}.span2{grid-column:span 1}.dl{grid-template-columns:1fr}.dl dt{margin-top:6px} .filter{gap:8px}.filter label{flex:1 1 45%}.filter .btn{flex:1 1 45%} .aksi-form .btn{flex:1 1 100%;min-height:48px;font-size:16px} .bottom-nav{display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--sab));align-items:end} .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-3);text-decoration:none;background:none;border:0;padding:6px 2px;min-height:52px;justify-content:center} .bottom-nav a.aktif{color:var(--accent)}.bottom-nav .fab{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;margin:0 auto -6px;box-shadow:0 6px 16px rgba(30,122,76,.4);justify-content:center} .bottom-nav .fab .ic{width:30px;height:30px} /* tabel → kartu */ .tbl.kartu table,.tbl.kartu thead,.tbl.kartu tbody,.tbl.kartu tr,.tbl.kartu td{display:block} .tbl.kartu thead{display:none}.tbl.kartu tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface)} .tbl.kartu td{border:0;padding:3px 0;text-align:left;white-space:normal}.tbl.kartu td.num{text-align:left} .tbl.kartu td[data-l]::before{content:attr(data-l) ": ";color:var(--ink-3);font-size:12px} .tbl.kartu td.judul{font-weight:600;font-size:15px}.tbl.kartu td.aksi{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px} .tbl.kartu td.aksi .btn{flex:1}.tbl.kartu td:empty{display:none} .list-cards{display:grid;gap:10px}.list-cards+.tbl{display:none} .item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);align-items:center} .item .judul{font-weight:600;font-size:15px}.item .sub{font-size:12.5px;color:var(--ink-3);grid-column:1}.item .nilai{grid-row:1/3;grid-column:2;font-weight:650;font-variant-numeric:tabular-nums;font-size:16px;text-align:right} .item.void{opacity:.55;text-decoration:line-through} .sheet-open{overflow:hidden} } @media (max-width:420px){.sheet-grid{grid-template-columns:repeat(3,1fr)}} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---- modal ---- */ .tema-btn{background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;display:inline-grid;place-items:center;color:var(--ink);cursor:pointer} .tema-btn .ic{width:20px;height:20px} dialog.modal{border:0;padding:0;background:transparent;max-width:none;width:100%;max-height:100vh} dialog.modal::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(2px)} dialog.modal>.modal-box{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:min(560px,calc(100vw - 32px));margin:auto;padding:18px 20px 20px;max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)} dialog.modal.lebar>.modal-box{width:min(760px,calc(100vw - 32px))} .modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.modal-head h2{margin:0;font-size:17px;font-weight:600} .modal-close{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;width:36px;height:36px;border-radius:50%}.modal-close:hover{background:var(--surface-2)} .modal-box .form label,.modal-box label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2)} .modal-box input,.modal-box select,.modal-box textarea{min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);width:100%} .modal-box .aksi-form{margin-top:16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} #modal-konfirmasi p{margin:0 0 4px;font-size:15px} @media (max-width:820px){ dialog.modal{margin:0;height:100vh;height:100dvh}dialog.modal>.modal-box{position:fixed;left:0;right:0;bottom:0;width:100%;margin:0;border-radius:18px 18px 0 0;max-height:92dvh;padding-bottom:calc(20px + var(--sab));animation:naik .22s ease-out} .modal-box .aksi-form .btn{flex:1;min-height:48px} @keyframes naik{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}} } /* ---- tabel lebar: scroll di dalam kotak, bukan melebarkan halaman ---- */ .content>*,.card,.grid2>*,.grid3>*{min-width:0} .tbl{max-width:100%} .matriks{min-width:640px}.matriks th:first-child,.matriks td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;min-width:180px;box-shadow:2px 0 0 var(--line-2)} .matriks th{position:sticky;top:0;background:var(--surface-2)} .matriks th:first-child{z-index:2;background:var(--surface-2)} @media (max-width:820px){.tbl:not(.kartu){margin:0 -14px;padding:0 14px;width:calc(100% + 28px);max-width:none}.tbl:not(.kartu) table{min-width:560px}.matriks td .small{display:block}} /* ---- tombol tema tambahan ---- */ .topbar .tema-btn{background:var(--surface-2);border-color:var(--line)} .sidebar-aksi{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .tema-btn.tema-teks{width:auto;height:auto;border-radius:999px;padding:5px 10px 5px 8px;gap:6px;color:var(--side-ink);border-color:var(--side-hi);font-size:12.5px} .tema-btn.tema-kotak{width:auto;height:auto;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;background:var(--surface-2);border:0;color:var(--ink);font-size:12px} .tema-btn.tema-kotak .ic{width:24px;height:24px;color:var(--accent)} .form label.cek{flex-direction:row;align-items:center;gap:10px;font-size:14px;color:var(--ink)}.form label.cek input{width:22px;height:22px;min-height:0} /* ---- saklar ---- */ .saklar-baris{display:flex;justify-content:space-between;align-items:center;gap:16px} .saklar{position:relative;display:inline-block;width:52px;height:30px;flex:none;cursor:pointer}.saklar input{opacity:0;width:0;height:0;position:absolute} .saklar-track{position:absolute;inset:0;background:var(--ink-3);border-radius:999px;transition:background .2s} .saklar-track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .saklar input:checked+.saklar-track{background:var(--accent)}.saklar input:checked+.saklar-track::after{transform:translateX(22px)} .saklar input:focus-visible+.saklar-track{outline:2px solid var(--accent);outline-offset:2px} /* ---- flash sebagai toast melayang (terlihat di posisi gulir mana pun) ---- */ .content>.flash[data-auto]{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + var(--sat));z-index:60;width:min(560px,calc(100vw - 32px));box-shadow:0 8px 28px rgba(0,0,0,.35);animation:toast-masuk .25s ease-out;display:flex;align-items:center;gap:10px} .content>.flash[data-auto]::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .content>.flash.hilang{opacity:0;transform:translate(-50%,-8px);pointer-events:none} @keyframes toast-masuk{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}} @media (max-width:820px){.content>.flash[data-auto]{top:auto;bottom:calc(84px + var(--sab))}.content>.flash.hilang{transform:translate(-50%,8px)}@keyframes toast-masuk{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}} /* ---- popup rahasia sekali tampil ---- */ .rahasia{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:8px;background:var(--surface-2)} .rahasia .label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .rahasia code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;letter-spacing:.04em;word-break:break-all;user-select:all} .btn.tersalin{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}