/* ============================================================
   Arbah v1 — Tasks page (Round 4 PR 7)
   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 with #110 (KPI card surface) / #111 (filter chips) /
   #112 (project header). No --arbah-* tokens declared here.

   !important policy: reserved for defeating inline style=
   attributes only. Tailwind utilities are specificity 0,1,0;
   `.arbah-v1 .x` is 0,2,0 — wins natively, no !important.

   Enum mapping decision (codebase reality vs. spec):
     status  — codebase: todo/in_progress/review/done
               spec:     todo/in_progress/blocked/done
               result:   style the UNION (5). `review` (codebase-
                         extant, not in spec) maps to warning-soft
                         since it semantically sits between
                         in_progress and done (pending external).
                         `blocked` (spec, not yet in codebase) gets
                         a CSS hook so the day it lands in JS, no
                         second migration is needed.
     priority — codebase: high/medium/low
                spec:     low/medium/high/urgent
                result:   style the UNION (4). `urgent` (spec, not
                          yet in codebase) gets a CSS hook for
                          future-proofing.
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.arbah-v1 .tasks-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* -- Filter row (chip + input pattern) ---------------------- */
.arbah-v1 .tasks-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--arbah-space-3);
}
.arbah-v1 .tasks-filters select,
.arbah-v1 .tasks-filters input[type="search"],
.arbah-v1 .tasks-filters input[type="text"] {
  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);
  transition: border-color var(--arbah-duration-base) var(--arbah-ease-standard),
              box-shadow var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .tasks-filters select:focus,
.arbah-v1 .tasks-filters input[type="search"]:focus,
.arbah-v1 .tasks-filters input[type="text"]:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
}

/* -- Kanban board -------------------------------------------- */
.arbah-v1 .tasks-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--arbah-space-4);
}
.arbah-v1 .tasks-column {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-3);
  min-height: 8rem;
}
.arbah-v1 .tasks-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--arbah-space-3);
}
.arbah-v1 .tasks-column-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  letter-spacing: 0.01em;
}
.arbah-v1 .tasks-column-count {
  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);
  border: 1px solid var(--arbah-border);
  min-width: 22px;
  text-align: center;
}

/* -- Task card ---------------------------------------------- */
.arbah-v1 .tasks-list,
.arbah-v1 .tasks-column .tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--arbah-space-2);
}
.arbah-v1 .task-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-3);
  box-shadow: var(--arbah-shadow-sm);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .task-card:hover {
  background: var(--arbah-navy-50);
  border-color: var(--arbah-border-strong);
}
.arbah-v1 .task-card.is-selected {
  border-color: var(--arbah-navy-700);
  box-shadow: 0 0 0 2px var(--arbah-navy-100);
}
.arbah-v1 .task-card-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
  line-height: 1.4;
  margin: 0;
}
.arbah-v1 .task-card-meta {
  font-family: var(--arbah-font-sans);
  font-weight: 400;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
}
.arbah-v1 .task-card-wo {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-subtle);
}
.arbah-v1 .task-card-project {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-navy-500);
}

/* -- Status pills ------------------------------------------- */
/* Compound selector: BOTH .task-status (base pill rule) AND
   .task-status-{value} (color modifier) must be present. This
   prevents the value modifier from accidentally painting the
   parent .task-card when the JS also adds task-status-${task.status}
   on the card for forward-compat / data-attribute parity. */
.arbah-v1 .task-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 .task-status.task-status-todo {
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
}
.arbah-v1 .task-status.task-status-in_progress {
  background: var(--arbah-info);
  color: #FFFFFF;
}
.arbah-v1 .task-status.task-status-blocked {
  background: var(--arbah-danger);
  color: #FFFFFF;
}
.arbah-v1 .task-status.task-status-review {
  /* Codebase-extant state (not in spec). Sits between in_progress
     and done — "pending external attention" → warning-soft. */
  background: var(--arbah-warning-soft);
  color: var(--arbah-warning);
}
.arbah-v1 .task-status.task-status-done {
  background: var(--arbah-success);
  color: #FFFFFF;
}

/* -- Priority indicators ------------------------------------ */
.arbah-v1 .task-priority {
  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 .task-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  display: inline-block;
  flex-shrink: 0;
}
.arbah-v1 .task-priority-low .task-priority-dot,
.arbah-v1 .task-priority-dot--low {
  background: var(--arbah-navy-200);
}
.arbah-v1 .task-priority-medium .task-priority-dot,
.arbah-v1 .task-priority-dot--medium {
  background: var(--arbah-info);
}
.arbah-v1 .task-priority-high .task-priority-dot,
.arbah-v1 .task-priority-dot--high {
  background: var(--arbah-warning);
}
.arbah-v1 .task-priority-urgent .task-priority-dot,
.arbah-v1 .task-priority-dot--urgent {
  background: var(--arbah-danger);
}
/* Pre-title vertical bar variant — left edge of the card to
   echo the status visually without a second pill. */
.arbah-v1 .task-card.task-priority-low    { border-inline-start: 3px solid var(--arbah-navy-200); }
.arbah-v1 .task-card.task-priority-medium { border-inline-start: 3px solid var(--arbah-info); }
.arbah-v1 .task-card.task-priority-high   { border-inline-start: 3px solid var(--arbah-warning); }
.arbah-v1 .task-card.task-priority-urgent { border-inline-start: 3px solid var(--arbah-danger); }

