/* ============================================================
   Arbah v2 — ChangeOrders surface
   All rules scoped under .arbah-v2. Off-state byte-identical —
   no-op without the .arbah-v2 ancestor (see theme-flag.js).

   Scope decision: ChangeOrders' live DOM (src/pages/ChangeOrders.js
   + src/components/ChangeOrderDetailModal.js) uses bespoke hooks:
     `.change-orders-page` wrapper
     `.change-orders-filter` filter pills + `.is-active`
     `.change-orders-row`, `-title`, `-scope`, `-cost`
     `.cost-positive` / `.cost-negative` / `.cost-zero`
     `.arbah-status-pill .status-warning|success|danger|muted`
     `.change-order-detail-modal` modal body
     `.change-order-decide-approve|reject|withdraw` action buttons
   The status-pill class is SHARED across surfaces (Workflow.css
   paints it under .arbah-v1), so v2 overrides here are scoped to
   `.change-orders-page` to avoid bleed onto other surfaces.

   Out of scope (handled elsewhere, untouched here):
     - PageHeader primitive (not used; bespoke title via .change-orders-page)
     - Modal chrome (.modal-panel / .modal-header / .modal-body)
       repainted by the primitives layer
     - Project selector <select> styled via .projects-search/-select
       pattern in arbah-v2-projects.css (the page wraps in its own
       JSX so reuse would require cross-surface coupling)

   Enrichment notes (logged, NOT auto-fixed by CSS):
     - Spec asks for a KPI row (Total / Pending / Approved / Rejected
       / Cost impact) above the filter pills; ChangeOrders has none
       — no DOM to style.
     - Spec asks for `.tabs` + CountBadge status bar; current DOM is
       a flat pill row (`.change-orders-filter`); styled what exists.
     - New-order button (line 131) has inline `style="background:#0B2545"`
       and no semantic class — left intact (visually indistinguishable
       at button scale from v2 brand navy #102A43).
     - Approve / Reject inline `style="background:#047857|#B91C1C"`
       on the decide buttons are EXACTLY v2-success / v2-danger;
       leaving the inline literals — no token-vs-literal divergence.
     - Cost-delta colors on `.change-orders-row-cost` carry BOTH
       semantic classes (`.cost-positive` …) AND inline Tailwind
       (`text-red-600` / `text-green-600`); v2 overrides bump
       specificity above the Tailwind utility so the v2 ramp
       (danger/success) replaces red-600/green-600.
     - Detail modal has no `.card-hero` or `.ribbon-*` element;
       status is rendered via the shared `.arbah-status-pill`. The
       ribbon-by-tone spec maps to nothing in current DOM — gap logged.
     - `Workflow.css` (v1) paints `.arbah-status-pill.status-*` under
       `.arbah-v1`; we don't reach across scopes — v2 overrides only
       inside `.arbah-v2 .change-orders-page`.

   Specificity: Tailwind utilities (0,1,0); `.arbah-v2 .x` (0,2,0)
   wins. !important policy: 0.
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.arbah-v2 .change-orders-page {
  color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-sans);
}

/* -- Project picker dropdown (top of page) ------------------ */
/* The page renders a plain <select> with Tailwind class hooks; we
   override via tag selector inside the page scope so v2 inputs
   keep one look across all ChangeOrders dropdowns. */
