/* ==========================================================================
   FactoryHub theme — binds design-tokens.json onto Bootstrap 5.3 (--bs-*) and
   custom (--fh-*) variables. Load AFTER bootstrap.rtl.min.css, BEFORE site.css.
   Source of truth: docs/design-system/design-tokens.json
   Color modes: light (default) + dark via [data-bs-theme="dark"].
   ========================================================================== */

/* ---- Primitive tokens (mode-independent) -------------------------------- */
:root {
  /* Brand ramp */
  --fh-brand-50:#eef2ff;  --fh-brand-100:#e0e7ff; --fh-brand-200:#c7d2fe;
  --fh-brand-300:#a5b4fc; --fh-brand-400:#818cf8; --fh-brand-500:#6366f1;
  --fh-brand-600:#4f46e5; --fh-brand-700:#4338ca; --fh-brand-800:#3730a3;
  --fh-brand-900:#312e81; --fh-brand-950:#1e1b4b;

  /* Neutral (slate) ramp */
  --fh-neutral-0:#ffffff;  --fh-neutral-50:#f8fafc; --fh-neutral-100:#f1f5f9;
  --fh-neutral-200:#e2e8f0;--fh-neutral-300:#cbd5e1;--fh-neutral-400:#94a3b8;
  --fh-neutral-500:#64748b;--fh-neutral-600:#475569;--fh-neutral-700:#334155;
  --fh-neutral-800:#1e293b;--fh-neutral-900:#0f172a;--fh-neutral-950:#020617;

  /* Typography */
  --fh-font-base: Cairo, 'Segoe UI', Tahoma, system-ui, sans-serif;
  --fh-font-latin: Inter, 'Segoe UI', system-ui, sans-serif;
  --fh-font-mono: 'Cascadia Code', Consolas, 'Courier New', monospace;
  --fh-fs-xs:.75rem; --fh-fs-sm:.8125rem; --fh-fs-base:.9375rem; --fh-fs-md:1rem;
  --fh-fs-lg:1.125rem; --fh-fs-xl:1.25rem; --fh-fs-2xl:1.5rem; --fh-fs-3xl:1.875rem; --fh-fs-4xl:2.25rem;

  /* Spacing (4px grid) */
  --fh-space-1:.25rem; --fh-space-2:.5rem; --fh-space-3:.75rem; --fh-space-4:1rem;
  --fh-space-5:1.25rem; --fh-space-6:1.5rem; --fh-space-8:2rem; --fh-space-10:2.5rem;
  --fh-space-12:3rem; --fh-space-16:4rem;

  /* Radius */
  --fh-radius-sm:4px; --fh-radius-md:6px; --fh-radius-lg:8px; --fh-radius-xl:12px; --fh-radius-pill:9999px;

  /* Elevation */
  --fh-shadow-1:0 1px 2px 0 rgba(2,6,23,.06);
  --fh-shadow-2:0 1px 3px 0 rgba(2,6,23,.10),0 1px 2px -1px rgba(2,6,23,.10);
  --fh-shadow-3:0 4px 6px -1px rgba(2,6,23,.10),0 2px 4px -2px rgba(2,6,23,.10);
  --fh-shadow-4:0 10px 15px -3px rgba(2,6,23,.12),0 4px 6px -4px rgba(2,6,23,.10);
  --fh-shadow-5:0 20px 25px -5px rgba(2,6,23,.16),0 8px 10px -6px rgba(2,6,23,.12);

  /* Z-index scale */
  --fh-z-dropdown:1000; --fh-z-sticky:1020; --fh-z-fixed:1030; --fh-z-drawer:1045;
  --fh-z-backdrop:1050; --fh-z-modal:1055; --fh-z-popover:1070; --fh-z-tooltip:1080;
  --fh-z-toast:1090; --fh-z-command:1100;

  /* Sizing */
  --fh-sidebar-w:16rem; --fh-sidebar-collapsed-w:4rem; --fh-topbar-h:3.5rem;
  --fh-control-sm:1.75rem; --fh-control-md:2.25rem; --fh-control-lg:2.75rem;

  /* Motion */
  --fh-duration-fast:120ms; --fh-duration-base:180ms; --fh-duration-slow:240ms;
  --fh-ease-standard:cubic-bezier(.2,0,0,1);

  /* Density (default comfortable; [data-fh-density="compact"] overrides) */
  --fh-row-h:2.75rem; --fh-cell-py:var(--fh-space-3);
}

