/* ============================================================
   Arbah v1 — Projects List page migration
   Scoped under .arbah-v1. Legacy rules in tokens.css and Tailwind
   utility classes on src/pages/Projects.js stay byte-identical;
   nothing here applies unless <html> has .arbah-v1.

   Spec: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md
   (list patterns). Status enum locked at planning / active /
   on-hold / completed / cancelled per the form <option> set in
   src/pages/Projects.js (confirmed against the merged Badge
   #76 toneByKind.project map).

   CANONICAL (from PR #109/#110 review):
   - bronze: -500 base, -700 hover, -800 active
   - -600 = PRINT goldenrod, NEVER interactive
   - Chart.js / JS color hooks via getComputedStyle at init
   ============================================================ */

/* ---- Outer page wrapper ---- */
.arbah-v1 .projects-list {
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* ---- Filter bar (search input + status select + export menu) ----
   The codebase uses a <select> for status (not chips per the goal
   spec); the v1 design styles that select cleanly. Migration to a
   chip-row control would be a separate JS refactor — explicitly out
   of scope for this scoped-CSS-only PR. */
.arbah-v1 .projects-filter {
  background: transparent;  /* parent page wrapper already paints bg */
}
.arbah-v1 .projects-search,
.arbah-v1 .projects-status-select {
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  background: var(--arbah-surface);
  transition:
    border-color var(--arbah-duration-fast) var(--arbah-ease-standard),
    box-shadow var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .projects-search:focus,
.arbah-v1 .projects-status-select:focus,
.arbah-v1 .projects-search:focus-visible,
.arbah-v1 .projects-status-select:focus-visible {
  outline: 2px solid var(--arbah-bronze-500);
  outline-offset: 2px;
  border-color: var(--arbah-bronze-500);
  box-shadow: var(--arbah-focus-ring-glow);
}

/* ---- Project card (.project-card) ----
   Tailwind utilities supply layout (`bg-white rounded-xl shadow-xs
   border ...`); the v1 rule has higher specificity (0,2,0 > 0,1,0)
   so the explicit declarations win without !important. */
.arbah-v1 .project-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  padding: 0;  /* inner content keeps its own padding */
  transition:
    background var(--arbah-duration-fast) var(--arbah-ease-standard),
    border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .project-card:hover {
  background: var(--arbah-navy-50);
  border-color: var(--arbah-border-strong);
}

.arbah-v1 .project-card-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-md);
  color: var(--arbah-navy-700);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.arbah-v1 .project-card-meta,
.arbah-v1 .project-card-meta-row {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}

/* ---- Status badges (chip-* classes inside project cards) ----
   Scoped to .project-card so other surfaces' chips (Dashboard
   PHASE_CHIP_TONE, etc.) are unaffected. Maps the project
   status enum to v1 semantic tokens:
     planning   → chip-info     → --arbah-info       (badge tone in Badge.js)
     active     → chip-success  → --arbah-success
     on-hold    → chip-warning  → --arbah-warning
     completed  → chip-neutral  → navy fill + white  (the v1 design's
                                  signature for 'closed/done' states)
     cancelled  → chip-danger   → --arbah-danger
   The completed → navy-fill is the only deviation from soft-tone
   semantics; spec explicitly calls for navy-500 + white text. */
.arbah-v1 .project-card .chip {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  border-radius: var(--arbah-radius-full);
  padding: 2px var(--arbah-space-2);
  letter-spacing: 0.02em;
}
.arbah-v1 .project-card .chip-info {
  background: var(--arbah-info-soft);
  color: var(--arbah-info);
  border-color: var(--arbah-info-soft);
}
.arbah-v1 .project-card .chip-success {
  background: var(--arbah-success-soft);
  color: var(--arbah-success);
  border-color: var(--arbah-success-soft);
}
.arbah-v1 .project-card .chip-warning {
  background: var(--arbah-warning-soft);
  color: var(--arbah-warning);
  border-color: var(--arbah-warning-soft);
}
.arbah-v1 .project-card .chip-danger {
  background: var(--arbah-danger-soft);
  color: var(--arbah-danger);
  border-color: var(--arbah-danger-soft);
}
.arbah-v1 .project-card .chip-neutral {
  /* completed badge: navy-500 fill + white text — the spec's
     'closed/done' signature. NOT bronze, NOT goldenrod. */
  background: var(--arbah-navy-500);
  color: #fff;
  border-color: var(--arbah-navy-500);
}
.arbah-v1 .project-card .chip-brand {
  background: var(--arbah-brand-soft);
  color: var(--arbah-navy-700);
  border-color: var(--arbah-brand-soft);
}

/* ---- Row actions (Edit / Delete buttons in the card footer) ---- */
.arbah-v1 .project-actions {
  background: var(--arbah-surface-2);
  border-top: 1px solid var(--arbah-border);
}
.arbah-v1 .project-action {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  border-radius: var(--arbah-radius-md);
  transition:
    background var(--arbah-duration-fast) var(--arbah-ease-standard),
    color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .project-action-edit {
  color: var(--arbah-bronze-500);
}
.arbah-v1 .project-action-edit:hover {
  color: var(--arbah-bronze-700);
  background: var(--arbah-navy-50);
}
.arbah-v1 .project-action-delete {
  color: var(--arbah-danger);
}
.arbah-v1 .project-action-delete:hover {
  background: var(--arbah-danger-soft);
}
.arbah-v1 .project-action:focus-visible {
  outline: 2px solid var(--arbah-bronze-500);
  outline-offset: 2px;
}

/* ---- Empty state ----
   Targets the .empty class rendered by ui.js's EmptyState component
   when there are zero filtered projects. */
.arbah-v1 .projects-list .empty {
  background: var(--arbah-surface);
  border: 1px dashed var(--arbah-border-strong);
  border-radius: var(--arbah-radius-lg);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .projects-list .empty-icon {
  background: var(--arbah-navy-50);
  color: var(--arbah-navy-700);
}
.arbah-v1 .projects-list .empty-title {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
}
.arbah-v1 .projects-list .empty-hint {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}

/* ---- Loading skeleton ----
   Inert in current code (Projects.js has no skeleton state), but
   pre-defined so the next page-level PR that introduces async
   loading can opt in by adding .loading-skeleton class to a
   placeholder box. NEUTRAL palette (navy ramp), never bronze —
   loading state must not signal interactivity. */
.arbah-v1 .loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--arbah-navy-50) 0%,
    var(--arbah-navy-100) 50%,
    var(--arbah-navy-50) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--arbah-radius-md);
  animation: arbah-skeleton-shimmer 1.5s var(--arbah-ease-standard) infinite;
}
@keyframes arbah-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- Forward-compat filter chip styling ----
   The current Projects.js renders the status filter as a <select>.
   When a future PR converts it to a chip row, mark each chip with
   .projects-filter-chip[.active]; the rules below render them in
   the canonical inactive (navy-50) / active (bronze-500) split. */
.arbah-v1 .projects-filter-chip {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  background: var(--arbah-navy-50);
  color: var(--arbah-text);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-full);
  padding: var(--arbah-space-1) var(--arbah-space-3);
  transition:
    background var(--arbah-duration-fast) var(--arbah-ease-standard),
    color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .projects-filter-chip:hover {
  background: var(--arbah-navy-100);
}
.arbah-v1 .projects-filter-chip.active {
  background: var(--arbah-bronze-500);
  color: #fff;
  border-color: var(--arbah-bronze-500);
}
.arbah-v1 .projects-filter-chip.active:hover {
  background: var(--arbah-bronze-700);
}

/* ---- AR mode ---- */
.arbah-v1[dir="rtl"] .projects-list,
.arbah-v1[dir="rtl"] .project-card-title,
.arbah-v1[dir="rtl"] .project-card-meta,
.arbah-v1[dir="rtl"] .project-card-meta-row,
.arbah-v1[dir="rtl"] .projects-search,
.arbah-v1[dir="rtl"] .projects-status-select,
.arbah-v1[dir="rtl"] .project-action {
  font-family: "IBM Plex Sans Arabic", var(--arbah-font-sans);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .arbah-v1 .projects-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}