/* ===== Akuntansi — gaya dasar ===== */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.657ceef57276.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.885576a6f4c8.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.4f54d6c65e11.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-700-normal.bf5e25824fd7.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-800-normal.9e00056eb42e.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.5cbfddfc8429.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.40aea80d150a.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-display: swap;
  src: url("../fonts/source-serif-4-latin-700-normal.812e2dc3e7b6.woff2") format("woff2"); }

/* ===== TEMA (Fase 4.4) =====
   Setiap tema hanya mengganti variabel. Blok pertama = Biru Malam (bawaan) sekaligus nilai dasar tema lain. */
:root, [data-theme] {
  --ink: #13213b; --ink-2: #2a64c0; --ink-soft: #e8f0fc;
  --paper: #f3f5f9; --surface: #ffffff; --surface-2: #f8f9fc; --row-hover: #f4f7fc;
  --rule: #e2e7ee; --rule-strong: #c9d2de; --text: #1b2638; --muted: #66738b;
  --accent: #2f74d8; --accent-hover: #2563c0; --on-accent: #ffffff; --focus: rgba(47,116,216,.22);
  --ledger: #17865a; --ledger-soft: #e3f4ec; --ledger-line: #b9dcc9;
  --brick: #c0392b; --brick-soft: #fbe8e6; --brick-line: #ecc0ba;
  --amber: #8a5a06; --amber-soft: #fdf1dc; --amber-line: #ecd7a6;
  --blue-soft: #e4eef8; --blue: #25507a;
  --input-bg: #ffffff;
  --side-1: #11264a; --side-2: #0c1b36; --side-text: #c9d5ea; --side-muted: #8193b4; --side-hover: rgba(255,255,255,.06);
  --side-open: #21407a; --side-open-text: #ffffff; --side-mark: #5d9bff; --side-chip: rgba(255,255,255,.07);
  --side-rule: rgba(255,255,255,.07); --side-strong: #ffffff; --company-bg: rgba(255,255,255,.06); --side-border: transparent;
  --fly: #183262; --fly-text: #ffffff; --fly-muted: #93a7cb; --fly-head: #9fb4d8; --fly-hover: rgba(255,255,255,.08);
  --fly-here: rgba(93,155,255,.18); --fly-here-text: #9fc2ff; --fly-border: transparent;
  --scrim: rgba(12,27,54,.18); --fly-shadow: 18px 0 40px rgba(12,27,54,.28);
  --c1: #2f74d8; --c2: #3d5784; --c3: #9aa9c3; --grid-line: #e8ecf2; --axis: #8a95a9;
  --radius: 8px; --radius-lg: 12px; --banner: #13213b;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: var(--font); --head-weight: 700; --head-track: -.01em; --brand-track: .06em;
  color-scheme: light;
}
[data-theme="zamrud"] {
  --banner: #0f3a30;
  --ink: #102822; --ink-2: #0d7a59; --ink-soft: #e2f3ec; --paper: #f3f6f4; --surface-2: #f7faf8; --row-hover: #f1f7f4;
  --rule: #dfe7e3; --rule-strong: #c5d3cc; --text: #17302a; --muted: #5f7570;
  --accent: #0f8a65; --accent-hover: #0b7454; --focus: rgba(15,138,101,.22);
  --side-1: #0f3a30; --side-2: #0a2621; --side-text: #cfe3db; --side-muted: #84a89b; --side-open: #1b5444; --side-mark: #49d6a5;
  --fly: #134637; --fly-muted: #9cc1b3; --fly-head: #a9cfc1; --fly-here: rgba(73,214,165,.16); --fly-here-text: #8fe8c7;
  --scrim: rgba(10,38,33,.18); --fly-shadow: 18px 0 40px rgba(10,38,33,.28);
  --c1: #12946c; --c2: #2f5d50; --c3: #a7bfb6; --grid-line: #e6ece9; --axis: #84958f;
}
[data-theme="terang"] {
  --banner: #2b3350;
  --ink: #141b2d; --ink-2: #4652d6; --ink-soft: #eef0ff; --paper: #f6f7fa; --surface-2: #fafbfc; --row-hover: #f5f6fc;
  --rule: #e6e9ef; --rule-strong: #cfd5df; --text: #1d2433; --muted: #6b7588;
  --accent: #4f5fe0; --accent-hover: #3f4fd0; --focus: rgba(79,95,224,.2);
  --side-1: #ffffff; --side-2: #ffffff; --side-text: #3a4659; --side-muted: #8a94a6; --side-hover: #f2f4f8;
  --side-open: #eef0ff; --side-open-text: #3a46c4; --side-mark: #4f5fe0; --side-chip: #eef0f5; --side-rule: #edf0f4;
  --side-strong: #141b2d; --company-bg: #f6f7fa; --side-border: #e6e9ef;
  --fly: #ffffff; --fly-text: #141b2d; --fly-muted: #6b7588; --fly-head: #8a94a6; --fly-hover: #f4f5fa;
  --fly-here: #eef0ff; --fly-here-text: #4f5fe0; --fly-border: #e6e9ef;
  --scrim: rgba(20,27,45,.08); --fly-shadow: 16px 0 36px rgba(20,27,45,.10);
  --c1: #4f5fe0; --c2: #b9c0f4; --c3: #cfd4de; --grid-line: #eef0f4; --axis: #98a0b0;
  --radius: 10px; --radius-lg: 16px;
}
[data-theme="grafit"] {
  --banner: #2a2e36;
  --ink: #f1f3f6; --ink-2: #f0c272; --ink-soft: #2a2e36; --paper: #0f1114; --surface: #181b20; --surface-2: #1c1f25;
  --row-hover: #20242b; --rule: #2a2e36; --rule-strong: #3a3f49; --text: #e7e9ee; --muted: #9aa1ad;
  --accent: #e8a93b; --accent-hover: #d6962a; --on-accent: #1d1406; --focus: rgba(232,169,59,.25);
  --ledger: #4cc38a; --ledger-soft: rgba(76,195,138,.14); --ledger-line: rgba(76,195,138,.35);
  --brick: #f07167; --brick-soft: rgba(240,113,103,.14); --brick-line: rgba(240,113,103,.35);
  --amber: #f0c272; --amber-soft: rgba(232,169,59,.14); --amber-line: rgba(232,169,59,.35);
  --blue-soft: rgba(120,160,230,.16); --blue: #a9c4f0; --input-bg: #1e2127;
  --side-1: #17191e; --side-2: #121418; --side-text: #c8ccd4; --side-muted: #7e8592; --side-hover: rgba(255,255,255,.05);
  --side-open: #2a2e36; --side-mark: #e8a93b; --side-chip: rgba(255,255,255,.06); --side-rule: rgba(255,255,255,.06);
  --company-bg: rgba(255,255,255,.04); --side-border: #23262d;
  --fly: #1e2127; --fly-muted: #959cab; --fly-head: #a3aab8; --fly-hover: rgba(255,255,255,.06);
  --fly-here: rgba(232,169,59,.16); --fly-here-text: #f0c272; --fly-border: #2a2e36;
  --scrim: rgba(0,0,0,.4); --fly-shadow: 18px 0 40px rgba(0,0,0,.5);
  --c1: #e8a93b; --c2: #5c6370; --c3: #4a505c; --grid-line: #262a31; --axis: #7e8592;
  --radius: 6px; --radius-lg: 8px;
  color-scheme: dark;
}
[data-theme="marun"] {
  --banner: #4a1426;
  --ink: #3a1020; --ink-2: #8c2741; --ink-soft: #f6e6ea; --paper: #f7f3ef; --surface-2: #fbf8f5; --row-hover: #f9f3f1;
  --rule: #ebe2dc; --rule-strong: #d8cbc3; --text: #2a1a1f; --muted: #7a6a6e;
  --accent: #8c2741; --accent-hover: #74203a; --focus: rgba(140,39,65,.2);
  --side-1: #4a1426; --side-2: #33101b; --side-text: #ecd3da; --side-muted: #b48a96; --side-open: #6b2238; --side-mark: #e8b77a;
  --fly: #5a1a2e; --fly-muted: #d0a7b2; --fly-head: #e3c3cb; --fly-here: rgba(232,183,122,.18); --fly-here-text: #f3cf9f;
  --scrim: rgba(51,16,27,.18); --fly-shadow: 18px 0 40px rgba(51,16,27,.28);
  --c1: #8c2741; --c2: #c9a26b; --c3: #dcc9b4; --grid-line: #efe7e2; --axis: #9a8a8e;
  --font-head: "Source Serif 4", Georgia, serif; --head-weight: 600; --head-track: 0; --brand-track: .12em;
  --radius: 4px; --radius-lg: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--text);
  background: var(--paper); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--ink-2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0; font-family: var(--font-head); letter-spacing: var(--head-track); }
