@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap);
/**
 * SITERP — compact mobile shell (≤639px, below Tailwind `sm`)
 * Balance: readable FR text + KPI density (no ultra-narrow 3-col — it breaks labels).
 *
 * Opt-out dense multi-col on a grid: class `mobile-keep-1-col` (charts, wide sections).
 */

@media (max-width: 639px) {
  html {
    font-size: 87.5%;
  }

  .erp-app-root main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  .erp-app-root .grid.mobile-keep-1-col {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* 2 cols max on phone — enough width for “Fournisseurs”, chart titles, etc. */
  .erp-app-root .grid:not(.mobile-keep-1-col)[class~='grid-cols-1'][class*=':grid-cols-'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }

  .erp-app-root main .grid.gap-6,
  .erp-app-root main .grid.gap-5 {
    gap: 0.625rem !important;
  }

  .erp-app-root main .grid.gap-4 {
    gap: 0.5rem !important;
  }

  .erp-app-root main .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.875rem !important;
  }

  .erp-app-root h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  .erp-app-root h2 {
    font-size: 1.15rem !important;
  }

  .erp-app-root h3 {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  .erp-app-root .text-4xl {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  .erp-app-root .text-3xl {
    font-size: 1.2rem !important;
    line-height: 1.28 !important;
  }

  .erp-app-root .text-2xl {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
  }

  .erp-app-root .text-xl {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .erp-app-root .text-lg {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  /* ---- Glass / KPI cards: breathing room (fixes “text stuck to edges”) ---- */
  .erp-app-root main [class*='backdrop-blur-lg'][class*='rounded-3xl'] {
    overflow: hidden !important;
  }

  .erp-app-root main .relative.group > div[class*='backdrop-blur-lg'][class*='rounded-3xl'] {
    padding: 1rem 0.9rem !important;
    box-sizing: border-box !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'][class*='rounded-3xl'][class*='border'] {
    padding: 1rem 0.9rem !important;
    box-sizing: border-box !important;
  }

  /* Nested mini-cards (e.g. Résumé analytique) */
  .erp-app-root main [class*='backdrop-blur-lg'][class*='rounded-3xl'] [class*='bg-white/5'][class*='rounded-3xl'] {
    padding: 0.85rem 0.75rem !important;
    box-sizing: border-box !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .relative > div.absolute.inset-0[class*='blur-lg'] {
    display: none !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .flex.items-center.justify-between {
    gap: 0.5rem !important;
    min-width: 0 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .flex.items-center.justify-between > div:first-child {
    min-width: 0 !important;
  }

  /* Labels / KPI rows: don’t crush text against values */
  .erp-app-root main [class*='backdrop-blur-lg'] .flex.justify-between.items-center {
    gap: 0.5rem !important;
    min-width: 0 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .flex.justify-between.items-center span {
    min-width: 0 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .text-xs {
    line-height: 1.45 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] .text-sm {
    line-height: 1.4 !important;
  }

  /* Section titles with icon (charts): wrap, no single-line chop */
  .erp-app-root main [class*='backdrop-blur-lg'] h3.text-xl {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 0.25rem;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] h3.text-xl svg {
    flex-shrink: 0 !important;
    margin-top: 0.15rem;
  }

  /* Icon chips (Lucide in gradient box) */
  .erp-app-root main [class*='backdrop-blur-lg'] div[class*='bg-gradient-to-r'] > svg.lucide {
    width: 1.05rem !important;
    height: 1.05rem !important;
    max-width: 1.05rem !important;
    max-height: 1.05rem !important;
    flex-shrink: 0 !important;
  }

  .erp-app-root main [class*='backdrop-blur-lg'] div[class*='bg-gradient-to-r']:has(> svg.lucide) {
    padding: 0.35rem 0.45rem !important;
    box-sizing: border-box !important;
  }

  /* Small 2-col grids inside a card (payés / en attente, etc.) */
  .erp-app-root main [class*='backdrop-blur-lg'] .grid.grid-cols-2 {
    gap: 0.45rem 0.35rem !important;
  }
}

/**
 * SITERP — densité UI mobile globale (≤639px, aligné sur mobile-compact.css)
 *
 * Portée :
 * - `.erp-app-root` (Layout) — zone `main` : listes Facturation, KPI, recherche, etc.
 * - **`:is(.employees-container, .clients-container)`** : mêmes règles listes KPI / table-scroll (pages Pointage / Caisse utilisent encore `clients-container`).
 * - `[role="dialog"]` si présent
 * - **Portails `ReactDOM.createPortal(…, document.body)`** : overlays plein écran centrés
 *   (`fixed inset-0` + flex + backdrop-blur) — hors `.erp-app-root`, donc règles dédiées `body > …`.
 *
 * Complète `mobile-compact.css` (typo titres, grilles shell, cartes KPI) avec champs
 * formulaire, grilles gap-4, totaux document, etc.
 */

@media (max-width: 639px) {
  :is(.erp-app-root, [role="dialog"]) .form-group label {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.3rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-group input,
  :is(.erp-app-root, [role="dialog"]) .form-group textarea,
  :is(.erp-app-root, [role="dialog"]) .form-group select {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem;
    box-sizing: border-box;
  }

  /* CustomSelect (combobox) : réserver la place du chevron */
  :is(.erp-app-root, [role="dialog"]) .form-group .relative > input[type="text"] {
    padding-right: 2.1rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-group .relative > button[type="button"] {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 2.1rem 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-group .relative > button[type="button"] svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-group textarea {
    min-height: 3rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-group input::placeholder,
  :is(.erp-app-root, [role="dialog"]) .form-group textarea::placeholder {
    font-size: 0.75rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .readonly-input {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem;
    box-sizing: border-box;
  }

  :is(.erp-app-root, [role="dialog"]) .section-title {
    font-size: 1rem !important;
    margin-bottom: 0.6rem !important;
    gap: 0.35rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .section-title svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .section-subtitle {
    font-size: 0.6875rem !important;
    margin: 0.75rem 0 0.4rem 0 !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-section {
    padding: 0.75rem !important;
    border-radius: 0.65rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .form-grid {
    gap: 0.65rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .client-info {
    padding: 0.65rem 0.75rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .client-details {
    font-size: 0.8125rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .fiscal-info {
    font-size: 0.75rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .item-row {
    padding: 0.65rem !important;
    gap: 0.5rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .item-fields {
    gap: 0.5rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .item-fields .form-group {
    min-width: 100px !important;
  }

  :is(.erp-app-root, [role="dialog"]) .btn {
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 0.5rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .btn-remove {
    margin-top: 1rem !important;
    padding: 0.4rem 0.5rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .totals-summary {
    padding: 0.6rem 0.75rem 0.7rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .totals-summary-header {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.45rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .total-line {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.2rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .total-line.total span:last-child {
    font-size: 0.95rem !important;
  }

  :is(.erp-app-root, [role="dialog"]) .payment-line-delete-btn {
    height: 2.25rem !important;
    padding: 0.35rem !important;
  }

  /* Même spécificité que mobile-compact.css (`.erp-app-root main …`) pour gagner la cascade */
  .erp-app-root main .grid.gap-4,
  [role="dialog"] .grid.gap-4 {
    gap: 0.65rem !important;
  }

  .erp-app-root main .flex-col.gap-4,
  [role="dialog"] .flex-col.gap-4 {
    gap: 0.65rem !important;
  }

  /**
   * Pages sans `.form-group` : contrôles natifs dans la zone scrollable principale
   * (exclut header/topbar — ils sont hors `main`).
   */
  .erp-app-root main input[type="text"],
  .erp-app-root main input[type="search"],
  .erp-app-root main input[type="email"],
  .erp-app-root main input[type="tel"],
  .erp-app-root main input[type="url"],
  .erp-app-root main input[type="number"],
  .erp-app-root main input[type="password"],
  .erp-app-root main input[type="date"],
  .erp-app-root main input[type="time"],
  .erp-app-root main input[type="datetime-local"],
  .erp-app-root main input[type="month"],
  .erp-app-root main input:not([type]),
  .erp-app-root main textarea,
  .erp-app-root main select {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem;
    box-sizing: border-box;
  }

  .erp-app-root main textarea {
    min-height: 3rem !important;
  }

  .erp-app-root main input::placeholder,
  .erp-app-root main textarea::placeholder {
    font-size: 0.75rem !important;
  }

  [role="dialog"] input[type="text"],
  [role="dialog"] input[type="search"],
  [role="dialog"] input[type="email"],
  [role="dialog"] input[type="tel"],
  [role="dialog"] input[type="url"],
  [role="dialog"] input[type="number"],
  [role="dialog"] input[type="password"],
  [role="dialog"] input[type="date"],
  [role="dialog"] input[type="time"],
  [role="dialog"] input[type="datetime-local"],
  [role="dialog"] input[type="month"],
  [role="dialog"] input:not([type]),
  [role="dialog"] textarea,
  [role="dialog"] select {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem;
    box-sizing: border-box;
  }

  [role="dialog"] textarea {
    min-height: 3rem !important;
  }

  [role="dialog"] input::placeholder,
  [role="dialog"] textarea::placeholder {
    font-size: 0.75rem !important;
  }

  /* -------------------------------------------------------------------------
     Recherche avec icône (pl-10) — ne pas écraser le décalage à gauche
     ------------------------------------------------------------------------- */
  .erp-app-root main input.pl-10,
  .erp-app-root main input[class*="pl-10"] {
    padding-left: 2.15rem !important;
    padding-right: 0.55rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  /* -------------------------------------------------------------------------
     Listes Facturation (Facturiers, Fournisseurs, Clients…) — titres + KPI + barre d’actions
     Les utilitaires Tailwind (text-3xl, p-6) battent souvent h1 seul : on cible `main`.
     ------------------------------------------------------------------------- */
  .erp-app-root main h1.text-3xl,
  .erp-app-root main h1.text-2xl {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
  }

  .erp-app-root main h1 svg.h-8,
  .erp-app-root main h1 .h-8.w-8 {
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > .flex.justify-between.items-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > .flex.justify-between.items-center > .flex.gap-3 {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > .flex.justify-between.items-center button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > .flex.justify-between.items-center button svg.h-5,
  .erp-app-root main :is(.employees-container, .clients-container) > .flex.justify-between.items-center button .h-5 {
    width: 0.95rem !important;
    height: 0.95rem !important;
  }

  .erp-app-root main .grid.gap-6 {
    gap: 0.45rem !important;
  }

  .erp-app-root main .relative.group [class*="backdrop-blur-lg"][class*="rounded-3xl"][class*="border"] {
    padding: 0.55rem 0.5rem !important;
  }

  .erp-app-root main .relative.group [class*="backdrop-blur-lg"] p.text-2xl {
    font-size: 0.95rem !important;
    margin-top: 0.15rem !important;
  }

  .erp-app-root main .relative.group [class*="backdrop-blur-lg"] p[class*="text-white/60"] {
    font-size: 0.68rem !important;
  }

  .erp-app-root main .relative.group [class*="bg-gradient-to-r"] > svg.h-6 {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  .erp-app-root main .relative.group [class*="bg-gradient-to-r"]:has(> svg) {
    padding: 0.35rem !important;
  }

  .erp-app-root main [class*="employees-container"][class*="space-y"] > :not([hidden]) ~ :not([hidden]),
  .erp-app-root main [class*="clients-container"][class*="space-y"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.45rem !important;
  }

  .erp-app-root main button.flex-1.px-4.py-3,
  .erp-app-root main .flex.space-x-1 button {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: 0.65rem !important;
  }

  .erp-app-root main .flex.space-x-1 button svg.h-5 {
    width: 0.95rem !important;
    height: 0.95rem !important;
  }

  /* -------------------------------------------------------------------------
     Modales portées sur `document.body` (createPortal) — même densité que le document
     Sélecteur : overlay plein écran centré + flou (Nouveau Facturier, fiche, etc.)
     ------------------------------------------------------------------------- */
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="text"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="search"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="email"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="tel"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="url"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="number"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="password"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="date"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="time"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="datetime-local"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input[type="month"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input:not([type]),
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] textarea,
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] select {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.25rem !important;
    box-sizing: border-box !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] label.block,
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] label.font-medium {
    font-size: 0.72rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] h2.text-2xl,
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] h2 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] h3.text-lg {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .p-6 {
    padding: 0.75rem !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .border-b.p-6,
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .flex.items-center.justify-between.p-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] button[type="submit"],
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .rounded-xl.px-6 {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.55rem !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .grid.gap-4 {
    gap: 0.55rem !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem !important;
  }

  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] input::placeholder,
  body > div.fixed.inset-0.flex.items-center.justify-center[class*="backdrop-blur"] textarea::placeholder {
    font-size: 0.72rem !important;
  }

  /* -------------------------------------------------------------------------
     Listes catalogue Produits / Services : bandeau recherche + filtres compacts
     ------------------------------------------------------------------------- */
  .erp-app-root main .facturation-list-controls-strip {
    padding: 0.5rem 0.65rem !important;
  }

  .erp-app-root main .facturation-list-controls-strip .facturation-list-controls-row {
    gap: 0.45rem !important;
  }

  /* legacy: anciennes rangées avec gap-4 uniquement */
  .erp-app-root main .facturation-list-controls-strip .gap-4 {
    gap: 0.45rem !important;
  }

  .erp-app-root main .facturation-list-controls-strip .relative.min-w-0.flex-1.max-w-md svg.h-5,
  .erp-app-root main .facturation-list-controls-strip .relative.flex-1.max-w-md svg.h-5 {
    width: 1rem !important;
    height: 1rem !important;
  }

  .erp-app-root main .facturation-list-toolbar {
    gap: 0.28rem !important;
    row-gap: 0.28rem !important;
    align-items: center !important;
  }

  /* Même densité mobile sur toute la zone main (Analyses & Rapports, Archives…) */
  .erp-app-root main .facturation-list-toolbar > .relative > button > span,
  .erp-app-root main .facturation-list-toolbar > button > span:not(.sr-only) {
    display: none !important;
  }
  .erp-app-root main .facturation-list-toolbar .relative > button:has(svg:nth-of-type(2)) > svg:last-of-type,
  .erp-app-root main .facturation-list-toolbar > button:has(svg:nth-of-type(2)) > svg:last-of-type {
    display: none !important;
  }

  /* Triggers uniquement — même carré sur toute la rangée (aligné Import/Export, ~24px) */
  .erp-app-root main .facturation-list-toolbar > button,
  .erp-app-root main .facturation-list-toolbar > .relative > button {
    padding: 0.12rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    border-radius: 0.35rem !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .erp-app-root main .facturation-list-toolbar > button span,
  .erp-app-root main .facturation-list-toolbar > .relative > button span {
    font-size: 0.7rem !important;
  }

  .erp-app-root main .facturation-list-toolbar > button svg,
  .erp-app-root main .facturation-list-toolbar > .relative > button svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    min-width: 0.9rem !important;
  }

  /* Bascule vue cartes / tableau : même taille que les triggers (1.5rem), icônes identiques */
  .erp-app-root main .facturation-list-toolbar .facturation-view-mode-toggle > div.inline-flex > button,
  .erp-app-root main .facturation-list-toolbar .facturation-view-mode-toggle .inline-flex.rounded-lg > button {
    padding: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
    flex: 0 0 1.5rem !important;
    box-sizing: border-box !important;
  }

  .erp-app-root main .facturation-list-toolbar .facturation-view-mode-toggle .inline-flex.rounded-lg {
    padding: 0.08rem !important;
    gap: 0.08rem !important;
  }

  .erp-app-root main .facturation-list-toolbar .facturation-view-mode-toggle > div.inline-flex.rounded-md {
    border-radius: 0.35rem !important;
  }

  .erp-app-root main .facturation-list-toolbar .facturation-view-mode-toggle button svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    min-width: 0.9rem !important;
    min-height: 0.9rem !important;
  }

  /* -------------------------------------------------------------------------
     Tableau employees-table dans pages :is(.employees-container, .clients-container) ou .archives-container
     (Archives : même classes tableau mais wrapper archives-container sans employees → explicite)
     ------------------------------------------------------------------------- */
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td,
  .erp-app-root main .archives-container table.employees-table.data-table th,
  .erp-app-root main .archives-container table.employees-table.data-table td {
    padding: 0.32rem 0.42rem !important;
    font-size: 0.72rem !important;
    line-height: 1.28 !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th,
  .erp-app-root main .archives-container table.employees-table.data-table th {
    font-size: 0.65rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th button svg,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td button svg,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td svg.h-4,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td svg.h-5,
  .erp-app-root main .archives-container table.employees-table.data-table th button svg,
  .erp-app-root main .archives-container table.employees-table.data-table td button svg,
  .erp-app-root main .archives-container table.employees-table.data-table td svg.h-4,
  .erp-app-root main .archives-container table.employees-table.data-table td svg.h-5 {
    width: 0.85rem !important;
    height: 0.85rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table .text-xs,
  .erp-app-root main .archives-container table.employees-table.data-table .text-xs {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }
}

/* Tableaux liste (Archives, etc.) : densité intermédiaire tablette — mêmes py-4 Tailwind sans ce bloc */
@media (min-width: 640px) and (max-width: 1023px) {
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td,
  .erp-app-root main .archives-container table.employees-table.data-table th,
  .erp-app-root main .archives-container table.employees-table.data-table td {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th,
  .erp-app-root main .archives-container table.employees-table.data-table th {
    font-size: 0.7rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table th button svg,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td button svg,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td svg.h-4,
  .erp-app-root main :is(.employees-container, .clients-container) table.employees-table.data-table td svg.h-5,
  .erp-app-root main .archives-container table.employees-table.data-table th button svg,
  .erp-app-root main .archives-container table.employees-table.data-table td button svg,
  .erp-app-root main .archives-container table.employees-table.data-table td svg.h-4,
  .erp-app-root main .archives-container table.employees-table.data-table td svg.h-5 {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
}

/* =====================================================================
 * Mobile « élargi » & tablette portrait (<768px / sous breakpoint md Tailwind).
 * KPI / cartes stats (grille racine gap-6) : lisibilité + dernière ligne pleine si effectif impair.
 * ===================================================================== */
@media (max-width: 767.98px) {
  .erp-app-root main :is(.employees-container, .clients-container),
  .erp-app-root main .archives-container {
    min-width: 0;
  }

  /*
   * Rangée KPI (md:grid-cols-5 + gap-6) — mobile lisible sans cartes géantes XL.
   * Grille 2 colonnes ; dernier KPI si effectif IMPAIR (ex. 3 ou 5) en pleine largeur.
   */
  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"],
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] > :only-child,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] > :only-child {
    grid-column: 1 / -1;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] > :last-child:nth-child(odd):not(:only-child),
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] > :last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] div.bg-white\/10.backdrop-blur-lg.rounded-3xl.border,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] div.bg-white\/10.backdrop-blur-lg.rounded-3xl.border {
    padding: 0.65rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] p.text-white\/60.text-sm,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] p.text-white\/60.text-sm {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] p.text-white\/70.text-sm,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] p.text-white\/70.text-sm {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] .text-2xl,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] .text-2xl {
    font-size: 1.2rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.2 !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] .p-3.rounded-2xl,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] .p-3.rounded-2xl {
    padding: 0.45rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) > div.grid[class*="gap-6"] svg.h-6.w-6,
  .erp-app-root main .archives-container > div.grid[class*="gap-6"] svg.h-6.w-6 {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /*
   * Tableaux ultra-larges (feuille salaire « vue globale ») : en-têtes section multilignes + pas de sticky
   * (évite chevauchements / doubles barres de scroll sur tactile).
   */
  .erp-app-root main table.salaries-global-sheet-table thead tr:first-child th {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 0.5625rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    padding: 0.3rem 0.15rem !important;
  }

  .erp-app-root main table.salaries-global-sheet-table thead th[class*="sticky"] {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  .erp-app-root main .salaries-vue-globale-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* Grilles génériques gap-4 + sm:2cols sauf grille d’aperçu ERP ([data-erp-overview-n]). */
  .erp-app-root main :is(.employees-container, .clients-container) div.grid[class*="gap-4"][class*="sm:grid-cols-2"]:not([data-erp-overview-n]),
  .erp-app-root main .archives-container div.grid[class*="gap-4"][class*="sm:grid-cols-2"]:not([data-erp-overview-n]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /*
   * Aperçu / distribution (pages listes, archives) —
   * data-erp-overview-n depuis src/shared/utils/erpOverviewGridAttrs.js ; styles ici uniquement.
   */
  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n],
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] {
    gap: 0.35rem !important;
    align-items: stretch;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n="3"],
  .erp-app-root main .archives-container div.grid[data-erp-overview-n="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n="4"],
  .erp-app-root main .archives-container div.grid[data-erp-overview-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n]:not([data-erp-overview-n="3"]):not([data-erp-overview-n="4"]),
  .erp-app-root main .archives-container div.grid[data-erp-overview-n]:not([data-erp-overview-n="3"]):not([data-erp-overview-n="4"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button,
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button {
    padding: 0.4rem !important;
    min-width: 0;
    border-radius: 0.65rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > div:first-child,
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > div:first-child {
    align-items: flex-start !important;
    gap: 0.2rem !important;
    margin-bottom: 0.25rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > div:first-child h4,
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > div:first-child h4 {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.15rem;
    margin: 0;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > div:first-child > div[class*="rounded-full"],
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > div:first-child > div[class*="rounded-full"] {
    flex-shrink: 0;
    font-size: 0.6rem !important;
    padding: 0 0.3rem !important;
    line-height: 1.2 !important;
    min-height: 0;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > div:nth-child(2),
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > div:nth-child(2) {
    height: 0.35rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > div:nth-child(2) > div,
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > div:nth-child(2) > div {
    height: 100% !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.grid[data-erp-overview-n] > button > p,
  .erp-app-root main .archives-container div.grid[data-erp-overview-n] > button > p {
    font-size: 0.6rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cartes « Options avancées » contenant grille d’aperçu : enveloppe plus serrée. */
  .erp-app-root main :is(.employees-container, .clients-container) .bg-white\/10.backdrop-blur-lg.rounded-3xl:has(div.grid[data-erp-overview-n]),
  .erp-app-root main .archives-container .bg-white\/10.backdrop-blur-lg.rounded-3xl:has(div.grid[data-erp-overview-n]) {
    padding: 0.65rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) .bg-white\/10.backdrop-blur-lg.rounded-3xl:has(div.grid[data-erp-overview-n]) > div.mb-4 h3.text-xl,
  .erp-app-root main .archives-container .bg-white\/10.backdrop-blur-lg.rounded-3xl:has(div.grid[data-erp-overview-n]) > div.mb-4 h3.text-xl {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  /* Bandes d’onglets / filtres horizontaux (table-scroll sous Options avancées). */
  .erp-app-root main :is(.employees-container, .clients-container) .bg-white\/10.backdrop-blur-lg.rounded-3xl.border.p-2:has(div.table-scroll),
  .erp-app-root main .archives-container .bg-white\/10.backdrop-blur-lg.rounded-3xl.border.p-2:has(div.table-scroll) {
    padding: 0.3rem !important;
    border-radius: 1rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.flex.overflow-x-auto.table-scroll,
  .erp-app-root main .archives-container div.flex.overflow-x-auto.table-scroll {
    gap: 0.22rem !important;
  }

  /* Annule Tailwind space-x-* (marges) pour que gap contrôle tout l’intervalle. */
  .erp-app-root main :is(.employees-container, .clients-container) div.flex.overflow-x-auto.table-scroll > *,
  .erp-app-root main .archives-container div.flex.overflow-x-auto.table-scroll > * {
    margin: 0 !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.flex.overflow-x-auto.table-scroll > button,
  .erp-app-root main .archives-container div.flex.overflow-x-auto.table-scroll > button {
    padding: 0.35rem 0.45rem !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
    border-radius: 0.75rem !important;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.flex.overflow-x-auto.table-scroll svg.h-5,
  .erp-app-root main :is(.employees-container, .clients-container) div.flex.overflow-x-auto.table-scroll svg.w-5,
  .erp-app-root main .archives-container div.flex.overflow-x-auto.table-scroll svg.h-5,
  .erp-app-root main .archives-container div.flex.overflow-x-auto.table-scroll svg.w-5 {
    width: 0.95rem !important;
    height: 0.95rem !important;
  }

  /* Table listes catalogue : garantir défilement horizontal si colonnes trop larges */
  .erp-app-root main :is(.employees-container, .clients-container) div.overflow-x-auto:has(table.employees-table.data-table),
  .erp-app-root main .archives-container div.overflow-x-auto:has(table.employees-table.data-table) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .erp-app-root main :is(.employees-container, .clients-container) div.overflow-x-auto table.employees-table.data-table,
  .erp-app-root main .archives-container div.overflow-x-auto table.employees-table.data-table {
    min-width: -webkit-max-content;
    min-width: max-content;
  }

  /*
   * Facturation — Analyses & Rapports : Recharts mesure offsetWidth du parent ;
   * sans min-width:0 dans la chaîne flex/grid, la largeur peut tomber à ~0 sur mobile.
   */
  .erp-app-root main .facturation-analyses-charts-root .recharts-responsive-container {
    min-width: 0 !important;
  }
}

/* Custom Scrollbar Styles */

/* Base scrollbar styles for the application */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.6), rgba(59, 130, 246, 0.6));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.8), rgba(59, 130, 246, 0.8));
  cursor: pointer;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(to bottom, rgb(37, 99, 235), rgb(59, 130, 246));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.6) rgba(255, 255, 255, 0.05);
}

/* Keep scrollbar-hide class but improve it for when we want to hide scrollbars */
.scrollbar-hide {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Dark theme scrollbars */
.dark-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* No background */
  border-radius: 10px;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8)); /* Brighter blue gradient */
  border-radius: 10px 10px 4px 4px; /* Rounded top, slightly rounded bottom */
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.9)); /* Even brighter on hover */
}

/* Light theme scrollbars */
.light-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.light-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.5), rgba(59, 130, 246, 0.5));
}

/* Transparent scrollbar for overlay content */
.transparent-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

/* Main content scrollbar */
.main-content::-webkit-scrollbar {
  width: 10px;
}

/* Table scrollbar - horizontal */
.table-scroll::-webkit-scrollbar {
  height: 6px;
}

/* Modal content scrollbar */
.modal-content::-webkit-scrollbar {
  width: 6px;
}

/* RTL support for scrollbars */
.rtl ::-webkit-scrollbar {
  left: 0;
  right: auto;
}


/* Import des polices modernes */

/* Variables CSS globales */
:root {
  --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --secondary-gradient: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --success-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
}

/* Base styles */
body {
  font-family: 'Inter', sans-serif;
}

/* Pour la prise en charge de l'arabe */
html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

/* Styles de base pour le texte */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

/* Boutons modernes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.75rem;
  transition: all 0.2s;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
  background: var(--secondary-gradient);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.btn-accent {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-accent:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  background: var(--success-gradient);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-success:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  background: var(--danger-gradient);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-danger:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid;
  color: #64748b;
}

.btn-outline:hover {
  background-color: currentColor;
  color: white;
}

.btn-ghost {
  background-color: transparent;
  color: #64748b;
}

.btn-ghost:hover {
  background-color: rgba(241, 245, 249, 0.1);
}

/* Cards modernes avec effet glassmorphism */
.card {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
}

.card:hover {
  box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 25px -5px rgba(0, 0, 0, 0.04);
}

.dark .card {
  background-color: rgba(30, 41, 59, 0.8);
  border-color: rgba(30, 41, 59, 0.5);
}

/* Inputs modernes */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Tableaux modernes */
.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-modern th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-modern td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.875rem;
}

.table-modern tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Badges modernes */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  background: var(--primary-gradient);
  color: white;
}

.badge-secondary {
  background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
  background: var(--secondary-gradient);
  color: white;
}

.badge-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  background: var(--success-gradient);
  color: white;
}

.badge-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  background: var(--danger-gradient);
  color: white;
}

.badge-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

/* Éléments statut */
.status-indicator {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}

.status-success {
  background: #22c55e;
}

.status-pending {
  background: #f59e0b;
}

.status-danger {
  background: #ef4444;
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.slide-up {
  animation: slideUp 0.4s ease-out;
}

.scale-in {
  animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideIn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes slideUp {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Support RTL */
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .mr-3 {
  margin-right: 0;
  margin-left: 0.75rem;
}

.rtl .ml-3 {
  margin-left: 0;
  margin-right: 0.75rem;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* Make all dropdowns transparent */
select {
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

select option {
  background-color: #334155;
  color: white;
}

select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* =====================================================
   SITERP GLOBAL DROPDOWNS DESIGN SYSTEM
   =====================================================
   Universal styling for ALL dropdowns in the software:
   - DatePicker calendars (Période)
   - Status filter dropdowns (Statut)
   - Import/Export dropdowns
   - All other custom dropdowns
   
   Apply this by importing in any page that uses dropdowns
   ===================================================== */

/* =====================================================
   1. DATEPICKER CALENDAR - GLOBAL STYLING
   ===================================================== */

/* Wrapper - Allow overflow */
.react-datepicker-wrapper {
  width: 100% !important;
}

.react-datepicker__input-container {
  width: 100% !important;
}

/* Number Input Spinners - Hide Native Spinners for Custom Buttons */
input[type="number"].number-input-custom {
  -moz-appearance: textfield;
}

/* Hide default spinners completely */
input[type="number"].number-input-custom::-webkit-outer-spin-button,
input[type="number"].number-input-custom::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

/* Popper Container - Ensure it's above everything */
.react-datepicker-popper {
  z-index: 9999999 !important;
  position: fixed !important;
}

/* Ensure popper boundary is not constrained */
.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 8px !important;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 8px !important;
}

/* Calendar Container - GLOBAL CLASS (reusable everywhere) */
.SITERP-calendar,
.gps-calendar {
  background: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85)) !important;
  border: 1px solid rgba(96, 165, 250, 0.6) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  font-family: inherit !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: 999999 !important;
  overflow: hidden !important;
}

/* Month Container - Position relative for arrow positioning */
.SITERP-calendar .react-datepicker__month-container,
.gps-calendar .react-datepicker__month-container {
  background: transparent !important;
  position: relative !important;
}

/* Header - Inherit gradient from parent */
.SITERP-calendar .react-datepicker__header,
.gps-calendar .react-datepicker__header {
  background: transparent !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3) !important;
  border-radius: 1rem 1rem 0 0 !important;
  padding: 0 !important;
}

/* Hide default navigation arrows since we use renderCustomHeader */
.SITERP-calendar .react-datepicker__navigation,
.gps-calendar .react-datepicker__navigation {
  display: none !important;
}

/* Current Month/Year - Hidden since we use renderCustomHeader */
.SITERP-calendar .react-datepicker__current-month,
.gps-calendar .react-datepicker__current-month {
  display: none !important;
}

/* Day Names (Su, Mo, etc.) */
.SITERP-calendar .react-datepicker__day-names,
.gps-calendar .react-datepicker__day-names {
  display: flex !important;
  justify-content: space-around !important;
  margin-top: 0.5rem !important;
  padding: 0 0.5rem !important;
}

.SITERP-calendar .react-datepicker__day-name,
.gps-calendar .react-datepicker__day-name {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  width: 2rem !important;
  line-height: 2rem !important;
  margin: 0.2rem !important;
}

/* Calendar Month Container */
.SITERP-calendar .react-datepicker__month,
.gps-calendar .react-datepicker__month {
  margin: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Week Row */
.SITERP-calendar .react-datepicker__week,
.gps-calendar .react-datepicker__week {
  display: flex !important;
  justify-content: space-around !important;
}

/* Individual Days */
.SITERP-calendar .react-datepicker__day,
.gps-calendar .react-datepicker__day {
  color: rgba(255, 255, 255, 0.9) !important;
  width: 2rem !important;
  height: 2rem !important;
  line-height: 2rem !important;
  margin: 0.2rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.SITERP-calendar .react-datepicker__day:hover,
.gps-calendar .react-datepicker__day:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

/* Selected Day */
.SITERP-calendar .react-datepicker__day--selected,
.SITERP-calendar .react-datepicker__day--keyboard-selected,
.gps-calendar .react-datepicker__day--selected,
.gps-calendar .react-datepicker__day--keyboard-selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Today */
.SITERP-calendar .react-datepicker__day--today,
.gps-calendar .react-datepicker__day--today {
  background: rgba(59, 130, 246, 0.2) !important;
  color: white !important;
  font-weight: 600 !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

/* Outside Month Days */
.SITERP-calendar .react-datepicker__day--outside-month,
.gps-calendar .react-datepicker__day--outside-month {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Disabled Days */
.SITERP-calendar .react-datepicker__day--disabled,
.gps-calendar .react-datepicker__day--disabled {
  color: rgba(255, 255, 255, 0.2) !important;
  cursor: not-allowed !important;
}

.SITERP-calendar .react-datepicker__day--disabled:hover,
.gps-calendar .react-datepicker__day--disabled:hover {
  background: transparent !important;
}

/* Remove default navigation icon styles */
.SITERP-calendar .react-datepicker__navigation-icon,
.SITERP-calendar .react-datepicker__navigation-icon::before,
.gps-calendar .react-datepicker__navigation-icon,
.gps-calendar .react-datepicker__navigation-icon::before {
  display: none !important;
}

/* Month/Year Dropdowns */
.SITERP-calendar .react-datepicker__month-dropdown,
.SITERP-calendar .react-datepicker__year-dropdown,
.gps-calendar .react-datepicker__month-dropdown,
.gps-calendar .react-datepicker__year-dropdown {
  background: transparent !important;
  border: 1px solid rgba(96, 165, 250, 0.6) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

.SITERP-calendar .react-datepicker__month-option,
.SITERP-calendar .react-datepicker__year-option,
.gps-calendar .react-datepicker__month-option,
.gps-calendar .react-datepicker__year-option {
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

.SITERP-calendar .react-datepicker__month-option:hover,
.SITERP-calendar .react-datepicker__year-option:hover,
.gps-calendar .react-datepicker__month-option:hover,
.gps-calendar .react-datepicker__year-option:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

.SITERP-calendar .react-datepicker__month-option--selected,
.SITERP-calendar .react-datepicker__year-option--selected,
.gps-calendar .react-datepicker__month-option--selected,
.gps-calendar .react-datepicker__year-option--selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Input Field Placeholder */
.SITERP-datepicker::placeholder,
.gps-datepicker::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Triangle/Pointer */
.SITERP-calendar .react-datepicker__triangle,
.gps-calendar .react-datepicker__triangle {
  display: none !important;
}

/* Portal for better positioning */
.react-datepicker-popper[data-placement^="bottom"] .SITERP-calendar,
.react-datepicker-popper[data-placement^="bottom"] .gps-calendar {
  margin-top: 0.5rem !important;
}

.react-datepicker-popper[data-placement^="top"] .SITERP-calendar,
.react-datepicker-popper[data-placement^="top"] .gps-calendar {
  margin-bottom: 0.5rem !important;
}

/* Time Container (if used) */
.SITERP-calendar .react-datepicker__time-container,
.gps-calendar .react-datepicker__time-container {
  background: transparent !important;
  border-left: 1px solid rgba(96, 165, 250, 0.3) !important;
}

/* Time Header - French translation */
.SITERP-calendar .react-datepicker__time-container .react-datepicker__header--time,
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time {
  background: transparent !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3) !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 3.56rem !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header,
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Replace "Time" text with "Heure" in French */
.SITERP-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before,
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before {
  content: "Heure" !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header,
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header {
  font-size: 0 !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before,
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before {
  font-size: 0.875rem !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__time,
.gps-calendar .react-datepicker__time-container .react-datepicker__time {
  background: transparent !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  background: transparent !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item,
.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s ease !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover,
.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

.SITERP-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* In-range styling for date range selection */
.SITERP-calendar .react-datepicker__day--in-range,
.gps-calendar .react-datepicker__day--in-range {
  background: rgba(59, 130, 246, 0.2) !important;
  color: white !important;
}

.SITERP-calendar .react-datepicker__day--in-selecting-range,
.gps-calendar .react-datepicker__day--in-selecting-range {
  background: rgba(59, 130, 246, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Range start/end */
.SITERP-calendar .react-datepicker__day--range-start,
.SITERP-calendar .react-datepicker__day--range-end,
.gps-calendar .react-datepicker__day--range-start,
.gps-calendar .react-datepicker__day--range-end {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 700 !important;
}

/* =====================================================
   2. CUSTOM DROPDOWN CONTAINERS - GLOBAL STYLING
   ===================================================== */

/* Universal dropdown container (for Status, Import, Export, etc.) */
.SITERP-dropdown {
  border: 1px solid rgba(96, 165, 250, 0.6) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85)) !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

/* Dropdown item (button inside dropdown) */
.SITERP-dropdown-item {
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.75rem;
}

.SITERP-dropdown-item:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: white !important;
}

.SITERP-dropdown-item.active,
.SITERP-dropdown-item:active {
  background: rgba(59, 130, 246, 0.25) !important;
  color: white !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dropdown with sections/dividers */
.SITERP-dropdown-divider {
  height: 1px;
  background: rgba(96, 165, 250, 0.3);
  margin: 0.25rem 0;
}

/* =====================================================
   3. DATE RANGE PICKER CONTAINER
   ===================================================== */

.SITERP-daterange-container {
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85));
  padding: 1rem;
  min-width: 320px;
  position: absolute;
  z-index: 99999;
  overflow: visible;
}

.SITERP-daterange-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(96, 165, 250, 0.3);
  margin-top: 0.75rem;
}

.SITERP-daterange-reset {
  flex: 1 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.SITERP-daterange-reset:hover {
  background: rgba(59, 130, 246, 0.2);
  color: white;
}

.SITERP-daterange-apply {
  flex: 1 1;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  color: white;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.SITERP-daterange-apply:hover {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* =====================================================
   4. STATUS FILTER DROPDOWN
   ===================================================== */

.SITERP-status-dropdown {
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85));
  padding: 0.5rem;
  min-width: 200px;
  position: absolute;
  z-index: 99999;
}

.SITERP-status-option {
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.75rem;
}

.SITERP-status-option:hover {
  background: rgba(59, 130, 246, 0.2);
}

.SITERP-status-option.active {
  background: rgba(59, 130, 246, 0.25);
  color: white;
}

/* Status indicator dot */
.SITERP-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

/* =====================================================
   5. IMPORT/EXPORT DROPDOWNS
   ===================================================== */

.SITERP-import-dropdown,
.SITERP-export-dropdown {
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85));
  padding: 0.5rem;
  min-width: 120px;
  position: absolute;
  z-index: 99999;
}

.SITERP-import-option,
.SITERP-export-option {
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.75rem;
}

.SITERP-import-option:hover,
.SITERP-export-option:hover {
  background: rgba(59, 130, 246, 0.2);
  color: white;
}

.SITERP-import-option:disabled,
.SITERP-export-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.SITERP-import-option:disabled:hover,
.SITERP-export-option:disabled:hover {
  background: transparent;
}

/* =====================================================
   6. GENERIC CUSTOM DROPDOWN (for any use case)
   ===================================================== */

.SITERP-custom-dropdown {
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85));
  padding: 0.5rem;
  position: absolute;
  z-index: 99999;
  min-width: 150px;
}

.SITERP-custom-dropdown-item {
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.75rem;
}

.SITERP-custom-dropdown-item:hover {
  background: rgba(59, 130, 246, 0.2);
  color: white;
}

.SITERP-custom-dropdown-item.selected {
  background: rgba(59, 130, 246, 0.25);
}

/* Icon in dropdown item */
.SITERP-dropdown-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* =====================================================
   7. DROPDOWN TRIGGER BUTTONS - CONSISTENT STYLING
   ===================================================== */

/* Primary dropdown button (default state) */
.SITERP-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.SITERP-dropdown-trigger:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.SITERP-dropdown-trigger.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.6);
}

/* Import button (orange theme) */
.SITERP-import-trigger {
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.3);
  color: rgb(254, 215, 170);
}

.SITERP-import-trigger:hover {
  background: rgba(249, 115, 22, 0.3);
  border-color: rgba(249, 115, 22, 0.4);
}

/* Export button (green theme) */
.SITERP-export-trigger {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgb(187, 247, 208);
}

.SITERP-export-trigger:hover {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.4);
}

/* Chevron rotation for dropdowns */
.SITERP-chevron {
  transition: transform 0.2s ease;
}

.SITERP-chevron.open {
  transform: rotate(180deg);
}

/* =====================================================
   8. POSITIONING UTILITIES
   ===================================================== */

/* Fixed positioning for portals */
.SITERP-dropdown-portal {
  position: fixed;
  z-index: 99999;
}

/* Dropdown arrow/triangle (if needed) */
.SITERP-dropdown-arrow {
  display: none !important;
}

/* =====================================================
   9. RESPONSIVE ADJUSTMENTS
   ===================================================== */

@media (max-width: 768px) {
  .SITERP-calendar,
  .gps-calendar {
    width: calc(100vw - 2rem) !important;
    max-width: 350px !important;
  }
  
  .SITERP-daterange-container {
    width: calc(100vw - 2rem) !important;
    max-width: 350px !important;
    min-width: 0 !important;
    min-width: initial !important;
  }
  
  .SITERP-dropdown,
  .SITERP-status-dropdown,
  .SITERP-import-dropdown,
  .SITERP-export-dropdown,
  .SITERP-custom-dropdown {
    width: calc(100vw - 2rem) !important;
    max-width: 300px !important;
  }
}

/* =====================================================
   10. ANIMATION CLASSES
   ===================================================== */

@keyframes SITERP-dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes SITERP-dropdown-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.SITERP-dropdown-animate-in {
  animation: SITERP-dropdown-fade-in 0.2s ease-out;
}

.SITERP-dropdown-animate-out {
  animation: SITERP-dropdown-fade-out 0.2s ease-out;
}

/* =====================================================
   11. SPECIAL DROPDOWN VARIANTS
   ===================================================== */

/* Multi-select dropdown */
.SITERP-multiselect-dropdown {
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85));
  padding: 0.5rem;
  position: absolute;
  z-index: 99999;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
}

.SITERP-multiselect-item {
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.5rem;
}

.SITERP-multiselect-item:hover {
  background: rgba(59, 130, 246, 0.2);
}

.SITERP-multiselect-item.selected {
  background: rgba(59, 130, 246, 0.25);
}

/* Checkbox in multiselect */
.SITERP-multiselect-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.SITERP-multiselect-checkbox.checked {
  background: linear-gradient(to right, #3b82f6, #2563eb);
  border-color: #3b82f6;
}

/* =====================================================
   12. SCROLLBAR FOR DROPDOWNS
   ===================================================== */

.SITERP-dropdown::-webkit-scrollbar,
.SITERP-multiselect-dropdown::-webkit-scrollbar {
  width: 6px;
}

.SITERP-dropdown::-webkit-scrollbar-track,
.SITERP-multiselect-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.SITERP-dropdown::-webkit-scrollbar-thumb,
.SITERP-multiselect-dropdown::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 3px;
}

.SITERP-dropdown::-webkit-scrollbar-thumb:hover,
.SITERP-multiselect-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}

/* =====================================================
   13. NATIVE SELECT ELEMENTS STYLING
   ===================================================== */

/* Style native select dropdowns to match the theme */
select.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem !important;
  cursor: pointer;
  color-scheme: dark;
}

/* Force dark color scheme for native dropdowns */
select.custom-select,
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"] {
  color-scheme: dark !important;
}

/* Style for option elements (dropdown menu) - limited browser support */
select.custom-select option {
  background-color: rgb(30, 41, 59) !important;
  background: rgb(30, 41, 59) !important;
  color: white !important;
  padding: 0.5rem 1rem;
}

/* Hover state for options (browser support varies) */
select.custom-select option:hover {
  background: rgb(51, 65, 85) !important;
  background-color: rgb(51, 65, 85) !important;
}

/* Selected option */
select.custom-select option:checked {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  background-color: rgb(59, 130, 246) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Firefox-specific select styling */
@-moz-document url-prefix() {
  select.custom-select option {
    background-color: rgb(30, 41, 59) !important;
    color: white !important;
  }
  
  select.custom-select option:checked {
    background-color: rgb(59, 130, 246) !important;
  }
}

/* =====================================================
   14. CUSTOM SCROLLBAR FOR DROPDOWNS
   ===================================================== */

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   USAGE EXAMPLES:
   
   1. DatePicker:
      <DatePicker 
        className="SITERP-datepicker"
        calendarClassName="SITERP-calendar"
        ...
      />
   
   2. Status Filter:
      <div className="SITERP-status-dropdown">
        <button className="SITERP-status-option">Option 1</button>
        <button className="SITERP-status-option active">Option 2</button>
      </div>
   
   3. Import/Export:
      <div className="SITERP-import-dropdown">
        <button className="SITERP-import-option">CSV</button>
        <button className="SITERP-import-option">Excel</button>
      </div>
   
   4. Generic Dropdown:
      <div className="SITERP-custom-dropdown">
        <button className="SITERP-custom-dropdown-item">Item 1</button>
        <button className="SITERP-custom-dropdown-item">Item 2</button>
      </div>
   
   ===================================================== */


.app {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); /* Dark navy blue gradient */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-content {
  flex: 1 1;
  /* No margin needed - flex layout handles spacing */
  transition: margin-left 0.3s ease, margin-right 0.3s ease;
  /* Padding is now handled via Tailwind classes in Layout.js */
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* RTL Support */
html[dir="rtl"] .main-content {
  /* No margin needed in RTL either */
}

.main-content.sidebar-collapsed {
  /* Flex layout handles this */
}

html[dir="rtl"] .main-content.sidebar-collapsed {
  /* Flex layout handles this */
}

/* Content Area */
.page-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-subtitle {
  color: #64748b;
  font-size: 1rem;
  font-weight: 400;
}

.content-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

.content-section {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f5f9;
  transition: all 0.2s ease;
  width: 100%;
}

.content-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.section-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #3b82f6;
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.stat-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0284c7, #0ea5e9);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
}

.stat-icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

html[dir="rtl"] .stat-icon {
  right: auto;
  left: 1.5rem;
}

/* Additional RTL fixes */
html[dir="rtl"] {
  text-align: right;
}

html[dir="rtl"] .page-header,
html[dir="rtl"] .section-title,
html[dir="rtl"] th,
html[dir="rtl"] td,
html[dir="rtl"] .form-label {
  text-align: right;
}

html[dir="rtl"] button > svg + span,
html[dir="rtl"] a > svg + span {
  margin-right: 0.5rem;
  margin-left: 0;
}

html[dir="rtl"] button > span + svg,
html[dir="rtl"] a > span + svg {
  margin-left: 0.5rem;
  margin-right: 0;
}

html[dir="rtl"] .checkbox-wrapper {
  padding-left: 0;
  padding-right: 24px;
}

html[dir="rtl"] .checkbox {
  left: auto;
  right: 0;
}

/* === Universal Statistic Card Enhancements ========================= */
.stat-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Accent top bar using CSS variable (falls back to default gradient) */
.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  background: var(--stat-accent, linear-gradient(90deg, #3b82f6, #8b5cf6));
}

/* Subtle lift & shadow on hover */
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Smooth icon animation */
.stat-item .stat-icon {
  transition: transform 0.3s ease;
}

.stat-item:hover .stat-icon {
  transform: scale(1.1);
}

/* Larger emphasis on numbers */
.stat-item .stat-number {
  font-size: 2rem !important;
  font-weight: 700;
  color: #1e293b;
}

/* Fine-tune label weight & spacing */
.stat-item .stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .stat-item .stat-number {
    font-size: 1.5rem !important;
  }
  .stat-item .stat-label {
    font-size: 0.75rem !important;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
    /* Padding is now handled via Tailwind classes in Layout.js */
    width: 100%;
  }
  
  .main-content.sidebar-collapsed {
    margin-left: 0;
  }
  
  /* Add top padding to account for mobile menu button */
  .page-header {
    padding-top: 2.5rem;
  }
  
  .content-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .app, .main-content {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  .main-content {
    /* Padding is now handled via Tailwind classes in Layout.js */
  }
  
  .page-header {
    padding-top: 3rem;
    width: 100%;
  }
  
  .page-title {
    font-size: 1.5rem;
    gap: 0.5rem;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    width: 100%;
  }
  
  .section-title {
    font-size: 1.125rem;
  }
  
  /* Make all buttons full width on mobile */
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  
  /* Ensure all forms and inputs are properly sized */
  input, select, textarea {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .main-content {
    /* Padding is now handled via Tailwind classes in Layout.js */
  }
  
  .page-title {
    font-size: 1.25rem;
  }
  
  .page-subtitle {
    font-size: 0.875rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .stat-icon {
    width: 2rem;
    height: 2rem;
    top: 1rem;
    right: 1rem;
  }
  
  .content-section {
    padding: 1rem;
  }
  
  /* Reduce padding and margins for smaller screens */
  .section-title {
    margin-bottom: 0.75rem;
  }
}

/* Loading Screen */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100%;
}

.loading-container .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #0ea5e9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-container p {
  color: #64748b;
  font-size: 1rem;
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

/* Qawaem console — light glassmorphism design system */

.glass-panel {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(110, 155, 110, 0.12);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(46, 69, 46, 0.06);
  overflow: visible;
}

/* Chart hover targets — tooltips render via portal; keep hit areas unclipped */
.chart-interactive,
.chart-tooltip-target {
  overflow: visible;
}

.chart-tooltip-target:focus-visible {
  outline: 2px solid rgba(110, 155, 110, 0.45);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

.glass-table-shell {
  overflow: visible;
}

.glass-table-shell .glass-table-scroll {
  overflow-x: auto;
}

.glass-panel-strong {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(110, 155, 110, 0.15);
  border-radius: 1.5rem;
  box-shadow: 0 12px 36px rgba(46, 69, 46, 0.08);
}

.glass-sidebar {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  -webkit-border-start: 1px solid rgba(110, 155, 110, 0.14);
          border-inline-start: 1px solid rgba(110, 155, 110, 0.14);
  box-shadow: -4px 0 24px rgba(46, 69, 46, 0.04);
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 155, 110, 0.55) rgba(255, 255, 255, 0.9);
}

.glass-sidebar::-webkit-scrollbar {
  width: 10px;
}

.glass-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.92);
}

.glass-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 155, 110, 0.72), rgba(166, 124, 61, 0.58));
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.glass-sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(90, 133, 90, 0.88), rgba(196, 150, 60, 0.72));
}

.console-main-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 155, 110, 0.5) rgba(245, 245, 245, 1);
}

.console-main-scroll::-webkit-scrollbar {
  width: 12px;
}

.console-main-scroll::-webkit-scrollbar-track {
  background: rgba(245, 245, 245, 0.95);
}

.console-main-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 155, 110, 0.62), rgba(166, 124, 61, 0.5));
  border-radius: 999px;
  border: 3px solid rgba(245, 245, 245, 0.95);
}

.console-main-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(90, 133, 90, 0.82), rgba(196, 150, 60, 0.68));
}

.glass-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(110, 155, 110, 0.1);
}

.console-header-date {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
}

.console-header-date .text-xs {
  font-size: 0.6875rem;
}

.glass-modal-overlay {
  background: rgba(244, 247, 244, 0.65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.glass-modal {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 234, 0.88));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(196, 150, 60, 0.2);
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px rgba(46, 69, 46, 0.12);
}

.glass-kpi-copper {
  background: linear-gradient(135deg, rgba(196, 150, 60, 0.18), rgba(249, 243, 234, 0.5));
  border: 1px solid rgba(196, 150, 60, 0.25);
}

.glass-kpi-sage {
  background: linear-gradient(135deg, rgba(110, 155, 110, 0.2), rgba(244, 247, 244, 0.6));
  border: 1px solid rgba(110, 155, 110, 0.28);
}

.glass-kpi-forest {
  background: linear-gradient(135deg, rgba(46, 69, 46, 0.12), rgba(110, 155, 110, 0.15));
  border: 1px solid rgba(46, 69, 46, 0.2);
}

/* Metallic bronze / green KPI cards (Console style) */
.glass-stat-bronze {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  background:
    linear-gradient(
      145deg,
      rgba(196, 152, 122, 0.96) 0%,
      rgba(168, 123, 101, 0.94) 40%,
      rgba(138, 98, 76, 0.98) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(90, 58, 38, 0.25),
    0 10px 28px rgba(120, 82, 52, 0.34);
  color: #ffffff;
}

.glass-stat-bronze::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.glass-stat-bronze::after {
  content: '';
  position: absolute;
  top: -40%;
  inset-inline-end: -20%;
  width: 55%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.glass-stat-green {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  background:
    linear-gradient(
      145deg,
      rgba(58, 98, 78, 0.96) 0%,
      rgba(46, 90, 71, 0.94) 42%,
      rgba(32, 62, 48, 0.98) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 1.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(20, 40, 30, 0.3),
    0 10px 28px rgba(30, 55, 40, 0.36);
  color: #ffffff;
}

.glass-stat-green::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.18) 0%, transparent 48%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}

.glass-stat-green::after {
  content: '';
  position: absolute;
  top: -40%;
  inset-inline-end: -20%;
  width: 55%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.glass-stat-bronze .glass-stat-label,
.glass-stat-green .glass-stat-label {
  color: rgba(255, 255, 255, 0.82);
}

.glass-stat-bronze .glass-stat-value,
.glass-stat-green .glass-stat-value {
  color: #ffffff;
}

.glass-stat-bronze .glass-stat-icon,
.glass-stat-green .glass-stat-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.glass-chart-bronze {
  border: 1px solid rgba(196, 150, 60, 0.22);
  background: linear-gradient(160deg, rgba(255, 252, 245, 0.95), rgba(249, 237, 210, 0.55));
}

.glass-chart-green {
  border: 1px solid rgba(110, 155, 110, 0.28);
  background: linear-gradient(160deg, rgba(248, 252, 248, 0.96), rgba(230, 242, 230, 0.6));
}

.glass-ai-insight {
  background: linear-gradient(145deg, #2e452e, #3d5c3d);
  border: 1px solid rgba(110, 155, 110, 0.35);
  border-radius: 1.5rem;
  box-shadow: 0 12px 32px rgba(46, 69, 46, 0.2);
  color: #ffffff;
}

.text-console {
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
}

.text-console-muted {
  color: #475947;
}

.page-section-desc {
  margin-top: 0.5rem;
  color: #475947;
  font-size: 1rem;
  line-height: 1.625;
}

.page-title-date-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 1280px) {
  .page-title-date-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 0.5rem;
  }
}

.page-title-date-row__filters {
  flex: 1 1 16rem;
  min-width: 0;
}

/* Qawaem — title, view toggle, search, and filters always inline beside the section title */
html[data-brand='qawaem'] .page-title-date-row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

html[data-brand='qawaem'] .page-title-date-row__title {
  flex: 0 0 auto;
}

html[data-brand='qawaem'] .page-title-date-row__filters,
html[data-brand='qawaem'] .qawaem-title-filters-slot {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
}

html[data-brand='qawaem'] .list-toolbar-mobile-layout > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-brand='qawaem'] .page-title-date-row__filters .qawaem-hoisted-control,
html[data-brand='qawaem'] .qawaem-title-filters-slot .qawaem-hoisted-control {
  flex-shrink: 0;
}

html[data-brand='qawaem'] .page-title-date-row__filters .relative.max-w-md,
html[data-brand='qawaem'] .qawaem-title-filters-slot .relative.max-w-md,
html[data-brand='qawaem'] .page-title-date-row__filters .relative.flex-1,
html[data-brand='qawaem'] .qawaem-title-filters-slot .relative.flex-1 {
  flex: 1 1 10rem;
  max-width: 16rem;
  min-width: 8.5rem;
}

html[data-brand='qawaem'] .qawaem-toolbar-source--hoisted {
  display: none !important;
}

html[data-brand='qawaem'] .page-title-date-row__filters input[type='text'],
html[data-brand='qawaem'] .qawaem-title-filters-slot input[type='text'] {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(110, 155, 110, 0.2) !important;
  border-radius: 0.75rem !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 0.875rem !important;
}

html[data-brand='qawaem'] .page-title-date-row__filters input[type='text']::placeholder,
html[data-brand='qawaem'] .qawaem-title-filters-slot input[type='text']::placeholder {
  color: rgba(46, 69, 46, 0.4) !important;
}

.page-title-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.page-title-icon--green {
  color: #6e9b6e;
}

.page-title-icon--bronze {
  color: #a67c3d;
}

.column-header-filter-control {
  height: 32px;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(110, 155, 110, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
  font-size: 0.8125rem;
  font-weight: 500;
}

.column-header-filter-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.28);
}

.column-header-filter-active {
  background: rgba(110, 155, 110, 0.1);
}

.text-console-subtle {
  color: #566856;
}

/** Bronze emphasis text on light panels — readable on white */
.text-console-accent {
  color: #704820;
}

.btn-primary-forest {
  background: linear-gradient(135deg, #6e9b6e, #5a855a);
  color: #ffffff;
  border: 1px solid rgba(110, 155, 110, 0.4);
  border-radius: 0.75rem;
  font-weight: 600;
  transition: filter 0.2s, box-shadow 0.2s;
}

/* Ventes tabs — match metallic KPI card gradients */
.ventes-tab-active-green {
  background: linear-gradient(
    145deg,
    rgba(58, 98, 78, 0.96) 0%,
    rgba(46, 90, 71, 0.94) 42%,
    rgba(32, 62, 48, 0.98) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 18px rgba(30, 55, 40, 0.28);
}

.ventes-tab-active-bronze {
  background: linear-gradient(
    145deg,
    rgba(196, 152, 122, 0.96) 0%,
    rgba(168, 123, 101, 0.94) 40%,
    rgba(138, 98, 76, 0.98) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 6px 18px rgba(120, 82, 52, 0.28);
}

.btn-stat-green {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row-reverse;
  background: linear-gradient(
    145deg,
    rgba(58, 98, 78, 0.96) 0%,
    rgba(46, 90, 71, 0.94) 42%,
    rgba(32, 62, 48, 0.98) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.75rem;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 18px rgba(30, 55, 40, 0.28);
  transition: filter 0.2s, box-shadow 0.2s;
}

.btn-stat-green:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(30, 55, 40, 0.34);
}

.btn-toolbar-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(110, 155, 110, 0.35);
  background: rgba(255, 255, 255, 0.72);
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
  border-radius: 0.75rem;
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(46, 69, 46, 0.06);
  transition: background 0.15s, border-color 0.15s;
}

.btn-toolbar-refresh:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(110, 155, 110, 0.45);
}

.btn-toolbar-refresh:disabled {
  opacity: 0.5;
}

/* Page header actions — same height as table toolbar controls (~38px) */
.btn-stat-green.btn-header-compact {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.375rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(30, 55, 40, 0.16);
}

.btn-stat-green.btn-header-compact:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 10px rgba(30, 55, 40, 0.22);
}

.btn-toolbar-refresh.btn-header-compact {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.375rem;
}

.btn-primary-forest:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 16px rgba(110, 155, 110, 0.3);
}

.btn-primary-copper {
  background: linear-gradient(135deg, #c4963c, #a67c3d);
  color: #ffffff;
  border: 1px solid rgba(196, 150, 60, 0.4);
  border-radius: 0.75rem;
  font-weight: 600;
}

.glass-input {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(110, 155, 110, 0.2);
  border-radius: 0.75rem;
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
}

.glass-input::placeholder {
  color: rgba(46, 69, 46, 0.4);
  text-align: right;
}

.glass-table-head {
  background: rgba(244, 247, 244, 0.8);
  color: rgba(46, 69, 46, 0.7);
}

.glass-table-row:hover {
  background: rgba(110, 155, 110, 0.06);
}

.glass-toast {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(110, 155, 110, 0.18);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(46, 69, 46, 0.1);
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
}

.btn-toolbar-export {
  border: 1px solid rgba(110, 155, 110, 0.5);
  background: rgba(244, 247, 244, 0.96);
  color: #2e452e;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(110, 155, 110, 0.12);
}

.btn-toolbar-export:hover {
  background: rgba(232, 241, 232, 1);
  border-color: rgba(90, 133, 90, 0.65);
  color: #1e331e;
}

/* Smart export dropdown — list panel, not card tiles */
.toolbar-export-trigger {
  border: 1px solid rgba(110, 155, 110, 0.45);
  background: linear-gradient(180deg, rgba(250, 252, 250, 0.98), rgba(236, 244, 236, 0.95));
  color: #2e452e;
  box-shadow: 0 1px 6px rgba(46, 69, 46, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.toolbar-export-trigger:hover {
  border-color: rgba(90, 133, 90, 0.55);
  box-shadow: 0 2px 10px rgba(110, 155, 110, 0.16);
}

.toolbar-export-panel {
  border: 1px solid rgba(110, 155, 110, 0.28);
  border-radius: 14px;
  background: rgba(252, 254, 252, 0.97);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 12px 32px rgba(46, 69, 46, 0.14),
    0 0 24px rgba(110, 155, 110, 0.08);
  overflow: hidden;
}

.toolbar-export-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a855a;
  border-bottom: 1px solid rgba(110, 155, 110, 0.15);
  background: linear-gradient(90deg, rgba(110, 155, 110, 0.08), transparent);
}

.toolbar-export-item {
  transition: background 0.12s;
}

.toolbar-export-item:hover {
  background: rgba(110, 155, 110, 0.1);
}

.toolbar-export-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(110, 155, 110, 0.12);
  flex-shrink: 0;
}

/* Qawaem scrollbars — forest green + copper (overrides SITERP blue scrollbar.css) */
html[data-brand='qawaem'],
html[data-brand='qawaem'] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 155, 110, 0.58) rgba(245, 245, 245, 0.96);
}

html[data-brand='qawaem'] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-brand='qawaem'] *::-webkit-scrollbar-track {
  background: rgba(245, 245, 245, 0.96);
  border-radius: 999px;
}

html[data-brand='qawaem'] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 155, 110, 0.68), rgba(166, 124, 61, 0.54));
  border-radius: 999px;
  border: 2px solid rgba(245, 245, 245, 0.96);
  background-clip: padding-box;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

html[data-brand='qawaem'] *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(90, 133, 90, 0.86), rgba(196, 150, 60, 0.72));
}

html[data-brand='qawaem'] *::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(74, 107, 74, 0.94), rgba(138, 101, 48, 0.82));
}

