/* ============================================================================
   WFH — Filament theme
   A faithful port of the approved design system.

   SOURCE OF TRUTH: preview/enhanceUI/assets/app.css, documented in
   docs/references/2-color-palette-management.md and 4-visual-identity.md.
   Every value below is copied from there — do not invent one here. If a token
   changes, it changes in app.css first and is mirrored across.

   Loaded AFTER Filament's core stylesheet (see WfhThemeServiceProvider), so
   these rules override the framework defaults without forking its build. That
   keeps us off a second Tailwind toolchain: Laravel 13 ships Tailwind v4 while
   Filament 3 expects v3, and this design needs no new utilities — only tokens
   and component restyling.
   ========================================================================== */

/* ── 1. TOKENS (verbatim from app.css §1) ───────────────────────────────── */
:root {
  /* surfaces (light) */
  --canvas:#F3F1F9; --surface:#FFFFFF; --card:#FFFFFF; --subtle:#F8F6FC;
  --sider:#FBFAFE; --header:#FFFFFF; --plot:#F7F5FC;
  --grid-line:rgba(15,23,42,.08); --border-hi:rgba(15,23,42,.02);
  --border:#E4E0F2; --border-soft:#EEEAF7;
  /* brand — Arca Link (teal primary, navy secondary); see ui-color-system.html */
  --primary:#028EA8; --primary-active:#006D80; --primary-050:#DFF4F7;
  --primary-100:#BCE7EE; --primary-600:#0A7C93;
  --secondary:#1E2D5B;
  /* text */
  --tp:#0F172A; --ts:#334155; --tm:#64748B;
  /* semantic */
  --success:#16A34A; --warn:#D97706; --danger:#DC2626; --pending:#2563EB;
  --leave:#7C3AED; --external:#0891B2; --muted:#64748B;
  /* categorical series (--cat-1..6) — used by the bar-list widgets to colour
     one series per row. These were referenced but never defined, so every bar
     resolved var(--cat-N) to nothing and rendered transparent. Ordered for
     adjacent-hue separation so neighbouring rows stay distinguishable. */
  --cat-1:#028EA8; --cat-2:#0891B2; --cat-3:#16A34A;
  --cat-4:#D97706; --cat-5:#DB2777; --cat-6:#4F46E5;
  /* elevation — two-layer (ambient + key), not a flat drop shadow */
  --sh-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --sh-md:0 4px 8px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg:0 16px 40px -12px rgba(16,24,40,.22),0 4px 10px -4px rgba(16,24,40,.10);
  /* geometry + motion */
  --hd:64px; --rail:240px; --rail-sm:64px;
  --r-card:16px; --r-ctl:10px; --r-btn:999px;
  --dur-fast:150ms; --dur:220ms; --ease:cubic-bezier(.16,1,.3,1);
}

/* Dark mode parity — every light token has a counterpart (app.css §1). */
.dark {
  --canvas:#0D0D1A; --surface:#1C1C3E; --card:#1C1C3E; --subtle:#15152B;
  --sider:#141430; --header:#1C1C3E; --plot:#181834;
  --grid-line:rgba(255,255,255,.07); --border-hi:rgba(255,255,255,.05);
  --border:#2E2E5C; --border-soft:#242449;
  --primary:#3BB4CC; --primary-active:#7FD3E0; --primary-050:rgba(2,142,168,.18);
  --primary-100:rgba(2,142,168,.28); --primary-600:#2AA6BF;
  --secondary:#9DB0C9;
  --tp:#F1F5F9; --ts:#CBD5E1; --tm:#94A3B8;
  --success:#22C55E; --warn:#F59E0B; --danger:#EF4444; --pending:#3B82F6;
  --leave:#A78BFA; --external:#22D3EE; --muted:#94A3B8;
  /* categorical series — lifted for contrast against the dark canvas. */
  --cat-1:#2AA6BF; --cat-2:#22D3EE; --cat-3:#22C55E;
  --cat-4:#F59E0B; --cat-5:#F472B6; --cat-6:#818CF8;
  --sh-sm:0 1px 2px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.5);
  --sh-md:0 2px 4px rgba(0,0,0,.4),0 12px 28px -10px rgba(0,0,0,.6);
  --sh-lg:0 4px 8px rgba(0,0,0,.45),0 20px 48px -12px rgba(0,0,0,.7);
}

/* ── 2. BASE ────────────────────────────────────────────────────────────── */
/* Specificity note: Filament puts Tailwind utilities (bg-gray-50, rounded-xl,
   …) directly on elements. A single-class selector ties those and, loading
   after core CSS, wins on order. Where a utility would still tie, the rules
   below double up the class (.fi-body.fi-body) to raise specificity without
   resorting to !important, which would be unmaintainable across a whole theme. */