h1 { font-size: 25px; font-weight: var(--head-weight); }
h2 { font-size: 17px; font-weight: var(--head-weight); }
h3 { font-size: 15px; font-weight: var(--head-weight); }
p { margin: 0 0 10px; }
small, .muted { color: var(--muted); }

/* ----- kerangka: sidebar judul + panel submenu ----- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, var(--side-1), var(--side-2));
  color: var(--side-text); display: flex; flex-direction: column; z-index: 40; border-right: 1px solid var(--side-border); }
.side-brand { padding: 22px 22px 14px; }
.side-brand .app { font-weight: 800; font-size: 19px; letter-spacing: var(--brand-track); color: var(--side-strong);
  text-transform: uppercase; font-family: var(--font-head); }
.side-brand .tagline { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); margin-top: 2px; }
.side-company { display: block; margin: 0 14px 10px; padding: 10px 13px; border-radius: var(--radius); background: var(--company-bg);
  border: 1px solid var(--side-rule); color: var(--side-strong); font-size: 13.5px; font-weight: 600; }
.side-company:hover { text-decoration: none; filter: brightness(1.08); }
.side-company small { display: block; color: var(--side-muted); font-size: 12px; font-weight: 400; }
.nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; padding: 9px 12px; margin: 1px 0; border-radius: var(--radius); font: 500 15px var(--font);
  color: var(--side-text); background: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--side-hover); color: var(--side-strong); text-decoration: none; }
.nav-item .count { font-size: 11px; font-weight: 600; color: var(--side-muted); min-width: 22px; height: 20px; border-radius: 10px;
  display: inline-grid; place-items: center; background: var(--side-chip); padding: 0 6px; }
.nav-item .count.alert { background: var(--brick); color: #fff; }
.nav-item.current { color: var(--side-strong); font-weight: 600; }
.nav-item.current::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -12px; width: 4px; height: 24px;
  border-radius: 0 4px 4px 0; background: var(--side-mark); }
.nav-item.open { background: var(--side-open); color: var(--side-open-text); font-weight: 600; }
.nav-item.open .count { background: var(--side-mark); color: var(--side-2); }
[data-theme="terang"] .nav-item.open .count { color: #fff; }
.nav-sep { height: 1px; background: var(--side-rule); margin: 8px 12px; }
.nav .sub { display: none; }
.side-foot { padding: 12px 22px 16px; font-size: 12px; color: var(--side-muted); border-top: 1px solid var(--side-rule); }

.fly { position: fixed; top: 0; left: 252px; height: 100vh; width: 320px; background: var(--fly); color: var(--fly-text);
  box-shadow: var(--fly-shadow); z-index: 35; padding: 26px 12px 24px; overflow-y: auto; border: 1px solid var(--fly-border);
  border-left: 0; border-top-right-radius: var(--radius-lg); opacity: 0; transform: translateX(-10px); pointer-events: none;
  transition: opacity .15s, transform .15s; }
.fly.show { opacity: 1; transform: none; pointer-events: auto; }
.fly-notch { position: fixed; left: 243px; width: 18px; height: 18px; background: var(--fly); transform: rotate(45deg);
  z-index: 41; opacity: 0; pointer-events: none; border-radius: 3px; transition: opacity .15s; }
.fly-notch.show { opacity: 1; }
[data-theme="terang"] .fly-notch { display: none; }
.fly h3 { margin: 0 12px 2px; font: 700 11.5px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--fly-head); }
.fly .lead { margin: 0 12px 10px; font-size: 12.5px; color: var(--fly-muted); }
.fly .grp, .nav .sub .grp { margin: 16px 12px 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fly-head); opacity: .85; font-weight: 600; }
.fly a { display: block; position: relative; padding: 8px 12px; border-radius: var(--radius); color: var(--fly-text); }
.fly a:hover, .fly a:focus-visible { background: var(--fly-hover); text-decoration: none; outline: none; }
.fly a b { display: block; font-weight: 600; font-size: 14.5px; }
.fly a small { display: block; font-size: 12.5px; color: var(--fly-muted); margin-top: 1px; }
.fly a.here { background: var(--fly-here); }
.fly a.here b::after { content: " · halaman ini"; font-weight: 500; font-size: 12px; color: var(--fly-here-text); }
.fly a .badge, .nav .sub a .badge { position: absolute; right: 12px; top: 10px; background: var(--brick); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.scrim { position: fixed; inset: 0 0 0 252px; background: var(--scrim); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .15s; }
.scrim.show { opacity: 1; pointer-events: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 28px; height: 64px; border-bottom: 1px solid var(--rule);
  background: var(--surface); position: sticky; top: 0; z-index: 20; }
.topbar .menu-btn { display: none; }
.topbar .crumbs { color: var(--muted); font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumbs b { color: var(--text); font-weight: 600; }
.top-search { width: min(320px, 28vw); }
.top-search input { height: 38px; background: var(--surface-2); border-color: var(--rule); font-size: 14px; }
.top-pop { position: relative; }
.top-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 4px; cursor: pointer;
  font: 600 14px var(--font); color: var(--text); }
.top-btn .badge { background: var(--brick); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.top-btn.who { text-align: right; line-height: 1.2; padding-left: 18px; border-left: 1px solid var(--rule); flex-direction: column;
  align-items: flex-end; gap: 0; }
.top-btn.who span { font-size: 12px; color: var(--muted); font-weight: 400; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(10,20,40,.16); z-index: 50; overflow: hidden; }
.pop-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.pop-head form { margin: 0; }
.pop a.n { display: block; padding: 10px 16px; border-bottom: 1px solid var(--rule); color: var(--text); font-size: 14px; }
.pop a.n:hover { background: var(--row-hover); text-decoration: none; }
.pop a.n small { display: block; font-size: 12px; }
.pop a.n.unread { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.pop .empty-n { padding: 18px 16px; color: var(--muted); font-size: 14px; }
.pop .foot { padding: 10px 16px; font-size: 13.5px; }
.pop.user { width: 240px; }
.pop.user a, .pop.user button { display: block; width: 100%; text-align: left; padding: 10px 16px; border: 0; background: none;
  font: 14px var(--font); color: var(--text); cursor: pointer; border-bottom: 1px solid var(--rule); }
.pop.user a:hover, .pop.user button:hover { background: var(--row-hover); text-decoration: none; }
.pop.user form { margin: 0; }
.content { padding: 26px 30px 48px; max-width: 1320px; width: 100%; }
.ui-besar .content, .ui-besar .topbar { zoom: 1.1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ----- tombol ----- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: 600 14px var(--font);
  cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ink-soft); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--brick); border-color: var(--brick-line); }
.btn-danger:hover { background: var(--brick-soft); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-link { background: none; border: 0; color: var(--ink-2); padding: 0; height: auto; font-weight: 600; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----- panel & tabel ----- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.panel-pad { padding: 18px 20px; }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px;
  border-bottom: 1px solid var(--rule); }

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.grid th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 9px 12px;
  border-bottom: 1px solid var(--rule-strong); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
.grid td { padding: 7px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--row-hover); }
.grid .num, .grid th.num { text-align: right; white-space: nowrap; }
.grid .code { color: var(--muted); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.grid .row-header td { font-weight: 600; }
.grid .row-section td { font-weight: 700; color: var(--ink); background: var(--surface-2); padding-top: 10px; }
.grid .row-subtotal td { font-weight: 600; border-top: 1px solid var(--rule-strong); }
.grid .row-total td { font-weight: 700; border-top: 1px solid var(--rule-strong); background: var(--surface-2); }
.grid .row-grand td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink); background: var(--ink-soft); }
.grid .row-note td { color: var(--muted); font-style: italic; }
.grid .inactive td { color: var(--muted); opacity: .75; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty h3 { margin-bottom: 6px; }

.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--ink-soft);
  color: var(--ink-2); white-space: nowrap; }
.tag-green { background: var(--ledger-soft); color: var(--ledger); }
.tag-red { background: var(--brick-soft); color: var(--brick); }

/* ----- form ----- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 4px; color: var(--text); }
.field .help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.field .err, .errorlist { color: var(--brick); font-size: 13px; margin: 4px 0 0; padding: 0; list-style: none; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input[type=search], input[type=url], input[type=month],
select, textarea, input:not([type]) {
  width: 100%; height: 36px; padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font: 14.5px var(--font); color: var(--text); background: var(--input-bg); font-variant-numeric: tabular-nums; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: -3px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 14px 20px;
  border-bottom: 1px solid var(--rule); }
.filters .field { min-width: 140px; }
.filters .field label { font-size: 12.5px; color: var(--muted); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--rule);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ----- pesan ----- */
.msg { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14.5px; border: 1px solid; }
.msg-success { background: var(--ledger-soft); border-color: var(--ledger-line); color: var(--ledger); }
.msg-error { background: var(--brick-soft); border-color: var(--brick-line); color: var(--brick); }
.msg-warning { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.msg ul { margin: 4px 0 0 18px; padding: 0; }

/* ----- dashboard ----- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { font-size: 13px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.stat .v.neg { color: var(--brick); }
.stat a { font-size: 12.5px; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.setup { list-style: none; margin: 0; padding: 0; }
.setup li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.setup li:last-child { border-bottom: 0; }
.setup .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule-strong); flex: none;
  transform: translateY(3px); }
.setup .done .dot { background: var(--ledger); border-color: var(--ledger); }
.setup .done span.t { color: var(--muted); text-decoration: line-through; }

/* ===== Lembar jurnal — ciri khas aplikasi ===== */
.sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.sheet-head { display: grid; grid-template-columns: 180px 170px 1fr; gap: 16px; padding: 18px 20px;
  border-bottom: 2px solid var(--ink); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { font-size: 13px; color: var(--muted); text-align: left; padding: 10px 8px; font-weight: 600;
  border-bottom: 1px solid var(--rule-strong); }
.sheet th.num { text-align: right; }
.sheet td { padding: 4px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sheet td.no { width: 34px; color: var(--muted); text-align: right; font-size: 13px; }
.sheet td.acc { width: 38%; }
.sheet td.amt { width: 15%; }
.sheet td.del { width: 36px; text-align: center; }
.sheet input.amount { text-align: right; }
.sheet input { border-color: transparent; background: transparent; }
.sheet input:hover { border-color: var(--rule); }
.sheet input:focus { background: var(--input-bg); }
.sheet tr.has-error td { background: var(--brick-soft); }
.sheet .rm { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; }
.sheet .rm:hover { color: var(--brick); background: var(--brick-soft); }
.sheet tfoot td { border-bottom: 0; padding: 10px 8px; font-weight: 700; }
.sheet tfoot .tot { text-align: right; border-top: 2px solid var(--ink); }
.balance-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius); }
.balance-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
  padding: 6px 12px; border-radius: var(--radius); border: 1.5px solid currentColor; }
