/* Shared semantic colors for the public site and its management tools. */
:root {
  color-scheme: light;
  --m5-page: #f7f8fa;
  --m5-surface: #ffffff;
  --m5-surface-soft: #f3f4f6;
  --m5-surface-raised: #e8ebef;
  --m5-featured: #eef2ff;
  --m5-ink: #101116;
  --m5-text: #303440;
  --m5-muted: #555b68;
  --m5-link: #2144cd;
  --m5-border: #c5cad3;
  --m5-border-soft: #dce0e6;
  --m5-border-strong: #777f8e;
  --m5-accent: #d41438;
  --m5-accent-hover: #b90d2d;
  --m5-on-accent: #ffffff;
  --m5-selected-bg: #dfe7ff;
  --m5-selected-ink: #153399;
  --m5-focus: #2144cd;
  --m5-error: #b30c30;
  --m5-error-bg: #fff0f3;
  --m5-warning: #754700;
  --m5-warning-bg: #fff4cc;
  --m5-success: #11693e;
  --m5-prayer-accent: #126e68;
  --m5-scripture-symbol: #008f78;
  --m5-prayer-surface: #e5f4f0;
  --m5-prayer-ink: #114b48;
  --m5-prayer-border: #acd7ce;
  --m5-shadow: #08090b20;
  --m5-hero: #172bbb;
  --m5-hero-text: #ffffff;
  --m5-hero-muted: #dde8ff;
  --m5-media: #08090b;
  --m5-on-media: #ffffff;
  --m5-overlay: #08090be8;
  --m5-cloud-1: #d41438;
  --m5-cloud-2: #a04400;
  --m5-cloud-3: #234add;
  --m5-cloud-4: #7229dc;
  --m5-cloud-5: #00717a;
  --m5-cloud-glow: #00000000;
  --m5-cloud-footer: #ffffff;
  --m5-cloud-hover: #e8ebef;
  --m5-cloud-count: #dfe7ff;
  --m5-coral: #d41438;
  --m5-blue: #234add;
  --m5-purple: #7229dc;
  --m5-table-sort: #7229dc;
  --m5-table-filter: #a04400;
  --m5-blue-soft: #eef2ff;
  --m5-purple-soft: #f3efff;
  --m5-warm-soft: #f3f4f6;
  --m5-hero-end: #172bbb;
  --m5-featured-glow: #00000000;
  /* Speaker identities: saturated hues; blue and orange lead for two-speaker transcripts. */
  --m5-speaker-01: #005edb; /* blue */
  --m5-speaker-02: #ad4600; /* orange */
  --m5-speaker-03: #007359; /* teal */
  --m5-speaker-04: #b02390; /* magenta */
  --m5-speaker-05: #7132cc; /* violet */
  --m5-speaker-06: #866000; /* ochre */
  --m5-speaker-07: #006d83; /* cyan */
  --m5-speaker-08: #bb342a; /* vermillion */
  --m5-speaker-09: #414dcc; /* indigo */
  --m5-speaker-10: #347413; /* green */
  --m5-speaker-11: #b02165; /* raspberry */
  --m5-speaker-12: #a94926; /* copper */
  --m5-speaker-13: #007272; /* turquoise */
  --m5-speaker-14: #9234bb; /* orchid */
  --m5-speaker-15: #646b00; /* olive */
  --m5-speaker-16: #284cad; /* royal blue */
  --m5-speaker-17: #b22640; /* crimson */
  --m5-speaker-18: #007440; /* emerald */
  --m5-speaker-19: #883da0; /* purple */
  --m5-speaker-20: #925400; /* amber */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --m5-page: #0d0e12;
  --m5-surface: #17191f;
  --m5-surface-soft: #20232b;
  --m5-surface-raised: #2b2f39;
  --m5-featured: #1b2548;
  --m5-ink: #ffffff;
  --m5-text: #e5e7ef;
  --m5-muted: #bdc3d1;
  --m5-link: #a7bcff;
  --m5-border: #484e5b;
  --m5-border-soft: #343945;
  --m5-border-strong: #727c90;
  --m5-accent: #ff496b;
  --m5-accent-hover: #ff6b86;
  --m5-on-accent: #101116;
  --m5-selected-bg: #243fa6;
  --m5-selected-ink: #ffffff;
  --m5-focus: #a7bcff;
  --m5-error: #ff8aa1;
  --m5-error-bg: #391721;
  --m5-warning: #ffcf4a;
  --m5-warning-bg: #342a10;
  --m5-success: #58de99;
  --m5-prayer-accent: #68d5c6;
  --m5-scripture-symbol: #68d5c6;
  --m5-prayer-surface: #153333;
  --m5-prayer-ink: #d3f1eb;
  --m5-prayer-border: #2a625c;
  --m5-shadow: #00000066;
  --m5-cloud-1: #ff7490;
  --m5-cloud-2: #ffb52e;
  --m5-cloud-3: #92b1ff;
  --m5-cloud-4: #c89bff;
  --m5-cloud-5: #37d8ea;
  --m5-table-sort: #c89bff;
  --m5-table-filter: #ffb52e;
  --m5-cloud-footer: #17191f;
  --m5-cloud-hover: #2b2f39;
  --m5-cloud-count: #243fa6;
  --m5-coral: #ff496b;
  --m5-blue: #92b1ff;
  --m5-purple: #c89bff;
  --m5-blue-soft: #1b2548;
  --m5-purple-soft: #2c2041;
  --m5-warm-soft: #20232b;
  --m5-speaker-01: #6fc2ff;
  --m5-speaker-02: #ffb32e;
  --m5-speaker-03: #32dfb2;
  --m5-speaker-04: #ff96ea;
  --m5-speaker-05: #cfaaff;
  --m5-speaker-06: #eed24e;
  --m5-speaker-07: #35d7ed;
  --m5-speaker-08: #ffa28d;
  --m5-speaker-09: #acb5ff;
  --m5-speaker-10: #a0db59;
  --m5-speaker-11: #ff9bca;
  --m5-speaker-12: #ffb475;
  --m5-speaker-13: #58ddd4;
  --m5-speaker-14: #ea9dff;
  --m5-speaker-15: #cdd758;
  --m5-speaker-16: #84c8ff;
  --m5-speaker-17: #ff9eb1;
  --m5-speaker-18: #70dfa1;
  --m5-speaker-19: #e2a4ef;
  --m5-speaker-20: #ffd17b;
}

