/* assets/custom.css */

/* === Couleurs banque (modifie les hex) === */
:root{
  /* violet exemple */
  --brand-primary: #6C2BD9;   /* primaire */
  --brand-secondary: #4C1D95; /* barre */
  --brand-accent: #E879F9;    /* liseré */
  --brand-bg: #FAF5FF;        /* fond */
}

/* Fond */
body{
  background: var(--brand-bg);
}

/* Barre de marque (navbar) */
/* Barre de marque (navbar) - spécificité plus forte */
.navbar.navbar-branding {
  background: var(--brand-secondary) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--brand-accent) !important;
}
.navbar-branding .bank-name{
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 1.05rem;
}
.navbar-branding .subtitle{
  opacity: .9;
  font-size: .95rem;
}

.navbar-branding .bank-name{
  font-weight: 700;
  letter-spacing: .3px;
}
.navbar-branding .subtitle{
  opacity: .85;
  font-size: .95rem;
}

/* Boutons */
.btn-primary{
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-outline-primary{
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover{
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Tabs */
.nav-tabs .nav-link.active{
  background-color: #fff !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  font-weight: 600;
}
.nav-tabs .nav-link{
  color: #333;
}
.nav-tabs .nav-link:hover{
  color: var(--brand-primary);
}

/* Inputs focus */
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(108, 43, 217, .18) !important;
}

/* Titres de section */
h4{
  color: var(--brand-secondary);
  border-left: 4px solid var(--brand-accent);
  padding-left: .5rem;
}

/* Zone JSON */
#result{
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--brand-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Footer */
.footer-note{
  color: #666;
  font-size: .85rem;
}

/* ========== AUTHENTIFICATION ========== */

/* Page de connexion */
.login-page{
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-card{
  width: 100%;
  max-width: 420px;
  border: none !important;
  border-top: 4px solid var(--brand-accent) !important;
  box-shadow: 0 10px 35px rgba(76, 29, 149, .18);
  border-radius: 14px;
}
.login-card .card-body{
  padding: 2.2rem 2rem 1.6rem;
}
.login-card .login-logo{
  display: block;
  margin: 0 auto .8rem;
  height: 56px;
}
.login-card h3{
  text-align: center;
  color: var(--brand-secondary);
  font-weight: 700;
  margin-bottom: .25rem;
}
.login-card .login-subtitle{
  text-align: center;
  color: #666;
  font-size: .9rem;
  margin-bottom: 1.6rem;
}
.login-card .form-label{
  font-weight: 600;
  color: #333;
  font-size: .9rem;
}
.login-card .form-control{
  padding: .6rem .8rem;
}
.login-card .login-footer{
  text-align: center;
  color: #888;
  font-size: .8rem;
  margin-top: 1rem;
}

/* Zone utilisateur à droite de la navbar */
.navbar-branding .user-zone{
  color: #fff;
  font-size: .92rem;
}
.navbar-branding .user-zone .user-name{
  font-weight: 600;
}
.navbar-branding .user-zone .role-badge{
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  margin-left: .4rem;
  white-space: nowrap;
}
.navbar-branding .user-zone .agence-badge{
  background: #E879F9;
  color: #4C1D95;
  border: 1px solid rgba(255,255,255,.35);
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.navbar-branding .user-zone .btn-link{
  color: #fff !important;
  text-decoration: none;
  padding: .15rem .55rem;
}
.navbar-branding .user-zone .btn-link:hover{
  text-decoration: underline;
}

/* Page admin des utilisateurs */
.users-admin-table thead th{
  background: var(--brand-secondary);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .3px;
}
.users-admin-table .badge-role{
  font-size: .75rem;
  padding: .3rem .55rem;
  border-radius: 999px;
}
.badge-role.admin{ background:#4C1D95; color:#fff; }
.badge-role.gestionnaire{ background:#6C2BD9; color:#fff; }
.badge-role.chef_agence{ background:#E879F9; color:#4C1D95; }
.badge-role.conformite{ background:#FBBF24; color:#7C2D12; }
.badge-role.inactif{ background:#9CA3AF; color:#fff; }
.users-admin-table .agence-cell{
  font-weight: 500;
  color: #4C1D95;
}
/* Sections de la page Administration (Utilisateurs + Agences regroupés) */
.admin-section{
  padding-top: .5rem;
}
.admin-section + hr{
  border-top: 2px solid #E879F9;
  opacity: .3;
}

/* ========== Mode "Lecture seule" (chef d'agence / conformité) ========== */

/* Bannière d'information en haut du formulaire en mode lecture seule */
.readonly-banner{
  background: #FEF3C7;
  border-left: 4px solid #F59E0B;
  color: #92400E;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.readonly-banner strong{ color:#7C2D12; }

/* Neutralisation visuelle et interactive des champs */
.kyc-readonly input:not([type="checkbox"]):not([type="radio"]),
.kyc-readonly select,
.kyc-readonly textarea,
.kyc-readonly .form-control,
.kyc-readonly .form-select,
.kyc-readonly .DateInput_input{
  background-color: #F3F4F6 !important;
  color: #4B5563 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: .95;
}

.kyc-readonly input[type="checkbox"],
.kyc-readonly input[type="radio"],
.kyc-readonly .form-check-input {
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.7;
}

/* Cache les boutons d'action sur les pages en lecture seule (ajouter une opération, etc.) */
.kyc-readonly .btn{
  pointer-events: none !important;
  opacity: .55;
}

/* Bloc d'avis modifiable (exceptions explicites pour les rôles concernés) */
.kyc-readonly #bloc-avis-courant input,
.kyc-readonly #bloc-avis-courant select,
.kyc-readonly #bloc-avis-courant textarea,
.kyc-readonly #bloc-avis-courant .form-control,
.kyc-readonly #bloc-avis-courant .form-select,
.kyc-readonly #commentaire_global {
  background-color: #fff !important;
  color: #111 !important;
  cursor: auto !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}


/* ========== Mes demandes — Files d'attente par rôle ========== */
.demandes-table{
  font-size: .92rem;
  margin-top: .5rem;
}
.demandes-table thead th{
  background: #F3F4F6;
  color: #1F2937;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.demandes-table td{ vertical-align: middle; }
.demandes-table .badge{ font-size: .82rem; padding: .35em .65em; }
.demandes-table .btn{ white-space: nowrap; }

/* Badge de statut workflow plus lisible */
.badge-statut{
  font-weight: 600;
  letter-spacing: .02em;
}

/* Le badge "light" (statut Brouillon) est trop pâle par défaut sur fond blanc */
.badge-statut.bg-light,
.badge-statut.text-bg-light{
  background-color: #E5E7EB !important;
  color: #374151 !important;
  border: 1px solid #9CA3AF;
}

/* Badge rouge pour l'onglet Mes demandes */
.tab-badge {
  background-color: #EF4444; /* Rouge vif */
  color: white !important;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === Barre d'onglets et titre fixe (sticky) en haut === */
.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: var(--brand-bg);
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  z-index: 990; /* Garder sous les modales Dash (1050+) */
  border-bottom: 1px solid rgba(76, 29, 149, 0.15); /* Bordure subtile brand-secondary */
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.03); /* Légère ombre */
}

/* === Styles premium pour le choix de l'espace de travail === */
.choice-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  background-color: #FFFFFF !important;
}

.choice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
}

.choice-card:hover .btn-premium-choice {
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-premium-choice {
  transition: all 0.2s ease-in-out !important;
}

.btn-premium-choice:hover {
  transform: scale(1.02);
}

/* Floutage d'arrière-plan de la modale */
.modal-backdrop.show {
  backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.4) !important;
}