.balance-state.ok { color: var(--ledger); background: var(--ledger-soft); }
.balance-state.off { color: var(--brick); background: var(--brick-soft); }
.balance-state.idle { color: var(--muted); background: var(--surface-2); border-style: dashed; }
.balance-state .mark { font-size: 17px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .balance-state { transition: background-color .2s, color .2s; }
  .balance-state.ok .mark { animation: stamp .35s ease-out; }
  @keyframes stamp { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
}
.kbd { font-size: 12px; color: var(--muted); }

/* tom-select agar menyatu dengan lembar */
.ts-wrapper.single .ts-control { border-color: transparent; background: transparent; box-shadow: none;
  min-height: 36px; padding: 6px 10px; font: 15px var(--font); }
.ts-wrapper.single .ts-control:hover { border-color: var(--rule); }
.ts-wrapper.focus .ts-control { border-color: var(--accent) !important; background: var(--input-bg); box-shadow: 0 0 0 3px var(--focus); }
.ts-dropdown { font: 14.5px var(--font); border-color: var(--rule-strong); }
.ts-dropdown .option .c { color: var(--muted); display: inline-block; min-width: 64px; }
.ts-dropdown .option .t { float: right; font-size: 12px; color: var(--muted); }
.ts-dropdown .active { background: var(--ink-soft); color: var(--ink); }
.form-select-plain .ts-control { border-color: var(--rule-strong) !important; background: var(--input-bg) !important; }
.ts-control, .ts-control input, .ts-dropdown { color: var(--text) !important; }
.ts-dropdown { background: var(--surface) !important; }
.ts-control { background: var(--input-bg); }
.ts-dropdown .option:hover, .ts-dropdown .active { background: var(--ink-soft) !important; color: var(--ink) !important; }

/* ----- detail ----- */
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }

