/* ===== Web Akunting - Gaya Tampilan ===== */
:root{
  /* Tema Nexafin — navy (akuntansi) & emerald (digital) */
  --biru:#0f2a47; --biru-muda:#1b426a; --aksen:#0fb37f; --aksen2:#0a8a61;
  --merah:#c53030; --kuning:#b7791f;
  --bg:#f4f6f9; --panel:#ffffff; --garis:#e2e8f0; --garis2:#edf2f7;
  --teks:#1a202c; --teks2:#4a5568; --teks3:#718096;
  --radius:10px; --bayang:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --bayang2:0 4px 16px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--teks);font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer}
a{color:var(--biru-muda);text-decoration:none}
input,select,textarea{font-family:inherit;font-size:14px}

/* ---- Layar Login ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#0f2a47 0%,#0d3a55 45%,#0a8a61 100%)}
.auth-card{background:#fff;border-radius:16px;box-shadow:var(--bayang2);width:100%;max-width:410px;padding:36px 32px}
.auth-card h1{margin:0 0 4px;font-size:24px;color:var(--biru)}
.auth-card .sub{color:var(--teks3);margin:0 0 24px;font-size:13px}
.auth-tabs{display:flex;gap:6px;margin-bottom:20px;background:var(--garis2);padding:4px;border-radius:10px}
.auth-tabs button{flex:1;border:none;background:transparent;padding:9px;border-radius:7px;font-weight:600;color:var(--teks2)}
.auth-tabs button.aktif{background:#fff;color:var(--biru);box-shadow:var(--bayang)}
.brand-logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--biru),var(--aksen));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:24px;margin-bottom:16px}

/* ---- Form ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--teks2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:8px;background:#fff;transition:border .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--biru-muda);box-shadow:0 0 0 3px rgba(44,82,130,.12)}
.btn{background:var(--biru);color:#fff;border:none;padding:10px 18px;border-radius:8px;font-weight:600;transition:background .15s}
.btn:hover{background:var(--biru-muda)}
.btn.blok{width:100%;padding:11px}
.btn.hijau{background:var(--aksen)}.btn.hijau:hover{background:var(--aksen2)}
.btn.merah{background:var(--merah)}
.btn.abu{background:#fff;color:var(--teks2);border:1px solid var(--garis)}
.btn.abu:hover{background:var(--garis2)}
.btn.kecil{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.pesan{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
.pesan.err{background:#fed7d7;color:#822727}
.pesan.ok{background:#c6f6d5;color:#22543d}

/* ---- Tata letak aplikasi ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--biru);color:#cbd5e0;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0}
.sidebar .logo{padding:20px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .logo .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#fff,#cbd5e0);color:var(--biru);display:flex;align-items:center;justify-content:center;font-weight:800}
.sidebar .logo b{color:#fff;font-size:16px}
.nav{flex:1;overflow-y:auto;padding:10px 0}
.nav .grp{padding:14px 20px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#718096}
.nav .grp-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;color:#8ea3bd;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:13px 18px 6px;font-weight:700}
.nav .grp-btn:hover{color:#e2e8f0}
.nav .grp-caret{font-size:10px;transition:transform .18s;opacity:.65}
.nav .grp-btn:not(.buka) .grp-caret{transform:rotate(-90deg)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 20px;color:#cbd5e0;font-size:13.5px;border-left:3px solid transparent}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.aktif{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--aksen2);font-weight:600}
.nav a .em{width:18px;text-align:center}
.sidebar .foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#a0aec0}

.main{margin-left:230px;flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--garis);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar h2{margin:0;font-size:18px;color:var(--biru)}
.topbar .kanan{display:flex;align-items:center;gap:14px}
.badge{background:var(--garis2);color:var(--teks2);padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge.admin{background:#fefcbf;color:#744210}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--biru-muda);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.content{padding:24px 26px;flex:1}

/* ---- Kartu & panel ---- */
.card{background:var(--panel);border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--bayang);margin-bottom:20px}
.card .hd{padding:14px 18px;border-bottom:1px solid var(--garis);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.card .hd h3{margin:0;font-size:15px;color:var(--biru)}
.card .bd{padding:18px}
.card .bd.nopad{padding:0}
.grid{display:grid;gap:16px}
.grid.k3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.k4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.stat{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--bayang)}
.stat .lbl{font-size:12px;color:var(--teks3);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.stat .val{font-size:22px;font-weight:700;margin-top:6px;color:var(--biru)}
.stat .val.hijau{color:var(--aksen)}.stat .val.merah{color:var(--merah)}
.stat .sub{font-size:12px;color:var(--teks3);margin-top:3px}

/* ---- Tabel ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;padding:10px 12px;background:var(--garis2);color:var(--teks2);font-weight:600;border-bottom:1px solid var(--garis);position:sticky;top:0}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--garis2)}
.tbl tr:hover td{background:#fafcff}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.tbl .kode{color:var(--teks3);font-family:"Consolas",monospace;font-size:12.5px}
.tbl tfoot td,.tbl tr.total td{font-weight:700;background:#f7fafc;border-top:2px solid var(--garis)}
.tbl-wrap{overflow-x:auto}
.subhead td{background:#eef2f7;font-weight:700;color:var(--biru);font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}
.indent{padding-left:26px !important}

.laporan{max-width:860px}
.laporan .judul{text-align:center;margin-bottom:4px}
.laporan .judul h3{margin:0;color:var(--biru);font-size:17px}
.laporan .judul .p{color:var(--teks3);font-size:13px}
.rp{font-variant-numeric:tabular-nums}
.pos{color:var(--aksen)} .neg{color:var(--merah)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600}
.chip.baik{background:#c6f6d5;color:#22543d}.chip.buruk{background:#fed7d7;color:#822727}
.chip.aset{background:#e6fffa;color:#234e52}.chip.beban{background:#fefcbf;color:#744210}

/* baris jurnal input */
.jline{display:grid;grid-template-columns:2.4fr 1.2fr 1.2fr 1.6fr auto;gap:8px;margin-bottom:8px;align-items:center}
.jline .del{background:#fff;border:1px solid var(--garis);color:var(--merah);border-radius:7px;width:34px;height:36px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.toolbar .field{margin:0}
.muted{color:var(--teks3);font-size:13px}
.right{text-align:right}
.mt{margin-top:14px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
table.mini td{padding:4px 8px}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:12px;box-shadow:var(--bayang2);max-width:560px;width:100%;max-height:90vh;overflow:auto}
.modal .hd{padding:16px 20px;border-bottom:1px solid var(--garis);display:flex;justify-content:space-between;align-items:center}
.modal .hd h3{margin:0;color:var(--biru)}
.modal .bd{padding:20px}
.x{background:none;border:none;font-size:22px;color:var(--teks3);cursor:pointer;line-height:1}

@media(max-width:820px){
  .sidebar{width:60px}.sidebar .logo b,.nav .grp,.nav .grp-btn,.nav a span.t,.sidebar .foot{display:none}
  .nav .nav-body[hidden]{display:block!important}
  .nav a{justify-content:center;padding:12px 0}.main{margin-left:60px}
  .jline{grid-template-columns:1fr}
}
.hide{display:none !important}
.loader{padding:40px;text-align:center;color:var(--teks3)}

/* ---- Pemilih buku klien (multi-book) ---- */
.book-switch{display:flex;align-items:center;gap:6px;background:var(--garis2);border:1px solid var(--garis);border-radius:9px;padding:3px 8px}
.book-switch .bs-ic{font-size:15px;line-height:1}
.book-switch select{border:none;background:transparent;font-weight:600;color:var(--biru);font-size:13px;max-width:230px;padding:4px 2px;cursor:pointer}
.book-switch select:focus{outline:none}
.book-banner{background:linear-gradient(135deg,rgba(15,42,71,.06),rgba(15,179,127,.10));border:1px solid var(--garis);border-left:4px solid var(--aksen);border-radius:9px;padding:9px 14px;margin-bottom:14px;font-size:13.5px;color:var(--teks)}
@media(max-width:640px){.book-switch select{max-width:130px}}

/* ---- Kolaborasi jurnal: lampiran, komentar, drill-down ---- */
.att-chip{display:inline-flex;align-items:center;gap:6px;background:var(--garis2);border:1px solid var(--garis);border-radius:20px;padding:3px 10px;font-size:12px;margin:2px 4px 2px 0}
.att-chip.baru{background:#e6f9f1;border-color:var(--aksen)}
.att-chip button{background:none;border:none;color:var(--merah);font-size:15px;cursor:pointer;padding:0 2px;line-height:1}
.att-chip a{font-size:12px}
.jkom{padding:10px 14px;border-top:1px dashed var(--garis);background:var(--garis2)}
.kom-list{display:flex;flex-direction:column;gap:6px}
.kom-item{background:#fff;border:1px solid var(--garis);border-radius:8px;padding:6px 10px;font-size:13px}
.kom-item.tolak{border-left:3px solid var(--merah)}
.kom-in{padding:8px 10px;border:1px solid var(--garis);border-radius:8px}
tr.drill{cursor:pointer}
tr.drill:hover{background:var(--garis2)}