.fi-body.fi-body {
  background: var(--canvas);
  color: var(--tp);
  font-size: 14px;
}

/* ── 3. APP SHELL — 64px header, 240px rail (app.css §4) ────────────────── */
.fi-topbar > nav {
  background: var(--header);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  min-height: var(--hd);
}

.fi-sidebar,
.fi-sidebar-nav {
  background: var(--sider);
}

.fi-sidebar {
  border-inline-end: 1px solid var(--border-soft);
  /* No position override here. Filament positions the rail `fixed` (mobile) /
     `lg:sticky` at full viewport height (h-screen). Forcing `position: relative`
     dropped it into normal flow, so on a tall page (e.g. the permissions matrix)
     the rail ended mid-content and appeared to float when scrolling. The corner
     texture anchors to .fi-sidebar-nav (itself positioned), so nothing is lost. */
  overflow: hidden; /* clip the texture to the rail */
}

/* Diamond-mosaic texture: pinned to the sidebar's bottom inline-end corner,
   behind the nav (approved design .sider-tex). The nav content is raised to
   z-index 1 so links stay clickable over it. */
.wfh-sider-tex {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

/* In RTL the sidebar sits on the right and the "hot corner" mirrors to the
   bottom-left, so flip the texture horizontally to keep the cascade pointing
   into the true corner. */
[dir="rtl"] .wfh-sider-tex {
  transform: scaleX(-1);
}

.fi-sidebar-nav {
  position: relative;
  z-index: 1;
}

/* Nav section labels: 11px uppercase, .08em — structural chrome, not emphasis. */
.fi-sidebar-group-label {
  color: var(--tm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Nav items: 9px radius, solid primary when active (app.css §4). */
.fi-sidebar-item-button {
  border-radius: 9px;
  color: var(--ts);
  font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.fi-sidebar-item-button:hover {
  background: var(--border-soft);
}

.fi-sidebar-item-active .fi-sidebar-item-button {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label {
  color: #fff;
}

/* ── 4. CARDS — 16px radius, two-layer shadow (app.css §5) ──────────────── */
.fi-section.fi-section,
.fi-wi-stats-overview-stat.fi-wi-stats-overview-stat,
.fi-ta-ctn.fi-ta-ctn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur), border-color var(--dur), transform var(--dur);
}

.fi-section-content-ctn {
  border-radius: var(--r-card);
}

/* Page title: 22px/700, -.01em (app.css §5). */
.fi-header-heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tp);
}

/* ── 5. BUTTONS — pill, designed hover/active (app.css §6) ──────────────── */
.fi-btn.fi-btn {
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 14px;
  transition: filter var(--dur-fast), transform var(--dur-fast),
              border-color var(--dur-fast), color var(--dur-fast),
              background var(--dur-fast);
}

.fi-btn.fi-btn-color-primary {
  background: var(--primary);
  color: #fff;
}

.fi-btn.fi-btn-color-primary:hover {
  background: var(--primary-600);
}

/* Tactile press feedback — the design's signature .97 scale. */
.fi-btn:active {
  transform: scale(.97);
}

.fi-btn-color-gray {
  background: var(--surface);
  color: var(--ts);
  border: 1px solid var(--border);
}

.fi-btn-color-gray:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Icon buttons: 34x34, 9px radius (app.css §3). */
.fi-icon-btn {
  border-radius: 9px;
  color: var(--ts);
  transition: border-color var(--dur-fast), color var(--dur-fast),
              background var(--dur-fast);
}

.fi-icon-btn:hover {
  color: var(--primary);
}

/* ── 6. FORM CONTROLS — 10px radius, primary focus ring (app.css §7) ────── */
.fi-input-wrp {
  background: var(--surface);
  border-radius: var(--r-ctl);
  box-shadow: none;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.fi-input-wrp:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-050);
  outline: none;
}

.fi-input {
  color: var(--tp);
  font-size: 14px;
}

.fi-fo-field-wrp-label {
  color: var(--ts);
  font-weight: 500;
}

.fi-fo-field-wrp-helper-text {
  color: var(--tm);
}

/* ── 7. TABLES — uppercase 12px headers on subtle bg (app.css §8) ───────── */
.fi-ta-header-cell {
  background: var(--subtle);
  color: var(--ts);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* admin.html:41 — headers start-align (right in RTL) so they sit above their
     column data instead of Filament's centered default. */
  text-align: start;
}