/* ----- laporan ----- */
.report-paper { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.report-title { text-align: center; padding: 22px 20px 16px; border-bottom: 2px solid var(--ink); }
.report-title .co { font-weight: 700; color: var(--ink); font-size: 16px; }
.report-title h2 { font-size: 20px; margin: 4px 0; }
.report-title .per { color: var(--muted); }
.report-paper .grid td a { color: inherit; }
.report-paper .grid td a:hover { color: var(--ink-2); }
.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.report-list a { display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--text); }
.report-list a:hover { border-color: var(--ink-2); text-decoration: none; }
.report-list strong { display: block; color: var(--ink); margin-bottom: 2px; }
.report-list span { font-size: 13.5px; color: var(--muted); }

/* ----- login & pilih perusahaan ----- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: linear-gradient(180deg, var(--side-1), var(--side-2)); color: var(--side-text); padding: 48px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden; }
.auth-art .app { font-size: 20px; font-weight: 800; color: var(--side-strong); letter-spacing: var(--brand-track); text-transform: uppercase; }
.auth-art .ledger-lines { position: absolute; inset: 0; background-image:
  repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.06) 31px 32px);
  pointer-events: none; }
.auth-art .ledger-lines::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64%;
  border-left: 1px solid rgba(255,255,255,.10); box-shadow: 120px 0 0 rgba(255,255,255,.10); }
.auth-art blockquote { margin: 0; font-size: 26px; line-height: 1.3; color: var(--side-strong); font-family: var(--font-head); font-weight: 600; max-width: 22ch;
  position: relative; }
.auth-art .foot { font-size: 13px; color: var(--side-muted); position: relative; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-form form { width: 100%; max-width: 360px; }
.auth-form h1 { margin-bottom: 4px; }
.auth-form .field { margin-top: 14px; }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 20px; height: 40px; }
.co-list { list-style: none; padding: 0; margin: 16px 0 0; }
.co-list li + li { margin-top: 8px; }
.co-list button { width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--rule);
  background: var(--surface); border-radius: var(--radius); cursor: pointer; font: 15px var(--font); color: var(--text); }
.co-list button:hover { border-color: var(--accent); background: var(--row-hover); }
.co-list strong { color: var(--ink); display: block; }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;
  border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }

/* ----- responsif ----- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; width: 290px; left: -300px; transition: left .2s; }
  .side.open { left: 0; box-shadow: 0 0 0 100vmax rgba(10,25,40,.35); }
  .nav .sub.show { display: block; padding: 0 0 8px 10px; }
  .nav .sub a { display: block; position: relative; padding: 7px 12px; border-radius: var(--radius); color: var(--side-text); font-size: 14.5px; }
  .nav .sub a small { display: none; }
  .nav .sub a b { font-weight: 500; }
  .nav .sub a.here { background: var(--fly-here); color: var(--side-strong); }
  .nav .sub .grp { color: var(--side-muted); margin: 10px 12px 2px; }
  .fly, .fly-notch, .scrim { display: none !important; }
  .topbar { padding: 0 14px; height: 56px; gap: 10px; }
  .topbar .menu-btn { display: inline-flex; }
  .top-search, .top-btn.who span { display: none; }
  .top-btn.who { border-left: 0; padding-left: 0; }
  .pop { position: fixed; left: 10px; right: 10px; top: 60px; width: auto; }
  .content { padding: 18px 16px 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .sheet-head { grid-template-columns: 1fr 1fr; }
  .sheet-head .desc { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}

/* ----- cetak ----- */
@media print {
  :root, [data-theme] { --ink: #13213b; --ink-2: #13213b; --ink-soft: #eef1f5; --paper: #fff; --surface: #fff; --surface-2: #f6f7f9;
    --rule: #d9dee5; --rule-strong: #b9c2cd; --text: #111; --muted: #555; --input-bg: #fff; --banner: #333;
    --font-head: var(--font); color-scheme: light; }
  .ui-besar .content { zoom: 1; }
  .side, .topbar, .fly, .fly-notch, .scrim, .no-print, .filters, .page-head .actions, .msg { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; font-size: 11pt; }
  .report-paper, .panel { border: 0; }
  .grid th { position: static; background: #fff; }
  .grid td, .grid th { padding: 3px 6px; }
  a { color: inherit !important; }
}

/* ===== Fase 2 ===== */
.meta-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 40px; }
.totals { display: flex; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--rule); }
.totals table { border-collapse: collapse; min-width: 300px; }
.totals th { text-align: left; font-weight: 400; color: var(--muted); padding: 4px 16px 4px 0; }
.totals td { text-align: right; padding: 4px 0; white-space: nowrap; }
.totals tr.grand th, .totals tr.grand td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 8px; font-size: 16px; }
.sheet td.qty { width: 9%; }
.sheet td.unit { width: 6%; color: var(--muted); font-size: 13px; }
.sheet td.disc { width: 7%; }
.sheet td.taxc { width: 11%; }
.sheet td.amt-out { width: 13%; text-align: right; font-weight: 600; white-space: nowrap; padding-right: 12px; }
.sheet select.plain { border-color: transparent; background: transparent; }
.sheet select.plain:hover { border-color: var(--rule); }
.doc-lines { min-width: 980px; }
.sheet-head.doc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet-head.doc .wide { grid-column: span 2; }
.inline-check { display: flex; align-items: center; gap: 8px; font-size: 14px; height: 36px; }
.alloc input.amount { max-width: 170px; margin-left: auto; display: block; }
.summary-bar { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.summary-bar div span { display: block; font-size: 12.5px; color: var(--muted); }
.summary-bar div strong { font-size: 18px; color: var(--ink); }
.recon-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--rule); }
.recon-sum div span { display: block; font-size: 12.5px; color: var(--muted); }
.recon-sum div strong { font-size: 18px; color: var(--ink); }
.recon-sum .off strong { color: var(--brick); }
.recon-sum .ok strong { color: var(--ledger); }
.grid tr.checked td { background: var(--ledger-soft); }
@media (max-width: 860px) {
  .sheet-head.doc { grid-template-columns: 1fr 1fr; }
  .recon-sum { grid-template-columns: 1fr 1fr; }
}
.msg-info { background: var(--ink-soft); border-color: var(--rule-strong); color: var(--ink); }
.sheet-head input, .sheet-head select { border-color: var(--rule-strong); background: var(--input-bg); }
.sheet .totals th, .sheet .totals td { border-bottom: 0; }
.doc-lines td.acc { width: 15%; }
.doc-lines td.amt { width: 12%; }
.doc-lines td:nth-child(3) { min-width: 200px; }
.tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--rule); background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0; overflow-x: auto; }
.tab { border: 1px solid transparent; border-bottom: 0; background: none; padding: 8px 14px; font: 600 14px var(--font);
  color: var(--muted); cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); border-color: var(--rule); margin-bottom: -1px; }
