/* ===== Layout ===== */
:root {
  --panel-w: min(520px, 92vw);
  --brand-max-w: clamp(180px, 70%, 440px);   /* ← logo plus large */
  --brand-max-h: clamp(60px, 18vh, 140px);
}

/* fond light élégant (désactivé en dark) */
body.login-layout {
  margin: 0; min-height: 100vh; display: flex;
  background: var(--bg-page, #f5f8fd);
  color: var(--text, #111827);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(1200px 400px at 50% -10%, rgba(13,110,253,.12), transparent 60%);
}
:root[data-theme="dark"] body.login-layout,
.dark body.login-layout {
  background: var(--surface-3, #0f172a);
  color: var(--text, #e7ebf0);
  background-image: none;
}

.login-layout__center {
  margin: auto; width: 100%;
  display: flex; justify-content: center; align-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}

.login-card { width: var(--panel-w); }
.login-footer { display:flex; justify-content:center; border-top:1px solid var(--border); }

/* ===== Brand ===== */
.login-brand {
  display:flex; justify-content:center; align-items:center;
  padding: .25rem 0 1rem;
}
.login-brand img {
  width: 100%; 
  max-width: var(--brand-max-w);
  /* max-height: var(--brand-max-h);  */
  height: auto; object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.12));
}

/* ===== Forme & rythme ===== */
.panel__content { padding: clamp(1rem, 2.6vw, 1.5rem); }
.form { display: grid; gap: clamp(.7rem, 2vw, 1rem); }
.form-label { font-weight: 700; color: var(--topbar-fg, var(--text)); }

/* Champs */
.form-control {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, .65rem);
  background: var(--surface-1, #fff);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}
:root[data-theme="dark"] .form-control,
.dark .form-control{
  background: var(--surface-1, #1f2430);
  color: var(--text, #e7ebf0);
}
.form-control::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); }

/* ===== Input group (champ + œil) ===== */
.input-group {
  display: flex; align-items: stretch; width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius, .65rem);
  background: var(--surface-1, #fff);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:root[data-theme="dark"] .input-group,
.dark .input-group{ background: var(--surface-1, #1f2430); }

/* focus sur tout le groupe */
.input-group:focus-within {
  border-color: color-mix(in srgb, var(--primary, #0d6efd) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0d6efd) 25%, transparent);
}
.input-group > .form-control { border: none; border-radius: 0; background: transparent; min-width: 0; }

/* bouton œil */
.reveal-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 48px; padding: 0 .6rem; border: 0; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 90%, transparent);
  border-left: 1px solid var(--border); color: var(--text);
  transition: background-color .15s ease, color .15s ease, filter .15s ease;
}
.reveal-btn:hover { background: color-mix(in srgb, var(--text) 6%, var(--surface-2)); }
.reveal-btn:focus-visible { outline:none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); border-radius: .25rem; }

/* Icône (emoji par défaut). Si vous avez Material Design Icons, on peut utiliser .mdi */
.reveal-btn .mdi { font-size: 1.15rem; line-height: 1; }

/* Ligne options */
.login-options {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size: .95rem;
}
.login-options a { color: var(--text); opacity: .75; text-decoration:none; }
.login-options a:hover { opacity: 1; text-decoration: underline; }

/* Actions */
.form-actions { display:flex; flex-direction:column; gap:.6rem; }
.btn-primary { width: 100%; }

/* Erreurs + CapsLock */
/* Caché par défaut */
#loginError { display: none; margin-top:.5rem; }

/* Ne s’affiche que s’il n’est PAS hidden ET qu’il a du contenu */
#loginError:not([hidden]):not(:empty) {
  display: inline-block;          /* .badge est inline-block */
  padding: .35rem .55rem;
}

/* Pas de bordures/padding quand vide ou hidden */
#loginError[hidden],
#loginError:empty {
  padding: 0;
  border: 0;
}

#capsHint { display:none; margin-top:.25rem; font-size:.85rem; color: var(--warning, #f59f00); }
#capsHint.is-visible { display:block; }

/* ===== Autofill WebKit ===== */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface-1) inset !important;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}