/**
 * Universal Connection Manager Styles (e-rsa)
 * File: public/assets/css/components/connection-manager.css
 * 
 * Standards:
 * 1. Notifications use e-rsa's Centralized Alert (Notyf) System:
 *    - Status alerts (Offline, Slow, Online Restored) display in the same standardized
 *      notification position as all other application alerts via window.Alert.
 *    - Zero custom fixed bars or pills, avoiding Safari top bar color leaks & layout shifts.
 * 2. Theme-Synchronized Modal:
 *    - Strictly adopts e-rsa's native modal tokens (--bs-modal-bg, --bs-card-bg, --bs-heading-color, --bs-primary)
 *    - Supports both Light & Dark modes seamlessly
 *    - Centered card with rounded corners (--bs-border-radius-xxl) and pill buttons
 *    - Butter-smooth entrance/exit fade & scale transitions (cubic-bezier)
 *    - Subtle soft-label icon badges (bg-label-danger / bg-label-warning)
 */

/* ==========================================================================
   1. CONNECTION MODAL OVERLAY (THEME-SYNCHRONIZED WITH E-RSA)
   ========================================================================== */
.connection-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background-color: var(--bs-backdrop-color, rgba(0, 0, 0, var(--bs-backdrop-opacity, 0.45)));
  backdrop-filter: blur(var(--bs-backdrop-blur, 4px));
  -webkit-backdrop-filter: blur(var(--bs-backdrop-blur, 4px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.32s ease,
              backdrop-filter 0.32s ease,
              -webkit-backdrop-filter 0.32s ease;
}

.connection-modal-backdrop--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear,
              backdrop-filter 0.32s ease,
              -webkit-backdrop-filter 0.32s ease;
}

.connection-modal-backdrop--hiding {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.32s ease,
              -webkit-backdrop-filter 0.32s ease !important;
}

/* Prevent body scrolling when connection modal is locked open */
body.has-connection-modal {
  overflow: hidden !important;
  touch-action: none;
}

.connection-modal-dialog {
  width: 100%;
  max-width: 380px;
  transform: scale(0.9) translateY(18px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-modal-backdrop--show .connection-modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-modal-backdrop--hiding .connection-modal-dialog {
  transform: scale(0.92) translateY(14px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Content: Adopts e-rsa Native Modal Tokens */
.connection-modal-content {
  background-color: var(--bs-modal-bg, var(--bs-card-bg, #ffffff));
  border: 1px solid var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.08)));
  border-radius: var(--bs-border-radius-xxl, 1.25rem);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.18);
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
  color: var(--bs-body-color, #3a3a3a);
  position: relative;
  overflow: hidden;
}

/* Mobile Bottom Modal (Slide from Bottom, No swipe, No handle line, No close btn) */
@media (max-width: 767.98px) {
  .connection-modal-backdrop {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  .connection-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: translateY(100%) !important;
    -webkit-transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1) !important;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 1, 1) !important;
    will-change: transform;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  .connection-modal-backdrop--show .connection-modal-dialog {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    opacity: 1 !important;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-transition: -webkit-transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .connection-modal-backdrop--hiding .connection-modal-dialog {
    transform: translateY(100%) !important;
    -webkit-transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1) !important;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 1, 1) !important;
  }

  .connection-modal-content {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    border: none !important;
    border-top: none !important;
    padding: 2.25rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 16px)) !important;
    box-shadow: 0 -0.5rem 2.5rem rgba(0, 0, 0, 0.4) !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Tanpa garis atas model (no grabber handle pill / pseudo elements) */
  .connection-modal-content::before,
  .connection-modal-content::after,
  .connection-modal-dialog::before,
  .connection-modal-dialog::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Tanpa icon / tombol close */
  .connection-modal-content .btn-close,
  .connection-modal-close {
    display: none !important;
  }
}

[data-bs-theme="dark"] .connection-modal-content {
  background-color: var(--bs-modal-bg, var(--bs-paper-bg, #1e1e1e));
  border-color: var(--bs-border-color, #2c2c2c);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65);
}

/* Icon Avatar Badge with Soft Background */
.connection-modal-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.connection-modal-icon-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.connection-modal-icon-badge i,
.connection-modal-icon-badge .material-symbols-outlined {
  font-size: 2.5rem;
  line-height: 1;
  display: inline-block;
}

.connection-modal-icon-badge.bg-label-danger {
  background-color: rgba(255, 62, 29, 0.12) !important;
  color: var(--bs-danger, #ff3e1d) !important;
}

.connection-modal-icon-badge.bg-label-warning {
  background-color: rgba(255, 171, 0, 0.12) !important;
  color: var(--bs-warning, #ffab00) !important;
}

[data-bs-theme="dark"] .connection-modal-icon-badge.bg-label-danger {
  background-color: rgba(255, 62, 29, 0.18) !important;
  color: #ff5c42 !important;
}

[data-bs-theme="dark"] .connection-modal-icon-badge.bg-label-warning {
  background-color: rgba(255, 171, 0, 0.18) !important;
  color: #ffbe3d !important;
}

/* Gentle Radar Pulse for Slow/Unstable Signal */
.connection-modal-icon-badge.is-pulsing {
  animation: connection-radar-pulse 2s infinite ease-in-out;
}

@keyframes connection-radar-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 171, 0, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(255, 171, 0, 0);
  }
}

/* Typography Synchronized with Public Sans & e-rsa Theme */
.connection-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-heading-color, #242424);
  margin-bottom: 0.5rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

[data-bs-theme="dark"] .connection-modal-title {
  color: var(--bs-heading-color, #e9e9e9);
}

.connection-modal-message {
  font-size: 0.875rem;
  color: var(--bs-body-color, var(--bs-secondary, #707070));
  line-height: 1.55;
  margin-bottom: 1.75rem;
  padding: 0 0.5rem;
}

[data-bs-theme="dark"] .connection-modal-message {
  color: rgba(255, 255, 255, 0.72);
}

/* Standardized e-rsa Primary Button (Pill, Brand Orange) */
.connection-modal-actions .btn-primary {
  background-color: var(--bs-primary, #ff5911) !important;
  border-color: var(--bs-primary, #ff5911) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.65rem 1.5rem;
  border-radius: var(--bs-btn-border-radius, 50rem) !important;
  box-shadow: 0 4px 12px rgba(255, 89, 17, 0.25);
  transition: all 0.2s ease;
}

.connection-modal-actions .btn-primary:hover,
.connection-modal-actions .btn-primary:focus {
  background-color: var(--bs-primary-dark, #d44d18) !important;
  border-color: var(--bs-primary-dark, #d44d18) !important;
  box-shadow: 0 6px 16px rgba(255, 89, 17, 0.35);
  transform: translateY(-1px);
}

.connection-modal-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 89, 17, 0.2);
}

/* ==========================================================================
   2. BACKWARD-COMPATIBILITY ALIASES
   ========================================================================== */
.connection-status-pill,
.offline-content-overlay,
.offline-alert-bar {
  display: none !important;
}