/* Row actions live at the START of the last column (admin.html:642 renders them
   as inline links in a normal cell), not pushed to the far edge like Filament's
   flex-end default. */
.fi-ta-cell .fi-ta-actions {
  justify-content: flex-start;
}

.fi-ta-header-cell:hover {
  color: var(--primary);
}

.fi-ta-row {
  transition: background var(--dur-fast);
}

.fi-ta-row:hover {
  background: var(--subtle);
}

.fi-ta-cell {
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.fi-ta-header,
.fi-ta-footer {
  background: var(--surface);
}

/* Table toolbar — the search box, filters trigger, and column-toggle ("field
   switch") sit at the inline-start (the RIGHT, in this RTL UI) rather than being
   pushed to the far side. Filament groups them under an `ms-auto` div which, in
   RTL, lands them on the left; overriding the auto margin to the inline-END side
   pushes the whole group back to the start. */
.fi-ta-header-toolbar > .ms-auto {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Per-column search inputs (searchable(isIndividual: true)): a search field at
   the top of each column. Keep the inputs compact. */
.fi-ta-individual-search-field .fi-input {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* The individual-column search row is HIDDEN by default and revealed by the
   funnel toggle (filament/column-search-toggle.blade.php), which flips
   `wfh-col-search-open` on <html>. The row is the <tr> whose cells carry the
   fi-table-individual-search-cell-* class. */
.fi-ta tr:has(> [class*="fi-table-individual-search-cell"]) {
  display: none;
}

html.wfh-col-search-open .fi-ta tr:has(> [class*="fi-table-individual-search-cell"]) {
  display: table-row;
}

/* The filter toggle is present on EVERY grid (every panel, resource, and
   custom-page table), so it never "disappears" — the user's report was that it
   was missing on some pages. When the table has rows its per-column search row
   is in the DOM and the toggle reveals/hides it; on an empty table (Filament
   renders no body rows, so no search row) the toggle simply has nothing to
   reveal until data exists. */
.wfh-col-search-toggle {
  display: inline-flex;
}

/* Lit while the row is open, so the funnel reads as an active toggle. */
html.wfh-col-search-open .wfh-col-search-toggle {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Remove Filament's التصفيات (filters) dropdown funnel: per-column search (the
   funnel toggle above) is the filtering UI now, so the dropdown-filter trigger
   is redundant. This is the Dropdown/Modal-layout trigger only — the audit log
   uses an inline AboveContent filter bar, which has no `fi-ta-filters-dropdown`
   wrapper and is therefore untouched. */
.fi-ta-filters-dropdown {
  display: none;
}

/* ── 8. TAGS / BADGES — pill, 12px/600 (app.css §9) ─────────────────────── */
.fi-badge {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── 9. MODAL — 16px radius, lg shadow, blurred scrim (app.css §10) ─────── */
.fi-modal-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
}

/* The only backdrop-filter in the system: reserved for modal scrims, so
   data-heavy scrollable surfaces never pay for it (4-visual-identity.md §6). */
.fi-modal-close-overlay {
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
}

/* Section headings inside a modal match the confirmed .modal-sec: 14px / 700,
   tight top margin — a quiet label, not Filament's larger default heading. */
.fi-modal .fi-section-header-heading {
  font-size: 14px;
  font-weight: 700;
}

.fi-modal .fi-section {
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ── 10. DROPDOWNS ──────────────────────────────────────────────────────── */
.fi-dropdown-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  box-shadow: var(--sh-md);
}

/* ── 11. ACCESSIBILITY — focus-visible everywhere (app.css §12) ─────────── */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-sidebar-item-button:focus-visible,
.fi-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 9px;
}

/* ── 12. SCHEDULE GRID (SCR-WEB-C09) — approved ctrlbar + table conventions ── */
.wfh-ctrlbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wfh-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  color: var(--tp);
  padding: .45rem .7rem;
  height: 36px;
  font-size: 14px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

/* Filament's bundled Tailwind CSS applies its forms-plugin chevron
   (background-image + appearance:none) to every bare <select> site-wide,
   reserved via an asymmetric padding-right this class's own uniform
   padding above then collapses — the arrow ends up drawn on top of short
   option text (e.g. a 4-digit year) instead of beside it. The confirmed
   design never had a custom arrow; restoring native appearance here removes
   the leaked one and lets the browser reserve its own (RTL-correct) space. */
select.wfh-control {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none;
}

.wfh-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-050);
}

.wfh-btn-default {
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 14px;
  padding: 0 .9rem;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--ts);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.wfh-btn-default:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.wfh-schedule-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  padding: 16px 18px;
}

.wfh-schedule-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--tp);
}