.arbah-v2 .change-orders-page select {
  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: 13.5px;
  color: var(--arbah-v2-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.arbah-v2 .change-orders-page select:focus {
  outline: none;
  border-color: var(--arbah-v2-brand);
  box-shadow: 0 0 0 3px rgba(16, 42, 67, .18);
}

/* -- Filter pill row (all / proposed / approved / rejected / withdrawn)
   The DOM emits `.change-orders-filter` plus Tailwind tone classes
   (active: `bg-blue-600 text-white border-blue-600`;
    inactive: `bg-white text-gray-700 border-gray-300`).
   We override at (0,2,0+1) compound specificity. */
.arbah-v2 .change-orders-filter {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 500;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--arbah-v2-surface);
  color: var(--arbah-v2-ink-muted);
  border: 1px solid var(--arbah-v2-border);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.arbah-v2 .change-orders-filter:hover {
  background: var(--arbah-v2-surface-sunken);
  color: var(--arbah-v2-ink);
}
.arbah-v2 .change-orders-filter.is-active {
  background: var(--arbah-v2-brand);
  color: #fff;
  border-color: var(--arbah-v2-brand);
}

/* -- List row ---------------------------------------------- */
/* DOM: `.change-orders-row p-4 bg-white rounded-lg border border-gray-200
   cursor-pointer hover:shadow-sm transition-shadow`. We repaint the
   chrome with v2 surface tokens. */
.arbah-v2 .change-orders-row {
  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-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.arbah-v2 .change-orders-row:hover {
  border-color: var(--arbah-v2-border-strong);
  box-shadow: var(--arbah-v2-shadow-md);
}
.arbah-v2 .change-orders-row-title {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--arbah-v2-ink);
}
.arbah-v2 .change-orders-row-scope {
  font-family: var(--arbah-v2-font-sans);
  font-size: 12px;
  color: var(--arbah-v2-ink-muted);
}

/* -- Cost delta --------------------------------------------- */
/* Plex Mono for numerics; tabular-nums so column values align.
   Compound class overrides the inline Tailwind text-red-600 /
   text-green-600 (specificity 0,2,0 vs 0,1,0). */
.arbah-v2 .change-orders-row-cost {
  font-family: var(--arbah-v2-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  unicode-bidi: plaintext;
}
.arbah-v2 .change-orders-row-cost.cost-positive {
  color: var(--arbah-v2-danger);
}
.arbah-v2 .change-orders-row-cost.cost-negative {
  color: var(--arbah-v2-success);
}
.arbah-v2 .change-orders-row-cost.cost-zero {
  color: var(--arbah-v2-ink-muted);
}

/* -- Status pill (scoped — page-local override only) -------- */
/* The .arbah-status-pill class is shared with other surfaces +
   painted by Workflow.css under .arbah-v1. Restricting our v2
   override to `.arbah-v2 .change-orders-page .arbah-status-pill`
   keeps the scope tight; cross-surface pills repaint via their
   own files. */
.arbah-v2 .change-orders-page .arbah-status-pill {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
}
.arbah-v2 .change-orders-page .arbah-status-pill.status-warning {
  background: var(--arbah-v2-warning-soft);
  color: var(--arbah-v2-warning);
  border-color: var(--arbah-v2-warning);
}
.arbah-v2 .change-orders-page .arbah-status-pill.status-success {
  background: var(--arbah-v2-success-soft);
  color: var(--arbah-v2-success);
  border-color: var(--arbah-v2-success);
}
.arbah-v2 .change-orders-page .arbah-status-pill.status-danger {
  background: var(--arbah-v2-danger-soft);
  color: var(--arbah-v2-danger);
  border-color: var(--arbah-v2-danger);
}
.arbah-v2 .change-orders-page .arbah-status-pill.status-muted,
.arbah-v2 .change-orders-page .arbah-status-pill.status-navy {
  background: var(--arbah-v2-navy-100);
  color: var(--arbah-v2-brand);
  border-color: var(--arbah-v2-brand);
}

/* -- Detail modal ------------------------------------------- */
.arbah-v2 .change-order-detail-modal {
  color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-sans);
}
/* Status pill inside the detail modal: same semantic mapping. */
.arbah-v2 .change-order-detail-modal .arbah-status-pill {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 600;
  border: 1px solid transparent;
}
.arbah-v2 .change-order-detail-modal .arbah-status-pill.status-warning {
  background: var(--arbah-v2-warning-soft);
  color: var(--arbah-v2-warning);
  border-color: var(--arbah-v2-warning);
}
.arbah-v2 .change-order-detail-modal .arbah-status-pill.status-success {
  background: var(--arbah-v2-success-soft);
  color: var(--arbah-v2-success);
  border-color: var(--arbah-v2-success);
}
.arbah-v2 .change-order-detail-modal .arbah-status-pill.status-danger {
  background: var(--arbah-v2-danger-soft);
  color: var(--arbah-v2-danger);
  border-color: var(--arbah-v2-danger);
}
.arbah-v2 .change-order-detail-modal .arbah-status-pill.status-muted,
.arbah-v2 .change-order-detail-modal .arbah-status-pill.status-navy {
  background: var(--arbah-v2-navy-100);
  color: var(--arbah-v2-brand);
  border-color: var(--arbah-v2-brand);
}

/* -- Decide buttons (Approve / Reject / Withdraw) ----------- */
/* DOM carries inline `style="background:#047857"` for approve and
   `style="background:#B91C1C"` for reject — those are EXACTLY the
   v2-success / v2-danger literals, so no override needed. We layer
   typography + radius. Withdraw button has no inline color. */
.arbah-v2 .change-order-decide-approve,
.arbah-v2 .change-order-decide-reject {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 600;
  border-radius: var(--arbah-v2-radius-md);
  box-shadow: var(--arbah-v2-shadow-sm);
  transition: filter 120ms ease, box-shadow 120ms ease;
}
.arbah-v2 .change-order-decide-approve:hover:not(:disabled),
.arbah-v2 .change-order-decide-reject:hover:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: var(--arbah-v2-shadow-md);
}
.arbah-v2 .change-order-decide-withdraw {
  font-family: var(--arbah-v2-font-sans);
  font-weight: 600;
  background: var(--arbah-v2-surface);
  color: var(--arbah-v2-ink);
  border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.arbah-v2 .change-order-decide-withdraw:hover:not(:disabled) {
  background: var(--arbah-v2-surface-sunken);
  border-color: var(--arbah-v2-border-strong);
}

/* -- Mobile --------------------------------------------------
   Filter pill row already wraps. Tighten row radius + scope text
   for the phone read. */
@media (max-width: 640px) {
  .arbah-v2 .change-orders-row {
    border-radius: var(--arbah-v2-radius-sm);
  }
  .arbah-v2 .change-orders-row-title {
    font-size: 13.5px;
  }
}

/* -- RTL ----------------------------------------------------
   Page sets `dir="rtl"` inline. Cost cell already uses
   `unicode-bidi: plaintext` so the +/- sign and digits read LTR
   regardless of dir. No further direction-flipping needed here —
   logical properties are used throughout. Three-selector pattern
   reserved for any future side-specific spacing. */

/* -- v2 portfolio register (changeorders-board.jsx): KPI grid responsive
   + table row hover. Component carries pixel detail inline; this owns the
   breakpoint. Flag OFF unaffected (ChangeOrdersLegacy renders). -- */
.arbah-v2 .co-v2-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .arbah-v2 .co-v2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .arbah-v2 .co-v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arbah-v2 .co-v2-table tbody tr:focus-visible { outline: 2px solid var(--arbah-v2-brand); outline-offset: -2px; }