/* Fondata — design system (langage visuel SpoNGE). Aucune couleur en dur hors :root. */
:root {
  --nge-primary:        #002C77;
  --nge-secondary:      #f6be00;
  --nge-fond:           #5580A4;
  --nge-primary-light:  rgba(0,44,119,0.08);
  --nge-primary-dark:   #001a4d;
  --nge-secondary-light:rgba(246,190,0,0.12);

  --gray-50:#f5f6f8; --gray-100:#eef0f4; --gray-200:#d0d6df;
  --gray-300:#b8c1cf; --gray-400:#7a90a8; --gray-500:#3a5068;
  --gray-600:#2c3e50; --gray-700:#1c2d3f; --gray-800:#0d1b2a; --gray-900:#0a1628;
  --white:#ffffff;

  /* ── Couleurs d'état — SOURCE DE VÉRITÉ ────────────────────────────────────────
     Nommées par l'intention (danger, succès…) et non par la teinte : un nom comme
     --red-500 fige la couleur et empêche de la faire évoluer sans tout renommer.

     Deux palettes avaient cohabité : --red/green/orange-500 côté socle, et des valeurs
     de type Tailwind côté sponge. Unifiées ici, en retenant pour chaque famille la
     valeur au MEILLEUR CONTRASTE sur fond blanc (WCAG, calculé) :

        danger   #cc2222  5.50  (socle ; l'autre candidat #ef4444 tombait à 3.76)
        success  #1a9e52  3.47  (socle ; #16a34a valait 3.30)
        warning  #ea580c  3.56  (sponge ; #e07a00 valait 3.02, sous le seuil)
        info     #2563eb  5.17  (seul candidat)

     LIMITE CONNUE : success et warning restent sous 4.5, le seuil AA du texte normal.
     Ils conviennent pour du grand texte, des icônes ou des pastilles, PAS pour du
     petit texte sur fond blanc. Corriger cela suppose d'assombrir les teintes —
     décision de charte graphique, à prendre séparément. */
  --danger:             #cc2222;
  --success:            #1a9e52;
  --warning:            #ea580c;
  --info:               #2563eb;

  --success-bg:         rgba(26,158,82,0.15);    /* --success à 15 % */
  --info-soft-bg:       #e0f2fe;
  --info-soft-fg:       #0369a1;

  /* États survolés des couleurs de marque, jusqu'ici écrits en dur. */
  --nge-primary-hover:  #003494;
  --nge-secondary-hover:#d4a200;

  --shadow-sm: 0 1px 2px 0 rgba(0,44,119,0.06);
  --shadow:    0 1px 3px 0 rgba(0,44,119,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,44,119,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,44,119,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);

  --radius:6px; --radius-lg:8px; --transition: all 0.15s ease;
  --bg: var(--gray-50); --border: var(--gray-200); --text: var(--gray-800); --text-muted: var(--gray-400);
  --sidebar-width: 220px;
  --font: 'IBM Plex Sans', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Boutons ───────────────────────────────────────── */
.btn {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: var(--transition); line-height: 1;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--nge-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--nge-primary-dark); }
.btn-accent  { background: var(--nge-secondary); color: var(--nge-primary-dark); }
.btn-ghost   { background: transparent; color: var(--gray-500); border-color: var(--gray-200); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-block   { width: 100%; }

/* ── Champs de formulaire ──────────────────────────── */
.form-control {
  width: 100%; font-family: var(--font); font-size: 13px;
  padding: 10px 12px; border: 1px solid var(--gray-200);
  border-radius: var(--radius); background: var(--gray-100); color: var(--text);
  transition: var(--transition);
}
.form-control:focus { outline: none; border-color: var(--nge-fond); background: #fff; }
.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--gray-400);
}

/* ── Page de connexion (neutre) ────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--nge-primary-light), transparent),
    var(--gray-50);
}
.login-card {
  width: 100%; max-width: 360px; background: #fff;
  border: 1px solid var(--gray-200); border-top: 3px solid var(--nge-secondary);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 28px 26px;
}
.login-card h1 { /* "Connexion" — neutre, pas de marque */
  margin: 0 0 20px; font-size: 16px; font-weight: 700;
  color: var(--nge-primary); text-align: center; letter-spacing: .3px;
}
.login-error {
  display: none; margin-bottom: 14px; padding: 9px 12px;
  background: rgba(204,34,34,.08); border: 1px solid rgba(204,34,34,.25);
  border-radius: var(--radius); color: var(--danger); font-size: 12px;
}
.login-error.show { display: block; }