.wfh-schedule-scroll {
  overflow-x: auto;
}

.wfh-schedule-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.wfh-schedule-grid thead th {
  background: var(--subtle);
  color: var(--ts);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.wfh-schedule-grid thead th.day-col {
  text-align: center;
  padding: 8px 4px;
  min-width: 28px;
}

/* Row-selection checkboxes (export "selected only"). */
.wfh-schedule-grid .select-col {
  text-align: center;
  width: 34px;
  padding: 7px 6px;
}

.wfh-schedule-grid .select-col input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}

.wfh-schedule-grid tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.wfh-schedule-grid tbody tr:hover {
  background: var(--subtle);
}

.wfh-schedule-grid .emp-no {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--ts);
}

.wfh-schedule-grid .day-cell {
  text-align: center;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 700;
}

.wfh-schedule-grid .day-cell.present { color: var(--success); }
.wfh-schedule-grid .day-cell.absent { color: var(--danger); }
.wfh-schedule-grid .day-cell.weekend { background: var(--subtle); }
/* Signed in on a weekend: shown as present (green ✓) but keeps the weekend
   background, and is NOT counted in the attendance total. */
.wfh-schedule-grid .day-cell.weekend-present { background: var(--subtle); color: var(--success); }

/* Accumulative per-day task progress under the attendance mark (confirmed UI). */
.wfh-schedule-grid .day-cell .day-pct {
  font-size: 9px;
  font-weight: 700;
  color: var(--success);
  margin-top: 1px;
  line-height: 1;
}

.wfh-schedule-grid .total-cell { font-weight: 600; white-space: nowrap; }
.wfh-schedule-grid .total-cell.good { color: var(--success); }
.wfh-schedule-grid .total-cell.warn { color: var(--warn); }
.wfh-schedule-grid .total-cell.bad { color: var(--danger); }
.wfh-schedule-grid .pct-cell { font-weight: 600; }
.wfh-schedule-grid .empty-row { text-align: center; color: var(--tm); padding: 24px; }

.wfh-schedule-legend {
  display: flex;
  flex-wrap: wrap;   /* legend chips reflow instead of clipping on phones */
  gap: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ts);
}

.wfh-schedule-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-inline-end: 5px;
}

.wfh-schedule-legend .dot.present { background: var(--success); }
.wfh-schedule-legend .dot.absent { background: var(--danger); }
.wfh-schedule-legend .dot.weekend { background: var(--tm); }

/* ── 13. DASHBOARD — KPI tiles + charts (approved app.css §5, verbatim) ──── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur), border-color var(--dur), transform var(--dur), background var(--dur);
}

.card--tile {
  position: relative;
  overflow: hidden;
}

.card--tile:hover {
  box-shadow: var(--sh-md);
  border-color: var(--primary);
  transform: translateY(-3px);
}

/* The signature 3px gradient accent bar. */
.card--tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--external));
}

.card--alert {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.card--tile.card--alert::before {
  background: linear-gradient(90deg, var(--danger), var(--warn));
}

.card--tile.card--alert:hover {
  border-color: var(--danger);
}

.kpi-v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--tp);
}

.chip-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  line-height: 0;
  flex: none;
}

/* Text shortcuts used inside the tiles (approved app.css §2). */
.wfh-sec { color: var(--ts); }
.wfh-muted { color: var(--tm); }

/* Legend/bar-list dot (approved app.css §9). */
.wfh-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* KPI tile grid: 2-up on mobile, 5-up desktop (confirmed grid-cols-2 lg:grid-cols-5). */
.wfh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* At 1024-1279 the static sidebar eats ~256px, so 5-up tiles get too narrow
   for their Arabic labels — step through 3-up before the full 5-up at 1280. */
@media (min-width: 1024px) {
  .wfh-kpi-grid { grid-template-columns: repeat(3, 1fr); }

  /* Four-tile screens (audit) fill the row instead of leaving a gap. */
  .wfh-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .wfh-kpi-grid { grid-template-columns: repeat(5, 1fr); }
  .wfh-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .card--tile:hover { transform: none; }
}

/* ── 14. ADMIN SCOPE CHROME — client picker + scope banner ───────────────
   A System Admin browses client-admin pages scoped to ONE client, so the page
   must say whose data is on screen at all times (admin.html:106-109 for the
   picker; asSysBanner for the strip). Admin panel only. */

.wfh-client-picker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-inline-end: .75rem;
}

.wfh-client-picker__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tm);
  white-space: nowrap;
}

