:root{
  --bg:#F7F6F2; --card:#FFFFFF; --cream:#F1EEE6; --line:#E3DED2;
  --ink:#1D1F24; --ink-soft:#626873; --navy:#1F2A37; --accent:#8A6A2F;
  --green:#2F6B4F; --green-bg:#E7F2EB; --red:#A5433A; --red-bg:#FBEAE8;
  --amber:#8A5A0B; --amber-bg:#FDF3DC; --blue:#2F5F8A; --blue-bg:#E6EFF7;
  --radius:10px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Segoe UI",Inter,Arial,sans-serif; font-size:14px; }
a{ color:var(--blue); }
.hint{ color:var(--ink-soft); font-size:12px; font-weight:400; }
.muted{ color:var(--ink-soft); }
.nowrap{ white-space:nowrap; }
.pos{ color:var(--green); } .neg{ color:var(--red); }
.hint.ok{ color:var(--green); } .warn-text{ color:var(--amber) !important; font-weight:600; }

/* ---- Login ---- */
.login-bg{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
.login-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:30px; width:100%; max-width:360px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.login-logo{ width:96px; height:96px; display:block; margin:0 auto 10px; }
.login-card h1{ font-size:19px; color:var(--navy); text-align:center; margin:0; }
.login-sub{ text-align:center; color:var(--ink-soft); font-size:12px; margin:4px 0 18px; }
.login-card label{ font-size:12px; color:var(--ink-soft); display:block; margin:10px 0 4px; }
.login-card input{ width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font-size:15px; }

/* ---- Buttons ---- */
.btn-primary,.btn-secondary{ display:inline-block; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; border:1px solid var(--navy); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-secondary{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn-primary:hover{ opacity:.92; } .btn-secondary:hover{ background:var(--cream); }
.btn-block{ width:100%; margin-top:18px; padding:11px; }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn-danger{ background:var(--red); color:#fff; border:none; padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.adv-btn{ padding:8px 13px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; display:inline-block; white-space:nowrap; }
.adv-btn.primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.chip{ border:1px solid var(--line); background:var(--cream); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; color:var(--navy); }
.chip:hover{ background:var(--navy); color:#fff; }

/* ---- Alerts ---- */
.alert-error,.alert-ok,.alert-warn,.alert-info{ border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:12px; line-height:1.45; }
.alert-error{ background:var(--red-bg); color:var(--red); border:1px solid #E8C4BF; }
.alert-ok{ background:var(--green-bg); color:var(--green); border:1px solid #BFDCCB; }
.alert-warn{ background:var(--amber-bg); color:var(--amber); border:1px solid #F0D9A8; }
.alert-info{ background:var(--blue-bg); color:var(--blue); border:1px solid #C6D8EA; }
.alert-error ul{ margin:4px 0 0; padding-left:18px; }

/* ---- Topbar ---- */
.topbar{ display:flex; align-items:center; gap:18px; background:var(--card); border-bottom:1px solid var(--line); padding:8px 22px; position:sticky; top:0; z-index:20; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--navy); font-weight:800; letter-spacing:.5px; }
.brand img{ height:36px; width:36px; }
.mainnav{ display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.mainnav a{ padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.mainnav a.active,.mainnav a:hover{ background:var(--cream); color:var(--navy); }
.userbox{ display:flex; align-items:center; gap:10px; font-size:13px; }
.userbox .uname{ font-weight:700; color:var(--navy); }
.userbox .urole{ background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:1px 9px; color:var(--ink-soft); font-size:12px; }
.userbox .akun{ color:var(--navy); text-decoration:none; font-weight:600; }
.userbox .logout{ color:var(--red); text-decoration:none; font-weight:600; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:8px; font-size:18px; padding:4px 10px; cursor:pointer; }

.content{ max-width:1400px; margin:0 auto; padding:20px 22px 60px; }
.page-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.page-title{ font-size:21px; color:var(--navy); margin:0; }
.page-head .page-title{ margin:0; }
.month-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
form.inline{ display:inline; margin:0; }

/* ---- Cards ---- */
.summary-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
.summary-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.summary-card .label{ font-size:12px; color:var(--ink-soft); line-height:1.3; }
.summary-card .value{ font-size:19px; font-weight:700; color:var(--navy); margin-top:4px; }
.summary-card .value.pos{ color:var(--green); } .summary-card .value.neg{ color:var(--red); }
.summary-card .delta{ font-size:12px; margin-top:3px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.card-head h2{ font-size:15.5px; color:var(--navy); margin:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-2 > .card{ margin-bottom:0; }
.grid-2 + .card, .grid-2 + .grid-2{ margin-top:14px; }

/* ---- Forms ---- */
input,select,textarea{ font-family:inherit; }
.form-stack label{ display:block; font-size:12px; color:var(--ink-soft); margin:10px 0 4px; }
.form-stack input,.form-stack select,.form-stack textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.form-stack button{ margin-top:14px; }
.in-sm{ padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px; max-width:100%; }
.in-num{ width:80px; padding:8px; border:1px solid var(--line); border-radius:8px; }
label.check{ display:inline-flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; white-space:nowrap; }
label.check input{ width:16px; height:16px; accent-color:var(--navy); }
label.radio{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; margin-right:10px; cursor:pointer; }
.tip{ display:inline-block; width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%; background:var(--cream); color:var(--ink-soft); font-size:10px; cursor:help; }

/* Form arus kas */
.kas-form .f label{ display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; font-weight:600; }
.kas-form .f input:not([type=checkbox]):not([type=radio]),.kas-form .f select{ width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; background:#fff; min-height:38px; }
.kas-form .f input:focus,.kas-form .f select:focus{ outline:2px solid #C9B98F; border-color:#C9B98F; }
.kf-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px 12px; }
.f-tgl{ grid-column:span 2; } .f-bln{ grid-column:span 2; } .f-bundle{ grid-column:span 2; } .f-kode{ grid-column:span 3; } .f-sub{ grid-column:span 3; }
.f-vendor{ grid-column:span 3; } .f-barang{ grid-column:span 4; } .f-qty{ grid-column:span 1; } .f-kamar{ grid-column:span 1; } .f-nominal{ grid-column:span 3; }
.f-nominal input{ font-weight:700; font-size:15px !important; text-align:right; }
.kf-penyewa{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px 12px; margin-top:12px; padding:12px; background:#FBFAF6; border:1px dashed var(--line); border-radius:8px; }
.kf-penyewa[hidden],.kf-penyewa [hidden]{ display:none !important; }
.f-pnama{ grid-column:span 4; } .f-pbaru{ grid-column:span 2; display:flex; flex-direction:column; gap:6px; justify-content:flex-end; } .f-per{ grid-column:span 5; } .f-pax{ grid-column:span 1; }
.per-row{ display:flex; align-items:center; gap:6px; }
.per-row span{ color:var(--ink-soft); font-size:12px; }
.quick-per{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.depo-arah{ margin-top:5px; }
.depo-arah[hidden]{ display:none; }
.pstatus{ font-size:11.5px; margin-top:3px; min-height:14px; }
.pstatus.ok{ color:var(--green); }
.ac-wrap{ position:relative; }
.ac-list{ position:absolute; left:0; right:0; top:100%; z-index:30; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.1); max-height:300px; overflow:auto; }
.ac-list[hidden]{ display:none; }
.ac-item{ padding:8px 10px; cursor:pointer; border-bottom:1px solid var(--cream); font-size:13px; }
.ac-item:hover,.ac-item.on{ background:var(--cream); }
.ac-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.kf-lanjut{ margin-top:10px; }
.kf-lanjut summary{ cursor:pointer; font-size:12.5px; color:var(--navy); font-weight:600; }
.kf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.kf-actions{ display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }

/* ---- Filter ---- */
.filter-bar{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:10px; }
.filter-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filter-row .grow{ flex:1; min-width:200px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tabs a{ padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; }
.tabs a.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---- Tables ---- */
.table-wrap{ overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; }
.card .table-wrap{ border:none; margin:0; }
table.list{ width:100%; border-collapse:collapse; background:var(--card); }
table.list thead th{ background:var(--cream); text-align:left; font-size:11.5px; color:var(--navy); padding:9px 8px; white-space:nowrap; position:sticky; top:0; }
table.list tbody td,table.list tfoot td{ padding:7px 8px; font-size:13px; border-top:1px solid var(--line); vertical-align:top; }
table.list tfoot td{ background:#FBFAF6; }
table.list tbody tr:hover{ background:#FCFBF7; }
table.list .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kas-table td.barang{ min-width:220px; }
.kas-table td.saldo{ color:var(--navy); font-weight:600; }
.row-awal td{ background:#FBFAF6; color:var(--ink-soft); font-style:italic; }
.row-warn td{ background:#FFFBEF; }
.sub-info{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.dot-info{ color:var(--amber); font-weight:900; }
.empty{ text-align:center; color:var(--ink-soft); padding:22px !important; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; text-decoration:none; }
.badge.warn{ background:var(--amber-bg); color:var(--amber); border:1px solid #F0D9A8; }
.badge.info{ background:var(--blue-bg); color:var(--blue); }
.badge.ok{ background:var(--green-bg); color:var(--green); }
.badge.off{ background:#EEE; color:#777; }
.kode{ display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.3px; }
.kode-masuk{ background:var(--green-bg); color:var(--green); }
.kode-keluar{ background:var(--red-bg); color:var(--red); }
.kode-deposit{ background:var(--blue-bg); color:var(--blue); }
.actions{ display:flex; gap:5px; white-space:nowrap; }
.actions form{ margin:0; }
.icon-btn{ width:27px; height:27px; border-radius:7px; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; text-decoration:none; font-size:13px; }
.icon-btn.edit{ background:#B7863A; } .icon-btn.del{ background:#B4574E; } .icon-btn.view{ background:#3F7FBF; }
.kode-rekap{ display:flex; flex-wrap:wrap; gap:8px; }
.kr-item{ display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink); font-size:13px; }
.kr-item:hover{ background:var(--cream); }
.kr-n{ color:var(--ink-soft); font-size:12px; }
ul.log{ margin:0; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.7; }

/* ---- Laba Rugi ---- */
table.lr{ width:100%; border-collapse:collapse; }
table.lr th{ text-align:right; font-size:12px; color:var(--ink-soft); padding:8px 10px; border-bottom:2px solid var(--line); white-space:nowrap; }
table.lr th:first-child{ text-align:left; }
table.lr td{ padding:7px 10px; border-bottom:1px solid var(--cream); font-variant-numeric:tabular-nums; }
table.lr td.num{ text-align:right; white-space:nowrap; }
table.lr tr.sec td{ font-weight:700; color:var(--navy); background:#FBFAF6; padding-top:10px; }
table.lr tr.item td:first-child{ padding-left:26px; }
table.lr tr.subrow td{ font-size:12.5px; color:var(--ink-soft); }
table.lr tr.subrow td:first-child{ padding-left:48px; }
table.lr tr.total td{ font-weight:700; border-top:1px solid var(--line); }
table.lr tr.grand td{ font-weight:800; background:#FFF6B8; font-size:15px; border-top:2px solid var(--navy); }
table.lr tr.ops td{ font-weight:800; background:#EEF3EA; }
table.lr tr.info td{ font-size:12.5px; color:var(--ink-soft); }
table.lr .toggle{ cursor:pointer; user-select:none; }
table.lr .toggle::before{ content:"▸ "; color:var(--ink-soft); }
table.lr .toggle.open::before{ content:"▾ "; }
.delta-up{ color:var(--green); } .delta-down{ color:var(--red); }
.lr-year{ font-size:12.5px; }
.lr-year td,.lr-year th{ padding:6px 8px !important; }

@media (max-width:1100px){
  .kf-grid,.kf-penyewa{ grid-template-columns:repeat(6,1fr); }
  .f-tgl,.f-bln,.f-bundle,.f-qty,.f-kamar{ grid-column:span 2; }
  .f-kode,.f-sub,.f-vendor,.f-nominal,.f-pnama,.f-per{ grid-column:span 3; }
  .f-barang{ grid-column:span 6; } .f-pbaru,.f-pax{ grid-column:span 3; }
}
@media (max-width:760px){
  .topbar{ flex-wrap:wrap; padding:8px 14px; gap:8px; }
  .nav-toggle{ display:block; }
  .mainnav,.userbox{ display:none; width:100%; }
  body.nav-open .mainnav,body.nav-open .userbox{ display:flex; }
  .mainnav{ flex-direction:column; }
  .content{ padding:14px 12px 50px; }
  .grid-2,.kf-grid2{ grid-template-columns:1fr; }
  .kf-grid,.kf-penyewa{ grid-template-columns:repeat(2,1fr); }
  .kf-grid > .f,.kf-penyewa > .f{ grid-column:span 2; }
  .f-tgl,.f-bln,.f-qty,.f-kamar,.f-bundle{ grid-column:span 1 !important; }
  .summary-row{ grid-template-columns:1fr 1fr; }
}

/* ---- Dashboard & misc ---- */
.sub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:14px; }
.sub-grid .card{ margin:0; }
.tren{ display:flex; flex-direction:column; gap:8px; }
.tren-row{ display:grid; grid-template-columns:70px 1fr 110px; gap:10px; align-items:center; text-decoration:none; color:var(--ink); }
.tren-row:hover{ background:var(--cream); border-radius:6px; }
.tren-lbl{ font-size:12.5px; font-weight:600; }
.tren-bars{ display:flex; flex-direction:column; gap:3px; }
.bar{ display:block; height:9px; border-radius:4px; min-width:2px; }
.bar-in,.legend.in{ background:#5E9C7A; } .bar-out,.legend.out{ background:#D08B80; }
.legend{ display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:middle; }
.tren-val{ text-align:right; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.imp-detail{ margin-bottom:8px; }
.imp-detail summary{ cursor:pointer; padding:6px 0; }
.bulk-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px; background:var(--amber-bg); border:1px solid #F0D9A8; border-radius:8px; margin-bottom:10px; }
@media (max-width:760px){ .sub-grid{ grid-template-columns:1fr; } }
.bulk-bar[hidden]{ display:none !important; }
td.actions{ display:table-cell; white-space:nowrap; }
td.actions > *{ display:inline-flex; vertical-align:middle; margin:0 3px 0 0; }
td.actions > form{ display:inline-flex; gap:4px; align-items:center; }

/* ================= v1.1 — tampilan ringkas ala NK ================= */
body{ font-size:13px; }
.content{ padding:14px 18px 50px; }
.page-title{ font-size:18px; }
.topbar{ padding:6px 18px; }
.brand img{ height:30px; width:30px; }
.mainnav a{ padding:6px 10px; font-size:13px; }
.adv-btn{ padding:6px 11px; font-size:12.5px; }
.card{ padding:12px; margin-bottom:10px; }
.card-head{ margin-bottom:8px; }
.card-head h2{ font-size:14px; }
.summary-row{ gap:8px; margin-bottom:10px; }
.summary-card{ padding:8px 12px; }
.summary-card .label{ font-size:11px; }
.summary-card .value{ font-size:16px; margin-top:2px; }
table.list thead th{ padding:6px 7px; font-size:11px; }
table.list tbody td, table.list tfoot td{ padding:5px 7px; font-size:12.5px; vertical-align:middle; }
.alert-error,.alert-ok,.alert-warn,.alert-info{ padding:7px 12px; font-size:12.5px; margin-bottom:8px; }

.icon-btn{ width:26px; height:26px; border-radius:7px; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; text-decoration:none; padding:0; }
.icon-btn svg{ display:block; }
.icon-btn.simpan{ background:#2F6B4F; } .icon-btn.simpan:hover{ background:#255A41; }
.icon-btn.hapus,.icon-btn.del{ background:#A5433A; } .icon-btn.hapus:hover,.icon-btn.del:hover{ background:#8C382F; }
.icon-btn.edit,.icon-btn.ubah{ background:#C98A2C; }
.icon-btn.view,.icon-btn.lihat{ background:#3F7FBF; }
.icon-btn.tambah{ background:var(--navy); }
.icon-btn:disabled{ background:#C9C9C9; cursor:not-allowed; }
.ringkas{ cursor:pointer; }
.ringkas .full{ display:none; }
.ringkas.expanded .full{ display:inline; white-space:normal; }
.ringkas.expanded .short{ display:none; }
.ringkas .short{ border-bottom:1px dotted #9aa0a6; }
.sub-tag{ display:inline-block; font-size:10.5px; line-height:1.3; padding:1px 6px; border-radius:4px; background:var(--cream); color:var(--ink-soft); border:1px solid var(--line); white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }

/* Master data ringkas */
.mini-table{ width:100%; border-collapse:collapse; }
.mini-table td{ padding:3px 4px; border-top:1px solid var(--cream); vertical-align:middle; }
.mini-table tr:first-child td{ border-top:none; }
.mini-table input.in-sm{ width:100%; padding:5px 7px; font-size:12.5px; }
.mini-table .aksi{ width:62px; white-space:nowrap; text-align:right; }
.mini-table .aksi form{ display:inline; }
.mini-table .n{ width:48px; font-size:11px; color:var(--ink-soft); text-align:right; white-space:nowrap; }
.add-row{ display:flex; gap:6px; margin-top:6px; }
.add-row input{ flex:1; padding:5px 8px; border:1px dashed var(--line); border-radius:7px; font-size:12.5px; }
.sub-grid{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; }
.sub-grid .card h2{ font-size:13px; }

/* Form arus kas ringkas */
.kas-form .f label{ font-size:10.5px; margin-bottom:2px; }
.kas-form .f input:not([type=checkbox]):not([type=radio]),.kas-form .f select{ padding:5px 7px; font-size:13px; min-height:32px; border-radius:7px; }
.f-nominal input{ font-size:13.5px !important; }
.kf-grid,.kf-penyewa{ gap:7px 10px; }
.kf-penyewa{ padding:8px; margin-top:8px; }
.kf-actions{ margin-top:10px; }
.kf-actions .btn-primary,.kf-actions .btn-secondary{ padding:6px 12px; font-size:13px; }
.chip{ padding:2px 8px; font-size:11px; }
.form-toggle[hidden]{ display:none; }

/* Laba Rugi ala Excel */
.lr-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 440px)); gap:14px 18px; }
table.xl-lr{ width:100%; border-collapse:collapse; font-family:Calibri,"Segoe UI",Arial,sans-serif; font-size:12.5px; background:#fff; border:2px solid #000; }
table.xl-lr td{ padding:1px 6px; height:21px; white-space:nowrap; }
table.xl-lr .hd td{ background:#DEEAF6; font-weight:700; text-align:center; padding:0 6px; height:19px; }
table.xl-lr .hd.last td{ border-bottom:2px solid #000; }
table.xl-lr .b{ font-weight:700; }
table.xl-lr .ind{ padding-left:28px; }
table.xl-lr .rp{ width:26px; text-align:left; color:#111; }
table.xl-lr .num{ text-align:right; width:92px; font-variant-numeric:tabular-nums; }
table.xl-lr .tot{ text-align:right; width:110px; font-weight:700; font-variant-numeric:tabular-nums; }
table.xl-lr tr.laba td{ background:#FFFF00; font-weight:700; border-top:2px solid #000; }
table.xl-lr tr.laba td.lbl{ border-right:2px solid #000; }
table.xl-lr a{ color:inherit; text-decoration:none; }
table.xl-lr a:hover{ text-decoration:underline; }
table.xl-lr .neg{ color:#000; }
.lr-sub td{ font-size:11px; color:#666; height:17px !important; }
@media (max-width:960px){ .lr-grid{ grid-template-columns:1fr; } }
.kas-table td.barang{ min-width:190px; }
.kas-table td{ white-space:nowrap; }
.kas-table td.barang{ white-space:normal; }
.kas-table .kode{ font-size:10px; padding:1px 5px; }
.kas-table .sub-info{ font-size:11px; }
.row-awal td{ font-size:11.5px; }
.kode-rekap .kr-item{ padding:4px 9px; font-size:12px; }
.kas-table tbody td{ padding:3px 7px; }
.kas-table .icon-btn{ width:23px; height:23px; border-radius:6px; }
.kas-table .icon-btn svg{ width:13px; height:13px; }
.filter-row select.in-sm,.filter-row .grow,.filter-row input.in-sm{ padding:4px 8px; font-size:12.5px; min-height:30px; }
.filter-bar{ padding:7px 10px; }
.tip{ width:13px; height:13px; line-height:13px; font-size:9px; }
.kas-form .f label{ white-space:nowrap; }
table.xl-lr tr.laba.capai td{ background:#C6EFCE; color:#006100; }
table.xl-lr tr.laba.kurang td{ background:#FFC7CE; color:#9C0006; }
table.lr tr.grand.capai td{ background:#C6EFCE; color:#006100; }
table.lr tr.grand.kurang td{ background:#FFC7CE; color:#9C0006; }
.value.capai{ color:#006100 !important; } .value.kurang{ color:#9C0006 !important; }
.mini-table tr.grp td{ background:var(--navy); color:#fff; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:4px 8px; }
.mini-table tr.grp:not(:first-child) td{ border-top:8px solid #fff; }

/* ================= Arus Kas ala Excel ================= */
body:has(#grid) .content{ max-width:none; }
.xl-help{ font-size:11.5px; color:var(--ink-soft); margin:-4px 0 6px; }
.xl-wrap{ overflow:auto; background:#fff; border:1px solid #BFBFBF; max-height:calc(100vh - 170px); }
table.xl-grid{ border-collapse:collapse; width:100%; min-width:1320px; table-layout:fixed; font-family:Calibri,"Segoe UI",Arial,sans-serif; font-size:13px; }
table.xl-grid th{ background:#F2F2F2; border:1px solid #BFBFBF; font-weight:400; font-size:12px; padding:2px 4px; text-align:center; position:sticky; z-index:2; }
table.xl-grid thead tr:nth-child(1) th{ top:0; height:24px; }
table.xl-grid thead tr:nth-child(2) th{ top:24px; height:20px; }
table.xl-grid thead tr:nth-child(3) th{ top:44px; height:20px; }
table.xl-grid tr.xl-title th{ background:#C5E0B3; font-weight:700; font-size:13px; }
table.xl-grid th.xl-extra{ background:#EDEDED; color:#555; font-style:italic; }
table.xl-grid td{ border:1px solid #D9D9D9; padding:0; height:22px; vertical-align:middle; white-space:nowrap; overflow:hidden; }
table.xl-grid td.n{ text-align:right; padding:0 4px; font-variant-numeric:tabular-nums; }
table.xl-grid td.bal{ color:#222; background:#FAFAFA; }
table.xl-grid td.bal.neg{ color:#C00000; }
table.xl-grid td.xl-x{ background:#FBFBFB; }
table.xl-grid input.c, table.xl-grid select.c{ width:100%; height:22px; border:0; background:transparent; padding:0 4px; font:inherit; color:#111; outline:none; border-radius:0; box-sizing:border-box; }
table.xl-grid select.c{ padding:0 1px; font-size:12px; color:#444; -webkit-appearance:none; appearance:none; cursor:pointer; }
table.xl-grid select.c:disabled{ cursor:default; }
table.xl-grid .td-tanggal input{ text-align:center; }
table.xl-grid input.c:focus, table.xl-grid select.c:focus{ box-shadow:inset 0 0 0 2px #217346; background:#fff; }
table.xl-grid .td-no_bundle input, table.xl-grid .td-qty input, table.xl-grid .td-kamar_no input, table.xl-grid .td-kode input{ text-align:center; }
table.xl-grid .td-keluar input, table.xl-grid .td-masuk input, table.xl-grid .td-depo input{ text-align:right; }
table.xl-grid .td-kode input{ font-weight:600; letter-spacing:.3px; }
table.xl-grid input.c.bukan{ background:repeating-linear-gradient(135deg,#fff,#fff 4px,#F3F3F3 4px,#F3F3F3 8px); }
table.xl-grid input.c.salah{ color:#C00000; background:#FFE8E8; }
table.xl-grid select.c.wajib{ background:#FFF2CC; }
table.xl-grid input.c-penyewa{ color:#777; font-style:italic; }
table.xl-grid input.c-penyewa.linked{ color:#1F4E79; font-style:normal; }
table.xl-grid tr.xl-row:hover td{ background-color:#F7FBF8; }
table.xl-grid tr.xl-err td{ background:#FFF0F0 !important; }
table.xl-grid tr.xl-saldo td{ height:20px; background:#FAFAFA; color:#555; }
table.xl-grid tr.xl-total td{ background:#FFFF00; font-weight:700; height:24px; text-align:center; position:sticky; bottom:0; z-index:2; border:1px solid #BFBFBF; }
table.xl-grid tr.xl-total td.n{ text-align:right; }
table.xl-grid td.aksi{ text-align:center; padding:0 2px; }
.st-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:transparent; margin-right:3px; vertical-align:middle; font-size:0; }
.st-dot.ok{ background:#70AD47; } .st-dot.err{ background:#C00000; } .st-dot.dirty{ background:#FFC000; } .st-dot.saving{ background:#5B9BD5; }
.xl-help .st-dot{ font-size:0; }
tr.xl-note .st-dot.ok{ box-shadow:0 0 0 2px #FFC000; }
.mini-ic{ display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; border:0; background:transparent; cursor:pointer; font-size:12px; text-decoration:none; color:#7F6000; padding:0; border-radius:4px; vertical-align:middle; }
.mini-ic:hover{ background:#EEE; }
.mini-ic.kosong{ opacity:.2; cursor:default; }
.mini-ic.del{ color:#C00000; filter:grayscale(.2); }
tr.ada-info .mini-ic:not(.del):not(.kosong){ color:#2F5597; font-weight:700; }
table.xl-grid thead th{ white-space:nowrap; overflow:hidden; line-height:18px; box-sizing:border-box; }
table.xl-grid thead tr:nth-child(1) th{ top:0; height:22px; }
table.xl-grid thead tr:nth-child(2) th{ top:22px; height:21px; }
table.xl-grid thead tr:nth-child(3) th{ top:43px; height:21px; }
table.xl-grid thead th[rowspan]{ height:42px; }
table.xl-grid .td-kode input{ letter-spacing:0; padding:0 2px; }

/* v1.3 — grid ringkas tanpa geser ke kanan */
table.xl-grid{ min-width:1040px; font-size:12px; }
table.xl-grid th{ font-size:11px; padding:1px 3px; }
table.xl-grid td{ height:20px; }
table.xl-grid input.c, table.xl-grid select.c{ height:20px; padding:0 3px; font-size:12px; }
table.xl-grid select.c-kode, table.xl-grid select.c-kamar_no{ text-align:center; text-align-last:center; font-weight:600; color:#111; }
table.xl-grid select.c-kamar_no{ font-weight:400; }
table.xl-grid td.td-perusahaan, table.xl-grid td.td-barang{ position:relative; }
table.xl-grid td.td-perusahaan:focus-within, table.xl-grid td.td-barang:focus-within{ overflow:visible; z-index:6; }
table.xl-grid td.td-perusahaan input:focus, table.xl-grid td.td-barang input:focus{ position:absolute; left:0; top:0; width:auto; min-width:100%; field-sizing:content; max-width:520px; background:#fff; box-shadow:inset 0 0 0 2px #217346, 0 3px 10px rgba(0,0,0,.18); z-index:6; }
table.xl-grid td.td-perusahaan input:focus{ min-width:260px; }
table.xl-grid td.td-barang input:focus{ min-width:max(100%, 380px); }
.xl-pesan{ position:sticky; top:48px; z-index:10; margin:0 0 6px; }
.xl-help{ font-size:11px; }
body:has(#grid) .content{ padding-left:12px; padding-right:12px; }
/* Penyewa */
a.nama-link{ color:var(--navy); font-weight:600; text-decoration:none; }
a.nama-link:hover{ color:#8A6A2F; }
table.list a{ color:var(--navy); text-decoration:none; }
table.list a:hover{ text-decoration:underline; }
.form-penyewa{ max-width:760px; }
.fp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.fp-grid label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft); font-weight:600; }
.fp-grid input,.fp-grid textarea{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-weight:400; color:var(--ink); font-family:inherit; }
.fp-grid .span2{ grid-column:span 2; }
.fp-sec{ grid-column:span 2; font-size:12.5px; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:4px; margin-top:6px; }
@media (max-width:760px){ .fp-grid{ grid-template-columns:1fr; } .fp-grid .span2,.fp-sec{ grid-column:span 1; } }
/* Pie pengeluaran */
.pie-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pie-box{ display:grid; grid-template-columns:200px 1fr; gap:6px 14px; align-items:start; }
.pie-title{ grid-column:span 2; font-weight:700; color:var(--navy); font-size:13px; }
.pie-wrap{ position:relative; }
.pie-svg{ width:200px; height:200px; display:block; }
.pie-seg{ cursor:pointer; transition:stroke-width .15s; }
.pie-seg:hover{ stroke-width:38; }
.pie-c1{ font-size:11px; fill:#626873; }
.pie-c2{ font-size:14px; font-weight:700; fill:#1D1F24; }
.pie-tip{ position:absolute; background:#1F2A37; color:#fff; font-size:12px; padding:5px 8px; border-radius:6px; pointer-events:none; white-space:nowrap; z-index:5; }
table.pie-legend{ width:100%; border-collapse:collapse; font-size:12px; }
table.pie-legend th{ text-align:left; font-size:10.5px; color:var(--ink-soft); font-weight:600; padding:2px 4px; border-bottom:1px solid var(--line); }
table.pie-legend td{ padding:3px 4px; border-bottom:1px solid var(--cream); }
table.pie-legend .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.pie-legend tr.klik{ cursor:pointer; }
table.pie-legend tr.klik:hover td{ background:#FBFAF6; }
table.pie-legend tr.aktif td{ background:#F1EEE6; font-weight:600; }
.sw{ display:inline-block; width:10px; height:10px; border-radius:2px; }
@media (max-width:1100px){ .pie-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .pie-box{ grid-template-columns:1fr; } .pie-title{ grid-column:span 1; } }