/* ── Layout application (post-login) ───────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-width); min-width: var(--sidebar-width);
  background: #fff; display: flex; flex-direction: column;
  border-right: 3px solid var(--nge-secondary);
  box-shadow: 2px 0 8px rgba(0,44,119,.07);
}
.sidebar-logo { padding: 16px 18px 14px; border-bottom: 1px solid rgba(0,44,119,.1); }
.sidebar-logo .brand { font-size: 18px; font-weight: 700; }
.sidebar-logo .brand .p1 { color: var(--nge-primary); }
.sidebar-logo .brand .p2 { color: var(--nge-secondary); }
.sidebar-logo .sub { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(0,44,119,.45); }
.sidebar nav { padding: 8px 0; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 9px; margin: 1px 10px; padding: 9px 12px;
  font-size: 13px; color: var(--gray-600); cursor: pointer; transition: var(--transition);
  border-radius: 8px;
}
.nav-item:hover { background: var(--gray-100); color: var(--nge-primary); }
.nav-item.active { background: var(--nge-primary); color: #fff; font-weight: 600; box-shadow: var(--shadow-sm); }
.nav-item.active .badge { background: rgba(255,255,255,.22); color: #fff; }
.sidebar-footer { margin-top: auto; padding: 12px 18px; border-top: 1px solid rgba(0,44,119,.1); display: flex; align-items: center; gap: 6px; }
.sidebar-footer a { font-size: 10px; color: var(--gray-400); text-decoration: none; }
.sidebar-footer .ver { font-size: 9px; color: var(--gray-300); }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar {
  height: 52px; min-height: 52px; background: #fff; border-bottom: 2px solid var(--nge-secondary);
  display: flex; align-items: center; padding: 0 18px; gap: 12px;
}
.topbar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--nge-primary); }
.topbar-spacer { flex: 1; }
.topbar-user { font-size: 12px; color: var(--gray-500); }
.page { flex: 1; overflow-y: auto; padding: 20px; }

/* ── Composants de base ────────────────────────────── */
.section-title {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gray-600); border-bottom: 2px solid var(--nge-secondary); padding-bottom: 6px;
}
.section-title::before { content: '■'; color: var(--nge-secondary); font-size: 10px; }
.section-tile {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}

/* ── Tableaux de données ───────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table thead th {
  background: var(--gray-100); color: var(--gray-400);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  text-align: left; padding: 9px 12px; white-space: nowrap;
  border-bottom: 2px solid var(--gray-200);
}
.data-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--gray-100); color: var(--text); white-space: nowrap; }
.data-table tbody tr:hover { background: var(--gray-50); }
.data-table .row-actions { display: flex; gap: 6px; }

/* ── Badges ────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.badge-ok   { background: rgba(26,158,82,.12); color: var(--success); }
.badge-no   { background: rgba(204,34,34,.10); color: var(--danger); }
.badge-role { background: var(--nge-primary-light); color: var(--nge-primary); }

/* ── Modale (header marine) ────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,20,60,.45); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius-lg); max-width: 480px; width: 100%;
  max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.modal-header {
  background: var(--nge-primary); color: #fff; padding: 13px 18px;
  display: flex; align-items: center; gap: 10px;
}
.modal-header h3 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
.modal-header .close { background: none; border: none; color: rgba(255,255,255,.75); font-size: 18px; cursor: pointer; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-footer { padding: 12px 18px; border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Responsive (mobile / tablette) ────────────────── */
.sidebar-toggle {
  display: none; background: none; border: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--nge-primary); padding: 4px 8px 4px 0; margin-right: 2px;
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,20,60,.35); z-index: 1000; }
.sidebar-backdrop.show { display: block; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-toggle { display: inline-block; }
  .main { width: 100%; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-user { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { padding: 14px; }
  /* Empile les colonnes (explorer DB, lignes de champs) */
  .db-layout { flex-wrap: wrap; }
  .db-layout .db-list { width: 100% !important; }
  .row-wrap { flex-wrap: wrap; }
  .row-wrap > * { min-width: 0; }
}

/* Petits écrans : champs/filtres en pleine largeur empilés */
@media (max-width: 600px) {
  .row-wrap { flex-direction: column; gap: 8px; }
  .row-wrap > * { width: 100%; flex: 1 1 auto !important; }
  .modal { max-width: 96vw; width: 96vw; }
}

/* ── Toasts ────────────────────────────────────────── */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: 90vw; }
.toast {
  min-width: 220px; max-width: 360px; padding: 11px 14px; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-md); font-size: 13px; color: var(--text);
  border-left: 3px solid var(--gray-400); animation: toast-in .15s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.info    { border-left-color: var(--nge-fond); }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ── Survols utilitaires ───────────────────────────────
   Remplacent les onmouseover/onmouseout inline (40 handlers supprimés le 2026-08-09).
   !important est NÉCESSAIRE : les éléments porteurs déclarent leurs styles de base en
   inline (style="border:1px solid …"), qu'une règle :hover ordinaire ne peut pas battre.
   Portée volontairement minuscule : une propriété par classe, uniquement au survol. */
.hov-bg:hover        { background: var(--gray-50) !important; }
.hov-shadow:hover    { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }
.hov-shadow-sm:hover { box-shadow: var(--shadow-sm) !important; }
.hov-border:hover    { border-color: var(--nge-primary) !important; }
.hov-border-bg:hover { border-color: var(--nge-primary) !important; background: rgba(0,44,119,0.03) !important; }
.hov-slide:hover     { transform: translateX(2px) !important; }
.hov-orange:hover    { background: rgba(249,115,22,0.12) !important; }