/* ============================================================
   Arbah v1 — Project Detail Tabs (Round 4 PR 11)
   All rules scoped under .arbah-v1. Legacy paint byte-identical
   when the flag is off; this file is a no-op.

   Reads tokens from src/design/arbah-tokens.css. Cross-PR reuse
   with #112 (project detail overview), #113 (tasks status enum),
   #114 (photos grid, comments thread), #115 (transactions-table,
   currency Plex Mono).

   PR #112 explicitly scoped the OVERVIEW TAB ONLY. This PR
   folds the surrounding tab nav strip and the remaining 7 tab
   surfaces (Milestones / Tasks-embed / Budget / Documents /
   Photos-embed / Punch / Chat / RFIs) under .arbah-v1.

   !important policy: 0 in this file.

   --- Enum-mapping decisions ---------------------------------

   Punch status (PunchList.js + repo: VALID_STATUSES)
     codebase: open / resolved / verified
     spec:     open / in_progress / resolved / won_t_fix
     resolution: union (6). open = warning bg + navy-900 text.
       in_progress = info bg + white (spec, forward-compat
         hook — codebase has no analog yet).
       resolved = success bg + white.
       verified = success-soft bg + success text (codebase-only,
         post-resolved verification state).
       won_t_fix = navy-100 bg + navy-700 text (spec, forward-
         compat hook).

   RFI status (repo: open / answered / closed / void)
     codebase: open / answered / closed / void
     spec:     open / answered / escalated
     resolution: union (5). open = warning + navy-900.
       answered = success + white (shared).
       closed = navy-100 + navy-700 (codebase-only).
       void = navy-100 + navy-700 (codebase-only, alias of
         closed).
       escalated = danger + white (spec, forward-compat hook).
   ------------------------------------------------------------
   ============================================================ */

/* -- Tab nav strip ------------------------------------------ */
/* Replaces the legacy `border-b border-gray-200` wrapper +
   `border-blue-600 text-blue-600` active state on each button.
   The legacy Tailwind classes remain on the DOM; .arbah-v1
   scope wins natively (specificity 0,2,0 over 0,1,0). */
.arbah-v1 .project-tabs-nav {
  border-bottom: 1px solid var(--arbah-border);
  display: flex;
  gap: 0;
  overflow-x: auto;
  font-family: var(--arbah-font-sans);
  /* Hide scrollbar visually but keep it functional. */
  scrollbar-width: thin;
}
.arbah-v1 .project-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .project-tab:hover {
  color: var(--arbah-navy-700);
}
.arbah-v1 .project-tab.is-active,
.arbah-v1 .project-tab[aria-selected="true"] {
  color: var(--arbah-navy-700);
  border-bottom-color: var(--arbah-bronze-500);
}
.arbah-v1 .project-tab:focus-visible {
  outline: var(--arbah-focus-ring);
  outline-offset: -2px;
  box-shadow: var(--arbah-focus-ring-glow);
}
.arbah-v1 .project-tab .project-tab-count {
  display: inline-block;
  margin-inline-start: var(--arbah-space-2);
  background: var(--arbah-navy-50);
  color: var(--arbah-text-muted);
  border-radius: var(--arbah-radius-full);
  padding: 0 var(--arbah-space-2);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
}
.arbah-v1 .project-tab.is-active .project-tab-count,
.arbah-v1 .project-tab[aria-selected="true"] .project-tab-count {
  background: var(--arbah-bronze-50);
  color: var(--arbah-navy-700);
}

/* -- Milestones tab ----------------------------------------- */
.arbah-v1 .tab-milestones {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-milestones .milestone-card,
.arbah-v1 .tab-milestones .milestone-row {
  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-3) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-milestones input[type="checkbox"] {
  accent-color: var(--arbah-bronze-500);
}
.arbah-v1 .tab-milestones .milestone-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}

