:root {
  --background: #fafafa;
  --foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --card: #ffffff;
  --primary: #d44c39;
  --primary-foreground: #ffffff;
  --danger: #b91c1c;
  --radius: 0.5rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.5;
}

a { color: var(--foreground); }
a:hover { color: var(--primary); }

/* Link-styled buttons must keep their own text color (beat a / a:hover). */
a.btn,
a.btn:hover,
a.btn:focus {
  color: var(--foreground);
  text-decoration: none;
}
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
  color: var(--primary-foreground);
}
a.btn-danger,
a.btn-danger:hover,
a.btn-danger:focus {
  color: var(--danger);
}

.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }

.admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.admin-brand {
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.admin-nav a {
  text-decoration: none;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.admin-nav a:hover { color: var(--foreground); }
.admin-nav a.is-active {
  color: var(--foreground);
  font-weight: 600;
}

.admin-main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.admin-main h1,
.login-card h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.admin-main h2 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.125rem;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-panel {
  width: 100%;
  max-width: 400px;
}

.login-card {
  width: 100%;
}

.login-panel > .admin-brand {
  display: block;
  margin: 0 0 0.75rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.card + .card { margin-top: 1rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

a.stat-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.stat-card:hover {
  color: inherit;
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

a.stat-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.stat-card .label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.stat-card .value {
  font-size: 1.5rem;
  font-weight: 600;
}

.flash {
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background: var(--muted);
}

.flash-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger);
}

.flash-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.form-group { margin-bottom: 0.875rem; }

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.input,
textarea.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}

textarea.input { min-height: 6rem; resize: vertical; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--muted); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.95);
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-secondary { background: var(--card); color: var(--foreground); }

.btn-danger {
  background: var(--card);
  border-color: #fecaca;
  color: var(--danger);
}

.btn-danger:hover,
.btn-danger:focus {
  background: #fef2f2;
  color: var(--danger);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th,
.table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--muted);
  font-weight: 500;
  color: var(--muted-foreground);
}

.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fcfcfc; }

.table td a {
  text-decoration: none;
  font-weight: 500;
}

.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.filter-row a:not(.btn) { color: var(--muted-foreground); text-decoration: none; }
.filter-row a:not(.btn):hover { color: var(--primary); }
.filter-row a:not(.btn).is-active {
  color: var(--foreground);
  font-weight: 600;
}

/* Keep primary CTAs readable inside filter toolbars */
.filter-row a.btn-primary,
.filter-row a.btn-primary:hover {
  color: var(--primary-foreground);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filter-bar .form-group {
  margin-bottom: 0;
  min-width: 10rem;
  flex: 1 1 10rem;
}

.filter-bar .filter-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.badge-sub-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.badge-sub-unsubscribed {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
}

.empty {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  padding: 1rem 0;
}

.meta-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.meta-list li { margin-bottom: 0.35rem; color: var(--muted-foreground); }
.meta-list strong { color: var(--foreground); font-weight: 500; }

.pre-block {
  overflow-x: auto;
  padding: 0.75rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.75rem;
}

.inline-form { display: inline; }

/* —— Announcement CRUD layout —— */
.page-head { margin-bottom: 1.25rem; }
.page-back {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.page-back:hover { color: var(--primary); }
.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.page-head-row h1 { margin: 0; }
.page-head-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.form-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 400;
}
.form-hint strong { color: var(--foreground); font-weight: 500; }

/* Compact how-to tips for CMS end users */
.page-guide {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}
.page-guide-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.page-guide > p {
  margin: 0 0 0.45rem;
  color: var(--foreground);
}
.page-guide > p:last-child { margin-bottom: 0; }
.page-guide ol,
.page-guide ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}
.page-guide li { margin: 0.2rem 0; }
.page-guide li strong { color: var(--foreground); font-weight: 500; }
.login-card .page-guide {
  margin: 0 0 1rem;
  text-align: left;
}

.req { color: var(--primary); font-weight: 600; }

.form-section { margin-bottom: 0; }
.form-section + .form-section,
.ann-form .form-section + .form-section,
.form-section + details.form-section,
.ann-form > .form-section + .card { margin-top: 1rem; }

