/* ═══════════════════════════════════════════════════════════════════════
   TrackPro — theme-light.css
   Thème clair « app GPS » — palette teal brand #0d95b8 / #0a7899
   À charger APRÈS Tailwind et après le CSS de _head.php.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tp-bg:        #F4F5F7;
  --tp-card:      #FFFFFF;
  --tp-card-2:    #F8F9FB;
  --tp-border:    #EDEFF2;
  --tp-border-2:  #E5E8EC;
  --tp-blue:      #0d95b8;   /* teal principal (nav, boutons, liens) */
  --tp-blue-deep: #0a7899;   /* teal foncé (hover) */
  --tp-text:      #1A1D26;
  --tp-text-2:    #5F6673;
  --tp-text-3:    #8A919F;
  --tp-text-4:    #B0B6C0;
  --tp-green:     #16a34a;   /* vert sémantique (online, success) */
  --tp-red:       #DC2626;
  --tp-yellow:    #D97706;
}

/* ── 1. Fondations ─────────────────────────────────────────────────────── */
html, body { background: var(--tp-bg) !important; color: var(--tp-text); }

.bg-track-bg                       { background-color: var(--tp-bg) !important; }
.bg-track-card                     { background-color: var(--tp-card) !important; }
.bg-track-card2,
.bg-track-card2\/50                { background-color: var(--tp-card-2) !important; }
.border-track-border,
.border-track-border\/40,
.border-track-border\/60           { border-color: var(--tp-border) !important; }
.border-track-card                 { border-color: var(--tp-card) !important; }
.divide-track-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--tp-border) !important; }

