/* social.css — Social Media Planner */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Public Sans', -apple-system, system-ui, sans-serif;
  background: #EAEDF2;
  color: #1A2942;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; }
textarea { resize: vertical; }
::placeholder { color: #9AA6BC; }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popIn   { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ── hover utilities ─────────────────────────────────────────────────────── */
.hov-blue:hover        { background: #10356f !important; }
.hov-light:hover       { background: #EEF2F8 !important; color: #17458F !important; }
.hov-row:hover         { background: #FBFCFE !important; }
.hov-generate:hover    { background: #F9E6B6 !important; }
.hov-outline:hover     { background: #EEF2F8 !important; }
.hov-red:hover         { background: #F8E6E6 !important; }
.hov-green:hover       { background: #138a3e !important; }
.hov-amber:hover       { background: #FFF8EC !important; }
.hov-filter:hover      { filter: brightness(.96); }
.hov-collapse:hover    { background: #EEF2F8 !important; }

/* ── scrollable overflow containers ────────────────────────────────────────── */
.board-scroll { overflow-x: auto; padding-bottom: 10px; }

/* ── modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(13,28,58,.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  background: #0E2A57; color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font: 700 13px 'Public Sans';
  box-shadow: 0 10px 30px rgba(13,28,58,.35);
  display: flex; align-items: center; gap: 9px;
  animation: fadeUp .18s ease;
}

/* ── caption white-space ─────────────────────────────────────────────────── */
.caption-body { white-space: pre-wrap; }