[data-fh-density="compact"] { --fh-row-h:2.25rem; --fh-cell-py:var(--fh-space-2); }

/* ---- Bootstrap binding: LIGHT (default) --------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary:var(--fh-brand-600);
  --bs-primary-rgb:79,70,229;
  --bs-primary-text-emphasis:var(--fh-brand-800);
  --bs-primary-bg-subtle:var(--fh-brand-50);
  --bs-primary-border-subtle:var(--fh-brand-200);
  --bs-link-color:var(--fh-brand-700);
  --bs-link-color-rgb:67,56,202;
  --bs-link-hover-color:var(--fh-brand-800);

  --bs-secondary:var(--fh-neutral-600); --bs-secondary-rgb:71,85,105; /* .text-secondary/.btn-outline-secondary → AA */
  --bs-success:#16a34a; --bs-success-rgb:22,163,74;
  --bs-warning:#d97706; --bs-warning-rgb:217,119,6;
  --bs-danger:#dc2626;  --bs-danger-rgb:220,38,38;
  --bs-info:#0284c7;    --bs-info-rgb:2,132,199;

  --bs-body-font-family:var(--fh-font-base);
  --bs-body-font-size:var(--fh-fs-base);
  --bs-body-color:var(--fh-neutral-900);
  --bs-body-color-rgb:15,23,42;
  --bs-secondary-color:var(--fh-neutral-600);
  --bs-secondary-color-rgb:71,85,105;   /* .text-secondary reads the -rgb var */
  --bs-tertiary-color:var(--fh-neutral-600);
  --bs-tertiary-color-rgb:71,85,105;
  --bs-body-bg:var(--fh-neutral-100);
  --bs-secondary-bg:var(--fh-neutral-50);
  --bs-tertiary-bg:var(--fh-neutral-100);
  --bs-emphasis-color:var(--fh-neutral-950);
  --bs-border-color:var(--fh-neutral-200);
  --bs-border-radius:var(--fh-radius-md);
  --bs-border-radius-sm:var(--fh-radius-sm);
  --bs-border-radius-lg:var(--fh-radius-lg);
  --bs-box-shadow:var(--fh-shadow-3);
  --bs-box-shadow-sm:var(--fh-shadow-1);
  --bs-box-shadow-lg:var(--fh-shadow-4);

  /* FactoryHub surface roles (light) */
  --fh-bg-canvas:var(--fh-neutral-100);
  --fh-bg-surface:var(--fh-neutral-0);
  --fh-bg-surface-alt:var(--fh-neutral-50);
  --fh-bg-hover:var(--fh-neutral-100);
  --fh-bg-selected:var(--fh-brand-50);
  --fh-border:var(--fh-neutral-200);
  --fh-border-strong:var(--fh-neutral-300);
  --fh-text-primary:var(--fh-neutral-900);
  --fh-text-secondary:var(--fh-neutral-600);
  --fh-text-muted:var(--fh-neutral-600);
  --fh-focus-ring:var(--fh-brand-500);
  --fh-sidebar-bg:var(--fh-neutral-900);
  --fh-sidebar-fg:var(--fh-neutral-300);
  --fh-sidebar-fg-active:var(--fh-neutral-0);
  --fh-sidebar-active-bg:rgba(255,255,255,.08);
}

