/* MMS Notification CRM — navy / yellow / white theme */
:root {
  --navy: #0f2557;
  --navy-dark: #0a1a3f;
  --navy-light: #1d3a7a;
  --yellow: #ffc72c;
  --yellow-dark: #e0ab0f;
  --white: #ffffff;
  --bg: #f4f6fb;
  --text: #1c2333;
  --muted: #667085;
  --border: #dfe4ee;
  --danger: #c0392b;
  --success: #1e7e46;

  /* Accent palette — one colour per notification type and admin area, so
     screens are recognisable at a glance. */
  --c-red: #d7263d;
  --c-red-soft: #fde8ea;
  --c-orange: #e8590c;
  --c-orange-soft: #fdeee3;
  --c-amber: #b8860b;
  --c-amber-soft: #fff3d1;
  --c-green: #1e7e46;
  --c-green-soft: #ddf2e5;
  --c-teal: #0d7d84;
  --c-teal-soft: #ddf1f2;
  --c-blue: #1d3a7a;
  --c-blue-soft: #e3e9f7;
  --c-purple: #6741a5;
  --c-purple-soft: #ede7f8;
  --c-pink: #b03060;
  --c-pink-soft: #fce4ed;

  --radius: 10px;
  --shadow: 0 2px 10px rgba(15, 37, 87, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 37, 87, 0.16);
}

/* ---------- Icons ---------- */
.icon { flex: none; vertical-align: -0.18em; }
.icon-inline { margin-right: 6px; }

/* Circular icon chip used in tiles, headings, and list rows */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-blue-soft); color: var(--navy); flex: none;
}
.icon-chip.sm { width: 32px; height: 32px; border-radius: 9px; }
.icon-chip.red    { background: var(--c-red-soft);    color: var(--c-red); }
.icon-chip.orange { background: var(--c-orange-soft); color: var(--c-orange); }
.icon-chip.amber  { background: var(--c-amber-soft);  color: var(--c-amber); }
.icon-chip.green  { background: var(--c-green-soft);  color: var(--c-green); }
.icon-chip.teal   { background: var(--c-teal-soft);   color: var(--c-teal); }
.icon-chip.blue   { background: var(--c-blue-soft);   color: var(--c-blue); }
.icon-chip.purple { background: var(--c-purple-soft); color: var(--c-purple); }
.icon-chip.pink   { background: var(--c-pink-soft);   color: var(--c-pink); }
.icon-chip.navy   { background: var(--navy);          color: var(--yellow); }

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Full-height column so the footer rests on the bottom of the window on
     short pages instead of floating mid-screen. The loading overlay is
     position:fixed, so it stays out of this flow. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Takes up the slack, pushing the footer down.
   width:100% is required, not decorative: these children use `margin: 0 auto`
   to centre themselves, and an auto margin on the cross axis switches off flex
   stretching. Without a definite width they collapse to their content width,
   which on a wide screen leaves the page hugging the left. */
body > main,
body > header,
body > footer { width: 100%; }
body > main { flex: 1 0 auto; }
a { color: var(--navy-light); }
h1, h2, h3 { color: var(--navy); margin-top: 0; }

/* ---------- Loading screen ---------- */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; color: var(--white);
  transition: opacity .4s ease, visibility .4s;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; }
.loading-logo { font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; }
.loading-logo span { color: var(--yellow); }
.loading-bar {
  width: 220px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.2); overflow: hidden;
}
.loading-bar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--yellow); border-radius: 3px;
  animation: loading-slide 1.1s ease-in-out infinite;
}
@keyframes loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* ---------- Header / nav ---------- */
.topbar {
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; min-height: 58px; flex-wrap: wrap;
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 100;
}
.topbar .brand { font-weight: 700; font-size: 1.05rem; color: var(--white); text-decoration: none; }
.topbar .brand span { color: var(--yellow); }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: #d6ddef; text-decoration: none; padding: 8px 12px; border-radius: 6px;
  font-size: .92rem; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar nav a:hover { background: var(--navy-light); color: var(--white); }
