/* ============================================
   TWIN FORTUNE — modals.css
   Modals, selects, UI fixes
   ============================================ */

/* ---- MODAL OVERLAY ---- */
.tf-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tf-modal-overlay.open { display: flex; }

/* ---- MODAL BOX ---- */
.tf-modal {
  background: var(--dark-card);
  border: 1px solid var(--neon-cyan);
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }

.tf-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tf-modal-title {
  font-family: 'Orbitron', monospace;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--neon-cyan);
}
.tf-modal-close {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--dark-border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tf-modal-close:hover { border-color: var(--neon-pink); color: var(--neon-pink); }

.tf-modal-body { padding: 1.5rem; }
.tf-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--dark-border); display: flex; gap: .75rem; justify-content: flex-end; }

/* ---- CONFIRM MODAL ---- */
.tf-confirm-icon { font-size: 3rem; text-align: center; margin-bottom: 1rem; }
.tf-confirm-title { font-family:'Orbitron',monospace; font-size:1rem; font-weight:700; text-align:center; margin-bottom:.75rem; }
.tf-confirm-text { color: var(--text-muted); font-size:.9rem; text-align:center; line-height:1.6; margin-bottom:.25rem; }

/* ---- CUSTOM SELECT ---- */
.tf-select {
  position: relative;
}
.tf-select select {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  padding: 10px 36px 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dark-border);
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s;
  letter-spacing: .5px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.tf-select select:focus { border-color: var(--neon-cyan); }
.tf-select select option {
  background: #0A0A1A;
  color: var(--text-primary);
  padding: 8px;
}
.tf-select::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neon-cyan);
  pointer-events: none;
  font-size: 1rem;
}

/* ---- NOTIF BADGE ---- */
.badge-notif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--neon-pink);
  color: white;
  font-size: .6rem;
  font-weight: 700;
  font-family: 'Orbitron', monospace;
  padding: 0 4px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,0,110,.4); } 50% { box-shadow: 0 0 0 6px rgba(255,0,110,0); } }

/* ---- TICKET CANAL ---- */
.ticket-canal {
  background: rgba(255,215,0,.05);
  border: 1px solid rgba(255,215,0,.2);
  border-left: 3px solid var(--neon-gold);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  cursor: pointer;
  transition: border-color .2s;
}
.ticket-canal:hover { border-color: var(--neon-gold); }
.ticket-canal.actif { border-color: var(--neon-gold); background: rgba(255,215,0,.08); }
.ticket-canal .tc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; }
.ticket-canal .tc-nom { font-weight:600; font-size:.88rem; }
.ticket-canal .tc-statut { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; }
.ticket-canal .tc-preview { font-size:.75rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }