/* menuboard admin — shadcn/ui visual language in vanilla CSS.
 * Same component patterns, design tokens, and aesthetic as shadcn's
 * default theme: near-black primary, white surfaces, zinc borders,
 * tight Inter typography, generous whitespace.
 *
 * Class names unchanged from prior version → templates need no edits.
 */

:root {
  /* shadcn-derived theme, hue-warmed for the restaurant admin context.
   * Page background is a faint warm cream so white cards visibly lift
   * above it (the previous flat-white-on-white was too washed-out on
   * mobile). HSL triples kept so opacity composition still works. */
  --background:           34 38% 96.5%;       /* warm cream — page */
  --foreground:           240 10% 3.9%;
  --card:                 0 0% 100%;           /* pure white — floats above page */
  --card-foreground:      240 10% 3.9%;

  --primary:              240 5.9% 10%;
  --primary-foreground:   0 0% 98%;

  --secondary:            34 22% 93%;          /* warm-tinted neutral */
  --secondary-foreground: 240 5.9% 10%;

  --muted:                34 22% 93%;
  --muted-foreground:     240 3.8% 46.1%;

  --accent:               34 22% 93%;
  --accent-foreground:    240 5.9% 10%;

  --destructive:          0 72% 51%;
  --destructive-soft:     0 86% 97%;

  --success:              142 76% 36%;       /* emerald-600 — for status only */
  --success-soft:         140 70% 96%;

  --warning:              38 92% 50%;
  --warning-soft:         48 96% 95%;

  --border:               34 14% 86%;          /* warm zinc */
  --border-soft:          34 18% 92%;
  --input:                34 14% 86%;
  --ring:                 34 8% 65%;

  --radius:    0.5rem;     /* 8px */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-lg: 0.625rem;   /* 10px */

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* App layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-style: solid; border-width: 0; border-color: hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; }

html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

a {
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a.primary-link, .breadcrumb a { color: hsl(var(--muted-foreground)); }
a.primary-link:hover { color: hsl(var(--foreground)); text-decoration: none; }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; }

/* ───────────── Brand ───────────── */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
  padding: 16px 20px;
}
.brand__mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: hsl(var(--foreground));
  position: relative; flex-shrink: 0;
}
.brand__mark::after {
  content: ''; position: absolute; inset: 5px;
  border-radius: 2px;
  border: 1.25px solid hsl(var(--background));
  border-bottom-width: 3px;
}
.brand__text { font-family: var(--font-sans); font-weight: 600; font-size: 15px; }
.brand:hover { text-decoration: none; }
.brand--auth { padding: 0; margin-bottom: 28px; }

/* ───────────── App shell ───────────── */
body.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky; top: 0;
  align-self: start;
  height: 100vh;
  background: hsl(var(--background));
  border-right-width: 1px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.nav { flex: 1; padding: 4px 8px 16px; display: flex; flex-direction: column; gap: 2px; }

.nav-group {
  margin-top: 16px;
  padding-top: 12px;
  border-top-width: 1px;
  border-top-color: hsl(var(--border-soft));
}
.nav-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.nav-group__label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  padding: 6px 12px;
  text-transform: uppercase;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  text-align: left;
  background: transparent; border: 0; width: 100%;
  font-family: inherit;
  transition: background-color 120ms ease, color 120ms ease;
  line-height: 1.3;
}
.nav-item:hover { background: hsl(var(--accent)); text-decoration: none; }
.nav-item .icon { color: hsl(var(--muted-foreground)); }
.nav-item:hover .icon { color: hsl(var(--foreground)); }
.nav-item--active {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-weight: 600;
}
.nav-item--active .icon { color: hsl(var(--foreground)); }
.nav-item--disabled { color: hsl(var(--muted-foreground)); cursor: not-allowed; opacity: 0.6; }
.nav-item--disabled:hover { background: transparent; }
.nav-item--disabled .icon { opacity: 0.6; }
.nav-item__hint {
  margin-left: auto;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: 2px 7px;
  border-radius: 999px;
  border-width: 1px;
  border-color: hsl(var(--border));
}
.nav-item__ext { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 11px; }
.nav-item--quiet { color: hsl(var(--muted-foreground)); }

