/* ═══════════════════════════════════════════════════
   EASYTIME — Professional UI System
   Fully theme-aware via CSS variables.
   Supports light / dark / indigo / emerald / deepblue /
   kimbiedark / graphite / midnight / carbon / aubergine.
═══════════════════════════════════════════════════ */

/* ── Loader de navigation (voir dist/js/page-loader.js) : petit badge flottant en bas a gauche
   de la zone de contenu, visible pendant le chargement d'une nouvelle page (clic sur un lien,
   soumission d'un formulaire) — l'appli est en rendu serveur classique (rechargement complet de
   page), sans ce badge un clic ne donne aucun retour visuel avant que la nouvelle page n'arrive. ── */
.page-loader {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  color: var(--text-main);
  font-size: .72rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.page-loader.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.page-loader-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-500);
  animation: page-loader-spin .6s linear infinite;
}

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

@media (min-width: 768px) {
  .page-loader { left: calc(16rem + 1rem); }
  body.sidebar-collapsed .page-loader { left: calc(4.5rem + 1rem); }
}

[dir="rtl"] .page-loader { left: auto; right: 1rem; }
@media (min-width: 768px) {
  [dir="rtl"] .page-loader { right: calc(16rem + 1rem); left: auto; }
  [dir="rtl"] body.sidebar-collapsed .page-loader { right: calc(4.5rem + 1rem); left: auto; }
}

/* ── Pagination serveur AJAX (voir dist/js/easytime-server-tables.js) : attenuation legere
   pendant qu'une page/taille de page est en cours de chargement. ── */
[data-server-table].is-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* Variables --table-pro-* : portees par [data-server-table] en plus de .table-pro-shell, car
   plusieurs modules (annomalie, audit, paie, remuneration, visiteurs, parametreconge,
   planningexception, heuresup, planning) mettent data-server-table sur un conteneur qui n'a PAS
   la classe table-pro-shell (juste "card", ou des classes Tailwind ad-hoc). Sans ces variables
   definies dans leur scope, la barre outils/recherche/export injectee par
   easytime-server-tables.js (voir injectToolbar/addExportDropdown) se retrouvait sans fond ni
   bordure (var(--table-pro-soft) etc. non resolues). On ne fusionne pas avec .table-pro-shell
   lui-meme plus bas (background/overflow:visible !important) pour ne pas modifier le rendu
   visuel de ces 9 pages (certaines comptent sur overflow-hidden/overflow-x-auto). */
.table-pro-shell,
[data-server-table] {
  --table-pro-bg:     var(--bg-card);
  --table-pro-panel:  var(--bg-main);
  --table-pro-row:    var(--nav-hover);
  --table-pro-border: var(--border-color);
  --table-pro-text:   var(--text-main);
  --table-pro-muted:  var(--text-muted);
  --table-pro-soft:   var(--bg-main);
  --table-pro-accent: var(--primary-500);
}

/* ── Table shell — flat enterprise grid, no card-shadow chrome ── */
.table-pro-shell {
  background: var(--table-pro-bg);
  border: 1px solid var(--table-pro-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: visible !important;
}

.table-pro-toolbar,
.table-pro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .85rem;
  background: transparent;
}

.table-pro-toolbar {
  border-bottom: 1px solid var(--table-pro-border);
  flex-wrap: wrap;
}

.table-pro-footer {
  border-top: 1px solid var(--table-pro-border);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.table-pro-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 8rem;
  color: var(--table-pro-text);
  font-size: .72rem;
  font-weight: 700;
}

.table-pro-title i {
  color: var(--table-pro-accent);
  font-size: .78rem;
}

.table-pro-actions {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-wrap: wrap;
}

/* ── Search: filled pill, no border by default ── */
.table-pro-search {
  position: relative;
  min-width: min(15rem, 100%);
  margin-right: .35rem;
}

.table-pro-search i {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--table-pro-muted);
  font-size: .7rem;
  pointer-events: none;
  transition: color .15s ease;
}

[dir="rtl"] .table-pro-search i {
  left: auto;
  right: .8rem;
}