.wfh-client-picker__select {
  appearance: none;
  background: var(--surface);
  color: var(--tp);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: .375rem 2rem .375rem .75rem;
  font-size: 13px;
  font-weight: 600;
  min-width: 12rem;
  max-width: 18rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  /* Caret drawn as an inline data-URI: appearance:none removes the native one,
     and this keeps the asset off the network. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left .5rem center;
}

/* RTL-first: the caret sits on whichever side the reading order ends. */
[dir="ltr"] .wfh-client-picker__select {
  padding: .375rem .75rem .375rem 2rem;
  background-position: right .5rem center;
}

.wfh-client-picker__select:hover { border-color: var(--primary-100); }

.wfh-client-picker__select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-050);
}

.wfh-client-picker__go {
  border-radius: var(--r-btn);
  background: var(--primary);
  color: #fff;
  padding: .375rem .75rem;
  font-size: 12px;
  font-weight: 600;
}

/* 14.0 Searchable picker. The roster grows past what a <select> can be scanned
   in, so JS swaps the native control for a filter-as-you-type combobox
   (filament/admin/client-picker-script). Until that script marks the form
   ready the native <select> is the only thing on screen — so a no-JS visitor,
   and the instant before hydration, both get a working control. */

.wfh-client-picker__control { position: relative; display: inline-flex; }

[data-wfh-picker-ready] .wfh-client-picker__select {
  /* Still submitted, still the value holder — just not the visible surface. */
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wfh-client-picker__combo { position: relative; display: inline-flex; }

/* Matches .wfh-client-picker__select exactly: swapping controls must not move
   anything in the topbar by a pixel. */
.wfh-client-picker__input {
  appearance: none;
  background: var(--surface);
  color: var(--tp);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: .375rem 2rem .375rem .75rem;
  font-size: 13px;
  font-weight: 600;
  min-width: 12rem;
  max-width: 18rem;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left .5rem center;
}

[dir="ltr"] .wfh-client-picker__input {
  padding: .375rem .75rem .375rem 2rem;
  background-position: right .5rem center;
}

.wfh-client-picker__input::placeholder { color: var(--tm); font-weight: 500; }
.wfh-client-picker__input:hover { border-color: var(--primary-100); }

.wfh-client-picker__input:focus-visible,
.is-open .wfh-client-picker__input {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-050);
  cursor: text;
}

/* The panel. Anchored to the control's edge so it lines up in both directions;
   z-index clears Filament's sticky topbar. */
.wfh-client-picker__list {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + .375rem);
  z-index: 50;
  margin: 0;
  padding: .25rem;
  list-style: none;
  min-width: 100%;
  max-width: 22rem;
  /* ~9 rows before scrolling: enough that a filtered result set reads as a
     list, short enough never to run off a laptop viewport. */
  max-height: 20rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  box-shadow: var(--sh-lg);
}

.wfh-client-picker__option {
  padding: .4375rem .625rem;
  border-radius: calc(var(--r-ctl) - 4px);
  font-size: 13px;
  font-weight: 500;
  color: var(--tp);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One highlight for both hover and keyboard, so the two never disagree. */
.wfh-client-picker__option:hover,
.wfh-client-picker__option.is-active {
  background: var(--primary-050);
  color: var(--primary-active);
}

.wfh-client-picker__option[aria-selected="true"] { font-weight: 700; }

.wfh-client-picker__option--clear {
  color: var(--tm);
  font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  margin-bottom: .25rem;
}

.wfh-client-picker__empty {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + .375rem);
  z-index: 50;
  min-width: 100%;
  margin: 0;
  padding: .625rem .75rem;
  font-size: 12px;
  color: var(--tm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  box-shadow: var(--sh-lg);
  white-space: nowrap;
}

/* Between committing a choice and the page reload, the control is inert. */
.wfh-client-picker__combo.is-busy .wfh-client-picker__input {
  opacity: .6;
  pointer-events: none;
}

/* EN/ع toggle (admin.html / client.html / employee.html header). */
.wfh-locale-toggle { display: inline-flex; margin-inline-end: .5rem; }

.wfh-locale-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-ctl);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ts);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.wfh-locale-toggle__btn:hover { border-color: var(--primary); color: var(--primary); }

.wfh-locale-toggle__btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-050);
}

.wfh-scope-banner {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .625rem .875rem;
  border-radius: var(--r-ctl);
  border-inline-start: 3px solid var(--primary);
  background: var(--primary-050);
  color: var(--ts);
  font-size: 12.5px;
  line-height: 1.5;
}

.wfh-scope-banner strong { color: var(--primary-600); font-weight: 700; }

/* Nothing picked is a WARNING state, not a neutral one: the tables below are
   empty, and that must read as "choose a client" — never as "no data exists". */