/* ---- Bootstrap binding: DARK -------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-primary:var(--fh-brand-500);
  --bs-primary-rgb:99,102,241;
  --bs-primary-text-emphasis:var(--fh-brand-300);
  --bs-primary-bg-subtle:var(--fh-brand-950);
  --bs-primary-border-subtle:var(--fh-brand-800);
  --bs-link-color:var(--fh-brand-300);
  --bs-link-color-rgb:165,180,252;
  --bs-link-hover-color:var(--fh-brand-200);

  --bs-body-color:var(--fh-neutral-100);
  --bs-body-color-rgb:241,245,249;
  --bs-secondary:var(--fh-neutral-300); --bs-secondary-rgb:203,213,225;
  --bs-secondary-color:var(--fh-neutral-300);
  --bs-secondary-color-rgb:203,213,225;
  --bs-tertiary-color:var(--fh-neutral-400);
  --bs-tertiary-color-rgb:148,163,184;
  --bs-body-bg:var(--fh-neutral-950);
  --bs-secondary-bg:var(--fh-neutral-900);
  --bs-tertiary-bg:var(--fh-neutral-800);
  --bs-emphasis-color:var(--fh-neutral-0);
  --bs-border-color:var(--fh-neutral-700);

  --fh-bg-canvas:var(--fh-neutral-950);
  --fh-bg-surface:var(--fh-neutral-900);
  --fh-bg-surface-alt:var(--fh-neutral-800);
  --fh-bg-hover:var(--fh-neutral-800);
  --fh-bg-selected:var(--fh-brand-900);
  --fh-border:var(--fh-neutral-700);
  --fh-border-strong:var(--fh-neutral-600);
  --fh-text-primary:var(--fh-neutral-100);
  --fh-text-secondary:var(--fh-neutral-300);
  --fh-text-muted:var(--fh-neutral-300);
  --fh-focus-ring:var(--fh-brand-400);
  --fh-sidebar-bg:var(--fh-neutral-950);
  --fh-sidebar-fg:var(--fh-neutral-400);
  --fh-sidebar-fg-active:var(--fh-neutral-0);
  --fh-sidebar-active-bg:rgba(255,255,255,.06);
}

/* ---- Base ---------------------------------------------------------------- */
body { background-color:var(--fh-bg-canvas); }