/* Bootstrap 5.3 controls inherit the same palette as our custom components. */
:root, [data-bs-theme] {
  --bs-body-bg: var(--m5-page);
  --bs-body-color: var(--m5-text);
  --bs-emphasis-color: var(--m5-ink);
  --bs-secondary-color: var(--m5-muted);
  --bs-secondary-bg: var(--m5-surface-raised);
  --bs-tertiary-bg: var(--m5-surface-soft);
  --bs-border-color: var(--m5-border);
  --bs-border-color-translucent: var(--m5-border-soft);
  --bs-link-color: var(--m5-link);
  --bs-link-hover-color: var(--m5-ink);
}

html, body { min-height: 100%; background: var(--m5-page); color: var(--m5-text); }
body { margin: 0; padding: 0; }
a {
  color: var(--m5-link);
  text-decoration: none;
  text-underline-offset: .18em;
}
a:where(:hover) {
  text-decoration: underline;
}
a:hover { color: var(--m5-ink); }
h1, h2, h3, h4, h5, h6 { color: inherit; }
hr { border-color: var(--m5-border); }
::selection { background: var(--m5-selected-bg); color: var(--m5-selected-ink); }
input, textarea, select, button { font: inherit; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea, select) {
  color: var(--m5-text); background-color: var(--m5-surface); border: 1px solid var(--m5-border-strong);
}
input::placeholder, textarea::placeholder { color: var(--m5-muted); opacity: 1; }
input[type=checkbox], input[type=radio], progress { accent-color: var(--m5-accent); }
input:-webkit-autofill { -webkit-text-fill-color: var(--m5-text); box-shadow: 0 0 0 1000px var(--m5-surface) inset; }

