/* ============================================================ Arbah v2 — Tasks page (Kanban surface) All rules scoped under .arbah-v2. Legacy AND v1 paint stay byte-identical when the flag is OFF — this file is a no-op unless carries .arbah-v2 (see src/design/theme-flag.js). Scope decision (coordinator-locked): the live Tasks DOM (src/pages/Tasks.js) is a Kanban board — tasks-board → four tasks-column → bespoke task-card — NOT the primitive-based KPI+tabs+list the surface brief sketched. So this file is a v2-token PORT of the v1 treatment in src/pages/Tasks.css, restyling the SAME bespoke classes. CSS-only: no DOM/JS edits, no new i18n strings. Out of scope (left to the foundation / primitives lane, to avoid cross-surface bleed): the global primitives the page pulls from src/components/ui.js + src/design/tokens.css — .page-header / .page-title / .btn / .btn-primary / .modal-*. Under v2 those keep their base (legacy-token) look until a v2 primitives layer repaints them; this file never touches them. Token mapping (v1 → v2): v2 ships a leaner set than v1, so where v1 referenced a token v2 doesn't define, a v2 equivalent or literal is used: --arbah-bg → --arbah-v2-surface-sunken (via shell) --arbah-text* → --arbah-v2-ink / -ink-muted / -ink-subtle --arbah-navy-50 → --arbah-v2-navy-100 --arbah-navy-200 → --arbah-v2-ink-subtle (low-priority grey) --arbah-bronze-800 → --arbah-v2-bronze-700 (no -800 in v2) --arbah-shadow-lg → --arbah-v2-shadow-md (no -lg in v2) --arbah-radius-full → 999px --arbah-space-N → px literals (4/8/12/16/20/24) --arbah-text-N → px literals --arbah-duration/ease → ms + ease literals v2 enhancement over the v1 port: card titles render in Plex Serif (--arbah-v2-font-display) per the v2 type system, with an Arabic font swap in RTL (Plex Serif has no Arabic coverage). Enum unions (carried over from the v1 file so a future JS migration needs no second pass): status — codebase: todo / in_progress / review / done future: + blocked → danger-soft hook (review sits between in_progress and done → warning-soft, "pending external") priority — codebase: high / medium / low future: + urgent → danger hook Specificity: Tailwind utilities on the DOM are (0,1,0); `.arbah-v2 .x` is (0,2,0) and wins natively — no !important. (!important is reserved for defeating inline style= only, none needed here.) ============================================================ */ /* -- Page shell --------------------------------------------- */ /* Background comes from .app-shell (surface-sunken) under v2; the page itself only sets text + font so it inherits the tray. */ .arbah-v2 .tasks-page { color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } /* -- Filter row (project / priority selects) ---------------- */ .arbah-v2 .tasks-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .arbah-v2 .tasks-filters select, .arbah-v2 .tasks-filters input[type="search"], .arbah-v2 .tasks-filters input[type="text"] { 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 .tasks-filters select:focus, .arbah-v2 .tasks-filters input[type="search"]:focus, .arbah-v2 .tasks-filters input[type="text"]:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .18); } /* -- Kanban board ------------------------------------------- The DOM already carries Tailwind responsive grid utilities (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4); we leave the column count to them and only normalize the gutter so it tracks the v2 rhythm. */ .arbah-v2 .tasks-board { gap: 16px; } /* -- Columns (sunken trays) --------------------------------- */ /* Override the per-status Tailwind tints (COL_COLORS: bg-gray-50, bg-blue-50, …) with a uniform v2 tray; status reads from the column title + the card accents below. */ .arbah-v2 .tasks-column { background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); padding: 12px; min-height: 8rem; } .arbah-v2 .tasks-column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .arbah-v2 .tasks-column-title { font-family: var(--arbah-v2-font-sans); font-weight: 600; font-size: 13.5px; color: var(--arbah-v2-brand); letter-spacing: 0.01em; } .arbah-v2 .tasks-column-count { background: var(--arbah-v2-navy-100); color: var(--arbah-v2-brand); border: 1px solid var(--arbah-v2-border); font-family: var(--arbah-v2-font-mono); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center; } /* -- Card column (list inside a tray) ----------------------- */ .arbah-v2 .tasks-list { display: flex; flex-direction: column; gap: 8px; } /* -- Task card (raised white tile) -------------------------- */ .arbah-v2 .task-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); padding: 14px; box-shadow: var(--arbah-v2-shadow-sm); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .arbah-v2 .task-card:hover { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border-strong); box-shadow: var(--arbah-v2-shadow-md); } .arbah-v2 .task-card.is-selected { border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 2px var(--arbah-v2-navy-100); } /* -- Card text --------------------------------------------- */ .arbah-v2 .task-card-wo { font-family: var(--arbah-v2-font-mono); font-size: 11px; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .task-card-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--arbah-v2-ink); margin: 0; } .arbah-v2 .task-card-project { font-family: var(--arbah-v2-font-sans); font-size: 12px; color: var(--arbah-v2-navy-500); } .arbah-v2 .task-card-meta { font-family: var(--arbah-v2-font-sans); font-size: 12px; color: var(--arbah-v2-ink-muted); } /* -- Priority: dot + card inline-start accent --------------- */ .arbah-v2 .task-priority { display: inline-flex; align-items: center; gap: 6px; font-family: var(--arbah-v2-font-sans); font-size: 12px; color: var(--arbah-v2-ink-muted); } /* Dot colour — overrides the Tailwind PRIORITY_DOT bg-* on the same element (the w-2 h-2 rounded-full shape stays). */ .arbah-v2 .task-priority-low .task-priority-dot, .arbah-v2 .task-priority-dot--low { background: var(--arbah-v2-ink-subtle); } .arbah-v2 .task-priority-medium .task-priority-dot, .arbah-v2 .task-priority-dot--medium { background: var(--arbah-v2-info); } .arbah-v2 .task-priority-high .task-priority-dot, .arbah-v2 .task-priority-dot--high { background: var(--arbah-v2-warning); } .arbah-v2 .task-priority-urgent .task-priority-dot, .arbah-v2 .task-priority-dot--urgent { background: var(--arbah-v2-danger); } /* Inline-start edge bar by priority — RTL-safe (logical side). */ .arbah-v2 .task-card.task-priority-low { border-inline-start: 3px solid var(--arbah-v2-ink-subtle); } .arbah-v2 .task-card.task-priority-medium { border-inline-start: 3px solid var(--arbah-v2-info); } .arbah-v2 .task-card.task-priority-high { border-inline-start: 3px solid var(--arbah-v2-warning); } .arbah-v2 .task-card.task-priority-urgent { border-inline-start: 3px solid var(--arbah-v2-danger); } /* -- Assignee ----------------------------------------------- */ .arbah-v2 .task-assignee-name { font-family: var(--arbah-v2-font-sans); font-size: 12px; color: var(--arbah-v2-ink-muted); } /* -- Due date ----------------------------------------------- */ .arbah-v2 .task-due { display: inline-flex; align-items: center; gap: 4px; font-family: var(--arbah-v2-font-sans); font-size: 12px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .task-due--overdue { color: var(--arbah-v2-danger); font-weight: 500; } /* -- Status pill (forward-compat hook) ---------------------- The card carries task-status-${status}, but per the v1 file we deliberately DO NOT paint the card by status — the compound `.task-status.task-status-X` selector means these only light up a dedicated pill element that ALSO has `.task-status`. None is rendered today; the hook stands ready so a future JS change (e.g. a status chip on the card) needs no second migration. Soft chip tones read better in v2 than v1's solid fills. */ .arbah-v2 .task-status { display: inline-flex; align-items: center; font-family: var(--arbah-v2-font-sans); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; } .arbah-v2 .task-status.task-status-todo { background: var(--arbah-v2-navy-100); color: var(--arbah-v2-brand); } .arbah-v2 .task-status.task-status-in_progress { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); } .arbah-v2 .task-status.task-status-review { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); } .arbah-v2 .task-status.task-status-blocked { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } .arbah-v2 .task-status.task-status-done { background: var(--arbah-v2-success-soft); color: var(--arbah-v2-success); } /* -- Mobile (375x812 anchor) -------------------------------- */ /* The Tailwind grid already collapses to one column at < sm; here we just tighten the gutters/padding for phone reading. */ @media (max-width: 640px) { .arbah-v2 .tasks-board { gap: 12px; } .arbah-v2 .tasks-column { padding: 12px; } .arbah-v2 .task-card { padding: 12px; } } /* -- AR / RTL ----------------------------------------------- */ /* Layout flips for free: every directional rule above uses logical properties (border-inline-start, gap, inline-flex). The one physical concern is the serif card title — Plex Serif has no Arabic glyphs, so swap to Plex Sans Arabic in RTL. The triple selector mirrors arbah-v2-shell.css and covers the three ways the .arbah-v2 scope and [dir="rtl"] can nest. The sans stack already lists Plex Sans Arabic second, so column titles, meta, etc. need no swap. */ .arbah-v2[dir="rtl"] .task-card-title, [dir="rtl"] .arbah-v2 .task-card-title, .arbah-v2 [dir="rtl"] .task-card-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } /* -- Design parity: priority left-bar on task cards (tasks-board.jsx PriorityDot) — urgent=danger, high=warning, medium=info, low=subtle. CSS-only restyle of the legacy .task-card DOM; flag OFF unaffected. -- */ .arbah-v2 .task-card { position: relative; padding-inline-start: 16px; overflow: hidden; } .arbah-v2 .task-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--arbah-v2-ink-subtle); } .arbah-v2 .task-card.task-priority-urgent::before { background: var(--arbah-v2-danger); } .arbah-v2 .task-card.task-priority-high::before { background: var(--arbah-v2-warning); } .arbah-v2 .task-card.task-priority-medium::before { background: var(--arbah-v2-info); } .arbah-v2 .task-card.task-priority-low::before { background: var(--arbah-v2-ink-subtle); } /* Work-order id as a mono chip + project as bronze, matching the design card. */ .arbah-v2 .task-card-wo { font-family: var(--arbah-v2-font-mono); color: var(--arbah-v2-ink-subtle); } .arbah-v2 .task-card-project { color: var(--arbah-v2-bronze-700); font-weight: 600; }