/* ============================================================
   Arbah v1 — Supporting routes (Round 4 PR 15)
   /documents · /subcontractors · /timelapse · /notifications ·
   /time · /safety · /receipts.

   All rules scoped under .arbah-v1. Legacy Tailwind paint is
   byte-identical when the flag is OFF; this file is a no-op.

   Reads tokens from src/design/arbah-tokens.css. Cross-PR token
   reuse hooks (used by name only, defined elsewhere):
     #114 photos:      .photo-upload-zone, .photos-grid, .photo-card,
                       .photo-thumb, .photo-lightbox,
                       .photo-lightbox-close, .photo-lightbox-image
     #115 accounting:  .transactions-table, .txn-status, .txn-category,
                       .txn-amount, .sync-status
     #113 tasks:       .task-modal, .modal-panel.task-modal
     #117 detail-tabs: .rfi-card, .rfi-row, .rfi-status
     #111 projects:    .project-card (list-row pattern)

   The supporting pages re-add those classes inline in the JSX so
   the moment a sibling PR lands the shared rule applies. This file
   only paints the *page-local* additions (page shell, severity
   dots, time display, scrubber track, notif feed surface, …).

   !important policy: 0 in this file. Compound selectors and the
   .arbah-v1 ancestor scope provide enough specificity.

   --- Enum-mapping decisions (codebase vs spec) ----------

   Notification type / severity (NotifRow `n.severity` from
   src/pages/Notifications.js KIND_TONE map):
     codebase: info / warn / danger
     spec:     info / warning / success / error
     resolution: style the UNION (5).
       info     → --arbah-info dot
       warning  → --arbah-warning dot   (codebase 'warn' alias)
       warn     → same paint as warning (codebase alias)
       success  → --arbah-success dot   (spec hook)
       danger   → --arbah-danger dot    (codebase 'danger')
       error    → same paint as danger  (spec alias)
   The dot rules cover all 6 selectors. The container row is
   white when read, --arbah-bronze-50 when unread.

   Safety severity (SafetyLogs incident rows; schema CHECK
   constraint `near_miss / minor / major / critical`):
     codebase: near_miss / minor / major / critical
     spec:     low / medium / high / critical
     resolution: style the UNION (7).
       near_miss → info dot (lowest)            ← codebase
       low       → info dot                     ← spec alias hook
       minor     → warning dot                  ← codebase
       medium    → warning dot                  ← spec alias hook
       major     → danger dot                   ← codebase
       high      → danger dot                   ← spec alias hook
       critical  → navy-900 fill + white text   ← shared (spec + codebase)
   --- ----------------------------------------------------
   ============================================================ */

/* ===========================================================
   1. DOCUMENTS  (.arbah-v1 .documents-page)
   =========================================================== */
.arbah-v1 .documents-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