/* Shared control styling also covers the existing management forms. */
.form-control, .form-select, .input-group-text { background-color: var(--m5-surface); border-color: var(--m5-border-strong); color: var(--m5-text); }
.form-control:focus, .form-select:focus { color: var(--m5-text); background-color: var(--m5-surface); border-color: var(--m5-focus); box-shadow: 0 0 0 2px var(--m5-focus); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--m5-muted); background-color: var(--m5-surface-raised); }
.form-control::placeholder { color: var(--m5-muted); }
.card, .card-header, .card-footer, .modal-content, .toast, .toast-header, .list-group-item, .dropdown-menu, .popover, .popover-header {
  background-color: var(--m5-surface); color: var(--m5-text); border-color: var(--m5-border);
}
.dropdown-item, .popover-body { color: var(--m5-text); }
.dropdown-item:hover, .dropdown-item:focus, .list-group-item-action:hover { background-color: var(--m5-selected-bg); color: var(--m5-selected-ink); }
.modal-header, .modal-footer { border-color: var(--m5-border); }
.text-muted, .form-text { color: var(--m5-muted) !important; }
.text-dark { color: var(--m5-ink) !important; }
.text-danger, .validation-message, .validation-errors { color: var(--m5-error) !important; }
.text-success { color: var(--m5-success) !important; }
.bg-white, .bg-light { background-color: var(--m5-surface) !important; }
.border, .border-top, .border-bottom { border-color: var(--m5-border) !important; }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--m5-surface-soft); --bs-table-striped-color: var(--m5-text); --bs-table-hover-bg: var(--m5-selected-bg); --bs-table-hover-color: var(--m5-text); color: var(--m5-text); border-color: var(--m5-border); }
.table td, .table th, .table thead th { border-color: var(--m5-border); }
.table-striped tbody tr:nth-of-type(odd), .table-hover tbody tr:hover { color: var(--m5-text); background-color: var(--m5-surface-soft); }
.page-link, .nav-tabs .nav-link { color: var(--m5-link); background-color: var(--m5-surface); border-color: var(--m5-border); }
.page-link:hover, .page-link:focus, .nav-tabs .nav-link:hover { color: var(--m5-ink); background-color: var(--m5-surface-soft); border-color: var(--m5-border-strong); }
.page-link.active, .page-item.active .page-link, .nav-tabs .nav-link.active { color: var(--m5-selected-ink); background-color: var(--m5-selected-bg); border-color: var(--m5-border-strong); }
.btn-primary, .btn-info, .btn-success { color: var(--m5-on-accent); background-color: var(--m5-accent); border-color: var(--m5-accent); }
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-primary:active, .btn-info:active, .btn-success:active { color: var(--m5-on-accent); background-color: var(--m5-accent-hover); border-color: var(--m5-accent-hover); }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-info { color: var(--m5-link); background-color: var(--m5-surface); border-color: var(--m5-border-strong); }
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-info:hover { color: var(--m5-ink); background-color: var(--m5-surface-raised); border-color: var(--m5-border-strong); }
.btn-link {
  color: var(--m5-link);
  text-decoration: none;
  text-underline-offset: .18em;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn.btn-primary:disabled, .btn.btn-primary.disabled, .btn.btn-info:disabled, .btn.btn-success:disabled { color: var(--m5-on-accent); background-color: var(--m5-accent); border-color: var(--m5-accent); }
.btn.btn-primary:not(:disabled):not(.disabled):active, .btn.btn-info:not(:disabled):not(.disabled):active, .btn.btn-success:not(:disabled):not(.disabled):active { color: var(--m5-on-accent); background-color: var(--m5-accent-hover); border-color: var(--m5-accent-hover); }
.btn.btn-secondary:not(:disabled):not(.disabled):active, .btn.btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--m5-ink); background-color: var(--m5-surface-raised); border-color: var(--m5-border-strong); }
.btn-danger { color: var(--m5-error); background-color: var(--m5-error-bg); border-color: var(--m5-error); }
.btn-warning, .alert-warning { color: var(--m5-warning); background-color: var(--m5-warning-bg); border-color: var(--m5-warning); }
.btn-primary, .btn-info, .btn-success {
  --bs-btn-color: var(--m5-on-accent);
  --bs-btn-bg: var(--m5-accent);
  --bs-btn-border-color: var(--m5-accent);
  --bs-btn-hover-color: var(--m5-on-accent);
  --bs-btn-hover-bg: var(--m5-accent-hover);
  --bs-btn-hover-border-color: var(--m5-accent-hover);
  --bs-btn-active-color: var(--m5-on-accent);
  --bs-btn-active-bg: var(--m5-accent-hover);
  --bs-btn-active-border-color: var(--m5-accent-hover);
  --bs-btn-disabled-color: var(--m5-on-accent);
  --bs-btn-disabled-bg: var(--m5-accent);
  --bs-btn-disabled-border-color: var(--m5-accent);
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-info {
  --bs-btn-color: var(--m5-link);
  --bs-btn-bg: var(--m5-surface);
  --bs-btn-border-color: var(--m5-border-strong);
  --bs-btn-hover-color: var(--m5-ink);
  --bs-btn-hover-bg: var(--m5-surface-raised);
  --bs-btn-hover-border-color: var(--m5-border-strong);
  --bs-btn-active-color: var(--m5-ink);
  --bs-btn-active-bg: var(--m5-surface-raised);
  --bs-btn-active-border-color: var(--m5-border-strong);
  --bs-btn-disabled-color: var(--m5-muted);
  --bs-btn-disabled-bg: var(--m5-surface);
  --bs-btn-disabled-border-color: var(--m5-border);
}
.btn-danger { --m5-button-status: var(--m5-error); --m5-button-status-bg: var(--m5-error-bg); }
.btn-warning { --m5-button-status: var(--m5-warning); --m5-button-status-bg: var(--m5-warning-bg); }
.btn-danger, .btn-warning {
  --bs-btn-color: var(--m5-button-status);
  --bs-btn-bg: var(--m5-button-status-bg);
  --bs-btn-border-color: var(--m5-button-status);
  --bs-btn-hover-color: var(--m5-button-status-bg);
  --bs-btn-hover-bg: var(--m5-button-status);
  --bs-btn-hover-border-color: var(--m5-button-status);
  --bs-btn-active-color: var(--m5-button-status-bg);
  --bs-btn-active-bg: var(--m5-button-status);
  --bs-btn-active-border-color: var(--m5-button-status);
  --bs-btn-disabled-color: var(--m5-button-status);
  --bs-btn-disabled-bg: var(--m5-button-status-bg);
  --bs-btn-disabled-border-color: var(--m5-button-status);
}
.alert-danger { color: var(--m5-error); background-color: var(--m5-error-bg); border-color: var(--m5-error); }
.alert-success { color: var(--m5-success); background-color: var(--m5-surface-soft); border-color: var(--m5-success); }
.progress { background-color: var(--m5-surface-raised); }
.progress-bar { color: var(--m5-on-accent); background-color: var(--m5-accent); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--m5-focus); outline-offset: 3px; }
.invalid { outline-color: var(--m5-error) !important; }
.valid.modified:not([type=checkbox]) { outline-color: var(--m5-success); }

.theme-switch { display: inline-flex; flex: none; align-items: center; gap: 2px; border: 1px solid var(--m5-border); border-radius: 24px; padding: 2px; background: var(--m5-surface-soft); }
.theme-switch button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--m5-muted); cursor: pointer; }
.theme-switch button:hover { color: var(--m5-ink); background: var(--m5-surface-raised); }
:root:not([data-theme="dark"]) .theme-switch [data-theme-set="light"], :root[data-theme="dark"] .theme-switch [data-theme-set="dark"] { color: var(--m5-on-accent); background: var(--m5-accent); }
.theme-switch svg { width: 19px; height: 19px; pointer-events: none; }
.theme-system { min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--m5-link); font-size: .8rem; text-decoration: none; text-underline-offset: 3px; }
.theme-system:hover {
  text-decoration: underline;
}
.theme-status { display: block; color: var(--m5-muted); font-size: .75rem; margin-top: 4px; }