/* ============================================================ Arbah v2 — Invoices surface (§31 ZATCA customer invoices) Bespoke layout for the flag-gated v2 Invoices page DOM emitted by src/pages/Invoices.js (InvoicesV2) + src/components/invoices/*. 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 (arbah-v2-tokens.css) and the v2 primitives layer (arbah-v2-primitives.css: .kpi, .tabs/.tab, .chip, .card/.card-hero, .ribbon-*, .btn-*, .empty, .page-title). This file owns ONLY the invoices-specific scaffolding: the page shell, header, KPI grid, toolbar (status tabs + project filter), the list rows, and the detail-modal chrome. Cross-surface guard: EVERY rule is nested under an invoices-only .invoices-v2-* root (or .invoices-v2-page for the modal chrome). This file does NOT target the shared .transactions-table / .txn-status / .accounting-filters / .accounting-page classes at all — the v2 rebuild stopped emitting them, so Cashflow / Accounting / Finance are untouched. !important policy: 0. RTL: logical properties throughout (inset-inline, padding-inline, margin-inline) + flex/grid source order, so the status accent, the row amount, and the modal columns all mirror under dir=rtl with no direction-specific overrides. Invoice numbers + SAR amounts are wrapped in in the markup so they stay LTR inside an AR row. ============================================================ */ /* -- Page shell --------------------------------------------- */ .arbah-v2 .invoices-v2-page { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); max-width: 1100px; margin-inline: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; } /* -- Header ------------------------------------------------- */ .arbah-v2 .invoices-v2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .arbah-v2 .invoices-v2-header-main { min-width: 0; } /* -- KPI row ------------------------------------------------ */ .arbah-v2 .invoices-v2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 880px) { .arbah-v2 .invoices-v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .arbah-v2 .invoices-v2-kpis { grid-template-columns: minmax(0, 1fr); } } /* .kpi chrome + .kpi-value (Plex Serif, tabular-nums) come from the primitives layer. The amount is bidi-isolated so SAR stays LTR. */ .arbah-v2 .invoices-v2-kpi .kpi-value bdi { unicode-bidi: isolate; } /* -- Toolbar (status tabs + project filter) ----------------- */ .arbah-v2 .invoices-v2-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .arbah-v2 .invoices-v2-tabs { flex-wrap: wrap; max-width: 100%; } .arbah-v2 .invoices-v2-tab-count { margin-inline-start: 6px; height: 18px; min-width: 18px; padding-inline: 6px; font-size: 10.5px; } .arbah-v2 .invoices-v2-project-filter { height: 30px; padding-block: 0; font-size: 13px; max-width: 220px; } /* -- Shared input chrome (filter select + modal inputs) ----- */ .arbah-v2 .invoices-v2-input { width: 100%; 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); transition: border-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .invoices-v2-input::placeholder { color: var(--arbah-v2-ink-subtle); } .arbah-v2 .invoices-v2-input:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); } .arbah-v2 .invoices-v2-input:disabled { background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink-muted); cursor: not-allowed; } .arbah-v2 textarea.invoices-v2-input { resize: none; line-height: 1.5; } /* -- List --------------------------------------------------- */ .arbah-v2 .invoices-v2-list { display: flex; flex-direction: column; gap: 10px; } /* Each row is a clickable .card-dense with a status accent on the inline-start edge. */ .arbah-v2 .invoices-v2-row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; text-align: start; padding-inline-start: 18px; cursor: pointer; overflow: hidden; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .invoices-v2-row:focus-visible { outline: 2px solid var(--arbah-v2-brand); outline-offset: 2px; } .arbah-v2 .invoices-v2-row:hover { background: var(--arbah-v2-surface-sunken); box-shadow: var(--arbah-v2-shadow-md); } .arbah-v2 .invoices-v2-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--arbah-v2-border-strong); } .arbah-v2 .invoices-v2-row.is-draft::before { background: var(--arbah-v2-border-strong); } .arbah-v2 .invoices-v2-row.is-issued::before { background: var(--arbah-v2-info); } .arbah-v2 .invoices-v2-row.is-paid::before { background: var(--arbah-v2-success); } .arbah-v2 .invoices-v2-row.is-cancelled::before { background: var(--arbah-v2-danger); } .arbah-v2 .invoices-v2-row.is-overdue::before { background: var(--arbah-v2-danger); } .arbah-v2 .invoices-v2-row-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .arbah-v2 .invoices-v2-row-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Invoice number — Plex Mono, tabular, bidi-isolated. */ .arbah-v2 .invoices-v2-number { font-family: var(--arbah-v2-font-mono); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--arbah-v2-ink); unicode-bidi: isolate; } .arbah-v2 .invoices-v2-row-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-customer { font-weight: 600; color: var(--arbah-v2-ink); unicode-bidi: plaintext; } .arbah-v2 .invoices-v2-dot { color: var(--arbah-v2-ink-subtle); } .arbah-v2 .invoices-v2-date { color: var(--arbah-v2-ink-subtle); } /* Issue + derived due date line. */ .arbah-v2 .invoices-v2-row-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .invoices-v2-due-late { color: var(--arbah-v2-danger); font-weight: 600; } /* Payment progress bar (.pbar from primitives) + label. Binary fill reflects the real paid/unpaid status — partial fractions aren't tracked, so it reads full (paid) or empty (unpaid). */ .arbah-v2 .invoices-v2-pay { display: flex; align-items: center; gap: 8px; margin-top: 2px; max-width: 280px; } .arbah-v2 .invoices-v2-pbar { flex: 1; } .arbah-v2 .invoices-v2-pay-label { font-size: 11px; color: var(--arbah-v2-ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Trailing column: amount stacked over the inline row actions. */ .arbah-v2 .invoices-v2-row-trail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .arbah-v2 .invoices-v2-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* .btn-sm/.btn-ghost chrome comes from the primitives layer; just keep the inline icons snug. */ .arbah-v2 .invoices-v2-act { gap: 4px; } /* Amount — prominent, Plex Serif, tabular, bidi-isolated. */ .arbah-v2 .invoices-v2-amount { font-family: var(--arbah-v2-font-display); font-weight: 500; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--arbah-v2-ink); unicode-bidi: isolate; white-space: nowrap; } .arbah-v2 .invoices-v2-empty { padding-block: 44px; } /* ============================================================ Detail modal — rendered as a descendant of .invoices-v2-page (no portal), so ancestor-scoped selectors reach the panel. Paint only; backdrop + positioning stay with the legacy Modal sheet. ============================================================ */ .arbah-v2 .invoices-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 .invoices-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 .invoices-v2-page .modal-title { font-family: var(--arbah-v2-font-display); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .invoices-v2-page .modal-title, [dir="rtl"] .arbah-v2 .invoices-v2-page .modal-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); font-weight: 600; } .arbah-v2 .invoices-v2-page .modal-header .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--arbah-v2-radius-sm); background: transparent; color: var(--arbah-v2-ink-muted); cursor: pointer; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .invoices-v2-page .modal-header .icon-btn:hover { background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink); } .arbah-v2 .invoices-v2-page .modal-body { padding: 20px; } /* -- Modal body layout -------------------------------------- */ .arbah-v2 .invoices-v2-modal { display: flex; flex-direction: column; gap: 16px; } /* Status header on card-hero with the status ribbon. */ .arbah-v2 .invoices-v2-modal-head { display: flex; flex-direction: column; gap: 8px; } .arbah-v2 .invoices-v2-modal-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .arbah-v2 .invoices-v2-modal-number { font-family: var(--arbah-v2-font-mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--arbah-v2-ink); unicode-bidi: isolate; } .arbah-v2 .invoices-v2-modal-meta { font-size: 12.5px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-field { display: flex; flex-direction: column; gap: 6px; } .arbah-v2 .invoices-v2-label, .arbah-v2 .invoices-v2-section-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-section-label { margin-bottom: 8px; } /* Customer card. */ .arbah-v2 .invoices-v2-customer-card { padding: 14px 16px; } .arbah-v2 .invoices-v2-customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .arbah-v2 .invoices-v2-span2 { grid-column: 1 / -1; } @media (max-width: 520px) { .arbah-v2 .invoices-v2-customer-grid { grid-template-columns: minmax(0, 1fr); } .arbah-v2 .invoices-v2-span2 { grid-column: auto; } } /* Line items table. */ .arbah-v2 .invoices-v2-lines-table { width: 100%; border-collapse: collapse; font-size: 13px; } .arbah-v2 .invoices-v2-lines-table th { text-align: start; padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--arbah-v2-ink-subtle); border-bottom: 1px solid var(--arbah-v2-border); } .arbah-v2 .invoices-v2-lines-table td { padding: 4px 8px; border-bottom: 1px solid var(--arbah-v2-border); vertical-align: middle; } .arbah-v2 .invoices-v2-num-col { text-align: end; width: 96px; } .arbah-v2 .invoices-v2-num-col.invoices-v2-line-total { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--arbah-v2-ink-muted); white-space: nowrap; } .arbah-v2 .invoices-v2-rm-col { width: 64px; text-align: end; } .arbah-v2 .invoices-v2-line-input { padding: 5px 8px; font-size: 13px; } .arbah-v2 .invoices-v2-num { text-align: end; font-variant-numeric: tabular-nums; } .arbah-v2 .invoices-v2-add-line { margin-top: 10px; } /* Totals card. */ .arbah-v2 .invoices-v2-totals { display: flex; flex-direction: column; gap: 8px; } .arbah-v2 .invoices-v2-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-total-row .invoices-v2-amount { font-size: 14px; } .arbah-v2 .invoices-v2-total-grand { padding-top: 8px; border-top: 1px solid var(--arbah-v2-border); color: var(--arbah-v2-ink); font-weight: 700; } .arbah-v2 .invoices-v2-total-grand .invoices-v2-amount { font-size: 19px; font-weight: 600; } /* Notes. */ .arbah-v2 .invoices-v2-notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 520px) { .arbah-v2 .invoices-v2-notes-grid { grid-template-columns: minmax(0, 1fr); } } .arbah-v2 .invoices-v2-form-error { font-size: 13px; color: var(--arbah-v2-danger); } /* Action footer. */ .arbah-v2 .invoices-v2-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--arbah-v2-border); } /* ============================================================ Arbah v2 — Invoices MOCKUP REBUILD (flag-gated, appended) Outstanding hero + 4 KPI tiles + toolbar controls + filters row + status tabs + Table/Cards toggle + invoice TABLE + right rail. Scoped to invoices-v2-* — does NOT touch shared .transactions-table / .txn-status (those stay owned by Cashflow/Accounting). RTL via logical properties; !important policy: 0. ============================================================ */ /* -- Header: title + outstanding hero + sub-stats ----------- */ .arbah-v2 .invoices-v2-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .invoices-v2-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } .arbah-v2 .invoices-v2-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .arbah-v2 .invoices-v2-hero-amount { font-family: var(--arbah-v2-font-mono); font-weight: 600; font-size: 30px; line-height: 1; color: var(--arbah-v2-warning); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; unicode-bidi: isolate; letter-spacing: -0.01em; } .arbah-v2 .invoices-v2-hero-label { font-size: 13px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-substats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-substats .invoices-v2-mono { color: var(--arbah-v2-ink); } .arbah-v2 .invoices-v2-flagged { color: var(--arbah-v2-ink-subtle); font-style: italic; cursor: help; } /* -- Toolbar controls (Filter / Columns / Export / reminder / new) -- */ .arbah-v2 .invoices-v2-toolbar-end { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .arbah-v2 .invoices-v2-cols { position: relative; } .arbah-v2 .invoices-v2-ctrl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); font-size: 13px; font-weight: 500; color: var(--arbah-v2-ink-muted); cursor: pointer; font-family: var(--arbah-v2-font-sans); } .arbah-v2 .invoices-v2-ctrl:hover { border-color: var(--arbah-v2-border-strong); color: var(--arbah-v2-ink); } .arbah-v2 .invoices-v2-ctrl.is-on { background: var(--arbah-v2-navy-100); border-color: var(--arbah-v2-brand); color: var(--arbah-v2-brand); } .arbah-v2 .invoices-v2-ctrl.is-disabled, .arbah-v2 .invoices-v2-ctrl:disabled { opacity: 0.5; cursor: not-allowed; } .arbah-v2 .invoices-v2-cols-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px; background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); box-shadow: var(--arbah-v2-shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .arbah-v2 .invoices-v2-cols-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--arbah-v2-radius-sm); font-size: 13px; color: var(--arbah-v2-ink); cursor: pointer; } .arbah-v2 .invoices-v2-cols-opt:hover { background: var(--arbah-v2-surface-sunken); } /* -- 4 KPI tiles (distinct from the legacy .invoices-v2-kpi rules) -- */ .arbah-v2 .invoices-v2-kpirow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .arbah-v2 .invoices-v2-kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .arbah-v2 .invoices-v2-kpirow { grid-template-columns: minmax(0, 1fr); } } .arbah-v2 .invoices-v2-kpitile { position: relative; overflow: hidden; 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-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; } .arbah-v2 .invoices-v2-kpitile::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--arbah-v2-border-strong); } .arbah-v2 .invoices-v2-kpitile.is-warning::before { background: var(--arbah-v2-warning); } .arbah-v2 .invoices-v2-kpitile.is-success::before { background: var(--arbah-v2-success); } .arbah-v2 .invoices-v2-kpitile.is-info::before { background: var(--arbah-v2-info); } .arbah-v2 .invoices-v2-kpitile.is-danger::before { background: var(--arbah-v2-danger); } .arbah-v2 .invoices-v2-kpitile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .arbah-v2 .invoices-v2-kpitile-label { font-family: var(--arbah-v2-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-kpitile-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--arbah-v2-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-kpitile-ic.is-warning { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); } .arbah-v2 .invoices-v2-kpitile-ic.is-success { background: var(--arbah-v2-success-soft); color: var(--arbah-v2-success); } .arbah-v2 .invoices-v2-kpitile-ic.is-info { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); } .arbah-v2 .invoices-v2-kpitile-ic.is-danger { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } .arbah-v2 .invoices-v2-kpitile-value { font-family: var(--arbah-v2-font-mono); font-weight: 600; font-size: 24px; line-height: 1.05; color: var(--arbah-v2-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.01em; } .arbah-v2 .invoices-v2-kpitile-value bdi { unicode-bidi: isolate; } .arbah-v2 .invoices-v2-kpitile-sub { font-size: 11px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-kpitile-sub.is-danger { color: var(--arbah-v2-danger); font-weight: 600; } .arbah-v2 .invoices-v2-kpitile-sub.is-flag { font-style: italic; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .invoices-v2-mono { font-family: var(--arbah-v2-font-mono); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } /* -- Filters row -------------------------------------------- */ .arbah-v2 .invoices-v2-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); padding: 12px 14px; } .arbah-v2 .invoices-v2-searchbox { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 220px; } .arbah-v2 .invoices-v2-search-ic { position: absolute; inset-inline-start: 10px; color: var(--arbah-v2-ink-subtle); pointer-events: none; display: inline-flex; } .arbah-v2 .invoices-v2-search { width: 100%; height: 36px; padding-inline: 34px 12px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); font-size: 13px; color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .invoices-v2-search:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16,42,67,.14); background: var(--arbah-v2-surface); } .arbah-v2 .invoices-v2-daterange { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-filters .invoices-v2-input { height: 36px; } /* -- Controls row: status tabs + view toggle --------------- */ .arbah-v2 .invoices-v2-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .arbah-v2 .invoices-v2-viewtoggle { display: inline-flex; padding: 2px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: 999px; } .arbah-v2 .invoices-v2-viewbtn { border: none; background: transparent; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--arbah-v2-ink-muted); cursor: pointer; font-family: var(--arbah-v2-font-sans); } .arbah-v2 .invoices-v2-viewbtn.is-on { background: var(--arbah-v2-surface); color: var(--arbah-v2-ink); box-shadow: var(--arbah-v2-shadow-sm); } /* -- Layout: main + right rail ------------------------------ */ .arbah-v2 .invoices-v2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; } @media (max-width: 980px) { .arbah-v2 .invoices-v2-layout { grid-template-columns: minmax(0, 1fr); } } .arbah-v2 .invoices-v2-main { min-width: 0; } /* -- Invoice TABLE (bespoke; not .transactions-table) ------- */ .arbah-v2 .invoices-v2-table-scroll { overflow-x: auto; 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-sm); } .arbah-v2 .invoices-v2-table { width: 100%; border-collapse: collapse; font-size: 13px; } .arbah-v2 .invoices-v2-table thead th { text-align: start; font-family: var(--arbah-v2-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--arbah-v2-ink-muted); padding: 12px 14px; border-bottom: 1px solid var(--arbah-v2-border); white-space: nowrap; } .arbah-v2 .invoices-v2-table .invoices-v2-th-amt, .arbah-v2 .invoices-v2-table .invoices-v2-td-amt { text-align: end; } .arbah-v2 .invoices-v2-table .invoices-v2-th-num, .arbah-v2 .invoices-v2-table .invoices-v2-td-num { white-space: nowrap; } .arbah-v2 .invoices-v2-trow { cursor: pointer; transition: background-color 110ms ease; } .arbah-v2 .invoices-v2-trow:hover { background: var(--arbah-v2-surface-sunken); } .arbah-v2 .invoices-v2-trow:focus-visible { outline: 2px solid var(--arbah-v2-brand); outline-offset: -2px; } .arbah-v2 .invoices-v2-table td { padding: 11px 14px; border-bottom: 1px solid var(--arbah-v2-border); vertical-align: middle; color: var(--arbah-v2-ink); } .arbah-v2 .invoices-v2-table tbody tr:last-child td { border-bottom: none; } .arbah-v2 .invoices-v2-celldate { color: var(--arbah-v2-ink-muted); } .arbah-v2 .invoices-v2-due-late { color: var(--arbah-v2-danger); font-weight: 600; } .arbah-v2 .invoices-v2-td-client, .arbah-v2 .invoices-v2-td-project { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbah-v2 .invoices-v2-td-project { color: var(--arbah-v2-ink-muted); } /* -- Right rail --------------------------------------------- */ .arbah-v2 .invoices-v2-rail { display: flex; flex-direction: column; gap: 12px; } .arbah-v2 .invoices-v2-rail-cta { width: 100%; justify-content: center; } .arbah-v2 .invoices-v2-rail-reminder { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; background: var(--arbah-v2-surface); border: 1px dashed var(--arbah-v2-border-strong); border-radius: var(--arbah-v2-radius-md); font-size: 13px; font-weight: 500; color: var(--arbah-v2-ink-subtle); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .invoices-v2-rail-reminder.is-disabled, .arbah-v2 .invoices-v2-rail-reminder:disabled { cursor: not-allowed; } .arbah-v2 .invoices-v2-debtors { 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-sm); padding: 14px 16px; } .arbah-v2 .invoices-v2-debtors-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .arbah-v2 .invoices-v2-debtors-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 14px; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .invoices-v2-debtors-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } .arbah-v2 .invoices-v2-debtors-sub { font-size: 11px; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .invoices-v2-debtors-empty { font-size: 12.5px; color: var(--arbah-v2-ink-subtle); padding: 8px 0; } .arbah-v2 .invoices-v2-debtors-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: debtor; } .arbah-v2 .invoices-v2-debtor { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--arbah-v2-border); } .arbah-v2 .invoices-v2-debtor:last-child { border-bottom: none; } .arbah-v2 .invoices-v2-debtor-name { font-size: 12.5px; color: var(--arbah-v2-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbah-v2 .invoices-v2-debtor-name::before { counter-increment: debtor; content: counter(debtor) ". "; color: var(--arbah-v2-ink-subtle); font-variant-numeric: tabular-nums; } .arbah-v2 .invoices-v2-debtor-amt { font-size: 12.5px; font-weight: 600; color: var(--arbah-v2-warning); flex: 0 0 auto; } /* -- Mobile ------------------------------------------------- */ @media (max-width: 640px) { .arbah-v2 .invoices-v2-title { font-size: 22px; } .arbah-v2 .invoices-v2-hero-amount { font-size: 26px; } .arbah-v2 .invoices-v2-toolbar-end { width: 100%; } .arbah-v2 .invoices-v2-searchbox { min-width: 0; width: 100%; } }