.arbah-v1 .documents-page .documents-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arbah-space-3);
  align-items: center;
}
.arbah-v1 .documents-page .documents-filters input,
.arbah-v1 .documents-page .documents-filters select {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .documents-page .documents-filters input:focus,
.arbah-v1 .documents-page .documents-filters select:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* Document group section header (one per kind). Keeps the JSX
   inline-style colored dot legible by overlaying the v1 dot
   color when the kind class is set. The legacy inline `style="
   background:#3b82f6"` etc. paints first; the .doc-kind-dot
   class wins via specificity (0,3,0 > inline 1,0,0,0 — actually
   inline wins. We instead paint a sibling token-driven badge
   surface on the row, not the legacy dot, so both coexist). */
.arbah-v1 .documents-page .doc-section-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Document rows — list-row pattern echoing #115 transactions
   table row + #111 project-card surface. Reuse `.transactions-
   table tbody tr` rules from #115 when the consumer adds the
   class; this rule covers the documents-only `.doc-row` form. */
.arbah-v1 .documents-page .doc-row {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  display: flex;
  align-items: center;
  gap: var(--arbah-space-3);
  transition: box-shadow var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .documents-page .doc-row:hover {
  border-color: var(--arbah-border-strong);
  box-shadow: var(--arbah-shadow-sm);
}
.arbah-v1 .documents-page .doc-row + .doc-row {
  margin-top: var(--arbah-space-2);
}
.arbah-v1 .documents-page .doc-title {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .documents-page .doc-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .documents-page .doc-tag {
  display: inline-block;
  background: var(--arbah-navy-50);
  color: var(--arbah-text);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  margin-inline-end: var(--arbah-space-1);
  line-height: 1.4;
}

/* Re-paints `.photo-upload-zone` instances *only when nested
   inside .documents-page* — keeps the documents page consistent
   with #114 photos even before that PR lands. Selector specificity
   (0,3,0) wins over Tailwind utilities (0,1,0). */
.arbah-v1 .documents-page .photo-upload-zone,
.arbah-v1 .documents-page .doc-upload-zone {
  border: 2px dashed var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-5);
  background: var(--arbah-surface);
  font-family: var(--arbah-font-sans);
  transition: background-color var(--arbah-duration-base) var(--arbah-ease-standard),
              border-color var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .documents-page .photo-upload-zone:hover,
.arbah-v1 .documents-page .doc-upload-zone:hover,
.arbah-v1 .documents-page .doc-upload-zone.is-drag-over {
  background: var(--arbah-navy-50);
  border-color: var(--arbah-navy-700);
}

/* ===========================================================
   2. SUBCONTRACTORS  (.arbah-v1 .subcontractors-page)
   =========================================================== */
.arbah-v1 .subcontractors-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

.arbah-v1 .subcontractors-page .subcontractors-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arbah-space-3);
  align-items: center;
}
.arbah-v1 .subcontractors-page .subcontractors-filters input,
.arbah-v1 .subcontractors-page .subcontractors-filters select {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .subcontractors-page .subcontractors-filters input:focus,
.arbah-v1 .subcontractors-page .subcontractors-filters select:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* Subcontractor card — surface + hover echoing #111 project-card. */
.arbah-v1 .subcontractors-page .sub-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  padding: var(--arbah-space-5);
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
  cursor: pointer;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .subcontractors-page .sub-card:hover {
  background: var(--arbah-navy-50);
  border-color: var(--arbah-border-strong);
}
.arbah-v1 .subcontractors-page .sub-name {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-md);
  color: var(--arbah-navy-700);
}
.arbah-v1 .subcontractors-page .sub-company {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}
.arbah-v1 .subcontractors-page .sub-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}
.arbah-v1 .subcontractors-page .sub-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--arbah-radius-md);
  background: var(--arbah-navy-700);
  color: #FFFFFF;
  font-family: var(--arbah-font-sans);
  font-weight: 700;
  font-size: var(--arbah-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arbah-v1 .subcontractors-page .sub-trade {
  display: inline-block;
  background: var(--arbah-navy-50);
  color: var(--arbah-navy-700);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .subcontractors-page .sub-open-orders {
  background: var(--arbah-warning-soft);
  color: var(--arbah-warning);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-1) var(--arbah-space-3);
}
.arbah-v1 .subcontractors-page .sub-notes {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-subtle);
  font-style: italic;
}
/* Edit / delete row buttons — bronze accent for primary
   (edit), danger for delete. -500 base / -700 hover canonical. */
.arbah-v1 .subcontractors-page .sub-action {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: var(--arbah-space-1) var(--arbah-space-2);
  border-radius: var(--arbah-radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .subcontractors-page .sub-action--edit {
  color: var(--arbah-bronze-500);
}
.arbah-v1 .subcontractors-page .sub-action--edit:hover {
  color: var(--arbah-bronze-700);
  background: var(--arbah-bronze-50);
}
.arbah-v1 .subcontractors-page .sub-action--edit:active {
  color: var(--arbah-bronze-800);
}
.arbah-v1 .subcontractors-page .sub-action--delete {
  color: var(--arbah-danger);
}
.arbah-v1 .subcontractors-page .sub-action--delete:hover {
  color: var(--arbah-danger);
  background: var(--arbah-danger-soft);
}

/* Subcontractor create / detail modal — task-modal pattern from #113. */
.arbah-v1 .sub-modal,
.arbah-v1 .modal-panel.sub-modal {
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-lg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}
.arbah-v1 .sub-modal .modal-title,
.arbah-v1 .modal-panel.sub-modal .modal-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
}
.arbah-v1 .sub-modal label {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .sub-modal input,
.arbah-v1 .sub-modal select,
.arbah-v1 .sub-modal textarea {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .sub-modal input:focus,
.arbah-v1 .sub-modal select:focus,
.arbah-v1 .sub-modal textarea:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* ===========================================================
   3. TIMELAPSE  (.arbah-v1 .timelapse-page)
   =========================================================== */
.arbah-v1 .timelapse-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* Photo strip / vantage thumbnails — grid pattern echoes #114
   .photos-grid (separate class so consumer JSX can sit alongside
   either the photos grid or the timelapse strip). */
.arbah-v1 .timelapse-page .timelapse-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--arbah-space-3);
}
.arbah-v1 .timelapse-page .timelapse-thumb-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  box-shadow: var(--arbah-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--arbah-duration-base) var(--arbah-ease-standard),
              transform var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .timelapse-page .timelapse-thumb-card:hover {
  box-shadow: var(--arbah-shadow-md);
  transform: scale(1.02);
}
.arbah-v1 .timelapse-page .timelapse-thumb-card.is-active {
  box-shadow: 0 0 0 3px var(--arbah-bronze-500), var(--arbah-shadow-md);
  background: var(--arbah-bronze-50);
}
.arbah-v1 .timelapse-page .timelapse-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Date scrubber — horizontal track --arbah-navy-50, active thumb
   --arbah-bronze-500, IBM Plex Sans 500 labels per spec. */
.arbah-v1 .timelapse-page .timelapse-scrubber {
  display: flex;
  align-items: center;
  gap: var(--arbah-space-3);
  padding-block: var(--arbah-space-3);
}
.arbah-v1 .timelapse-page .timelapse-scrubber-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--arbah-navy-50);
  border-radius: var(--arbah-radius-full);
}
.arbah-v1 .timelapse-page .timelapse-scrubber-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--arbah-bronze-500);
  border-radius: var(--arbah-radius-full);
}
.arbah-v1 .timelapse-page .timelapse-scrubber-thumb {
  position: absolute;
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-bronze-500);
  box-shadow: var(--arbah-shadow-sm);
  transform: translate(-50%, -50%);
  cursor: grab;
}
[dir="rtl"] .arbah-v1 .timelapse-page .timelapse-scrubber-thumb {
  transform: translate(50%, -50%);
}
.arbah-v1 .timelapse-page .timelapse-scrubber-thumb:active,
.arbah-v1 .timelapse-page .timelapse-scrubber-thumb.is-dragging {
  background: var(--arbah-bronze-700);
  cursor: grabbing;
}
.arbah-v1 .timelapse-page .timelapse-scrubber-label,
.arbah-v1 .timelapse-page .timelapse-label {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .timelapse-page .timelapse-frame-counter {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}

/* Vantage picker list (pre-strip step). */
.arbah-v1 .timelapse-page .vantage-row,
.arbah-v1 .timelapse-page [data-vantage-id] {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .timelapse-page .vantage-row:hover {
  background: var(--arbah-navy-50);
  border-color: var(--arbah-border-strong);
}

/* ===========================================================
   4. NOTIFICATIONS  (.arbah-v1 .notifications-page)
   =========================================================== */
.arbah-v1 .notifications-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

.arbah-v1 .notifications-page .notif-page-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
}
.arbah-v1 .notifications-page .notif-mark-all {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .notifications-page .notif-mark-all:hover {
  color: var(--arbah-navy-700);
}

/* Section filter tabs — pill variant. */
.arbah-v1 .notifications-page .notif-section-tab {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  background: var(--arbah-surface);
  color: var(--arbah-text-muted);
  border: 1px solid var(--arbah-border);
  padding: var(--arbah-space-1) var(--arbah-space-3);
  border-radius: var(--arbah-radius-full);
  cursor: pointer;
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard),
              color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .notifications-page .notif-section-tab:hover {
  background: var(--arbah-navy-50);
  color: var(--arbah-text);
}
.arbah-v1 .notifications-page .notif-section-tab.is-active {
  background: var(--arbah-navy-700);
  color: #FFFFFF;
  border-color: var(--arbah-navy-700);
}

/* Read/unread filter — bar (underline) variant. */
.arbah-v1 .notifications-page .notif-read-tab {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding-block: var(--arbah-space-2);
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .notifications-page .notif-read-tab:hover {
  color: var(--arbah-text);
}
.arbah-v1 .notifications-page .notif-read-tab.is-active {
  color: var(--arbah-navy-700);
  border-bottom-color: var(--arbah-bronze-500);
}

/* Date group label. */
.arbah-v1 .notifications-page .notif-date-label {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Feed row — dividers via --arbah-border (per spec). Unread bg
   --arbah-bronze-50, read white. Compound selector (.notif-row +
   .notif-row--unread / --read) so a stray modifier on a non-row
   does not paint. */
.arbah-v1 .notifications-page .notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--arbah-space-3);
  width: 100%;
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
  text-align: start;
  cursor: pointer;
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .notifications-page .notif-row + .notif-row {
  margin-top: var(--arbah-space-1);
}
.arbah-v1 .notifications-page .notif-row.notif-row--unread {
  background: var(--arbah-bronze-50);
  border-color: var(--arbah-border);
}
.arbah-v1 .notifications-page .notif-row.notif-row--read {
  background: var(--arbah-surface);
  border-color: var(--arbah-border);
}
.arbah-v1 .notifications-page .notif-row:hover {
  border-color: var(--arbah-border-strong);
  box-shadow: var(--arbah-shadow-sm);
}

.arbah-v1 .notifications-page .notif-title {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  line-height: 1.4;
  margin: 0;
}
.arbah-v1 .notifications-page .notif-row.notif-row--unread .notif-title {
  font-weight: 600;
  color: var(--arbah-navy-700);
}
.arbah-v1 .notifications-page .notif-message {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  line-height: 1.4;
  margin: 0;
}
.arbah-v1 .notifications-page .notif-time {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-subtle);
}

/* Type / severity dot. Compound selector (`.notif-tone-dot` base +
   `.notif-tone-{value}` modifier). The 6 selectors map info /
   warning / warn / success / danger / error per the enum-doc. */
.arbah-v1 .notifications-page .notif-tone-dot,
.arbah-v1 .notifications-page .notif-row .notif-tone-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  display: inline-block;
  flex-shrink: 0;
  background: var(--arbah-text-subtle);
}
.arbah-v1 .notifications-page .notif-tone-info .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-dot--info {
  background: var(--arbah-info);
}
.arbah-v1 .notifications-page .notif-tone-warning .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-warn .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-dot--warning,
.arbah-v1 .notifications-page .notif-tone-dot--warn {
  background: var(--arbah-warning);
}
.arbah-v1 .notifications-page .notif-tone-success .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-dot--success {
  background: var(--arbah-success);
}
.arbah-v1 .notifications-page .notif-tone-danger .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-error .notif-tone-dot,
.arbah-v1 .notifications-page .notif-tone-dot--danger,
.arbah-v1 .notifications-page .notif-tone-dot--error {
  background: var(--arbah-danger);
}

/* Icon bubble (left of feed row). */
.arbah-v1 .notifications-page .notif-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-navy-50);
  color: var(--arbah-navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arbah-v1 .notifications-page .notif-row.notif-tone-warning .notif-icon-bubble,
.arbah-v1 .notifications-page .notif-row.notif-tone-warn .notif-icon-bubble {
  background: var(--arbah-warning-soft);
  color: var(--arbah-warning);
}
.arbah-v1 .notifications-page .notif-row.notif-tone-danger .notif-icon-bubble,
.arbah-v1 .notifications-page .notif-row.notif-tone-error .notif-icon-bubble {
  background: var(--arbah-danger-soft);
  color: var(--arbah-danger);
}
.arbah-v1 .notifications-page .notif-row.notif-tone-success .notif-icon-bubble {
  background: var(--arbah-success-soft);
  color: var(--arbah-success);
}

.arbah-v1 .notifications-page .notif-load-more {
  background: var(--arbah-bronze-50);
  color: var(--arbah-bronze-700);
  border: none;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  padding: var(--arbah-space-2) var(--arbah-space-5);
  border-radius: var(--arbah-radius-md);
  cursor: pointer;
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .notifications-page .notif-load-more:hover {
  background: var(--arbah-bronze-100);
}

/* ===========================================================
   5. TIME TRACKING  (.arbah-v1 .time-tracking-page)
   =========================================================== */
.arbah-v1 .time-tracking-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* Clock-in/out card surface — large touch target for foremen. */
.arbah-v1 .time-tracking-page .clock-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  padding: var(--arbah-space-5);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .time-tracking-page .clock-card.is-clocked-in {
  background: var(--arbah-bronze-50);
  border-color: var(--arbah-bronze-500);
}

/* Time display — IBM Plex Mono, --arbah-text-3xl, --arbah-navy-700. */
.arbah-v1 .time-tracking-page .clock-display {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--arbah-text-3xl);
  color: var(--arbah-navy-700);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.arbah-v1 .time-tracking-page .clock-status-label {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  letter-spacing: 0.02em;
}
.arbah-v1 .time-tracking-page .clock-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-bronze-500);
}
.arbah-v1 .time-tracking-page .clock-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}

/* Clock-in/out button — large, --arbah-bronze-500 active. */
.arbah-v1 .time-tracking-page .clock-button,
.arbah-v1 .clock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--arbah-space-2);
  padding: var(--arbah-space-4) var(--arbah-space-6);
  border-radius: var(--arbah-radius-lg);
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
  border: none;
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-md);
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 48px;
  width: 100%;
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard),
              transform var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .time-tracking-page .clock-button:hover,
.arbah-v1 .clock-button:hover {
  background: var(--arbah-bronze-700);
}
.arbah-v1 .time-tracking-page .clock-button:active,
.arbah-v1 .clock-button:active {
  background: var(--arbah-bronze-800);
  transform: scale(0.98);
}
.arbah-v1 .time-tracking-page .clock-button.clock-button--out,
.arbah-v1 .clock-button--out {
  background: var(--arbah-navy-700);
}
.arbah-v1 .time-tracking-page .clock-button.clock-button--out:hover,
.arbah-v1 .clock-button--out:hover {
  background: var(--arbah-navy-800);
}

/* Today / week stat cards. */
.arbah-v1 .time-tracking-page .time-stat-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-3);
  text-align: center;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .time-tracking-page .time-stat-label {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  letter-spacing: 0.02em;
}
.arbah-v1 .time-tracking-page .time-stat-value {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
}

/* Recent shifts log table — echoes #115 transactions-table. */
.arbah-v1 .time-tracking-page .time-log-list,
.arbah-v1 .time-tracking-page .time-shifts {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  font-family: var(--arbah-font-sans);
  overflow: hidden;
}
.arbah-v1 .time-tracking-page .time-shift-row {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .time-tracking-page .time-shift-row + .time-shift-row {
  border-top: 1px solid var(--arbah-border);
}
.arbah-v1 .time-tracking-page .time-shift-project {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .time-tracking-page .time-shift-date {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .time-tracking-page .time-shift-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .time-tracking-page .time-shift-duration {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--arbah-navy-700);
  font-weight: 500;
}

/* ===========================================================
   6. SAFETY LOGS  (.arbah-v1 .safety-logs-page)
   =========================================================== */
.arbah-v1 .safety-logs-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* Toolbox / incident tabs (bar variant). */
.arbah-v1 .safety-logs-page .safety-tab {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--arbah-space-3) var(--arbah-space-5);
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .safety-logs-page .safety-tab:hover {
  color: var(--arbah-text);
}
.arbah-v1 .safety-logs-page .safety-tab.is-active {
  color: var(--arbah-navy-700);
  border-bottom-color: var(--arbah-bronze-500);
}

.arbah-v1 .safety-logs-page .safety-project-picker label {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}
.arbah-v1 .safety-logs-page .safety-project-picker select {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}

/* Safety log entries — reuses #117 RFI card surface (the JSX
   adds .rfi-card alongside .safety-row so both scopes apply).
   This rule is the safety-only fallback for when consumers carry
   only .safety-row. */
.arbah-v1 .safety-logs-page .safety-row,
.arbah-v1 .safety-logs-page .safety-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  box-shadow: var(--arbah-shadow-sm);
  padding: var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .safety-logs-page .safety-row + .safety-row,
.arbah-v1 .safety-logs-page .safety-card + .safety-card {
  margin-top: var(--arbah-space-3);
}
.arbah-v1 .safety-logs-page .safety-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
}
.arbah-v1 .safety-logs-page .safety-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .safety-logs-page .safety-date {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}

/* Safety table (incident / toolbox table form). */
.arbah-v1 .safety-logs-page table {
  width: 100%;
  background: var(--arbah-surface);
  font-family: var(--arbah-font-sans);
  border-collapse: collapse;
}
.arbah-v1 .safety-logs-page thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .safety-logs-page thead th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  text-align: start;
  padding: var(--arbah-space-3) var(--arbah-space-4);
}
.arbah-v1 .safety-logs-page tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .safety-logs-page tbody tr:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .safety-logs-page tbody td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}

/* Severity dots. Compound selector (`.severity-dot` base +
   `.severity-{value}` parent / modifier). Goal text says low /
   medium / high / critical; codebase schema uses near_miss /
   minor / major / critical. CSS covers the union (7 selectors). */
.arbah-v1 .safety-logs-page .severity-dot,
.arbah-v1 .severity-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-text-subtle);
  flex-shrink: 0;
}
.arbah-v1 .safety-logs-page .severity-low .severity-dot,
.arbah-v1 .safety-logs-page .severity-near_miss .severity-dot,
.arbah-v1 .severity-dot--low,
.arbah-v1 .severity-dot--near_miss {
  background: var(--arbah-info);
}
.arbah-v1 .safety-logs-page .severity-medium .severity-dot,
.arbah-v1 .safety-logs-page .severity-minor .severity-dot,
.arbah-v1 .severity-dot--medium,
.arbah-v1 .severity-dot--minor {
  background: var(--arbah-warning);
}
.arbah-v1 .safety-logs-page .severity-high .severity-dot,
.arbah-v1 .safety-logs-page .severity-major .severity-dot,
.arbah-v1 .severity-dot--high,
.arbah-v1 .severity-dot--major {
  background: var(--arbah-danger);
}
.arbah-v1 .safety-logs-page .severity-critical .severity-dot,
.arbah-v1 .severity-dot--critical {
  background: var(--arbah-navy-900);
}

/* Severity pill — for the IncidentSeverityBadge surface. The
   component already paints a Tailwind pill; the v1 rule overrides
   bg/text via the `.severity-pill` class hook the consumer adds. */
.arbah-v1 .severity-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-1);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  border: 1px solid var(--arbah-border);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .severity-pill.severity-low,
.arbah-v1 .severity-pill.severity-near_miss {
  background: var(--arbah-info-soft);
  color: var(--arbah-info);
  border-color: var(--arbah-info-soft);
}
.arbah-v1 .severity-pill.severity-medium,
.arbah-v1 .severity-pill.severity-minor {
  background: var(--arbah-warning-soft);
  color: var(--arbah-warning);
  border-color: var(--arbah-warning-soft);
}
.arbah-v1 .severity-pill.severity-high,
.arbah-v1 .severity-pill.severity-major {
  background: var(--arbah-danger-soft);
  color: var(--arbah-danger);
  border-color: var(--arbah-danger-soft);
}
.arbah-v1 .severity-pill.severity-critical {
  background: var(--arbah-navy-900);
  color: #FFFFFF;
  border-color: var(--arbah-navy-900);
}

/* Status pill (open / closed) — incident lifecycle. */
.arbah-v1 .safety-logs-page .safety-status-pill,
.arbah-v1 .safety-status-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .safety-status-pill.safety-status-open {
  background: var(--arbah-success-soft);
  color: var(--arbah-success);
  border-color: var(--arbah-success-soft);
}
.arbah-v1 .safety-status-pill.safety-status-closed {
  background: var(--arbah-navy-50);
  color: var(--arbah-text-muted);
  border-color: var(--arbah-border);
}

/* Action buttons (toolbox / incident header) — bronze-500 base,
   navy-700 secondary. Replaces the inline `style="background:#0B2545"`
   / `#B23A48` colors when consumer adds the .safety-cta-* class. */
.arbah-v1 .safety-logs-page .safety-cta-toolbox {
  background: var(--arbah-navy-700);
  color: #FFFFFF;
  border: none;
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  padding: var(--arbah-space-2) var(--arbah-space-4);
  border-radius: var(--arbah-radius-md);
  cursor: pointer;
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .safety-logs-page .safety-cta-toolbox:hover {
  background: var(--arbah-navy-800);
}
.arbah-v1 .safety-logs-page .safety-cta-incident {
  background: var(--arbah-danger);
  color: #FFFFFF;
  border: none;
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  padding: var(--arbah-space-2) var(--arbah-space-4);
  border-radius: var(--arbah-radius-md);
  cursor: pointer;
  transition: opacity var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .safety-logs-page .safety-cta-incident:hover {
  opacity: 0.9;
}

/* Incident attachments grid — echoes #114 .photos-grid (consumer
   re-uses class name; this rule is the safety-only fallback). */
.arbah-v1 .safety-logs-page .incident-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--arbah-space-2);
}
.arbah-v1 .safety-logs-page .incident-attachment-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--arbah-radius-md);
  border: 1px solid var(--arbah-border);
}

