/* website/static/css/base/alerts.css */

/* ------------------------------------------------------------
   GLOBAL ALERT SYSTEM (Theme-Aware + Glass + Unified Motion)
   website/static/css/base/alerts.css
------------------------------------------------------------
   PURPOSE:
   A clean, unified alert + flash message system that matches the
   luxury glass aesthetic of your dashboards, cards, notes, and
   forms. Fully theme-aware and animation-consistent.

   FEATURES:
   ✓ Base glass alert
   ✓ Semantic variants (success, danger, warning, info)
   ✓ Smooth fade-in using global animation system
   ✓ Responsive scaling
------------------------------------------------------------ */


/* ============================================================
   1) BASE ALERT STYLE
============================================================ */
.alert,
.flash {
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
  font-weight: 600;

  border-radius: var(--radius-base);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  box-shadow: var(--shadow-light);

  /* Unified fade-in from global animation system */
  opacity: 0;
  animation: fadeIn var(--transition-medium) forwards;
}



/* ============================================================
   2) SEMANTIC VARIANTS
============================================================ */

/* Success */
.alert-success,
.flash.success {
  background: rgba(var(--color-success-rgb, 40,167,69), 0.15);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Danger */
.alert-danger,
.flash.danger {
  background: rgba(var(--color-danger-rgb, 220,53,69), 0.15);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Warning */
.alert-warning,
.flash.warning {
  background: rgba(var(--color-warning-rgb, 255,193,7), 0.15);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* Info */
.alert-info,
.flash.info {
  background: rgba(var(--color-info-rgb, 23,162,184), 0.15);
  border-color: var(--color-info);
  color: var(--color-info);
}



/* ============================================================
   3) CLOSE BUTTON
============================================================ */
.alert-close {
  float: right;
  background: transparent;
  border: none;

  font-size: 1.2rem;
  cursor: pointer;
  color: inherit;

  transition: color var(--transition-fast);
}

.alert-close:hover {
  color: var(--color-gold);
}



/* ============================================================
   4) RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 480px) {
  .alert,
  .flash {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }
}