/* Thème vibrant et harmonieux (vert, noir, rose, bleu) */
:root{
  --brand:#0ea5e9;           /* Bleu ciel vif */
  --brand-2:#6366f1;         /* Indigo */
  --accent:#ec4899;          /* Rose */
  --success:#10b981;         /* Vert */
  --bg:#0b0f14;              /* Noir bleuté pour meilleur contraste */
  --surface:#0f172a;         /* Surface sombre */
  --text:#e5e7eb;            /* Texte clair */
  --muted:#9ca3af;           /* Texte secondaire */
  --card:#111827;            /* Cartes */
  --border:#1f2937;          /* Bordures */
}
html,body{background:linear-gradient(180deg, #0b0f14 0%, #0f172a 60%, #111827 100%); color:var(--text);} 
.container{max-width:1120px;margin:0 auto;padding:16px}

/* Navbar */
/* Navbar dégradé bleu → indigo → rose, lueur verte au hover */
.navbar{background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent)) !important;background-size:300% 300%;animation:navbarGradient 14s ease infinite;box-shadow:0 8px 24px rgba(99,102,241,.25)}
.navbar{position:relative;z-index:1000}
.navbar .navbar-menu{position:relative;z-index:1001;pointer-events:auto}
.navbar .navbar-brand{position:relative;z-index:1001}
.hero-image-section,.hero-image-container,.hero-overlay{position:relative;z-index:0}
.navbar .navbar-link{display:inline-flex;align-items:center;gap:10px;padding:14px 16px;color:#ffffff !important;text-decoration:none;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.35);border-radius:10px}
.navbar .navbar-link:hover{color:#d1fae5 !important}
.navbar .navbar-link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:rgba(255,255,255,.9);border-radius:2px;transform:scaleX(0);opacity:.0;transition:transform .25s,opacity .25s}
.navbar .navbar-link:hover::after,.navbar .navbar-link-active::after{transform:scaleX(1);opacity:1}
.navbar .navbar-user{display:flex;align-items:center;gap:8px;color:#fff}

/* Effet "magique" lueur douce au survol */
.navbar .navbar-link:hover{filter:drop-shadow(0 0 8px rgba(16,185,129,.45))}

@keyframes navbarGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Cards */
.card{background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.86));border:1px solid var(--border);border-radius:14px;padding:16px}
.card-title{font-weight:700;margin-bottom:8px}

/* Buttons (grands cibles tactiles) */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;border:1px solid transparent;padding:14px 18px;font-weight:700;cursor:pointer;min-height:48px;min-width:48px}
.btn-primary{background:linear-gradient(135deg,var(--success),var(--brand));color:#0b0f14}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:#0b1220;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:rgba(13,110,253,.08)}

/* Boutons de navigation flottants (si utilisés) */
.fab{position:fixed;right:16px;bottom:16px;background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff;border-radius:9999px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.35)}

/* Sections */
.section-header{display:flex;align-items:end;justify-content:space-between;margin:12px 0}
.section-sub{color:var(--muted);font-size:14px}

/* Tables */
table.table{background:#0b1220;border-radius:12px;overflow:hidden;color:var(--text)}
table.table th{background:#111827;color:#e5e7eb}
table.table td, table.table th{border-color:var(--border)}

/* Utilities */
.shadow{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.rounded{border-radius:12px}
.muted{color:var(--muted)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* Actions circulaires (home/index) */
.circle-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:18px;align-items:center}
.circle-action{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none}
.circle-action .icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;box-shadow:0 8px 24px rgba(0,0,0,.22);background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.circle-action .label{font-weight:600;color:var(--text)}
.circle-action:hover .icon{filter:brightness(1.08)}

/* Typographie responsive */
@media (max-width: 480px){
  .navbar{background:#0b1220 !important}
  .navbar .navbar-link{padding:12px 12px;color:#ffffff !important}
  .btn{padding:12px 16px;min-height:44px}
}

/* Styles pour les détails de l'agent */
.agent-details {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.agent-details .detail-item {
  margin-bottom: 12px;
  line-height: 1.5;
  color: #000000;
}

/* Styles pour les valeurs du tableau de bord */
.metric-value {
  color: #000000 !important; /* Noir pour une meilleure lisibilité */
  font-weight: 700;
}

.metric-label {
  color: #4b5563 !important; /* Gris foncé pour le label */
  font-size: 0.9rem;
}

.agent-details strong {
  color: #1f2937; /* Couleur foncée pour les labels */
  display: inline-block;
  min-width: 120px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.agent-details span {
  color: #1f2937; /* Couleur foncée pour les valeurs */
  margin-left: 8px;
  font-weight: 500;
}

/* Utilitaires contraste */
.on-dark{color:#f9fafb !important}
.on-light{color:#111827 !important}

@media (min-width: 900px){
  .container{max-width:1280px}
}