.table-pro-search input {
  height: 1.85rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--table-pro-soft);
  color: var(--table-pro-text);
  font-size: .72rem;
  font-weight: 500;
  outline: none;
  padding: 0 .9rem 0 2rem;
  transition: border-color .15s ease, background .15s ease;
}

[dir="rtl"] .table-pro-search input {
  padding: 0 2rem 0 .9rem;
}

.table-pro-search input::placeholder {
  color: var(--table-pro-muted);
  font-weight: 400;
}

.table-pro-search input:focus {
  border-color: var(--table-pro-accent);
  background: var(--table-pro-bg);
}

.table-pro-search input:focus + i,
.table-pro-search:focus-within i {
  color: var(--table-pro-accent);
}

/* ── Buttons / page-size — ghost by default, no border/shadow noise ── */
.table-pro-btn,
.table-pro-size select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 1.85rem;
  min-width: 1.85rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--table-pro-muted);
  font-size: .68rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.table-pro-btn {
  padding: 0 .6rem;
}

.table-pro-btn:hover,
.table-pro-size select:hover,
.table-pro-size select:focus {
  background: var(--table-pro-soft);
  color: var(--table-pro-text);
  outline: none;
}

.table-pro-btn.is-active {
  background: var(--table-pro-soft);
  color: var(--table-pro-accent);
}

.table-pro-btn:disabled,
.table-pro-size select:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Pagination — composant unique, reutilise par TOUS les tableaux (voir fragments/pagination
   dans chaque list.html) : piste arrondie avec bordure, boutons Premiere/Precedent/.../Suivant/
   Derniere, page active pleine, points de suspension au-dela de 2 pages depuis les bornes/la
   page courante. ── */
/* Fallbacks (2e argument de chaque var()) : --table-pro-* n'est defini que dans le scope
   .table-pro-shell/[data-server-table] (voir plus haut) — un pied de pagination place ailleurs
   (ex: panneau collaborateurs du calendrier, hors table) se retrouvait avec des var() non
   resolues, donc une page active en texte blanc SUR AUCUN FOND (transparent), illisible. Ces
   fallbacks vers les variables de theme globales rendent le composant autonome partout. */
.table-pro-pagination {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .25rem;
  border: 1px solid var(--table-pro-border, var(--border-color));
  border-radius: 999px;
  background: var(--table-pro-bg, var(--bg-card));
  flex-wrap: wrap;
}

.table-pro-page-list {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
}

.table-pro-page,
.table-pro-page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.9rem;
  min-width: 1.9rem;
  padding: 0 .5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--table-pro-muted, var(--text-muted));
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}

.table-pro-page-nav {
  width: 1.9rem;
  padding: 0;
  font-size: .68rem;
}

.table-pro-page:hover,
.table-pro-page-nav:hover {
  background: var(--table-pro-soft, var(--bg-main));
  color: var(--table-pro-text, var(--text-main));
}

.table-pro-page.is-active {
  background: var(--table-pro-accent, var(--primary-500));
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.table-pro-page.is-active:hover {
  background: var(--table-pro-accent, var(--primary-500));
  color: #fff;
}

.table-pro-page-nav.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.table-pro-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.9rem;
  color: var(--table-pro-muted, var(--text-muted));
  font-size: .7rem;
  font-weight: 700;
  user-select: none;
}

.table-pro-page:active,
.table-pro-page-nav:active {
  transform: scale(.92);
}

[dir="rtl"] .table-pro-page-nav i {
  transform: scaleX(-1);
}

/* ── Pagination — variante extra small : memes classes/etats (.table-pro-page, .is-active,
   .is-disabled, ellipsis...), juste plus compacte pour les emplacements etroits (ex : pied du
   panneau collaborateurs du calendrier, colonne laterale). Usage : ajouter "is-xs" sur
   .table-pro-pagination. ── */
.table-pro-pagination.is-xs {
  gap: .1rem;
  padding: .15rem;
}

.table-pro-pagination.is-xs .table-pro-page-list {
  gap: .05rem;
}

.table-pro-pagination.is-xs .table-pro-page,
.table-pro-pagination.is-xs .table-pro-page-nav {
  height: 1.4rem;
  min-width: 1.4rem;
  padding: 0 .35rem;
  font-size: .6rem;
}

