/* ==========================================================
   AgencyOS - Alert Modal Styles

   Unified alert modal system that replaces native alert()
   with branded modals matching the existing modal design.

   All alerts use consistent brand styling (8px brand border,
   brand-colored button) with optional icons for semantic
   clarity.
   ========================================================== */

/* ========================================
   ALERT MODAL SIZING
   ======================================== */

/**
 * Alert modal dialog sizing
 * Smaller than standard modals for quick messages
 */
.modal-dialog--alert {
  max-width: 450px;
  border: 8px solid var(--c-brand); /* Consistent 8px brand border like other modals */
}

/* ========================================
   ALERT HEADER
   ======================================== */

/**
 * Alert header - uses standard modal header styling
 * No color variations or gradients - keeps it brand-consistent
 */
.modal-header--alert {
  /* Inherits from .modal-header in modals.css */
  /* No custom styling needed - maintains consistency */
}

/**
 * Alert title (no icon)
 */
.modal-title--alert {
  /* Inherits standard modal title styling - no icon needed */
}

/**
 * Hide alert icon (not used)
 */
.modal-icon--alert {
  display: none;
}

/* ========================================
   ALERT BODY
   ======================================== */

/**
 * Alert body content
 * Scrollable for long messages
 */
.modal-body--alert {
  padding: var(--spacing-xl);
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.6;
  color: var(--c-gray-800);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/**
 * Custom scrollbar for alert body (matches existing modal scrollbars)
 */
.modal-body--alert::-webkit-scrollbar {
  width: 8px;
}

.modal-body--alert::-webkit-scrollbar-track {
  background: var(--c-gray-100);
  border-radius: var(--radius-sm);
}

.modal-body--alert::-webkit-scrollbar-thumb {
  background: var(--c-gray-400);
  border-radius: var(--radius-sm);
}

.modal-body--alert::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-500);
}

/* ========================================
   ALERT FOOTER
   ======================================== */

/**
 * Alert footer - centered button
 */
.modal-footer--alert {
  padding: var(--spacing-lg) var(--spacing-xl);
  justify-content: center;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/**
 * Mobile adjustments
 * Border and height remain consistent across all screen sizes
 */
@media (max-width: 768px) {
  .modal-dialog--alert {
    max-width: 90%;
  }

  /* Confirm modal: buttons on same line, stretched evenly */
  #confirmModal .modal-footer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
  }

  #confirmModal .modal-footer .btn {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}