html[data-brand='qawaem'] *::-webkit-scrollbar-corner {
  background: transparent;
}

html[data-brand='qawaem'] .glass-sidebar *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.92);
}

html[data-brand='qawaem'] .glass-sidebar *::-webkit-scrollbar-thumb {
  border-color: rgba(255, 255, 255, 0.92);
}

html[data-brand='qawaem'] .glass-sidebar,
html[data-brand='qawaem'] .glass-sidebar * {
  scrollbar-color: rgba(110, 155, 110, 0.62) rgba(255, 255, 255, 0.92);
}

html[data-brand='qawaem'] .console-main-scroll::-webkit-scrollbar {
  width: 12px;
}

html[data-brand='qawaem'] .glass-table-scroll::-webkit-scrollbar {
  height: 8px;
}

/**
 * Qawaem ERP — global remaps for shared SITERP list pages (no per-page edits).
 * Scoped to html[data-brand="qawaem"] inside the Saudi shell main scroll area.
 */
[data-brand='qawaem'] .console-main-scroll,
[data-brand='qawaem'] .qawaem-preauth {
  --qawaem-scope: 1;
}

/* ── Page titles ── */
[data-brand='qawaem'] .console-main-scroll .employees-container h1.text-3xl {
  color: var(--color-forest-900) !important;
  font-weight: 700;
}