:focus-visible {
  outline:2px solid var(--fh-focus-ring);
  outline-offset:2px;
  border-radius:var(--fh-radius-sm);
}
.btn:focus-visible, .form-control:focus, .form-select:focus {
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fh-focus-ring) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ---- Brand binding into Bootstrap components -----------------------------
   Bootstrap 5.3 compiles literal colours into component-level custom props
   (e.g. .btn-primary { --bs-btn-bg:#0d6efd }), which ignore --bs-primary.
   Re-point those component vars at the FactoryHub brand ramp so the brand
   actually renders (buttons, active nav, pagination, checkboxes, etc.). */
.btn-primary {
  --bs-btn-bg:var(--fh-brand-600);          --bs-btn-border-color:var(--fh-brand-600);
  --bs-btn-hover-bg:var(--fh-brand-700);    --bs-btn-hover-border-color:var(--fh-brand-700);
  --bs-btn-active-bg:var(--fh-brand-800);   --bs-btn-active-border-color:var(--fh-brand-800);
  --bs-btn-disabled-bg:var(--fh-brand-600); --bs-btn-disabled-border-color:var(--fh-brand-600);
}
.btn-outline-primary {
  --bs-btn-color:var(--fh-brand-600);       --bs-btn-border-color:var(--fh-brand-600);
  --bs-btn-hover-bg:var(--fh-brand-600);    --bs-btn-hover-border-color:var(--fh-brand-600);
  --bs-btn-active-bg:var(--fh-brand-700);   --bs-btn-active-border-color:var(--fh-brand-700);
  --bs-btn-disabled-color:var(--fh-brand-600);
}
/* Outline-secondary bakes literal #6c757d (fails AA on small text); use slate. */
.btn-outline-secondary {
  --bs-btn-color:var(--fh-text-secondary);        --bs-btn-border-color:var(--fh-border-strong);
  --bs-btn-hover-bg:var(--fh-neutral-600);        --bs-btn-hover-border-color:var(--fh-neutral-600);
  --bs-btn-active-bg:var(--fh-neutral-700);       --bs-btn-active-border-color:var(--fh-neutral-700);
  --bs-btn-disabled-color:var(--fh-text-secondary);
}
.list-group { --bs-list-group-active-bg:var(--fh-brand-600); --bs-list-group-active-border-color:var(--fh-brand-600); }
.pagination { --bs-pagination-active-bg:var(--fh-brand-600); --bs-pagination-active-border-color:var(--fh-brand-600);
  --bs-pagination-color:var(--fh-brand-700); --bs-pagination-hover-color:var(--fh-brand-800); }
.nav-pills { --bs-nav-pills-link-active-bg:var(--fh-brand-600); }
.form-check-input:checked { background-color:var(--fh-brand-600); border-color:var(--fh-brand-600); }
.form-switch .form-check-input:checked { background-color:var(--fh-brand-600); border-color:var(--fh-brand-600); }

/* ==========================================================================
   App shell — sidebar + topbar + content (organism scaffold)
   ========================================================================== */
.fh-app-shell { display:grid; grid-template-columns:var(--fh-sidebar-w) 1fr; min-height:100vh; }
.fh-app-shell[data-collapsed="true"] { grid-template-columns:var(--fh-sidebar-collapsed-w) 1fr; }

.fh-sidebar {
  background:var(--fh-sidebar-bg); color:var(--fh-sidebar-fg);
  padding:var(--fh-space-3); position:sticky; top:0; height:100vh; overflow-y:auto;
}
.fh-sidebar__brand { color:var(--fh-sidebar-fg-active); font-weight:700; font-size:var(--fh-fs-lg);
  padding:var(--fh-space-2) var(--fh-space-3); display:flex; align-items:center; gap:var(--fh-space-2); }
/* Brand logomark badge */
.fh-brand-mark { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:1.75rem; height:1.75rem; border-radius:var(--fh-radius-md);
  background:var(--fh-brand-500); color:#fff; font-size:1rem; line-height:1; }
.fh-brand-mark--lg { width:3rem; height:3rem; border-radius:var(--fh-radius-lg); font-size:1.75rem; }
/* Fixed-width nav glyph so labels align */
.fh-nav-ico { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:1.25rem; text-align:center; }
/* The .fh-sidebar__section label style is reused on light content surfaces
   (e.g. role-edit fieldset legends), so keep the muted token here for AA
   contrast on white, and brighten only when it sits on the dark sidebar. */
.fh-sidebar__section { color:var(--fh-text-muted); font-size:var(--fh-fs-xs); text-transform:uppercase;
  letter-spacing:.04em; padding:var(--fh-space-4) var(--fh-space-3) var(--fh-space-2); }
.fh-sidebar .fh-sidebar__section { color:var(--fh-neutral-400); }
.fh-sidebar__item {
  display:flex; align-items:center; gap:var(--fh-space-3); padding:var(--fh-space-2) var(--fh-space-3);
  color:var(--fh-sidebar-fg); border-radius:var(--fh-radius-md); text-decoration:none;
  transition:background var(--fh-duration-fast) var(--fh-ease-standard);
}
.fh-sidebar__item:hover { background:var(--fh-sidebar-active-bg); color:var(--fh-sidebar-fg-active); }
.fh-sidebar__item--active { background:var(--fh-sidebar-active-bg); color:var(--fh-sidebar-fg-active);
  box-shadow:inset 3px 0 0 0 var(--fh-brand-400); }

/* --- Collapsible sidebar sections (accordion) ---------------------------- */
.fh-sidebar__group { display:block; }

/* Section header is now a button; strip button chrome but keep the existing
   .fh-sidebar__section label styling (muted uppercase, padding, color). */
.fh-sidebar__section--toggle {
  display:flex; align-items:center; justify-content:space-between; gap:var(--fh-space-2);
  width:100%; background:none; border:0; cursor:pointer;
  font-family:inherit; font-weight:inherit; text-align:start;
}
/* RTL: label sits at the start (right), chevron pushed to the end (left) by space-between. */
.fh-sidebar__chevron { flex-shrink:0; font-size:.75rem; }
.fh-sidebar__group[data-open="true"] .fh-sidebar__chevron { transform:rotate(180deg); }

.fh-sidebar__panel { display:grid; grid-template-rows:0fr; }
.fh-sidebar__group[data-open="true"] .fh-sidebar__panel { grid-template-rows:1fr; }
.fh-sidebar__panel-inner { overflow:hidden; min-height:0; }  /* min-height:0 lets the grid row collapse to 0 */

/* Enable animation only after JS sets the initial state (no load-time flash). */
.fh-sidebar__nav.is-ready .fh-sidebar__panel {
  transition:grid-template-rows var(--fh-duration-base) var(--fh-ease-standard);
}
.fh-sidebar__nav.is-ready .fh-sidebar__chevron {
  transition:transform var(--fh-duration-fast) var(--fh-ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .fh-sidebar__nav.is-ready .fh-sidebar__panel,
  .fh-sidebar__nav.is-ready .fh-sidebar__chevron { transition:none; }
}

.fh-topbar {
  height:var(--fh-topbar-h); background:var(--fh-bg-surface); border-bottom:1px solid var(--fh-border);
  display:flex; align-items:center; gap:var(--fh-space-3); padding:0 var(--fh-space-4);
  position:sticky; top:0; z-index:var(--fh-z-sticky);
}
.fh-content { padding:var(--fh-space-6); max-width:var(--fh-container-max,96rem); }

@media (max-width: 992px) {
  .fh-app-shell { grid-template-columns:1fr; }
  .fh-sidebar { position:fixed; inset-inline-start:0; width:var(--fh-sidebar-w); z-index:var(--fh-z-drawer);
    transform:translateX(-100%); transition:transform var(--fh-duration-base) var(--fh-ease-standard); }
  /* RTL: off-canvas slides from the right */
  [dir="rtl"] .fh-sidebar { transform:translateX(100%); }
  .fh-sidebar[data-open="true"] { transform:translateX(0); }
}

/* ==========================================================================
   Component layers
   ========================================================================== */
.card { background:var(--fh-bg-surface); border-color:var(--fh-border); box-shadow:var(--fh-shadow-2); }

/* Page header title (single source of page heading) */
.fh-page-title { font-size:var(--fh-fs-2xl); font-weight:600; line-height:1.2; margin:0; }

/* Standard form column widths (two sizes only) */
.fh-form-narrow { max-width:36rem; }
.fh-form-wide { max-width:44rem; }

/* Compact row-action cluster (icon buttons) */
.fh-row-actions { display:inline-flex; gap:var(--fh-space-1); justify-content:flex-end; align-items:center; }
.fh-row-actions .btn { display:inline-flex; align-items:center; justify-content:center; line-height:1; }

/* Shared filter/toolbar shell for list screens */
.fh-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--fh-space-2);
  background:var(--fh-bg-surface); border:1px solid var(--fh-border); border-radius:var(--fh-radius-lg);
  padding:var(--fh-space-3); margin-bottom:var(--fh-space-3); }
.fh-toolbar__search { flex:1 1 16rem; min-width:12rem; max-width:28rem; }

/* Forward-looking status stepper (Draft -> Pending -> Approved) */
.fh-stepper { display:flex; list-style:none; margin:0 0 var(--fh-space-4); padding:0; }
.fh-stepper__step { flex:1; position:relative; text-align:center; padding-top:2.1rem;
  color:var(--fh-text-muted); font-size:var(--fh-fs-sm); }
.fh-stepper__step::before { content:""; position:absolute; top:0; inset-inline-start:50%; transform:translateX(-50%);
  width:1.5rem; height:1.5rem; border-radius:var(--fh-radius-pill);
  background:var(--fh-bg-surface-alt); border:2px solid var(--fh-border); z-index:1; }
.fh-stepper__step::after { content:""; position:absolute; top:.65rem; inset-inline-start:50%; width:100%; height:2px;
  background:var(--fh-border); }
.fh-stepper__step:last-child::after { display:none; }
.fh-stepper__step--done { color:var(--fh-text-secondary); }
.fh-stepper__step--done::before { background:var(--bs-success); border-color:var(--bs-success); }
.fh-stepper__step--done::after { background:var(--bs-success); }
.fh-stepper__step--current { color:var(--fh-text-primary); font-weight:600; }
.fh-stepper__step--current::before { background:var(--bs-primary); border-color:var(--bs-primary);
  box-shadow:0 0 0 3px var(--fh-brand-200); }
.fh-stepper__step--rejected { color:var(--bs-danger); font-weight:600; }
.fh-stepper__step--rejected::before { background:var(--bs-danger); border-color:var(--bs-danger); }

/* Chart canvas container (Chart.js fills via maintainAspectRatio:false) */
.fh-chart { position:relative; height:16rem; }
.fh-chart--tall { height:20rem; }

/* Command palette */
.fh-command__results { max-height:22rem; overflow-y:auto; }
.fh-command__results:empty { display:none; }
.fh-command__item { border-inline:0; border-radius:0; }
.fh-command__item.active { background:var(--fh-bg-selected); color:var(--fh-text-primary); }

/* Searchable multi-select (progressively enhances <select multiple data-fh-multiselect>) */
.fh-multiselect__native { display:none; }
.fh-multiselect { position:relative; }
.fh-multiselect__control {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--fh-space-2);
  min-height:var(--fh-control-md); height:auto; padding:var(--fh-space-1) var(--fh-space-2);
  cursor:text;
}
.fh-multiselect.is-open .fh-multiselect__control,
.fh-multiselect__control:focus-within {
  border-color:var(--fh-focus-ring);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fh-focus-ring) 35%, transparent);
}
.fh-multiselect__chips { display:contents; }
.fh-multiselect__chip {
  display:inline-flex; align-items:center; gap:var(--fh-space-1);
  background:var(--fh-bg-selected); color:var(--fh-text-primary);
  border:1px solid var(--fh-border); border-radius:var(--fh-radius-sm);
  padding:.1rem .15rem .1rem .5rem; font-size:var(--fh-fs-sm); line-height:1.4;
}
.fh-multiselect__chip-x {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.1rem; height:1.1rem; padding:0; border:0; border-radius:var(--fh-radius-sm);
  background:transparent; color:var(--fh-text-muted); font-size:1rem; line-height:1; cursor:pointer;
}
.fh-multiselect__chip-x:hover { background:var(--fh-bg-hover); color:var(--fh-text-primary); }
.fh-multiselect__input {
  flex:1 1 6rem; min-width:6rem; border:0; outline:0; background:transparent;
  color:var(--fh-text-primary); font:inherit; padding:.2rem 0;
}
.fh-multiselect__panel {
  position:absolute; inset-inline:0; top:calc(100% + 2px); z-index:var(--fh-z-dropdown);
  max-height:16rem; overflow-y:auto; display:none;
  background:var(--fh-bg-surface); border:1px solid var(--fh-border);
  border-radius:var(--fh-radius-md); box-shadow:var(--fh-shadow-2); padding:var(--fh-space-1);
}
.fh-multiselect.is-open .fh-multiselect__panel { display:block; }
.fh-multiselect__option {
  display:block; width:100%; text-align:start; border:0; background:transparent;
  color:var(--fh-text-primary); font:inherit; padding:var(--fh-space-2) var(--fh-space-3);
  border-radius:var(--fh-radius-sm); cursor:pointer;
}
.fh-multiselect__option:hover, .fh-multiselect__option.active {
  background:var(--fh-bg-selected); color:var(--fh-text-primary);
}
.fh-multiselect__empty { padding:var(--fh-space-2) var(--fh-space-3);
  color:var(--fh-text-muted); font-size:var(--fh-fs-sm); }

