/* ============================================================
   Dream Quarters — unified feedback system
   Toasts, flash banners, loading overlay, button busy states.
   Plain CSS on purpose: the Tailwind build is purged, so new
   utilities would not exist. Tokens mirror tailwind.config.js.
   ============================================================ */

:root {
  --dq-paper: #FAF6F0;
  --dq-paper-50: #FDFBF7;
  --dq-ink: #2C2622;
  --dq-ink-soft: #5C5248;
  --dq-leather: #6B4226;
  --dq-leather-light: #B17457;
  --dq-pine: #3F4A3C;
  --dq-hairline: #E7DFD3;
  --dq-error: #A3352B;
  --dq-error-soft: #FBEFED;
  --dq-amber: #8A6D1F;
  --dq-amber-soft: #FBF4E2;
  --dq-pine-soft: #EEF2ED;
  --dq-shadow: 0 4px 12px rgba(44, 38, 34, .08), 0 12px 32px rgba(44, 38, 34, .12);
}

/* ---------- toast stack ---------- */
.dq-toast-stack {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 640px) {
  .dq-toast-stack { top: auto; bottom: 1.25rem; }
}

.dq-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: #FFFFFF;
  color: var(--dq-ink);
  border: 1px solid var(--dq-hairline);
  border-left: 4px solid var(--dq-leather);
  border-radius: .875rem;
  padding: .8rem .9rem .8rem 1rem;
  font-size: .92rem;
  line-height: 1.45;
  box-shadow: 0 6px 16px rgba(44, 38, 34, .14), 0 16px 40px rgba(44, 38, 34, .18);
  animation: dq-toast-in .28s cubic-bezier(.2, .8, .3, 1);
}
.dq-toast.dq-out { animation: dq-toast-out .22s ease forwards; }
.dq-toast--success { border-left-color: var(--dq-pine); }
.dq-toast--error   { border-left-color: var(--dq-error); }
.dq-toast--warning { border-left-color: var(--dq-amber); }

.dq-toast__icon {
  flex-shrink: 0;
  width: 1.3rem; height: 1.3rem;
  margin-top: .05rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .78rem; font-weight: 700;
  color: #fff;
  background: var(--dq-leather);
}
.dq-toast--success .dq-toast__icon { background: var(--dq-pine); }
.dq-toast--error   .dq-toast__icon { background: var(--dq-error); }
.dq-toast--warning .dq-toast__icon { background: var(--dq-amber); }

.dq-toast__msg { flex: 1; padding-top: .05rem; overflow-wrap: anywhere; }

.dq-toast__close {
  flex-shrink: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--dq-ink-soft);
  font-size: 1rem; line-height: 1;
  padding: .15rem .25rem;
  border-radius: .4rem;
}
.dq-toast__close:hover { color: var(--dq-ink); background: var(--dq-hairline); }

@keyframes dq-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
  @keyframes dq-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@keyframes dq-toast-out {
  to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* ---------- flash banners (server-rendered, post-redirect) ---------- */
.dq-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--dq-hairline);
  border-left: 4px solid var(--dq-leather);
  border-radius: .875rem;
  background: var(--dq-paper-50);
  color: var(--dq-ink);
  font-size: .95rem;
  line-height: 1.5;
}
.dq-banner--success { border-left-color: var(--dq-pine);  background: var(--dq-pine-soft); }
.dq-banner--error   { border-left-color: var(--dq-error); background: var(--dq-error-soft); }
.dq-banner--warning { border-left-color: var(--dq-amber); background: var(--dq-amber-soft); }
.dq-banner .dq-toast__icon { margin-top: .12rem; }
.dq-banner .dq-toast__close { margin-left: auto; }

/* ---------- loading overlay ---------- */
.dq-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(44, 38, 34, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.dq-overlay.dq-show { opacity: 1; }
/* Tailwind's .hidden loads BEFORE this file; two-class specificity ensures
   the toggle mechanic (classList add/remove 'hidden') keeps working. */
.dq-overlay.hidden { display: none; }
.dq-overlay__card {
  background: var(--dq-paper-50);
  border-radius: 1.1rem;
  box-shadow: var(--dq-shadow);
  padding: 2rem 2.4rem;
  text-align: center;
  max-width: min(22rem, calc(100vw - 3rem));
}
.dq-overlay__title {
  font-weight: 700;
  color: var(--dq-ink);
  font-size: 1.02rem;
  margin: 1rem 0 .25rem;
}
.dq-overlay__sub {
  color: var(--dq-ink-soft);
  font-size: .86rem;
  line-height: 1.45;
  min-height: 1.3em;
}

/* ---------- spinner (ring, leather) ---------- */
.dq-spinner {
  display: inline-block;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 3px solid var(--dq-hairline);
  border-top-color: var(--dq-leather);
  animation: dq-spin .8s linear infinite;
}
.dq-spinner--sm { width: 1.05rem; height: 1.05rem; border-width: 2px; }
@keyframes dq-spin { to { transform: rotate(360deg); } }

/* ---------- button busy state ---------- */
.dq-busy {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.dq-busy .dq-btn-label { visibility: hidden; }
.dq-busy::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.1rem; height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: dq-spin .8s linear infinite;
}
.dq-busy--dark::after {
  border-color: var(--dq-hairline);
  border-top-color: var(--dq-leather);
}

@media (prefers-reduced-motion: reduce) {
  .dq-toast, .dq-toast.dq-out { animation: none; }
  .dq-overlay { transition: none; }
  .dq-spinner, .dq-busy::after { animation-duration: 1.6s; }
}