.acct-grid { display: grid; gap: 10px; max-width: 760px; }
.acct-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 12px; }
.acct-row label { font-weight: 600; font-size: 14px; }
@media (max-width: 860px) { .acct-row { grid-template-columns: 1fr; gap: 4px; } }

/* ===== rekonsiliasi bank ala Accurate ===== */
.recon-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; }
.recon-bar .field label { font-size: 12.5px; color: var(--muted); }
.recon-heads, .recon-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.recon-heads { margin-bottom: 12px; }
.rh { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--brick); border-radius: var(--radius);
  padding: 14px 18px; }
.rh-bank { border-top-color: var(--ink-2); }
.rh h2 { font-size: 20px; margin-bottom: 8px; }
.rh-row { display: flex; justify-content: space-between; gap: 12px; background: var(--surface-2); padding: 8px 10px; border-radius: 4px; }
.rh-row strong { font-size: 17px; color: var(--ink); }
.rh-warn { color: var(--brick); font-weight: 600; font-size: 13.5px; margin-top: 8px; text-align: right; }
.rh-ok { color: var(--ledger); font-weight: 600; font-size: 13.5px; margin-top: 8px; text-align: right; }
.rh-note { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.rc { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px; min-height: 96px; }
.rc-j { background: var(--blue-soft); border-color: var(--rule-strong); }
.rc-j.is-matched { background: var(--ledger-soft); border-color: var(--ledger-line); }
.rc-top { display: flex; justify-content: space-between; gap: 10px; }
.rc-top strong { font-size: 16px; color: var(--ink); white-space: nowrap; }
.rc-desc { font-size: 14px; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; font-size: 13.5px; }
.rc-foot form { display: inline; }
.rc-b.is-matched { border-color: var(--ledger-line); background: var(--ledger-soft); }
.rc-b.is-suggest { border-style: dashed; border-color: var(--ink-2); }
.rc-b.is-suggest .rc-top, .rc-b.is-suggest .rc-desc { opacity: .75; }
.rc-b.is-empty { background: var(--surface-2); }
.rc-b .rc-foot { justify-content: flex-start; }
.rc-b.is-matched .rc-foot { justify-content: space-between; }
.dlg { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 18px 20px; width: min(640px, 94vw); }
.dlg::backdrop { background: rgba(10, 25, 40, .35); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dlg-list { max-height: 50vh; overflow-y: auto; margin: 10px 0; border: 1px solid var(--rule); border-radius: var(--radius); }
.dlg-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.dlg-item:last-child { border-bottom: 0; }
.dlg-item.off { opacity: .55; }
@media (max-width: 860px) { .recon-heads, .recon-rows { grid-template-columns: 1fr; } .rc-b { margin-bottom: 8px; } }
.doc-lines td.whc { min-width: 150px; }
.doc-lines td.whc select { font-size: 13.5px; }

/* ===== tab di form pesanan/faktur ===== */
.sheet > .tabs { border-radius: 0; margin-top: 4px; }
.tab-n:empty { display: none; }
.tab-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--ink-soft);
  color: var(--ink); font-size: 12px; line-height: 18px; text-align: center; }