/* Dashboard module-card icon chip */
.fh-module-card__ico { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:2.75rem; height:2.75rem; border-radius:var(--fh-radius-lg);
  background:var(--fh-bg-surface-alt); font-size:var(--fh-fs-xl); }

/* Data table density + sticky header */
.fh-table { background:var(--fh-bg-surface); }
.fh-table thead th {
  position:sticky; top:0; background:var(--fh-bg-surface-alt); z-index:var(--fh-z-raised,1);
  font-size:var(--fh-fs-base); color:var(--fh-text-secondary); font-weight:600;
  border-bottom:1px solid var(--fh-border-strong); white-space:nowrap;
}
.fh-table td, .fh-table th { padding-top:var(--fh-cell-py); padding-bottom:var(--fh-cell-py); }
.fh-table tbody tr { height:var(--fh-row-h); }
.fh-table tbody tr:hover { background:var(--fh-bg-hover); }
.fh-table tbody tr[aria-selected="true"] { background:var(--fh-bg-selected); }
.fh-num { text-align:end; font-variant-numeric:tabular-nums; }

/* KPI tile */
.fh-kpi { background:var(--fh-bg-surface); border:1px solid var(--fh-border); border-radius:var(--fh-radius-lg);
  padding:var(--fh-space-4); box-shadow:var(--fh-shadow-1); }
