/* Winner Pointage — Chaleur d'Afrique Design System */
:root, [data-theme="terracotta"] {
  --bg-dark: #181310;
  --bg-card: rgba(36, 28, 23, 0.88);
  --bg-card-hover: rgba(48, 38, 31, 0.92);
  --bg-card-elevated: rgba(58, 45, 37, 0.95);
  --border-subtle: rgba(245, 158, 11, 0.15);
  --border-accent: rgba(234, 88, 12, 0.35);
  
  --color-green: #10B981;
  --color-green-glow: rgba(16, 185, 129, 0.25);
  --color-gold: #F59E0B;
  --color-gold-glow: rgba(245, 158, 11, 0.3);
  --color-orange: #EA580C;
  --color-steel: #2A2019;
  --color-offwhite: #FFFBF5;
  --color-muted: #D5C4B5;
  --color-red: #F43F5E;
  --color-cyan: #06B6D4;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Theme 2: Savane & Émeraude */
[data-theme="safari"] {
  --bg-dark: #0D1612;
  --bg-card: rgba(20, 34, 28, 0.88);
  --bg-card-hover: rgba(28, 45, 38, 0.92);
  --bg-card-elevated: rgba(35, 57, 48, 0.95);
  --border-subtle: rgba(16, 185, 129, 0.18);
  --border-accent: rgba(245, 158, 11, 0.4);
  
  --color-green: #10B981;
  --color-green-glow: rgba(16, 185, 129, 0.35);
  --color-gold: #EAB308;
  --color-gold-glow: rgba(234, 179, 8, 0.3);
  --color-orange: #F97316;
  --color-steel: #182B22;
  --color-offwhite: #F2FAF5;
  --color-muted: #A8C4B5;
  --color-red: #EF4444;
  --color-cyan: #0EA5E9;
}

/* Theme 3: Soleil d'Ivoire — Mode Clair Chaleureux */
[data-theme="light-warm"] {
  --bg-dark: #FDF8F2;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: rgba(255, 244, 229, 0.95);
  --bg-card-elevated: #FFF4E5;
  --border-subtle: rgba(217, 119, 6, 0.2);
  --border-accent: rgba(234, 88, 12, 0.4);
  
  --color-green: #059669;
  --color-green-glow: rgba(5, 150, 105, 0.2);
  --color-gold: #D97706;
  --color-gold-glow: rgba(217, 119, 6, 0.2);
  --color-orange: #C2410C;
  --color-steel: #F5E8D8;
  --color-offwhite: #292524;
  --color-muted: #78716C;
  --color-red: #DC2626;
  --color-cyan: #0284C7;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-dark);
  color: var(--color-offwhite);
  font-family: var(--font-sans);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* SVG Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
}

/* Typography Classes */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

/* Glassmorphism & Depth */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.35);
}

.glass-panel-elevated {
  background: var(--bg-card-elevated);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-accent);
  border-radius: 1.75rem;
  box-shadow: 0 20px 45px -15px rgba(245, 158, 11, 0.15);
}

.glass-pill {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Warm Glows */
.glow-amber {
  box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.4);
}

.glow-green {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.4);
}

.glow-green-sm {
  box-shadow: 0 0 12px 0 rgba(16, 185, 129, 0.3);
}

.glow-orange {
  box-shadow: 0 0 25px -5px rgba(234, 88, 12, 0.4);
}

.glow-red {
  box-shadow: 0 0 25px -5px rgba(244, 63, 94, 0.4);
}

/* Animations & Transitions */
.magnetic-btn {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px -5px rgba(245, 158, 11, 0.45);
}

.interactive-card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.interactive-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 15px 35px -10px rgba(234, 88, 12, 0.25);
}

/* Radar & Scanner Pulse */
@keyframes radar-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-line {
  animation: radar-sweep 4s linear infinite;
  transform-origin: center center;
}

@keyframes scan-beam {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 100%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

.scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  box-shadow: 0 0 15px var(--color-gold);
  animation: scan-beam 2.5s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.pulse-ring {
  animation: pulse-ring 2s ease-in-out infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--border-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* Badge Styles */
.badge-verified {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-alert {
  background: rgba(245, 158, 11, 0.18);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-danger {
  background: rgba(244, 63, 94, 0.15);
  color: #F43F5E;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.badge-info {
  background: rgba(6, 182, 212, 0.15);
  color: #06B6D4;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

/* Facial Recognition Scanner Laser */
@keyframes scan-laser {
  0% { top: 6%; opacity: 0.3; }
  50% { top: 88%; opacity: 1; }
  100% { top: 6%; opacity: 0.3; }
}

.animate-scan-laser {
  animation: scan-laser 1.8s ease-in-out infinite;
}

/* ==========================================================================
   Responsivité des barres d'onglets et des en-têtes de tableau de bord

   Les barres d'onglets sont en `flex ... overflow-x-auto`, mais leurs boutons
   n'avaient aucune contrainte de rétrécissement. Flexbox les compressait donc
   sous leur largeur de contenu au lieu de laisser le conteneur défiler, et le
   texte se cassait en plein mot (« Sécurité & Faux GPS » devenait « urité aux
   PS »). On interdit le rétrécissement et le retour à la ligne : la barre
   défile horizontalement, comme prévu.
   ========================================================================== */

.subtab-btn,
.emp-subtab-btn,
.saas-subtab-btn,
.cal-filter-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Barre d'onglets défilante : masque la barre de défilement sur mobile tout en
   conservant le geste tactile, et suggère la suite par un léger dégradé. */
.tab-strip {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-strip::-webkit-scrollbar {
  display: none;
}

/* Un enfant flex a `min-width: auto` par défaut : il refuse de se réduire
   sous la largeur de son contenu, ce qui faisait déborder tout l'en-tête du
   Cockpit hors de l'écran. */
.header-shrink {
  min-width: 0;
}

/* Aucun contenu ne doit provoquer de défilement horizontal de la page. */
@media (max-width: 640px) {
  #view-dashboard select,
  #view-employee select,
  #view-saas select {
    max-width: 100%;
  }

  .view-section {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Touch momentum horizontal scrolling for all table containers */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}