.topbar nav a.active { background: var(--yellow); color: var(--navy); font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: .85rem; color: #b9c4dd; }
.account-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: #d6ddef; text-decoration: none; font-size: .85rem;
  padding: 6px 11px; border-radius: 7px; transition: background .15s, color .15s;
}
.account-link:hover, .account-link.active { background: var(--navy-light); color: var(--white); }
.account-link small { color: #93a3c6; font-size: .75rem; }
.account-link:hover small, .account-link.active small { color: #c9d4ea; }
@media (max-width: 760px) { .account-link span { display: none; } }
.topbar form { margin: 0; }

/* ---------- Layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px;
}
.card h2 { font-size: 1.15rem; }

.tile-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tile {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 22px;
  text-decoration: none; color: var(--text);
  border-top: 4px solid var(--navy);
  transition: transform .18s ease, box-shadow .18s ease;
  display: block; position: relative; overflow: hidden;
}
.tile::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: currentColor; opacity: .05; pointer-events: none;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile .tile-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.tile h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--navy); }
.tile p { margin: 0; color: var(--muted); font-size: .88rem; }
.tile .tile-go {
  margin-top: 12px; font-size: .84rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Per-type tile colours */
.tile.red    { border-top-color: var(--c-red);    color: var(--c-red); }
.tile.orange { border-top-color: var(--c-orange); color: var(--c-orange); }
.tile.amber  { border-top-color: var(--c-amber);  color: var(--c-amber); }
.tile.teal   { border-top-color: var(--c-teal);   color: var(--c-teal); }
.tile.purple { border-top-color: var(--c-purple); color: var(--c-purple); }
.tile.blue   { border-top-color: var(--c-blue);   color: var(--c-blue); }
.tile.green  { border-top-color: var(--c-green);  color: var(--c-green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  border-radius: 8px; padding: 10px 18px; font-size: .95rem; font-weight: 600;
  text-decoration: none; transition: background .15s, transform .1s;
  font-family: inherit;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-light); }
.btn-accent { background: var(--yellow); color: var(--navy); }
.btn-accent:hover { background: var(--yellow-dark); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .92rem; color: var(--navy); }
.field .required-star { color: var(--danger); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=date], .field input[type=time],
.field input[type=datetime-local], .field input[type=tel], .field input[type=url],
.field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: .95rem; font-family: inherit; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(29, 58, 122, .15);
}
.field textarea { min-height: 96px; resize: vertical; }
.field .error { color: var(--danger); font-size: .82rem; margin-top: 4px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-row label { font-weight: 400; display: flex; align-items: center; gap: 6px; }
.form-grid { display: grid; gap: 0 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.form-grid .field-wide { grid-column: 1 / -1; }

/* ---------- Multi-step wizard ---------- */
.wizard-progress { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.wizard-progress .step {
  flex: 1; min-width: 130px; text-align: center; padding: 10px 8px;
  background: var(--white); border-radius: 8px; border: 1.5px solid var(--border);
  font-size: .85rem; color: var(--muted); position: relative;
}
.wizard-progress .step.active { border-color: var(--navy); color: var(--navy); font-weight: 700; background: #eef2fb; }
.wizard-progress .step.done { border-color: var(--success); color: var(--success); }
.wizard-step { display: none; animation: step-in .25s ease; }
.wizard-step.active { display: block; }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.autosave-note { font-size: .8rem; color: var(--muted); align-self: center; }

/* ---------- Repeater ---------- */
.repeater-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.repeater-row .field { flex: 1; min-width: 180px; margin-bottom: 0; }
.repeater-row .remove-row { margin-bottom: 2px; }

/* ---------- Searchable dropdown ---------- */
.lookup-wrap { position: relative; }
.lookup-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; margin-top: 4px;
}
.lookup-results div { padding: 9px 12px; cursor: pointer; font-size: .9rem; }
.lookup-results div:hover { background: #eef2fb; }
.lookup-results .lookup-meta { color: var(--muted); font-size: .8rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  font-size: .9rem;
}
table.data th {
  background: var(--navy); color: var(--white); text-align: left;
  padding: 11px 13px; font-weight: 600; white-space: nowrap;
}
table.data td { padding: 10px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #f8fafd; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.badge-navy { background: #e3e9f7; color: var(--navy); }
.badge-yellow { background: #fff3d1; color: #8a6400; }
.badge-green { background: #ddf2e5; color: var(--success); }
.badge-red { background: #fbe3e0; color: var(--danger); }
.badge-gray { background: #eceff4; color: var(--muted); }

/* ---------- Alerts ---------- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.alert-success { background: #ddf2e5; color: var(--success); border: 1px solid #b3e0c4; }
.alert-error { background: #fbe3e0; color: var(--danger); border: 1px solid #f2beb7; }
.alert-info { background: #e3e9f7; color: var(--navy); border: 1px solid #c3d0ec; }

/* ---------- Modal (acknowledgement) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 26, 63, .65); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--white); border-radius: 14px; max-width: 520px; width: 100%;
  padding: 28px; box-shadow: var(--shadow-lg); animation: modal-in .25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal h2 { margin-top: 0; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---------- Stats / analytics ---------- */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 20px; }
.stat {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; border-left: 4px solid var(--yellow);
}
.stat .stat-value { font-size: 1.6rem; font-weight: 800; color: var(--navy); }
.stat .stat-label { font-size: .8rem; color: var(--muted); }
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { margin-bottom: 8px; font-size: .88rem; }
.bar-list .bar-track { background: #eceff4; border-radius: 4px; height: 10px; overflow: hidden; margin-top: 3px; }
.bar-list .bar-fill { height: 100%; background: var(--navy); border-radius: 4px; }

/* ---------- Admin tab strip ---------- */
.admin-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 8px; text-decoration: none;
  font-size: .87rem; font-weight: 600; color: var(--navy);
  background: #f4f6fb; border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, transform .1s;
}
.admin-tab:hover { background: var(--c-blue-soft); border-color: #ccd8f0; }
.admin-tab .icon { opacity: .75; }
.admin-tab.active { color: var(--white); }
.admin-tab.active .icon { opacity: 1; }
.admin-tab.active.blue   { background: var(--c-blue); }
.admin-tab.active.teal   { background: var(--c-teal); }
.admin-tab.active.purple { background: var(--c-purple); }
.admin-tab.active.orange { background: var(--c-orange); }
.admin-tab.active.pink   { background: var(--c-pink); }
.admin-tab.active.green  { background: var(--c-green); }
.admin-tab.active.red    { background: var(--c-red); }
.admin-tab.active.amber  { background: var(--c-amber); }

/* ---------- Rule builder ("if this, then that") ---------- */
.rule-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 12px; background: var(--white);
  border-left: 5px solid var(--c-purple);
}
.rule-card.always { border-left-color: var(--c-green); }
.rule-card.off { opacity: .6; border-left-color: var(--muted); }

/* A rule reads as a sentence: [IF] [field] [is] [value] [THEN notify] [group] */
.rule-sentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .92rem;
}
.rule-kw {
  font-weight: 800; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  background: var(--c-purple-soft); color: var(--c-purple);
}
.rule-kw.then { background: var(--c-teal-soft); color: var(--c-teal); }
.rule-kw.always { background: var(--c-green-soft); color: var(--c-green); }
.rule-token {
  background: #eef2fb; border: 1px solid #ccd8f0; border-radius: 6px;
  padding: 4px 10px; font-weight: 600; color: var(--navy);
}
.rule-token.value { background: var(--c-amber-soft); border-color: #f0dda6; color: #7a5a00; }
.rule-token.group { background: var(--c-teal-soft); border-color: #b6e0e3; color: var(--c-teal); }
.rule-sentence select, .rule-sentence input {
  width: auto; min-width: 130px; padding: 7px 10px; font-size: .88rem;
}

/* Field editor rows in the form builder */
.field-row {
  border: 1.5px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; background: var(--white); overflow: hidden;
}
.field-row > summary {
  padding: 12px 14px; cursor: pointer; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; list-style: none;
}
.field-row > summary::-webkit-details-marker { display: none; }
.field-row > summary:hover { background: #f8fafd; }
.field-row[open] > summary { background: #eef2fb; border-bottom: 1px solid var(--border); }
.field-row .field-label { font-weight: 700; color: var(--navy); }
.field-row .field-key { font-family: monospace; font-size: .78rem; color: var(--muted); }
.field-row .field-body { padding: 16px 14px; }
.field-row.inactive { opacity: .62; }

/* ---------- Drag-and-drop question board ---------- */
.step-group {
  border: 1.5px solid var(--border); border-radius: 12px;
  margin-bottom: 16px; background: #fbfcfe; overflow: hidden;
}
.step-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--c-blue-soft);
  border-bottom: 1.5px solid var(--border); color: var(--navy);
}
.step-badge {
  background: var(--navy); color: var(--white); border-radius: 999px;
  padding: 3px 11px; font-size: .74rem; font-weight: 800; letter-spacing: .03em;
}
.step-count { margin-left: auto; font-size: .78rem; color: var(--muted); }

.drop-zone { padding: 10px; min-height: 56px; transition: background .15s; }
.drop-zone.drag-over { background: #eef7ff; box-shadow: inset 0 0 0 2px var(--navy-light); }
.drop-zone .field-row { margin-bottom: 8px; }
.drop-zone .field-row:last-child { margin-bottom: 0; }
.drop-empty {
  margin: 0; padding: 14px; text-align: center; color: var(--muted);
  font-size: .85rem; border: 2px dashed var(--border); border-radius: 8px;
}

.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: grab; padding: 2px 4px; border-radius: 5px;
  flex: none; touch-action: none;
}
.drag-handle:hover { color: var(--navy); background: var(--c-blue-soft); }
.drag-handle:active { cursor: grabbing; }
.field-row.dragging {
  opacity: .55; outline: 2px dashed var(--navy-light);
  transform: rotate(.4deg);
}

/* Sticky bar shown only while there are unsaved moves */
.save-bar {
  position: sticky; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--navy); color: var(--white);
  border-radius: 10px; padding: 12px 16px; margin-top: 14px;
  box-shadow: var(--shadow-lg); font-size: .9rem;
}
.save-bar[hidden] { display: none; }
.save-bar .btn-outline { color: var(--white); border-color: #4a5f95; }
.save-bar .btn-outline:hover { background: var(--navy-light); color: var(--white); }

/* Up/down reorder controls in the question list */
.move-controls { display: inline-flex; gap: 3px; }
.move-controls form { margin: 0; }
.btn-move {
  border: 1.5px solid var(--border); background: var(--white); color: var(--navy);
  border-radius: 6px; width: 28px; height: 28px; cursor: pointer;
  font-size: .95rem; line-height: 1; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.btn-move:hover:not(:disabled) { background: var(--c-blue-soft); border-color: var(--navy-light); }
.btn-move:disabled { opacity: .3; cursor: not-allowed; }

.type-pill {
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--c-blue-soft); color: var(--c-blue); white-space: nowrap;
}
.type-pill.choice { background: var(--c-purple-soft); color: var(--c-purple); }
.type-pill.auto   { background: #eceff4; color: var(--muted); }

/* Options list editor */
.option-list { list-style: none; padding: 0; margin: 0 0 8px; }
.option-list li {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.option-list li input { flex: 1; }

/* Recipient preview */
.preview-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.group-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-teal-soft); color: var(--c-teal);
  border-radius: 999px; padding: 5px 13px; font-size: .85rem; font-weight: 600;
}
.group-chip.muted { background: #eceff4; color: var(--muted); }

/* ---------- Filters bar ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; min-width: 140px; }
.filters .field label { font-size: .78rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; list-style: none; padding: 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-block; padding: 6px 12px; border-radius: 6px; text-decoration: none;
  background: var(--white); border: 1px solid var(--border); color: var(--navy); font-size: .88rem;
}
.pagination .active span { background: var(--navy); color: var(--white); }
.pagination .disabled span { opacity: .5; }

/* ---------- Detail definition list ---------- */
.detail-grid { display: grid; grid-template-columns: 220px 1fr; gap: 8px 16px; font-size: .92rem; }
.detail-grid dt { font-weight: 600; color: var(--navy); }
.detail-grid dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } .detail-grid dt { margin-top: 8px; } }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-light) 100%); }
.auth-stack { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }

/* Organisation logo above the white sign-in box. Scales down on small
   screens and never overflows, whatever size file is uploaded. */
.auth-logo-image {
  display: block;
  max-width: min(300px, 78vw);
  max-height: 120px;
  width: auto; height: auto;
  margin-bottom: 22px;
  object-fit: contain;
}
@media (max-width: 480px) {
  .auth-logo-image { max-height: 84px; margin-bottom: 16px; }
}
@media (max-height: 620px) {
  .auth-logo-image { max-height: 68px; margin-bottom: 14px; }
}

.auth-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; padding: 34px; }
.auth-card .auth-logo { text-align: center; font-weight: 800; font-size: 1.3rem; color: var(--navy); margin-bottom: 4px; }
.auth-card .auth-logo span { color: var(--yellow-dark); }
.auth-card .auth-sub { text-align: center; color: var(--muted); font-size: .88rem; margin-bottom: 22px; }

/* ---------- Email preview ---------- */
.preview-frame { border: 1.5px solid var(--border); border-radius: 8px; width: 100%; background: #fff; }
.preview-desktop { height: 480px; }
.preview-mobile { height: 480px; max-width: 375px; }
.editor-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.editor-toolbar button { border: 1px solid var(--border); background: var(--white); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: .85rem; }
.editor-toolbar button:hover { background: #eef2fb; }
.wysiwyg { border: 1.5px solid var(--border); border-radius: 8px; min-height: 260px; padding: 14px; background: var(--white); overflow-y: auto; }
.var-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.var-picker button { border: 1px dashed var(--navy-light); color: var(--navy); background: #eef2fb; border-radius: 999px; padding: 3px 10px; font-size: .78rem; cursor: pointer; }

/* ---------- Welcome banner ---------- */
.welcome-banner {
  background: linear-gradient(120deg, var(--navy), var(--navy-light));
  color: var(--white); border-radius: var(--radius); padding: 30px 28px; margin-bottom: 24px;
  box-shadow: var(--shadow);
  animation: banner-in .5s ease;
}
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.welcome-banner h1 { color: var(--white); margin: 0 0 6px; font-size: 1.5rem; }
.welcome-banner p { margin: 0; color: #ccd6ea; }
.welcome-banner strong { color: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .topbar { padding: 8px 12px; }
  .container { padding: 16px 12px 48px; }
  .wizard-progress .step { min-width: 100px; font-size: .75rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loading-bar::after { animation: none; width: 100%; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .filters, .btn, .pagination { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid var(--border); }
}

/* ---- Site footer ------------------------------------------------------
   Sits below the content on every page, signed in or not. Deliberately
   quiet: it must not compete with the dispatch forms above it. */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 18px 20px 26px;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  flex-shrink: 0;
}
.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  justify-content: center;
}
.site-footer a { color: inherit; text-decoration: underline; }
.site-footer a:hover { color: var(--navy); }
.site-footer strong { font-weight: 600; color: inherit; }
.site-footer-sep { opacity: .5; }

/* On the sign-in screen the footer sits on the dark panel, under the card. */
.auth-stack .site-footer {
  border-top: 0;
  margin-top: 20px;
  padding: 0;
  color: rgba(255, 255, 255, .72);
}
.auth-stack .site-footer a:hover { color: #fff; }

/* The sign-in column is only 400px wide, so the two halves always wrap.
   Stack them deliberately instead, or the separator is left dangling at the
   end of the first line with nothing after it. */
.auth-stack .site-footer-inner { flex-direction: column; gap: 2px; }
.auth-stack .site-footer-sep { display: none; }

@media (max-width: 640px) {
  .site-footer { font-size: .78rem; padding: 14px 12px 20px; }
  /* Stack the two halves rather than letting the separator dangle. */
  .site-footer-sep { display: none; }
  .site-footer-inner { flex-direction: column; gap: 2px; }
}

/* ---- Record opened from a notification --------------------------------
   Read on a phone, straight from a text, so the answer sits directly under
   its question with no indent and no wasted gap. Overrides the two-column
   grid used on the signed-in record page, which suits a desktop. */
.record-answers { display: block; }
.record-answers dt {
  font-weight: 600;
  color: var(--navy);
  margin: 14px 0 0;
}
.record-answers dt:first-child { margin-top: 0; }
.record-answers dd {
  margin: 2px 0 0;
  padding: 0;
  white-space: pre-wrap;
  color: var(--text);
}