.table-pro-pagination.is-xs .table-pro-page-nav {
  width: 1.4rem;
  padding: 0;
  font-size: .58rem;
}

.table-pro-pagination.is-xs .table-pro-page-ellipsis {
  min-width: 1.1rem;
  height: 1.4rem;
  font-size: .6rem;
}

.table-pro-size {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--table-pro-muted);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.table-pro-size select {
  appearance: none;
  min-width: 3.6rem;
  padding: 0 1.1rem 0 .5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
}

/* ── Generic dropdown (Columns / Export) ── */
.table-pro-dropdown {
  position: relative;
}

.table-pro-caret {
  font-size: .55rem;
  opacity: .6;
  transition: transform .15s ease;
}

.table-pro-dropdown.is-open .table-pro-caret {
  transform: rotate(180deg);
}

.table-pro-dropdown-panel {
  position: fixed;
  z-index: 9999;
  display: none;
  min-width: 12rem;
  max-height: 16rem;
  overflow: auto;
  padding: .3rem;
  border: 1px solid var(--table-pro-border);
  border-radius: 8px;
  background: var(--table-pro-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.table-pro-dropdown.is-open .table-pro-dropdown-panel {
  display: grid;
  gap: .1rem;
}

.table-pro-dropdown-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
  padding: .38rem .5rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  transition: background .12s ease;
}

.table-pro-dropdown-option:hover {
  background: var(--table-pro-soft);
}

.table-pro-dropdown-option input {
  accent-color: var(--table-pro-accent);
}

/* ── Export dropdown: coloured format icons ── */
.table-pro-export-option i {
  width: 1.1rem;
  text-align: center;
  font-size: .78rem;
}

.table-pro-export-option.tone-csv i {
  color: var(--table-pro-accent);
}

.table-pro-export-option.tone-excel i {
  color: #16a34a;
}

.table-pro-export-option.tone-xml i {
  color: #d97706;
}

.table-pro-export-option.tone-txt i {
  color: var(--table-pro-muted);
}

.table-pro-export-option.tone-pdf i {
  color: #dc2626;
}

/* ── Pagination section override (fully theme-aware) ── */
#pageContent .table-pro-shell .border-t:has(a[href*="page="]),
#pageContent .card.table-pro-shell + .border-t:has(a[href*="page="]),
#pageContent .border-t:has(a[href*="page="]),
#mainContent .table-pro-shell .border-t:has(a[href*="page="]),
#mainContent .border-t:has(a[href*="page="]) {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}

/* Note : la regle qui masquait autrefois le premier enfant de ce pied de pagination (pense pour
   un doublon "info" hypothetique) a ete retiree — tous les .border-t avec liens page= de l'appli
   sont des .table-pro-footer, et aucun ne duplique cette info ailleurs sur la page ; elle ne
   faisait plus que masquer par erreur le texte "Affichage de X a Y" et/ou le selecteur "par
   page" (voir easytime-server-tables.js#injectToolbar qui deplace desormais ce dernier en haut). */

/* L'ancienne regle generique a[href*="page="] avec !important (ex-doublon de .table-pro-page)
   a ete retiree : elle forcait color/font-weight sur TOUS les liens de pagination, y compris la
   page active, et ecrasait (via !important) le rgba accent de .table-pro-page.is-active — la page
   courante gardait son soulignement bleu mais un texte gris, illisible. .table-pro-page /
   .table-pro-pagination (definis plus haut) sont deja le seul style de pagination utilise partout
   (voir absence/list.html, annomalie/list.html, etc.) : plus besoin de ce doublon, ni d'une
   seconde declaration de .table-pro-pagination ici. */

.table-pro-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.table-pro-empty {
  padding: 1.75rem 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
}

/* ── Core table styles ── */
.table-pro,
.pro-table,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]),
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--table-pro-text, var(--text-main));
}

/* ── Header cells: flat, no background tint — a firm 2px rule defines it ── */
.table-pro thead th,
.pro-table thead th,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) thead th,
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .35rem .5rem;
  background: var(--table-pro-bg, var(--bg-card));
  border-bottom: 2px solid var(--table-pro-border, var(--border-color));
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-pro thead th[data-sortable="true"],
.pro-table thead th[data-sortable="true"] {
  cursor: pointer;
  user-select: none;
}

