/* ============================================================ Arbah v2 — Budget surface (portfolio budget rebuild) Bespoke layout for the flag-gated v2 Budget DOM emitted by src/pages/Budget.js (BudgetV2) + src/components/budget/*. Nothing here applies unless carries .arbah-v2, so the legacy AND v1 paint stay byte-identical when the flag is off. Built on --arbah-v2-* tokens + the v2 primitives layer (.kpi, .card, .chip, .btn-*, .pbar, .page-title). Owns only the budget-specific scaffolding: page shell, header, KPI grid, planned-vs-actual bars, the category + project tables, and the expense log. !important policy: 0. RTL: logical properties throughout; the bar strip is rendered dir=ltr in the markup so planned/actual overlays read left-anchored in both directions. SAR amounts are mono. ============================================================ */ .arbah-v2 .budget-v2-page { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); max-width: 1200px; margin-inline: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; } /* -- Header ------------------------------------------------- */ .arbah-v2 .budget-v2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .arbah-v2 .budget-v2-header-main { min-width: 0; } .arbah-v2 .budget-v2-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .arbah-v2 .budget-v2-input { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); padding: 8px 12px; font-family: var(--arbah-v2-font-sans); font-size: 13px; color: var(--arbah-v2-ink); } .arbah-v2 .budget-v2-input:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); } .arbah-v2 .budget-v2-scope { height: 36px; max-width: 220px; } /* -- KPI row ------------------------------------------------ */ .arbah-v2 .budget-v2-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1080px) { .arbah-v2 .budget-v2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 880px) { .arbah-v2 .budget-v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .arbah-v2 .budget-v2-kpis { grid-template-columns: minmax(0, 1fr); } } /* Left status rail per tone. */ .arbah-v2 .budget-v2-kpi { position: relative; overflow: hidden; } .arbah-v2 .budget-v2-kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--arbah-v2-border-strong); } .arbah-v2 .budget-v2-kpi.is-brand::before { background: var(--arbah-v2-brand); } .arbah-v2 .budget-v2-kpi.is-info::before { background: var(--arbah-v2-info); } .arbah-v2 .budget-v2-kpi.is-success::before { background: var(--arbah-v2-success); } .arbah-v2 .budget-v2-kpi.is-warning::before { background: var(--arbah-v2-warning); } .arbah-v2 .budget-v2-kpi.is-danger::before { background: var(--arbah-v2-danger); } .arbah-v2 .budget-v2-kpi .kpi-value bdi { unicode-bidi: isolate; } /* -- Section card ------------------------------------------- */ .arbah-v2 .budget-v2-section { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .arbah-v2 .budget-v2-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .arbah-v2 .budget-v2-section-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 15px; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .budget-v2-section-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } .arbah-v2 .budget-v2-section-sub { font-size: 12.5px; color: var(--arbah-v2-ink-muted); margin-top: 2px; } /* -- Legend ------------------------------------------------- */ .arbah-v2 .budget-v2-legend { display: inline-flex; gap: 14px; } .arbah-v2 .budget-v2-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .budget-v2-swatch { width: 12px; height: 12px; border-radius: 3px; } .arbah-v2 .budget-v2-swatch.is-planned { background: var(--arbah-v2-border-strong); } .arbah-v2 .budget-v2-swatch.is-actual { background: var(--arbah-v2-brand); } /* -- Planned-vs-actual bars --------------------------------- */ .arbah-v2 .budget-v2-bars { display: flex; flex-direction: column; gap: 10px; } .arbah-v2 .budget-v2-bar-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px; } .arbah-v2 .budget-v2-bar-label { font-size: 12.5px; color: var(--arbah-v2-ink); display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .arbah-v2 .budget-v2-cat-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; } .arbah-v2 .budget-v2-bar-track { position: relative; height: 16px; background: var(--arbah-v2-surface-sunken); border-radius: 999px; overflow: hidden; } .arbah-v2 .budget-v2-bar { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; transition: width 200ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .budget-v2-bar-planned { background: var(--arbah-v2-border-strong); opacity: .55; } .arbah-v2 .budget-v2-bar-actual.is-success { background: var(--arbah-v2-success); } .arbah-v2 .budget-v2-bar-actual.is-warning { background: var(--arbah-v2-warning); } .arbah-v2 .budget-v2-bar-actual.is-danger { background: var(--arbah-v2-danger); } .arbah-v2 .budget-v2-bar-amt { font-family: var(--arbah-v2-font-mono); font-size: 12px; color: var(--arbah-v2-ink-muted); font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; } /* -- Tables (category, project, expense) -------------------- */ .arbah-v2 .budget-v2-table-scroll { overflow-x: auto; } .arbah-v2 .budget-v2-cat-table, .arbah-v2 .budget-v2-proj-table, .arbah-v2 .budget-v2-expense-table { width: 100%; border-collapse: collapse; font-size: 13px; } .arbah-v2 .budget-v2-cat-table th, .arbah-v2 .budget-v2-proj-table th, .arbah-v2 .budget-v2-expense-table th { text-align: start; padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--arbah-v2-ink-subtle); border-bottom: 1px solid var(--arbah-v2-border); white-space: nowrap; } .arbah-v2 .budget-v2-cat-table td, .arbah-v2 .budget-v2-proj-table td, .arbah-v2 .budget-v2-expense-table td { padding: 9px 10px; border-bottom: 1px solid var(--arbah-v2-border); color: var(--arbah-v2-ink-muted); vertical-align: middle; } .arbah-v2 .budget-v2-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .arbah-v2 .budget-v2-num bdi { unicode-bidi: isolate; font-family: var(--arbah-v2-font-mono); } .arbah-v2 .budget-v2-proj-name { color: var(--arbah-v2-ink); font-weight: 500; } .arbah-v2 .budget-v2-cat-table td:first-child { color: var(--arbah-v2-ink); font-weight: 500; display: flex; align-items: center; gap: 8px; } /* Σ totals footer (design BudgetCategoryTable total row): stronger top seam, sunken surface, semibold ink. Values inherit the mono .budget-v2-num style. */ .arbah-v2 .budget-v2-cat-total td { border-top: 1.5px solid var(--arbah-v2-border-strong); border-bottom: none; background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink); font-weight: 600; } .arbah-v2 .is-over { color: var(--arbah-v2-danger); } .arbah-v2 .is-under { color: var(--arbah-v2-success); } .arbah-v2 .budget-v2-util { display: inline-flex; align-items: center; padding-inline: 8px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 600; } .arbah-v2 .budget-v2-util.chip-success { background: var(--arbah-v2-success-soft); color: var(--arbah-v2-success); } .arbah-v2 .budget-v2-util.chip-warning { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); } .arbah-v2 .budget-v2-util.chip-danger { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } /* Project mini utilization bar */ .arbah-v2 .budget-v2-util-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } .arbah-v2 .budget-v2-mini-bar { width: 80px; } /* -- Expense log -------------------------------------------- */ .arbah-v2 .budget-v2-check-col { width: 36px; } .arbah-v2 .budget-v2-expense-table tr.is-selected { background: var(--arbah-v2-navy-100); } .arbah-v2 .budget-v2-exp-desc { color: var(--arbah-v2-ink); font-weight: 500; } .arbah-v2 .budget-v2-exp-proj { font-size: 11px; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .budget-v2-exp-vendor { font-size: 12px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .budget-v2-exp-date { font-size: 12px; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .budget-v2-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .arbah-v2 .budget-v2-amount { font-family: var(--arbah-v2-font-mono); font-weight: 600; color: var(--arbah-v2-ink); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .arbah-v2 .budget-v2-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; } .arbah-v2 .budget-v2-empty-cell { text-align: center; padding: 28px; color: var(--arbah-v2-ink-subtle); } /* -- Modal chrome (Add/Edit expense) ------------------------ */ .arbah-v2 .budget-v2-page .modal-panel { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-md); font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } .arbah-v2 .budget-v2-page .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--arbah-v2-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .arbah-v2 .budget-v2-page .modal-title { font-family: var(--arbah-v2-font-display); font-weight: 500; font-size: 18px; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .budget-v2-page .modal-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } .arbah-v2 .budget-v2-page .modal-body { padding: 20px; } .arbah-v2 .budget-v2-page .modal-body input, .arbah-v2 .budget-v2-page .modal-body select { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .budget-v2-page .modal-body input:focus, .arbah-v2 .budget-v2-page .modal-body select:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); }