/* ================================
   NEOGEND — Themeable Bootstrap 5
   Modes: light / dark via [data-theme]
   Couvre: navbar, cards, tables, forms,
           dropdowns, toasts, alerts,
           list-group, modals, footer
   ================================ */

@charset "UTF-8";

/* ---------- Design tokens (variables) ---------- */
:root {
  /* Light */
  --neo-bg:            #f4f6f8;
  --neo-surface:       #ffffff;
  --neo-surface-2:     #f1f3f5;
  --neo-elev:          #ffffff;
  --neo-border:        #e5e7eb;
  --neo-text:          #1f2937;
  --neo-text-muted:    #6b7280;
  --neo-heading:       #111827;

  --neo-primary:       #0d6efd;
  --neo-success:       #22c55e;
  --neo-warning:       #f59e0b;
  --neo-danger:        #ef4444;
  --neo-info:          #0ea5e9;

  --neo-nav:           #0b1223;
  --neo-nav-text:      #e6e6e6;
  --neo-nav-active:    var(--neo-primary);

  --neo-shadow:        0 6px 18px rgba(0,0,0,.08);
}

/* Dark palette — no blue-ish slabs, neutral + subtle contrasts */
html[data-theme="dark"],
body[data-theme="dark"] {
  --neo-bg:            #0d1117; /* page */
  --neo-surface:       #0f1720; /* blocs/carte */
  --neo-surface-2:     #0b1220; /* surfaces secondaires */
  --neo-elev:          #0f1720;
  --neo-border:        #1f2a37;
  --neo-text:          #e5e7eb;
  --neo-text-muted:    #9aa4b2;
  --neo-heading:       #f3f4f6;

  --neo-primary:       #3b82f6;
  --neo-success:       #22c55e;
  --neo-warning:       #f59e0b;
  --neo-danger:        #ef4444;
  --neo-info:          #38bdf8;

  --neo-nav:           #0b1223; /* garde ton header sombre cohérent */
  --neo-nav-text:      #e6e6e6;
  --neo-nav-active:    var(--neo-primary);

  --neo-shadow:        0 8px 24px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--neo-text);
  background: var(--neo-bg);
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 {
  color: var(--neo-heading);
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: .5rem;
}
a { text-decoration: none; }
p { color: var(--neo-text); }

.container, .container-fluid { max-width: 1400px; }

/* ---------- Navbar ---------- */
nav.navbar {
  background: var(--neo-nav);
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.navbar-brand { font-size: 1.05rem; letter-spacing: .2px; }
.navbar-brand i { color: var(--neo-primary); }
.navbar-nav .nav-link {
  color: var(--neo-nav-text) !important;
  transition: color .2s ease, opacity .2s ease;
  font-size: .95rem;
}
.navbar-nav .nav-link:hover { color: #fff !important; opacity: .95; }
.navbar-nav .nav-link.active { color: var(--neo-nav-active) !important; font-weight: 600; }
.nav-link.text-danger { color: #ff6464 !important; }
.nav-link.text-danger:hover { color: #ff8484 !important; }

/* Dropdown */
.dropdown-menu {
  background: var(--neo-surface);
  border: 1px solid var(--neo-border);
  box-shadow: var(--neo-shadow);
}
html[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .dropdown-menu {
  background: #0f1720;
}
.dropdown-item { color: var(--neo-text); }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(59,130,246,.12);
  color: var(--neo-heading);
}
.dropdown-item.active {
  background: rgba(59,130,246,.2) !important;
  color: var(--neo-heading) !important;
}

/* ---------- Cards / Panels ---------- */
.card {
  background: var(--neo-surface);
  border: 1px solid var(--neo-border);
  box-shadow: var(--neo-shadow);
  color: var(--neo-text);
}
.card .card-header {
  background: var(--neo-surface-2);
  border-bottom: 1px solid var(--neo-border);
  color: var(--neo-heading);
}
.card .card-footer {
  background: var(--neo-surface-2);
  border-top: 1px solid var(--neo-border);
}

/* “encarts info” sur le dashboard (remplace le bloc bleu) */
.neo-callout {
  background: var(--neo-surface);
  border: 1px dashed var(--neo-border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  color: var(--neo-text);
}

/* ---------- Tables ---------- */
.table {
  color: var(--neo-text);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--neo-border);
}
.table thead th {
  background: var(--neo-surface-2) !important;
  color: var(--neo-heading);
  border-bottom: 1px solid var(--neo-border);
}
.table tbody tr:hover { background: rgba(148,163,184,.06); }

/* ---------- Forms ---------- */
.form-control, .form-select, .form-check-input, textarea {
  background: var(--neo-surface);
  border: 1px solid var(--neo-border);
  color: var(--neo-text);
}
.form-control:focus, .form-select:focus, textarea:focus {
  background: var(--neo-surface);
  border-color: rgba(59,130,246,.6);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
  color: var(--neo-text);
}
.input-group-text { background: var(--neo-surface-2); border: 1px solid var(--neo-border); color: var(--neo-text-muted); }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--neo-primary);
  border-color: var(--neo-primary);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-primary {
  color: var(--neo-primary);
  border-color: var(--neo-primary);
}
.btn-outline-primary:hover {
  background: var(--neo-primary);
  color: #fff;
}

/* ---------- Badges ---------- */
.badge.bg-danger { background: var(--neo-danger) !important; }
.badge.bg-warning { background: var(--neo-warning) !important; color: #111827; }
.badge.bg-success { background: var(--neo-success) !important; }
.badge.bg-primary { background: var(--neo-primary) !important; }

/* ---------- Alerts ---------- */
.alert {
  border: 1px solid var(--neo-border);
  background: var(--neo-surface);
  color: var(--neo-text);
  box-shadow: var(--neo-shadow);
}
.alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); }
.alert-danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.35); }
.alert-success { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.35); }
.alert-info    { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.35); }

