/* ============================================================
   FinApps — Design System (hybrid Accurate + FinApps)
   ============================================================ */
:root{
  --accent:#7c3aed; --accent-600:#6d28d9; --accent-50:#f5f3ff;
  --green:#16a34a; --green-50:#f0fdf4;
  --amber:#d97706; --amber-50:#fffbeb;
  --blue:#2563eb; --blue-50:#eff6ff;
  --red:#dc2626; --red-50:#fef2f2;
  --rail:#1e1b2e; --rail-2:#2a2540; --rail-ink:#c9c4dd;
  --bg:#f4f5f9; --surface:#ffffff; --surface-2:#f8f9fc;
  --ink:#1f2430; --muted:#6b7280; --line:#e7e8ee;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --radius:14px; --radius-sm:9px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
[data-theme="dark"]{
  --bg:#12131a; --surface:#1b1d27; --surface-2:#222531;
  --ink:#e8eaf0; --muted:#c4c9d4; --line:#2c2f3c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --accent-50:#241b3d;
}
/* dark mode contrast fixes */
[data-theme="dark"] .tile, [data-theme="dark"] .tile span, [data-theme="dark"] .tile div {color:#e8eaf0}
[data-theme="dark"] .tile .ti{color:#a78bfa}
[data-theme="dark"] .flyout .grp{color:#a0a8c0}
[data-theme="dark"] .flyout .fdesc{color:#b0b8c8}
[data-theme="dark"] .frow label{color:#b0b8c8}
[data-theme="dark"] .page-head .sub{color:#b0b8c8}
[data-theme="dark"] .tab{color:#b0b8c8}
[data-theme="dark"] input::placeholder,[data-theme="dark"] select{color:#888ea0}
[data-theme="dark"] .ud-item{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
[data-theme="dark"] .ud-item:hover{background:var(--accent-50);color:var(--ink)}
[data-theme="dark"] .ud-item.danger:hover{background:var(--red-50);color:var(--red)}
/* Phase 10: comprehensive dark mode contrast — apply --ink to ALL interactive elements that might fall back to buttontext (black) */
[data-theme="dark"] button.tile,[data-theme="dark"] .tile button{color:var(--ink)}
[data-theme="dark"] .sidebar-item,[data-theme="dark"] .menu-item,[data-theme="dark"] .nav-item{color:var(--ink)}
[data-theme="dark"] a{color:var(--accent)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}

/* layout */
.app{display:grid;grid-template-columns:210px 1fr;grid-template-rows:100vh;height:100vh;overflow:hidden}
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:stretch;padding:12px 10px;gap:4px;position:relative;z-index:130;overflow-y:auto}
.rail-brand{display:flex;align-items:center;gap:10px;padding:0 6px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.rail .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#a855f7);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:0 0 auto}
.rail-brand-text{min-width:0}
.rail-brand-title{font-weight:800;color:#fff;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-brand-sub{color:#a9a2c2;font-size:10.5px;font-weight:600;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-btn{width:100%;height:42px;border:0;background:transparent;border-radius:10px;color:var(--rail-ink);display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:0 10px;text-align:left;transition:.15s;position:relative}
.rail-btn svg{width:20px;height:20px}
.rail-btn span{font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-btn:hover{background:var(--rail-2);color:#fff}
.rail-btn.active{background:var(--accent);color:#fff}
.rail-btn.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:999px;background:#fff}
.rail-spacer{flex:1}

.main{display:flex;flex-direction:column;min-width:0}
/* topbar */
.topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 16px;z-index:30}
.brand{font-weight:800;letter-spacing:-.3px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:10px;letter-spacing:0}
.company{margin-left:6px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-weight:600;font-size:13px}
.company select{border:0;background:transparent;font-weight:600;color:var(--ink);font-family:inherit;outline:none}
.search{position:relative;flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px 12px;color:var(--muted)}
.search input{border:0;background:transparent;outline:none;flex:1;color:var(--ink);font-family:inherit}
.search.search-open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,58,237,.16)}
.global-search-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;width:min(620px,calc(100vw - 32px));max-height:430px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:80;padding:8px}
.global-search-panel.open{display:block}
.global-search-head{padding:7px 9px 9px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0;border-bottom:1px solid var(--line);margin-bottom:5px}
.global-search-item{width:100%;border:0;background:transparent;color:var(--ink);display:grid;grid-template-columns:108px 1fr;gap:3px 10px;text-align:left;padding:10px 9px;border-radius:9px;cursor:pointer}
.global-search-item:hover,.global-search-item:focus{background:var(--surface-2);outline:0}
.global-search-kind{grid-row:1 / span 2;align-self:center;justify-self:start;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--muted);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0}
.global-search-main{font-weight:800;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search-meta{color:var(--muted);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search-empty{display:flex;gap:10px;align-items:flex-start;padding:16px 12px;color:var(--muted);font-size:12px}
.global-search-empty svg{width:18px;min-width:18px}
.global-search-empty b{display:block;color:var(--ink);margin-bottom:2px}
.global-search-empty span{display:block}
.global-search-focus td,.global-search-focus span{animation:searchPulse 1.8s ease-out}
@keyframes searchPulse{0%{background:rgba(124,58,237,.22)}100%{background:transparent}}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--surface);border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.icon-btn:hover{color:var(--ink);border-color:var(--accent)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

/* tab bar */
.tabbar{height:40px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:flex-end;gap:2px;padding:0 8px;overflow-x:auto}
.tab{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:9px 9px 0 0;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;border-bottom:0;white-space:nowrap}
.tab.active{background:var(--surface);color:var(--ink);border-color:var(--line)}
.tab .x{opacity:.5;font-size:14px;line-height:1}
.tab .x:hover{opacity:1;color:var(--red)}

/* workspace - scrollable */
.workspace{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 22px;-webkit-overflow-scrolling:touch;min-height:0}
.workspace > * + *{margin-top:0}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.page-head h1{font-size:20px;margin:0;font-weight:800;letter-spacing:-.4px}
.page-head .sub{color:var(--muted);font-size:12.5px}
.spacer{flex:1}

/* chart container - explicit height for Chart.js to render */
.chart-row{display:flex;gap:14px;flex-wrap:wrap}
.chart-wrap{flex:1;min-width:300px;height:280px;position:relative}
.chart-wrap canvas{width:100%!important;height:100%!important}

/* flyout mega menu */
.flyout{position:fixed;top:0;left:210px;height:100vh;width:560px;background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(-12px);opacity:0;pointer-events:none;transition:.16s;z-index:120;padding:22px;overflow:auto}
.flyout.open{transform:none;opacity:1;pointer-events:auto}
.flyout h2{margin:0 0 4px;font-size:17px;font-weight:800}
.flyout .fdesc{color:var(--muted);font-size:12px;margin-bottom:16px;border-bottom:2px solid var(--accent);padding-bottom:12px;display:inline-block}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;background:var(--surface-2);transition:.14s;display:flex;flex-direction:column;align-items:center;gap:7px}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.tile .ti{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.tile .ti svg{width:19px;height:19px}
.tile span{font-size:11.5px;font-weight:600;line-height:1.25}
.tile.g .ti{background:var(--green-50);color:var(--green)} .tile.b .ti{background:var(--blue-50);color:var(--blue)}
.tile.o .ti{background:var(--amber-50);color:var(--amber)} .tile.p .ti{background:var(--accent-50);color:var(--accent)}
.flyout .grp{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:18px 0 8px;font-weight:700}
.scrim{position:fixed;inset:0;background:rgba(10,12,20,.25);opacity:0;pointer-events:none;transition:.16s;z-index:110}
.scrim.open{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .app{grid-template-columns:64px 1fr}
  .rail{padding:10px 8px;align-items:center}
  .rail-brand{padding:0 0 12px;border-bottom:0}
  .rail-brand-text{display:none}
  .rail-btn{width:44px;height:44px;display:grid;grid-template-columns:1fr;place-items:center;padding:0}
  .rail-btn span{display:none}
  .flyout{left:64px;width:min(560px,calc(100vw - 64px))}
}

/* cards / KPI */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.kpi .label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.kpi .val{font-size:23px;font-weight:800;margin:6px 0 2px;letter-spacing:-.5px}
.kpi .hint{font-size:11.5px;color:var(--muted)}
.kpi .val.neg{color:var(--red)} .kpi .val.pos{color:var(--green)}
.kpi-ico{float:right;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-50);color:var(--accent)}
.card h3{margin:0 0 12px;font-size:14px;font-weight:700}

/* tables */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.field{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 11px}
.field input,.field select{border:0;background:transparent;outline:none;color:var(--ink);font-family:inherit;font-size:13px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 14px;font-weight:600;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-600)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}

/* toast notification */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--accent);color:var(--ink);padding:12px 20px;border-radius:11px;font-weight:600;font-size:13px;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:slideUp .3s ease}
.toast.error{border-color:var(--red)}
.toast-confirm{display:flex;align-items:center;gap:12px;max-width:480px;flex-wrap:wrap}
.toast-btn{background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:opacity .15s}
.toast-btn:hover{opacity:.85}
.toast-btn.no{background:var(--muted)}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* modal form */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,20,.6);z-index:200;display:grid;place-items:center;animation:fadeIn .15s}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;width:480px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-card h3{margin:0 0 14px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:10px}
.modal-card h3 small{color:var(--muted);font-weight:500;font-size:12px}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;background:var(--surface-2);border:0;color:var(--ink);cursor:pointer;font-size:18px;display:grid;place-items:center}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* search input focus */
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:11px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:700;background:var(--surface-2)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .right{text-align:right}
.data-tbl{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);font-size:13px;table-layout:fixed}
.card:has(.data-tbl){overflow-x:auto}
.card h3 + .data-tbl{margin-top:4px}
.data-tbl th{padding:10px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0;color:var(--muted);border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-weight:800;background:var(--surface-2);white-space:nowrap}
.data-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;background:var(--surface)}
.data-tbl th:last-child,.data-tbl td:last-child{border-right:0;width:56px;text-align:center}
.data-tbl tbody tr:last-child td{border-bottom:0}
.data-tbl tbody tr:not(:has(.empty)):hover td{background:var(--surface-2)}
.data-tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.data-tbl code{display:inline-block;padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);font-family:inherit;font-size:12px;font-weight:700;color:var(--ink)}
.data-tbl .empty{padding:34px 16px;text-align:center;color:var(--muted);background:var(--surface);font-weight:600}
.data-tbl .inp.sm{min-width:86px;padding:6px 8px;border-radius:7px;font-size:12px}
.data-tbl select.inp.sm{min-width:96px}
.data-tbl .btn.sm{min-width:34px;justify-content:center}
.invmin-tbl th:nth-child(1){width:12%}
.invmin-tbl th:nth-child(2){width:28%}
.invmin-tbl th:nth-child(3){width:10%}
.invmin-tbl th:nth-child(4),.invmin-tbl th:nth-child(5){width:13%}
.invmin-tbl th:nth-child(6){width:14%}
.invmin-tbl th:last-child,.invmin-tbl td:last-child{width:10%;text-align:left}
.data-tbl th:nth-child(1){width:26%}
.data-tbl th:nth-child(2){width:11%}
.data-tbl th:nth-child(3){width:8%}
.data-tbl th:nth-child(4){width:10%}
.data-tbl th:nth-child(5),.data-tbl th:nth-child(6),.data-tbl th:nth-child(7){width:13%}
.muted{color:var(--muted)}
.totalrow td{font-weight:800;background:var(--surface-2)}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.3px}
.b-draft{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.b-confirmed{background:var(--blue-50);color:var(--blue)}
.b-posted{background:var(--green-50);color:var(--green)}
.b-paid{background:var(--accent-50);color:var(--accent)}
.b-void{background:var(--red-50);color:var(--red)}
.b-custom{background:var(--accent-50);color:var(--accent)}
.b-maspro{background:var(--blue-50);color:var(--blue)}
.b-capex{background:var(--amber-50);color:var(--amber)}
.b-opex{background:var(--green-50);color:var(--green)}
.b-na{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.b-internal{background:var(--blue-50);color:var(--blue)}

/* grouped journal table */
.journal-section{margin-bottom:16px}
.journal-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(251,191,36,.45);border-radius:8px;background:rgba(251,191,36,.08)}
.journal-section-head div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.journal-stack{display:grid;gap:12px}
.journal-entry-card{padding:0;overflow:hidden}
.journal-draft-card{border-color:rgba(251,191,36,.45)}
.journal-meta-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px}
.journal-meta-tbl th{width:118px;padding:10px 12px;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0;color:var(--muted);font-weight:800;background:var(--surface-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
.journal-meta-tbl td{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:middle}
.journal-meta-tbl td:last-child{border-right:0}
.journal-meta-tbl tr:last-child th,.journal-meta-tbl tr:last-child td{border-bottom:1px solid var(--line)}
.journal-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.journal-lines-tbl{min-width:760px;border:0;border-radius:0}
.journal-lines-tbl th:nth-child(1){width:28%}
.journal-lines-tbl th:nth-child(2){width:30%}
.journal-lines-tbl th:nth-child(3){width:14%}
.journal-lines-tbl th:nth-child(4),.journal-lines-tbl th:nth-child(5){width:14%}
.journal-lines-tbl td:first-child{display:flex;align-items:center;gap:8px;min-height:39px}
.journal-lines-tbl td:first-child b{font-weight:700}
.journal-lines-tbl .totalrow td:first-child{display:table-cell}

/* forms */
.form-head{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.frow{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.frow label{font-size:12px;font-weight:700;color:var(--muted)}
.frow label .req{color:var(--red)}
.inp{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink);outline:none;width:100%}
.inp:focus{border-color:var(--accent)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:6px 14px;border-radius:7px;font-weight:700;font-size:12.5px;color:var(--muted)}
.seg button.on{background:var(--accent);color:#fff}
.purchase-lines-table{min-width:1180px;table-layout:auto}
.purchase-lines-table .purchase-klas-th,
.purchase-lines-table .purchase-klas-td{min-width:236px;width:236px;position:relative;z-index:2}
.purchase-lines-table .purchase-klas-td{overflow:visible}
.purchase-klas-cell{width:220px;min-width:220px;display:grid;grid-template-columns:1fr 1fr;gap:6px;position:relative;z-index:4}
.klas-choice{position:relative;z-index:5;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:8px;padding:7px 8px;font-family:inherit;text-align:left;cursor:pointer;min-height:48px}
.klas-choice b{display:block;font-size:12px;line-height:1.1;color:var(--ink)}
.klas-choice small{display:block;font-size:10.5px;line-height:1.2;margin-top:3px;color:var(--muted)}
.klas-choice.on{border-color:var(--accent);background:rgba(124,58,237,.18);box-shadow:0 0 0 1px rgba(124,58,237,.25)}
.klas-choice.on b{color:#d8c4ff}
.klas-choice:focus{outline:2px solid var(--accent);outline-offset:2px}
.foot-tot{display:flex;justify-content:flex-end;gap:34px;margin-top:14px;padding-top:14px;border-top:2px solid var(--line)}
.foot-tot div span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.foot-tot div b{font-size:18px}

.callout{background:var(--accent-50);border:1px solid var(--accent);color:var(--accent-600);border-radius:11px;padding:11px 14px;font-size:12.5px;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start}
[data-theme="dark"] .callout{color:#c4b5fd}
.empty{padding:46px;text-align:center;color:var(--muted)}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 16px}
.flow .step{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700}
.flow .step.done{background:var(--green-50);color:var(--green);border-color:var(--green)}
.flow .step.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.flow .arr{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.split{grid-template-columns:1fr}.form-head{grid-template-columns:1fr}}

/* dark mode badge contrast fix */
[data-theme="dark"] .b-draft{background:#2c2f3c;color:#9aa0b0;border-color:#3a3d4a}
[data-theme="dark"] .b-confirmed{background:#1e2d44;color:#60a5fa}
[data-theme="dark"] .b-opex{background:#1a2e1a;color:#4ade80}
[data-theme="dark"] .b-capex{background:#2e2410;color:#fbbf24}
[data-theme="dark"] .b-custom{background:#241b3d;color:#a78bfa}
[data-theme="dark"] .b-maspro{background:#1e2d44;color:#60a5fa}
[data-theme="dark"] .b-posted{background:#1a2e1a;color:#4ade80}
[data-theme="dark"] .b-void{background:#2e1010;color:#f87171}
[data-theme="dark"] .btn{color:#e8eaf0}
[data-theme="dark"] .btn.primary{color:#fff}

/* ============================================================
   FIX (audit M1): batasi ukuran SVG inline agar ikon tidak raksasa
   di callout / empty-state / page-head. Aturan global + spesifik.
   ============================================================ */
.callout > svg, .empty svg, .page-head svg, .kpi .hint svg { width:18px; height:18px; flex:0 0 auto; }
.callout{align-items:flex-start}
.callout > svg{margin-top:1px}
svg:not([width]):not(.rail-btn svg):not(.tile .ti svg){ max-width:24px; max-height:24px; }
.btn svg{width:16px;height:16px}

/* ============================================================
   FIX (M2 Jun 16): user dropdown CSS missing — dropdown ke-render
   visible by default & overflow ke atas viewport (top:-25.5).
   Rule untuk .user-menu dan .user-dropdown HILANG dari stylesheet
   (cleanup sebelumnya lupa restore). Pakai pendekatan class-based
   (.open) bukan inline style.
   ============================================================ */
.user-menu{position:relative;display:inline-block}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:8px;z-index:50;display:none}
.user-dropdown.open{display:block}
.ud-head{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ud-name{font-weight:700;font-size:13px;color:var(--ink)}
.ud-role{font-size:11px;color:var(--muted);margin-top:2px}
.ud-item{display:flex;width:100%;align-items:center;gap:8px;padding:9px 11px;border:0;background:transparent;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.ud-item:hover{background:var(--surface-2)}
.ud-item.danger{color:var(--red)}
.ud-item.danger:hover{background:var(--red-50)}
[data-theme="dark"] .user-dropdown{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .ud-item:hover{background:var(--surface-2)}

/* ============================================================
   Money input formatter (Phase 15c): auto dot separator
   Default 0 auto-clears on focus. Format: 1000000 → 1.000.000
   ============================================================ */
input[data-money="1"], input.inp-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.2px;
}
input[data-money="1"]:focus, input.inp-money:focus {
  outline-color: var(--accent, #3b82f6);
  background: var(--surface-2);
}

/* ============================================================
   Global table polish: master lists, reports, line items, system tables
   ============================================================ */
.card:has(table){overflow-x:auto}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl){
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
  font-size:13px;
}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) th{
  padding:10px 12px;
  text-align:left;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  font-weight:800;
  background:var(--surface-2);
  white-space:nowrap;
}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  vertical-align:middle;
  background:var(--surface);
}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) :is(th,td):last-child{border-right:0}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) tbody tr:last-child td{border-bottom:0}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) tbody tr:not(:has(.empty)):not(.totalrow):hover td{background:var(--surface-2)}
:where(.tbl,.data-tbl,.data-table) :is(.num,.right){text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:where(.tbl,.data-tbl,.data-table) code{
  display:inline-block;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-2);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}
:where(.tbl,.data-tbl,.data-table) .empty{
  padding:34px 16px;
  text-align:center;
  color:var(--muted);
  background:var(--surface);
  font-weight:600;
}
.totalrow td{
  font-weight:800;
  background:var(--surface-2)!important;
  border-top:1px solid var(--line);
}
.tbl,.data-table{min-width:720px}
.data-tbl{min-width:820px}
.journal-meta-tbl{min-width:760px}
.journal-lines-tbl{border-top:0;border-left:0;border-right:0;border-bottom:0;border-radius:0}
.journal-entry-card .journal-meta-tbl{border-left:0;border-right:0;border-top:0;border-radius:0}
.journal-entry-card .journal-lines-tbl tbody tr:last-child td{border-bottom:0}
@media(max-width:760px){
  .workspace{padding:14px 12px}
  .tbl,.data-table{min-width:680px}
  .data-tbl{min-width:760px}
  .journal-meta-tbl,.journal-lines-tbl{min-width:720px}
  :where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) th,
  :where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) td{padding:9px 10px}
}

/* ============================================================
   Clean professional theme v52
   ============================================================ */
:root{
  --accent:#2563eb; --accent-600:#1d4ed8; --accent-50:#eff6ff;
  --green:#15803d; --green-50:#ecfdf3;
  --amber:#b45309; --amber-50:#fffbeb;
  --blue:#2563eb; --blue-50:#eff6ff;
  --red:#b91c1c; --red-50:#fef2f2;
  --rail:#ffffff; --rail-2:#f3f6fb; --rail-ink:#475569;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f8fafc;
  --ink:#111827; --muted:#64748b; --line:#e2e8f0;
  --shadow:0 1px 2px rgba(15,23,42,.04);
  --radius:8px; --radius-sm:6px;
}
[data-theme="dark"]{
  --accent:#60a5fa; --accent-600:#3b82f6; --accent-50:#172554;
  --green:#4ade80; --green-50:#102a1b;
  --amber:#fbbf24; --amber-50:#2a2110;
  --blue:#60a5fa; --blue-50:#14213d;
  --red:#f87171; --red-50:#2c1212;
  --rail:#111827; --rail-2:#1f2937; --rail-ink:#cbd5e1;
  --bg:#0f1117; --surface:#181b23; --surface-2:#20242f;
  --ink:#f3f4f6; --muted:#a7b0c0; --line:#303645;
  --shadow:0 1px 2px rgba(0,0,0,.22);
}
body{font-size:13.5px}
.rail{border-right:1px solid var(--line)}
.rail-brand{border-bottom:1px solid var(--line)}
.rail .logo{border-radius:8px;background:var(--accent);box-shadow:none}
.rail-brand-title{color:var(--ink)}
.rail-brand-sub{color:var(--muted)}
[data-theme="dark"] .rail-brand-title{color:#fff}
[data-theme="dark"] .rail-brand-sub{color:#9ca3af}
.rail-btn{border-radius:8px;font-weight:700}
.rail-btn:hover{background:var(--rail-2);color:var(--ink)}
.rail-btn.active{background:var(--accent-50);color:var(--accent)}
.rail-btn.active::before{background:var(--accent);left:2px;top:10px;bottom:10px;width:3px}
[data-theme="dark"] .rail-btn:hover{color:#fff}
[data-theme="dark"] .rail-btn.active{background:#1e3a5f;color:#bfdbfe}
.topbar{height:56px;background:var(--surface);box-shadow:none}
.topbar>.brand{display:none}
.company,.search,.icon-btn,.field,.inp,.seg,.user-dropdown{border-radius:8px;box-shadow:none}
.company{margin-left:0;background:var(--surface);min-width:250px}
.search{max-width:680px;background:var(--surface);padding:8px 12px}
.search.search-open,.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.global-search-panel{border-radius:8px;box-shadow:0 12px 28px rgba(15,23,42,.12)}
.global-search-item{border-radius:6px}
@keyframes searchPulse{0%{background:rgba(37,99,235,.15)}100%{background:transparent}}
.icon-btn{background:var(--surface);color:var(--muted)}
.icon-btn:hover{background:var(--surface-2);color:var(--accent);border-color:var(--line)}
.avatar{border-radius:8px;background:var(--ink);color:var(--surface)}
[data-theme="dark"] .avatar{background:#e5e7eb;color:#111827}
.tabbar{height:42px;background:var(--surface);align-items:flex-end;gap:0;padding:0 12px}
.tab{border-radius:0;padding:10px 14px 9px;border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:700}
.tab.active{background:transparent;color:var(--ink);border-bottom-color:var(--accent)}
.workspace{background:var(--bg);padding:22px 24px}
.page-head h1{font-size:21px;letter-spacing:0}
.page-head .sub{font-size:12.5px}
.flyout{border-right:1px solid var(--line);box-shadow:0 16px 36px rgba(15,23,42,.14);border-radius:0}
.flyout .fdesc{border-bottom:1px solid var(--line);display:block;padding-bottom:14px}
.tile{border-radius:8px;background:var(--surface);box-shadow:none;text-align:left;align-items:flex-start}
.tile:hover{border-color:var(--accent);transform:none;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.tile .ti{border-radius:7px;background:var(--surface-2)!important}
.tile.p .ti,.tile.g .ti,.tile.b .ti,.tile.o .ti{color:var(--accent)}
.card{border-radius:8px;box-shadow:var(--shadow);padding:16px}
.kpi .val{letter-spacing:0}
.kpi-ico{border-radius:8px;background:var(--surface-2);color:var(--accent)}
.btn{border-radius:7px;box-shadow:none;font-weight:700}
.btn:hover{background:var(--surface-2);border-color:var(--line)}
.btn.primary{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn.primary:hover{background:#1e40af;border-color:#1e40af}
[data-theme="dark"] .btn.primary:hover{background:#2563eb;border-color:#2563eb}
.toast{border-radius:8px;border-color:var(--line);box-shadow:0 12px 32px rgba(15,23,42,.18)}
.modal-bg{background:rgba(15,23,42,.48)}
.modal-card{border-radius:10px;box-shadow:0 24px 50px rgba(15,23,42,.2)}
.callout{background:var(--surface-2);border-color:var(--line);color:var(--ink);border-radius:8px}
[data-theme="dark"] .callout{color:var(--ink)}
.flow .step{border-radius:8px}
.flow .step.cur{background:var(--accent-600);border-color:var(--accent-600)}
.flow .step.done{background:var(--green-50);border-color:rgba(21,128,61,.35)}
.seg button.on{background:var(--accent-600);color:#fff}
.klas-choice.on{border-color:var(--accent);background:var(--accent-50);box-shadow:none}
.klas-choice.on b{color:var(--accent)}
[data-theme="dark"] .klas-choice.on b{color:#dbeafe}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl){border-radius:8px;box-shadow:none}
:where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) th{background:#f8fafc;color:#475569}
[data-theme="dark"] :where(.tbl,.data-tbl,.data-table,.journal-meta-tbl) th{background:#222735;color:#cbd5e1}
.badge{border-radius:6px;letter-spacing:0}
.b-paid,.b-custom{background:var(--blue-50);color:var(--blue)}
.b-capex{background:#fef3c7;color:#92400e}
.b-opex{background:#dcfce7;color:#166534}
[data-theme="dark"] .b-paid,[data-theme="dark"] .b-custom{background:#14213d;color:#93c5fd}

/* ============================================================
   Histori Bank dynamic print preview
   ============================================================ */
.print-config-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.print-config-head h3{margin:0 0 3px;font-size:15px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}
.check-tile{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:10px 11px;font-weight:700;font-size:12.5px;color:var(--ink)}
.check-tile input{accent-color:var(--accent);width:16px;height:16px}
.bank-print-card{background:#f3f4f6}
.bank-print-preview{overflow:auto}
.bank-print-page{background:#fff;color:#111;max-width:1188px;min-height:820px;margin:0 auto;padding:42px 44px 34px;font-family:Arial,Helvetica,sans-serif;border:1px solid #d7d7d7;box-shadow:0 12px 30px rgba(15,23,42,.14)}
.bank-print-title{text-align:center;position:relative;margin-bottom:34px;font-family:"Courier New",monospace;color:#111}
.bank-print-title .company-name{font-weight:700;font-size:17px;letter-spacing:.5px;margin-bottom:12px}
.bank-print-title h2{margin:0 0 6px;color:#9f003d;font-family:Arial,Helvetica,sans-serif;font-size:26px;line-height:1;font-weight:800}
.bank-print-title .bank-name{position:absolute;right:0;top:88px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-style:italic;color:#111}
.bank-print-info{display:grid;grid-template-columns:1fr 1fr;gap:7px 80px;margin-bottom:18px;font-size:13px}
.bank-print-info div{display:grid;grid-template-columns:140px 1fr;gap:8px}
.bank-print-info b{font-weight:800}
.bank-print-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.18;color:#111}
.bank-print-table th{font-size:12px;text-align:left;color:#003764;border-bottom:1px solid #222;padding:0 7px 5px;font-weight:800;text-decoration:underline;white-space:nowrap}
.bank-print-table td{padding:5px 7px;vertical-align:top;background:#fff;border:0}
.bank-print-table .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.bank-print-table .desc{white-space:normal;word-break:normal;overflow-wrap:anywhere}
.bank-print-table .opening-row td{padding-top:8px}
.bank-print-table .totalrow td{background:#fff!important;border-top:1px solid #222;color:#003764;font-weight:800}
.bank-print-page.cols-9 .bank-print-table,.bank-print-page.cols-10 .bank-print-table{font-size:11px}
.bank-print-page.cols-11 .bank-print-table,.bank-print-page.cols-12 .bank-print-table{font-size:10px}
.bank-print-footer{display:flex;justify-content:space-between;margin-top:34px;padding-top:10px;border-top:1px solid #222;font-family:"Courier New",monospace;font-size:12px;color:#111}
.bank-print-footer .page-num:after{content:counter(page) " dari " counter(pages)}

@media print{
  @page{size:A4 landscape;margin:10mm}
  body.print-report{background:#fff!important;color:#111!important}
  body.print-report .rail,
  body.print-report .topbar,
  body.print-report .tabbar,
  body.print-report .flyout,
  body.print-report .scrim,
  body.print-report .toolbar,
  body.print-report .toast,
  body.print-report .modal-bg,
  body.print-report .icon-btn,
  body.print-report .btn{display:none!important}
  body.print-report .app{display:block!important;height:auto!important;overflow:visible!important}
  body.print-report .main,
  body.print-report .workspace{display:block!important;overflow:visible!important;padding:0!important;background:#fff!important;color:#111!important}
  body.print-report .workspace:before{
    content:attr(data-print-company);
    display:block;
    text-align:center;
    font:700 13px Arial,Helvetica,sans-serif;
    letter-spacing:.2px;
    margin:0 0 4px;
    color:#111;
  }
  body.print-report .workspace:after{
    content:"FinApps - Sistem Akuntansi";
    display:block;
    margin-top:22px;
    padding-top:8px;
    border-top:1px solid #333;
    text-align:center;
    font:10px "Courier New",monospace;
    color:#111;
  }
  body.print-report .page-head{
    display:block!important;
    margin:0 0 18px!important;
    padding:0 0 10px!important;
    border-bottom:1px solid #333!important;
    text-align:center!important;
    color:#111!important;
  }
  body.print-report .page-head h1{
    font:800 22px Arial,Helvetica,sans-serif!important;
    margin:0 0 5px!important;
    color:#9f003d!important;
    letter-spacing:0!important;
  }
  body.print-report .page-head .sub{
    color:#111!important;
    font:12px Arial,Helvetica,sans-serif!important;
  }
  body.print-report .grid,
  body.print-report .split{display:block!important}
  body.print-report .card{
    display:block!important;
    background:#fff!important;
    color:#111!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0 0 14px!important;
    break-inside:avoid;
  }
  body.print-report .card h3{
    font:800 13px Arial,Helvetica,sans-serif!important;
    color:#111!important;
    margin:14px 0 8px!important;
  }
  body.print-report .kpis{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-bottom:14px!important}
  body.print-report .kpi{
    border:1px solid #cbd5e1!important;
    padding:9px 10px!important;
  }
  body.print-report .kpi-ico{display:none!important}
  body.print-report .kpi .label{font:700 9px Arial,Helvetica,sans-serif!important;color:#334155!important;letter-spacing:.3px!important}
  body.print-report .kpi .val{font:800 14px Arial,Helvetica,sans-serif!important;color:#111!important;margin:3px 0 0!important}
  body.print-report .kpi .hint{font:10px Arial,Helvetica,sans-serif!important;color:#334155!important}
  body.print-report table{
    width:100%!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
    table-layout:fixed!important;
    background:#fff!important;
    color:#111!important;
    font:10.5px Arial,Helvetica,sans-serif!important;
  }
  body.print-report th{
    background:#fff!important;
    color:#003764!important;
    border:0!important;
    border-bottom:1px solid #222!important;
    padding:5px 6px!important;
    text-align:left!important;
    text-transform:none!important;
    letter-spacing:0!important;
    font-weight:800!important;
    text-decoration:underline!important;
  }
  body.print-report td{
    background:#fff!important;
    color:#111!important;
    border:0!important;
    border-bottom:1px solid #e5e7eb!important;
    padding:5px 6px!important;
    vertical-align:top!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.print-report td.num,
  body.print-report th.num{text-align:right!important;white-space:nowrap!important}
  body.print-report .totalrow td{
    border-top:1px solid #222!important;
    border-bottom:0!important;
    font-weight:800!important;
    color:#003764!important;
  }
  body.print-report .badge{
    background:#fff!important;
    border:1px solid #999!important;
    color:#111!important;
    padding:1px 4px!important;
  }
  body.print-report .callout{display:none!important}
  body.print-bank-history{background:#fff;color:#111}
  body.print-bank-history .rail,
  body.print-bank-history .topbar,
  body.print-bank-history .tabbar,
  body.print-bank-history .flyout,
  body.print-bank-history .scrim,
  body.print-bank-history .page-head,
  body.print-bank-history .toolbar,
  body.print-bank-history .callout,
  body.print-bank-history #bankhist-print-panel,
  body.print-bank-history #bankhist-summary,
  body.print-bank-history #bankhist-meta,
  body.print-bank-history #bankhist-table{display:none!important}
  body.print-bank-history .app{display:block;height:auto;overflow:visible}
  body.print-bank-history .main,
  body.print-bank-history .workspace{display:block;overflow:visible;padding:0;background:#fff}
  body.print-bank-history .card{display:none!important}
  body.print-bank-history #bankhist-print-card{display:block!important;border:0!important;box-shadow:none!important;padding:0!important;background:#fff!important;overflow:visible!important}
  body.print-bank-history #bankhist-print-preview{display:block!important;overflow:visible!important}
  body.print-bank-history .bank-print-page{max-width:none;min-height:0;width:100%;padding:0;border:0;box-shadow:none;margin:0}
  body.print-bank-history .bank-print-title{margin-bottom:28px}
  body.print-bank-history .bank-print-info{margin-bottom:14px}
  body.print-bank-history .bank-print-table{font-size:10.5px}
  body.print-bank-history .bank-print-page.cols-11 .bank-print-table,
  body.print-bank-history .bank-print-page.cols-12 .bank-print-table{font-size:9px}
}