.table-pro thead th[data-sortable="true"]:hover,
.pro-table thead th[data-sortable="true"]:hover {
  color: var(--table-pro-text, var(--text-main));
}

.table-pro-sort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Sort caret stays out of the way until the column is hovered/active — less chrome, cleaner header row */
.table-pro-sort i {
  color: var(--table-pro-muted, var(--text-muted));
  font-size: .62rem;
  opacity: 0;
  transition: color .15s ease, opacity .15s ease;
}

th[data-sortable="true"]:hover .table-pro-sort i {
  opacity: .6;
}

.table-pro-sort.is-active {
  color: var(--table-pro-accent, var(--primary-600));
}

.table-pro-sort.is-active i {
  color: var(--table-pro-accent, var(--primary-600));
  opacity: 1;
}

/* ── Body cells ── */
.table-pro tbody td,
.pro-table tbody td,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td,
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td {
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--table-pro-border, var(--border-color));
  color: var(--table-pro-text, var(--text-main));
  font-size: .7rem;
  vertical-align: middle;
}

/* Premiere colonne mise en avant (style Flowbite : nom/identifiant de la ligne en evidence) */
.table-pro tbody td:first-child,
.pro-table tbody td:first-child,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td:first-child,
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

.table-pro tbody tr,
.pro-table tbody tr,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr,
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr {
  transition: background .16s ease;
}

.table-pro tbody tr:hover,
.pro-table tbody tr:hover,
#pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:hover,
#mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:hover {
  background: var(--table-pro-row, var(--nav-hover));
}

.table-pro tbody tr:last-child td,
.pro-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Table action button (icon-only, rows) ── */
.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;
  color: var(--text-muted);
  transition: background .18s, color .18s, transform .12s;
}
.table-action-btn:hover {
  background: var(--nav-hover);
  color: var(--text-main);
}
.table-action-btn.danger:hover {
  background: rgba(239,68,68,.1);
  color: rgb(239,68,68);
}

/* ── simple-datatables theming (moteur de tableau unique, voir dist/js/easytime-tables.js) ──
   Reprend le meme langage visuel que .table-pro-page/.table-pro-btn (border/radius/couleurs des
   variables theme) pour que le rendu de simple-datatables soit indiscernable du reste de l'appli,
   y compris en mode sombre et RTL. Remplace l'ancienne section "DataTables compatibility"
   (jQuery DataTables.net, retire de toutes les pages sauf les rapports). */
.datatable-wrapper {
  color: var(--table-pro-text, var(--text-main));
}

.datatable-top,
.datatable-bottom {
  padding: .6rem .25rem;
  color: var(--table-pro-muted, var(--text-muted));
  font-size: .78rem;
}

.datatable-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.datatable-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--table-pro-border, var(--border-color)); }

.datatable-search .datatable-input,
.datatable-input {
  border: 1px solid var(--table-pro-border, var(--border-color)) !important;
  border-radius: 7px !important;
  background: var(--table-pro-soft, var(--bg-main)) !important;
  color: var(--table-pro-text, var(--text-main)) !important;
  padding: .38rem .6rem !important;
  font-size: .78rem !important;
  outline: none !important;
}
.datatable-input:focus {
  border-color: var(--table-pro-accent, var(--primary-500)) !important;
}

.datatable-selector {
  border: 1px solid var(--table-pro-border, var(--border-color)) !important;
  border-radius: 7px !important;
  background: var(--table-pro-soft, var(--bg-main)) !important;
  color: var(--table-pro-text, var(--text-main)) !important;
  padding: .3rem .5rem !important;
  font-size: .78rem !important;
  outline: none !important;
}

.datatable-info { color: var(--table-pro-muted, var(--text-muted)); }

.datatable-table { width: 100%; }

.datatable-sorter {
  cursor: pointer;
  color: inherit;
}
.datatable-sorter::before,
.datatable-sorter::after {
  border-bottom-color: var(--table-pro-muted, var(--text-muted)) !important;
  border-top-color: var(--table-pro-muted, var(--text-muted)) !important;
}
th.datatable-ascending .datatable-sorter,
th.datatable-descending .datatable-sorter {
  color: var(--table-pro-accent, var(--primary-600));
}