/* Bandeau maintenance */
.neo-maintenance {
  background: #5c4700;
  color: #fff;
}
html[data-theme="light"] .neo-maintenance { background: #f59e0b; color: #1f2937; }

/* ---------- Toasts ---------- */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1100; }
.toast {
  background: var(--neo-surface);
  color: var(--neo-text);
  border: 1px solid var(--neo-border);
  border-radius: 12px;
  box-shadow: var(--neo-shadow);
  opacity: .98;
}

/* ---------- List group ---------- */
.list-group-item {
  background: var(--neo-surface);
  color: var(--neo-text);
  border-color: var(--neo-border);
}
.list-group-item.active {
  background: rgba(59,130,246,.18);
  color: var(--neo-heading);
  border-color: rgba(59,130,246,.4);
}

/* ---------- Modal ---------- */
.modal-content {
  background: var(--neo-surface);
  color: var(--neo-text);
  border: 1px solid var(--neo-border);
  box-shadow: var(--neo-shadow);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--neo-surface);
  color: var(--neo-text-muted);
  border-top: 1px solid var(--neo-border);
}

/* ---------- Utilities ---------- */
.text-muted       { color: var(--neo-text-muted) !important; }
.border-neo       { border-color: var(--neo-border) !important; }
.bg-neo-surface   { background: var(--neo-surface) !important; }
.bg-neo-surface-2 { background: var(--neo-surface-2) !important; }

/* Tables – compact on small screens */
@media (max-width: 768px) {
  .table thead { display: none; }
  .table tbody tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--neo-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    background: var(--neo-surface);
  }
  .table tbody td {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--neo-border);
    padding: .35rem 0;
  }
  .table tbody td:last-child { border-bottom: 0; }
  .table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--neo-text-muted);
    margin-right: 1rem;
  }
}

/* Focus ring harmonisé pour tout */
*:focus-visible { outline: 2px solid rgba(59,130,246,.6); outline-offset: 2px; }

/* Smooth transitions */
body, .card, .dropdown-menu, .form-control, .form-select, .table, .list-group-item, .modal-content {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Correction de lisibilité des placeholders en mode sombre */
html[data-theme="dark"] ::placeholder,
body[data-theme="dark"] ::placeholder {
  color: rgba(230,230,230,0.8) !important;
  opacity: 1 !important; /* empêche les placeholders trop translucides */
}

/* Pour le champ de recherche en particulier */
html[data-theme="dark"] #searchInput {
  color: var(--neo-text) !important;
  background: var(--neo-surface) !important;
  border-color: var(--neo-border) !important;
}
html[data-theme="dark"] #searchInput:focus {
  border-color: var(--neo-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}

/* ==========================================================
   DASHBOARD - Adaptation au thème sombre
   ========================================================== */

/* Couleur de titre principale */
.neo-title {
  color: var(--neo-head);
}

/* Sous-texte ou texte secondaire */
.neo-subtext {
  color: var(--neo-text);
  opacity: 0.85;
}

/* Alertes d’info adaptées aux thèmes */
html[data-theme="dark"] .alert-info {
  background-color: rgba(13,110,253,.15);
  border-color: rgba(13,110,253,.25);
  color: #e6e9f0;
}

/* Pour les liens du tableau de bord */
html[data-theme="dark"] a.link-primary {
  color: #4da3ff;
}
html[data-theme="dark"] a.link-primary:hover {
  color: #70b8ff;
}

/* Boutons cohérents en mode sombre */
html[data-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255,255,255,.25);
  color: #e6e6e6;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: rgba(255,255,255,.1);
  color: #fff;
}

/* ==========================================================
   JOURNAL DES VISITES — Amélioration mode sombre
   ========================================================== */

html[data-theme="dark"] .table {
  color: #e6e6e6;
  background-color: var(--neo-surface);
  border-color: var(--neo-border);
}

html[data-theme="dark"] .table thead th {
  background-color: var(--neo-surface-2);
  color: #fff;
  border-bottom: 2px solid var(--neo-border);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
}

html[data-theme="dark"] .badge.bg-primary {
  background-color: #0d6efd !important;
  color: #fff;
}

html[data-theme="dark"] .badge.bg-secondary {
  background-color: rgba(255,255,255,0.2) !important;
  color: #fff;
}

html[data-theme="dark"] code {
  color: #ff7aa2 !important;
}

html[data-theme="dark"] .btn-outline-danger {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.5);
}
html[data-theme="dark"] .btn-outline-danger:hover {
  background-color: rgba(255,107,107,0.1);
  color: #fff;
  border-color: #ff6b6b;
}

/* ==========================================================
   Correction couleurs du tableau (logs.php)
   ========================================================== */

/* Texte général du tableau en mode sombre */
html[data-theme="dark"] table.table td,
html[data-theme="dark"] table.table th {
  color: #e8e8e8 !important;
}

/* En-têtes (Date, Utilisateur, IP...) */
html[data-theme="dark"] table.table thead th {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Corps du tableau */
html[data-theme="dark"] table.table tbody tr td {
  color: #d6d6d6 !important;
  border-color: rgba(255,255,255,0.07);
}

/* Lignes survolées */
html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
}

/* Lien ou texte tronqué dans le tableau */
html[data-theme="dark"] table.table td a,
html[data-theme="dark"] table.table td .text-muted {
  color: #bfc4cc !important;
}

/* Référent “Direct” et IP */
html[data-theme="dark"] code {
  color: #ff8fb1 !important; /* IP en rose doux */
}