/* ═══════════════════════════════════════════════════════════════
   MKO — login-dark.css
   ───────────────────────────────────────────────────────────────
   Repeint en sombre l'ecran de connexion, dont la structure et la
   typographie viennent telles quelles de fab.css. Rien d'autre
   n'est modifie : memes classes, memes espacements, memes icones.
   Seules les couleurs changent, pour qu'on voie d'un coup d'oeil
   qu'on est sur le Workflow OS et non sur l'espace Fabricant.

   A charger APRES fab.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --wf-fond:      #0e1f2e;  /* fond de page  (--sidebar du Workflow) */
  --wf-carte:     #172c3d;  /* fond de carte                          */
  --wf-champ:     rgba(255,255,255,.07);
  --wf-bord:      rgba(255,255,255,.12);
  --wf-texte:     #ffffff;
  --wf-attenue:   rgba(255,255,255,.45);
  --wf-or:        #c8a84b;  /* --gold du Workflow                     */
  --wf-or-clair:  #e8c870;  /* --gold2                                */
}

/* ── Fond et carte ──────────────────────────────────────────── */

.login-page { background: var(--wf-fond); }

.login-card {
  background: var(--wf-carte);
  border-color: rgba(201,168,76,.2);
  border-top-color: var(--wf-or);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* ── Marque ─────────────────────────────────────────────────── */

.login-logo .brand-name { color: var(--wf-texte); }
.login-logo .brand-sub  { color: var(--wf-or); }

/* ── Libelles et champs ─────────────────────────────────────── */

.login-card .form-label { color: var(--wf-attenue); }

.login-card .form-control {
  background: var(--wf-champ);
  border-color: var(--wf-bord);
  color: var(--wf-texte);
}
.login-card .form-control::placeholder { color: rgba(255,255,255,.25); }
.login-card .form-control:focus {
  border-color: rgba(201,168,76,.55);
  background: rgba(201,168,76,.06);
  box-shadow: none;
}

.login-card .input-toggle { color: var(--wf-attenue); }
.login-card .input-toggle:hover { color: var(--wf-or); }

/* ── Bouton principal ───────────────────────────────────────── */

.login-card .btn-primary-full {
  background: linear-gradient(135deg, var(--wf-or), var(--wf-or-clair));
  border-color: transparent;
  color: #0e1f2e;
}
.login-card .btn-primary-full:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--wf-or-clair), var(--wf-or));
  color: #0e1f2e;
}
.login-card .btn-primary-full:disabled { opacity: .6; }

/* ── Liens et bas de carte ──────────────────────────────────── */

.login-card .text-muted { color: var(--wf-attenue); }
.login-card a.text-muted:hover { color: var(--wf-or); }
.login-card .login-divider { border-top-color: rgba(255,255,255,.1); }

/* ── Message d'erreur ───────────────────────────────────────── */

.login-card .alert-danger {
  background: rgba(192,57,43,.15);
  border: 1px solid rgba(192,57,43,.3);
  border-left: 3px solid #c0392b;
  color: #e57373;
}

/* ── Modale mot de passe oublie ─────────────────────────────── */

#forgot-modal .modal {
  background: var(--wf-carte);
  border: 1px solid rgba(201,168,76,.2);
  color: var(--wf-texte);
}
#forgot-modal .modal-title { color: var(--wf-texte); }
#forgot-modal .modal-body  { color: var(--wf-attenue); }
#forgot-modal .form-control {
  background: var(--wf-champ);
  border-color: var(--wf-bord);
  color: var(--wf-texte);
}
#forgot-modal .form-control::placeholder { color: rgba(255,255,255,.25); }
#forgot-modal .btn-ghost { color: var(--wf-attenue); }
#forgot-modal .btn-ghost:hover { color: var(--wf-texte); }
#forgot-modal .btn-primary {
  background: var(--wf-or);
  border-color: transparent;
  color: #0e1f2e;
}