.tab-help { margin: 0; padding: 12px 20px 4px; color: var(--muted); font-size: 14px; max-width: 900px; }
.exp-lines td.acc { width: 26%; }
.exp-lines td:nth-child(3) { min-width: 180px; }
#dp-table input.amount { width: 150px; }
/* tinggi kotak pilihan tetap sama saat sedang mengetik/terpilih (mencegah tata letak bergeser) */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; }
.ts-wrapper.single.has-items .ts-control > .item { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.single.has-items .ts-control > input { flex: 1 1 0; min-width: 0 !important; }

/* ===== link dokumen (lampiran Google Drive) ===== */
.doc-link-field { padding: 14px 20px 16px; border-top: 1px solid var(--rule); background: var(--surface-2); }
.panel-pad .doc-link-field, .form-grid .doc-link-field { grid-column: 1 / -1; padding: 12px 0 0; background: none; }
.doc-link-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.doc-link-field .opt { font-weight: 400; color: var(--muted); }
.doc-link-input { display: flex; gap: 8px; align-items: center; max-width: 760px; }
.doc-link-input input { flex: 1; min-width: 0; }
.doc-link-field .help { margin-top: 4px; }
.doc-link-show { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 20px;
  border-bottom: 1px solid var(--rule); background: var(--surface-2); font-size: 14px; }
.doc-link-show a { font-weight: 600; }
.doc-link-url { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.doc-link-edit { margin-left: auto; }
.doc-link-edit summary { cursor: pointer; color: var(--ink-2); font-size: 13.5px; }
.doc-link-edit form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.doc-link-edit input[type=url] { min-width: 320px; flex: 1; }
@media (max-width: 700px) { .doc-link-edit input[type=url] { min-width: 0; width: 100%; } }
.doc-link-field input, .doc-link-edit input { border: 1px solid var(--rule-strong) !important; background: var(--input-bg) !important; }

/* ===== Fase 4 ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }
.branch-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.branch-checks label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; font-size: 14px; }
.fx-field .help strong { font-weight: 600; }
.closing-steps { display: grid; gap: 10px; padding: 16px 20px; }
.closing-steps .step { display: flex; gap: 12px; align-items: baseline; }
.closing-steps .num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }

/* angka PPh manual di form pesanan/faktur */
.totals .wht-manual { margin-right: auto; max-width: 420px; padding-right: 24px; }
.totals .wht-manual .field { margin-bottom: 8px; }
.totals .wht-manual input { max-width: 200px; }

/* pengaturan penomoran */
.token-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.num-preview { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--paper, #f6f8f9); }
.num-preview strong { font-size: 20px; letter-spacing: .02em; color: var(--ink); }

/* ===== jendela pilih dokumen (docpicker.js) ===== */
.dp-back { position: fixed; inset: 0; background: rgba(16, 32, 48, .45); display: flex; align-items: flex-start;
  justify-content: center; padding: 48px 16px 16px; z-index: 200; }
.dp { background: var(--surface); border-radius: 10px; width: min(1040px, 100%); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.dp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.dp-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.dp-search { display: flex; gap: 12px; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.dp-search textarea { flex: 1; min-height: 56px; font: 14px var(--font); border: 2px solid var(--ink-2); border-radius: var(--radius);
  padding: 8px 10px; resize: vertical; background: var(--input-bg); color: var(--text); }
.dp-hint { width: 320px; font-size: 13px; color: var(--muted); }
.dp-found { margin-top: 6px; }
.dp-miss { color: var(--brick); }
.dp-body { overflow: auto; flex: 1; }
.dp-body tr[data-id] { cursor: pointer; }
.dp-body .ck, .doc-pick .ck { width: 36px; }
.grid tr.picked td { background: var(--ledger-soft); }
.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px;
  border-top: 1px solid var(--rule); background: var(--surface-2); flex-wrap: wrap; }
.dp-foot .actions { display: flex; gap: 8px; }
@media (max-width: 760px) { .dp-search { flex-direction: column; } .dp-hint { width: auto; } }
.pick-field { display: flex; gap: 8px; }
.pick-field input[readonly] { flex: 1; background: var(--surface-2); }
.row-noreturn td { background: var(--amber-soft); }
.tag-amber { background: var(--amber-soft); color: var(--amber); }

/* ===== modul pajak (Fase 4.3.2) ===== */
.tag-blue { background: var(--blue-soft); color: var(--blue); }
.tx-sec { margin-top: 16px; }
.tx-sec .panel-head h2 small, .tx-sec .panel-head h3 small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }
.grid td.ck, .grid th.ck { width: 34px; text-align: center; }
.grid td.ck2, .grid th.ck2 { width: 74px; text-align: center; }
.grid input[type=checkbox], .grid input[type=radio] { width: 16px; height: 16px; accent-color: var(--ledger); }
.grid tr.off td { color: var(--muted); opacity: .8; }
.grid tr.new td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.grid tr.err td { background: var(--brick-soft); }
.grid tr.orphan td { background: var(--brick-soft); }
.tx-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 20px;
  border-top: 1px solid var(--rule); background: var(--surface-2); }
.tx-sum span { display: block; font-size: 12px; color: var(--muted); }
.tx-sum strong { font-size: 16px; color: var(--ink); }
.tx-sum .ok strong { color: var(--ledger); } .tx-sum .warn strong { color: var(--amber); } .tx-sum .bad strong { color: var(--brick); }
.tx-spt { border: 2px solid var(--banner); border-radius: var(--radius); overflow: hidden; margin-top: 16px; background: var(--surface); }
.tx-spt .spt-head { background: var(--banner); color: #fff; padding: 10px 18px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; flex-wrap: wrap; }
.tx-spt .spt-head h2 { color: #fff; margin: 0; font-size: 17px; }
.tx-spt .spt-head span { font-size: 13px; color: rgba(255,255,255,.72); }
.tx-spt .grid .sec td { background: var(--surface-2); font-weight: 700; }
.tx-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; padding: 16px 20px; }
.tx-kv .field input, .tx-kv .field select { width: 100%; }
.tx-kv .wide3 { grid-column: span 3; }
.tx-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; padding: 16px 20px; }
.tx-head .wide { grid-column: 1 / -1; }
.tx-head .ro { display: flex; align-items: center; min-height: 38px; font-weight: 600; color: var(--ink); }
.tx-map { width: 100%; border-collapse: collapse; }
.tx-map td { padding: 10px 20px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tx-map td.lbl { width: 32%; font-weight: 600; }
.tx-map td.lbl small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tx-map td.sel { width: 38%; }
.tx-map td.sel select { width: 100%; }
.tx-map td.note { color: var(--muted); font-size: 13px; }
.selall { font-weight: 400; font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.tx-tabbody { background: var(--surface); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.tx-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 12px 16px;
  border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.tx-toolbar .field label { font-size: 12px; color: var(--muted); }
.tx-toolbar .sep { flex: 1; }
.tx-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; }
.tx-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--rule); }
.tx-chips div { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; }
.tx-chips div > span { display: block; font-size: 12px; color: var(--muted); }
.tx-chips strong { font-size: 15px; }
.tx-chips .bad { border-color: var(--brick-line); background: var(--brick-soft); } .tx-chips .bad strong { color: var(--brick); }
.tx-chips .ok strong { color: var(--ledger); }
.tx-pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--muted); gap: 10px; flex-wrap: wrap; }
.tab .cnt { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 10px;
  background: var(--ink-soft); color: var(--ink); }
