/* Skip-to-content link - WCAG 2.4.1 */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000000;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  color: #fff;
}

/* Focus indicators - WCAG 2.4.11 / 2.4.13 (minimum 2px solid, high contrast) */
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important;
}
/* Dark mode focus ring */
[data-theme-version="dark"] :focus-visible {
  outline-color: #818cf8 !important;
}
[data-theme-version="dark"] a:focus-visible,
[data-theme-version="dark"] button:focus-visible,
[data-theme-version="dark"] input:focus-visible,
[data-theme-version="dark"] select:focus-visible,
[data-theme-version="dark"] textarea:focus-visible,
[data-theme-version="dark"] [tabindex]:focus-visible {
  outline-color: #818cf8 !important;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2) !important;
}

/* Espacement icônes FontAwesome - override Bootstrap mr-1 (4px trop petit) */
.mr-1, .ltr\:mr-1:where([dir="ltr"], [dir="ltr"] *) { margin-right: 0.375rem !important; }
.mr-2, .ltr\:mr-2:where([dir="ltr"], [dir="ltr"] *) { margin-right: 0.625rem !important; }

/* Utilitaires CSS Grid manquants du thème Jobick - ajoutés pour les vues admin/client */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}

/* Utilitaires manquants du thème Jobick - bordures/typo/affichage (bannières charte, cartes accent) */
.border-l-4{border-left-width:4px !important}
.opacity-90{opacity:0.9 !important}
.no-underline{text-decoration:none !important}
.leading-none{line-height:1 !important}
.flex-shrink-0{flex-shrink:0 !important}

@media (min-width:640px){
  .sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:768px){
  .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1280px){
  .xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Bouton aide contextuelle (?) - réutilisable partout */
.help-icon-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  align-self: center;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.help-icon-btn .fas,
.help-icon-btn .far {
  font-size: 14px;
  line-height: 1;
  display: block;
}
.help-icon-btn:hover { opacity: 0.7; }

/* Tooltip aide inline (?) dans les labels VoIP */
.help-tooltip-icon {
  font-weight: 400;
  color: var(--body-text);
  font-size: 0.6875rem;
  cursor: help;
}

/* Call flow diagram - noeuds interactifs */
.cf-node:hover { filter:brightness(0.88); transform:scale(1.04); }
.cf-node:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.4) !important; }
.cf-node:active { transform:scale(0.97); }
@keyframes cfPulse { 0%,100%{opacity:0.4} 50%{opacity:0.15} }
.cf-flow-row { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

/* Tablet navigation rail - masquer textes en mode menu-toggle */
.menu-toggle .dlabnav .menu-title { display: none !important; }
.menu-toggle .nav-header .brand-title { display: none !important; }

/* Responsive VoIP drawers - mobile */
@media (max-width: 767px) {
  .voip-drawer-overlay {
    top: 0 !important;
  }
  .voip-drawer-panel {
    max-width: 100vw !important;
  }
  .voip-drawer-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .voip-drawer-flex-pair {
    flex-direction: column !important;
  }
  .voip-drawer-footer {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }
  .voip-drawer-panel table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* WCAG 2.5.8 - sidebar touch targets 48px minimum */
  .dlabnav .metismenu > li > a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  .dlabnav .metismenu li ul a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Responsive tables stacked cards – mobile < 768px */
@media (max-width: 767px) {

  .table-scroll table,
  .table-scroll thead,
  .table-scroll tbody,
  .table-scroll tfoot,
  .table-scroll tr,
  .table-scroll th,
  .table-scroll td {
    display: block;
    width: 100%;
  }

  /* Thead accessible aux lecteurs d'écran, caché visuellement */
  .table-scroll thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Chaque ligne devient une carte */
  .table-scroll tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

  /* Cellules en rangées label/valeur */
  .table-scroll tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.375rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--body-text);
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-word;
  }

  .table-scroll tbody td:last-child {
    border-bottom: 0;
  }

  /* Label issu de data-label */
  .table-scroll tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 45%;
    font-weight: 600;
    color: var(--dark);
    font-size: 0.8125rem;
  }

  /* Fallback : sans data-label, pas de pseudo vide parasite */
  .table-scroll tbody td:not([data-label])::before {
    display: none;
  }

  /* Badges : conserver inline */
  .table-scroll tbody td .badge {
    white-space: nowrap;
  }

  /* Overflow scroll desactive sur mobile (remplace par stack) */
  .table-scroll {
    overflow-x: visible;
  }
}

