/* ============================================================
   NotifSystem — app.css
   Complément au bootstrap.min.css existant
   Palette : Bleu marine #1a3a6b  |  Rouge bordeaux #8b1a2e
   ============================================================ */

:root {
  --navy:       #1a3a6b;
  --navy-mid:   #1e4480;
  --navy-light: #2557a7;
  --wine:       #8b1a2e;
  --wine-mid:   #a82035;
  --wine-light: #c4253c;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar.navbar-inverse {
  background: var(--navy) !important;
  border-color: var(--navy-mid);
}
.navbar.navbar-inverse .navbar-brand,
.navbar.navbar-inverse .navbar-nav > li > a {
  color: #fff !important;
}
.navbar.navbar-inverse .navbar-nav > li > a:hover {
  background: var(--navy-mid) !important;
}

/* ── Bouton d'envoi notification ────────────────────────────── */
.btn-send-notif {
  background:    var(--wine);
  border:        2px solid var(--wine-mid);
  color:         #fff;
  font-weight:   bold;
  font-size:     14px;
  padding:       8px 18px;
  border-radius: 4px;
  box-shadow:    0 0 8px rgba(139,26,46,.4);
  transition:    all .2s;
  cursor:        pointer;
}
.btn-send-notif:hover, .btn-send-notif:focus {
  background:  var(--wine-light);
  box-shadow:  0 0 14px rgba(196,37,60,.5);
  color:       #fff;
  outline:     none;
}

/* ── MODAL ENVOI NOTIFICATION — header bordeaux ─────────────── */
#modalEnvoiNotif .modal-header,
#modalEnvoi .modal-header {
  background:    var(--wine);
  border-bottom: 2px solid var(--wine-mid);
  padding:       14px 20px;
}
#modalEnvoiNotif .modal-title,
#modalEnvoi .modal-title {
  color:       #fff;
  font-weight: bold;
}
#modalEnvoiNotif .close,
#modalEnvoi .close {
  color:       #fff;
  opacity:     .85;
  text-shadow: none;
  font-size:   20px;
}
#modalEnvoiNotif .close:hover,
#modalEnvoi .close:hover { opacity: 1; }

/* bouton submit dans modal envoi */
.btn-submit-notif {
  background:    var(--wine);
  border-color:  var(--wine-mid);
  color:         #fff;
  font-weight:   bold;
}
.btn-submit-notif:hover, .btn-submit-notif:focus {
  background:    var(--wine-light);
  border-color:  var(--wine);
  color:         #fff;
}

/* ── MODAL RÉCEPTION — header bleu marine ───────────────────── */
#modalNotifRecue .modal-content {
  border: 3px solid var(--navy-mid);
  border-radius: 6px;
}
#modalNotifRecue .modal-header {
  background:    var(--navy);
  border-bottom: 2px solid var(--navy-mid);
  padding:       14px 20px;
}
#modalNotifRecue .modal-title { color: #fff; }
#modalNotifRecue .modal-body  { font-size: 16px; min-height: 80px; }

/* bouton fermer dans modal réception */
.btn-close-notif {
  background:   var(--navy);
  border-color: var(--navy-mid);
  color:        #fff;
  font-weight:  bold;
}
.btn-close-notif:hover, .btn-close-notif:focus {
  background:   var(--navy-light);
  border-color: var(--navy-mid);
  color:        #fff;
}

/* ── Toast de confirmation envoi ────────────────────────────── */
.toast-notif {
  position:      fixed;
  top:           70px;
  right:         20px;
  z-index:       9999;
  background:    #2e7d32;
  color:         #fff;
  padding:       14px 22px;
  border-radius: 6px;
  font-size:     15px;
  font-weight:   bold;
  box-shadow:    0 4px 12px rgba(0,0,0,.3);
  display:       none;
  border-left:   4px solid #1b5e20;
}

/* ── Spinner bouton chargement ──────────────────────────────── */
.spinner {
  display:        inline-block;
  width:          13px;
  height:         13px;
  border:         2px solid rgba(255,255,255,.4);
  border-top:     2px solid #fff;
  border-radius:  50%;
  animation:      spin .7s linear infinite;
  vertical-align: middle;
  margin-right:   5px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Page Login — formulaire centré ─────────────────────────── */
.login-center-wrapper {
  display:         flex;
  justify-content: center;
  padding-top:     80px;
}
.login-center-wrapper .panel {
  width:     100%;
  max-width: 400px;
}
.login-panel-header {
  background:    var(--navy) !important;
  border-radius: 3px 3px 0 0;
  text-align:    center;
  padding:       18px;
}
.login-panel-header h3 {
  color:  #fff;
  margin: 0;
}

/* ── Page Agent — badge écoute ──────────────────────────────── */
.listening-badge {
  display:       inline-block;
  background:    #e8f5e9;
  border:        1px solid #a5d6a7;
  border-radius: 20px;
  padding:       8px 20px;
  color:         #2e7d32;
  font-weight:   bold;
  font-size:     14px;
}