.fh-kpi__value { font-size:var(--fh-fs-3xl); font-weight:700; line-height:1.1; }
.fh-kpi__label { color:var(--fh-text-muted); font-size:var(--fh-fs-sm); }

/* Kanban */
.fh-kanban { display:flex; gap:var(--fh-space-4); overflow-x:auto; padding-bottom:var(--fh-space-2); }
.fh-kanban__col { flex:0 0 18rem; background:var(--fh-bg-surface-alt); border-radius:var(--fh-radius-lg);
  padding:var(--fh-space-3); }
.fh-kanban__card { background:var(--fh-bg-surface); border:1px solid var(--fh-border);
  border-radius:var(--fh-radius-md); padding:var(--fh-space-3); margin-bottom:var(--fh-space-3);
  box-shadow:var(--fh-shadow-1); }

/* Timeline / approval steps */
.fh-timeline { list-style:none; margin:0; padding:0; position:relative; padding-inline-start:var(--fh-space-6); }
.fh-timeline::before { content:""; position:absolute; inset-inline-start:.65rem; top:0; bottom:0;
  width:2px; background:var(--fh-border); }
.fh-timeline__item { position:relative; padding-bottom:var(--fh-space-5); }
.fh-timeline__dot { position:absolute; inset-inline-start:-1.1rem; top:.15rem; width:.9rem; height:.9rem;
  border-radius:var(--fh-radius-pill); background:var(--fh-neutral-400); border:2px solid var(--fh-bg-surface); }