.sidebar__foot {
  padding: 8px;
  border-top-width: 1px;
  display: flex; flex-direction: column; gap: 4px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
}
.user-chip__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.user-chip__meta { min-width: 0; }
.user-chip__name { font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip__sub  { font-size: 11.5px; color: hsl(var(--muted-foreground)); }

/* ───────────── Topbar (mobile) ───────────── */
.topbar { display: none; }

/* ───────────── Main ───────────── */
.main {
  padding: 32px 40px 64px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

/* ───────────── Page header ───────────── */
.page-header { margin-bottom: 24px; }
.breadcrumb {
  font-size: 12.5px; color: hsl(var(--muted-foreground));
  margin-bottom: 8px;
  display: flex; gap: 6px; align-items: center;
}
.breadcrumb a { color: hsl(var(--muted-foreground)); }
.breadcrumb a:hover { color: hsl(var(--foreground)); text-decoration: none; }
.breadcrumb .sep { color: hsl(var(--muted-foreground)); opacity: 0.5; }

.page-header__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

h1, .page-header__title {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
  margin: 0;
  line-height: 1.2;
}
.page-header__subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  margin-top: 4px;
}
.subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 24px;
}
h2, .card h2 {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ───────────── Cards ───────────── */
.card, form.card {
  background: hsl(var(--card));
  border-width: 1px;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 16px;
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-sm);
}

.card__header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 4px; gap: 12px;
}
.card__header h2 { margin: 0; }
.card__meta {
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  margin: 0;
}

/* ───────────── Status pills (badges) ───────────── */
.status, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-width: 1px;
  border-color: transparent;
}
.status::before, .badge--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground));
}
.status--published { background: hsl(var(--success-soft)); color: hsl(142 76% 24%); }
.status--published::before { background: hsl(var(--success)); }
.status--draft { background: hsl(var(--warning-soft)); color: hsl(28 90% 30%); }
.status--draft::before { background: hsl(var(--warning)); }

/* ───────────── Flash banners ───────────── */
.flash {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  margin-bottom: 16px;
  display: flex; gap: 10px; align-items: center;
  border-width: 1px;
  border-color: hsl(var(--border));
}
.flash--success {
  background: hsl(var(--success-soft));
  border-color: hsl(142 50% 80%);
  color: hsl(142 60% 22%);
}
.flash--error {
  background: hsl(var(--destructive-soft));
  border-color: hsl(0 80% 90%);
  color: hsl(0 60% 35%);
}
.flash--info { background: hsl(var(--secondary)); border-color: hsl(var(--border)); }
.flash--warning {
  background: hsl(var(--warning-soft));
  border-color: hsl(38 70% 70%);
  color: hsl(28 60% 28%);
  display: block;
}
.flash--warning .conflict-list {
  margin: 8px 0 0 0; padding: 0 0 0 20px;
  font-size: 13px; line-height: 1.6;
}

/* ───────────── Form controls ───────────── */
label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px;
  color: hsl(var(--foreground));
  font-weight: 500;
}
label > span:first-child {
  color: hsl(var(--foreground));
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}

input[type=email],
input[type=password],
input[type=text],
input[type=number],
textarea,
select {
  background: hsl(var(--background));
  border-width: 1px;
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  height: 36px;
  border-radius: var(--radius-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
  font-family: inherit;
}
textarea { height: auto; min-height: 80px; padding: 8px 12px; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }

/* ───────────── Buttons ───────────── */
button.primary,
button.secondary,
.btn {
  font: inherit;
  font-weight: 500;
  font-size: 13.5px;
  padding: 0 14px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
  border-width: 1px;
  border-color: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: 0;
}
button.primary, .btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
button.primary:hover, .btn--primary:hover { background: hsl(var(--primary) / 0.9); text-decoration: none; }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary, .btn--secondary, .btn.secondary {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
  box-shadow: var(--shadow-sm);
}
button.secondary:hover, .btn--secondary:hover, .btn.secondary:hover { background: hsl(var(--accent)); text-decoration: none; }

button.destructive, .btn.destructive {
  background: hsl(var(--background));
  color: hsl(var(--destructive));
  border-color: hsl(0 70% 88%);
  box-shadow: var(--shadow-sm);
}
button.destructive:hover, .btn.destructive:hover { background: hsl(var(--destructive-soft)); text-decoration: none; }

button.link {
  background: none; border: 0; color: hsl(var(--foreground)); font: inherit;
  cursor: pointer; padding: 0; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px;
}
button.link:hover { color: hsl(var(--muted-foreground)); }

.form-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 4px;
}
.primary-link {
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}
.primary-link:hover { background: hsl(var(--accent)); text-decoration: none; }