.form-section-head { margin-bottom: 1rem; }
.form-section-head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.form-section-head .form-hint { margin-top: 0.25rem; }

.form-grid {
  display: grid;
  gap: 0 1rem;
}
.form-grid-2 {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

.attachment-list { display: flex; flex-direction: column; gap: 0.5rem; }
.attachment-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.attachment-row-head {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
@media (min-width: 720px) {
  .attachment-row { grid-template-columns: minmax(10rem, 0.4fr) 1fr; }
  .attachment-row-head { display: grid; }
}

.form-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  user-select: none;
}
.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--muted-foreground);
  transition: transform 0.12s ease;
}
.form-disclosure[open] > summary::before { transform: rotate(90deg); }
.form-disclosure-title {
  display: inline;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.form-disclosure > summary .form-hint { display: inline; margin: 0; }
.form-disclosure-body { margin-top: 1rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }

.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.875rem 1.25rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 0.04);
}

.status-card { margin-bottom: 1rem; }
.meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.25rem;
  margin: 0;
}
@media (min-width: 720px) {
  .meta-grid { grid-template-columns: 1fr 1fr; }
}
.meta-grid dt {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
}
.meta-grid dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  word-break: break-word;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}
.empty-inline { color: var(--muted-foreground); }

.actions-card { margin-bottom: 1rem; }
.btn-row-flush { margin-top: 0; }

.badge-state-published {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.badge-state-pending_review {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.badge-state-archived {
  background: var(--muted);
  color: var(--muted-foreground);
}

button.badge-state-toggle {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.badge-state-toggle:hover {
  filter: brightness(0.96);
  outline: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  outline-offset: 1px;
}
button.badge-state-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modal-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  max-width: 28rem;
  width: calc(100% - 2rem);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.12);
}
.modal-card::backdrop { background: rgb(24 24 27 / 0.45); }
.modal-inner { padding: 1.25rem; }
.modal-inner h2 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.modal-inner .modal-body-text {
  margin: 0 0 1rem;
  white-space: pre-line;
}

/* Sync-now modal (longer-running admin action) */
.modal-card-sync {
  max-width: 26rem;
}
.modal-card-sync .modal-lead {
  margin: 0 0 1rem;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
}
.modal-card-sync .modal-lead[hidden] { display: none; }
.sync-step[hidden] { display: none; }
.sync-callout {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.sync-callout strong {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.sync-callout-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.sync-callout-ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.sync-callout-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.sync-checklist {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.sync-checklist li { margin: 0.25rem 0; }
.sync-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0.25rem 0 0.25rem;
  padding: 1rem 0.15rem 0.35rem;
}
.sync-progress-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sync-progress-copy strong {
  font-size: 0.95rem;
  color: var(--foreground);
}
.sync-progress-copy span {
  font-size: 0.875rem;
  color: var(--foreground);
}
.sync-progress-sub {
  color: var(--muted-foreground) !important;
  margin-top: 0.15rem;
}
.sync-now-spinner {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid #fbbf24;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sync-now-spin 0.7s linear infinite;
}
.sync-now-spinner-lg {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-width: 2.5px;
  border-color: var(--primary);
  border-top-color: transparent;
}
@keyframes sync-now-spin {
  to { transform: rotate(360deg); }
}

.ann-form { display: block; }

/* Wider canvas for long announcement forms */
.admin-main:has(.ann-form) { max-width: 880px; }

/* —— Email alert detail —— */
.badge-alert-draft {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.badge-alert-scheduled {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.badge-alert-sent,
.badge-alert-sending {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.badge-alert-cancelled,
.badge-alert-failed {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
}

.schedule-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.schedule-row .input {
  flex: 1 1 14rem;
  max-width: 20rem;
}
.schedule-field { margin-bottom: 0; }

.content-preview {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
}
.content-preview-html {
  padding: 0.75rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  max-height: 20rem;
  overflow-y: auto;
}
.content-preview-html img { max-width: 100%; height: auto; }

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.checkbox-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.5rem 0.65rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  cursor: pointer;
}
.checkbox-row:hover { background: var(--muted); }
.checkbox-row input { margin-top: 0.2rem; }
.checkbox-title { display: block; font-weight: 500; }
.checkbox-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.1rem;
}