/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.flash {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  /* width, not shrink-to-fit: left:50% would otherwise cap the box at 50vw. */
  width: max-content;
  max-width: min(48rem, calc(100vw - 3rem));
  text-align: left;
  animation: flash-in 0.2s ease, flash-out 0.4s ease 3.6s forwards;
}

/* No flash-out; leaves room for the close button. */
.flash-sticky {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: flash-in 0.2s ease;
}

.flash-close {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.flash-close:hover {
  opacity: 1;
}

.flash-notice {
  background: var(--teal);
  color: var(--white);
}

.flash-alert {
  background: var(--danger);
  color: var(--white);
}

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

@keyframes flash-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}