/* ───────────── Lists / tenant cards ───────────── */
.list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; }
.list__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: hsl(var(--card));
  border-width: 1px;
  border-radius: var(--radius);
  transition: background-color 120ms ease, border-color 120ms ease;
  box-shadow: var(--shadow-sm);
}
.list__item:hover { background: hsl(var(--accent) / 0.5); border-color: hsl(var(--ring)); }
.list__item__name { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.list__item__meta { color: hsl(var(--muted-foreground)); font-size: 12.5px; margin-top: 2px; }

/* ───────────── Empty state ───────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: hsl(var(--card));
  border-width: 1px;
  border-style: dashed;
  border-radius: var(--radius);
}
.empty-state__title { font-size: 17px; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 6px; }
.empty-state__text  { color: hsl(var(--muted-foreground)); font-size: 14px; margin-bottom: 16px; }

/* ───────────── Help text + code ───────────── */
.help { color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.5; }
code, .help code {
  background: hsl(var(--muted));
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: hsl(var(--foreground));
}
label small.help { display: block; color: hsl(var(--muted-foreground)); font-size: 12px; margin-top: 2px; font-weight: 400; }

/* ───────────── Lunch overview + items ───────────── */
.menu-overview { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0; }
.menu-overview__item {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  padding: 11px 0;
  border-top-width: 1px;
  border-top-color: hsl(var(--border-soft));
  align-items: baseline;
  font-size: 14px;
}
.menu-overview__item:first-child { border-top: 0; padding-top: 4px; }
.menu-overview__num { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; font-size: 13px; }
.menu-overview__name { color: hsl(var(--foreground)); }

.items-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.items-fieldset legend { font-size: 13.5px; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 4px; }
.item-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center;
}
.item-row__num { color: hsl(var(--muted-foreground)); text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.item-row input { width: 100%; }

/* Rich row: name + price on one line, description on the next. */
.item-row--rich { align-items: start; padding: 6px 0; }
.item-row--rich .item-row__num { padding-top: 10px; }
.item-row__fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-row__line1 { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
.item-row__price { text-align: right; font-variant-numeric: tabular-nums; }
.item-row__desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background));
  border-color: hsl(var(--border-soft));
}
.item-row__desc:focus { color: hsl(var(--foreground)); border-color: hsl(var(--ring)); }
@media (max-width: 640px) {
  .item-row__line1 { grid-template-columns: 1fr 72px; }
}

/* ───────────── Schedule editor ───────────── */
.toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: hsl(var(--secondary));
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
}
.toggle-row input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: hsl(var(--primary)); }

.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-width: 1px; border-color: hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--background));
  cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 500;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.day-chip input { display: none; }
.day-chip:hover { background: hsl(var(--accent)); }
.day-chip:has(input:checked) {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.radio-list { display: flex; flex-direction: column; gap: 6px; }
.radio-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-width: 1px; border-color: hsl(var(--border));
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
}
.radio-row:hover { background: hsl(var(--accent) / 0.5); }
.radio-row input { width: 16px; height: 16px; margin: 0; accent-color: hsl(var(--primary)); }
.radio-row:has(input:checked) {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent) / 0.3);
}

/* ───────────── Data table (history) ───────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table thead th {
  text-align: left;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  padding: 12px 16px;
  border-bottom-width: 1px;
  background: hsl(var(--secondary) / 0.3);
}
.data-table tbody td {
  padding: 14px 16px;
  border-bottom-width: 1px;
  border-bottom-color: hsl(var(--border-soft));
  color: hsl(var(--foreground));
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: hsl(var(--accent) / 0.3); }
.data-table .num { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ───────────── Setup link callout ───────────── */
.setup-link__row {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 6px;
}
.setup-link__row .btn { flex-shrink: 0; height: auto; }
code.setup-link {
  flex: 1;
  display: block;
  background: hsl(var(--background));
  border-width: 1px; border-color: hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: hsl(var(--foreground));
  word-break: break-all;
  user-select: all;
  min-width: 0;
}
@media (max-width: 640px) {
  .setup-link__row { flex-direction: column; }
}

