/* ============================================================
   BBB Hub — SweetAlert2 + Bootstrap overrides (Light theme)
   ============================================================ */

/* ── SweetAlert2 Light Customization ────────────────────── */
.swal2-popup {
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  direction: rtl !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-xl) !important;
}
.swal2-title {
  font-family: "Vazirmatn", system-ui, sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
.swal2-html-container {
  font-family: "Vazirmatn", system-ui, sans-serif !important;
  color: var(--text-soft) !important;
}
.swal2-confirm {
  border-radius: 10px !important;
  font-family: "Vazirmatn", system-ui, sans-serif !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.6rem !important;
}
.swal2-cancel {
  border-radius: 10px !important;
  font-family: "Vazirmatn", system-ui, sans-serif !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.6rem !important;
  background: var(--surface-2) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--border-strong) !important;
}
.swal2-cancel:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}
.swal2-timer-progress-bar { background: rgba(79,70,229,0.6) !important; }
.swal2-toast .swal2-title { font-size: 0.9rem !important; }

/* ── Bootstrap badge overrides (soft, light) ────────────── */
.badge.bg-success { background: rgba(22,163,74,0.12) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.25) !important; }
.badge.bg-danger  { background: rgba(220,38,38,0.12) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,0.25) !important; }
.badge.bg-warning { background: rgba(217,119,6,0.14) !important; color: #b45309 !important; border: 1px solid rgba(217,119,6,0.28) !important; }
.badge.bg-info    { background: rgba(8,145,178,0.12) !important; color: #0e7490 !important; border: 1px solid rgba(8,145,178,0.25) !important; }

/* Bootstrap text utilities (readable on light) */
.text-primary   { color: var(--primary) !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger)  !important; }
.text-warning   { color: var(--warning) !important; }
.text-info      { color: var(--info)    !important; }
.text-purple    { color: var(--purple)  !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-soft)  !important; }
.text-dark      { color: var(--text)       !important; }

/* Bootstrap background utilities */
.bg-white { background: #fff !important; }
.bg-light { background: var(--surface-2) !important; }
.bg-dark  { background: var(--surface-solid) !important; }

/* Border utilities */
.border        { border-color: var(--border) !important; }
.border-top    { border-top-color: var(--border) !important; }
.border-bottom { border-bottom-color: var(--border) !important; }

/* ── Navbar toggler ──────────────────────────────────────── */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,38,56,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler { border-color: var(--border-strong) !important; }

/* ── Table inside card ───────────────────────────────────── */
.table-responsive { background: transparent; }

/* ── Flash alert override ────────────────────────────────── */
.alert.glass { box-shadow: var(--shadow-sm); }

/* ── Monitoring meetings modal table ─────────────────────── */
#monitorMeetingsTbody tr:hover td { background: var(--surface-2) !important; }

/* ── Section header separator ────────────────────────────── */
.section-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem !important;
}

/* ── Form inside modal ───────────────────────────────────── */
.modal-body .form-label { color: var(--text); }

/* ── Disabled server card ────────────────────────────────── */
.server-mgmt-card.is-off .srv-card-icon { filter: grayscale(0.7); }

/* ── Recordings table first-load animation ───────────────── */
.recordings-table tbody tr { animation: rowSlideIn 0.3s ease both; }
.recordings-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.recordings-table tbody tr:nth-child(2)  { animation-delay: 0.04s; }
.recordings-table tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.recordings-table tbody tr:nth-child(4)  { animation-delay: 0.08s; }
.recordings-table tbody tr:nth-child(5)  { animation-delay: 0.10s; }
.recordings-table tbody tr:nth-child(n+6){ animation-delay: 0.12s; }
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Sidebar nav active link indicator ───────────────────── */
.nav-pills .nav-link.active { position: relative; }
.nav-pills .nav-link.active::before {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--primary);
  border-radius: 3px 0 0 3px;
}

/* ── Feature card tag hover (index) ──────────────────────── */
.feature-card .badge-soft { transition: all 0.2s ease; }
.feature-card:hover .badge-soft {
  background: rgba(79,70,229,0.14);
  border-color: rgba(79,70,229,0.3);
  transform: translateY(-1px);
}

/* ── Hero stat items hover ───────────────────────────────── */
.hero-content .d-flex.gap-4 > div { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero-content .d-flex.gap-4 > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}