/* ===========================================================
   7. RECEIPTS  (.arbah-v1 .receipts-page)
   =========================================================== */
.arbah-v1 .receipts-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

.arbah-v1 .receipts-page .receipts-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arbah-space-3);
  align-items: center;
}
.arbah-v1 .receipts-page .receipts-filters input,
.arbah-v1 .receipts-page .receipts-filters select {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}

/* Summary cards (net / vat / grand total). */
.arbah-v1 .receipts-page .receipt-summary-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-4);
  text-align: center;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .receipts-page .receipt-summary-label {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arbah-v1 .receipts-page .receipt-summary-value {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
  unicode-bidi: plaintext;
}
.arbah-v1 .receipts-page .receipt-summary-card--vat .receipt-summary-value {
  color: var(--arbah-warning);
}
.arbah-v1 .receipts-page .receipt-summary-card--total {
  background: var(--arbah-navy-700);
  border-color: var(--arbah-navy-700);
}
.arbah-v1 .receipts-page .receipt-summary-card--total .receipt-summary-label,
.arbah-v1 .receipts-page .receipt-summary-card--total .receipt-summary-value {
  color: #FFFFFF;
}

/* Receipt cards / grid — for the photo-card view of receipts.
   Reuses #114 .photos-grid + .photo-card class naming when
   consumer adds them. */
.arbah-v1 .receipts-page .receipts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--arbah-space-3);
}
.arbah-v1 .receipts-page .receipt-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  box-shadow: var(--arbah-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--arbah-duration-base) var(--arbah-ease-standard),
              transform var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .receipts-page .receipt-card:hover {
  box-shadow: var(--arbah-shadow-md);
  transform: scale(1.02);
}