/* ───────────── Auth shell ───────────── */
body.auth {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: hsl(240 4.8% 97.5%);
  min-height: 100vh;
}
.auth__wrap {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: stretch;
}
.auth__wrap > .brand { align-self: center; padding: 0; margin-bottom: 24px; }
.auth__wrap > .card  { padding: 28px; box-shadow: var(--shadow); }
.auth__wrap h1 { font-size: 22px; margin-bottom: 4px; text-align: center; font-weight: 600; }
.auth__wrap .subtitle { text-align: center; margin-bottom: 18px; margin-top: 0; }
.auth__foot { text-align: center; color: hsl(var(--muted-foreground)); font-size: 12px; margin-top: 24px; }

/* ───────────── Mobile (≤900px) ───────────── */
@media (max-width: 900px) {
  body.app {
    grid-template-columns: 1fr;
  }
  .topbar {
    display: flex; align-items: center; gap: 12px;
    height: var(--topbar-h);
    padding: 0 16px;
    background: hsl(var(--background));
    border-bottom-width: 1px;
    position: sticky; top: 0; z-index: 10;
  }
  .topbar__menu {
    background: transparent; border: 0; padding: 8px;
    color: hsl(var(--foreground)); cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .topbar__menu:hover { background: hsl(var(--accent)); }
  .topbar__brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600;
    color: hsl(var(--foreground)); text-decoration: none; font-size: 15px;
  }
  .topbar__brand .brand__mark { width: 22px; height: 22px; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 30;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgb(0 0 0 / 0.4); z-index: 20;
  }
  .main { padding: 24px 18px 48px; }
  .page-header__title, h1 { font-size: 22px; }
  .page-header__row { flex-direction: column; align-items: stretch; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions button { width: 100%; }
}

/* ───────────── Closed-message preview ───────────── */
.closed-preview {
  border-width: 1px;
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 8px;
  text-align: center;
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.closed-preview__title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; }
.closed-preview__body  {
  color: hsl(var(--muted-foreground));
  font-size: 15px;
  white-space: pre-line;   /* preserve textarea line breaks */
  line-height: 1.55;
}
.closed-preview--neutral { background: hsl(34 22% 93%); border-color: hsl(34 14% 80%); }
.closed-preview--warm    { background: hsl(38 60% 90%); border-color: hsl(38 60% 70%); color: hsl(28 60% 28%); }
.closed-preview--red     { background: hsl(0 70% 95%);  border-color: hsl(0 70% 80%);  color: hsl(0 60% 35%); }
.closed-preview--green   { background: hsl(142 50% 92%); border-color: hsl(142 50% 75%); color: hsl(142 60% 22%); }

/* ───────────── Slide editor cards ───────────── */
.slide-card { padding: 18px 22px; }
.slide-card legend { font-family: var(--font-serif); font-size: 16px; font-weight: 600; padding: 0 8px; color: hsl(var(--foreground)); }
.slide-card__head { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 8px; }
@media (max-width: 700px) {
  .slide-card__head { gap: 8px; }
  .slide-card__head label { width: 100%; }
}

/* ───────────── Generic table (schedule list, history) ───────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table thead th {
  text-align: left;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 10px 14px;
  border-bottom-width: 1px;
  background: hsl(var(--muted) / 0.4);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tbody td {
  padding: 12px 14px;
  border-bottom-width: 1px;
  border-bottom-color: hsl(var(--border-soft));
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.table .btn { height: 30px; padding: 0 10px; font-size: 12.5px; margin-left: 4px; }
.table form { margin: 0; padding: 0; }

@media (max-width: 700px) {
  /* On phones the table can horizontally scroll — wrap parent already
     enforces overflow-x:auto via .card. Tighten cell padding so more
     fits on screen. */
  .table thead th, .table tbody td { padding: 10px 8px; }
  .table .btn { display: block; margin: 4px 0 0; width: 100%; }
}