.wfh-scope-banner--empty {
  border-inline-start-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

/* ── 15. PERMISSIONS MATRIX — الصلاحيات (admin.html p_rbac) ───────────── */

.wfh-rbac-note {
  margin-bottom: 1rem;
  padding: .75rem;
  border-radius: var(--r-card);
  border-inline-start: 3px solid var(--primary);
  background: var(--card);
  box-shadow: var(--sh-sm);
  color: var(--ts);
  font-size: 12px;
  line-height: 1.6;
}

.wfh-rbac-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-sm);
  color: var(--tm);
  font-size: 13px;
}

.wfh-rbac-card {
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-sm);
  /* 44 rows x 4 columns scrolls inside its own card rather than pushing the
     page sideways. */
  overflow-x: auto;
}

/* One collapsible card per module (like the sidebar groups). */
.wfh-rbac-module-card { margin-bottom: .75rem; }

.wfh-rbac-module-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  border: none;
  background: transparent;
  color: var(--tp);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: start;
}

.wfh-rbac-module-head:hover { color: var(--primary); }

.wfh-rbac-module-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--tm);
  background: var(--subtle);
  border-radius: 999px;
  padding: 1px 8px;
}

.wfh-rbac-chevron {
  margin-inline-start: auto;
  color: var(--tm);
  transition: transform var(--dur-fast) var(--ease);
}

/* Fixed layout + fixed column widths so the SYS/CADM/EMP columns line up across
   every module card (each module is its own <table>; auto widths made them
   drift out of alignment). The key column takes the remaining space; each role
   column is a fixed 84px. */
.wfh-rbac-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.wfh-rbac-table th,
.wfh-rbac-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: start;
  vertical-align: top;
}

.wfh-rbac-th-key { font-size: 12px; font-weight: 700; color: var(--ts); width: auto; }
.wfh-rbac-th-role,
.wfh-rbac-toggle-cell { font-size: 12px; font-weight: 700; color: var(--ts); text-align: center; width: 84px; }

.wfh-rbac-module td {
  background: var(--subtle);
  font-weight: 600;
  font-size: 13px;
  color: var(--tp);
}

/* The permission's human name (Arabic). It follows the page's RTL direction so
   it aligns to the RIGHT, next to its description — NOT pinned LTR (that pushed
   the Arabic text to the left, toward the toggles). */
.wfh-rbac-key {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp);
  text-align: start;
}

.wfh-rbac-desc { margin-top: 2px; font-size: 11px; color: var(--tm); }

.wfh-rbac-toggle-cell { text-align: center; }

/* The pill. The knob slides via transform (compositor-friendly), so the flip is
   instant. Editable pills are driven by a real checkbox (below); locked ones get
   the --on modifier directly. */
.wfh-toggle {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 18px;
  padding: 2px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--border);
  transition: background var(--dur-fast) var(--ease);
}

.wfh-toggle__knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease);
}

/* Locked pill (SYS column / 🔒): shown, dimmed, inert. */
.wfh-toggle--locked { opacity: .6; }
.wfh-toggle--on { background: var(--primary); }
.wfh-toggle--on .wfh-toggle__knob { transform: translateX(16px); }

/* Editable pill: a visually-hidden checkbox drives the pill via :checked, so the
   toggle flips CLIENT-SIDE with no server round-trip. State syncs on Save. */
.wfh-toggle-wrap { display: inline-flex; cursor: pointer; }

.wfh-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.wfh-toggle-input:checked + .wfh-toggle { background: var(--primary); }
.wfh-toggle-input:checked + .wfh-toggle .wfh-toggle__knob { transform: translateX(16px); }
[dir="rtl"] .wfh-toggle-input:checked + .wfh-toggle .wfh-toggle__knob,
[dir="rtl"] .wfh-toggle--on .wfh-toggle__knob { transform: translateX(-16px); }

.wfh-toggle-input:focus-visible + .wfh-toggle {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-050);
}

.wfh-toggle-input:disabled + .wfh-toggle { opacity: .6; cursor: default; }
.wfh-toggle-input:disabled ~ * { cursor: default; }

.wfh-rbac-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ── 16. SEND TASKS — the two guided step cards (client.html:818-825) ───── */

.wfh-send-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: .5rem 0 1.25rem;
}

@media (min-width: 1024px) {
  .wfh-send-steps { grid-template-columns: 1fr 1fr; }
}

.wfh-send-step {
  padding: 1.25rem;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-sm);
  border-inline-start: 3px solid var(--primary);
}

