/* assets/css/styles.css — v1.1 LMRA CRM
   Thème sombre, sobre, responsive. */

/* Variables */
:root{
  --bg:#0b1020;          /* fond page (bleu nuit foncé) */
  --fg:#e5e7eb;          /* texte clair */
  --muted:#a6adbb;
  --card:#10172a;        /* cartes */
  --border:#23304a;
  --primary:#4f46e5;     /* indigo */
  --primary-contrast:#ffffff;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --container:1100px;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* Base */
html{color-scheme:dark}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
}
a{color:inherit;text-decoration:none}
a.link{color:#9ab4ff;text-decoration:underline}

/* Containers & layout */
.container{max-width:var(--container);margin-inline:auto;padding:18px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:1fr 1fr}

/* Typography */
.h1{font-size:clamp(28px,4vw,38px);margin:0 0 8px}
.h2{font-size:clamp(20px,3vw,24px);margin:0 0 6px}
.muted{color:var(--muted)}
.note{color:#b8c0cc;font-size:.95rem}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(11,16,32,.85);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:28px;height:28px}
.brand__name{font-weight:600}

/* Nav */
.nav--desktop{display:flex;gap:14px;margin-left:20px}
.nav__link{padding:10px 12px;border-radius:10px}
.nav__link:hover{background:#0f172a}

/* Actions */
.actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.hide-sm{display:inline-flex}
.show-sm{display:none}

/* Mobile menu */
.mobile-menu{border-top:1px solid var(--border);background:var(--card)}
.mobile-menu__nav{display:flex;flex-direction:column;padding:12px;gap:8px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);
  background:#0f172a;cursor:pointer
}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent}
.btn--primary,.btn--brand{
  background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)
}
.btn-icon{background:transparent;border:1px solid var(--border);border-radius:12px;padding:8px}

/* Hero */
.hero{display:flex;align-items:center;justify-content:center;min-height:140px;background:linear-gradient(135deg,rgba(79,70,229,.2),rgba(16,185,129,.15))}
.hero__text{max-width:720px}

/* Alerts */
.alert{
  border:1px solid var(--border);background:#0f172a;
  border-left:4px solid var(--primary);
  padding:12px 14px;border-radius:12px;margin:12px 0
}
.alert-success{border-left-color:var(--success)}
.alert-danger{border-left-color:var(--danger)}
.alert-warning{border-left-color:var(--warning)}

/* Table */
.table{width:100%;border-collapse:collapse;background:#0f172a;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{background:#111827}
.table tr:hover td{background:#0e1427}
.text-right{text-align:right}

/* Footer */
.footer .card{background:transparent;border-color:var(--border)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-legal{border-top:1px solid var(--border);margin-top:16px;padding:16px}
.legal-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.footer a.link{color:#b7c6ff}

/* Forms */
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:#0f172a;color:var(--fg)
}
input::placeholder,textarea::placeholder{color:#8b97aa}
textarea{min-height:120px}
.filters{display:flex;gap:8px;align-items:center;margin:10px 0 12px;padding:0}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal.open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,.5);z-index:9998}
.modal-content{
  position:relative;max-width:640px;margin:10vh auto;background:#0f172a;
  border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden
}
.modal-header,.modal-footer{padding:12px 14px;border-bottom:1px solid var(--border)}
.modal-footer{border-top:1px solid var(--border);border-bottom:none}
.modal-body{padding:14px}

/* Patch modal : labels + checkbox + bouton Annuler */
.modal .field__label{
  color:#cbd5e1 !important;   /* plus clair */
  opacity:1 !important;
  font-weight:600;
}
.modal label.checkbox span{ color:#cbd5e1 !important; }
.modal input,.modal select,.modal textarea{
  border-color:#2a3550;       /* + contraste */
}
/* Rendre "Annuler" visible en mode ghost */
.modal .btn--ghost{
  color:#818cf8 !important;           /* indigo-400 */
  border-color:#818cf8 !important;
  background:transparent !important;
}
.modal .btn--ghost:hover{
  background:rgba(129,140,248,.12) !important;
}

/* Responsive */
@media (max-width: 900px){
  .grid--2{grid-template-columns:1fr}
  .nav--desktop{display:none}
  .show-sm{display:inline-flex}
}
@media (max-width: 720px){
  .container{padding:14px}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .legal-grid{grid-template-columns:1fr}
}
/* Patch contraste labels modal (fort) */
.modal .field__label,
.modal label span.field__label,
.modal .checkbox span {
  color: #e5e7eb !important; /* slate-200, très lisible */
  opacity: 1 !important;
  font-weight: 600;
}

/* Contraste fort des labels en modal */
.modal .field__label,
.modal label .field__label,
.modal .checkbox span{
  color:#e5e7eb !important; /* très lisible */
  opacity:1 !important;
  font-weight:600;
}