.datatable-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.datatable-pagination li { list-style: none; }
.datatable-pagination a,
.datatable-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .55rem;
  border: 1px solid var(--table-pro-border, var(--border-color));
  border-radius: 7px;
  background: var(--table-pro-bg, var(--bg-card));
  color: var(--table-pro-text, var(--text-main));
  font-weight: 700;
  font-size: .72rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.datatable-pagination a:hover,
.datatable-pagination button:hover {
  background: var(--table-pro-soft, var(--bg-main));
}
.datatable-pagination li.datatable-active a,
.datatable-pagination a.datatable-active {
  border-color: var(--table-pro-accent, var(--primary-600));
  background: var(--table-pro-accent, var(--primary-600));
  color: #fff;
}
.datatable-pagination li.datatable-disabled a,
.datatable-pagination a.datatable-disabled,
.datatable-pagination .datatable-disabled {
  opacity: .4;
  pointer-events: none;
}

.datatable-empty { color: var(--table-pro-muted, var(--text-muted)); text-align: center; padding: 2rem 1rem; }

[dir="rtl"] .datatable-top,
[dir="rtl"] .datatable-bottom,
[dir="rtl"] .datatable-pagination {
  flex-direction: row-reverse;
}

/* ════════════════════════════════════════════════════
   PROFESSIONAL FORM UTILITIES
════════════════════════════════════════════════════ */

/* Card container for forms */
.pro-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
}

.pro-form-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.pro-form-header h2,
.pro-form-header h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.pro-form-header p {
  margin-top: .25rem;
  font-size: .78rem;
  color: var(--text-muted);
}

.pro-form-body {
  padding: 1.25rem 1.5rem;
}

.pro-form-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Grouped section inside a form */
.pro-form-section {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  background: var(--bg-main);
}

.pro-form-section-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-main);
  padding-bottom: .5rem;
  margin-bottom: .875rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ════════════════════════════════════════════════════
   PAGE HEADER CARD (list + form pages)
════════════════════════════════════════════════════ */
.pro-page-header {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
}

.pro-page-header::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500), #7c3aed, #10b981);
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-pro-toolbar {
    gap: .4rem;
    padding: .45rem .6rem;
  }
  .table-pro-actions { flex-wrap: wrap; gap: .25rem; }
  .table-pro-search { min-width: min(13rem, 100%); flex: 1 1 auto; }
  .pro-form-body { padding: 1rem; }
  .pro-form-footer { padding: .75rem 1rem; }
  .pro-form-header { padding: .75rem 1rem; }
}

