/* ============================================================
   FAST BANK — Thème partagé "shadcn-style"
   Design tokens + composants réutilisables (cartes, champs,
   boutons, navigation mobile). Les couleurs de marque
   (--primary / --dark / --light) restent définies par chaque
   page : ce fichier ne les redéfinit jamais, il s'appuie
   dessus via var(--primary, ...).
   ============================================================ */

:root {
  --fb-radius-sm: 8px;
  --fb-radius: 12px;
  --fb-radius-lg: 16px;
  --fb-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --fb-shadow-md: 0 6px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --fb-shadow-lg: 0 16px 48px rgba(15,23,42,.14), 0 4px 14px rgba(15,23,42,.06);
  --fb-border: rgba(15,23,42,.08);
  --fb-ease: cubic-bezier(.4,0,.2,1);
}

/* ── CARDS ──────────────────────────────────────────────── */
.fb-card {
  background: #fff;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius-lg);
  box-shadow: var(--fb-shadow-md);
  transition: box-shadow .25s var(--fb-ease), transform .25s var(--fb-ease);
}
.fb-card-hover:hover {
  box-shadow: var(--fb-shadow-lg);
  transform: translateY(-3px);
}

/* ── SECTION HEADINGS ───────────────────────────────────── */
.fb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ── FIELDS (inputs / selects / textarea) ──────────────────
   Style "shadcn" : bordure fine, radius doux, focus ring. */
.fb-field { margin-bottom: 18px; }
.fb-field label,
.fb-label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--dark);
  margin-bottom: 6px;
}
.fb-input,
.fb-select,
.fb-textarea,
.register-card .form-control,
.register-card .form-select,
.login-card .form-control,
.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  border: 1.5px solid var(--fb-border);
  border-radius: var(--fb-radius-sm);
  padding: 11px 14px;
  font-size: .92rem;
  background: #fdfdfd;
  transition: border-color .2s var(--fb-ease), box-shadow .2s var(--fb-ease), background-color .2s;
}
.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus,
.register-card .form-control:focus,
.register-card .form-select:focus,
.login-card .form-control:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
  outline: none;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: .92rem;
  border-radius: var(--fb-radius-sm);
  padding: 12px 22px;
  border: none;
  cursor: pointer;
  transition: background-color .2s var(--fb-ease), transform .15s var(--fb-ease), box-shadow .2s var(--fb-ease);
}
.fb-btn:active { transform: translateY(1px); }
.fb-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--fb-shadow-sm);
}
.fb-btn-primary:hover { filter: brightness(.92); box-shadow: var(--fb-shadow-md); color:#fff; }
.fb-btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.fb-btn-outline:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fb-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── BADGES / PILLS ─────────────────────────────────────── */
.fb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.fb-pill-success { background: rgba(76,175,80,.12); color: #2e7d32; }
.fb-pill-warning { background: rgba(255,152,0,.12); color: #e65100; }
.fb-pill-danger  { background: rgba(244,67,54,.12); color: #c62828; }
.fb-pill-info    { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* ── FADE-IN ANIMATION ──────────────────────────────────── */
@keyframes fb-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fb-fade-in { animation: fb-fade-in-up .5s var(--fb-ease) both; }

/* ── MOBILE SIDEBAR NAVIGATION (dashboard / admin) ─────────
   Ajoute un bouton hamburger flottant + overlay pour ouvrir
   la sidebar sur mobile, sans toucher au layout desktop. */
.fb-sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: var(--fb-radius-sm);
  border: none;
  background: var(--dark);
  color: var(--primary);
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fb-shadow-md);
  cursor: pointer;
}
.fb-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 99;
  opacity: 0;
  transition: opacity .25s var(--fb-ease);
}
.fb-sidebar-overlay.show { display: block; opacity: 1; }

@media (max-width: 768px) {
  .fb-sidebar-toggle { display: flex; }
  .sidebar {
    transition: transform .3s var(--fb-ease);
    box-shadow: var(--fb-shadow-lg);
  }
  .sidebar.fb-open { transform: translateX(0) !important; }
  .topbar { padding-left: 70px; }
}

/* ── GENERIC RESPONSIVE TWEAKS ──────────────────────────── */
@media (max-width: 576px) {
  .register-card, .login-card, .form-card, .profile-card { padding: 24px 18px !important; }
  .balance-amount { font-size: 2.1rem !important; }
}