/* -- Assignee avatars --------------------------------------- */
.arbah-v1 .task-assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-2);
}
.arbah-v1 .task-assignee-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --arbah-space-1 ring per spec; box-shadow keeps it overlay-style
     so layout doesn't shift. */
  box-shadow: 0 0 0 var(--arbah-space-1) var(--arbah-surface),
              0 0 0 calc(var(--arbah-space-1) + 1px) var(--arbah-border);
  flex-shrink: 0;
}
.arbah-v1 .task-assignee-name {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .task-assignee-role {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}

/* -- Due date ----------------------------------------------- */
.arbah-v1 .task-due {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-1);
}
.arbah-v1 .task-due--overdue {
  color: var(--arbah-danger);
  font-weight: 500;
}

/* -- Create / edit modal (uses Modal primitive) ------------- */
.arbah-v1 .task-modal,
.arbah-v1 .modal-panel.task-modal {
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-lg);
  color: var(--arbah-text);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .modal-backdrop:has(.task-modal),
.arbah-v1 .task-modal-overlay {
  /* navy-900 at 60% alpha per spec */
  background: rgba(10, 27, 46, 0.6);
}
.arbah-v1 .task-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 .task-modal label {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .task-modal input,
.arbah-v1 .task-modal select,
.arbah-v1 .task-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 .task-modal input:focus,
.arbah-v1 .task-modal select:focus,
.arbah-v1 .task-modal textarea:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}
.arbah-v1 .task-modal .btn-primary,
.arbah-v1 .task-modal button[type="submit"]:not(.btn-ghost) {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
  border: 1px solid transparent;
  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-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .task-modal .btn-primary:hover,
.arbah-v1 .task-modal button[type="submit"]:not(.btn-ghost):hover {
  background: var(--arbah-bronze-700);
}
.arbah-v1 .task-modal .btn-primary:active,
.arbah-v1 .task-modal button[type="submit"]:not(.btn-ghost):active {
  background: var(--arbah-bronze-800);
}
.arbah-v1 .task-modal .btn-ghost,
.arbah-v1 .task-modal button[type="button"].btn-ghost {
  background: transparent;
  color: var(--arbah-text);
  border: 1px solid var(--arbah-border);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  padding: var(--arbah-space-2) var(--arbah-space-4);
  border-radius: var(--arbah-radius-md);
  cursor: pointer;
}
.arbah-v1 .task-modal .btn-ghost:hover {
  background: var(--arbah-navy-50);
}

/* -- Detail drawer (slide-in) ------------------------------- */
/* CSS hook for a future drawer markup. Current code uses Modal
   for both create + detail; when a drawer is introduced the
   following rules light it up without a second migration. */
.arbah-v1 .task-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;     /* LTR: right edge; RTL: left edge */
  width: min(480px, 100vw);
  background: var(--arbah-surface);
  box-shadow: var(--arbah-shadow-lg);
  color: var(--arbah-text);
  font-family: var(--arbah-font-sans);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--arbah-duration-slow) var(--arbah-ease-emphasized);
}
/* RTL slide-out target: drawer hides off the LEFT in RTL (-100%
   in writing-flow direction is the inset-inline-start edge). */
.arbah-v1 .task-drawer.is-closed {
  transform: translateX(100%);
}
[dir="rtl"] .arbah-v1 .task-drawer.is-closed,
.arbah-v1[dir="rtl"] .task-drawer.is-closed {
  transform: translateX(-100%);
}
.arbah-v1 .task-drawer-header {
  padding: var(--arbah-space-5) var(--arbah-space-6);
  border-bottom: 1px solid var(--arbah-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arbah-v1 .task-drawer-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
  margin: 0;
}
.arbah-v1 .task-drawer-tabs {
  display: flex;
  gap: var(--arbah-space-5);
  border-bottom: 1px solid var(--arbah-border);
  padding: 0 var(--arbah-space-6);
}
.arbah-v1 .task-drawer-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--arbah-space-3) 0;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .task-drawer-tab:hover {
  color: var(--arbah-navy-700);
}
.arbah-v1 .task-drawer-tab.is-active {
  color: var(--arbah-navy-700);
  border-bottom-color: var(--arbah-navy-700);
}
.arbah-v1 .task-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--arbah-space-5) var(--arbah-space-6);
}

/* -- Mobile (375x812 anchor; phone scope provided by app) --- */
@media (max-width: 640px) {
  .arbah-v1 .tasks-board {
    grid-template-columns: 1fr;
    gap: var(--arbah-space-3);
  }
  .arbah-v1 .tasks-column {
    padding: var(--arbah-space-3);
  }
  .arbah-v1 .task-modal,
  .arbah-v1 .modal-panel.task-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  /* The legacy .modal-backdrop has 16px padding around the panel,
     which leaves a 32px ring on mobile. For task-modal on phone,
     remove that padding so the panel truly fills the viewport. */
  .arbah-v1 .modal-backdrop:has(.task-modal) {
    padding: 0;
  }
  .arbah-v1 .task-drawer {
    width: 100vw;
  }
}

/* -- AR / RTL ----------------------------------------------- */
/* Plex Sans Arabic is the first font in --arbah-font-sans, so
   AR contexts pick it up automatically. Direction flips are
   handled by inset-inline-* / border-inline-* logical
   properties above — no per-rule [dir="rtl"] overrides needed
   for the layout. Tab underline + status pills are direction-
   neutral. Only directional element (drawer slide) covered
   in the .is-closed rule. */