.bg-white\/2                       { background-color: var(--tp-card-2) !important; }
.hover\:bg-white\/2:hover          { background-color: #F6F8FB !important; }
.bg-black\/60                      { background-color: rgba(15, 23, 42, .45) !important; }

/* ── 2. Texte ──────────────────────────────────────────────────────────── */
.text-white        { color: var(--tp-text) !important; }
.hover\:text-white:hover { color: var(--tp-text) !important; }
.text-slate-300    { color: var(--tp-text-2) !important; }
.text-slate-400    { color: var(--tp-text-2) !important; }
.text-slate-500    { color: var(--tp-text-3) !important; }
.text-slate-600    { color: #9AA1AD !important; }
.text-slate-700    { color: var(--tp-text-4) !important; }
.hover\:text-slate-300:hover { color: var(--tp-text) !important; }
.placeholder-slate-600::placeholder { color: var(--tp-text-4) !important; }

/* ── 3. Emerald → Teal brand (accents de marque, liens, prix, actifs) ─── */
.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-emerald-400\/70              { color: var(--tp-blue) !important; }
.hover\:text-emerald-300:hover     { color: var(--tp-blue-deep) !important; }
.bg-emerald-400,
.bg-emerald-500                    { background-color: var(--tp-blue) !important; }
.bg-emerald-500\/5                 { background-color: rgba(13, 149, 184, .05) !important; }
.bg-emerald-500\/10                { background-color: rgba(13, 149, 184, .08) !important; }
.bg-emerald-500\/15                { background-color: rgba(13, 149, 184, .10) !important; }
.bg-emerald-500\/20                { background-color: rgba(13, 149, 184, .12) !important; }
.bg-emerald-500\/70                { background-color: rgba(13, 149, 184, .70) !important; }
.hover\:bg-emerald-500\/20:hover   { background-color: rgba(13, 149, 184, .14) !important; }
.hover\:bg-emerald-600:hover       { background-color: var(--tp-blue-deep) !important; }
.border-emerald-500                { border-color: var(--tp-blue) !important; }
.border-emerald-500\/20            { border-color: rgba(13, 149, 184, .25) !important; }
.border-emerald-500\/30            { border-color: rgba(13, 149, 184, .30) !important; }
.border-emerald-500\/40            { border-color: rgba(13, 149, 184, .40) !important; }
.hover\:border-emerald-500\/30:hover,
.hover\:border-emerald-500\/40:hover { border-color: rgba(13, 149, 184, .45) !important; }
.focus\:border-emerald-500\/50:focus { border-color: var(--tp-blue) !important; }
.has-\[\:checked\]\:border-emerald-500:has(:checked)     { border-color: var(--tp-blue) !important; }
.has-\[\:checked\]\:border-emerald-500\/50:has(:checked) { border-color: rgba(13, 149, 184, .55) !important; }
.has-\[\:checked\]\:bg-emerald-500\/5:has(:checked)      { background-color: rgba(13, 149, 184, .06) !important; }
.accent-emerald-500                { accent-color: var(--tp-blue) !important; }

/* ── 4. Couleurs sémantiques (contraste sur fond clair) ────────────────── */
.text-red-300, .text-red-400       { color: var(--tp-red) !important; }
.hover\:text-red-400:hover         { color: var(--tp-red) !important; }
.bg-red-500\/8, .bg-red-500\/10    { background-color: rgba(239, 68, 68, .07) !important; }
.bg-red-500\/15, .bg-red-500\/20   { background-color: rgba(239, 68, 68, .12) !important; }
.hover\:bg-red-500\/20:hover       { background-color: rgba(239, 68, 68, .14) !important; }
.border-red-500\/20                { border-color: rgba(239, 68, 68, .25) !important; }
.border-red-500\/30                { border-color: rgba(239, 68, 68, .35) !important; }

.text-yellow-300, .text-yellow-400,
.text-amber-400                    { color: var(--tp-yellow) !important; }
.bg-yellow-500\/5, .bg-yellow-500\/10 { background-color: rgba(245, 158, 11, .09) !important; }
.bg-yellow-500\/15, .bg-yellow-500\/20 { background-color: rgba(245, 158, 11, .14) !important; }
.border-yellow-500\/20             { border-color: rgba(245, 158, 11, .30) !important; }
.border-yellow-500\/30             { border-color: rgba(245, 158, 11, .40) !important; }

/* vert sémantique : statuts online/success — reste vert distinct du teal */
.text-green-400                    { color: var(--tp-green) !important; }
.bg-green-500\/10                  { background-color: rgba(22, 163, 74, .09) !important; }
.hover\:bg-green-500\/20:hover     { background-color: rgba(22, 163, 74, .14) !important; }
.border-green-500\/20              { border-color: rgba(22, 163, 74, .28) !important; }
.hover\:border-green-500\/40:hover { border-color: rgba(22, 163, 74, .45) !important; }

.text-blue-400                     { color: #2563EB !important; }
.bg-blue-500\/10                   { background-color: rgba(59, 130, 246, .09) !important; }
.hover\:bg-blue-500\/20:hover      { background-color: rgba(59, 130, 246, .14) !important; }
.border-blue-500\/20               { border-color: rgba(59, 130, 246, .28) !important; }
.hover\:border-blue-500\/40:hover  { border-color: rgba(59, 130, 246, .45) !important; }

.text-purple-400                   { color: #7C3AED !important; }
.bg-purple-500\/10                 { background-color: rgba(139, 92, 246, .09) !important; }
.hover\:border-purple-500\/50:hover{ border-color: rgba(139, 92, 246, .45) !important; }

.text-cyan-500                     { color: #0891B2 !important; }
.bg-slate-500\/20                  { background-color: rgba(100, 116, 139, .12) !important; }

/* ── 5. Composants partagés (_head.php) ────────────────────────────────── */
.card {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .04) !important;
}

.btn-primary {
  background: var(--tp-blue) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 8px rgba(13, 149, 184, .28) !important;
}
.btn-primary:hover { background: var(--tp-blue-deep) !important; box-shadow: 0 4px 14px rgba(13, 149, 184, .38) !important; }
.btn-primary * { color: #fff !important; }

.btn-secondary {
  background: var(--tp-card) !important;
  color: var(--tp-text-2) !important;
  border: 1px solid var(--tp-border-2) !important;
}
.btn-secondary:hover { background: var(--tp-card-2) !important; color: var(--tp-text) !important; border-color: var(--tp-blue) !important; }

.btn-danger {
  background: rgba(239, 68, 68, .08) !important;
  color: var(--tp-red) !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
}
.btn-danger:hover { background: rgba(239, 68, 68, .14) !important; }

.input-dark, .input-field {
  background: #FFFFFF !important;
  border: 1px solid #C8CDD6 !important;
  color: var(--tp-text) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.04) !important;
}
.input-dark:hover, .input-field:hover {
  border-color: #A8B0BC !important;
}
.input-dark::placeholder, .input-field::placeholder { color: var(--tp-text-4) !important; }
.input-dark:focus, .input-field:focus {
  border-color: var(--tp-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(13, 149, 184, .12) !important;
  outline: none !important;
}
select.input-dark, select.input-field { color: var(--tp-text) !important; }
select.input-dark option, select.input-field option { background: #fff; color: var(--tp-text); }

.label-text { color: var(--tp-text-2) !important; }

.modal-box {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .18) !important;
}
.modal-backdrop { background: rgba(15, 23, 42, .40) !important; }

.table-row:hover { background: var(--tp-card-2) !important; }
thead tr { background: #FAFBFC !important; }

/* ── 6. Navigation ─────────────────────────────────────────────────────── */
nav .active, aside .active { color: var(--tp-blue) !important; }

/* Sidebar active link */
.sidebar-desktop .sidebar-link.active,
.sidebar-link.bg-emerald-500\/10 { background-color: rgba(13, 149, 184, .08) !important; }

/* ── 7. Scrollbars & sélection ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D7DBE1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--tp-blue); }
::selection { background: rgba(13, 149, 184, .18); }

/* ── 8. Leaflet (popups clairs) ────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: #fff !important;
  color: var(--tp-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .14) !important;
}
.leaflet-popup-tip { background: #fff !important; }
.leaflet-container { background: #E8EAED !important; font-family: inherit; }
.leaflet-bar a {
  background: #fff !important; color: var(--tp-text-2) !important;
  border-color: var(--tp-border) !important;
}

/* ── 9. Toast ───────────────────────────────────────────────────────────── */
.toast {
  background: var(--tp-card) !important;
  border-color: var(--tp-border) !important;
  color: var(--tp-text) !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .14) !important;
}

/* ── 10. Stat cards ─────────────────────────────────────────────────────── */
.stat-card {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
}

/* ── 11. Badge default ──────────────────────────────────────────────────── */
.badge-default {
  background: var(--tp-card-2) !important;
  border-color: var(--tp-border) !important;
  color: var(--tp-text-2) !important;
}

/* ── 12. Gradient de marque ─────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #09506a, #0d95b8, #00c8e0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.glow-green    { box-shadow: 0 0 20px rgba(13, 149, 184, .25) !important; }
.glow-green-sm { box-shadow: 0 4px 12px rgba(13, 149, 184, .30) !important; }