.wfh-send-step__title { font-weight: 600; font-size: 16px; color: var(--tp); }
.wfh-send-step__hint { margin-top: .375rem; font-size: 12px; color: var(--tm); }

/* ── 17. MOTION — respect reduced-motion (app.css §13) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ── 18. GLOBAL LAYOUT (client instruction, 2026-07-20) ──────────────────
   "No empty spaces on each side of the page — use the max space" and
   "action buttons belong on the right for an Arabic UI". */

/* Filament centres page content inside a max-w-7xl column; at desktop widths
   that leaves dead gutters on both sides. Use the full viewport instead. */
.fi-main {
  max-width: none !important;
}

/* Page-header actions sit right beside the title (the start side — right in
   RTL) instead of being pushed to the far end of the row by justify-between. */
.fi-header {
  justify-content: flex-start !important;
  column-gap: 1.25rem;
}

/* The scope banner breathes below the topbar instead of hugging it. */
.wfh-scope-banner { margin-top: .5rem; }

/* ==========================================================================
   14. Mobile & tablet responsiveness (audit 2026-07-31)
   Filament's own responsive core (drawer sidebar, in-container table scroll)
   is left alone — these rules only fix the CUSTOM surface that defeated it.
   ========================================================================== */

/* 14.1 Topbar client picker: on phones/tablets the topbar also holds the
   hamburger, locale toggle, bell and avatar — the 12rem select can't fit.
   The label collapses to screen-reader-only (never display:none: the select
   keeps its accessible name) and the select itself becomes shrinkable. */
@media (max-width: 768px) {
  .wfh-client-picker { gap: .375rem; margin-inline-end: .5rem; }
  .wfh-client-picker__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wfh-client-picker__select,
  .wfh-client-picker__input { min-width: 0; width: clamp(5.5rem, 28vw, 11rem); max-width: 40vw; }
  /* The panel is free to be wider than its trigger here — client names do not
     shrink just because the topbar did, and truncating every row to 5.5rem
     would make the search pointless. */
  .wfh-client-picker__list { min-width: max(100%, 14rem); max-width: 78vw; }
}
@media (max-width: 640px) {
  /* <16px font on a focused select triggers iOS Safari's zoom-in. */
  .wfh-client-picker__select,
  .wfh-client-picker__input { font-size: 16px; }
}

/* 14.2 Profile cards: the 2-col <dl> grids are inline-styled, so the collapse
   needs !important. Long unbreakable values (emails) wrap instead of clipping. */
.card dl > div { min-width: 0; }
.card dl dd { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .card dl { grid-template-columns: 1fr !important; }
}

/* 14.3 RBAC matrix: below 640px a readable table that scrolls inside its
   module card beats three 50px columns. The table's direct parent is the
   Alpine collapse wrapper (id="rbac-module-N"), so that becomes the scroll
   container. The wrapper flips to LTR while the table stays RTL: leftward
   overflow inside an RTL scroller grows the page in Chromium (RTL quirk),
   rightward overflow scrolls cleanly — visual order is unchanged. */
[id^="rbac-module-"] { overflow-x: auto; -webkit-overflow-scrolling: touch; direction: ltr; }
[id^="rbac-module-"] > .wfh-rbac-table { direction: rtl; }
@media (max-width: 640px) {
  .wfh-rbac-table { min-width: 34rem; }
  .wfh-rbac-th-role, .wfh-rbac-toggle-cell { width: 64px; }
  .wfh-rbac-table th, .wfh-rbac-table td { padding: .5rem .375rem; }
}

/* 14.4 Schedule grid: pin the selection + identity columns while the 31-day
   month scrolls under them (the blade's sticky-col classes had no CSS).
   Logical offsets keep it RTL-correct. */