.fh-timeline__item--done .fh-timeline__dot { background:var(--bs-success); }
.fh-timeline__item--current .fh-timeline__dot { background:var(--bs-primary); box-shadow:0 0 0 3px var(--fh-brand-200); }
.fh-timeline__item--rejected .fh-timeline__dot { background:var(--bs-danger); }

/* Skeleton */
.fh-skeleton { background:linear-gradient(90deg, var(--fh-bg-hover) 25%, var(--fh-bg-surface-alt) 37%, var(--fh-bg-hover) 63%);
  background-size:400% 100%; border-radius:var(--fh-radius-sm); animation:fh-shimmer 1.4s ease infinite; }
@keyframes fh-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Status badges (semantic) */
.fh-badge { display:inline-flex; align-items:center; gap:var(--fh-space-1); padding:.15rem .5rem;
  border-radius:var(--fh-radius-pill); font-size:var(--fh-fs-xs); font-weight:600; }
.fh-badge--success { background:#dcfce7; color:#15803d; }
.fh-badge--warning { background:#fef3c7; color:#b45309; }
.fh-badge--danger  { background:#fee2e2; color:#b91c1c; }
.fh-badge--info    { background:#e0f2fe; color:#0369a1; }
.fh-badge--neutral { background:var(--fh-bg-hover); color:var(--fh-text-secondary); }

/* Empty state */
.fh-empty { text-align:center; padding:var(--fh-space-12) var(--fh-space-6); color:var(--fh-text-muted); }
.fh-empty__icon { font-size:2.5rem; opacity:.5; margin-bottom:var(--fh-space-3); }

/* ==========================================================================
   Audit remediation (2026-06-24): responsiveness, touch targets, forms a11y
   ========================================================================== */

/* --- Overflow hardening: never let a child scroll the whole page ---------- */
html, body { max-width:100%; }
body { overflow-x:clip; }
/* The app-shell's content column is a 1fr grid track whose item defaults to
   min-width:auto (min-content) — a wide child (e.g. the horizontal sub-nav)
   would stretch the track and scroll the whole page. Let it shrink instead. */
.fh-app-shell > * { min-width:0; }
.fh-content { min-width:0; }                 /* allow grid/flex children to shrink */
.fh-content img, .fh-content svg, .fh-content canvas { max-width:100%; }
.fh-chart canvas { max-width:100%; }

/* --- Mobile drawer backdrop scrim (sibling of .fh-sidebar) ---------------- */
.fh-scrim { position:fixed; inset:0; background:rgba(2,6,23,.5);
  z-index:calc(var(--fh-z-drawer) - 1); opacity:0; visibility:hidden;
  transition:opacity var(--fh-duration-base) var(--fh-ease-standard); }
@media (max-width: 992px) {
  .fh-sidebar[data-open="true"] ~ .fh-scrim { opacity:1; visibility:visible; }
}

/* --- Touch targets ≥ ~40-44px on touch/mobile (WCAG 2.5.5) ---------------- */
@media (max-width: 991.98px) {
  .fh-sidebar__item { min-height:44px; }
  .btn-sm { min-height:38px; }
  .fh-row-actions .btn { min-width:38px; min-height:38px; }
  .page-link { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
}

/* --- Form affordance + required marker ------------------------------------ */
.form-control, .form-select { border-color:var(--fh-border-strong); }
.form-control:hover, .form-select:hover { border-color:var(--fh-brand-400); }
label.required::after, .form-label.required::after { content:" *"; color:var(--bs-danger); }

/* --- Dashboard module cards (richer, interactive) ------------------------- */
.fh-module-card {
  border-inline-start:var(--fh-space-1) solid var(--fh-module-color, var(--fh-brand-500));
  transition:box-shadow var(--fh-duration-base) var(--fh-ease-standard),
             transform var(--fh-duration-base) var(--fh-ease-standard);
}
.fh-module-card:hover, .fh-module-card:focus-visible { box-shadow:var(--fh-shadow-4); transform:translateY(-2px); }
.fh-module-card .fh-module-card__ico {
  color:var(--fh-module-color, var(--fh-brand-500));
  background:color-mix(in srgb, var(--fh-module-color, var(--fh-brand-500)) 14%, transparent);
}
.fh-module-card__arrow { transition:transform var(--fh-duration-fast) var(--fh-ease-standard); }
.fh-module-card:hover .fh-module-card__arrow { transform:translateX(-4px); }

/* ==========================================================================
   Responsive data tables (2026-06-24): horizontal-scroll affordance +
   phone card-reflow. Opt a table into reflow with .fh-table--cards and set
   data-label="<header>" on each <td> (mark the action cell .fh-cell-actions).
   ========================================================================== */

/* --- Scroll affordance: edge shadows appear only when a table overflows ----
   Direction-agnostic (works in RTL); the gradients are background-attachment:
   local so they collapse when there is nothing to scroll. ------------------- */
.table-responsive {
  background:
    linear-gradient(to right, var(--fh-bg-surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--fh-bg-surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(2,6,23,.14), rgba(2,6,23,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(2,6,23,.14), rgba(2,6,23,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}

@media (max-width: 767.98px) {
  /* No edge shadow when the table has reflowed into cards (nothing scrolls). */
  .table-responsive:has(.fh-table--cards) { background:none; }

  .fh-table--cards { background:transparent; }
  /* Hide the header row accessibly; per-cell data-label carries the column name. */
  .fh-table--cards thead {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); border:0;
  }
  .fh-table--cards tbody tr {
    display:block; height:auto;
    background:var(--fh-bg-surface); border:1px solid var(--fh-border);
    border-radius:var(--fh-radius-lg); box-shadow:var(--fh-shadow-1);
    padding:var(--fh-space-2) var(--fh-space-3); margin-bottom:var(--fh-space-3);
  }
  .fh-table--cards tbody tr:hover { background:var(--fh-bg-surface); }
  .fh-table--cards tbody td {
    display:flex; align-items:center; justify-content:space-between; gap:var(--fh-space-4);
    border:0; padding:var(--fh-space-2) 0; text-align:start; max-width:none;
  }
  .fh-table--cards tbody td::before {
    content:attr(data-label); flex:0 0 auto;
    color:var(--fh-text-muted); font-weight:600; font-size:var(--fh-fs-sm);
  }
  .fh-table--cards .fh-num { text-align:end; }
  /* Action cluster: full-width button row at the card foot, no label. */
  .fh-table--cards tbody td.fh-cell-actions {
    justify-content:flex-end; padding-top:var(--fh-space-3);
    margin-top:var(--fh-space-2); border-top:1px solid var(--fh-border);
  }
  .fh-table--cards tbody td.fh-cell-actions::before { content:none; }
}