.tab .cnt.red { background: var(--brick-soft); color: var(--brick); }
.tx-annual .grid td, .tx-annual .grid th { white-space: nowrap; }
.tx-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.tx-quick button { border: 0; background: none; color: var(--ledger); font: 600 12.5px var(--font); cursor: pointer; padding: 0; }
@media (max-width: 860px) {
  .tx-sum, .tx-chips, .tx-head, .tx-kv { grid-template-columns: 1fr 1fr; }
  .tx-kv .wide3 { grid-column: 1 / -1; }
  .tx-map td { display: block; width: auto !important; border-bottom: 0; padding: 6px 16px; }
  .tx-map tr { display: block; border-bottom: 1px solid var(--rule); padding: 6px 0; }
}
@media print {
  .tx-toolbar, .tx-bulk, .tx-pager, .form-actions, .tab-hidden-print { display: none !important; }
  .tx-tabpane { display: block !important; }
}
.grid td input.missing { border-color: var(--brick); background: var(--brick-soft); }
.grid.p21 td, .grid.p21 th { padding-left: 7px; padding-right: 7px; }
.grid td select.p21-pct { min-width: 108px; height: 34px; border: 1px solid var(--rule-strong); border-radius: 6px; padding: 0 6px; font: 14px var(--font); background: var(--input-bg); color: var(--text); }