.wfh-schedule-grid .select-col,
.wfh-schedule-grid .sticky-col,
.wfh-schedule-grid .sticky-col-2 { position: sticky; z-index: 2; background: var(--card); }
.wfh-schedule-grid thead .select-col,
.wfh-schedule-grid thead .sticky-col,
.wfh-schedule-grid thead .sticky-col-2 { background: var(--subtle); z-index: 3; }
.wfh-schedule-grid .select-col { inset-inline-start: 0; }
.wfh-schedule-grid .sticky-col { inset-inline-start: 34px; width: 72px; min-width: 72px; }
.wfh-schedule-grid .sticky-col-2 {
  inset-inline-start: 106px; max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 14.5 Employee my-tasks KPI row hardcodes 3 columns inline — 2-up on phones. */
@media (max-width: 640px) {
  .wfh-kpi-grid[style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 14.6 Employees-by-project bars: long Arabic project names ellipsize instead
   of pushing the bar + count out of the card. */
.fi-wi .card span[style*="min-width:120px"] {
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 400px) {
  .fi-wi .card span[style*="min-width:120px"] { min-width: 90px !important; }
}

/* 14.7 Login logo: wide wordmark uploads stay inside narrow viewports. */
.fi-simple-layout .fi-logo img,
.fi-simple-header .fi-logo img { max-width: min(85vw, 20rem); object-fit: contain; }

/* 14.8 Modals (audit View etc.): JSON blobs and 64-char hashes wrap on phones. */
.fi-modal .fi-in-text,
.fi-modal .fi-in-entry-wrp { overflow-wrap: anywhere; word-break: break-word; }

/* 14.9 Gantt (task-timeline widget): on phones the month keeps a readable
   fixed-scale canvas that scrolls inside the card, like a Filament table. */
@media (max-width: 640px) {
  .wfh-gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wfh-gantt__inner { min-width: 560px; }
}

/* 14.10 Client-growth column chart: labels shrink instead of forcing width.
   On narrow screens they wrap to two lines ("فبراير" / "2026") rather than
   ellipsizing — the label stays readable AND stays aligned with its bar. */
.wfh-colchart > div,
.wfh-colchart-labels > span { min-width: 0; }
.wfh-colchart-labels > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .wfh-colchart-labels > span {
    white-space: normal; text-overflow: clip;
    font-size: 10px; line-height: 1.25; overflow-wrap: anywhere;
  }
}

/* 14.11 Dashboard widget grid — the important one.
   Filament sets --cols-default: repeat(1, minmax(0,1fr)) below lg, but widgets
   whose columnSpan is a fixed number still emit `grid-column: span 2`. On that
   1-column grid the span manufactures an IMPLICIT second column, which takes
   its content width (~355px) and starves the real 1fr column down to ~19px —
   every other widget then collapses (KPI tiles rendered 42px wide and
   overlapped). Below lg, pin every widget to the single column. */
@media (max-width: 1023px) {
  .fi-wi > .fi-wi-widget { grid-column: 1 / -1 !important; }
}

/* ── 15. CLIENT DOCUMENTS — the paperwork modal on the clients table ──────
   Files live on the private disk with no asset URL, so each row links to
   ClientDocumentController rather than to storage. See
   filament/client-documents.blade.php. */

.wfh-client-docs { display: flex; flex-direction: column; gap: .5rem; }

.wfh-client-docs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem;
  background: var(--subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-ctl);
}

.wfh-client-docs__meta { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }

.wfh-client-docs__type {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .01em;
}

/* Long scanned-file names are the norm here, so the name truncates rather
   than pushing the download button off the row. */
.wfh-client-docs__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfh-client-docs__sub { font-size: 11px; color: var(--tm); }
.wfh-client-docs__note { font-size: 12px; color: var(--ts); overflow-wrap: anywhere; }

.wfh-client-docs__dl {
  flex: none;
  border-radius: var(--r-btn);
  background: var(--primary);
  color: #fff;
  padding: .375rem .875rem;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.wfh-client-docs__dl:hover { background: var(--primary-active); }
.wfh-client-docs__missing { flex: none; color: var(--tm); font-size: 12px; }
.wfh-client-docs__empty { font-size: 13px; color: var(--tm); margin: 0; }

/* ── 16. EMPLOYEE PORTAL — company header above مهامي ─────────────────────
   The portal shows the brand logo in the topbar and nothing else about who the
   work is for, so the employing company sits at the top of the home page.
   See filament/employee/pages/my-tasks.blade.php. */

.wfh-emp-company {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Fixed box so a tall or wide logo can't shove the text around. */
.wfh-emp-company__logo {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--r-ctl);
  background: var(--subtle);
  padding: 6px;
}

.wfh-emp-company__body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }

.wfh-emp-company__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--tp);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Facts wrap and self-separate, so any of them being absent leaves no
   orphaned bullet. */
.wfh-emp-company__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  font-size: 13px;
  color: var(--tm);
}

.wfh-emp-company__facts > span + span::before {
  content: '·';
  margin-inline-end: .5rem;
  color: var(--border);
}

.wfh-emp-company__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  font-size: 13px;
  color: var(--ts);
}

.wfh-emp-company__contact a { color: var(--primary); text-decoration: none; }
.wfh-emp-company__contact a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .wfh-emp-company { gap: .75rem; padding: .875rem 1rem; }
  .wfh-emp-company__logo { width: 52px; height: 52px; }
  .wfh-emp-company__name { font-size: 17px; white-space: normal; }
}