/* -- Budget tab (reuses #115 transactions-table pattern) ---- */
.arbah-v1 .tab-budget {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-budget table {
  width: 100%;
  background: var(--arbah-surface);
  border-collapse: collapse;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-budget thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .tab-budget th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  text-align: start;
}
.arbah-v1 .tab-budget tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .tab-budget tbody tr:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .tab-budget td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .tab-budget .tabular-nums,
.arbah-v1 .tab-budget .budget-amount {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-sm);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-budget tfoot td {
  border-top: 2px solid var(--arbah-border-strong);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-budget tfoot .tabular-nums {
  font-family: var(--arbah-font-mono);
  font-weight: 700;
  font-size: var(--arbah-text-base);
}

/* -- Documents tab ------------------------------------------ */
.arbah-v1 .tab-documents {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-documents .doc-row,
.arbah-v1 .tab-documents .document-item {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-3);
  display: flex;
  align-items: center;
  gap: var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-documents .doc-row + .doc-row {
  margin-top: var(--arbah-space-2);
}
.arbah-v1 .tab-documents .doc-icon {
  width: 36px;
  height: 36px;
  background: var(--arbah-bronze-50);
  color: var(--arbah-bronze-500);
  border-radius: var(--arbah-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arbah-v1 .tab-documents .doc-name {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-documents .doc-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .tab-documents .doc-preview-btn,
.arbah-v1 .tab-documents button.doc-preview-btn {
  background: transparent;
  color: var(--arbah-bronze-500);
  border: 1px solid var(--arbah-bronze-500);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-1) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard),
              color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .tab-documents .doc-preview-btn:hover {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}

/* -- Photos-embed tab (reuses #114 grid pattern) ----------- */
.arbah-v1 .tab-photos {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-photos .photos-grid,
.arbah-v1 .tab-photos .grid {
  /* Inherit the auto-fill grid pattern from #114 when present;
     otherwise paint the legacy fixed-column grid with the
     same gap + radius treatment. */
  gap: var(--arbah-space-3);
}
.arbah-v1 .tab-photos .photo-tile,
.arbah-v1 .tab-photos .photo-card {
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-md);
  box-shadow: var(--arbah-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .tab-photos .photo-tile:hover,
.arbah-v1 .tab-photos .photo-card:hover {
  box-shadow: var(--arbah-shadow-md);
}

/* -- Punch tab ---------------------------------------------- */
.arbah-v1 .tab-punch {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-punch .punch-row,
.arbah-v1 .tab-punch [data-testid="punchlist-page"] > div > div[class*="bg-white"] {
  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);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .tab-punch .punch-row:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .tab-punch .punch-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-punch .punch-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .tab-punch .punch-due--overdue {
  color: var(--arbah-danger);
  font-weight: 500;
}

/* Punch status pills — compound selector requires .punch-status
   PLUS the value modifier. */
.arbah-v1 .punch-status {
  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);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .punch-status.punch-status-open {
  background: var(--arbah-warning);
  color: var(--arbah-navy-900);
}
.arbah-v1 .punch-status.punch-status-in_progress {
  /* Spec-only state, forward-compat hook. */
  background: var(--arbah-info);
  color: #FFFFFF;
}
.arbah-v1 .punch-status.punch-status-resolved {
  background: var(--arbah-success);
  color: #FFFFFF;
}
.arbah-v1 .punch-status.punch-status-verified {
  /* Codebase-only state, post-resolved verification. */
  background: var(--arbah-success-soft);
  color: var(--arbah-success);
}
.arbah-v1 .punch-status.punch-status-won_t_fix {
  /* Spec-only state, forward-compat hook. */
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
}

/* Punch severity dot (PunchItemRow.js renders a colored dot). */
.arbah-v1 .punch-severity {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-1);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .punch-severity-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  display: inline-block;
  flex-shrink: 0;
}
.arbah-v1 .punch-severity.punch-severity-low .punch-severity-dot { background: var(--arbah-navy-200); }
.arbah-v1 .punch-severity.punch-severity-medium .punch-severity-dot { background: var(--arbah-warning); }
.arbah-v1 .punch-severity.punch-severity-high .punch-severity-dot { background: var(--arbah-danger); }

/* -- Chat tab (reuses #114 comments thread pattern) -------- */
.arbah-v1 .tab-chat {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-chat .chat-message,
.arbah-v1 .tab-chat [data-testid^="chat-message"] {
  background: var(--arbah-surface);
  border-bottom: 1px solid var(--arbah-border);
  padding: var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-chat .chat-author {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-chat .chat-body {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .tab-chat .chat-timestamp {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .tab-chat input[type="text"],
.arbah-v1 .tab-chat 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 .tab-chat input:focus,
.arbah-v1 .tab-chat textarea:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* -- RFIs tab ----------------------------------------------- */
.arbah-v1 .tab-rfis {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .tab-rfis .rfi-card,
.arbah-v1 .tab-rfis .rfi-row {
  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 .tab-rfis .rfi-card + .rfi-card,
.arbah-v1 .tab-rfis .rfi-row + .rfi-row {
  margin-top: var(--arbah-space-3);
}
.arbah-v1 .tab-rfis .rfi-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
}
.arbah-v1 .tab-rfis .rfi-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}

/* RFI status pills — compound selector, same pattern as
   .punch-status and #113 .task-status. */
.arbah-v1 .rfi-status {
  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);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .rfi-status.rfi-status-open {
  background: var(--arbah-warning);
  color: var(--arbah-navy-900);
}
.arbah-v1 .rfi-status.rfi-status-answered {
  background: var(--arbah-success);
  color: #FFFFFF;
}
.arbah-v1 .rfi-status.rfi-status-escalated {
  /* Spec-only state, forward-compat hook. */
  background: var(--arbah-danger);
  color: #FFFFFF;
}
.arbah-v1 .rfi-status.rfi-status-closed,
.arbah-v1 .rfi-status.rfi-status-void {
  /* Codebase-only states. */
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
}

/* -- Mobile (375x812) -------------------------------------- */
@media (max-width: 640px) {
  .arbah-v1 .project-tabs-nav {
    overflow-x: auto;
    /* iOS momentum scroll for the tab strip. */
    -webkit-overflow-scrolling: touch;
  }
  .arbah-v1 .project-tab {
    padding: var(--arbah-space-2) var(--arbah-space-3);
  }
  /* Budget table → card stack at phone width. */
  .arbah-v1 .tab-budget table,
  .arbah-v1 .tab-budget thead,
  .arbah-v1 .tab-budget tbody {
    display: block;
  }
  .arbah-v1 .tab-budget thead {
    display: none;
  }
  .arbah-v1 .tab-budget tbody tr {
    display: block;
    background: var(--arbah-surface);
    border: 1px solid var(--arbah-border);
    border-radius: var(--arbah-radius-md);
    padding: var(--arbah-space-3);
    margin-bottom: var(--arbah-space-2);
  }
  .arbah-v1 .tab-budget tbody td {
    display: block;
    padding: var(--arbah-space-1) 0;
    border: none;
  }
}

/* -- AR / RTL ----------------------------------------------- */
/* Plex Sans Arabic is first in --arbah-font-sans, so AR labels
   pick it up automatically. The tab nav uses `gap: 0` and a
   row flexbox — the writing direction inverts it automatically
   under [dir="rtl"]. Margin/padding use logical properties
   (margin-inline-start / inset-inline-*) so no per-rule
   overrides needed. */