@media (max-width: 640px) {
  .table-pro-toolbar,
  .table-pro-footer {
    align-items: stretch;
    flex-direction: column;
    padding: .45rem .6rem;
    gap: .4rem;
  }
  .table-pro-title { font-size: .66rem; }
  .table-pro-actions { width: 100%; justify-content: space-between; }
  .table-pro-search { width: 100%; min-width: unset; flex: unset; }
  .table-pro-search input { width: 100%; }
  .table-pro-btn { flex: 1 1 auto; justify-content: center; font-size: .65rem; padding: 0 .4rem; }
  .table-pro-pagination { justify-content: center; width: 100%; }
  .table-pro-footer { align-items: center; }
  .table-pro-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 28px; height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,.18));
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s;
  }
  .table-pro-scroll.scrolled-end::after { opacity: 0; }
  .pro-form-card { border-radius: .75rem; }
  .pro-form-body { padding: .875rem; }
  .pro-form-footer { flex-direction: column; align-items: stretch; }
  .pro-form-footer > div { width: 100%; justify-content: stretch; }
  .pro-page-header { padding: .875rem; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE TABLE — CARD/STACKED MODE (phones)
   Every list table in the app (auto-enhanced by
   easytime-pro-tables.js, which stamps each <td> with a
   data-label taken from its column header) collapses from
   a horizontally-scrolled grid into a stack of labelled
   cards below 640px, instead of forcing side-scroll.
════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .table-pro-scroll { overflow-x: visible; }
  .table-pro-scroll::after { content: none !important; }

  .table-pro thead,
  .pro-table thead,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) thead,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  .table-pro, .table-pro tbody, .table-pro tr,
  .pro-table, .pro-table tbody, .pro-table tr,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]),
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tr,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]),
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tr {
    display: block;
    width: 100%;
  }

  .table-pro tbody tr,
  .pro-table tbody tr,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr {
    margin-bottom: .6rem;
    border: 1px solid var(--table-pro-border, var(--border-color)) !important;
    border-top-width: 1px !important;
    border-radius: 6px;
    overflow: hidden;
    background: var(--table-pro-bg, var(--bg-card));
  }
  .table-pro tbody tr:last-child,
  .pro-table tbody tr:last-child,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:last-child,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:last-child {
    margin-bottom: 0;
  }

  .table-pro tbody td,
  .pro-table tbody td,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td {
    display: block;
    position: relative;
    min-height: 1.9rem;
    padding: .5rem .75rem .5rem 45%;
    text-align: right;
    border-bottom: 1px dashed var(--table-pro-border, var(--border-color));
    white-space: normal;
  }
  .table-pro tbody td:last-child,
  .pro-table tbody td:last-child,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td:last-child,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td:last-child {
    border-bottom: 0;
  }

  .table-pro tbody td[data-label]::before,
  .pro-table tbody td[data-label]::before,
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td[data-label]::before,
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: .75rem;
    top: .5rem;
    width: 40%;
    padding-right: .5rem;
    text-align: left;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--table-pro-muted, var(--text-muted));
  }

  /* Empty-state / colspan rows: no card chrome, just a centered message */
  .table-pro tbody td[colspan],
  .pro-table tbody td[colspan],
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td[colspan],
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody td[colspan] {
    padding: 1.25rem .75rem;
    text-align: center;
  }
  .table-pro tbody tr:has(td[colspan]),
  .pro-table tbody tr:has(td[colspan]),
  #pageContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:has(td[colspan]),
  #mainContent table:not(.calendar):not(.fc-scrollgrid):not([data-pro-table="off"]) tbody tr:has(td[colspan]) {
    background: transparent;
    border: 0 !important;
    box-shadow: none;
  }
}

