/**
 * Interrupteur segmenté A/E (Admin / Employé) du tableau de bord.
 * HTML : pages/dashboard.php → #dashboard-switch-admin-employe.
 *
 * Le pseudo-élément ::before sert d'indicateur glissant derrière le bouton actif :
 * il occupe la moitié gauche par défaut (« A ») et translate à droite quand
 * .dashboard-switch--admin-employe[data-mode="employe"] (ou que le 2e bouton porte .active).
 */

#dashboard-screen .dashboard-switch.dashboard-switch--admin-employe {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef0f4 0%, #e3e6ec 100%);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.08);
  user-select: none;
  isolation: isolate;
}

/* Indicateur glissant (pilule blanche derrière le bouton actif). */
#dashboard-screen .dashboard-switch.dashboard-switch--admin-employe::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Pousse l'indicateur sur la 2e moitié quand le bouton « E » est actif. */
#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe:has(
    .dashboard-switch-btn[data-value='employe'].active
  )::before {
  transform: translateX(100%);
}

/* Boutons : largeur identique, texte centré, bordure invisible (le segment vit dans ::before). */
#dashboard-screen .dashboard-switch.dashboard-switch--admin-employe .dashboard-switch-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 28px;
  margin: 0;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 180ms ease, transform 120ms ease;
}

#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn:hover {
  color: #1f2937;
}

#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn:active {
  transform: scale(0.96);
}

#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn.active {
  color: #111827;
}

/* Accessibilité clavier : focus visible bien net. */
#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Lettre dorée (gold) quand le bouton est sélectionné (A ou E). */
#dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn.active {
  color: #b8860b;
  background: linear-gradient(180deg, #f6d97a 0%, #d4a017 55%, #a8740a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Thème nuit (bg sombre du conteneur). */
#app-container.app-theme-night
  #dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
#app-container.app-theme-night
  #dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe::before {
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
#app-container.app-theme-night
  #dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn {
  color: #cbd5e1;
}
#app-container.app-theme-night
  #dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn:hover {
  color: #f1f5f9;
}
#app-container.app-theme-night
  #dashboard-screen
  .dashboard-switch.dashboard-switch--admin-employe
  .dashboard-switch-btn.active {
  background: linear-gradient(180deg, #ffe89a 0%, #d4a017 55%, #a8740a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tailles compactes / larges héritées de device-adaptive.css restent utiles ;
   on ré-aplatit ici pour garder la pilule cohérente quel que soit le viewport. */
@container app (min-width: 600px) {
  #dashboard-screen
    .dashboard-switch.dashboard-switch--admin-employe
    .dashboard-switch-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
  }
}

/* Sur les très petits écrans, on évite de manger la salutation. */
@container app (max-width: 359px) {
  #dashboard-screen
    .dashboard-switch.dashboard-switch--admin-employe
    .dashboard-switch-btn {
    padding: 4px 9px;
    font-size: 0.68rem;
  }
}