/* Voxel Veda: the only source of semantic colours for ERP, roles and Finance. */
:root {
  color-scheme: light;
  --page:#F4F7FB; --surface:#FFFFFF; --surface-muted:#F1F5F9;
  --text-primary:#0F172A; --text-secondary:#475569;
  --border:#CBD5E1; --control-border:#64748B;
  --primary:#1D4ED8; --on-primary:#FFFFFF; --focus:#1D4ED8;
  --success:#166534; --success-bg:#DCFCE7; --danger:#991B1B; --danger-bg:#FEE2E2;
  --warning:#854D0E; --warning-bg:#FEF3C7;
  --nav:#0F172A; --nav-hover:#1E293B; --nav-text:#F8FAFC;
  --hero:var(--nav); --hero-text:var(--nav-text); --track:#CBD5E1;
  --hero-bg:var(--hero); --nav-bg:var(--nav);
  --series-0:#1D4ED8; --series-1:#166534; --series-2:#B91C1C;
  --series-3:#A16207; --series-4:#6D28D9; --series-5:#0E7490;
  --scrim:rgba(15,23,42,.45); --shadow:0 3px 14px rgba(15,23,42,.08);
  --vv-sidebar-width:248px; --mobile-primary-height:64px; --radius:12px;
  /* Compatibility aliases are references, never independent themes. */
  --vv-bg:var(--page); --vv-bg-raised:var(--surface-muted);
  --vv-surface:var(--surface); --vv-surface-2:var(--surface-muted); --vv-surface-3:var(--surface-muted);
  --vv-line:var(--border); --vv-line-strong:var(--control-border);
  --vv-text:var(--text-primary); --vv-muted:var(--text-secondary); --vv-soft:var(--text-secondary);
  --vv-accent:var(--primary); --vv-accent-strong:var(--primary); --vv-accent-2:var(--primary);
  --vv-info:var(--primary); --vv-warning:var(--warning); --vv-danger:var(--danger); --vv-success:var(--success); --vv-shadow:var(--shadow);
  --erp-blue:var(--primary); --erp-ink:var(--text-primary); --erp-muted:var(--text-secondary);
  --finance-line:var(--border); --finance-line-strong:var(--control-border); --finance-panel:var(--surface); --finance-panel-2:var(--surface-muted);
  --bg:var(--page); --card:var(--surface); --ink:var(--text-primary); --muted:var(--text-secondary); --line:var(--border);
  --dark:var(--primary); --accent:var(--primary); --good:var(--success); --bad:var(--danger); --warn:var(--warning); --accent-soft:var(--surface-muted);
  --panel:var(--surface); --accent-2:var(--primary); --text:var(--text-primary);
  --shell-bg:var(--page); --shell-panel:var(--surface); --shell-border:var(--border); --shell-cyan:var(--primary); --shell-blue:var(--primary); --shell-text-soft:var(--text-secondary);
  --vv-bg-soft:var(--surface-muted); --vv-panel:var(--surface); --vv-panel-2:var(--surface-muted); --vv-panel-3:var(--surface-muted); --vv-border:var(--border); --vv-border-strong:var(--control-border);
  --vv-cyan:var(--primary); --vv-blue:var(--primary); --vv-green:var(--success); --panel-strong:var(--surface-muted); --accent-3:var(--warning);
  --soft-shadow:var(--shadow); --glow-shadow:var(--shadow); --bg-soft:var(--surface-muted); --panel-glass:var(--surface);
  --border-strong:var(--control-border); --vv-bg-0:var(--page); --vv-bg-1:var(--surface-muted);
  --vv-card:var(--surface); --vv-card-2:var(--surface-muted); --vv-glow:var(--shadow);
  --role-accent:var(--primary); --role-soft:var(--surface-muted); --role-border:var(--border); --surface-2:var(--surface-muted); --panel2:var(--surface-muted);
}
:root[data-color-mode="dark"] {
  color-scheme:dark;
  --page:#0B1220; --surface:#172033; --surface-muted:#243247;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --border:#475569; --control-border:#94A3B8;
  --primary:#93C5FD; --on-primary:#0B1220; --focus:#93C5FD;
  --success:#86EFAC; --success-bg:#143728; --danger:#FCA5A5; --danger-bg:#452027; --warning:#FDE68A; --warning-bg:#40351A;
  --track:#475569; --series-0:#93C5FD; --series-1:#86EFAC; --series-2:#FCA5A5;
  --series-3:#FDE68A; --series-4:#C4B5FD; --series-5:#67E8F9;
  --shadow:0 3px 14px rgba(0,0,0,.22);
}
html { background:var(--page); scroll-padding-bottom:calc(var(--mobile-primary-height) + 32px); }
body { background:var(--page); color:var(--text-primary); font-size:16px; line-height:1.5; }
*, *::before, *::after { box-sizing:border-box; }
[hidden], .hidden-section { display:none !important; }
button, input, select, textarea { font:inherit; }
button, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height:44px; }
input, select, textarea { color:var(--text-primary); background:var(--surface); border-color:var(--control-border); }
input::placeholder, textarea::placeholder { color:var(--text-secondary); opacity:1; }
:focus-visible { outline:3px solid var(--focus) !important; outline-offset:3px; }
button:disabled, input:disabled, select:disabled { cursor:not-allowed; color:var(--text-secondary); background:var(--surface-muted); opacity:1; }
body::before, body::after, .chart-card::before, .supplier-payables-shell::before { display:none; }
.vv-brand-presence, #vvGlobalBrandPresence { display:none; }
.logo-img, .shell-brand img, .global-brand-logo { filter:none; opacity:1; }
.app-shell { display:block; min-height:100dvh; width:100%; }
.main { margin-left:var(--vv-sidebar-width); padding:24px; min-height:100dvh; width:auto; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:100; height:100dvh; overflow-y:auto; padding:20px 14px; transform:none; background:var(--nav); color:var(--nav-text); width:var(--vv-sidebar-width); }
.sidebar .sidebar-close { display:none; }
.mobile-sidebar-backdrop { position:fixed; inset:0; z-index:90; background:var(--scrim); opacity:0; pointer-events:none; }
.sidebar :is(h1,h2,p,span,label,a,summary,.nav-btn,.logout-btn) { color:var(--nav-text); }
.sidebar .nav-btn, .sidebar .nav-group-toggle { background:transparent; border-color:transparent; }
.sidebar .nav-btn:hover, .sidebar .nav-group-toggle:hover { background:var(--nav-hover); }
.sidebar .nav-btn.active, .sidebar a[aria-current="page"] { color:var(--on-primary); background:var(--primary); }
.sidebar .nav-btn.active span { color:var(--on-primary); }
.sidebar input { color:var(--nav-text); background:var(--nav-hover); border-color:var(--control-border); }
.sidebar input::placeholder { color:#CBD5E1; }
.main, .fm-main, .page-section, .fm-content, .card, .fm-card { min-width:0; }
.topbar, .vv-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; position:relative; margin-bottom:20px; padding:14px; background:var(--surface); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius); width:100%; }
.topbar-menu-btn { display:none; }
.topbar :is(h2,p,span) { color:var(--text-primary); }
.vv-theme-toggle { border:1px solid var(--control-border); background:var(--surface); color:var(--text-primary); border-radius:8px; padding:8px 12px; min-height:44px; white-space:nowrap; }
.card { min-height:0; overflow:visible; }
.money, .amount, .kpi-value, .fm-kpi strong, td.numeric, .supplier-payables-value { font-variant-numeric:tabular-nums; }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) !important; gap:16px; }
.vv-chart-frame { position:relative; height:260px; min-width:0; }
.vv-chart-frame canvas { max-width:100%; width:100% !important; height:100% !important; }
.vv-chart-context { color:var(--text-secondary); font-size:14px; margin:0 0 12px; }
.vv-chart-data { display:grid; gap:4px; margin:12px 0 0; padding:0; list-style:none; }
.vv-chart-data button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:var(--surface); color:var(--text-primary); }
.vv-chart-data button span { overflow-wrap:anywhere; }
.vv-chart-data strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.vv-chart-empty { padding:20px; background:var(--surface-muted); color:var(--text-secondary); }
.supplier-payables-grid, .supplier-payables-intel-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.supplier-payables-shell, .supplier-payables-panel, .supplier-payables-category, .supplier-payables-upcoming, .supplier-payables-exposure { background:var(--surface); color:var(--text-primary); border-color:var(--border); }
.supplier-payables-shell :is(h2,h3,strong,b), .supplier-payables-category :is(h3,strong,b), .supplier-payables-upcoming :is(h3,strong,b) { color:var(--text-primary); }
.supplier-payables-shell :is(p,small,.muted) { color:var(--text-secondary); }
.supplier-payables-stat { background:var(--surface-muted); color:var(--text-primary); min-width:0; }
.supplier-payables-stat strong { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.supplier-payables-bar { background:var(--track); height:10px; }
.supplier-payables-bar i { background:var(--primary); }
.supplier-intelligence-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important; }
.supplier-orbit-card, .supplier-flow-card, .supplier-queue-card, .supplier-flow-row, .supplier-upcoming-item, .supplier-exposure-card { background:var(--surface); color:var(--text-primary); border:1px solid var(--border); box-shadow:none; min-width:0; }
.supplier-orbit-card :is(strong,h4,span), .supplier-flow-card :is(strong,h4), .supplier-queue-card :is(strong,h4), .supplier-exposure-card :is(strong,span) { color:var(--text-primary); }
.supplier-orbit-card :is(small,p), .supplier-flow-label span, .supplier-flow-money span, .supplier-upcoming-item span, .supplier-exposure-card small { color:var(--text-secondary); }
.supplier-flow-list, .supplier-upcoming-list { max-height:460px; overflow:auto; padding:4px; }
.supplier-flow-row { display:grid; grid-template-columns:1fr; width:100%; padding:12px; text-align:left; gap:8px; }
.supplier-flow-label, .supplier-flow-money { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.supplier-flow-track { width:100%; height:10px; background:var(--track); border-radius:5px; }
.supplier-flow-fill { display:block; height:100%; background:var(--primary); border-radius:5px; }
.supplier-upcoming-item { width:100%; padding:12px; text-align:left; grid-template-columns:32px minmax(0,1fr); gap:8px; }
.supplier-upcoming-item > div:last-child { grid-column:2; text-align:left; }
.supplier-exposure-card { text-align:left; padding:12px; }
.supplier-orbit-core.vv-payable-summary { position:static; inset:auto; transform:none; background:var(--surface); padding:8px; width:auto; border:0; }
.vv-summary-link { background:transparent; color:var(--text-primary); border:0; text-align:left; padding:4px; max-width:100%; }
.vv-chart-details summary { padding:10px 4px; cursor:pointer; color:var(--primary); min-height:44px; }
.vv-filter-context { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px; background:var(--surface-muted); border:1px solid var(--border); border-radius:8px; }
.vv-filter-context button { border:1px solid var(--control-border); border-radius:6px; background:var(--surface); color:var(--text-primary); padding:6px 12px; }
.vv-primary-nav { display:none; }
/* Finance sits inside the same ERP shell. Its department menu is contextual. */
.fm-shell { display:block; }
.finance-os-page .main.fm-main { margin-left:var(--vv-sidebar-width); padding:20px 24px; width:auto; }
.fm-topbar { position:static; background:transparent; padding:12px 0; }
.fm-department-nav { margin:14px 0; }
.fm-department-nav #fmNav { display:flex; gap:8px; flex-wrap:wrap; }
.fm-department-nav .fm-nav-group { position:relative; min-width:0; margin:0; }
.fm-department-nav summary { cursor:pointer; min-height:44px; display:flex; align-items:center; padding:8px 14px; border:1px solid var(--control-border); border-radius:8px; color:var(--text-primary); background:var(--surface); font-size:14px; }
.fm-department-nav .fm-nav-items { position:absolute; z-index:40; top:100%; left:0; min-width:220px; max-height:55dvh; overflow:auto; padding:8px; background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--border); border-radius:10px; }
.fm-department-nav .fm-nav-btn { color:var(--text-primary); background:var(--surface); font-size:14px; width:100%; min-height:44px; text-align:left; }
.fm-department-nav .fm-nav-btn span { display:inline-flex; align-items:center; justify-content:center; width:30px; margin-right:8px; background:transparent; color:inherit; }
.fm-department-nav .fm-nav-btn.active { background:var(--primary); color:var(--on-primary); }
.fm-department-nav .fm-nav-btn.active span { color:var(--on-primary); }
.fm-nav-search { display:block; max-width:380px; margin:8px 0; }
.fm-workspace-shortcuts { display:flex; gap:8px; flex-wrap:wrap; }
.fm-workspace-shortcuts button { min-height:44px; background:var(--surface); color:var(--text-primary); border:1px solid var(--control-border); padding:8px 12px; border-radius:8px; }
.fm-filterbar { display:flex; flex-wrap:wrap; overflow:visible; }
.fm-filterbar label { min-width:140px; flex:1 1 140px; }
.fm-filterbar input, .fm-filterbar select { width:100%; }
.finance-os-page :is(p,label,small,td,th,.fm-helper,.fm-chart-row,.fm-badge) { font-size:14px; }
.fm-account-cat-head { display:flex; justify-content:space-between; align-items:start; gap:8px; flex-wrap:wrap; }
.fm-account-cat-chart { min-width:0; }
.fm-account-cat-bars { display:grid; gap:8px; max-height:220px; overflow:auto; padding:4px; }
.fm-account-cat-chart.full .fm-account-cat-bars { max-height:320px; }
.fm-account-cat-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; width:100%; min-height:54px; text-align:left; padding:8px 10px; border:1px solid var(--border); border-radius:8px; color:var(--text-primary); background:var(--surface); }
.fm-account-cat-bar > span { white-space:normal; overflow-wrap:anywhere; font-size:14px; }
.fm-account-cat-bar > strong { font-size:14px; font-variant-numeric:tabular-nums; }
.fm-account-cat-barbox { display:block; grid-column:1/-1; height:8px; background:var(--track); border-radius:4px; }
.fm-account-cat-barbox i { display:block; height:100%; min-height:0; border-radius:4px; background:var(--primary); }
.fm-account-cat-bar small { grid-column:1/-1; color:var(--text-secondary); }
.finance-os-page .fac-category-scroll { display:grid; gap:8px; max-height:360px; overflow:auto; padding:4px; }
.finance-os-page .fac-category-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; width:100%; min-height:54px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-primary); text-align:left; }
.finance-os-page .fac-category-row :is(span,small) { font-size:14px; overflow-wrap:anywhere; }
.finance-os-page .fac-category-row .fac-category-bar-area { grid-column:1/-1; height:8px; background:var(--track); width:100%; }
.finance-os-page .fac-category-row .fac-category-bar-area .fac-category-bar { display:block; min-height:0; height:100%; background:var(--primary); border-radius:5px; }
.fm-account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.fm-secondary-actions { position:relative; }
.fm-secondary-actions summary { min-height:44px; padding:8px 12px; cursor:pointer; border:1px solid var(--control-border); border-radius:8px; }
.fm-secondary-actions[open] > div { position:absolute; z-index:20; right:0; display:grid; gap:6px; min-width:180px; padding:8px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.fm-drawer { height:100dvh; padding-bottom:env(safe-area-inset-bottom,0px); }
.fm-modal { max-height:calc(100dvh - 24px); max-width:calc(100vw - 24px); }
.fm-modal-body { overflow:auto; max-height:calc(100dvh - 160px); }
.fm-notice.error { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.fm-notice.success { background:var(--success-bg); color:var(--success); border-color:var(--success); }
@media(max-width:1023px) {
  .main, .finance-os-page .main.fm-main { margin-left:0; padding:16px 12px calc(var(--mobile-primary-height) + 24px + env(safe-area-inset-bottom,0px)); width:100%; }
  .sidebar { max-width:calc(100vw - 44px); transform:translateX(-110%); }
  .sidebar .sidebar-close { display:block; margin-left:auto; width:44px; background:var(--nav-hover); color:var(--nav-text); border:1px solid var(--control-border); }
  body.mobile-menu-open .sidebar { transform:translateX(0); }
  body.mobile-menu-open .mobile-sidebar-backdrop { opacity:1; pointer-events:auto; }
  body.mobile-menu-open, body.vv-scroll-locked { overflow:hidden; }
  .topbar-menu-btn { display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:44px; min-width:44px; background:var(--surface); border:1px solid var(--control-border); border-radius:8px; }
  .topbar-menu-btn span { display:block; width:20px; height:2px; background:var(--text-primary); }
  .mobile-bottom-nav, .fm-mobile-nav { display:none !important; }
  .vv-primary-nav { position:fixed; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); z-index:75; left:0; right:0; bottom:0; height:calc(var(--mobile-primary-height) + env(safe-area-inset-bottom,0px)); padding:4px 6px env(safe-area-inset-bottom,0px); background:var(--surface); border-top:1px solid var(--control-border); box-shadow:var(--shadow); }
  .vv-primary-nav a, .vv-primary-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:var(--text-secondary); background:transparent; border:0; font-size:14px; min-height:44px; padding:4px; }
  .vv-primary-nav [aria-current="page"] { color:var(--primary); font-weight:700; }
  .topbar, .fm-topbar, .fm-top-actions { flex-wrap:wrap; min-width:0; }
  .topbar-actions { gap:8px; flex-wrap:wrap; }
  .fm-search { display:flex; width:100%; min-width:0; }
  .fm-grid, .fm-grid-2, .fm-account-grid { grid-template-columns:1fr; }
  .fm-department-nav .fm-nav-items { position:fixed; top:auto; left:12px; right:12px; min-width:0; max-height:50dvh; }
}
@media(max-width:430px) {
  .chart-grid { grid-template-columns:1fr !important; }
  .vv-chart-frame { height:240px; }
  .supplier-payables-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-top-actions { width:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media print { .sidebar,.topbar,.vv-primary-nav,.fm-department-nav { display:none !important; } .main,.finance-os-page .main.fm-main { margin:0; padding:0; } }

.vv-cash-values { display:flex; flex-wrap:wrap; align-items:center; gap:6px; justify-content:flex-end; }
.vv-cash-values button { min-height:44px; color:var(--text-primary); background:var(--surface); border:1px solid var(--control-border); border-radius:6px; padding:6px 10px; }
.fm-chart-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.fm-chart-row .vv-cash-values { grid-column:1/-1; font-size:14px; font-variant-numeric:tabular-nums; }
.fac-category-value { justify-self:end; }
.fac-category-label { grid-row:1; grid-column:1; }
.fac-category-count { grid-column:1/-1; color:var(--text-secondary); }