/* ===================================================================
   AUDIT PWA 2026-07 - Corrections UX mobile / a11y
   =================================================================== */

/* Header mobile : eviter le debordement horizontal (scrollWidth > viewport ~436px vs 390px)
   .navbar-nav.header-right peut forcer une largeur superieure au viewport.
   min-width:0 permet au conteneur flex de se contracter plutot que d'elargir la page. */
@media (max-width: 575px) {
  .header .navbar-nav.header-right {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .header .navbar-nav.header-right > li {
    min-width: 0;
    flex-shrink: 1;
  }
}

/* Cibles tactiles minimales - WCAG 2.5.8 (24px) / convention iOS (44px) --
   Liens type « Voir tout », breadcrumbs, petits liens de navigation.
   Media query mobile uniquement pour ne pas modifier le desktop. */
@media (max-width: 767px) {
  /* Liens « Voir tout » et liens d'action inline */
  a.see-all,
  a[href*="voir-tout"],
  .card-header a,
  .card-footer a,
  .widget-header a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Breadcrumbs : items cliquables */
  .breadcrumb-item a,
  .breadcrumb-item + .breadcrumb-item::before {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }

  /* Petits liens du header (icones notification, profil) */
  .header-right .nav-link,
  .header-right .nav-item > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Utilitaires manquants du theme Jobick - ajoutes pour la refonte compacte
   de la fiche support-requests/show (2 colonnes flex + composteur a onglets).
   Le breakpoint 992px reprend celui deja utilise par les regles .lg\:w-* du
   theme (verifie dans style.css) pour rester coherent avec elles. */
@media (min-width: 992px) {
  .lg\:flex-row { flex-direction: row; }
}
.min-w-0 { min-width: 0px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

/* Masque le triangle natif de <summary> (WebKit/Safari) - Chrome/Firefox
   respectent deja list-style:none pose en inline sur le <summary>. */
summary::-webkit-details-marker { display: none; }

/* Layout 2 colonnes de la fiche support - classe DEDIEE auto-suffisante.
   RAISON : le bundle admin n'a pas de Tailwind JIT et la cascade du theme
   ecrasait flex-direction:row (les colonnes s'empilaient). Cette classe porte
   elle-meme le flex + les largeurs + la media query, donc zero dependance a la
   cascade Tailwind du theme. Empile sous 992px (mobile), 2 colonnes au-dessus. */
.support-split { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.support-split > .support-main,
.support-split > .support-aside { width: 100%; min-width: 0; }
@media (min-width: 992px) {
  .support-split { flex-direction: row; }
  .support-split > .support-main { width: 66.6667%; }
  .support-split > .support-aside { width: 33.3333%; }
}

/* Layout 2 colonnes du composeur de notifications (#notif-composer-2col) - meme
   raison/pattern que .support-split : classe DEDIEE auto-suffisante (bundle admin
   sans Tailwind JIT, la cascade du theme ecrase les utilitaires flex arbitraires).
   Empile sous 992px (mobile), 2 colonnes 66/34 au-dessus. */
.notif-composer { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.notif-composer > .notif-main,
.notif-composer > .notif-aside { width: 100%; min-width: 0; }
@media (min-width: 992px) {
  .notif-composer { flex-direction: row; }
  .notif-composer > .notif-main { width: 66%; }
  .notif-composer > .notif-aside { width: 34%; }
}

/* Pills de compagnies selectionnees (multi-select retirable, composeur notifications) */
.notif-company-pill { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--body-bg, #f5f5f5); border: 1px solid var(--border); border-radius: 2rem; padding: 0.25rem 0.5rem 0.25rem 0.75rem; font-size: 0.8125rem; }
.notif-company-pill button { border: none; background: none; cursor: pointer; color: #dc3545; font-weight: 700; font-size: 1rem; line-height: 1; padding: 0 2px; }