/* ============================================================================
   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 */
  --primary:#6B3FE7; --primary-active:#4A2BA6; --primary-050:#EDE8FC;
  --primary-100:#DDD3FA; --primary-600:#5530BE;
  --secondary:#334155;
  /* 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:#6B3FE7; --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:#7B5FF5; --primary-active:#B39DFF; --primary-050:rgba(123,95,245,.18);
  --primary-100:rgba(123,95,245,.28); --primary-600:#8A6FF7;
  --secondary:#94A3B8;
  --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:#8A6FF7; --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;
  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;
}

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

  /* Four-tile screens (audit) fill the row instead of leaving a gap. */
  .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;
}

/* 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; }