/* Receipt table (codebase default). */
.arbah-v1 .receipts-page .receipts-table {
  width: 100%;
  background: var(--arbah-surface);
  font-family: var(--arbah-font-sans);
  border-collapse: collapse;
}
.arbah-v1 .receipts-page .receipts-table thead tr {
  background: var(--arbah-navy-700);
  color: #FFFFFF;
}
.arbah-v1 .receipts-page .receipts-table thead th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-xs);
  color: #FFFFFF;
  text-align: start;
  padding: var(--arbah-space-3) var(--arbah-space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.arbah-v1 .receipts-page .receipts-table tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .receipts-page .receipts-table tbody tr:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .receipts-page .receipts-table td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .receipts-page .receipts-table .receipt-supplier {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  color: var(--arbah-navy-700);
}
.arbah-v1 .receipts-page .receipts-table .receipt-amount,
.arbah-v1 .receipts-page .receipts-table .tabular-nums {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  unicode-bidi: plaintext;
}
.arbah-v1 .receipts-page .receipts-table .receipt-amount--total {
  font-weight: 700;
  color: var(--arbah-navy-700);
}
.arbah-v1 .receipts-page .receipts-table .receipt-amount--vat {
  color: var(--arbah-warning);
}
.arbah-v1 .receipts-page .receipts-table tfoot tr {
  background: var(--arbah-navy-700);
  color: #FFFFFF;
  font-weight: 700;
}
.arbah-v1 .receipts-page .receipts-table tfoot td {
  color: #FFFFFF;
  padding: var(--arbah-space-3) var(--arbah-space-4);
}

/* Category tag (consumer adds .txn-category from #115). When that
   PR isn't merged yet, paint locally so receipts stay v1 today. */
.arbah-v1 .receipts-page .txn-category,
.arbah-v1 .receipts-page .receipt-category {
  display: inline-block;
  background: var(--arbah-navy-50);
  color: var(--arbah-text);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  line-height: 1.4;
}

/* OCR overlay — reuses #114 lightbox class on the consumer side.
   Local fallback paints navy-900 @ 90% backdrop so receipts work
   today. */
.arbah-v1 .receipts-page .receipt-lightbox,
.arbah-v1 .receipt-lightbox {
  background: rgba(10, 27, 46, 0.9);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .receipts-page .receipt-lightbox-image,
.arbah-v1 .receipt-lightbox-image {
  object-fit: contain;
}
.arbah-v1 .receipts-page .receipt-lightbox-close,
.arbah-v1 .receipt-lightbox-close {
  color: var(--arbah-bronze-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .receipts-page .receipt-lightbox-close:hover,
.arbah-v1 .receipt-lightbox-close:hover {
  color: var(--arbah-bronze-700);
}
.arbah-v1 .receipts-page .receipt-lightbox-close:active,
.arbah-v1 .receipt-lightbox-close:active {
  color: var(--arbah-bronze-800);
}

/* Receipt payment-record modal — task-modal pattern from #113. */
.arbah-v1 .receipt-modal,
.arbah-v1 .modal-panel.receipt-modal,
.arbah-v1 .receipt-payment-modal,
.arbah-v1 .modal-panel.receipt-payment-modal {
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-lg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}
.arbah-v1 .receipt-modal .modal-title,
.arbah-v1 .receipt-payment-modal .modal-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
}

/* AI-active chip surface (Receipt page header). */
.arbah-v1 .receipts-page .ai-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-1);
  background: var(--arbah-info-soft);
  color: var(--arbah-info);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: var(--arbah-space-1) var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ===========================================================
   AR + RTL — every supporting page uses Plex Sans Arabic,
   logical CSS properties already used throughout. The
   font-family stack in src/design/arbah-tokens.css already
   lists Plex Sans Arabic; this rule pins it explicitly when
   `lang="ar"` is set so AR contexts never fall through to a
   system Arabic font. unicode-bidi: plaintext on tabular-num
   amounts keeps signed numerics (-, +) anchored correctly.
   =========================================================== */
.arbah-v1[lang="ar"] .documents-page,
.arbah-v1[lang="ar"] .subcontractors-page,
.arbah-v1[lang="ar"] .timelapse-page,
.arbah-v1[lang="ar"] .notifications-page,
.arbah-v1[lang="ar"] .time-tracking-page,
.arbah-v1[lang="ar"] .safety-logs-page,
.arbah-v1[lang="ar"] .receipts-page,
[dir="rtl"] .arbah-v1 .documents-page,
[dir="rtl"] .arbah-v1 .subcontractors-page,
[dir="rtl"] .arbah-v1 .timelapse-page,
[dir="rtl"] .arbah-v1 .notifications-page,
[dir="rtl"] .arbah-v1 .time-tracking-page,
[dir="rtl"] .arbah-v1 .safety-logs-page,
[dir="rtl"] .arbah-v1 .receipts-page {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===========================================================
   Mobile (375x812) — lists/feeds stack, modals fullscreen,
   time widget centers. Per-page tweaks at phone width.
   =========================================================== */
@media (max-width: 640px) {
  .arbah-v1 .documents-page .documents-filters,
  .arbah-v1 .subcontractors-page .subcontractors-filters,
  .arbah-v1 .receipts-page .receipts-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .arbah-v1 .documents-page .documents-filters > *,
  .arbah-v1 .subcontractors-page .subcontractors-filters > *,
  .arbah-v1 .receipts-page .receipts-filters > * {
    width: 100%;
  }
  .arbah-v1 .timelapse-page .timelapse-strip,
  .arbah-v1 .receipts-page .receipts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Notifications feed — full width, smaller padding. */
  .arbah-v1 .notifications-page .notif-row {
    padding: var(--arbah-space-3);
  }
  /* Time-tracking widget centers; clock-display gets bumped. */
  .arbah-v1 .time-tracking-page .clock-card {
    text-align: center;
  }
  .arbah-v1 .time-tracking-page .clock-display {
    font-size: var(--arbah-text-2xl);
  }
  /* Receipts table → horizontal scroll wrapper (already in JSX). */
  .arbah-v1 .receipts-page .receipts-table thead th,
  .arbah-v1 .receipts-page .receipts-table td {
    padding: var(--arbah-space-2) var(--arbah-space-3);
    font-size: var(--arbah-text-xs);
  }
  /* Modals fullscreen at phone width. */
  .arbah-v1 .sub-modal,
  .arbah-v1 .modal-panel.sub-modal,
  .arbah-v1 .receipt-modal,
  .arbah-v1 .modal-panel.receipt-modal,
  .arbah-v1 .receipt-payment-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}