/* app/assets/stylesheets/components/flash.css
   ─────────────────────────────────────────────────────────────────────────────
   Flash banners. Slide down from top. Auto-dismiss via Stimulus alert_controller.
   ───────────────────────────────────────────────────────────────────────────── */

.flash-region {
  position:   sticky;
  top:        var(--masthead-height);
  z-index:    var(--z-flash);
  width:      100%;
}

.flash {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-3) var(--space-6);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     500;
  animation:       flash-in var(--transition-normal) ease;
}

@keyframes flash-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Notice — green tint for success */
.flash--notice {
  background:   var(--color-green-100);
  color:        var(--color-green-700);
  border-bottom: 1px solid var(--color-green-600);
}

/* Alert — red tint for errors and warnings */
.flash--alert {
  background:   var(--color-red-100);
  color:        var(--color-red-700);
  border-bottom: 1px solid var(--color-red-600);
}

/* Warning — amber tint */
.flash--warning {
  background:   var(--color-amber-100);
  color:        var(--color-amber-700);
  border-bottom: 1px solid var(--color-amber-500);
}

/* Info — blue tint */
.flash--info {
  background:   var(--color-blue-050);
  color:        var(--color-blue-700);
  border-bottom: 1px solid var(--color-blue-200);
}

.flash__message {
  flex: 1;
  line-height: var(--leading-snug);
}

.flash__dismiss {
  flex-shrink:  0;
  font-size:    18px;
  line-height:  1;
  color:        inherit;
  opacity:      0.6;
  background:   none;
  border:       none;
  cursor:       pointer;
  padding:      0;
  transition:   opacity var(--transition-fast);
}

.flash__dismiss:hover {
  opacity: 1;
}

/* Slide out animation class toggled by Stimulus */
.flash--dismissed {
  animation:  flash-out var(--transition-normal) ease forwards;
}

@keyframes flash-out {
  from { transform: translateY(0);    opacity: 1; max-height: 100px; }
  to   { transform: translateY(-8px); opacity: 0; max-height: 0; padding: 0; }
}

/* ── Standalone flash (auth pages, forms) ────────────────────────────────── */

.flash--inline {
  position:      static;
  border-radius: var(--radius-md);
  border:        1px solid;
  margin-bottom: var(--space-4);
}

.flash--inline.flash--notice  { border-color: var(--color-green-600); }
.flash--inline.flash--alert   { border-color: var(--color-red-600); }
.flash--inline.flash--warning { border-color: var(--color-amber-500); }