/* ============================================
   VulnBank — Finition visuelle
   Chargé après les autres feuilles sur : tableau de bord client,
   connexion/inscription, admin et espace marchand.
   Surcharges purement visuelles : aucun id, nom ou comportement modifié.
   ============================================ */

:root {
  --content-max: 1180px;
  --ring: 0 0 0 4px rgba(15, 138, 95, 0.14);
  --shadow-card: 0 1px 2px rgba(13, 27, 51, 0.04), 0 4px 16px rgba(13, 27, 51, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(13, 27, 51, 0.05), 0 12px 32px rgba(13, 27, 51, 0.08);
}
[data-theme="dark"] {
  --ring: 0 0 0 4px rgba(52, 178, 127, 0.22);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ---------- Éléments communs ---------- */
body { text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1; }

::selection { background: rgba(15, 138, 95, 0.18); }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], select {
  min-height: 44px;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover,
input[type="number"]:hover, input[type="url"]:hover, select:hover, textarea:hover {
  border-color: var(--border-2);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
label { color: var(--text-1); letter-spacing: 0.005em; }

button[type="submit"], .btn-primary {
  min-height: 42px;
  padding-inline: 1.375rem;
  box-shadow: 0 1px 2px rgba(13, 27, 51, 0.12);
}
button:disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

#message { border-radius: var(--r-md); box-shadow: var(--shadow-sm); }

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================
   TABLEAU DE BORD CLIENT
   ============================================ */

/* Barre supérieure translucide */
.topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.topbar-greeting { font-size: 1.0625rem; }

/* Contenu centré et en grille : fini le vide à droite */
.main-content {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}
.main-content > * {
  grid-column: 1 / -1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
@media (min-width: 1100px) {
  /* Virement et prêt côte à côte */
  .main-content > #transfers,
  .main-content > #loans {
    grid-column: auto;
    max-width: calc((var(--content-max) - 1.5rem) / 2);
    align-self: stretch;
  }
  .main-content > #transfers { margin-inline: auto 0; }
  .main-content > #loans { margin-inline: 0 auto; }
}

/* Cartes de compte : remplissent la largeur */
.account-cards-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1rem;
  overflow: visible;
}
.account-card {
  min-width: 0;
  min-height: 150px;
  padding: 1.5rem 1.625rem;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(7, 27, 55, 0.18);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.account-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(7, 27, 55, 0.24); }
.account-card.card-blue { background: linear-gradient(135deg, #149068 0%, #0D5C42 55%, #0B4A36 100%); }
.account-card::before { width: 260px; height: 260px; top: -45%; right: -15%; }
.account-card-label { color: rgba(255, 255, 255, 0.72); font-size: 0.6875rem; margin-bottom: 0.375rem; }
.account-card-number {
  font-family: var(--font-body);
  font-size: 0.8125rem; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.75);
  opacity: 1 !important;
}
.account-card-number .mono { font-family: var(--font-mono); letter-spacing: 0.06em; }
.account-card-balance {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  margin-top: auto;
}
.account-card .btn, .account-card button:not(.account-card-copy) { margin-top: auto; align-self: flex-start; }
.account-card-copy { font-size: 0.625rem; padding: 0.3rem 0.625rem; }

/* Actions rapides */
.action-pill { padding: 1.125rem 1.25rem; box-shadow: var(--shadow-card); }
.action-pill:hover { box-shadow: var(--shadow-card-hover); }
.action-pill-icon { border-radius: 12px; }

/* Sections */
.dashboard-section {
  padding: 1.75rem;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.section-header { padding-bottom: 1rem; margin-bottom: 1.5rem; }
.section-title { font-size: 1.125rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.625rem; }
.section-title::before {
  content: ''; width: 4px; height: 18px; border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
}

/* Profil : plus compact */
.profile-section .profile-picture { border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-md); }
.profile-section form { max-width: 640px; margin-inline: auto; text-align: left; }
.profile-section form button[type="submit"] { display: flex; margin-inline: auto; }

/* Listes et états vides */
.transaction-item { padding: 1rem 0.25rem; }
.transaction-amount { font-family: var(--font-display); font-weight: 700; }
#transaction-list > p, #bill-payments-list > p, .cards-empty-state, .payments-container > p {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
}

.cards-container > .cards-empty-state { grid-column: 1 / -1; width: 100%; max-width: none; justify-self: stretch; }

/* Fenêtres modales */
.modal-content { border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }

/* Barre latérale */
.sidebar { background: linear-gradient(180deg, #0E4535 0%, var(--sidebar-bg) 40%, #072E22 100%); }
.nav-link { font-weight: 500; }
.nav-link.active { background: rgba(52, 178, 127, 0.16); }

@media (max-width: 1024px) {
  .account-cards-row { grid-template-columns: 1fr 1fr; }
  .account-cards-row > .account-card:first-child { grid-column: 1 / -1; }
}
/* Bouton du menu mobile : l'icône était écrasée par le rembourrage générique */
.menu-toggle { padding: 0; top: 12px; }
.menu-toggle svg { flex-shrink: 0; }

@media (max-width: 768px) {
  .topbar { padding-left: 4.25rem; }
  .topbar-greeting { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  .main-content { display: block; }
  .main-content > * { margin-bottom: 1rem; }
  .dashboard-section { padding: 1.25rem; border-radius: var(--r-lg); }
}
@media (max-width: 560px) {
  .account-cards-row { grid-template-columns: 1fr; }
  .account-card-balance { font-size: 1.75rem; }
}

/* ============================================
   CONNEXION / INSCRIPTION
   ============================================ */
.auth-brand {
  background:
    radial-gradient(120% 80% at 10% 100%, rgba(20, 144, 104, 0.35) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(14, 165, 233, 0.18) 0%, transparent 60%),
    var(--navy-900);
}
.auth-brand h2 { font-size: 2.25rem; }
.auth-brand p { color: rgba(255, 255, 255, 0.72); }
.auth-trust-item { color: rgba(255, 255, 255, 0.62); font-size: 0.75rem; }
.auth-trust-item svg { opacity: 0.85; }
.auth-form-container {
  max-width: 460px;
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.auth-form-container h1 { font-size: 2rem; }
.auth-input-group input { height: 52px; background: var(--surface-2); border-color: transparent; }
.auth-input-group input:hover { border-color: var(--border-2); }
.auth-input-group input:focus { background: var(--surface); border-color: var(--brand); }
.auth-form-container button[type="submit"] { height: 52px; font-size: 1rem; }
.auth-links a { color: var(--text-2); }
.auth-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .auth-form-container { padding: 1.5rem; border-radius: var(--r-xl); }
}

/* ============================================
   CONSOLE D’ADMINISTRATION
   ============================================ */
.admin-topbar {
  background: color-mix(in srgb, var(--admin-bg, var(--surface)) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.admin-section { width: 100%; max-width: 1320px; margin-inline: auto; }
.metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr; } }
.metric-card { box-shadow: var(--shadow-card); border-radius: var(--r-lg); align-items: center; }
.metric-card:hover { box-shadow: var(--shadow-card-hover); }
.metric-label {
  text-transform: none; letter-spacing: 0;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
}
.metric-value { font-family: var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.content-card, .analytics-card { border-radius: var(--r-xl); box-shadow: var(--shadow-card); }

/* Boutons d’action du tableau des utilisateurs : contour léger au lieu de blocs pleins */
.action-buttons { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
.action-buttons form { margin: 0; }
.btn-text, button.btn-text[type="submit"] {
  min-height: 34px; padding: 0.375rem 0.875rem;
  font-size: 0.8125rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: none; transform: none;
}
.btn-text.btn-view { color: var(--brand); }
.btn-text.btn-view:hover { background: rgba(15, 138, 95, 0.08); border-color: rgba(15, 138, 95, 0.35); }
button.btn-text.btn-suspend[type="submit"] { background: var(--surface); color: var(--amber-text); border-color: rgba(245, 158, 11, 0.45); }
button.btn-text.btn-suspend[type="submit"]:hover { background: var(--amber-bg); transform: none; box-shadow: none; }
.btn-text.btn-delete, button.btn-delete[type="submit"] { background: var(--surface); color: var(--red); border-color: rgba(239, 68, 68, 0.45); }
.btn-text.btn-delete:hover, button.btn-delete[type="submit"]:hover { background: var(--red); border-color: var(--red); color: #fff; transform: none; box-shadow: none; }

/* ============================================
   ESPACE MARCHAND
   ============================================ */
.merchant-dashboard-page .main-content > * { max-width: var(--content-max); }
.merchant-stat-card {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  min-height: 120px;
}
.merchant-stat-value { font-family: var(--font-display); letter-spacing: -0.02em; }
.merchant-stat-value.compact { font-family: var(--font-body); font-weight: 700; }
.merchant-table-wrap { border-radius: var(--r-lg); }
@media (max-width: 1024px) {
  .merchant-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .merchant-stats { grid-template-columns: 1fr; }
}

/* ---------- RIB, virement et impression ---------- */
.account-card-iban {
  font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7);
  margin: -0.5rem 0 0.75rem; letter-spacing: 0.01em;
}
.account-card-iban .mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.form-helper-ok { color: var(--green-text); }
.form-helper-error { color: var(--red-text); }
.form-helper-warn { color: var(--amber-text); }
#beneficiary_iban { letter-spacing: 0.06em; }
.transaction-print {
  flex-shrink: 0; width: 34px; height: 34px; min-height: 0; padding: 0;
  margin-left: 0.25rem; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent; color: var(--text-3);
  box-shadow: none;
}
.transaction-print svg { width: 16px; height: 16px; }
.transaction-print:hover { background: var(--surface-2); border-color: var(--border); color: var(--text-1); transform: none; }
.section-header .btn-secondary svg { flex-shrink: 0; }
@media (max-width: 480px) {
  .form-row { flex-direction: column; gap: 0; }
}

/* Dépôt d'argent */
.quick-actions { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#deposit .section-intro { margin: -0.25rem 0 1rem; font-size: 0.875rem; color: var(--text-3); }
#deposit .form-row { align-items: flex-end; }
#deposit .form-row .form-group:last-child { flex: 1.6; }