/* ════════════════════════════════════════════════════
   MODAL DE CONFIRMATION UNIFIE (ea-confirm-*)
   Un seul style, utilise par toutes les confirmations de l'app
   (confirmAction() dans layout.html / layout_workflow.html, et
   confirmModern() dans ai-detection/page.html), via SweetAlert2
   customClass ou le fallback DOM. Ne pas dupliquer ce style ailleurs.
════════════════════════════════════════════════════ */
.ea-confirm-popup {
  background: #1b2431 !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  text-align: left !important;
  max-width: 26rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45) !important;
}
.ea-confirm-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin: 0 0 .9rem;
}
.ea-confirm-title {
  color: #f8fafc;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 .5rem;
  text-align: left;
}
.ea-confirm-text {
  color: #94a3b8;
  font-size: .85rem;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
.ea-confirm-actions {
  justify-content: flex-start !important;
  gap: .6rem;
  margin: 1.25rem 0 0 !important;
}
.ea-confirm-btn-danger,
.ea-confirm-btn-primary,
.ea-confirm-btn-cancel {
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem 1.1rem;
  border-radius: .6rem;
  border: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.ea-confirm-btn-danger { background: #ef4444; color: #fff; }
.ea-confirm-btn-danger:hover { filter: brightness(.92); }
.ea-confirm-btn-primary { background: var(--primary-600, #2563eb); color: #fff; }
.ea-confirm-btn-primary:hover { filter: brightness(.92); }
.ea-confirm-btn-cancel { background: #2a3542; color: #e2e8f0; }
.ea-confirm-btn-cancel:hover { background: #334051; }

/* ═══════════════════════════════════════════════════
   SKELETON LOADERS — etats de chargement, theme-aware.
   Usage : <div class="skeleton skeleton-text"></div>, .skeleton-title,
   .skeleton-avatar (cercle), .skeleton-card, .skeleton-row (ligne de tableau),
   ou une taille libre via style="width:...;height:...".
═══════════════════════════════════════════════════ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--border-color);
  opacity: .35;
  border-radius: .5rem;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.dark .skeleton::after,
.theme-deepblue .skeleton::after,
.theme-kimbiedark .skeleton::after,
.theme-graphite .skeleton::after,
.theme-midnight .skeleton::after,
.theme-carbon .skeleton::after,
.theme-aubergine .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
@keyframes skeletonShimmer {
  100% { transform: translateX(100%); }
}
.skeleton-text  { height: .85rem; width: 100%; border-radius: .3rem; }
.skeleton-title { height: 1.25rem; width: 40%; border-radius: .35rem; }
.skeleton-avatar{ height: 2.5rem; width: 2.5rem; border-radius: 999px; flex-shrink: 0; }
.skeleton-card  { height: 6rem; width: 100%; border-radius: 1rem; }
.skeleton-row td{ padding: .75rem 1rem; }
.skeleton-row .skeleton { height: .8rem; }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ═══════════════════════════════════════════════════
   TOASTS — notifications non-bloquantes, empilables.
   API JS : window.eaToast.success/error/warning/info(message, opts)
   Auto-declenchees depuis les attributs flash ${success}/${error}
   (voir script dans layout.html), en plus d'un appel manuel possible
   depuis n'importe quelle page.
═══════════════════════════════════════════════════ */
#eaToastContainer {
  position: fixed;
  top: 84px;
  right: 16px;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
[dir="rtl"] #eaToastContainer { right: auto; left: 16px; }
.ea-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  border-radius: .85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  font-size: .82rem;
  color: var(--text-main);
  transform: translateX(120%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.ea-toast.show { transform: translateX(0); opacity: 1; }
.ea-toast.hide { transform: translateX(120%); opacity: 0; }
[dir="rtl"] .ea-toast { transform: translateX(-120%); }
[dir="rtl"] .ea-toast.show { transform: translateX(0); }
[dir="rtl"] .ea-toast.hide { transform: translateX(-120%); }
.ea-toast .ea-toast-icon {
  flex-shrink: 0;
  width: 1.9rem; height: 1.9rem;
  border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
.ea-toast-success .ea-toast-icon { background: var(--color-success-bg); color: var(--color-success-text); }
.ea-toast-error   .ea-toast-icon { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.ea-toast-warning .ea-toast-icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ea-toast-info    .ea-toast-icon { background: var(--color-info-bg);    color: var(--color-info-text); }
.ea-toast-body { flex: 1; min-width: 0; line-height: 1.4; padding-top: .15rem; word-break: break-word; }
.ea-toast-close {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: .75rem; padding: .2rem;
  margin: -.2rem -.2rem 0 0;
}
.ea-toast-close:hover { color: var(--text-main); }
@media (max-width: 480px) {
  #eaToastContainer { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
  [dir="rtl"] #eaToastContainer { left: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════
   TOP PROGRESS BAR — feedback de navigation (voir dist/js/page-loader.js).
═══════════════════════════════════════════════════ */
#eaProgressBar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 10030;
  background: linear-gradient(90deg, var(--primary-500), #7c3aed);
  box-shadow: 0 0 8px var(--primary-400, rgba(56,189,248,.6));
  transition: width .25s ease, opacity .25s ease;
  opacity: 0;
}
#eaProgressBar.active { opacity: 1; }
#eaProgressBar.done { width: 100% !important; opacity: 0; transition: width .2s ease, opacity .4s ease .15s; }

/* ═══════════════════════════════════════════════════
   FILTRES MEMORISES — voir dist/js/remembered-filters.js
═══════════════════════════════════════════════════ */
.ea-filters-hint {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  margin-bottom: .75rem;
  border-radius: .85rem;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: .78rem;
  font-weight: 500;
}
.ea-filters-hint i.fa-clock-rotate-left { font-size: .8rem; flex-shrink: 0; }
.ea-filters-hint span { flex: 1; }
.ea-filters-hint-apply {
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
  flex-shrink: 0;
}
.ea-filters-hint-dismiss {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: inherit; opacity: .7; font-size: .75rem; padding: .2rem;
}
.ea-filters-hint-dismiss:hover { opacity: 1; }