[data-brand='qawaem'] .console-main-scroll .employees-container h1 .text-blue-400,
[data-brand='qawaem'] .console-main-scroll .employees-container h1 svg.text-blue-400 {
  color: #a67c3d !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container h1 + p,
[data-brand='qawaem'] .console-main-scroll .employees-container .text-white\/60.mt-2 {
  color: #475947 !important;
  font-size: 1rem;
  line-height: 1.625;
  margin-top: 0.5rem;
}

/* ── Blue accent → forest ── */
[data-brand='qawaem'] .console-main-scroll .text-blue-400 {
  color: var(--color-forest-600) !important;
}

[data-brand='qawaem'] .console-main-scroll .text-blue-300,
[data-brand='qawaem'] .console-main-scroll .hover\:text-blue-300:hover {
  color: var(--color-forest-700) !important;
}

[data-brand='qawaem'] .console-main-scroll .bg-blue-500\/20 {
  background: rgba(110, 155, 110, 0.14) !important;
}

[data-brand='qawaem'] .console-main-scroll .border-blue-400\/60,
[data-brand='qawaem'] .console-main-scroll .border-blue-400\/30 {
  border-color: rgba(110, 155, 110, 0.35) !important;
}

[data-brand='qawaem'] .console-main-scroll .shadow-blue-500\/30,
[data-brand='qawaem'] .console-main-scroll .shadow-blue-500\/20 {
  --tw-shadow-color: rgba(110, 155, 110, 0.22) !important;
}

[data-brand='qawaem'] .console-main-scroll .focus\:ring-blue-500:focus,
[data-brand='qawaem'] .console-main-scroll .focus\:ring-blue-400\/50:focus {
  --tw-ring-color: rgba(110, 155, 110, 0.35) !important;
}

/* ── Primary CTA buttons (blue gradient → metallic green) ── */
[data-brand='qawaem'] .console-main-scroll [class*='from-blue-500'][class*='to-blue-700'],
[data-brand='qawaem'] .console-main-scroll [class*='from-blue-500'][class*='to-blue-600'] {
  background: linear-gradient(
    145deg,
    rgba(58, 98, 78, 0.96) 0%,
    rgba(46, 90, 71, 0.94) 42%,
    rgba(32, 62, 48, 0.98) 100%
  ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 18px rgba(30, 55, 40, 0.28) !important;
}

[data-brand='qawaem'] .console-main-scroll [class*='from-blue-500'][class*='to-blue-700']:hover,
[data-brand='qawaem'] .console-main-scroll [class*='from-blue-500'][class*='to-blue-600']:hover {
  filter: brightness(1.06);
}

/* ── Ghost / secondary buttons ── */
[data-brand='qawaem'] .console-main-scroll .bg-white\/5.border-white\/20 {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(110, 155, 110, 0.28) !important;
  color: var(--color-forest-900) !important;
}

[data-brand='qawaem'] .console-main-scroll .bg-white\/5.border-white\/20:hover {
  background: rgba(244, 247, 244, 0.95) !important;
  border-color: rgba(110, 155, 110, 0.4) !important;
}

/* ── KPI stat cards → metallic bronze / green (Console style) ── */
[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 {
  border-radius: 1.25rem !important;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  color: #ffffff !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group:nth-child(odd) > .relative.bg-white\/10 {
  background: linear-gradient(
    145deg,
    rgba(196, 152, 122, 0.96) 0%,
    rgba(168, 123, 101, 0.94) 40%,
    rgba(138, 98, 76, 0.98) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 10px 28px rgba(120, 82, 52, 0.34) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group:nth-child(even) > .relative.bg-white\/10 {
  background: linear-gradient(
    145deg,
    rgba(58, 98, 78, 0.96) 0%,
    rgba(46, 90, 71, 0.94) 42%,
    rgba(32, 62, 48, 0.98) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 28px rgba(30, 55, 40, 0.36) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 p,
[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 .text-white,
[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 .text-white\/60,
[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 .force-white {
  color: #ffffff !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group > .relative.bg-white\/10 .text-white\/60 {
  color: rgba(255, 255, 255, 0.82) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group .absolute.-inset-0\.5 {
  display: none !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .grid > .relative.group [class*='rounded-2xl'][class*='bg-gradient-to-r'] {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* ── Glass panels (tabs, list shell, distribution) ── */
[data-brand='qawaem'] .console-main-scroll .employees-container .bg-white\/10.backdrop-blur-lg.rounded-3xl {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border: 1px solid rgba(110, 155, 110, 0.12) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 10px 30px rgba(46, 69, 46, 0.06) !important;
}

/* Active tabs inside panels */
[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='from-blue-500'][class*='rounded-2xl'] {
  border-radius: 0.75rem !important;
}

/* ── List table shell ── */
[data-brand='qawaem'] .console-main-scroll .employees-container .employees-table,
[data-brand='qawaem'] .console-main-scroll .employees-container .data-table {
  border-collapse: separate;
  border-spacing: 0;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table thead,
[data-brand='qawaem'] .console-main-scroll .employees-container table tfoot {
  background: rgba(244, 247, 244, 0.92) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table thead th {
  color: rgba(46, 69, 46, 0.72) !important;
  font-weight: 600;
  font-size: 0.8125rem;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table tbody {
  background: rgba(255, 255, 255, 0.55);
}

[data-brand='qawaem'] .console-main-scroll .employees-container table tbody tr {
  border-color: rgba(110, 155, 110, 0.08) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table tbody tr:hover {
  background: rgba(110, 155, 110, 0.06) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table tbody td {
  color: var(--color-forest-900) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table tbody .text-white\/70 {
  color: #566856 !important;
}

/* ── Search & filter inputs ── */
[data-brand='qawaem'] .console-main-scroll .employees-container input,
[data-brand='qawaem'] .console-main-scroll .employees-container select,
[data-brand='qawaem'] .console-main-scroll .employees-container textarea {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(110, 155, 110, 0.2) !important;
  border-radius: 0.75rem !important;
  color: var(--color-forest-900) !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container input::placeholder {
  color: rgba(46, 69, 46, 0.4) !important;
}

/* ── Export / import toolbar buttons → Qawaem style ── */
[data-brand='qawaem'] .console-main-scroll .employees-container .bg-green-500\/20 {
  background: rgba(244, 247, 244, 0.96) !important;
  border-color: rgba(110, 155, 110, 0.5) !important;
  color: #2e452e !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .bg-orange-500\/20 {
  background: rgba(249, 243, 234, 0.9) !important;
  border-color: rgba(196, 150, 60, 0.35) !important;
  color: #704820 !important;
}

/* ── View mode toggle ── */
[data-brand='qawaem'] .console-main-scroll .facturation-view-mode-toggle .bg-blue-500\/20 {
  background: rgba(110, 155, 110, 0.18) !important;
  color: var(--color-forest-700) !important;
}

[data-brand='qawaem'] .console-main-scroll .facturation-view-mode-toggle .text-blue-300 {
  color: var(--color-forest-700) !important;
}

/* ── Modals (light glass when isDashboardLightMode) ── */
[data-brand='qawaem'] .siterp-modal-light,
[data-brand='qawaem'] [class*='glass-modal'] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 234, 0.88)) !important;
  border: 1px solid rgba(196, 150, 60, 0.2) !important;
  color: var(--color-forest-900) !important;
}

/* Dark modal fallback → light glass (in-page only; body portals use qawaem-portals.css) */
[data-brand='qawaem'] .console-main-scroll [class*='from-slate-800'][class*='via-blue-750'],
[data-brand='qawaem'] .console-main-scroll [class*='from-slate-800'][class*='to-slate-800'] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(249, 243, 234, 0.9)) !important;
  border: 1px solid rgba(110, 155, 110, 0.2) !important;
  box-shadow: 0 20px 50px rgba(46, 69, 46, 0.12) !important;
}

/* ── Pagination bar ── */
[data-brand='qawaem'] .console-main-scroll .facturation-list-pagination {
  color: #566856 !important;
  border-color: rgba(110, 155, 110, 0.15) !important;
}

[data-brand='qawaem'] .console-main-scroll .facturation-list-pagination button {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(110, 155, 110, 0.28) !important;
  color: var(--color-forest-900) !important;
}

/* ── Sidebar nav (glass-kpi-sage) ── */
[data-brand='qawaem'] .qawaem-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  text-align: right;
  cursor: pointer;
  background: transparent;
  color: #475947;
  text-decoration: none;
}

[data-brand='qawaem'] .qawaem-nav-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #6e9b6e;
  opacity: 0.85;
}

[data-brand='qawaem'] .qawaem-nav-link:hover {
  background: linear-gradient(135deg, rgba(110, 155, 110, 0.12), rgba(244, 247, 244, 0.5));
  color: var(--color-forest-900);
}

[data-brand='qawaem'] .qawaem-nav-link.is-active {
  background: linear-gradient(135deg, rgba(110, 155, 110, 0.2), rgba(244, 247, 244, 0.6));
  border-color: rgba(110, 155, 110, 0.28);
  color: var(--color-forest-900);
  box-shadow: 0 1px 6px rgba(46, 69, 46, 0.06);
  font-weight: 600;
}

[data-brand='qawaem'] .qawaem-nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  color: #566856;
  text-decoration: none;
  transition: all 0.12s ease;
}

[data-brand='qawaem'] .qawaem-nav-sublink:hover {
  background: rgba(110, 155, 110, 0.1);
  color: var(--color-forest-900);
}

[data-brand='qawaem'] .qawaem-nav-sublink.is-active {
  background: linear-gradient(135deg, rgba(110, 155, 110, 0.18), rgba(244, 247, 244, 0.55));
  color: var(--color-forest-900);
  font-weight: 600;
}

/* ── Loading screen ── */
[data-brand='qawaem'] .qawaem-loading-screen {
  min-height: 100vh;
  background: var(--console-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-brand='qawaem'] .qawaem-loading-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 234, 0.88));
  border: 1px solid rgba(196, 150, 60, 0.2);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(46, 69, 46, 0.12);
}

[data-brand='qawaem'] .qawaem-loading-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid rgba(110, 155, 110, 0.2);
  border-top-color: #6e9b6e;
  border-radius: 9999px;
  animation: qawaem-spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes qawaem-spin {
  to { transform: rotate(360deg); }
}

/* ── Hide « خيارات متقدمة » (no advanced filters for Qawaem) ── */
[data-brand='qawaem'] .console-main-scroll .list-toolbar-mobile-layout .flex.gap-3 > button.px-4,
[data-brand='qawaem'] .console-main-scroll .list-toolbar-mobile-layout button:has(.lucide-filter) {
  display: none !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container > div[style*='overflow: hidden']:not(.grid) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Header date presets — Console 11px chips ── */
[data-brand='qawaem'] .console-header-date button {
  font-size: 11px !important;
  line-height: normal !important;
}

[data-brand='qawaem'] .console-header-date button.qawaem-date-preset--active {
  background: #ffffff !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  border-color: rgba(110, 155, 110, 0.55) !important;
  box-shadow: 0 1px 4px rgba(46, 69, 46, 0.08) !important;
}

[data-brand='qawaem'] .console-header-date .text-xs {
  font-size: 0.75rem !important;
}

/* ── Console font sizes (14px body, 11px header chips, 0.875rem table) ── */
[data-brand='qawaem'] .qawaem-main-content,
[data-brand='qawaem'] .console-main-scroll {
  font-size: 0.875rem;
  line-height: 1.375rem;
}

[data-brand='qawaem'] .console-main-scroll .employees-container h1.text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container table {
  font-size: 0.875rem !important;
}

[data-brand='qawaem'] .console-main-scroll .employees-container .facturation-list-toolbar button,
[data-brand='qawaem'] .console-main-scroll .employees-container .facturation-list-controls-strip button {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  min-height: 2.375rem;
}

[data-brand='qawaem'] .console-main-scroll .employees-container input.search-input,
[data-brand='qawaem'] .console-main-scroll .employees-container .facturation-list-controls-strip input {
  font-size: 0.875rem !important;
  min-height: 2.375rem;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ── Card / table view toggle (Console style) ── */
[data-brand='qawaem'] .console-main-scroll .qawaem-view-toggle,
[data-brand='qawaem'] .console-main-scroll .facturation-view-mode-toggle > div {
  border: 1px solid rgba(110, 155, 110, 0.15) !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
  height: 2.375rem;
}

[data-brand='qawaem'] .console-main-scroll .flex.items-center.gap-0 > button.rounded-l-lg,
[data-brand='qawaem'] .console-main-scroll .flex.items-center.gap-0 > button.rounded-r-lg {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #566856 !important;
  border-color: rgba(110, 155, 110, 0.15) !important;
  padding: 0.5rem 0.625rem !important;
  height: 2.375rem !important;
}

[data-brand='qawaem'] .console-main-scroll .flex.items-center.gap-0 > button[class*='bg-blue-500'],
[data-brand='qawaem'] .console-main-scroll .flex.items-center.gap-0 > button[class*='text-blue-300'] {
  background: rgba(110, 155, 110, 0.15) !important;
  color: #5a855a !important;
  border-color: rgba(110, 155, 110, 0.25) !important;
}

/* Inline title-row filter chips */
[data-brand='qawaem'] .qawaem-page-filter-strip--inline {
  padding: 0;
  border: 0;
  background: transparent;
}

/* ── Page filter strip + toolbar filter chips ── */
[data-brand='qawaem'] .qawaem-page-filter-strip {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

[data-brand='qawaem'] .qawaem-toolbar-filter {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(110, 155, 110, 0.2);
  color: var(--color-forest-900);
  border-radius: 0.5rem;
}

[data-brand='qawaem'] .qawaem-toolbar-filter:hover {
  border-color: rgba(110, 155, 110, 0.35) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Console filter triggers stay glass-white when open/focused — never solid green */
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter:hover,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter:focus,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter:focus-visible,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter:active,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--color-forest-900) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter:hover,
[data-brand='qawaem'] .page-title-date-row__filters .qawaem-toolbar-filter[aria-expanded='true']:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(110, 155, 110, 0.35) !important;
}

/* ── Date header preset bar tokens ── */
[data-brand='qawaem'] .bg-forest-50\/80 {
  background-color: rgba(244, 247, 244, 0.8);
}

[data-brand='qawaem'] .bg-forest-900 {
  background-color: var(--color-forest-900);
}

[data-brand='qawaem'] .bg-forest-50 {
  background-color: var(--color-forest-50);
}

[data-brand='qawaem'] .border-forest-200\/50 {
  border-color: rgba(197, 214, 197, 0.5);
}

[data-brand='qawaem'] .border-forest-200\/70 {
  border-color: rgba(197, 214, 197, 0.7);
}

[data-brand='qawaem'] .border-forest-300\/80 {
  border-color: rgba(168, 192, 168, 0.8);
}

[data-brand='qawaem'] .border-forest-800 {
  border-color: var(--color-forest-800);
}

[data-brand='qawaem'] .ring-forest-500\/35 {
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.35);
}

[data-brand='qawaem'] .hover\:bg-forest-50:hover {
  background-color: var(--color-forest-50);
}

[data-brand='qawaem'] .hover\:border-forest-300\/80:hover {
  border-color: rgba(168, 192, 168, 0.8);
}


/**
 * Qawaem — portaled UI (modals, dialogs, dropdowns on document.body)
 * Console-exact glass styling. NOT scoped to .console-main-scroll.
 */

/* ── Modal overlay ── */
html[data-brand='qawaem'] body > div.fixed.inset-0,
html[data-brand='qawaem'] .fixed.inset-0.glass-modal-overlay,
html[data-brand='qawaem'] .fixed.inset-0[class*='backdrop-blur'] {
  background: rgba(244, 247, 244, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Modal panel — glass-modal (Console) ── */
html[data-brand='qawaem'] .siterp-modal-light,
html[data-brand='qawaem'] .clients-modal-light,
html[data-brand='qawaem'] [data-service-modal-panel],
html[data-brand='qawaem'] [data-product-modal-panel],
html[data-brand='qawaem'] .glass-modal,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div,
html[data-brand='qawaem'] body > div.fixed.inset-0 .rounded-2xl.backdrop-blur-lg,
html[data-brand='qawaem'] body > div.fixed.inset-0 .rounded-2xl[class*='max-h-'] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 234, 0.88)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(196, 150, 60, 0.2) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 20px 50px rgba(46, 69, 46, 0.12) !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='from-slate-800'],
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='border-blue-400'] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 234, 0.88)) !important;
  border-color: rgba(196, 150, 60, 0.2) !important;
  box-shadow: 0 20px 50px rgba(46, 69, 46, 0.12) !important;
}

html[data-brand='qawaem'] .siterp-modal-light .border-gray-200,
html[data-brand='qawaem'] [data-service-modal-panel] .border-gray-200,
html[data-brand='qawaem'] [data-product-modal-panel] .border-gray-200 {
  border-color: rgba(110, 155, 110, 0.18) !important;
}

html[data-brand='qawaem'] .siterp-modal-light h2.text-gray-900,
html[data-brand='qawaem'] [data-service-modal-panel] h2.text-gray-900,
html[data-brand='qawaem'] [data-product-modal-panel] h2.text-gray-900,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div h2.text-white {
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .border-b.border-white\/10 {
  border-color: rgba(110, 155, 110, 0.18) !important;
}

/* Accordion sections inside modals */
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .bg-white\/5 {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border-color: rgba(110, 155, 110, 0.15) !important;
  border-radius: 0.75rem !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .border-white\/20 {
  border-color: rgba(110, 155, 110, 0.18) !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) :is(h3, h4).text-white,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) label.text-white\/70,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) label.text-white\/80 {
  color: #475947 !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-white\/60,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-white\/70,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-white\/80,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-white\/50 {
  color: #566856 !important;
}

/* Inputs & selects in modals */
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) :is(input, textarea, button).bg-white\/10,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) input.text-white,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) textarea.text-white {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(110, 155, 110, 0.2) !important;
  border-radius: 0.75rem !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 0.875rem !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) input::placeholder,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) textarea::placeholder {
  color: rgba(46, 69, 46, 0.4) !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) :is(input, textarea):focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.4) !important;
  border-color: rgba(110, 155, 110, 0.35) !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .bg-blue-500\/10 {
  background: rgba(110, 155, 110, 0.1) !important;
  border-color: rgba(110, 155, 110, 0.2) !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

/* Section icons → forest / copper */
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-blue-400 {
  color: #6e9b6e !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-green-400 {
  color: #5a855a !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-amber-400,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-yellow-400 {
  color: #a67c3d !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-purple-400,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .text-emerald-400 {
  color: #6e9b6e !important;
}

/* Primary actions — forest green (Console btn-primary-forest) */
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button[class*='from-blue-500'],
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button[class*='to-blue-700'] {
  background: linear-gradient(135deg, #6e9b6e, #5a855a) !important;
  border: 1px solid rgba(110, 155, 110, 0.4) !important;
  box-shadow: 0 4px 12px rgba(46, 69, 46, 0.15) !important;
  color: #ffffff !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button[class*='from-blue-500']:hover,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button[class*='hover:from-blue-600']:hover {
  background: linear-gradient(135deg, #7aad7a, #689868) !important;
  filter: none !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button[class*='shadow-blue'] {
  box-shadow: 0 4px 12px rgba(46, 69, 46, 0.15) !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) .focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(110, 155, 110, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.45) !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div :is(p, span).text-white {
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div button.bg-white\/5.text-white {
  background: rgba(244, 247, 244, 0.92) !important;
  border-color: rgba(110, 155, 110, 0.22) !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div button.bg-white\/5.text-white:hover {
  background: rgba(232, 241, 232, 1) !important;
  border-color: rgba(110, 155, 110, 0.35) !important;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .overflow-y-auto,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='overflow-y-auto'] {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 155, 110, 0.58) rgba(249, 243, 234, 0.85);
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .overflow-y-auto::-webkit-scrollbar,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='overflow-y-auto']::-webkit-scrollbar {
  width: 8px;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .overflow-y-auto::-webkit-scrollbar-track,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='overflow-y-auto']::-webkit-scrollbar-track {
  background: rgba(249, 243, 234, 0.65);
  border-radius: 999px;
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .overflow-y-auto::-webkit-scrollbar-thumb,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='overflow-y-auto']::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 155, 110, 0.68), rgba(166, 124, 61, 0.52));
  border-radius: 999px;
  border: 2px solid rgba(249, 243, 234, 0.85);
}

html[data-brand='qawaem'] body > div.fixed.inset-0 > div .overflow-y-auto::-webkit-scrollbar-thumb:hover,
html[data-brand='qawaem'] body > div.fixed.inset-0 > div[class*='overflow-y-auto']::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(90, 133, 90, 0.86), rgba(196, 150, 60, 0.7));
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) h3.text-lg.font-semibold.text-white {
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button.hover\:bg-white\/5:hover {
  background: rgba(110, 155, 110, 0.06) !important;
}

html[data-brand='qawaem'] .console-main-scroll .custom-select-trigger.qawaem-select,
html[data-brand='qawaem'] :is(.siterp-modal-light, [data-service-modal-panel], [data-product-modal-panel], body > div.fixed.inset-0 > div) button.border-slate-300 {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(110, 155, 110, 0.2) !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

/* ── Dark-blue inline dropdown panels (import/export, filters, unit/TVA) ── */
html[data-brand='qawaem'] div[style*='rgb(51, 65, 85)'],
html[data-brand='qawaem'] div[style*='rgb(29, 71, 196)'],
html[data-brand='qawaem'] .qawaem-portal-dropdown {
  background-image: none !important;
  background: rgba(252, 254, 252, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(110, 155, 110, 0.28) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 12px 32px rgba(46, 69, 46, 0.14),
    0 0 24px rgba(110, 155, 110, 0.08) !important;
}

html[data-brand='qawaem'] div[style*='rgb(51, 65, 85)'] button,
html[data-brand='qawaem'] div[style*='rgb(29, 71, 196)'] button {
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 0.875rem !important;
}

html[data-brand='qawaem'] div[style*='rgb(51, 65, 85)'] button:hover,
html[data-brand='qawaem'] div[style*='rgb(29, 71, 196)'] button:hover,
html[data-brand='qawaem'] div[style*='rgb(51, 65, 85)'] button[class*='hover:bg-blue'],
html[data-brand='qawaem'] div[style*='rgb(29, 71, 196)'] button[class*='hover:bg-blue'] {
  background: rgba(110, 155, 110, 0.1) !important;
  color: #5a855a !important;
}

html[data-brand='qawaem'] div[style*='rgb(51, 65, 85)'] button[class*='bg-blue-500'],
html[data-brand='qawaem'] div[style*='rgb(29, 71, 196)'] button[class*='bg-blue-500'] {
  background: rgba(110, 155, 110, 0.18) !important;
  color: #4a6b4a !important;
}

/* CustomSelect portaled dropdown */
html[data-brand='qawaem'] body > div.rounded-xl[style*='position: absolute'],
html[data-brand='qawaem'] body > div.rounded-xl[style*='position:absolute'] {
  background: rgba(252, 254, 252, 0.97) !important;
  border: 1px solid rgba(110, 155, 110, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(46, 69, 46, 0.14) !important;
}

html[data-brand='qawaem'] body > div.rounded-xl[style*='position'] button {
  font-size: 0.875rem !important;
}

html[data-brand='qawaem'] body > div.rounded-xl[style*='position'] button[class*='bg-blue'],
html[data-brand='qawaem'] body > div.rounded-xl[style*='position'] button[class*='text-blue'] {
  background: rgba(110, 155, 110, 0.15) !important;
  color: #5a855a !important;
}

html[data-brand='qawaem'] body > div.rounded-xl[style*='position'] input:focus {
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.35) !important;
}

/* Table toolbar filter triggers (الفئة / الحالة) */
html[data-brand='qawaem'] .console-main-scroll .employees-container button.border-white\/20.bg-white\/5 {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(110, 155, 110, 0.2) !important;
  border-radius: 0.5rem !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-size: 0.875rem !important;
  min-height: 2.375rem;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button.border-white\/20.bg-white\/5:hover {
  border-color: rgba(110, 155, 110, 0.35) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button.border-white\/20.bg-white\/5 .text-white,
html[data-brand='qawaem'] .console-main-scroll .employees-container button.border-white\/20.bg-white\/5 .text-white\/80,
html[data-brand='qawaem'] .console-main-scroll .employees-container button.border-white\/20.bg-white\/5 .text-white\/70 {
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
}

/* Import / export toolbar buttons */
html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-orange-500'] {
  background: linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(249, 243, 234, 0.95)) !important;
  border: 1px solid rgba(196, 150, 60, 0.45) !important;
  color: #704820 !important;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-orange-500']:hover {
  border-color: rgba(166, 124, 61, 0.55) !important;
  background: rgba(249, 243, 234, 1) !important;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-orange-500'] .text-orange-200,
html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-green-500'] .text-green-200 {
  color: inherit !important;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-green-500'] {
  border: 1px solid rgba(110, 155, 110, 0.5) !important;
  background: rgba(244, 247, 244, 0.96) !important;
  color: #2e452e !important;
}

html[data-brand='qawaem'] .console-main-scroll .employees-container button[class*='bg-green-500']:hover {
  background: rgba(232, 241, 232, 1) !important;
  border-color: rgba(90, 133, 90, 0.65) !important;
}

/* Confirm / alert dialogs */
html[data-brand='qawaem'] .swal2-popup,
html[data-brand='qawaem'] [class*='swal2'] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(249, 243, 234, 0.9)) !important;
  border: 1px solid rgba(196, 150, 60, 0.2) !important;
  border-radius: 1.5rem !important;
  color: #2e452e !important;
  color: var(--color-forest-900, #2e452e) !important;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
}

html[data-brand='qawaem'] .swal2-confirm {
  background: linear-gradient(135deg, #6e9b6e, #5a855a) !important;
  border-radius: 0.75rem !important;
}

html[data-brand='qawaem'] .swal2-cancel {
  color: #566856 !important;
}

/* Datepicker popups (period filter, modals) — above toolbar dropdown portal (200000) */
html[data-brand='qawaem'] .react-datepicker-popper,
html[data-brand='qawaem'] .date-picker-popper-high-z,
html[data-brand='qawaem'] .qawaem-period-datepicker-popper {
  z-index: 210000 !important;
}

html[data-brand='qawaem'] #SITERP-datepicker-portal,
html[data-brand='qawaem'] #Qawaem-datepicker-portal,
html[data-brand='qawaem'] .react-datepicker__portal {
  position: relative;
  z-index: 210000 !important;
}

html[data-brand='qawaem'] .react-datepicker {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
  border: 1px solid rgba(110, 155, 110, 0.28) !important;
  border-radius: 1rem !important;
  background: rgba(252, 254, 252, 0.98) !important;
  box-shadow: 0 12px 32px rgba(46, 69, 46, 0.14) !important;
}

html[data-brand='qawaem'] .react-datepicker__header {
  background: rgba(244, 247, 244, 0.95) !important;
  border-bottom: 1px solid rgba(110, 155, 110, 0.15) !important;
}

html[data-brand='qawaem'] .react-datepicker__day--selected,
html[data-brand='qawaem'] .react-datepicker__day--keyboard-selected {
  background: #6e9b6e !important;
  color: #fff !important;
}

html[data-brand='qawaem'] .react-datepicker__day:hover {
  background: rgba(110, 155, 110, 0.15) !important;
}

/**
 * Console-specific additions (referenced plan: Dashboard-light.css absent in repo).
 * Import beside GPSTrackingDatePicker.css + CustomComponents.css.
 */

.console-app-root table.employees-table.data-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
}

/* RTL-friendly alignment: headers and cells share the same start edge */
.console-app-root table.employees-table.data-table :is(thead th, tbody td, tfoot td),
.console-app-root table:has(thead.glass-table-head) :is(thead th, tbody td, tfoot td) {
  text-align: start;
  vertical-align: middle;
}

.console-app-root table.employees-table.data-table :is(th, td).text-center,
.console-app-root table:has(thead.glass-table-head) :is(th, td).text-center {
  text-align: center;
}

.console-app-root table.employees-table.data-table :is(th, td)[class*='text-center'],
.console-app-root table:has(thead.glass-table-head) :is(th, td)[class*='text-center'] {
  text-align: center;
}

.console-app-root table.employees-table.data-table thead th button,
.console-app-root table:has(thead.glass-table-head) thead th button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: flex-start;
  max-width: 100%;
}

.console-app-root table.employees-table.data-table thead.glass-table-head th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(244, 247, 244, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(110, 155, 110, 0.22);
}

.console-app-root table.employees-table.data-table thead.glass-table-head tr {
  background: rgba(244, 247, 244, 0.97);
}

.console-app-root .employees-table-body tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Pinned actions column — stays visible during horizontal scroll (RTL: left / inline-end edge). */
.console-app-root table.employees-table.data-table :is(th, td).table-sticky-actions,
.console-app-root table:has(thead.glass-table-head) :is(th, td).table-sticky-actions {
  position: -webkit-sticky;
  position: sticky;
  inset-inline-end: 0;
  z-index: 4;
  min-width: 7.5rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 6px 0 10px -6px rgba(46, 69, 46, 0.14);
}

.console-app-root table.employees-table.data-table thead.glass-table-head th.table-sticky-actions,
.console-app-root table:has(thead.glass-table-head) thead th.table-sticky-actions {
  z-index: 6;
  background: rgba(244, 247, 244, 0.99);
}

.console-app-root .employees-table-body tr:hover td.table-sticky-actions {
  background: rgba(248, 252, 248, 0.99);
}

.console-app-root table.employees-table.data-table tfoot td.table-sticky-actions,
.console-app-root table:has(thead.glass-table-head) tfoot td.table-sticky-actions {
  background: rgba(244, 247, 244, 0.99);
}

/* Pinned bulk-select column — stays visible during horizontal scroll (RTL: right / inline-start edge). */
.console-app-root table.employees-table.data-table :is(th, td).table-sticky-select,
.console-app-root table:has(thead.glass-table-head) :is(th, td).table-sticky-select {
  position: -webkit-sticky;
  position: sticky;
  inset-inline-start: 0;
  z-index: 4;
  min-width: 3.25rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: -6px 0 10px -6px rgba(46, 69, 46, 0.12);
}

.console-app-root table.employees-table.data-table thead.glass-table-head th.table-sticky-select,
.console-app-root table:has(thead.glass-table-head) thead th.table-sticky-select {
  z-index: 7;
  background: rgba(244, 247, 244, 0.99);
}

.console-app-root .employees-table-body tr:hover td.table-sticky-select {
  background: rgba(248, 252, 248, 0.99);
}

.console-app-root table.employees-table.data-table tfoot td.table-sticky-select,
.console-app-root table:has(thead.glass-table-head) tfoot td.table-sticky-select {
  background: rgba(244, 247, 244, 0.99);
}

/* Dashboard — stronger contrast for captions and chart labels on white panels */
.dashboard-panel-caption {
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 600;
  color: #475947;
}

.dashboard-chart-label {
  font-size: 0.625rem;
  line-height: 1.35;
  font-weight: 700;
  color: #3a553a;
}

.dashboard-inline-label {
  color: #475947;
  font-weight: 600;
}

/**
 * Qawaem / Saudi ERP — full Console design system
 */

:root {
  --color-forest-50: #f4f7f4;
  --color-forest-100: #e2ebe2;
  --color-forest-200: #c5d6c5;
  --color-forest-300: #a8c0a8;
  --color-forest-400: #8aab8a;
  --color-forest-500: #6e9b6e;
  --color-forest-600: #5a855a;
  --color-forest-700: #4a6b4a;
  --color-forest-800: #3a553a;
  --color-forest-900: #2e452e;
  --color-copper-300: #d4b06a;
  --color-copper-400: #c4963c;
  --color-copper-500: #a67c3d;
  --color-copper-600: #8a6530;
  --color-copper-700: #704820;
  --color-console-bg: #f5f5f5;
  --color-coral-400: #e07a5f;
  --console-bg: #f5f5f5;
  --console-panel: rgba(255, 255, 255, 0.65);
  --console-border: rgba(110, 155, 110, 0.14);
}

html[data-brand='qawaem'],
html.qawaem-root {
  background: #f5f5f5;
  background: var(--console-bg, #f5f5f5);
  color: #2e452e;
  color: var(--color-forest-900, #2e452e);
}

.qawaem-preauth,
.saudi-app-root,
.console-app-root {
  min-height: 100%;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  background: #f5f5f5;
  background: var(--console-bg);
  color: #2e452e;
  color: var(--color-forest-900);
}

.saudi-app-root,
.console-app-root {
  direction: rtl;
}

.bg-console-bg {
  background-color: #f5f5f5;
  background-color: var(--console-bg);
}

.bg-forest-50\/80 { background-color: rgba(244, 247, 244, 0.8); }
.bg-forest-900 { background-color: #2e452e; background-color: var(--color-forest-900); }
.bg-forest-50 { background-color: #f4f7f4; background-color: var(--color-forest-50); }
.border-forest-200\/70 { border-color: rgba(197, 214, 197, 0.7); }
.border-forest-300\/80 { border-color: rgba(168, 192, 168, 0.8); }
.border-forest-800 { border-color: #3a553a; border-color: var(--color-forest-800); }
.text-forest-900 { color: #2e452e; color: var(--color-forest-900); }
.ring-forest-500\/35 { box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.35); }
.hover\:bg-forest-50:hover { background-color: #f4f7f4; background-color: var(--color-forest-50); }
.hover\:border-forest-300\/80:hover { border-color: rgba(168, 192, 168, 0.8); }
.text-white.force-white { color: #ffffff !important; }

/* Sidebar module navigation */
.saudi-module-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3a553a;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: right;
  transition: background 0.15s ease;
}

.saudi-module-btn:hover {
  background: rgba(110, 155, 110, 0.1);
}

.saudi-module-btn.is-expanded {
  background: rgba(110, 155, 110, 0.14);
  color: #2e452e;
  color: var(--color-forest-900);
}

.saudi-subsections {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  -webkit-padding-start: 0.5rem;
          padding-inline-start: 0.5rem;
  -webkit-border-start: 2px solid rgba(110, 155, 110, 0.2);
          border-inline-start: 2px solid rgba(110, 155, 110, 0.2);
  -webkit-margin-start: 0.75rem;
          margin-inline-start: 0.75rem;
}

.saudi-sub-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  color: #566856;
  text-decoration: none;
  transition: all 0.12s ease;
}

.saudi-sub-link:hover {
  background: rgba(110, 155, 110, 0.1);
  color: #2e452e;
  color: var(--color-forest-900);
}

.saudi-sub-link.is-active {
  background: rgba(110, 155, 110, 0.16);
  color: #2e452e;
  color: var(--color-forest-900);
  font-weight: 600;
}

.saudi-badge-new {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: rgba(196, 150, 60, 0.15);
  color: #8a6530;
  line-height: 1.2;
  flex-shrink: 0;
}

.saudi-placeholder-card {
  max-width: 42rem;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.65);
  background: var(--console-panel);
  border: 1px solid rgba(110, 155, 110, 0.14);
  border: 1px solid var(--console-border);
  text-align: center;
}

.saudi-placeholder-card h1 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #2e452e;
  color: var(--color-forest-900);
}

.saudi-placeholder-card p {
  color: #566856;
  margin: 0.25rem 0;
  line-height: 1.6;
}

.btn-header-compact {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.375rem;
}

/* Setup wizard — light stepper on Qawaem preauth shell */
.qawaem-setup-shell {
  min-height: 100dvh;
  background: #f5f5f5;
  background: var(--console-bg);
}

.qawaem-setup-step {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.qawaem-setup-step.is-done {
  border-color: rgba(110, 155, 110, 0.55);
  background: rgba(110, 155, 110, 0.15);
  color: #4a6b4a;
  color: var(--color-forest-700);
}

.qawaem-setup-step.is-active {
  border-color: #6e9b6e;
  border-color: var(--color-forest-500);
  background: rgba(110, 155, 110, 0.22);
  color: #2e452e;
  color: var(--color-forest-900);
  box-shadow: 0 0 0 2px rgba(110, 155, 110, 0.2);
}

.qawaem-setup-step.is-idle {
  border-color: rgba(110, 155, 110, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(46, 69, 46, 0.35);
}

.qawaem-setup-line.is-done {
  background: rgba(110, 155, 110, 0.45);
}

.qawaem-setup-line.is-idle {
  background: rgba(110, 155, 110, 0.15);
}

/* Light content inside Saudi shell when pages still use dark Tailwind classes */
.saudi-app-root .console-main-scroll .text-white:not(.force-white),
.saudi-app-root .saudi-main-scroll .text-white:not(.force-white) {
  color: #2e452e !important;
  color: var(--color-forest-900) !important;
}

.saudi-app-root .console-main-scroll .text-white\/60,
.saudi-app-root .saudi-main-scroll .text-white\/60,
.saudi-app-root .console-main-scroll .text-white\/70,
.saudi-app-root .saudi-main-scroll .text-white\/70,
.saudi-app-root .console-main-scroll .text-white\/80,
.saudi-app-root .saudi-main-scroll .text-white\/80 {
  color: #566856 !important;
}

.saudi-app-root .console-main-scroll .bg-white\/5,
.saudi-app-root .saudi-main-scroll .bg-white\/5,
.saudi-app-root .console-main-scroll .bg-white\/10,
.saudi-app-root .saudi-main-scroll .bg-white\/10 {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(110, 155, 110, 0.18) !important;
}

.saudi-app-root .console-main-scroll .border-white\/10,
.saudi-app-root .saudi-main-scroll .border-white\/10,
.saudi-app-root .console-main-scroll .border-white\/20,
.saudi-app-root .saudi-main-scroll .border-white\/20 {
  border-color: rgba(110, 155, 110, 0.18) !important;
}

.saudi-app-root .console-main-scroll .hover\:bg-white\/10:hover,
.saudi-app-root .saudi-main-scroll .hover\:bg-white\/10:hover {
  background: rgba(110, 155, 110, 0.08) !important;
}

.saudi-app-root .console-main-scroll .hover\:text-white:hover,
.saudi-app-root .saudi-main-scroll .hover\:text-white:hover {
  color: #2e452e !important;
  color: var(--color-forest-900) !important;
}

.saudi-app-root .console-main-scroll input,
.saudi-app-root .saudi-main-scroll input,
.saudi-app-root .console-main-scroll select,
.saudi-app-root .saudi-main-scroll select {
  color: #2e452e;
  color: var(--color-forest-900);
}

.saudi-app-root .console-main-scroll .from-slate-800,
.saudi-app-root .saudi-main-scroll .from-slate-800,
.saudi-app-root .console-main-scroll .via-blue-750,
.saudi-app-root .saudi-main-scroll .via-blue-750,
.saudi-app-root .console-main-scroll .to-slate-800,
.saudi-app-root .saudi-main-scroll .to-slate-800 {
  --tw-gradient-from: rgba(255, 255, 255, 0.95) !important;
  --tw-gradient-to: rgba(244, 247, 244, 0.95) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgba(232, 241, 232, 0.9), var(--tw-gradient-to) !important;
}

.saudi-app-root .console-main-scroll table thead,
.saudi-app-root .saudi-main-scroll table thead {
  background: rgba(244, 247, 244, 0.95) !important;
}

.saudi-app-root .console-main-scroll table tbody tr:hover,
.saudi-app-root .saudi-main-scroll table tbody tr:hover {
  background: rgba(110, 155, 110, 0.06) !important;
}

/* Custom DatePicker Styling for GPS Tracking Page */

/* Wrapper */
.react-datepicker-wrapper {
  width: 100% !important;
}

.react-datepicker__input-container {
  width: 100% !important;
}

/* Number Input Spinners - Hide Native Spinners for Custom Buttons */
input[type="number"].number-input-custom {
  -moz-appearance: textfield;
}

/* Hide default spinners completely */
input[type="number"].number-input-custom::-webkit-outer-spin-button,
input[type="number"].number-input-custom::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

/* Popper Container - ONLY Z-INDEX, NO POSITIONING! */
/* DO NOT OVERRIDE position OR transform - Let Popper.js handle positioning! */
.react-datepicker-popper {
  z-index: 99999999 !important;
  /* Popper.js will set position and transform - DO NOT OVERRIDE */
}

/* Calendar Container - Styling Only, NO Positioning! */
.gps-calendar {
  background: linear-gradient(to bottom right, rgb(51, 65, 85), rgb(29, 71, 196), rgb(51, 65, 85)) !important;
  border: 1px solid rgba(96, 165, 250, 0.6) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  font-family: inherit !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  /* NO z-index or position here - Popper handles it */
}

/* Month Container */
.gps-calendar .react-datepicker__month-container {
  background: transparent !important;
}

/* Header - Inherit gradient from parent */
.gps-calendar .react-datepicker__header {
  background: transparent !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3) !important;
  border-radius: 1rem 1rem 0 0 !important;
  padding: 0 !important;
}

/* Hide default navigation arrows since we use renderCustomHeader */
.gps-calendar .react-datepicker__navigation {
  display: none !important;
}

/* Current Month/Year - Hidden since we use renderCustomHeader */
.gps-calendar .react-datepicker__current-month {
  display: none !important;
}

/* Day Names (Su, Mo, etc.) */
.gps-calendar .react-datepicker__day-names {
  display: flex !important;
  justify-content: space-around !important;
  margin-top: 0.5rem !important;
  padding: 0 0.5rem !important;
}

.gps-calendar .react-datepicker__day-name {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  width: 2rem !important;
  line-height: 2rem !important;
  margin: 0.2rem !important;
}

/* Calendar Month Container */
.gps-calendar .react-datepicker__month {
  margin: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Week Row */
.gps-calendar .react-datepicker__week {
  display: flex !important;
  justify-content: space-around !important;
}

/* Individual Days */
.gps-calendar .react-datepicker__day {
  color: rgba(255, 255, 255, 0.9) !important;
  width: 2rem !important;
  height: 2rem !important;
  line-height: 2rem !important;
  margin: 0.2rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.gps-calendar .react-datepicker__day:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

/* Selected Day */
.gps-calendar .react-datepicker__day--selected,
.gps-calendar .react-datepicker__day--keyboard-selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Today */
.gps-calendar .react-datepicker__day--today {
  background: rgba(59, 130, 246, 0.2) !important;
  color: white !important;
  font-weight: 600 !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

/* Outside Month Days */
.gps-calendar .react-datepicker__day--outside-month {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Disabled Days */
.gps-calendar .react-datepicker__day--disabled {
  color: rgba(255, 255, 255, 0.2) !important;
  cursor: not-allowed !important;
}

.gps-calendar .react-datepicker__day--disabled:hover {
  background: transparent !important;
}

/* Remove default navigation icon styles */
.gps-calendar .react-datepicker__navigation-icon,
.gps-calendar .react-datepicker__navigation-icon::before {
  display: none !important;
}

/* Month/Year Dropdowns - Inherit gradient from parent */
.gps-calendar .react-datepicker__month-dropdown,
.gps-calendar .react-datepicker__year-dropdown {
  background: transparent !important;
  border: 1px solid rgba(96, 165, 250, 0.6) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

.gps-calendar .react-datepicker__month-option,
.gps-calendar .react-datepicker__year-option {
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

.gps-calendar .react-datepicker__month-option:hover,
.gps-calendar .react-datepicker__year-option:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

.gps-calendar .react-datepicker__month-option--selected,
.gps-calendar .react-datepicker__year-option--selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Input Field Placeholder */
.gps-datepicker::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Triangle/Pointer */
.gps-calendar .react-datepicker__triangle {
  display: none !important;
}

/* Portal for better positioning */
.react-datepicker-popper[data-placement^="bottom"] .gps-calendar {
  margin-top: 0.5rem !important;
}

.react-datepicker-popper[data-placement^="top"] .gps-calendar {
  margin-bottom: 0.5rem !important;
}

/* Month Container */
.gps-calendar .react-datepicker__month-container {
  background: transparent !important;
}

/* Time Container (if used) - Inherit gradient from parent */
.gps-calendar .react-datepicker__time-container {
  background: transparent !important;
  border-left: 1px solid rgba(96, 165, 250, 0.3) !important;
}

/* Time Header - Translate to French - Inherit gradient from parent */
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time {
  background: transparent !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3) !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 3.56rem !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Replace "Time" text with "Heure" in French */
.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before {
  content: "Heure" !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header {
  font-size: 0 !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__header--time .react-datepicker-time__header::before {
  font-size: 0.875rem !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__time {
  background: transparent !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  background: transparent !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s ease !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: white !important;
}

.gps-calendar .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* In-range styling for date range selection */
.gps-calendar .react-datepicker__day--in-range {
  background: rgba(59, 130, 246, 0.2) !important;
  color: white !important;
}

.gps-calendar .react-datepicker__day--in-selecting-range {
  background: rgba(59, 130, 246, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Range start/end */
.gps-calendar .react-datepicker__day--range-start,
.gps-calendar .react-datepicker__day--range-end {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  color: white !important;
  font-weight: 700 !important;
}

/* High z-index for date picker popper to appear above tables */
.date-picker-popper-high-z {
  z-index: 999999 !important;
}

/**
 * Portal root for react-datepicker when using portalId="SITERP-datepicker-portal".
 * Renders the calendar outside overflow:hidden / backdrop-filter ancestors so it is not clipped.
 */
#SITERP-datepicker-portal {
  position: relative;
  z-index: 2147483000;
}


/* Force white color on icons and text for import/export buttons */
.force-white {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


/* Bannière démo — bande fine au-dessus de l’app (flux flex, pas position:fixed). */
.demo-banner {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}

.demo-banner__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 0.4rem 0.55rem;
  gap: 0.4rem 0.55rem;
  width: 100%;
}

.demo-banner__badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.2;
}

.demo-banner__text {
  font-size: 0.68rem;
  line-height: 1.25;
  opacity: 0.94;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-banner__text strong {
  font-weight: 700;
}

.demo-banner__quit {
  flex-shrink: 0;
  padding: 0.22rem 0.48rem;
  font-size: 0.68rem;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.demo-banner__quit:active {
  background: rgba(255, 255, 255, 0.22);
}

@media (min-width: 641px) {
  .demo-banner {
    padding: 0.45rem 0.95rem;
  }

  .demo-banner__badge {
    font-size: 0.7rem;
    padding: 0.18rem 0.62rem;
  }

  .demo-banner__text {
    font-size: 0.8rem;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  .demo-banner__quit {
    padding: 0.3rem 0.72rem;
    font-size: 0.78rem;
  }
}