/* ===== Fase 4.4: tampilan baru ===== */
.page-head h1 { font-size: 26px; }
.panel { border-radius: var(--radius-lg); }
.panel-head h2 { font-size: 16px; }
.tag { border-radius: 20px; padding: 2px 9px; font-weight: 600; font-size: 11.5px; }
.tag-red, .tag.tag-red { background: var(--brick-soft); color: var(--brick); }
a.tag:hover { text-decoration: none; filter: brightness(.97); }
.ro { display: flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--ink); gap: 4px; flex-wrap: wrap; }
.ro .muted { font-weight: 400; }
.ui-rapat .grid td { padding-top: 4px; padding-bottom: 4px; }
.ui-rapat .grid th { padding-top: 6px; padding-bottom: 6px; }
.row-unread td { font-weight: 600; }
.ok-mark { color: var(--ledger); font-size: 12px; } .bad-mark { color: var(--brick); font-size: 12px; }
tr.has-error td { background: var(--brick-soft); }
.neg { color: var(--brick) !important; }
.up { color: var(--ledger); font-weight: 600; } .down { color: var(--brick); font-weight: 600; }

/* KPI & beranda */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; }
.kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi .v { font-size: 21px; font-weight: 700; margin-top: 4px; color: var(--ink); font-family: var(--font-head); letter-spacing: -.01em; }
.kpi .d { font-size: 12.5px; margin-top: 4px; color: var(--muted); }
.kpi.bad { border-color: var(--brick-line); background: var(--brick-soft); } .kpi.bad .v { color: var(--brick); }
.kpi.warn { border-color: var(--amber-line); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.dash-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.dash-col > .panel + .panel { margin-top: 0; }
.chart-card, .side-card { padding: 20px 22px; }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart svg { width: 100%; height: auto; display: block; }
.big { font-size: 25px; font-weight: 700; color: var(--ink); margin: 0 0 12px; font-family: var(--font-head); letter-spacing: -.01em; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows li > span:last-child { font-weight: 600; text-align: right; white-space: nowrap; }
.rows small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.exp-alerts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* halaman Tampilan */
.set-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 22px 24px; border-bottom: 1px solid var(--rule); }
.set-row h2 { margin-bottom: 4px; }
.set-row p { font-size: 13px; }
.set-note { padding: 14px 24px 0; font-size: 13px; }
.sr { position: absolute; opacity: 0; pointer-events: none; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.th-card { position: relative; display: block; text-align: left; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.th-card:hover { border-color: var(--muted); }
.th-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.th-card.disabled { opacity: .55; cursor: not-allowed; }
.th-card .nm { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 4px 2px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.th-card .ds { display: block; margin: 0 4px 2px; font-size: 12.5px; color: var(--muted); }
.th-card .ds.font { font-size: 11.5px; }
.th-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini { height: 110px; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 30% 1fr; background: var(--paper);
  border: 1px solid var(--rule); }
.mini .ms { background: linear-gradient(180deg, var(--side-1), var(--side-2)); padding: 10px 8px; display: grid; gap: 6px; align-content: start;
  border-right: 1px solid var(--side-border); }
.mini .ms i { display: block; height: 5px; border-radius: 3px; background: var(--side-muted); opacity: .55; }
.mini .ms i.b { width: 70%; height: 7px; background: var(--side-strong); opacity: .9; margin-bottom: 4px; }
.mini .ms i.o { background: var(--side-mark); opacity: 1; }
.mini .mc { padding: 10px; display: grid; gap: 7px; align-content: start; }
.mini .mk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini .mk span { height: 20px; border-radius: 4px; background: var(--surface); border: 1px solid var(--rule); }
.mini .mb { height: 50px; border-radius: 4px; background: var(--surface); border: 1px solid var(--rule); display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px; }
.mini .mb span { flex: 1; background: var(--c1); border-radius: 2px 2px 0 0; }
.mini .mb span:nth-child(even) { background: var(--c2); }
.seg { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 7px 16px; border-radius: calc(var(--radius) - 3px); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample { margin-top: 12px; max-width: 620px; overflow: hidden; }

/* Expense */
.steps { list-style: none; margin: 0; padding: 14px 20px 16px; display: grid; gap: 2px; counter-reset: s; }
.steps li { position: relative; padding: 6px 0 6px 34px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ink-soft); color: var(--muted); }
.steps li.done::before { content: "✓"; background: var(--ledger); color: #fff; }
.steps li.bad::before { content: "!"; background: var(--brick); color: #fff; }
.steps li span { color: var(--muted); text-align: right; }
.rca-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 20px; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.panel.rca-sum { border: 1px solid var(--rule); margin-bottom: 16px; }
.rca-sum span { display: block; font-size: 12px; color: var(--muted); }
.rca-sum strong { font-size: 17px; color: var(--ink); }
.rca-sum .warn strong { color: var(--amber); } .rca-sum .ok strong { color: var(--ledger); }
.ca-lines td, .rca-lines td { vertical-align: middle; }
.ca-lines select, .rca-lines select, .ca-lines input, .rca-lines input { font-size: 14px; }
.approve-box { border-color: var(--accent); }
.grid-2 + .panel, .grid-2 { margin-bottom: 16px; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .set-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
  .rca-sum { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr; gap: 10px; }
}
.sheet .form-grid input, .sheet .form-grid select { border-color: var(--rule-strong); background: var(--input-bg); }
.grid.recap .tag { white-space: normal; }
.grid.recap td:nth-child(5) { min-width: 160px; }
.grid-2 > .panel + .panel { margin-top: 0; }
.set-row > .seg { justify-self: start; align-self: start; }