/* ═══════════════════════════════════════════════════════════
   enhancements.css — Améliorations UI globales
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════
   PAGE LOGIN — fond vert, card centrée
   ══════════════════════════════════ */

/* ── FOND VERT PLEIN ÉCRAN ── */
html:has([name="signIn"]),
body:has([name="signIn"]) {
  background: radial-gradient(ellipse at 38% 38%, #90d94e 0%, #5aa030 42%, #2b5e10 100%) !important;
  min-height: 100vh !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Masquer navbar et colonne gauche */
body:has([name="signIn"]) .navbar,
body:has([name="signIn"]) .navbar-default,
body:has([name="signIn"]) #login_splash { display: none !important; }

/* ── CARD CENTRÉE EN POSITION FIXE ── */
body:has([name="signIn"]) .col-sm-6.col-lg-4 {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 420px !important;
  max-width: calc(100vw - 40px) !important;
  z-index: 100 !important;
  padding: 0 !important;
  float: none !important;
}

/* Branding logo positionné au-dessus de la card */
body:has([name="signIn"]) .login-fp-brand {
  position: fixed !important;
  top: calc(50% - 250px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 101 !important;
  width: 420px !important;
  max-width: calc(100vw - 40px) !important;
  text-align: center;
}

/* Branding au-dessus de la card (injecté via JS) */
.login-fp-brand {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  user-select: none;
}
.login-fp-brand .fp-icon {
  font-size: 3.8rem;
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.25));
}
.login-fp-brand .fp-name {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
  display: block;
  line-height: 1;
}
.login-fp-brand .fp-sub {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: 7px;
  display: block;
}

/* Card centrée, largeur fixe */
body:has([name="signIn"]) .container { max-width: 440px !important; padding: 0 !important; }

/* Outer row : cacher le layout 2 colonnes */
body:has([name="signIn"]) .container > .row { margin: 0 !important; }
body:has([name="signIn"]) .container > .row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Inner row (autour du bouton) : garder Bootstrap normal */
body:has([name="signIn"]) .panel-body > form .row {
  display: block !important;
  margin: 0 !important;
}
body:has([name="signIn"]) .panel-body > form .row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card */
body:has([name="signIn"]) .panel {
  border: none !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.35) !important;
  margin: 0 !important;
}
body:has([name="signIn"]) .panel-heading {
  /* couleur appliquée par JS depuis --rb-header-from */
  border: none !important;
  padding: 26px 28px 20px !important;
}
body:has([name="signIn"]) .panel-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: .03em;
}
body:has([name="signIn"]) .panel-body {
  padding: 28px !important;
  background: #fff;
}
body:has([name="signIn"]) .form-group label {
  font-weight: 700 !important;
  font-size: .78rem !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body:has([name="signIn"]) .form-control {
  border-radius: 10px !important;
  border: 2px solid #e5e7eb !important;
  padding: 11px 14px !important;
  font-size: .95rem !important;
  box-shadow: none !important;
  background: #f9fafb !important;
  transition: border-color .15s, box-shadow .15s !important;
}
body:has([name="signIn"]) .form-control:focus {
  border-color: #7c3aed !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.13) !important;
  outline: none !important;
}
body:has([name="signIn"]) .btn-primary {
  /* couleur appliquée par JS depuis --rb-header-from */
  border: none !important;
  border-radius: 10px !important;
  padding: 13px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  display: block !important;
  box-shadow: 0 4px 18px rgba(124,58,237,.35) !important;
  transition: transform .12s, box-shadow .15s !important;
}
body:has([name="signIn"]) .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,.5) !important;
}
body:has([name="signIn"]) .btn-primary:active { transform: translateY(0) !important; }
body:has([name="signIn"]) .help-block a { color: #7c3aed !important; font-weight: 600; }
body:has([name="signIn"]) .checkbox label { color: #6b7280 !important; font-size: .85rem; }
body:has([name="signIn"]) .panel-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 28px !important;
  text-align: center;
  font-size: .82rem;
}
body:has([name="signIn"]) .alert-danger {
  border-radius: 10px !important;
  border: none !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  padding: 12px 16px !important;
  font-weight: 600;
  margin-bottom: 16px;
}


/* ══════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════ */
@keyframes fadeIn  { from { opacity:0; transform:translateY(5px); }  to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes spin    { to { transform:rotate(360deg); } }

table tbody tr { animation: fadeIn 0.3s ease forwards; }
.table tbody tr:nth-child(n) { animation-delay: calc(0.02s * var(--row-index, 0)); }

/* ── INPUTS ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea { transition: all 0.2s ease; }
input::placeholder, textarea::placeholder { opacity: 0.6; font-style: italic; }

/* ── ALERTES ── */
.alert { border-radius:8px !important; border-left:4px solid transparent !important; padding:14px 16px !important; animation:slideIn 0.3s ease; }
.alert-success  { border-left-color:#16a34a !important; background-color:#f0fdf4 !important; color:#166534 !important; }
.alert-danger, .alert-error { border-left-color:#dc2626 !important; background-color:#fef2f2 !important; color:#991b1b !important; }
.alert-warning  { border-left-color:#f59e0b !important; background-color:#fffbeb !important; color:#92400e !important; }
.alert-info     { border-left-color:#0891b2 !important; background-color:#f0f9fa !important; color:#164e63 !important; }

/* ── PAGINATION ── */
.pagination { gap:6px; margin:16px 0; }
.page-link { border-radius:6px !important; border:1px solid #e2e8f0 !important; color:#0f172a !important; padding:8px 12px !important; transition:all 0.2s ease; min-width:40px; text-align:center; }
.page-link:hover { border-color:var(--rb-primary,#2563eb) !important; background-color:var(--rb-primary-light,#eff6ff) !important; color:var(--rb-primary,#2563eb) !important; }
.page-link.active { background-color:var(--rb-primary,#2563eb) !important; border-color:var(--rb-primary,#2563eb) !important; color:#fff !important; }

/* ── MOBILE ── */
@media (max-width:768px) {
  .table { font-size:0.9rem; }
  .table th, .table td { padding:10px 8px !important; }
  .btn { padding:8px 12px !important; font-size:0.9rem !important; }
  .pagination { gap:4px; }
  .page-link { padding:6px 10px !important; min-width:36px; font-size:0.9rem; }
}

/* ── LOADING / SPINNER ── */
.loading { opacity:0.6; pointer-events:none; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid #e2e8f0; border-top-color:var(--rb-primary,#2563eb); border-radius:50%; animation:spin 0.8s linear infinite; }

/* ── BADGES ── */
.badge { padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; display:inline-block; }
.badge-primary { background-color:var(--rb-primary-light,#eff6ff); color:var(--rb-primary,#2563eb); }
.badge-success { background-color:#dcfce7; color:#166534; }
.badge-danger  { background-color:#fee2e2; color:#991b1b; }
.badge-warning { background-color:#fef9e7; color:#92400e; }

/* ── GLOBAL ── */
.text-muted { color:#64748b !important; font-size:0.9rem; }
.text-small { font-size:0.85rem; color:#64748b; }
.gap-1 { gap:4px; } .gap-2 { gap:8px; } .gap-3 { gap:12px; }
* { scroll-behavior:smooth; }
a { transition:color 0.2s ease; }