/* ═══════════════════════════════════════════════════════════
   SermonBuilderPro — Design System
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. BASE VARIABLES (Light Mode Defaults) ───────────── */

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-full: 50px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Spacing (fill gaps) */
  --space-5: 1.25rem;
  --space-7: 1.75rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 900px;
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 60px;
  --header-height: 56px;
  --content-max-width: 1400px;
  --manuscript-page-width: 740px;

  /* Z-Index Scale (centralized stack) */
  --z-floating: 1000;
  --z-dropdown: 1035;
  --z-sidebar: 1040;
  --z-panel: 1050;
  --z-topbar: 1051;
  --z-header: 1055;
  --z-overlay: 1060;
  --z-toast: 1070;
  --z-tooltip: 9999;

  /* Sermon Element Type Colors (single source — used in builder, manuscript, preview) */
  --element-scripture: #1A237E;
  --element-heading: #4A148C;
  --element-illustration: #2E7D32;
  --element-quote: #F79646;
  --element-transition: #0277BD;
  --element-application: #C0504D;
  --element-definition: #6A1B9A;
  --element-prayer: #00695C;
  --element-challenge: #BF360C;
  --element-historical: #5D4037;
  --element-poem: #AD1457;
  --element-call-response: #1565C0;
  --element-intro: #D84315;
  --element-main-point: #4A148C;
  --element-closing: #C0504D;

  /* Manuscript Font Presets */
  --font-traditional: 'Times New Roman', Georgia, serif;
  --font-modern: 'Calibri', 'Segoe UI', sans-serif;
  --font-teaching: 'Georgia', 'Palatino Linotype', serif;
}


/* ─── 2. THEME: GRACE (Default) ─────────────────────────── */

html[data-theme="grace"],
:root {
  --color-primary: #1F3864;
  --color-primary-light: #2B5797;
  --color-primary-dark: #152744;
  --color-primary-rgb: 31, 56, 100;
  --color-accent: #D4A84B;
  --color-accent-light: #E4C478;
  --color-accent-rgb: 212, 168, 75;
}

html[data-theme="ocean"] {
  --color-primary: #0066CC;
  --color-primary-light: #3388DD;
  --color-primary-dark: #004C99;
  --color-primary-rgb: 0, 102, 204;
  --color-accent: #00A8A8;
  --color-accent-light: #33C4C4;
  --color-accent-rgb: 0, 168, 168;
}

html[data-theme="emerald"] {
  --color-primary: #047857;  /* Darkened for WCAG AA 5.5:1 on white (was #059669 at 3.8:1) */
  --color-primary-light: #059669;
  --color-primary-dark: #065F46;
  --color-primary-rgb: 4, 120, 87;
  --color-accent: #0D9488;
  --color-accent-light: #2DD4BF;
  --color-accent-rgb: 13, 148, 136;
}

html[data-theme="warm"] {
  --color-primary: #92400E;
  --color-primary-light: #B45309;
  --color-primary-dark: #78350F;
  --color-primary-rgb: 146, 64, 14;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-rgb: 217, 119, 6;
}


/* ─── 3. LIGHT MODE SURFACES ────────────────────────────── */

html[data-mode="light"],
:root {
  --bg-body: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F1F3F5;
  --bg-surface-alt: #E9ECEF;
  --bg-input: #FFFFFF;

  /* Aliases for view-layer code that references these (legacy/intuitive) names.
     They point at the real theme-aware tokens, so cards/inputs that used
     var(--card-bg,#fff) / var(--input-bg) / var(--primary) — which previously
     ALWAYS fell back to the hardcoded light value because these were undefined —
     now correctly flip in dark mode. (Fixes the suite home + others; 2026-06-30.)
     Resolved at use time, so no dark-block redefinition is needed. */
  --card-bg: var(--bg-surface);
  --input-bg: var(--bg-input);
  --primary: var(--color-primary);

  /* ─── Suite area colors (design system) ─────────────────
     One coloring vocabulary across Sermons / People / Worship / Admin.
     Applied via [data-area="…"] (which also remaps --color-primary so the
     area's chrome/accents follow). See docs/reports/SUITE-UI-SPEC. */
  --area-sermons: #4A148C;  --area-sermons-soft: #F1EAFF;
  --area-people:  #1F3864;  --area-people-soft:  #E7EDF9;
  --area-worship: #0D7A6F;  --area-worship-soft: #E0F3F0;
  --area-admin:   #B8860B;  --area-admin-soft:   #FBF2DA;

  /* Canonical card tokens (the one card look — .sbp-card + retheme targets) */
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(20,30,60,.05);
  --card-shadow-hover: 0 4px 12px rgba(20,30,60,.10);

  --text-primary: #1A1A2E;
  --text-secondary: #555770;
  --text-muted: #636370;  /* WCAG AA ~5.2:1 on white; headroom for alt/hover surfaces (a11y 2026-06-23) */
  --text-on-primary: #FFFFFF;

  --border-color: #DEE2E6;
  --border-light: #F0F0F0;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  --overlay: rgba(0,0,0,0.5);
  --skeleton-from: #E9ECEF;
  --skeleton-to: #F8F9FA;

  /* Component-specific overrides for light */
  --badge-scripture-bg: rgba(var(--color-primary-rgb), 0.1);
  --badge-scripture-text: var(--color-primary);
  --badge-theme-bg: #F0F0F0;
  --badge-theme-text: #555;
  --illustration-bg: #FFFDF5;
  --scripture-bg: #F5F8FF;
  --code-bg: #F6F8FA;
  --input-focus-ring: rgba(var(--color-primary-rgb), 0.2);
}

/* ─── Area scoping: a container marked data-area="…" recolors its chrome +
   accents to that area's color by remapping --color-primary. A direct match on
   the element beats the value inherited from html[data-theme], so it works
   under any theme. (Suite design system, 2026-06-30.) */
[data-area="sermon"]  { --color-primary: var(--area-sermons); --color-primary-light: #6A1FB0; --color-primary-dark: #38106B; --color-primary-rgb: 74,20,140;  --area: var(--area-sermons);  --area-soft: var(--area-sermons-soft); }
[data-area="people"]  { --color-primary: var(--area-people);  --color-primary-light: #2B5797; --color-primary-dark: #152744; --color-primary-rgb: 31,56,100;  --area: var(--area-people);   --area-soft: var(--area-people-soft); }
[data-area="worship"] { --color-primary: var(--area-worship); --color-primary-light: #12998B; --color-primary-dark: #0A5F57; --color-primary-rgb: 13,122,111; --area: var(--area-worship);  --area-soft: var(--area-worship-soft); }
[data-area="admin"]   { --color-primary: var(--area-admin);   --color-primary-light: #D4A017; --color-primary-dark: #8A6508; --color-primary-rgb: 184,134,11; --area: var(--area-admin);    --area-soft: var(--area-admin-soft); }


/* ─── 4. DARK MODE SURFACES ─────────────────────────────── */

html[data-mode="dark"] {
  --bg-body: #0F1117;
  --bg-surface: #1A1D27;
  --bg-surface-hover: #252836;
  --bg-surface-alt: #2A2D3A;
  --bg-input: #1E2130;

  --text-primary: #E4E4E7;
  --text-secondary: #A1A1AA;
  --text-muted: #9898A0;  /* WCAG AA 4.6:1 on #1A1D27 (was #71717A at 3.5:1) */
  --text-on-primary: #FFFFFF;

  --border-color: #2E3144;
  --border-light: #252836;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

  --overlay: rgba(0,0,0,0.7);
  --skeleton-from: #252836;
  --skeleton-to: #1A1D27;

  --badge-scripture-bg: rgba(var(--color-primary-rgb), 0.2);
  --badge-scripture-text: var(--color-primary-light);
  --badge-theme-bg: #2A2D3A;
  --badge-theme-text: #A1A1AA;
  --illustration-bg: #1E1D15;
  --scripture-bg: #151825;
  --code-bg: #1E2130;
  --input-focus-ring: rgba(var(--color-primary-rgb), 0.3);
}

/* Dark mode theme overrides — lighten primaries for WCAG AA contrast on dark
   backgrounds. Filled surfaces (.btn-primary etc.) then need DARK ink: white
   on these lightened primaries is only 1.9–3.2:1, so --text-on-primary and
   the hover shade flip per theme too (ink #10131C ≥5:1 on all four). */
html[data-mode="dark"][data-theme="grace"]  { --color-primary: #5A8FD4; --color-primary-light: #7BAAE0; --color-primary-dark: #4A7EC2; --text-on-primary: #10131C; } /* 4.7:1 on #1A1D27 */
html[data-mode="dark"][data-theme="ocean"]  { --color-primary: #3399EE; --color-primary-light: #66B3FF; --color-primary-dark: #2288DD; --text-on-primary: #10131C; }
html[data-mode="dark"][data-theme="emerald"]{ --color-primary: #34D399; --color-primary-light: #6EE7B7; --color-primary-dark: #2BBE88; --text-on-primary: #10131C; }
html[data-mode="dark"][data-theme="warm"]   { --color-primary: #F59E0B; --color-primary-light: #FBBF24; --color-primary-dark: #E08D04; --text-on-primary: #10131C; }


/* ─── 5. BASE & RESET ───────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-light);
}

::selection {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--text-primary);
}


/* ─── 6. LAYOUT ─────────────────────────────────────────── */

.container-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

main {
  animation: fadeIn 0.3s ease-out;
  min-height: calc(100vh - 200px);
}


/* ─── 7. SKIP LINK ──────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--text-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: var(--z-tooltip);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
  color: var(--text-on-primary);
}


/* ─── 8. APP LAYOUT (Sidebar + Header) ─────────────────── */

/* --- 8a. Layout Shell --- */
.app-layout {
  display: block;
  min-height: 100vh;
}

/* --- 8b. Sidebar --- */
.app-sidebar {
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);
  background: var(--color-primary-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sidebar);
  transition: width 0.25s ease, min-width 0.25s ease;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Collapsed state */
.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
}
.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-link-text,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .sidebar-footer .sidebar-link-text {
  display: none;
}
.sidebar-collapsed .sidebar-brand-link {
  justify-content: center;
}
.sidebar-collapsed .sidebar-collapse-btn {
  margin-left: 0;
}
.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar-collapsed .sidebar-link i {
  margin-right: 0;
  font-size: 1.15rem;
}
.sidebar-collapsed .sidebar-footer-btn {
  justify-content: center;
  padding: 0.5rem;
}
.sidebar-collapsed .sidebar-footer-btn.dropdown-toggle::after {
  display: none;
}

/* --- Brand area --- */
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem 0.5rem;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.5rem;
  min-height: var(--header-height);
}
.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fff !important;
  flex: 1;
  min-width: 0;
  transition: opacity var(--transition-fast);
}
.sidebar-brand-link:hover { opacity: 0.85; }
.sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  color: var(--color-accent, #D4A84B);
  flex-shrink: 0;
}
.sidebar-brand-text {
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* --- Sidebar navigation --- */
.sidebar-nav {
  flex: 1;
  padding: 0 0.5rem;
  overflow-y: auto;
}
.sidebar-section {
  margin-bottom: 0.25rem;
}
.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  padding: 0.85rem 0.75rem 0.3rem;
  white-space: nowrap;
}
/* Collapsible sidebar section toggle */
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.85rem 0.75rem 0.3rem;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: inherit;
}
.sidebar-section-toggle:hover {
  color: rgba(255,255,255,0.85);
}
.sidebar-section-toggle .sidebar-section-label {
  padding: 0;
}
.sidebar-toggle-icon {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}
.sidebar-section-toggle.open .sidebar-toggle-icon {
  transform: rotate(180deg);
}
.sidebar-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.sidebar-collapsible.open {
  /* Bumped from 500px to fit the expanded Admin menu (sub-groups + new
     items: Reports, Content, Platform). */
  max-height: 900px;
}
.sidebar-collapsed .sidebar-section-toggle {
  display: none;
}
.sidebar-collapsed .sidebar-collapsible {
  max-height: 900px;
}

/* Sub-section labels inside collapsible nav sections (e.g. Admin → Reports,
   Content, Platform). Smaller and more muted than the top-level section
   labels so they read as in-group dividers, not new sections. */
.sidebar-subsection-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.38);
  padding: 0.6rem 0.75rem 0.25rem 0.85rem;
  margin-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.sidebar-subsection-label:first-child {
  border-top: none;
  margin-top: 0;
}
.sidebar-collapsed .sidebar-subsection-label {
  display: none;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0.75rem;
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none !important;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all 0.15s ease;
  white-space: nowrap;
  margin: 1px 0;
}
.sidebar-link i {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 0.6rem;
  opacity: 0.85;
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}
.sidebar-link:hover i { opacity: 1; }
.sidebar-link.active {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
}
.sidebar-link.active i {
  color: var(--color-accent, #D4A84B);
  opacity: 1;
}

/* --- Sidebar footer --- */
.sidebar-footer {
  padding: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: auto;
}
.sidebar-footer-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-align: left;
}
.sidebar-footer-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
}
.sidebar-footer-btn i {
  font-size: 1rem;
  opacity: 0.7;
}
.sidebar-footer-btn.dropdown-toggle::after {
  margin-left: auto;
  opacity: 0.5;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-dropdown);
  backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* --- 8c. Main area --- */
.app-main {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}
.sidebar-collapsed .app-main {
  margin-left: 60px;
}

/* --- 8d. Top header bar --- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  gap: 1rem;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-menu-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.header-menu-btn:hover { background: var(--surface-hover, rgba(0,0,0,0.04)); }
.header-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* --- Header search --- */
.header-search {
  position: relative;
}
.header-search-inner {
  display: flex;
  align-items: center;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 0 0.65rem;
  height: 36px;
  transition: all 0.2s ease;
  width: 200px;
}
.header-search-inner:focus-within {
  border-color: var(--color-primary);
  background: var(--card-bg, #fff);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  width: 280px;
}
.header-search-icon {
  color: var(--text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-right: 0.45rem;
}
.header-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 100%;
  padding: 0;
}
.header-search-input::placeholder { color: var(--text-muted); }

/* --- Header icon buttons --- */
.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  border: none;
  background: transparent;
  color: var(--text-secondary, #555);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  position: relative;
}
.header-icon-btn:hover {
  background: var(--bg-secondary, #f5f5f5);
  color: var(--text-primary);
}
.header-icon-btn.dropdown-toggle::after { display: none; }
.header-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  background: #E53E3E;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- Header user button --- */
.header-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary);
}
.header-user-btn:hover {
  background: var(--bg-secondary, #f5f5f5);
}
.header-user-btn.dropdown-toggle::after {
  font-size: 0.7rem;
  opacity: 0.5;
}
.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.header-username {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 8e. Content area --- */
.app-content {
  flex: 1;
  padding: 1.5rem;
  max-width: var(--content-max-width);
  width: 100%;
}

/* --- 8f. Footer --- */
.app-footer {
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}
.app-footer p { margin: 0; }
.app-footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.78rem;
}
.app-footer-link:hover { color: var(--color-primary); }

/* --- Theme controls (header) --- */
.theme-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.theme-dropdown .dropdown-item.active-theme {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}
.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}

/* ─── 9. CARDS ──────────────────────────────────────────── */

.card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  color: var(--text-primary);
}
.card-body {
  color: var(--text-primary);
}
.card-title {
  color: var(--text-primary);
}
.card-text {
  color: var(--text-secondary);
}

/* Lift card (interactive) */
.card-lift {
  cursor: pointer;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Stat cards */
.stat-card {
  text-align: center;
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: all var(--transition-base);
}
.stat-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}
.stat-card-link {
  cursor: pointer;
}
a .stat-card-link .stat-number,
a .stat-card-link .stat-label {
  color: inherit;
}
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  font-size: 1.4rem;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}
.stat-card .stat-number {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-top: var(--space-1);
}


/* ─── 9A2. SUITE SHARED COMPONENTS (design system) ──────────
   One card, one section header, one page shell — themed by area color via a
   [data-area] ancestor. New/migrated surfaces use these; existing per-area
   card classes are being retheme-aligned to the same tokens. See SUITE-UI-SPEC. */
.page-wrap { max-width: 1080px; margin-inline: auto; padding: var(--space-3) var(--space-4); }
.page-wrap.is-narrow { max-width: 920px; }

.sbp-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.sbp-card:hover, .sbp-card.is-interactive:hover {
  border-color: var(--area, var(--color-primary));
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
  color: inherit;
}
.sbp-card.is-door { border-top: 3px solid var(--area, var(--color-primary)); }
.sbp-card .sbp-chip {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--area-soft, var(--bg-surface-alt)); color: var(--area, var(--color-primary));
}
.sbp-card.metric { text-align: center; }
.sbp-card.metric .sbp-metric-value { display: block; font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.sbp-card.metric .sbp-metric-label { display: block; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-top: var(--space-1); }

.section-head {
  font-weight: 800; font-size: .92rem; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 6px; margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.section-head .section-head-title { display: flex; align-items: center; }
.section-head i.section-head-icon { margin-right: 8px; color: var(--area, var(--color-primary)); }
.section-head a { font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--area, var(--color-primary)); text-transform: none; letter-spacing: 0; }


/* ─── 9B. DASHBOARD REDESIGN ────────────────────────────── */

/* Hero greeting */
.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0 var(--space-8);
  gap: var(--space-4);
}
.dash-greeting {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.dash-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}
.dash-subtitle strong {
  color: var(--text-primary);
  font-weight: 600;
}
.dash-hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.dash-action-btn {
  border-radius: var(--radius-lg);
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Next Up card */
.dash-next-up {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #000));
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  margin-bottom: var(--space-6);
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.dash-next-up-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.dash-next-up-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  opacity: 0.85;
}
.dash-countdown {
  font-size: var(--text-base);
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}
/* Next Up — service-day header (date + service count) */
.dash-next-up-day {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.dash-next-up-date {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.dash-next-up-date i {
  margin-right: 6px;
  opacity: 0.85;
}
.dash-next-up-count {
  font-size: var(--text-sm);
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Next Up — one row per service scheduled that day */
.dash-next-up-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-service-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.dash-service-type {
  flex: 0 0 9.5rem;
  font-weight: 700;
  font-size: var(--text-base);
}
.dash-service-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-service-title {
  font-weight: 600;
  font-size: var(--text-base);
}
.dash-service-title.is-empty {
  opacity: 0.7;
  font-style: italic;
  font-weight: 500;
}
.dash-service-passage {
  font-size: var(--text-sm);
  opacity: 0.85;
}
.dash-service-passage i {
  margin-right: 4px;
}
.dash-service-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.dash-service-actions .btn {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 600;
}
.dash-service-actions .btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
}
.dash-service-actions .btn-primary {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.3);
}
.dash-service-actions .btn-primary:hover {
  background: rgba(255,255,255,0.38);
}
.dash-status-pill {
  font-size: var(--text-sm);
  padding: 4px 14px;
}

/* Section headers */
.dash-section {
  margin-bottom: var(--space-6);
}
.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-color);   /* section-head underline (design system) */
  padding-bottom: 6px;
  margin-bottom: var(--space-3);
}
.dash-section-title {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0;
  color: var(--text-primary);
}
.dash-section-title i {
  color: var(--color-primary);   /* area accent (purple on the Sermons dashboard) */
  margin-right: var(--space-2);
}
/* Standalone section titles (no header row, e.g. "At a Glance") get the rule too */
.dash-section > .dash-section-title {
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 6px;
  margin-bottom: var(--space-3);
  display: block;
}
.dash-section-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.dash-section-link:hover {
  text-decoration: underline;
}

/* Draft cards */
.dash-drafts-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.dash-draft-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.dash-draft-card:hover {
  background: var(--bg-hover);
  color: inherit;
}
.dash-draft-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.dash-draft-content {
  flex: 1;
  min-width: 0;
}
.dash-draft-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-draft-passage {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dash-draft-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.dash-draft-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Metric tiles */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
}
.dash-metric {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);   /* one card radius (design system) */
  box-shadow: var(--card-shadow);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.dash-metric:hover {
  border-color: var(--color-primary);
  box-shadow: var(--card-shadow-hover);
  color: inherit;
  transform: translateY(-1px);
}
.dash-metric-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.dash-metric-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  margin-top: var(--space-1);
}

/* Cards */
.dash-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
}
.dash-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0;
}
.dash-card-title i {
  margin-right: var(--space-1);
}
.dash-card-body {
  padding: var(--space-3) var(--space-4);
}

/* Schedule items */
.dash-schedule-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.dash-schedule-item:last-child {
  border-bottom: none;
}
.dash-schedule-today {
  background: rgba(var(--color-primary-rgb), 0.05);
  margin: 0 calc(var(--space-4) * -1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}
.dash-schedule-date {
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.dash-schedule-day {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.dash-schedule-month {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.dash-schedule-info {
  flex: 1;
  min-width: 0;
}
.dash-schedule-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.dash-schedule-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Status items */
.dash-status-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}
.dash-status-item:last-child {
  border-bottom: none;
}
a.dash-status-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  margin: 0 calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
a.dash-status-link:hover {
  background: var(--bg-hover);
  color: inherit;
}
.dash-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.dash-status-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.dash-status-label i {
  margin-right: var(--space-1);
}
.dash-status-value {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dash-progress {
  height: 4px;
  margin-top: var(--space-2);
  border-radius: var(--radius-full);
}

/* Upload list */
.dash-uploads-list {
  display: flex;
  flex-direction: column;
}
.dash-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}
.dash-upload-item:last-child {
  border-bottom: none;
}
.dash-upload-item:hover {
  background: var(--bg-hover);
  color: inherit;
}
.dash-upload-info {
  flex: 1;
  min-width: 0;
}
.dash-upload-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-upload-date {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dash-upload-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.dash-upload-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Compact upload zone */
.dash-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
  margin-top: var(--space-4);
}
.dash-upload-zone:hover,
.dash-upload-zone.dragover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.03);
}
.dash-upload-zone i {
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   AI POLICY — checklist of categories the org admin allows.
   Lives on /settings → AI Policy tab. Each row has a switch on the
   left, label + description + examples on the right. Disabled rows
   dim for at-a-glance state.
   ═══════════════════════════════════════════════════════════════ */
.ai-policy-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--border-light, #eee);
  border-radius: 10px;
  margin-bottom: var(--space-2);
  transition: background 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.ai-policy-row:hover { background: var(--bg-surface, #f8f9fa); }
.ai-policy-row-off { opacity: 0.55; }
.ai-policy-switch { flex-shrink: 0; padding-top: 4px; }
.ai-policy-switch .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }
.ai-policy-body { flex: 1; cursor: pointer; }
.ai-policy-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.ai-policy-desc {
  font-size: 0.85rem; color: var(--text-muted, #6c757d);
  line-height: 1.5; margin-bottom: 6px; max-width: 60ch;
}
.ai-policy-examples {
  font-size: 0.75rem; color: var(--text-muted, #6c757d);
  font-style: italic; opacity: 0.85;
}
html[data-mode="dark"] .ai-policy-row {
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .ai-policy-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN COMMAND CENTER — dedicated hub at /admin/tools.
   Hero + KPI strip + grouped tile grid. Distinct from the pastor
   command center at /admin/dashboard.
   ═══════════════════════════════════════════════════════════════ */
.admin-center { margin-bottom: var(--space-6); }

.admin-center-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.admin-center-hero-head { flex: 1; min-width: 0; }
.admin-center-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary, #1F3864);
  margin-bottom: var(--space-2);
}
.admin-center-eyebrow-sep { color: var(--text-muted); margin: 0 4px; opacity: 0.6; }
.admin-center-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.admin-center-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 60ch;
}

/* Today callout — dynamic banner driven by the highest-priority signal.
   Severities (calm/info/warning/urgent) carry through to background,
   icon color, and a left accent bar. Always shows a primary CTA on the
   right so the hero earns its space. */
.admin-today {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-light, #eee);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.admin-today-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.25rem;
}
.admin-today-body { flex: 1; min-width: 0; }
.admin-today-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #6c757d);
  margin-bottom: 2px;
}
.admin-today-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.admin-today-detail {
  font-size: 0.85rem;
  color: var(--text-muted, #6c757d);
  line-height: 1.4;
  margin-top: 2px;
}
.admin-today-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Severity variants — left accent bar + icon chip background. */
.admin-today-calm    { border-left-color: var(--text-muted, #6c757d); }
.admin-today-calm    .admin-today-icon { background: rgba(108, 117, 125, 0.10); color: #6c757d; }
.admin-today-info    { border-left-color: #0d6efd; }
.admin-today-info    .admin-today-icon { background: rgba(13, 110, 253, 0.10); color: #0d6efd; }
.admin-today-warning { border-left-color: #ffc107; background: rgba(255, 193, 7, 0.04); }
.admin-today-warning .admin-today-icon { background: rgba(255, 193, 7, 0.18); color: #b58105; }
.admin-today-urgent  { border-left-color: #dc3545; background: rgba(220, 53, 69, 0.05); }
.admin-today-urgent  .admin-today-icon { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.admin-today-urgent  .admin-today-title { color: #dc3545; }

html[data-mode="dark"] .admin-today {
  background: var(--card-bg, #1a1a2e);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-today-warning { background: rgba(255, 193, 7, 0.08); }
html[data-mode="dark"] .admin-today-urgent  { background: rgba(220, 53, 69, 0.10); }
.admin-center-hero-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Toolbar — search filter sits between the Today banner and the KPI
   strip so the user can narrow tiles immediately on landing. Keyboard
   shortcut "/" focuses the input from anywhere on the page. */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-toolbar-search {
  position: relative;
  flex: 1;
  max-width: 480px;
}
.admin-toolbar-search-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--text-muted, #6c757d);
  pointer-events: none;
  font-size: 0.95rem;
}
.admin-toolbar-search .form-control {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  background: var(--card-bg, #fff);
  border-color: var(--border-light, #eee);
  font-size: 0.92rem;
}
.admin-toolbar-search .form-control:focus {
  border-color: rgba(var(--color-primary-rgb, 31, 56, 100), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 31, 56, 100), 0.10);
}
.admin-toolbar-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted, #6c757d);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-toolbar-clear:hover { color: var(--text-primary); background: var(--bg-surface, #f0f0f0); }
.admin-toolbar-meta { flex-shrink: 0; }

/* "Recently visited" group — fades in once the JS finds something
   stashed in localStorage. The block has the same group styling as
   the rest so it doesn't read as a special UI. */
.admin-recent { margin-bottom: var(--space-4); }

/* KPI strip — four big numbers at the top of the hub. Each is a link
   to the related detail page so the strip doubles as quick-nav. */
.admin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.admin-kpi {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-light, #eee);
  border-top: 3px solid var(--border-light, #eee);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Top accent border per KPI — distinguishes them from tiles below. */
.admin-kpi-color-primary { border-top-color: var(--color-primary, #1F3864); }
.admin-kpi-color-success { border-top-color: #198754; }
.admin-kpi-color-warning { border-top-color: #ffc107; }
.admin-kpi-color-info    { border-top-color: #0d6efd; }
.admin-kpi:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--color-primary-rgb, 31, 56, 100), 0.35);
  box-shadow: 0 6px 14px -8px rgba(var(--color-primary-rgb, 31, 56, 100), 0.18);
  color: var(--text-primary);
}
.admin-kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.admin-kpi-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.admin-kpi-foot {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.admin-kpi-alert {
  border-color: rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.04);
}
.admin-kpi-alert .admin-kpi-value { color: var(--color-danger, #dc3545); }

/* Legacy bridge: existing .admin-hub styles (added in the previous
   placement) used .admin-hub as the wrapper. The tools-page wrapper is
   .admin-center but uses the same group + tile internals. */
.admin-hub {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-light, #e5e7eb);
}
.admin-hub .dash-section-header {
  margin-bottom: var(--space-4);
}
.admin-hub-group {
  margin-bottom: var(--space-5);
}
.admin-hub-group:last-child {
  margin-bottom: 0;
}
.admin-hub-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light, #eee);
  display: flex;
  align-items: center;
}
.admin-hub-group-platform .admin-hub-group-label {
  color: var(--color-danger, #dc3545);
  border-bottom-color: rgba(220, 53, 69, 0.18);
}

.admin-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.admin-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-light, #eee);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  cursor: pointer;
  overflow: hidden;
}
.admin-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(var(--color-primary-rgb, 31, 56, 100), 0.05) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.admin-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--color-primary-rgb, 31, 56, 100), 0.35);
  box-shadow: 0 8px 20px -8px rgba(var(--color-primary-rgb, 31, 56, 100), 0.18);
  color: var(--text-primary);
}
.admin-tile:hover::before {
  opacity: 1;
}
.admin-tile:active {
  transform: translateY(0);
}
.admin-tile-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.admin-tile-icon-primary   { background: rgba(31, 56, 100, 0.10);    color: #1F3864; }
.admin-tile-icon-info      { background: rgba(13, 110, 253, 0.10);    color: #0d6efd; }
.admin-tile-icon-success   { background: rgba(25, 135, 84, 0.10);     color: #198754; }
.admin-tile-icon-warning   { background: rgba(255, 193, 7, 0.15);     color: #b58105; }
.admin-tile-icon-danger    { background: rgba(220, 53, 69, 0.10);     color: #dc3545; }
.admin-tile-icon-secondary { background: rgba(108, 117, 125, 0.10);   color: #6c757d; }
.admin-tile-body {
  flex: 1;
  min-width: 0;
}
.admin-tile-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.35;
}
.admin-tile-desc {
  font-size: 0.82rem;
  color: var(--text-muted, #6c757d);
  line-height: 1.45;
}
/* Featured tile — visually weighted for daily/high-frequency actions.
   Same grid cell, just heavier presence: accent stripe on the left
   edge, bolder title, slightly more padding on the body. */
.admin-tile-featured {
  border-left: 4px solid var(--color-primary, #1F3864);
  padding-left: calc(var(--space-4) - 3px);
}
.admin-tile-featured .admin-tile-title {
  font-size: 1.05rem;
  font-weight: 700;
}
.admin-tile-featured .admin-tile-icon {
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
}
/* Focus visible — tiles + KPI cards both get the same outlined ring. */
.admin-tile:focus-visible,
.admin-kpi:focus-visible {
  outline: 2px solid var(--color-primary, #1F3864);
  outline-offset: 3px;
  border-radius: 12px;
}
.admin-tile-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.admin-tile-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.admin-tile-disabled:hover {
  transform: none;
  border-color: var(--border-light, #eee);
  box-shadow: none;
  background: var(--card-bg, #fff);
}
.admin-tile-disabled:hover::before { opacity: 0; }
/* Dark mode: tiles use the dark card surface with slightly stronger borders. */
html[data-mode="dark"] .admin-tile {
  background: var(--card-bg, #1a1a2e);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-tile:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
html[data-mode="dark"] .admin-hub-group-label {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-hub {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-center-hero {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-kpi {
  background: var(--card-bg, #1a1a2e);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-mode="dark"] .admin-kpi-alert {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.4);
}
/* Responsive: tile widths get slightly smaller on narrow screens but the grid
   continues to flow naturally via auto-fill. */
@media (max-width: 576px) {
  .admin-tile-grid { grid-template-columns: 1fr; }
  .admin-tile { padding: var(--space-3); }
  .admin-tile-icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .admin-tile-badge { position: static; align-self: flex-start; margin-top: 4px; }

  /* Hero on mobile: stack head + actions, actions become full-width pills. */
  .admin-center-hero { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .admin-center-hero-actions { width: 100%; }
  .admin-center-hero-actions .btn { flex: 1; }

  /* Today banner on mobile: stack everything. */
  .admin-today { flex-wrap: wrap; }
  .admin-today-cta { width: 100%; margin-top: var(--space-2); }

  /* KPI strip on mobile: smaller values, 2-up. */
  .admin-kpi-strip { grid-template-columns: 1fr 1fr; }
  .admin-kpi-value { font-size: 1.5rem; }

  /* Filter toolbar: search input takes full width, count chip below. */
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar-search { max-width: 100%; }
}

/* Empty state */
.dash-empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
}
.dash-empty-state i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-2);
  opacity: 0.4;
}
.dash-empty-state p {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .dash-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .dash-hero-actions {
    width: 100%;
  }
  .dash-hero-actions .btn {
    flex: 1;
  }
  .dash-service-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .dash-service-type {
    flex-basis: auto;
  }
  .dash-service-actions {
    width: 100%;
    justify-content: space-between;
  }
  .dash-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
  .dash-greeting {
    font-size: 1.4rem;
  }
  .dash-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── 10. HERO / SEARCH ─────────────────────────────────── */

.search-hero {
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}
.search-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.search-hero .lead {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.search-box {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.search-box .form-control {
  font-size: var(--text-lg);
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}
.search-box .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm), 0 0 0 4px var(--input-focus-ring);
}
.search-box .btn-primary {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  padding: 0.9rem 2rem;
  font-size: var(--text-lg);
  font-weight: 600;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--text-on-primary);
  transition: all var(--transition-fast);
}
.search-box .btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}


/* ─── 11. AI PANEL ──────────────────────────────────────── */

.ai-panel {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-slow);
}
.ai-panel h5 {
  color: var(--text-on-primary);
  font-weight: 700;
}
.ai-panel .ai-subtitle {
  opacity: 0.8;
  font-size: var(--text-sm);
}
.ai-panel .form-control {
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(255,255,255,0.6);
  color: #1A1A2E;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.ai-panel .form-control::placeholder {
  color: #6E6E80;
}
.ai-panel .form-control:focus {
  background: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.3);
}
.ai-panel .btn-accent {
  background: var(--color-accent);
  color: #1A1A2E;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
}
.ai-panel .btn-accent:hover {
  background: var(--color-accent-light);
}
.ai-answer-box {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

/* AI panel provider hint */
.ai-panel-hint {
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
}
.ai-panel-hint a {
  color: var(--color-accent-light, #F0D78C);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-panel-hint a:hover {
  color: #fff;
}

/* AI sermon result cards */
.ai-sermon-card {
  display: block;
  border: 1px solid var(--border-light, #dee2e6);
  border-left: 3px solid var(--color-primary, #1F3864);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-surface, #fff);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-sermon-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--text-primary);
}
.ai-sermon-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.ai-sermon-card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary, #1F3864);
  line-height: 1.3;
}
.ai-sermon-card:hover .ai-sermon-card-title {
  color: var(--color-accent);
}
.ai-sermon-card-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-sermon-card-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.ai-sermon-card-meta .badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2em 0.5em;
}
.ai-sermon-card-summary {
  font-size: 0.78rem;
  color: var(--text-secondary, #6c757d);
  line-height: 1.4;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-sermon-card-themes {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.ai-sermon-card-themes .badge-theme {
  font-size: 0.65rem;
  padding: 0.15em 0.5em;
  cursor: default;
}

/* AI pagination buttons on gradient background */
.ai-page-btn {
  min-width: 2rem;
}


/* ─── 12. BADGES ────────────────────────────────────────── */

.badge-scripture {
  background: var(--badge-scripture-bg);
  color: var(--badge-scripture-text);
  font-weight: 500;
  font-size: var(--text-xs);
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.badge-scripture:hover {
  background: var(--color-primary);
  color: var(--text-on-primary);
}

.badge-theme {
  background: var(--badge-theme-bg);
  color: var(--badge-theme-text);
  font-weight: 500;
  font-size: var(--text-xs);
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.badge-theme:hover {
  background: var(--color-primary);
  color: var(--text-on-primary);
  transform: scale(1.05);
}

.badge-status {
  font-weight: 500;
  font-size: var(--text-xs);
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full);
}
/* Text hues darkened to clear WCAG AA 4.5:1 on the near-white tint (a11y 2026-06-23). */
.badge-status.status-pending   { background: #6C757D20; color: #565C64; }
.badge-status.status-extracted { background: #19875420; color: #146C43; }
.badge-status.status-parsed    { background: #0D6EFD20; color: #0A53BE; }
.badge-status.status-complete  { background: #05966920; color: #047150; }
.badge-status.status-error     { background: #DC354520; color: #B02A37; }

html[data-mode="dark"] .badge-status.status-pending   { color: #9CA3AF; }
html[data-mode="dark"] .badge-status.status-extracted { color: #34D399; }
html[data-mode="dark"] .badge-status.status-parsed    { color: #60A5FA; }
html[data-mode="dark"] .badge-status.status-complete  { color: #34D399; }
html[data-mode="dark"] .badge-status.status-error     { color: #F87171; }

/* --- Prep status badges (draft/in_progress/ready/preached) --- */
.prep-status-wrapper {
  position: relative;
  display: inline-block;
}
.prep-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.prep-status-badge:hover { filter: brightness(0.92); }

.prep-status-draft       { background: #6C757D20; color: #565C64; }
.prep-status-in_progress { background: #0D6EFD18; color: #0A53BE; }
.prep-status-ready       { background: #19875418; color: #146C43; }
.prep-status-preached    { background: #D4A84B22; color: #7A5C12; }

html[data-mode="dark"] .prep-status-draft       { background: #6C757D30; color: #9CA3AF; }
html[data-mode="dark"] .prep-status-in_progress { background: #0D6EFD28; color: #60A5FA; }
html[data-mode="dark"] .prep-status-ready       { background: #19875428; color: #34D399; }
html[data-mode="dark"] .prep-status-preached    { background: #D4A84B28; color: #E0C068; }

/* Prep status dropdown */
.prep-status-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown, 100);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 0.25rem;
  min-width: 140px;
}
.prep-status-dropdown.show { display: block; }

.prep-status-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: none;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.12s;
}
.prep-status-option:hover { background: var(--surface-hover, rgba(0,0,0,0.04)); }
.prep-status-option.active { font-weight: 700; }

.prep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prep-dot-draft       { background: #6C757D; }
.prep-dot-in_progress { background: #0D6EFD; }
.prep-dot-ready       { background: #198754; }
.prep-dot-preached    { background: #D4A84B; }

/* Source badges (Published / Imported) */
.badge-source {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-sm);
  color: #fff;
}
.badge-source.source-published { background: #198754; }
.badge-source.source-imported  { background: #0d6efd; }

/* Document type badges */
.badge-doctype {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-sm);
  color: #fff;
}
.badge-doctype.doctype-sermon       { background: #6f42c1; }
/* Light fills get dark ink so the label clears AA 4.5:1 (a11y 2026-06-23). */
.badge-doctype.doctype-lesson       { background: #0dcaf0; color: #14323A; }
.badge-doctype.doctype-handout      { background: #fd7e14; color: #3D2400; }
.badge-doctype.doctype-listener_notes { background: #20c997; color: #0E3A2C; }
.badge-doctype.doctype-outline      { background: #6c757d; }
.badge-doctype.doctype-study_guide  { background: #0d6efd; }
.badge-doctype.doctype-devotional   { background: #d63384; }
.badge-doctype.doctype-slides       { background: #ffc107; color: #1A1A2E; }


/* ─── 13. TABS ──────────────────────────────────────────── */

.si-tabs .nav-tabs {
  border-bottom: 2px solid var(--border-light);
  gap: var(--space-1);
}
.si-tabs .nav-link {
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition-fast);
}
.si-tabs .nav-link:hover {
  color: var(--color-primary);
  background: var(--bg-surface-hover);
  border-bottom-color: var(--border-color);
}
.si-tabs .nav-link.active {
  color: var(--color-primary);
  background: transparent;
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}


/* ─── 14. FORMS ─────────────────────────────────────────── */

.form-control,
.form-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
  background: var(--bg-input);
  color: var(--text-primary);
}
.form-control::placeholder {
  color: var(--text-muted);
}

.form-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.form-text {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-label {
  color: var(--text-primary);
}

/* Switch styling */
.form-switch .form-check-input {
  border-color: var(--border-color);
  background-color: var(--bg-surface-alt);
}
.form-switch .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ─── 15. BUTTONS ───────────────────────────────────────── */

.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--color-primary);
  color: var(--text-on-primary);
}

.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1A1A2E;
}
.btn-accent:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.btn:active::after {
  animation: ripple 0.5s ease-out;
}


/* ─── 16. TABLES ────────────────────────────────────────── */

.table {
  color: var(--text-primary);
  --bs-table-bg: var(--bg-surface);
  --bs-table-hover-bg: var(--bg-surface-hover);
  --bs-table-striped-bg: var(--bg-surface-hover);
  border-color: var(--border-light);
}
.table th {
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-color: var(--border-light);
  padding: var(--space-3) var(--space-4);
}
.table td {
  border-color: var(--border-light);
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
.table tbody tr {
  transition: background-color var(--transition-fast);
}
.table-hover tbody tr:hover {
  background-color: var(--bg-surface-hover);
}

.table-responsive {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}


/* ─── 17. RESULT CARDS ──────────────────────────────────── */

.result-card {
  border-left: 4px solid var(--color-primary-light);
  margin-bottom: var(--space-4);
  transition: all var(--transition-base);
}
.result-card:hover {
  border-left-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.result-card .card-title a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-lg);
}
.result-card .card-title a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}
.result-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.result-snippet {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}
.result-snippet mark {
  background: rgba(var(--color-accent-rgb), 0.3);
  padding: 0.1em 0.2em;
  border-radius: 3px;
  color: inherit;
}


/* ─── 18. SERMON DETAIL ─────────────────────────────────── */

/* Detail Toolbar (matches compose topbar design language) */
.detail-toolbar {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.detail-toolbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light, #eee);
}
.detail-toolbar-title {
  flex: 1;
  min-width: 0;
}
.detail-toolbar-title h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.detail-toolbar-meta span,
.detail-toolbar-meta a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.detail-series-badge {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.detail-series-badge.muted {
  color: var(--text-muted);
}
.detail-toolbar-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.detail-ai-badge {
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #198754 10%, transparent);
  color: #198754;
  font-weight: 600;
}
/* Collapsible section chevron (detail page) */
.detail-collapse-chevron {
  transition: transform 0.2s ease;
}
[aria-expanded="true"] .detail-collapse-chevron {
  transform: rotate(180deg);
}
.detail-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}
.detail-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Separator between action groups */
.detail-action-group + .detail-action-group::before {
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  background: var(--border-light, #eee);
  margin-right: 4px;
}
.detail-action-group.ms-auto::before {
  display: none;
}

/* Responsive: detail toolbar on tablet */
@media (max-width: 767.98px) {
  .detail-toolbar-row {
    flex-direction: column;
    gap: var(--space-2);
  }
  .detail-toolbar-title h1 {
    font-size: var(--text-lg);
  }
  .detail-toolbar-actions {
    gap: 4px;
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .detail-toolbar-actions .btn {
    min-height: 36px;
    min-width: 36px;
  }
  .detail-action-group + .detail-action-group::before {
    display: none;
  }
}
/* Responsive: detail toolbar on phone */
@media (max-width: 576px) {
  .detail-toolbar-title h1 {
    font-size: var(--text-base);
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .detail-toolbar-actions .btn {
    min-height: 40px;
    min-width: 40px;
    font-size: var(--text-xs);
  }
  .detail-toolbar-meta {
    font-size: var(--text-xs);
  }
}

/* AI Summary banner */
.ai-summary-banner {
  border-left: 4px solid var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6);
}

/* Detail Overview section headers */
#overview h5 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
/* Full Text collapsible link styling */
#overview a[data-bs-toggle="collapse"] {
  color: var(--text-primary);
}
#overview a[data-bs-toggle="collapse"]:hover {
  color: var(--color-primary);
}

/* Full text display */
.full-text-content {
  max-height: 700px;
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--bg-surface-hover);
  border-radius: var(--radius-md);
  line-height: 1.8;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.full-text-content .sermon-heading {
  font-family: var(--font-primary);
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-primary-light, #ccc);
  padding-bottom: 0.3rem;
}
.full-text-content .sermon-subheading {
  font-family: var(--font-primary);
}
.full-text-content .sermon-meta-line {
  font-family: var(--font-primary);
  font-size: 0.85em;
  padding: 0.15rem 0.5rem;
  border-left: 3px solid var(--color-primary-light, #ccc);
}
.full-text-content .sermon-body {
  text-align: justify;
  hyphens: auto;
}
.full-text-content .sermon-short-line {
  font-family: var(--font-primary);
}

/* ─── Styled Sermon Display (Matt Modern) ────────────────── */
/* Container */
.styled-sermon {
  font-family: Arial, var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

/* Title */
.styled-sermon .ss-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--element-heading);
  text-align: center;
  margin-bottom: 0.25rem;
  padding: 0.5rem 0;
}

/* Subtitle */
.styled-sermon .ss-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #2E75B6;
  text-align: center;
  margin-bottom: 1rem;
}

/* Main heading (purple filled background) */
.styled-sermon .ss-heading1 {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--element-heading);
  border-left: 4px solid #C9A84C;
  padding: 0.6rem 1rem;
  margin: 1.5rem 0 0.75rem;
  border-radius: 3px;
}

/* Sub-heading (light blue bg) */
.styled-sermon .ss-heading2 {
  font-size: 15px;
  font-weight: 700;
  color: #1F4E79;
  background: #D6E4F0;
  padding: 0.4rem 0.75rem;
  margin: 1rem 0 0.5rem;
  border-radius: 3px;
}

/* Minor heading / numbered point */
.styled-sermon .ss-heading3 {
  font-size: 14px;
  font-weight: 600;
  color: #1F4E79;
  margin: 0.75rem 0 0.4rem;
}

/* Scripture reference (bold blue) */
.styled-sermon .ss-scripture-ref {
  font-size: 14px;
  font-weight: 700;
  color: var(--element-scripture);
  padding-left: 0.375rem;
  margin: 0.75rem 0 0.25rem;
}

/* Scripture quoted text (framed blue block) */
.styled-sermon .ss-scripture-text {
  font-family: Georgia, var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--element-scripture);
  background: #D6E4F0;
  border-left: 3px solid var(--element-scripture);
  border-right: 3px solid var(--element-scripture);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0.375rem 0.75rem;
  line-height: 1.65;
  border-radius: 2px;
}

/* Scripture inline (within a paragraph) */
.styled-sermon .ss-scripture-inline {
  font-family: Georgia, var(--font-serif);
  font-style: italic;
  color: var(--element-scripture);
}

/* Biblical illustration (orange left border) */
.styled-sermon .ss-illustration {
  font-size: 14px;
  font-weight: 600;
  color: var(--element-quote);
  border-left: 3px solid var(--element-quote);
  padding-left: 0.75rem;
  margin: 0.75rem 0 0.4rem;
}

/* Real-world illustration (green left border) */
.styled-sermon .ss-illustration-rw {
  font-size: 14px;
  font-weight: 600;
  color: var(--element-illustration);
  border-left: 3px solid var(--element-illustration);
  padding-left: 0.75rem;
  margin: 0.75rem 0 0.4rem;
}

/* Challenge heading (red filled background) */
.styled-sermon .ss-challenge {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--element-application);
  border-left: 4px solid #C9A84C;
  padding: 0.6rem 1rem;
  margin: 1.5rem 0 0.75rem;
  border-radius: 3px;
}

/* Callout (muted red italic) */
.styled-sermon .ss-callout {
  font-style: italic;
  color: var(--element-application);
  margin: 0.5rem 0 0.5rem 0.5rem;
}

/* Pull quote (centered, gold borders) */
.styled-sermon .ss-pull-quote {
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--element-heading);
  text-align: center;
  border-top: 2px solid #C9A84C;
  border-bottom: 2px solid #C9A84C;
  padding: 0.75rem 1.5rem;
  margin: 1rem 2rem;
}

/* Transition line */
.styled-sermon .ss-transition {
  font-weight: 700;
  font-style: italic;
  color: var(--element-heading);
  padding-left: 0.25rem;
  margin: 0.5rem 0;
}

/* Bullets */
.styled-sermon .ss-bullet {
  padding-left: 1.25rem;
  margin: 0.25rem 0;
  position: relative;
}
.styled-sermon .ss-bullet::before {
  content: "\25CF";
  color: var(--element-heading);
  position: absolute;
  left: 0.25rem;
  font-size: 0.6em;
  top: 0.35em;
}
.styled-sermon .ss-sub-bullet {
  padding-left: 2rem;
  margin: 0.2rem 0;
  position: relative;
}
.styled-sermon .ss-sub-bullet::before {
  content: "\25CB";
  color: #2E75B6;
  position: absolute;
  left: 1rem;
  font-size: 0.6em;
  top: 0.35em;
}

/* Body text */
.styled-sermon .ss-body {
  margin: 0.4rem 0;
  line-height: 1.75;
}

/* Metadata display */
.styled-sermon .ss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.9em;
  color: #999999;
  font-style: italic;
  border-left: 3px solid #D6E4F0;
  padding-left: 0.5rem;
  margin: 0.25rem 0;
}
.styled-sermon .ss-meta-item {
  white-space: nowrap;
}
.styled-sermon .ss-meta-item + .ss-meta-item::before {
  content: "\2014 ";
  margin-right: 0;
}
.styled-sermon .ss-meta-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin: 0.75rem 0;
  background: #D6E4F0;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}
.styled-sermon .ss-meta-row {
  display: flex;
  gap: 0.5rem;
}
.styled-sermon .ss-meta-label {
  font-weight: 700;
  color: #1F4E79;
  font-size: 0.85em;
  min-width: 5rem;
}
.styled-sermon .ss-meta-value {
  color: #333333;
  font-size: 0.85em;
}

/* Table */
.styled-sermon .ss-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.9em;
}
.styled-sermon .ss-table td {
  padding: 0.35rem 0.5rem;
  border: 1px solid #D6E4F0;
  vertical-align: top;
}

/* Inline color classes (from Word font colors) */
.styled-sermon .ss-color-purple { color: var(--element-heading); }
.styled-sermon .ss-color-blue   { color: var(--element-scripture); }
.styled-sermon .ss-color-navy   { color: #1F4E79; }
.styled-sermon .ss-color-medblue { color: #2E75B6; }
.styled-sermon .ss-color-gold   { color: #C9A84C; }
.styled-sermon .ss-color-orange { color: var(--element-quote); }
.styled-sermon .ss-color-green  { color: var(--element-illustration); }
.styled-sermon .ss-color-red    { color: var(--element-application); }
.styled-sermon .ss-color-gray   { color: #999999; }

/* Gold divider */
.styled-sermon .ss-divider {
  border: none;
  border-top: 2px solid #C9A84C;
  margin: 1rem 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .styled-sermon {
  color: #e0e0e0;
}
[data-theme="dark"] .styled-sermon .ss-heading1 {
  background: #5c1fad;
}
[data-theme="dark"] .styled-sermon .ss-heading2 {
  background: rgba(214,228,240,0.15);
  color: #90b4d8;
}
[data-theme="dark"] .styled-sermon .ss-scripture-text {
  background: rgba(214,228,240,0.1);
  border-left-color: #4a6fa5;
  border-right-color: #4a6fa5;
  color: #8aade6;
}
[data-theme="dark"] .styled-sermon .ss-scripture-ref {
  color: #8aade6;
}
[data-theme="dark"] .styled-sermon .ss-body {
  color: #d4d4d4;
}
[data-theme="dark"] .styled-sermon .ss-challenge {
  background: #a0403d;
}
[data-theme="dark"] .styled-sermon .ss-meta-table {
  background: rgba(214,228,240,0.1);
}
[data-theme="dark"] .styled-sermon .ss-table td {
  border-color: rgba(214,228,240,0.2);
}

/* Scripture ref cards */
.scripture-ref-card {
  background: var(--scripture-bg);
  border-left: 3px solid var(--color-primary-light);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-fast);
}
.scripture-ref-card:hover {
  border-left-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.08);
}

/* Illustration cards */
.illustration-card {
  background: var(--illustration-bg);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Blockquote (key quotes) */
.key-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
  font-style: italic;
  color: var(--text-secondary);
}
.key-quote p {
  margin-bottom: 0;
}

/* Outline points */
.outline-point {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-hover);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.outline-point strong {
  color: var(--color-primary);
}


/* ─── 19. UPLOAD ZONE ───────────────────────────────────── */

.upload-zone {
  border: 3px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--bg-surface);
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.03);
}
.upload-zone .upload-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  transition: color var(--transition-fast);
}
.upload-zone:hover .upload-icon,
.upload-zone.dragover .upload-icon {
  color: var(--color-primary);
}


/* ─── 20. LOGIN PAGE ────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
}

/* -- Ghosted Dashboard Background -- */
.login-bg-dashboard {
  position: absolute;
  inset: 0;
  padding: 0;
  filter: blur(3px);
  opacity: 0.35;
  pointer-events: none;
  transform: scale(1.02);
  font-family: var(--font-sans);
}
.login-bg-navbar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  display: flex;
  align-items: center;
  padding: 12px 24px;
  gap: 24px;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}
.login-bg-brand {
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
}
.login-bg-nav-links {
  display: flex;
  gap: 16px;
}
.login-bg-nav-right {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}
.login-bg-search-pill {
  background: rgba(255,255,255,0.15);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.login-bg-content {
  background: #f0f2f5;
  padding: 28px 32px;
  min-height: calc(100vh - 50px);
}
.login-bg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.login-bg-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #1a1a2e;
}
.login-bg-btn {
  background: var(--color-primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
}
.login-bg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.login-bg-stat {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.login-bg-stat-num {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: #1a1a2e;
}
.login-bg-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.login-bg-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.login-bg-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}
.login-bg-card-title {
  font-weight: 700;
  font-size: var(--text-lg);
  color: #1a1a2e;
  margin-bottom: 14px;
}
.login-bg-dropzone {
  border: 2px dashed #d0d5dd;
  border-radius: var(--radius-xl);
  padding: 30px;
  text-align: center;
  color: #aaa;
  font-size: var(--text-sm);
  line-height: 1.8;
}
.login-bg-dropzone i {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}
.login-bg-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: var(--text-sm);
  color: #444;
}
.login-bg-table-row:last-child { border-bottom: none; }
.login-bg-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xl);
  background: #e8f5e9;
  color: #2e7d32;
}

/* -- Dark overlay -- */
.login-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(15, 23, 42, 0.60) 50%,
    rgba(15, 23, 42, 0.70) 100%
  );
  z-index: 1;
}

/* -- Login Card (foreground) -- */
.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  background: var(--bg-surface);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.15);
}
.login-card .card-body {
  padding: var(--space-8);
}

/* Login icon circle */
.login-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.login-title {
  color: var(--color-primary);
  font-weight: 700;
}
.login-submit-btn {
  font-weight: 600;
  letter-spacing: 0.3px;
}
.login-card .input-group-text {
  background: var(--bg-surface);
  border-right: none;
  color: var(--text-secondary);
}
.login-card .input-group .form-control {
  border-left: none;
}
.login-card .input-group .form-control:focus {
  box-shadow: none;
}
.login-card .input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 31, 56, 100), 0.15);
  border-radius: var(--radius-sm);
}
.login-card .input-group:focus-within .input-group-text,
.login-card .input-group:focus-within .form-control {
  border-color: var(--color-primary);
}

/* Mobile: simplify the ghost dashboard */
@media (max-width: 768px) {
  .login-bg-dashboard {
    opacity: 0.2;
  }
  .login-bg-cards {
    grid-template-columns: 1fr;
  }
  .login-bg-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .login-card {
    margin: 0 var(--space-4);
  }
  .login-card .card-body {
    padding: var(--space-6);
  }
}


/* ─── 21. PAGINATION ────────────────────────────────────── */

.pagination .page-link {
  color: var(--color-primary);
  border-color: var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  margin: 0 2px;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.pagination .page-link:hover {
  background: var(--bg-surface-hover);
  color: var(--color-primary);
}
.pagination .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-primary);
}
.pagination .page-item.disabled .page-link {
  color: var(--text-muted);
  background: var(--bg-surface);
}


/* ─── 22. FOOTER ────────────────────────────────────────── */

/* Note: .si-footer was removed in v2.x — replaced by .app-footer in section 8 */


/* ─── 23. ALERTS ────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm);
}

html[data-mode="dark"] .alert-info    { background: #0C4A6E30; color: #7DD3FC; }
html[data-mode="dark"] .alert-success { background: #05966920; color: #6EE7B7; }
html[data-mode="dark"] .alert-danger  { background: #991B1B20; color: #FCA5A5; }
html[data-mode="dark"] .alert-warning { background: #92400E20; color: #FCD34D; }


/* ─── 24. DROPDOWN ──────────────────────────────────────── */

.dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}
.dropdown-item {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}
.dropdown-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}


/* ─── 25. MODAL ─────────────────────────────────────────── */

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.modal-header {
  border-bottom-color: var(--border-light);
}
.modal-footer {
  border-top-color: var(--border-light);
}


/* ─── 26. ANIMATIONS ────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes ripple {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}


/* ─── 27. ADVANCED SEARCH ───────────────────────────────── */

.advanced-search {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.theme-cloud .badge {
  margin: var(--space-1);
  font-size: var(--text-sm);
}


/* ─── 28. PROGRESS BAR ─────────────────────────────────── */

.progress {
  background: var(--bg-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  background: var(--color-primary);
  transition: width var(--transition-base);
}


/* ─── 29. ACCESSIBILITY ─────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.form-control:focus-visible,
.form-select:focus-visible {
  outline: none; /* handled by box-shadow above */
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ─── 30. REDUCED MOTION ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* ─── 31. NON-TEXT CONTRAST + FOCUS (WCAG 1.4.11 / 2.4.7) — a11y 2026-06-23 ── */

/* Form-control boundary ≥3:1 against white/surface (was Bootstrap #ced4da ≈1.6:1). */
.form-control,
.form-select,
.input-group-text {
  border-color: #9aa1a9;
}
html[data-mode="dark"] .form-control,
html[data-mode="dark"] .form-select,
html[data-mode="dark"] .input-group-text {
  border-color: #4a4e63;
}

/* The global header search box swallows focus (border:none); give it a clear ring. */
.header-search:focus-within {
  outline: 2px solid var(--color-primary, #1F3864);
  outline-offset: 1px;
  border-radius: var(--radius-md, 8px);
}
/* ─── 31. RESPONSIVE ────────────────────────────────────── */

@media (max-width: 991px) {
  .search-hero { padding: var(--space-8) 0 var(--space-6); }
  .search-hero h1 { font-size: var(--text-3xl); }

  /* Sidebar becomes off-canvas on mobile */
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .app-sidebar.mobile-open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0 !important;
  }
  .header-search-inner { width: 160px; }
  .header-search-inner:focus-within { width: 200px; }
  .header-username { display: none; }
}

@media (max-width: 768px) {
  .search-hero { padding: var(--space-6) 0 var(--space-4); }
  .search-hero h1 { font-size: var(--text-2xl); }
  .stat-card .stat-number { font-size: var(--text-2xl); }
  .full-text-content { max-height: 400px; }
  .ai-panel { padding: var(--space-4); }
  .upload-zone { padding: var(--space-6); }
  .header-search { display: none; }
  .app-content { padding: 1rem; }
}

@media (max-width: 576px) {
  .container-main,
  .container-narrow {
    padding: 0 var(--space-3);
  }
}


/* ─── 32. PRINT ─────────────────────────────────────────── */

@media print {
  /* ── Hide chrome ── */
  .app-sidebar,
  .app-header,
  .app-footer,
  .btn:not(.print-keep),
  .pagination,
  .skip-link,
  .upload-zone,
  .dropdown,
  .builder-ai-sidebar,
  .builder-drag-handle,
  .builder-section-actions,
  .builder-container-actions,
  .confirm-delete-form,
  .breadcrumb,
  .no-print,
  #autosave-status,
  #crashRecoveryBanner,
  .modal,
  .modal-backdrop,
  .offcanvas,
  .offcanvas-backdrop,
  .toast-container,
  #bug-report-fab,
  #bugReportModal,
  #research-panel,
  #version-panel,
  #attachments-panel,
  #scripture-workspace,
  #similarity-warnings,
  .sub-element .section-type-badge,
  .builder-container .quill-toolbar-inline { display: none !important; }

  /* ── Base print styles ── */
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; max-width: none !important; }
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  a { color: black !important; text-decoration: none !important; }

  /* Force highlight backgrounds to print */
  .highlight-yellow, .highlight-green, .highlight-red,
  .highlight-blue, .highlight-orange, .highlight-brown,
  .bullet-hl-yellow, .bullet-hl-green, .bullet-hl-red,
  .bullet-hl-blue, .bullet-hl-orange, .bullet-hl-brown {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: black !important;
  }

  .card {
    box-shadow: none !important;
    border: none !important;
    break-inside: avoid;
  }

  .card-header {
    background: none !important;
    border-bottom: 1px solid #ccc !important;
    padding: 0.25rem 0 !important;
  }

  .container, .container-fluid, .container-narrow {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Builder compose print ── */
  .builder-workspace {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .builder-topbar { display: none !important; }

  .compose-mode-toggle,
  .topbar-right-icons,
  .topbar-actions,
  .topbar-zoom-control { display: none !important; }

  .builder-container {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem !important;
    page-break-inside: avoid;
  }

  .builder-container-header {
    background: none !important;
    border-bottom: 1px solid #999 !important;
    padding: 0.25rem 0 !important;
  }

  .builder-container-body {
    padding: 0.5rem 0 !important;
  }

  .builder-section {
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0 !important;
  }

  .ql-toolbar { display: none !important; }
  .ql-container { border: none !important; }
  .ql-editor { padding: 0 !important; min-height: auto !important; }

  /* ── Sermon detail print ── */
  .detail-toolbar-actions,
  .detail-action-group,
  .sermon-sidebar-card,
  .cross-ref-sidebar,
  #sermonTabs,
  .nav-tabs { display: none !important; }

  /* Show ALL tab panes when printing (not just active) */
  .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* But hide tabs that are just UI/actions, not content */
  .tab-pane#attachments,
  .tab-pane#deliveries,
  .tab-pane#ai-analysis { display: none !important; }

  /* Each visible tab pane gets a section heading */
  .tab-pane#fulltext::before { content: "Full Text"; display: block; font-size: 14pt; font-weight: bold; border-bottom: 1px solid #999; padding-bottom: 0.25rem; margin: 1rem 0 0.5rem; }
  .tab-pane#scriptures::before { content: "Scriptures"; display: block; font-size: 14pt; font-weight: bold; border-bottom: 1px solid #999; padding-bottom: 0.25rem; margin: 1rem 0 0.5rem; }
  .tab-pane#outline::before { content: "Outline"; display: block; font-size: 14pt; font-weight: bold; border-bottom: 1px solid #999; padding-bottom: 0.25rem; margin: 1rem 0 0.5rem; }
  .tab-pane#illustrations::before { content: "Illustrations"; display: block; font-size: 14pt; font-weight: bold; border-bottom: 1px solid #999; padding-bottom: 0.25rem; margin: 1rem 0 0.5rem; }

  /* ── Page breaks ── */
  h1, h2, h3, h4, h5 { page-break-after: avoid; }
  table { page-break-inside: avoid; }

  /* ── Print header ── */
  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #333;
  }

  .print-header h1 { font-size: 16pt; margin: 0; }
  .print-header .print-meta { font-size: 10pt; color: #555; margin-top: 0.25rem; }

  /* ── Badge print ── */
  .badge {
    border: 1px solid #999 !important;
    background: white !important;
    color: black !important;
  }

  /* ── Detail page layout cleanup ── */
  .col-lg-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .col-lg-3 { display: none !important; }

  /* ── Compose page cleanup ── */
  .builder-section-type-badge { display: none !important; }
  .builder-container-header .badge { display: none !important; }
  [data-compose-mode="manuscript"] .builder-container {
    box-shadow: none !important;
    border: none !important;
  }
}


/* ─── 33. BOOTSTRAP OVERRIDES ───────────────────────────── */

/* Dark mode Bootstrap component overrides */
html[data-mode="dark"] .bg-light { background: var(--bg-surface-alt) !important; }
html[data-mode="dark"] .text-dark { color: var(--text-primary) !important; }
html[data-mode="dark"] .text-muted { color: var(--text-muted) !important; }
html[data-mode="dark"] .border { border-color: var(--border-color) !important; }
html[data-mode="dark"] .border-bottom { border-color: var(--border-color) !important; }
html[data-mode="dark"] .bg-white { background: var(--bg-surface) !important; }
html[data-mode="dark"] .bg-primary { background: var(--color-primary) !important; }
html[data-mode="dark"] .badge.bg-secondary { background: var(--bg-surface-alt) !important; color: var(--text-secondary) !important; }
html[data-mode="dark"] .badge.bg-light { background: var(--bg-surface-alt) !important; color: var(--text-primary) !important; }
html[data-mode="dark"] .list-group-item { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
html[data-mode="dark"] .accordion-button { background: var(--bg-surface); color: var(--text-primary); }
html[data-mode="dark"] .btn-close { filter: invert(1); }


/* ─── 34. SERMON BUILDER (Hierarchical v2) ─────────────── */

/* Builder compose: break out of the 1400px app-content cap */
.builder-workspace {
  max-width: 95%;
  margin: 0 auto;
}
/* Let the builder content area use full available width */
.app-content:has(.builder-workspace) {
  max-width: none;
}

/* ── Top Bar (legacy overrides removed — see Topbar Clean Layout below) ── */

/* ── Auto-Save Status Indicators ── */
.autosave-saved { color: var(--bs-success, #198754); font-size: var(--text-sm); }
.autosave-saving { color: var(--text-secondary, #6c757d); font-size: var(--text-sm); }
.autosave-dirty { color: var(--bs-warning, #ffc107); font-size: var(--text-sm); }
.autosave-error { color: var(--bs-danger, #dc3545); font-size: var(--text-sm); animation: pulse-error 2s infinite; }
@keyframes pulse-error {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Undo Toast (Gmail-style) ── */
.sbp-undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-dark, #212529);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-size: var(--text-sm, 0.875rem);
}
.sbp-undo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sbp-undo-toast .sbp-undo-btn {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Containers (Introduction, Main Points, Closing) ── */
.builder-container {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #fff);
  overflow: visible;
}

.builder-container-header {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-light, #eee);
  background: var(--bg-surface, #f8f9fa);
}

.container-title-input {
  border: none;
  background: transparent;
  font-size: var(--text-base);
  padding: 0.1rem 0.25rem;
  border-radius: var(--radius-sm);
  flex: 1 1 0;
  min-width: 120px;
}
.container-title-input:focus {
  outline: none;
  background: var(--bg-primary, #fff);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 31,56,100), 0.15);
}

/* Container type color-coding via left border — thick for visibility */
.container-intro {
  border-left: 6px solid var(--element-intro);
}
.container-intro .builder-container-header {
  background: rgba(216, 67, 21, 0.06);
}
.container-main-point {
  border-left: 6px solid var(--element-main-point);
}
.container-main-point .builder-container-header {
  background: rgba(74, 20, 140, 0.06);
}
.container-closing {
  border-left: 6px solid var(--element-closing);
}
.container-closing .builder-container-header {
  background: rgba(192, 80, 77, 0.06);
}

.builder-container-body {
  padding: 0.75rem;
}

/* Container body textarea (for main points) */
.builder-container-body .container-body-input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  min-height: 5.5em;
  resize: vertical;
  border: 1px solid var(--border-light, #eee);
  border-radius: var(--radius-sm);
}

/* Quill inside containers */
.container-quill-wrap {
  border: 1px solid var(--border-light, #eee);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* ── Sub-Elements ── */
.sub-elements-list {
  min-height: 24px;
}

.sub-element {
  border: 1px solid var(--border-light, #eee);
  border-left: 3px solid var(--el-color, var(--border-light, #ccc));
  border-radius: var(--radius-sm, 0.25rem);
  margin-bottom: 0.4rem;
  background: var(--bg-primary, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sub-element:hover {
  border-color: var(--border-color, #dee2e6);
  border-left-color: var(--el-color, var(--border-color, #dee2e6));
}

/* Element type colored left borders */
.sub-element[data-section-type="scripture"]               { --el-color: var(--element-scripture); }
.sub-element[data-section-type="body_text"]               { --el-color: #555; }
.sub-element[data-section-type="sub_heading"]             { --el-color: #1F4E79; }
.sub-element[data-section-type="biblical_illustration"]   { --el-color: var(--element-quote); }
.sub-element[data-section-type="real_world_illustration"] { --el-color: var(--element-illustration); }
.sub-element[data-section-type="quote"]                   { --el-color: var(--element-definition); }
.sub-element[data-section-type="pull_quote"]              { --el-color: var(--element-heading); }
.sub-element[data-section-type="word_study"]              { --el-color: var(--element-prayer); }
.sub-element[data-section-type="historical_context"]      { --el-color: #795548; }
.sub-element[data-section-type="cross_reference"]         { --el-color: var(--element-call-response); }
.sub-element[data-section-type="application"]             { --el-color: var(--element-application); }
.sub-element[data-section-type="prayer_point"]            { --el-color: var(--element-definition); }
.sub-element[data-section-type="transition"]              { --el-color: #777; }
.sub-element[data-section-type="bullet_list"]              { --el-color: #2E4057; }
.sub-element[data-section-type="note_to_self"]            { --el-color: #999; }

/* ── Sub-element visual cues: subtle background tints ── */
.sub-element[data-section-type="scripture"] {
  background: color-mix(in srgb, var(--el-color) 4%, var(--bg-primary, #fff));
}
.sub-element[data-section-type="biblical_illustration"],
.sub-element[data-section-type="real_world_illustration"] {
  background: color-mix(in srgb, var(--el-color) 4%, var(--bg-primary, #fff));
}
.sub-element[data-section-type="application"] {
  background: color-mix(in srgb, var(--el-color) 4%, var(--bg-primary, #fff));
}
.sub-element[data-section-type="quote"],
.sub-element[data-section-type="pull_quote"] {
  background: color-mix(in srgb, var(--el-color) 4%, var(--bg-primary, #fff));
}
.sub-element[data-section-type="note_to_self"] {
  background: #fffde7;
  border: 1px dashed #e0d88e;
  border-left: 3px solid #c5b833;
}
[data-bs-theme="dark"] .sub-element[data-section-type="note_to_self"] {
  background: #3a3820;
  border-color: #5a5530;
  border-left-color: #8a8040;
}
.sub-element[data-section-type="transition"] {
  opacity: 0.75;
  font-style: italic;
}
.sub-element[data-section-type="transition"]:hover,
.sub-element[data-section-type="transition"]:focus-within {
  opacity: 1;
}

/* ── AI insert anchor: explicit section selection ─────────────────── */

/* Hover hint — subtle outline + a faint "pin" icon so users discover that
   section headers are click targets for the AI insert anchor. */
.builder-container-header,
.sub-element-header {
  position: relative;
  cursor: pointer;
  transition: background-color 0.12s, box-shadow 0.12s;
}
.builder-container-header input,
.builder-container-header button,
.builder-container-header a,
.builder-container-header .dropdown,
.sub-element-header input,
.sub-element-header button,
.sub-element-header a,
.sub-element-header .dropdown {
  cursor: auto;
}
.builder-container:not(.builder-selected) > .builder-container-header:hover,
.sub-element:not(.builder-selected) > .sub-element-header:hover {
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary, #0d6efd) 30%, transparent);
  border-radius: var(--radius-sm, 0.25rem);
}
/* Hover-only "pin" hint floating ABOVE the header (won't collide with the
   action buttons that live inside the header). */
.builder-container-header::after,
.sub-element-header::after {
  content: "\F47C  Set as AI anchor"; /* bi-pin-fill */
  font-family: "bootstrap-icons", inherit;
  position: absolute;
  right: 14px;
  top: -10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--bs-primary, #0d6efd);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3);
}
.builder-container:not(.builder-selected) > .builder-container-header:hover::after,
.sub-element:not(.builder-selected) > .sub-element-header:hover::after {
  opacity: 0.95;
  transform: translateY(0);
}

/* Selected state — stronger ring, brighter tint, prominent badge. */
.builder-container.builder-selected,
.sub-element.builder-selected {
  position: relative;
  box-shadow: 0 0 0 3px var(--bs-primary, #0d6efd), 0 8px 18px rgba(13, 110, 253, 0.18);
  border-color: var(--bs-primary, #0d6efd);
}
.sub-element.builder-selected {
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, var(--bg-primary, #fff));
}
[data-bs-theme="dark"] .sub-element.builder-selected {
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, var(--bg-primary, #1a1a1a));
}
.builder-container.builder-selected::before,
.sub-element.builder-selected::before {
  content: "\F128  AI inserts here \2193"; /* bi-pin-angle-fill */
  font-family: "bootstrap-icons", inherit;
  position: absolute;
  top: -12px;
  right: 12px;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
}

/* Text highlighting classes applied by Quill highlight toolbar (6 colors) */
.highlight-yellow { background-color: #fff176; padding: 0 2px; border-radius: 2px; }
.highlight-green  { background-color: #a5d6a7; padding: 0 2px; border-radius: 2px; }
.highlight-red    { background-color: #ffcdd2; padding: 0 2px; border-radius: 2px; }
.highlight-blue   { background-color: #bbdefb; padding: 0 2px; border-radius: 2px; }
.highlight-orange { background-color: #ffe0b2; padding: 0 2px; border-radius: 2px; }
.highlight-brown  { background-color: #d7ccc8; padding: 0 2px; border-radius: 2px; }
[data-bs-theme="dark"] .highlight-yellow { background-color: #665e00; color: #fff; }
[data-bs-theme="dark"] .highlight-green  { background-color: #1b5e20; color: #fff; }
[data-bs-theme="dark"] .highlight-red    { background-color: #b71c1c; color: #fff; }
[data-bs-theme="dark"] .highlight-blue   { background-color: #0d47a1; color: #fff; }
[data-bs-theme="dark"] .highlight-orange { background-color: #e65100; color: #fff; }
[data-bs-theme="dark"] .highlight-brown  { background-color: #4e342e; color: #fff; }

/* Highlight toolbar (appears above Quill editors) — tablet/pen friendly */
.highlight-toolbar {
  display: inline-flex;
  gap: 4px;
  padding: 3px 6px;
  background: var(--bg-surface, #f8f9fa);
  border: 1px solid var(--border-light, #eee);
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  touch-action: manipulation; /* disable double-tap zoom on toolbar */
}
.highlight-toolbar .hl-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* suppress iOS blue flash */
  touch-action: manipulation;
}
.highlight-toolbar .hl-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
/* Touch/pen press feedback (fires on all devices, unlike :hover) */
.highlight-toolbar .hl-btn:active {
  transform: scale(0.92);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.highlight-toolbar .hl-btn.active {
  box-shadow: 0 0 0 2.5px var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
/* When active AND pressed, combine both rings */
.highlight-toolbar .hl-btn.active:active {
  transform: scale(0.92);
}
.highlight-toolbar .hl-btn[data-color="yellow"] { background: #fff176; }
.highlight-toolbar .hl-btn[data-color="green"]  { background: #a5d6a7; }
.highlight-toolbar .hl-btn[data-color="red"]    { background: #ffcdd2; }
.highlight-toolbar .hl-btn[data-color="blue"]   { background: #bbdefb; }
.highlight-toolbar .hl-btn[data-color="orange"] { background: #ffe0b2; }
.highlight-toolbar .hl-btn[data-color="brown"]  { background: #d7ccc8; }
.highlight-toolbar .hl-btn[data-color="none"]   { background: #fff; position: relative; }
.highlight-toolbar .hl-btn[data-color="none"]::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #999;
  line-height: 1;
}

/* ── Bullet List Editor ── */
.bullet-list-editor .bullet-item-input {
  border: none;
  border-bottom: 1px solid var(--border-light, #eee);
  border-radius: 0;
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
  resize: none;
  overflow: hidden;
  min-height: 1.8em;
}
.bullet-list-editor .bullet-item-input:focus {
  border-bottom-color: var(--bs-primary, #0d6efd);
  box-shadow: none;
  outline: none;
}
.bullet-list-editor .bullet-marker {
  font-family: var(--font-modern, system-ui);
  line-height: 1.6;
}
.bullet-list-editor .bullet-remove-btn { opacity: 0; transition: opacity 0.15s; }
.bullet-list-editor .bullet-hl-btn { opacity: 0; transition: opacity 0.15s; color: var(--bs-secondary); }
.bullet-list-editor .bullet-item:hover .bullet-remove-btn,
.bullet-list-editor .bullet-item:hover .bullet-hl-btn { opacity: 1; visibility: visible !important; }

/* Whole-bullet highlight backgrounds */
.bullet-hl-yellow { background-color: #fff176; border-radius: 3px; }
.bullet-hl-green  { background-color: #a5d6a7; border-radius: 3px; }
.bullet-hl-red    { background-color: #ffcdd2; border-radius: 3px; }
.bullet-hl-blue   { background-color: #bbdefb; border-radius: 3px; }
.bullet-hl-orange { background-color: #ffe0b2; border-radius: 3px; }
.bullet-hl-brown  { background-color: #d7ccc8; border-radius: 3px; }
[data-bs-theme="dark"] .bullet-hl-yellow { background-color: #665e00; }
[data-bs-theme="dark"] .bullet-hl-green  { background-color: #1b5e20; }
[data-bs-theme="dark"] .bullet-hl-red    { background-color: #b71c1c; }
[data-bs-theme="dark"] .bullet-hl-blue   { background-color: #0d47a1; }
[data-bs-theme="dark"] .bullet-hl-orange { background-color: #e65100; }
[data-bs-theme="dark"] .bullet-hl-brown  { background-color: #4e342e; }
.bullet-hl-yellow .bullet-item-input,
.bullet-hl-green .bullet-item-input,
.bullet-hl-red .bullet-item-input,
.bullet-hl-blue .bullet-item-input,
.bullet-hl-orange .bullet-item-input,
.bullet-hl-brown .bullet-item-input { background: transparent !important; }

/* Bullet highlight color picker popover */
.bullet-hl-picker {
  display: inline-flex; gap: 3px; padding: 4px 6px;
  background: var(--bg-surface, #fff); border: 1px solid var(--border-light, #ddd);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: absolute; right: 0; top: -4px; z-index: 10;
}
.bullet-hl-picker .hl-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform 0.1s;
}
.bullet-hl-picker .hl-btn[data-color="yellow"] { background-color: #fff176; }
.bullet-hl-picker .hl-btn[data-color="green"]  { background-color: #a5d6a7; }
.bullet-hl-picker .hl-btn[data-color="red"]    { background-color: #ffcdd2; }
.bullet-hl-picker .hl-btn[data-color="blue"]   { background-color: #bbdefb; }
.bullet-hl-picker .hl-btn[data-color="orange"] { background-color: #ffe0b2; }
.bullet-hl-picker .hl-btn[data-color="brown"]  { background-color: #d7ccc8; }
.bullet-hl-picker .hl-btn[data-color="none"]   { background-color: var(--bg-surface, #eee); }
.bullet-hl-picker .hl-btn:hover { transform: scale(1.15); }
.bullet-item { position: relative; }

/* Sub-element Quill editor styling (compact, matches the section card feel) */
.sub-element-quill-wrap { margin: 0; }
.sub-element-quill-wrap .ql-toolbar {
  padding: 4px 6px !important; border-color: var(--border-light, #dee2e6) !important;
  border-radius: 4px 4px 0 0;
}
.sub-element-quill-wrap .ql-container {
  border-color: var(--border-light, #dee2e6) !important;
  border-radius: 0 0 4px 4px; font-size: 0.875rem;
}
.sub-element-quill-wrap .ql-editor {
  min-height: 3em; padding: 6px 10px;
}
.sub-element-quill-wrap .ql-editor.ql-blank::before {
  font-size: 0.875rem; color: var(--text-muted, #adb5bd);
}

.sub-element-header {
  padding: 0.35rem 0.5rem;
  background: var(--bg-surface, #f8f9fa);
  border-bottom: 1px solid var(--border-light, #eee);
  font-size: 0.8rem;
}

.sub-element-body {
  padding: 0.5rem;
}

.sub-element-body .form-control-sm {
  font-size: 0.82rem;
}

/* Collapsed state */
.builder-container-body.collapsed,
.sub-element-body.collapsed {
  display: none;
}

.container-collapse-btn .bi,
.sub-collapse-btn .bi {
  transition: transform 0.2s;
}
.container-collapse-btn.collapsed .bi,
.sub-collapse-btn.collapsed .bi {
  transform: rotate(-90deg);
}

/* ── Drag & Drop (SortableJS) ── */
.container-drag-handle,
.sub-drag-handle {
  cursor: grab;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.container-drag-handle:hover,
.sub-drag-handle:hover {
  opacity: 1;
}

.builder-container.sortable-ghost {
  opacity: 0.3;
  border: 2px dashed var(--color-primary, #1F3864);
}
.builder-container.sortable-chosen {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.sub-element.sortable-ghost {
  opacity: 0.3;
  border: 2px dashed var(--element-heading);
  background: rgba(74, 20, 140, 0.05);
}
.sub-element.sortable-chosen {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Drop placeholder for cross-container moves */
.sub-elements-list.sortable-drag-over {
  background: rgba(74, 20, 140, 0.03);
  border-radius: var(--radius-sm, 0.25rem);
}

/* ── Outline View Toggle ── */
.builder-workspace.outline-mode .sub-element-body {
  display: none;
}
.builder-workspace.outline-mode .builder-container-body .container-quill-wrap,
.builder-workspace.outline-mode .builder-container-body .container-body-input {
  display: none;
}
.builder-workspace.outline-mode .sub-element {
  border: none;
  border-left: 2px solid var(--el-color, transparent);
  margin-bottom: 0.1rem;
  background: transparent;
}
.builder-workspace.outline-mode .sub-element-header {
  background: transparent;
  border-bottom: none;
  padding: 0.2rem 0.5rem;
}
.builder-workspace.outline-mode .builder-container {
  border-left-width: 4px;
}
/* Hide Add Element dropdown in legacy outline mode (dead code — kept for safety) */
.builder-workspace.outline-mode .btn-add-sub,
.builder-workspace.outline-mode .dropdown:has(.btn-add-sub) {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   MANUSCRIPT MODE — Word-processor "paper page" view
   Activated by: #containers-list[data-compose-mode="manuscript"]
   Same data model, CSS-only visual transformation.
   ═══════════════════════════════════════════════════════════ */

/* The containers-list becomes a gray canvas with centered white paper */
[data-compose-mode="manuscript"] {
  background: #e8e8e8;
  border-radius: var(--radius-lg);
  padding: 32px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 600px;
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] {
  background: #1a1a2e;
}

/* Each container is a "page" section on white paper */
[data-compose-mode="manuscript"] .builder-container {
  background: #fff;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: var(--manuscript-page-width);
  padding: 48px 64px 40px;
  margin-bottom: 20px;
  overflow: visible;
  font-family: var(--font-teaching);
  line-height: 1.7;
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] .builder-container {
  background: #1e1e2f;
  color: #d4d4d4;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* Container header → document section heading */
[data-compose-mode="manuscript"] .builder-container-header {
  background: transparent;
  border: none;
  border-bottom: 2px solid;
  padding: 0 0 4px;
  margin-bottom: 16px;
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="introduction"] .builder-container-header {
  border-bottom-color: var(--element-intro);
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="main_point"] .builder-container-header {
  border-bottom-color: var(--element-main-point);
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="closing"] .builder-container-header {
  border-bottom-color: var(--element-closing);
}
[data-compose-mode="manuscript"] .builder-container-header .container-title-input {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="introduction"] .container-title-input {
  color: var(--element-intro);
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="main_point"] .container-title-input {
  color: var(--element-main-point);
}
[data-compose-mode="manuscript"] .builder-container[data-container-type="closing"] .container-title-input {
  color: var(--element-closing);
}
[data-compose-mode="manuscript"] .builder-container-header .container-title-input:focus {
  box-shadow: none;
  outline: none;
}

/* ── Management chrome in manuscript mode (Phase A) ────────────────────
   Outline and manuscript render the SAME element DOM. We no longer hide
   the element controls (which removed drag/drop, change-type, AI,
   duplicate, collapse, delete from manuscript). Instead we keep full
   parity with outline and REVEAL the chrome on hover / focus / when the
   element is selected — a word-processor "gutter" feel. Only pure
   decoration stays hidden so the page reads clean.
   ─────────────────────────────────────────────────────────────────── */

/* Decoration we never need on the manuscript "page" */
[data-compose-mode="manuscript"] .section-word-count,
[data-compose-mode="manuscript"] .builder-container-header .container-icon {
  display: none !important;
}

/* Container heading: park the drag handle out in the left gutter so the
   section title stays flush-left (the page has 64px of side padding). */
[data-compose-mode="manuscript"] .builder-container-header .container-drag-handle {
  position: absolute;
  left: -38px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* Heading chrome hidden by default… */
[data-compose-mode="manuscript"] .builder-container-header :is(
    .container-drag-handle,
    .btn-duplicate,
    .container-collapse-btn,
    .section-delete-btn,
    .dropdown:has(.ai-suggest-btn)) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* …and fades in when the section is hovered, focused, or selected. */
[data-compose-mode="manuscript"] .builder-container:is(:hover, :focus-within, .builder-selected) > .builder-container-header :is(
    .container-drag-handle,
    .btn-duplicate,
    .container-collapse-btn,
    .section-delete-btn,
    .dropdown:has(.ai-suggest-btn)) {
  opacity: 1;
  pointer-events: auto;
}

/* Container body area — no card padding */
[data-compose-mode="manuscript"] .builder-container-body {
  padding: 0;
}

/* ── Sub-elements: nearly invisible until hovered/focused ── */
[data-compose-mode="manuscript"] .sub-element {
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  padding: 8px 14px;
  background: transparent;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  cursor: text;
}
[data-compose-mode="manuscript"] .sub-element:hover,
[data-compose-mode="manuscript"] .sub-element:focus-within {
  background: rgba(74, 20, 140, 0.03);
  border-left-color: var(--el-color, #999);
}

/* Sub-element header → floating type label (hidden until hover) */
[data-compose-mode="manuscript"] .sub-element-header {
  background: transparent;
  border: none;
  padding: 0;
  position: absolute;
  top: -8px;
  left: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--el-color, #666);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
  pointer-events: none;
}
[data-compose-mode="manuscript"] .sub-element-header::before {
  content: '';
  position: absolute;
  inset: -1px -4px;
  background: #fff;
  z-index: -1;
  border-radius: 2px;
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] .sub-element-header::before {
  background: #1e1e2f;
}
[data-compose-mode="manuscript"] .sub-element:hover .sub-element-header,
[data-compose-mode="manuscript"] .sub-element:focus-within .sub-element-header,
[data-compose-mode="manuscript"] .sub-element.builder-selected .sub-element-header {
  opacity: 1;
  pointer-events: auto;
}

/* Sub-element body — generous editing area with serif font */
[data-compose-mode="manuscript"] .sub-element-body {
  padding: 0;
}
[data-compose-mode="manuscript"] .sub-element-body .form-control-sm {
  border: none;
  background: transparent;
  font-family: var(--font-teaching);
  font-size: 1rem;
  line-height: 1.7;
  resize: none;
  padding: 0;
  color: inherit;
}
[data-compose-mode="manuscript"] .sub-element-body .form-control-sm:focus {
  box-shadow: none;
}
/* Auto-grown textareas: no scrollbar, no manual resize handle */
[data-compose-mode="manuscript"] .sub-element-body textarea.form-control-sm,
[data-compose-mode="manuscript"] textarea.container-body-input {
  overflow: hidden;
  resize: none;
}

/* ── Scripture: italic blockquote style ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] {
  border-left: 3px solid var(--element-scripture);
  padding-left: 24px;
  font-style: italic;
  color: var(--element-scripture);
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] {
  color: #90caf9;
  border-left-color: #5c6bc0;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .section-scripture-ref,
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .section-scripture-version {
  border: none;
  background: transparent;
  font-family: -apple-system, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--element-scripture);
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .section-scripture-ref:focus,
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .section-scripture-version:focus {
  box-shadow: none;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .btn-fetch-scripture {
  border: none;
  background: transparent;
  color: var(--element-scripture);
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .sub-element-body .form-control-sm {
  font-style: italic;
  color: var(--element-scripture);
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] .sub-element[data-section-type="scripture"] .sub-element-body .form-control-sm {
  color: #90caf9;
}

/* ── Illustrations: green left border ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="biblical_illustration"],
[data-compose-mode="manuscript"] .sub-element[data-section-type="real_world_illustration"] {
  border-left-color: var(--element-illustration);
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="biblical_illustration"]:hover,
[data-compose-mode="manuscript"] .sub-element[data-section-type="real_world_illustration"]:hover {
  border-left-color: var(--element-illustration);
}

/* ── Quotes: purple left border ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="quote"] {
  padding-left: 24px;
}

/* ── Key Statement (pull_quote): centered callout ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="pull_quote"] {
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  border-left: none;
  border: 1px dashed var(--element-heading);
  padding: 16px 24px;
  border-radius: 4px;
}

/* ── Application: red left border ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="application"] {
  border-left-color: var(--element-application);
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="application"]:hover {
  border-left-color: var(--element-application);
}

/* ── Sub-heading: secondary heading in flow ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="sub_heading"] {
  border-left: none;
  padding-left: 0;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="sub_heading"] .sub-element-body .form-control-sm {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1F4E79;
  letter-spacing: 0.3px;
}
[data-bs-theme="dark"] [data-compose-mode="manuscript"] .sub-element[data-section-type="sub_heading"] .sub-element-body .form-control-sm {
  color: #64b5f6;
}

/* ── Transition: centered, italic, subtle ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="transition"] {
  text-align: center;
  border-left: none;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="transition"] .sub-element-body .form-control-sm {
  text-align: center;
  font-style: italic;
  color: #999;
}

/* ── Note-to-self: faded dashed style ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="note_to_self"] {
  border: 1px dashed #ccc;
  border-left: 3px dashed #999;
  opacity: 0.6;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="note_to_self"] .sub-element-body .form-control-sm {
  font-family: -apple-system, sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #888;
}

/* ── Bullet List: clean document-style in manuscript mode ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] {
  border-left-color: #2E4057;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-list-editor .bullet-style-select {
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: #999;
  padding: 0;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-list-editor .bullet-style-select:focus {
  box-shadow: none;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-item-input {
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.7;
  padding: 0.15rem 0.4rem;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-item-input:focus {
  border-bottom-color: rgba(46, 64, 87, 0.2);
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-marker {
  padding-top: 2px;
  font-size: 1rem;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-add-btn {
  opacity: 0.3;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"]:hover .bullet-add-btn {
  opacity: 1;
}

/* ── Sub-element Quill editors — hidden toolbar until hover/focus ── */
[data-compose-mode="manuscript"] .sub-element-quill-wrap {
  border: none;
  background: transparent;
  margin: 0;
}
[data-compose-mode="manuscript"] .sub-element-quill-wrap .ql-toolbar {
  border: none !important;
  padding: 0.2rem 0 !important;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s, max-height 0.2s;
}
[data-compose-mode="manuscript"] .sub-element:hover .sub-element-quill-wrap .ql-toolbar,
[data-compose-mode="manuscript"] .sub-element:focus-within .sub-element-quill-wrap .ql-toolbar {
  opacity: 1;
  max-height: 50px;
  border-bottom: 1px solid var(--border-light, #eee) !important;
}
[data-compose-mode="manuscript"] .sub-element-quill-wrap .ql-container {
  border: none !important;
  font-family: var(--font-teaching);
  font-size: 1rem;
  line-height: 1.7;
}
/* Bump specificity with #containers-list so this wins over the later
   `.builder-workspace .ql-editor { min-height: 120px }` rule. */
#containers-list[data-compose-mode="manuscript"] .sub-element-quill-wrap .ql-editor {
  padding: 0;
  min-height: 1.5em;
}
[data-compose-mode="manuscript"] .sub-element-quill-wrap .ql-editor.ql-blank::before {
  font-family: var(--font-teaching);
  font-size: 1rem;
  color: var(--text-muted, #adb5bd);
  font-style: italic;
}

/* ── Sub-element title inputs — hidden until hover in manuscript ── */
[data-compose-mode="manuscript"] .sub-element .section-title-input {
  border: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s, max-height 0.2s;
}
[data-compose-mode="manuscript"] .sub-element:hover .section-title-input,
[data-compose-mode="manuscript"] .sub-element:focus-within .section-title-input {
  opacity: 1;
  max-height: 2em;
}
/* Show title if it has a value (not just placeholder) */
[data-compose-mode="manuscript"] .sub-element .section-title-input:not(:placeholder-shown) {
  opacity: 0.7;
  max-height: 2em;
}
[data-compose-mode="manuscript"] .sub-element:hover .section-title-input:not(:placeholder-shown),
[data-compose-mode="manuscript"] .sub-element:focus-within .section-title-input:not(:placeholder-shown) {
  opacity: 1;
}

/* ── Bullet list chrome — hidden until hover in manuscript ── */
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"] .bullet-list-editor > .d-flex:first-child {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s, max-height 0.2s;
}
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"]:hover .bullet-list-editor > .d-flex:first-child,
[data-compose-mode="manuscript"] .sub-element[data-section-type="bullet_list"]:focus-within .bullet-list-editor > .d-flex:first-child {
  opacity: 1;
  max-height: 3em;
}

/* ── Illustration library buttons — hidden until hover ── */
[data-compose-mode="manuscript"] .sub-element .btn-browse-library,
[data-compose-mode="manuscript"] .sub-element .btn-save-to-library,
[data-compose-mode="manuscript"] .sub-element .illustration-library-actions {
  opacity: 0;
  transition: opacity 0.15s;
}
[data-compose-mode="manuscript"] .sub-element:hover .btn-browse-library,
[data-compose-mode="manuscript"] .sub-element:hover .btn-save-to-library,
[data-compose-mode="manuscript"] .sub-element:hover .illustration-library-actions {
  opacity: 1;
}

/* ── Add Element button — calm but discoverable in manuscript mode ── */
[data-compose-mode="manuscript"] .dropdown:has(.btn-add-sub) {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
[data-compose-mode="manuscript"] .btn-add-sub {
  font-size: 0.75rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
[data-compose-mode="manuscript"] .btn-add-sub:hover {
  opacity: 1;
}

/* ── Inline insert points (Phase B) ─────────────────────────────────────
   A "+" on an insertion line sits in every gap (manuscript mode) so the
   insert location is EXPLICIT — the place you click IS where the element
   lands. Clicking "+" opens a type picker right there. Zones are injected
   by builder.js only in manuscript mode.
   ───────────────────────────────────────────────────────────────────── */
.insert-zone {
  position: relative;
  height: 16px;
  margin: 2px 0;
}
.insert-zone .insert-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-primary, #0d6efd);
  opacity: 0;
  transition: opacity 0.12s;
}
.insert-zone .insert-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  border: 2px solid var(--bg-primary, #fff);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.32;            /* always visible (faint) so it's never a hidden hit-target */
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 2px 7px rgba(13,110,253,0.45);
  cursor: pointer;
  z-index: 2;
}
/* generous invisible click/hover target around the small "+" */
.insert-zone .insert-btn::before {
  content: "";
  position: absolute;
  inset: -11px -16px;
}
/* Reveal the line + brighten the "+" when hovering the gap OR either adjacent
   element (a big, easy target) — so you never have to find a thin strip. */
.insert-zone:hover .insert-line,
.insert-zone:focus-within .insert-line,
.sub-element:hover + .insert-zone .insert-line,
.insert-zone:has(+ .sub-element:hover) .insert-line,
.insert-zone.active .insert-line { opacity: 0.55; }
.insert-zone:hover .insert-btn,
.insert-zone:focus-within .insert-btn,
.sub-element:hover + .insert-zone .insert-btn,
.insert-zone:has(+ .sub-element:hover) .insert-btn,
.insert-zone.active .insert-btn { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
.insert-zone.active .insert-line { opacity: 1; height: 3px; }
[data-bs-theme="dark"] .insert-zone .insert-btn { border-color: #1e1e2f; }

/* Type picker popover anchored at the insertion point */
.insert-pop {
  position: absolute;
  left: 50%; top: calc(50% + 18px);
  transform: translateX(-50%);
  z-index: 40;
  width: 190px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  padding: 6px;
}
[data-bs-theme="dark"] .insert-pop { background: #1e1e2f; border-color: rgba(255,255,255,0.08); }
.insert-pop .ip-title {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--text-muted, #888); padding: 2px 8px 5px;
}
.insert-pop .ip-item,
.insert-pop .ip-more {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  border: none; background: transparent;
  padding: 6px 8px; border-radius: var(--radius-sm, 0.375rem);
  font-size: 0.8rem; color: var(--text-primary, #222); cursor: pointer;
}
[data-bs-theme="dark"] .insert-pop .ip-item { color: #d4d4d4; }
.insert-pop .ip-item:hover,
.insert-pop .ip-more:hover { background: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent); }
.insert-pop .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.insert-pop .ip-more { color: var(--text-muted, #888); font-size: 0.74rem; }
.insert-pop .ip-more-list { display: flex; flex-direction: column; gap: 2px; }

/* Brief highlight on a freshly inserted element so you see where it landed */
.sub-element.just-inserted { animation: sbp-inserted 1.3s ease; }
@keyframes sbp-inserted {
  0%   { background: color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent); }
  100% { background: transparent; }
}

/* The inline "+" replaces the bottom "Add Element" dropdown — but only once
   the zones have actually been injected (fallback-safe in both modes). */
#containers-list.has-insert-zones .dropdown:has(.btn-add-sub) { display: none; }

/* ── Compose route: auto-hide top header on scroll for more writing room ──
   Header collapses to 0px (slot reclaimed) when JS adds .is-hidden; reveals
   on scroll-up, mouse-near-top, dropdown-open, or search focus. */
.compose-route .app-header {
  transition: height 0.2s ease, min-height 0.2s ease,
              padding-top 0.2s ease, padding-bottom 0.2s ease,
              border-bottom-color 0.2s ease;
  overflow: hidden;
}
.compose-route .app-header.is-hidden {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}

/* ── Add Main Point Bar — always visible above containers ── */
.add-main-bar {
  display: flex;
  justify-content: center;
  padding: 0.4rem 0;
  margin-bottom: 0.5rem;
}
.btn-add-main {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary, #4A148C);
  background: transparent;
  border: 1.5px dashed var(--color-primary, #4A148C);
  border-radius: var(--radius-md, 5px);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}
.btn-add-main:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-primary, #4A148C) 8%, transparent);
  color: var(--color-primary, #4A148C);
  border-color: var(--color-primary, #4A148C);
}
[data-compose-mode="manuscript"] ~ .add-main-bar .btn-add-main,
.add-main-bar .btn-add-main {
  /* same style in both modes */
}

/* ── Container quill wraps — borderless in manuscript, toolbar hidden until hover ── */
[data-compose-mode="manuscript"] .container-quill-wrap {
  border: none;
  background: transparent;
}
[data-compose-mode="manuscript"] .container-quill-wrap .ql-toolbar {
  border: none;
  padding: 0.2rem 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s, max-height 0.2s;
}
[data-compose-mode="manuscript"] .builder-container:hover .container-quill-wrap .ql-toolbar,
[data-compose-mode="manuscript"] .builder-container:focus-within .container-quill-wrap .ql-toolbar {
  opacity: 1;
  max-height: 50px;
  border-bottom: 1px solid var(--border-light, #eee);
}
[data-compose-mode="manuscript"] .container-quill-wrap .ql-container {
  border: none;
  font-family: var(--font-teaching);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Main point textarea — borderless in manuscript ── */
[data-compose-mode="manuscript"] .container-body-input {
  border: none;
  background: transparent;
  font-family: var(--font-teaching);
  font-size: 1rem;
  line-height: 1.7;
}
[data-compose-mode="manuscript"] .container-body-input:focus {
  box-shadow: none;
}

/* ── Sermon details card & primary fields — paper-width in manuscript ── */
/* Primary fields + metadata panel come before #containers-list in DOM,
   so we use :has() or just let them be — they're narrow enough naturally */

/* ── Style preview dropdown — only visible in manuscript mode ── */
.ms-style-preview {
  display: none;
  width: auto;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 4px;
  max-width: 140px;
}
.topbar-actions:has(~ *) .ms-style-preview,
.ms-style-preview.ms-style-visible {
  display: block;
}

/* ── Manuscript style overrides (applied via data-ms-style on containers-list) ── */
/* Traditional: Times New Roman, formal */
[data-ms-style="traditional"] .builder-container {
  font-family: var(--font-traditional);
  font-size: 12pt;
  line-height: 1.5;
}
[data-ms-style="traditional"] .builder-container-header .container-title-input {
  font-family: var(--font-traditional);
  text-transform: uppercase;
}

/* Modern: Calibri/Segoe, clean */
[data-ms-style="modern"] .builder-container {
  font-family: var(--font-modern);
  font-size: 11pt;
  line-height: 1.6;
}
[data-ms-style="modern"] .builder-container-header .container-title-input {
  font-family: var(--font-modern);
  text-transform: none;
  font-weight: 700;
  color: #1F3864;
}
[data-ms-style="modern"] .sub-element-body .form-control-sm {
  font-family: var(--font-modern);
}
[data-ms-style="modern"] .container-quill-wrap .ql-container,
[data-ms-style="modern"] .container-body-input {
  font-family: var(--font-modern);
}

/* Teaching: Georgia, spacious */
[data-ms-style="teaching"] .builder-container {
  font-family: var(--font-teaching);
  font-size: 11.5pt;
  line-height: 1.75;
}
[data-ms-style="teaching"] .builder-container-header .container-title-input {
  font-family: 'Georgia', serif;
  text-transform: none;
  letter-spacing: 0.3px;
  color: #2E4057;
}
[data-ms-style="teaching"] .sub-element-body .form-control-sm {
  font-family: var(--font-teaching);
}
[data-ms-style="teaching"] .container-quill-wrap .ql-container,
[data-ms-style="teaching"] .container-body-input {
  font-family: var(--font-teaching);
}

/* Custom style — font from style_json via CSS variable */
.ms-custom-style[data-compose-mode="manuscript"] .builder-container,
.ms-custom-style[data-compose-mode="manuscript"] .sub-element-body .form-control-sm,
.ms-custom-style[data-compose-mode="manuscript"] .container-quill-wrap .ql-container,
.ms-custom-style[data-compose-mode="manuscript"] .container-body-input {
  font-family: var(--ms-custom-font, 'Georgia', serif);
}

/* ── Topbar Clean Layout (v2 mockup) ── */
.builder-topbar {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  /* P4: stay put so the title + mode + Save/Publish are never lost on scroll. */
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  overflow: visible;
  max-width: 100%;
  transition: box-shadow 0.15s ease;
}
/* Condensed state (added by JS past ~40px scroll): slim it to the essentials —
   keep title + mode toggle + Save/Publish, drop the verbose meta strip. */
.builder-topbar.topbar-condensed {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.builder-topbar.topbar-condensed .topbar-row-1 { padding-top: 5px; padding-bottom: 3px; }
.builder-topbar.topbar-condensed .topbar-title { font-size: 1.05rem; }
.builder-topbar.topbar-condensed .topbar-meta-sep,
.builder-topbar.topbar-condensed #word-count,
.builder-topbar.topbar-condensed #time-estimate,
.builder-topbar.topbar-condensed .compose-inline-service,
.builder-topbar.topbar-condensed .compose-inline-bible,
.builder-topbar.topbar-condensed .topbar-series-label { display: none; }
.topbar-row-1 {
  padding: 10px 16px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-row-1 > .flex-grow-1 {
  min-width: 0;
  overflow: hidden;
}
.topbar-title {
  font-size: 1.3rem;
  font-weight: 600;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-primary, #212529);
}
.topbar-title:hover { color: var(--accent-primary, #4A148C); }
.topbar-title .bi-pencil {
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 6px;
  color: var(--text-secondary, #6c757d);
}
.topbar-title:hover .bi-pencil { opacity: 1; }
.topbar-title + .form-control {
  font-size: var(--text-2xl);
  font-weight: 600;
}
.topbar-right-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.topbar-right-icons .btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary, #6c757d);
  border: none;
  background: transparent;
}
.topbar-right-icons .btn:hover {
  background: var(--bg-surface, rgba(0,0,0,0.06));
  color: var(--text-primary, #212529);
}
.topbar-right-icons .btn.active-sidebar {
  background: rgba(74, 20, 140, 0.12);
  color: var(--accent-primary, #4A148C);
  border: 1px solid rgba(74, 20, 140, 0.25);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  width: auto;
  height: auto;
}
.topbar-right-icons .btn.active-sidebar:hover {
  background: rgba(74, 20, 140, 0.22);
  border-color: rgba(74, 20, 140, 0.4);
}
/* When sidebar is open, collapse button to icon-only */
.sidebar-open .topbar-right-icons .btn.active-sidebar span {
  display: none !important;
}
.sidebar-open .topbar-right-icons .btn.active-sidebar {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}
/* Pulse hint when sidebar is closed */
.topbar-right-icons .btn.active-sidebar.sidebar-closed {
  animation: sidebarHint 2s ease-in-out 1;
}
@keyframes sidebarHint {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 4px rgba(74, 20, 140, 0.2); }
}
.topbar-zoom-control {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-surface, rgba(0,0,0,0.04));
  border-radius: var(--radius-md);
  padding: 2px 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  height: 34px;
}
.topbar-zoom-control:hover { background: rgba(0,0,0,0.08); }
.topbar-zoom-control select {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  padding: 0 2px;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  text-align: center;
}
.topbar-row-2 {
  padding: 6px 16px 10px;
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.06));
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
}
.topbar-meta { font-size: var(--text-sm); }
.topbar-meta-sep { color: var(--border-color, #dee2e6); font-size: var(--text-xs); }
.topbar-series-btn, .topbar-series-label {
  border: 1px dashed var(--border-color, #dee2e6);
  background: transparent;
  color: var(--text-secondary, #6c757d);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.topbar-series-btn { cursor: pointer; }
.topbar-series-btn:hover {
  border-color: var(--accent-primary, #4A148C);
  color: var(--accent-primary, #4A148C);
}

/* ── Primary fields row (Main Passage + Series) ── */
.compose-primary-fields {
  flex-wrap: wrap;
}
.compose-primary-fields .form-label {
  font-size: .75rem;
  line-height: 1;
}

/* Mode toggle */
.compose-mode-toggle {
  display: flex;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compose-mode-toggle .mode-btn {
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.compose-mode-toggle .mode-btn.active {
  background: var(--accent-primary, #4A148C);
  color: #fff;
}
.compose-mode-toggle .mode-btn:not(.active):hover {
  background: var(--bg-surface, rgba(0,0,0,0.04));
}
.topbar-save-group {
  display: flex;
  gap: 4px;
}
.topbar-save-group .btn {
  font-size: var(--text-sm);
  padding: 4px 14px;
  font-weight: 500;
}

/* ── Preview Mode ── */
/* Hide all editing UI, show the preview pane */
.builder-workspace.preview-mode #containers-list,
.builder-workspace.preview-mode .add-main-bar,
.builder-workspace.preview-mode .compose-primary-fields,
.builder-workspace.preview-mode .sermon-details-card,
.builder-workspace.preview-mode .research-panel {
  display: none;
}
.preview-pane {
  display: none;
}
.builder-workspace.preview-mode .preview-pane {
  display: block;
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: #fff;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-teaching);
  color: #222;
  line-height: 1.65;
}
.preview-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--element-heading);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.preview-meta {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: var(--text-sm);
  color: #777;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}
.preview-divider {
  border: none;
  border-top: 2px solid #C9A84C;
  margin: 0.75rem 0 1.25rem;
}
.preview-heading {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin: 1.5rem 0 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
}
.preview-heading-main {
  background: var(--element-heading);
  color: #fff;
  font-size: var(--text-lg);
  border-left: 4px solid #C9A84C;
}
.preview-heading-intro {
  background: rgba(247, 150, 70, 0.1);
  color: var(--element-quote);
  font-size: var(--text-base);
  border-left: 4px solid var(--element-quote);
}
.preview-heading-closing {
  background: rgba(192, 80, 77, 0.1);
  color: var(--element-application);
  font-size: 1.1rem;
  border-left: 4px solid var(--element-application);
}
.preview-content {
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(0,0,0,0.06);
}
.preview-body {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.preview-scripture-ref {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: var(--element-scripture);
  margin: 0.75rem 0 0.25rem 0.375rem;
  font-size: 0.95rem;
}
.preview-scripture-text {
  background: #D6E4F0;
  color: var(--element-scripture);
  font-style: italic;
  padding: 0.6rem 1rem;
  margin: 0.25rem 0 0.75rem 0.375rem;
  border-left: 3px solid var(--element-scripture);
  border-right: 3px solid var(--element-scripture);
  border-radius: 2px;
  line-height: 1.7;
  font-size: 0.95rem;
}
.preview-sub-heading {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #1F4E79;
  background: #D6E4F0;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  margin: 1rem 0 0.4rem;
}
.preview-pull-quote {
  font-weight: 700;
  font-style: italic;
  color: var(--element-heading);
  text-align: center;
  font-size: 1.05rem;
  padding: 0.75rem 2rem;
  margin: 1rem 0;
  border-top: 2px solid #C9A84C;
  border-bottom: 2px solid #C9A84C;
}
.preview-quote {
  font-style: italic;
  color: #444;
  padding: 0.5rem 1.5rem;
  margin: 0.75rem 0;
  border-left: 3px solid var(--element-definition);
  font-size: 0.95rem;
}
.preview-quote-attr {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--element-definition);
  margin-top: 0.25rem;
  font-size: 0.85rem;
}
.preview-transition {
  font-style: italic;
  font-weight: 600;
  color: var(--element-heading);
  margin: 0.75rem 0 0.5rem 0.25rem;
  font-size: 0.9rem;
}
.preview-illustration {
  margin: 0.75rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--element-quote);
}
.preview-illustration-label {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: var(--element-quote);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.preview-illustration-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.preview-definition-box {
  background: #D6E4F0;
  border-left: 4px solid var(--element-call-response);
  padding: 0.6rem 0.85rem;
  margin: 0.75rem 0;
  border-radius: 3px;
}
.preview-definition-label {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #1F4E79;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.preview-definition-term {
  font-weight: 700;
  color: var(--element-scripture);
  margin-bottom: 0.2rem;
}
.preview-definition-text {
  font-size: 0.9rem;
  color: #333;
}
.preview-application-label {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: var(--element-application);
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-top: 0.75rem;
}
.preview-application-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
}
.preview-element-title {
  font-weight: 600;
  color: #333;
  margin: 0.5rem 0 0.15rem;
}

/* Dark mode preview */
html[data-mode="dark"] .preview-pane {
  background: var(--bg-surface, #1e1e1e);
  color: #ddd;
  border-color: var(--border-color);
}
html[data-mode="dark"] .preview-title { color: #b388ff; }
html[data-mode="dark"] .preview-heading-main { background: var(--element-heading); color: #fff; }
html[data-mode="dark"] .preview-scripture-text { background: rgba(26,35,126,0.2); color: #90caf9; border-color: #5c6bc0; }
html[data-mode="dark"] .preview-sub-heading { background: rgba(31,78,121,0.2); color: #90caf9; }
html[data-mode="dark"] .preview-definition-box { background: rgba(21,101,192,0.15); }
html[data-mode="dark"] .preview-content { border-left-color: rgba(255,255,255,0.08); }

/* ── Research Panel (slide-out right) ── */
.research-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-primary, #fff);
  border-left: 3px solid var(--color-primary, #1F3864);
  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  transform: translateX(0);
}
.research-panel.d-none {
  transform: translateX(100%);
  pointer-events: none;
}

.research-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  background: var(--bg-surface, #f8f9fa);
  flex-shrink: 0;
}

.research-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Research panel Quill editor */
.research-panel .ql-container {
  border: none;
  min-height: 200px;
}
.research-panel .ql-editor {
  min-height: 200px;
  font-size: var(--text-sm);
}
.research-panel .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--border-light);
}

/* ── Unified Research & AI Sidebar (v2 clean) ── */
.unified-sidebar {
  position: fixed;
  top: var(--topbar-height, 0px);
  right: 0;
  width: var(--sidebar-width, 420px);
  min-width: 360px;
  max-width: 80vw;
  height: calc(100vh - var(--topbar-height, 0px));
  background: var(--bg-primary, #fff);
  border-left: 1px solid var(--border-color, #dee2e6);
  box-shadow: -2px 0 12px rgba(0,0,0,0.08);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  transform: translateX(0);
}
/* Drag handle for sidebar resize */
.sidebar-resize-handle {
  position: absolute;
  left: -6px;
  top: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: var(--z-topbar);
  background: transparent;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--color-primary, #1F3864);
  opacity: 0.2;
}
.unified-sidebar.d-none {
  transform: translateX(100%);
  pointer-events: none;
}

/* Sidebar header — clean underline tabs */
.unified-sidebar-header {
  position: relative;
  flex-shrink: 0;
  background: var(--bg-primary, #fff);
  border-bottom: 1px solid var(--border-color, #dee2e6);
  padding: 0.5rem 2.5rem 0 0.75rem;
}
.unified-sidebar-header .sidebar-tabs {
  border-bottom: none;
  gap: 0;
  padding: 0;
}
.unified-sidebar-header .sidebar-tabs .nav-link {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.45rem 0.6rem 0.55rem;
  color: var(--text-secondary, #6c757d);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.unified-sidebar-header .sidebar-tabs .nav-link:hover {
  color: var(--text-primary, #212529);
  background: transparent;
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--color-primary, #1F3864) 30%, transparent);
}
.unified-sidebar-header .sidebar-tabs .nav-link.active {
  color: var(--color-primary, #1F3864);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-primary, #1F3864);
}
.unified-sidebar-header .sidebar-close-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.unified-sidebar-header .sidebar-close-btn:hover {
  opacity: 1;
}

.unified-sidebar-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.unified-sidebar-body > .tab-pane {
  flex: 1;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.unified-sidebar-body > .tab-pane.show.active {
  display: flex;
}

/* Sticky controls zone — pins inputs/selectors at top of each sidebar tab while content scrolls */
.sidebar-sticky-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-primary, #fff);
  padding: 0.5rem 0.5rem 0;
  margin: -0.5rem -0.5rem 0;
  border-bottom: 1px solid var(--border-light, #eee);
  flex-shrink: 0;
}
html[data-mode="dark"] .sidebar-sticky-controls {
  background: var(--bg-primary, #1e1e2f);
}

/* Research nav mini-TOC — vertical outline from headings */
/* Research saved items cards */
.research-saved-items:empty { display: none; }
.research-saved-item {
  border: 1px solid var(--border-light, #dee2e6);
  border-left: 3px solid var(--bs-info, #0dcaf0);
  border-radius: 0.375rem;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
  background: var(--bg-surface, #fff);
  font-size: 0.82rem;
  position: relative;
  transition: border-color 0.15s;
}
.research-saved-item:hover { border-color: var(--bs-primary, #0d6efd); }
.research-saved-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.research-saved-item-label {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--bs-info, #0dcaf0);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.research-saved-item-label i { font-size: 0.85rem; }
.research-saved-item-body {
  font-size: 0.8rem;
  line-height: 1.5;
  height: 120px;
  min-height: 2rem;
  max-height: 600px;
  overflow-y: auto;
  color: var(--text-primary, #212529);
  resize: vertical;
}
.research-saved-item-body.expanded { max-height: none; }
.research-saved-item-actions {
  display: flex;
  gap: 0.25rem;
}
.research-saved-item-actions .btn { font-size: 0.65rem; padding: 0.1rem 0.35rem; }
.research-saved-item[data-source^="ai-"] { border-left-color: var(--bs-warning, #ffc107); }
.research-saved-item[data-source^="ai-"] .research-saved-item-label { color: var(--bs-warning, #ffc107); }
.research-saved-item[data-source="selection"] { border-left-color: var(--bs-success, #198754); }
.research-saved-item[data-source="selection"] .research-saved-item-label { color: var(--bs-success, #198754); }
.research-saved-item[data-source^="cross-ref"] { border-left-color: var(--bs-purple, #6f42c1); }
.research-saved-item[data-source^="cross-ref"] .research-saved-item-label { color: var(--bs-purple, #6f42c1); }

.research-nav-toc {
  border-bottom: 1px solid var(--border-light, #eee);
  padding: 4px 8px 6px;
  margin: 0 -8px;
  background: var(--bg-surface, #f8f9fa);
}
.research-toc-header {
  margin-bottom: 2px;
}
.research-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 90px;
  overflow-y: auto;
}
.research-toc-item {
  font-size: 0.78rem;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary, #6c757d);
  transition: background 0.15s, color 0.15s;
}
.research-toc-item:hover {
  background: var(--bg-hover, rgba(0,0,0,0.05));
  color: var(--text-primary, #212529);
}

/* Cross-ref verse preview — expandable inline */
.bt-crossref-preview {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary, #6c757d);
  padding: 0.4rem 0.5rem;
  margin-top: 0.25rem;
  background: var(--bg-surface-alt, #f8f9fa);
  border-radius: 4px;
  border-left: 3px solid var(--color-info, #0dcaf0);
}
html[data-mode="dark"] .bt-crossref-preview {
  background: rgba(255,255,255,0.05);
}
.bt-crossref-item {
  border-bottom: 1px solid var(--border-light, #eee);
  padding: 0.35rem 0;
}
.bt-crossref-item:last-child {
  border-bottom: none;
}

/* Scripture ref chip badges */
.scripture-ref-chip {
  font-size: var(--text-xs) !important;
  padding: 0.15rem 0.45rem !important;
}
.scripture-ref-chip.btn-primary {
  pointer-events: none;
}
.scripture-passage-card .card-header {
  background: var(--bg-surface, #f8f9fa);
}
.scripture-passage-card blockquote {
  border-left: 3px solid var(--color-primary, #1F3864);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
  color: var(--text-secondary, #555);
}

/* AI Chat Messages */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.ai-chat-msg {
  margin-bottom: 0.75rem;
  animation: fadeInUp 0.2s ease;
}
.ai-chat-msg-user {
  text-align: right;
}
.ai-chat-msg-user .ai-chat-bubble {
  background: var(--color-primary, #1F3864);
  color: #fff;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border-left: 3px solid rgba(255,255,255,0.4);
  max-width: 85%;
  text-align: left;
  font-size: var(--text-sm);
}
.ai-chat-msg-ai .ai-chat-bubble {
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #333);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-light, #dee2e6);
  border-left: 3px solid var(--bs-warning, #ffc107);
  max-width: 95%;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ai-chat-msg-ai .ai-chat-bubble h1,
.ai-chat-msg-ai .ai-chat-bubble h2,
.ai-chat-msg-ai .ai-chat-bubble h3 { font-size: var(--text-lg); margin-top: 0.5rem; margin-bottom: 0.25rem; }
.ai-chat-msg-ai .ai-chat-bubble h4 { font-size: var(--text-base); margin-top: 0.5rem; }
.ai-chat-msg-ai .ai-chat-bubble h5,
.ai-chat-msg-ai .ai-chat-bubble h6 { font-size: var(--text-sm); margin-top: 0.5rem; }
.ai-chat-msg-ai .ai-chat-bubble ul { padding-left: 1.25rem; margin: 0.25rem 0; }
.ai-chat-msg-ai .ai-chat-bubble li { font-size: var(--text-sm); margin-bottom: 0.15rem; }
.ai-chat-msg-ai .ai-chat-actions {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.25rem;
}
.ai-chat-msg-ai .ai-chat-actions .btn { font-size: var(--text-xs); padding: 0.15rem 0.5rem; }

/* AI Quick Actions — 3 categorized groups, each individually collapsible.
   Sits between messages (flex:1) and input — flex-shrink:0 so it never
   collapses; the groups themselves keep collapsed-by-default. */
.ai-quick-actions {
  background: var(--bg-surface, #f8f9fa);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}
.ai-quick-actions-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s;
}
.ai-quick-actions-toggle:hover {
  background: var(--bg-surface, #f0f0f0);
  color: var(--text-primary);
}
.ai-quick-actions-toggle .ai-group-chevron {
  transition: transform 0.2s;
}
.ai-quick-actions-toggle[aria-expanded="true"] .ai-group-chevron {
  transform: rotate(180deg);
}
.ai-quick-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
  opacity: 1;
}
.ai-quick-actions-panel.collapsed {
  max-height: 0;
  padding-top: 0;
  opacity: 0;
}
.ai-action-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ai-action-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s;
}
.ai-action-group-toggle:hover {
  background: var(--bg-surface, #f0f0f0);
}
.ai-action-group-toggle small {
  font-size: 0.72rem;
}
.ai-group-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.ai-action-group-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.ai-action-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px 8px;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.ai-action-group-btns.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.ai-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 500;
  border: 1px solid var(--border-color, #dee2e6);
  background: var(--bg-body, #fff);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.ai-action-btn:hover {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.2);
}
.ai-action-btn:active {
  transform: scale(0.98);
}
.ai-action-btn i {
  font-size: 0.75rem;
}
/* "More…" / "Fewer" overflow toggle for the Repurpose group — visually
   distinct from action buttons so it reads as a control, not a generate. */
.ai-action-overflow-toggle {
  border-style: dashed !important;
  color: var(--text-muted, #6c757d) !important;
  background: transparent !important;
}
.ai-action-overflow-toggle:hover {
  background: var(--bg-surface, #f0f0f0) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color, #dee2e6) !important;
  box-shadow: none !important;
}
/* Responsive: stack labels above on narrow sidebars */
@media (max-width: 576px) {
  .ai-action-group { flex-direction: column; gap: 2px; }
  .ai-action-group-label { min-width: auto; padding-top: 0; }
  .ai-action-btn {
    font-size: 0.75rem;
    padding: 5px 12px;
    min-height: auto;
  }
}

/* AI Chat Input — flex-pinned at bottom of the AI tab. */
.ai-chat-input {
  flex-shrink: 0;
  background: var(--bg-surface, #f8f9fa);
}

/* AI Settings disclosure — anchored just above the chat input so the
   conversation owns the top of the tab. Toggle row collapses to ~28px
   when settings are at defaults; pills surface when non-default. */
.ai-settings-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--border-color, #dee2e6);
}
.ai-settings-hint {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.ai-settings-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 0;
  transition: background 0.15s;
}
.ai-settings-toggle:hover {
  background: var(--bg-surface, #f0f0f0);
  color: var(--text-primary);
}
.ai-settings-toggle .ai-settings-chev { transition: transform 0.2s; }
.ai-settings-toggle[aria-expanded="true"] .ai-settings-chev { transform: rotate(180deg); }
.ai-settings-pills { display: inline-flex; gap: 4px; align-items: center; }
.ai-settings-body {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.ai-settings-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* AI Typing Indicator */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.5rem 0.75rem;
}
.ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #999);
  animation: aiTyping 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* AI Action Indicator (refinement mode) */
.ai-action-indicator {
    font-size: 0.78rem;
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border-bottom: 1px solid var(--bs-warning-border-subtle, #ffe69c);
}
.ai-action-indicator .btn-xs {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
}
html[data-mode="dark"] .ai-action-indicator {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
}

/* ── Prep Workflow ── */
.prep-step-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.prep-step-card.prep-step-active {
    border-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.15);
}
.prep-step-card.prep-step-done {
    border-color: var(--bs-success, #198754);
    background: rgba(25, 135, 84, 0.04);
}
.prep-step-card.prep-step-past {
    opacity: 0.7;
}
.prep-step-header:hover {
    background: rgba(0, 0, 0, 0.03);
}
html[data-mode="dark"] .prep-step-header:hover {
    background: rgba(255, 255, 255, 0.05);
}
html[data-mode="dark"] .prep-step-card.prep-step-done {
    background: rgba(25, 135, 84, 0.08);
}
.prep-step-body {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: rgba(0, 0, 0, 0.01);
}
html[data-mode="dark"] .prep-step-body {
    background: rgba(255, 255, 255, 0.02);
}
.prep-step-body .btn-xs {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
}
.prep-step-num {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
}

/* AI Analyze full-page overlay */
#ai-analyze-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: var(--z-tooltip);
    align-items: center;
    justify-content: center;
}
.ai-analyze-overlay-content {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    max-width: 400px;
}
html[data-mode="dark"] .ai-analyze-overlay-content {
    background: var(--card-bg, #1a1a2e);
}

/* AI Q&A answer formatting */
.ai-answer-content {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--text-sm, 0.875rem);
}
.ai-answer-content h6 {
    font-size: 0.85rem;
}
.ai-answer-content li {
    list-style: disc;
    margin-bottom: 0.25rem;
}
.ai-answer-content strong {
    color: var(--color-primary);
}

/* Sidebar selection popover — "Add to Outline as..." */
/* Bible mode bar — single row of compact toggles */
/* 3-column grid so 6 Bible modes sit in a tidy 2 rows instead of
   wrapping arbitrarily across the sidebar width. */
.bible-mode-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.bible-mode-btn {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #dee2e6);
  background: transparent;
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.bible-mode-btn:hover {
  background: var(--bg-surface, #f0f0f0);
  color: var(--text-primary);
}
.bible-mode-btn i { font-size: 0.7rem; }
.btn-check:checked + .bible-mode-btn {
  background: var(--color-primary, #1F3864);
  color: #fff;
  border-color: var(--color-primary, #1F3864);
}

/* Commentary summary bar */
.commentary-summary-bar .badge { transition: opacity 0.2s; }

/* Click-a-word in passage cards — subtle hover affordance, prominent
   highlight when a clicked word maps to a Strong's row. */
.scripture-passage-card .passage-word {
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, text-decoration 0.15s;
}
.scripture-passage-card .passage-word:hover {
  background: rgba(31, 56, 100, 0.08);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
html[data-mode="dark"] .scripture-passage-card .passage-word:hover {
  background: rgba(255, 255, 255, 0.08);
}
.strongs-clicked-match {
  background: var(--color-warning-subtle, #fff8e1) !important;
  border-left: 3px solid var(--color-warning, #ffc107) !important;
  animation: strongsClickedPulse 1.2s ease;
}
@keyframes strongsClickedPulse {
  0%   { background: rgba(255, 193, 7, 0.45); }
  100% { background: var(--color-warning-subtle, #fff8e1); }
}

/* Selection popover — improved layout with labels */
.sidebar-sel-popover {
  position: fixed;
  z-index: var(--z-tooltip);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-light, #dee2e6);
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  max-width: 310px;
}
.sel-popover-main {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.sel-popover-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border-light, #dee2e6);
  margin: 0 2px;
  align-self: center;
}
.sel-popover-overflow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-light, #eee);
  margin-bottom: 4px;
}
.sel-popover-actions {
  display: flex;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-light, #eee);
}
.sidebar-sel-popover .btn {
  font-size: 0.72rem;
  padding: 3px 8px;
  white-space: nowrap;
}
html[data-mode="dark"] .sidebar-sel-popover {
  background: var(--card-bg, #1a1a2e);
  border-color: rgba(255,255,255,0.1);
}
/* Touch-friendly popover buttons on mobile */
@media (pointer: coarse) {
  .sidebar-sel-popover .btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 0.8rem;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-sel-popover { max-width: 90vw; }
  /* Quill editors: taller tap targets for toolbar buttons */
  .ql-toolbar button { min-width: 36px; min-height: 36px; }
}
html[data-mode="dark"] .bible-mode-btn {
  border-color: rgba(255,255,255,0.15);
}
html[data-mode="dark"] .research-nav-toc {
  background: var(--bg-surface, #252540);
}
html[data-mode="dark"] .research-saved-item {
  background: var(--card-bg, #1a1a2e);
  border-color: rgba(255,255,255,0.1);
}
html[data-mode="dark"] .research-saved-item-body {
  color: var(--text-primary, #e0e0e0);
}

/* Research tab Quill inside unified sidebar */
#sidebar-research .ql-container { border: none; min-height: 200px; }
#sidebar-research .ql-editor { min-height: 200px; font-size: var(--text-sm, 0.875rem); }
#sidebar-research .ql-toolbar { border: none; border-bottom: 1px solid var(--border-light, #e9ecef); }

/* Dark mode adjustments */
html[data-mode="dark"] .unified-sidebar {
  background: var(--bg-primary, #1a1a2e);
  border-left-color: rgba(255,255,255,0.1);
}
html[data-mode="dark"] .unified-sidebar-header {
  background: var(--bg-primary, #1a1a2e);
  border-bottom-color: rgba(255,255,255,0.08);
}
html[data-mode="dark"] .ai-chat-msg-ai .ai-chat-bubble {
  background: var(--bg-surface, #252540);
}
html[data-mode="dark"] .ai-chat-input {
  background: var(--bg-surface, #252540);
}

/* ── Sidebar + Workspace Layout ──
   Pure viewport-relative calc — no hardcoded breakpoints.
   Formula adapts fluidly: on ultrawide 95% cap wins (no change),
   on narrower screens the calc wins (content fits beside sidebar). */
/* Hide floating bug FAB when sidebar is open — it overlaps the AI chat send button */
body.sidebar-open #bug-report-fab {
  display: none !important;
}

body.sidebar-open .builder-workspace {
  max-width: min(95%, calc(100vw - 240px - var(--sidebar-width, 360px) - 4rem));
  margin-left: 0;
  margin-right: auto;
  transition: max-width 0.25s ease;
}
.sidebar-collapsed.sidebar-open .builder-workspace {
  max-width: min(95%, calc(100vw - 60px - var(--sidebar-width, 360px) - 3rem));
}

/* ── Version History Panel ── */
.version-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-primary, #fff);
  border-left: 3px solid var(--color-primary, #1F3864);
  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  transform: translateX(0);
}
.version-panel.d-none {
  transform: translateX(100%);
  pointer-events: none;
}
.version-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  background: var(--bg-surface, #f8f9fa);
  flex-shrink: 0;
}
.version-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.version-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border-light, #eee);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  transition: background 0.15s;
}
.version-item:hover {
  background: var(--bg-hover, rgba(0,0,0,0.025));
}
.version-item .version-badge {
  flex-shrink: 0;
}
.version-item .version-info {
  flex: 1;
  min-width: 0;
}
.version-item .version-note {
  font-size: var(--text-sm, 0.85rem);
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.version-item .version-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #6c757d);
}
.version-item .version-actions {
  flex-shrink: 0;
  align-self: center;
}
.version-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted, #6c757d);
}
.version-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
html[data-mode="dark"] .version-panel {
  border-left-color: var(--color-primary, #3B7DD8);
}
html[data-mode="dark"] .version-panel-header {
  background: var(--bg-surface, #1e1e2e);
}
html[data-mode="dark"] .version-item:hover {
  background: rgba(255,255,255,0.04);
}

/* ── Add Element Dropdown ── */
.dropdown-menu-sub-elements {
  max-height: 360px;
  overflow-y: auto;
  font-size: 0.85rem;
}
.dropdown-menu-sub-elements .dropdown-item {
  padding: 0.3rem 0.75rem;
}
.dropdown-menu-sub-elements .dropdown-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Dark Mode: Hierarchical Builder ── */
html[data-mode="dark"] .builder-container {
  background: var(--bg-surface, #1e1e2f);
  border-color: var(--border-color, #333);
}
html[data-mode="dark"] .builder-container-header {
  background: var(--bg-surface-alt, #252540);
  border-bottom-color: var(--border-color, #333);
}
html[data-mode="dark"] .container-title-input {
  color: var(--text-primary, #e0e0e0);
}
html[data-mode="dark"] .container-title-input:focus {
  background: var(--bg-surface, #1e1e2f);
}

html[data-mode="dark"] .container-intro {
  border-left-color: #FF8A65;
}
html[data-mode="dark"] .container-intro .builder-container-header {
  background: rgba(255, 138, 101, 0.06);
}
html[data-mode="dark"] .container-intro .container-title-input { color: #FF8A65; }

html[data-mode="dark"] .container-main-point {
  border-left-color: #B388FF;
}
html[data-mode="dark"] .container-main-point .builder-container-header {
  background: rgba(179, 136, 255, 0.06);
}
html[data-mode="dark"] .container-main-point .container-title-input { color: #B388FF; }

html[data-mode="dark"] .container-closing {
  border-left-color: #EF9A9A;
}
html[data-mode="dark"] .container-closing .builder-container-header {
  background: rgba(239, 154, 154, 0.06);
}
html[data-mode="dark"] .container-closing .container-title-input { color: #EF9A9A; }

html[data-mode="dark"] .sub-element {
  background: var(--bg-surface, #1e1e2f);
  border-color: var(--border-color, #333);
}
html[data-mode="dark"] .sub-element-header {
  background: var(--bg-surface-alt, #252540);
  border-bottom-color: var(--border-color, #333);
}

html[data-mode="dark"] .research-panel {
  background: var(--bg-primary, #1a1a2e);
  border-left-color: var(--color-primary, #6C7FD8);
}
html[data-mode="dark"] .research-panel-header {
  background: var(--bg-surface, #1e1e2f);
  border-bottom-color: var(--border-color, #333);
}

html[data-mode="dark"] .container-quill-wrap {
  border-color: var(--border-color, #333);
}

/* Quill editor inside builder */
.builder-workspace .ql-container {
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-height: 120px;
}
.builder-workspace .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface-hover);
}
.builder-workspace .ql-editor {
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
}
.builder-workspace .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: italic;
}

html[data-mode="dark"] .builder-workspace .ql-toolbar {
  background: var(--bg-surface-alt);
  border-bottom-color: var(--border-color);
}
html[data-mode="dark"] .builder-workspace .ql-toolbar .ql-stroke {
  stroke: var(--text-secondary);
}
html[data-mode="dark"] .builder-workspace .ql-toolbar .ql-fill {
  fill: var(--text-secondary);
}
html[data-mode="dark"] .builder-workspace .ql-toolbar .ql-picker-label {
  color: var(--text-secondary);
}

/* Section body textarea */
.builder-workspace .section-body-input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.7;
  resize: vertical;
}

/* ── Template Grid (New Sermon Page) ── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.template-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.75rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  background: var(--bg-primary);
}
.template-card:hover {
  border-color: var(--color-primary);
  background: var(--bg-secondary);
}
.template-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 99,102,241), 0.2);
  background: var(--bg-secondary);
}
.template-card-icon {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
}
.template-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.template-card-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Responsive: Builder (Narrow tablet ≤ 900px) ── */
@media (max-width: 900px) {
  /* Hide word count + time estimate to prevent row-2 wrapping */
  #word-count, #time-estimate,
  #word-count + .topbar-meta-sep { display: none !important; }
  /* Collapse mode toggle labels to icons only */
  .compose-mode-toggle .mode-btn { font-size: 0.78rem; padding: 3px 8px; }
  .compose-mode-toggle .mode-btn .me-1 { margin-right: 0 !important; }
  /* Save button: shrink text */
  .topbar-save-group .btn { font-size: 0.78rem; padding: 3px 10px; }
  /* Style preview dropdown — narrower */
  .ms-style-preview { max-width: 110px; font-size: 0.75rem; }
}

/* ── Responsive: Builder (Tablet ≤ 768px) ── */
@media (max-width: 768px) {
  .builder-workspace {
    max-width: 100%;
    padding: 0 0.25rem;
  }

  /* Top bar: compact on mobile */
  .topbar-title { font-size: 1rem; }
  .topbar-row-2 { flex-wrap: wrap; gap: 6px; }
  .topbar-meta { font-size: 0.75rem; flex-wrap: wrap; }
  .topbar-zoom-control { display: none; }
  .topbar-save-group .btn { font-size: 0.75rem; padding: 3px 10px; }
  .compose-mode-toggle .mode-btn { font-size: 0.72rem; padding: 3px 8px; }
  /* Manuscript page narrower on mobile */
  [data-compose-mode="manuscript"] .builder-container { padding: 24px 20px 20px; }
  [data-compose-mode="manuscript"] { padding: 16px 8px !important; }

  /* Metadata: 2 columns instead of 5 */
  #metadataPanel .col-md-4,
  #metadataPanel .col-md-3,
  #metadataPanel .col-md-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Container headers: let title flex-shrink, icons stay compact */
  .container-title-input {
    font-size: 0.88rem;
    min-width: 80px;
  }

  /* Sub-elements: slightly tighter */
  .sub-element-header {
    font-size: 0.78rem;
    padding: 0.3rem 0.4rem;
  }

  /* Scripture row: stack version + fetch below reference */
  .sub-element-body .row.g-2 .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sub-element-body .row.g-2 .col-3 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .sub-element-body .row.g-2 .col-1 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Touch-friendly: minimum 40px tap targets for builder buttons */
  .builder-container-header .btn-sm,
  .sub-element-header .btn-sm {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Panels: wider on tablet */
  .research-panel,
  .version-panel {
    width: 320px;
  }
}

/* ── Responsive: Builder (Phone ≤ 576px) ── */
@media (max-width: 576px) {
  .builder-workspace {
    padding: 0;
  }

  /* Top bar: tighter on phone */
  .topbar-title { font-size: 0.95rem; }
  .topbar-right-icons { gap: 2px; }
  .topbar-right-icons .btn { width: 30px; height: 30px; }

  /* Container layout */
  .builder-container-header {
    padding: 0.4rem 0.5rem;
    flex-wrap: wrap;
  }
  .builder-container-header > .d-flex:last-child {
    margin-top: 0.25rem;
    width: 100%;
    justify-content: flex-end;
  }
  .builder-container-body {
    padding: 0.4rem;
  }
  .container-title-input {
    font-size: 0.82rem;
  }

  /* Sub-element layout */
  .sub-element-header {
    font-size: 0.72rem;
    flex-wrap: wrap;
  }
  .sub-element-body {
    padding: 0.35rem;
  }

  /* Touch targets: ensure 44px minimum per Apple HIG */
  .builder-container-header .btn-sm,
  .sub-element-header .btn-sm,
  .btn-add-sub,
  #btn-add-main-point {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Drag handles: larger touch area */
  .container-drag-handle,
  .sub-drag-handle {
    padding: 0.35rem;
    font-size: 1rem;
  }

  /* Full-width panels on phone */
  .research-panel,
  .version-panel {
    width: 100vw;
  }

  /* Metadata: single column */
  #metadataPanel .col-md-4,
  #metadataPanel .col-md-3,
  #metadataPanel .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Add Element dropdown: wider for touch */
  .dropdown-menu-sub-elements {
    min-width: 260px;
  }
  .dropdown-menu-sub-elements .dropdown-item {
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
  }

  /* Quill toolbar: compact */
  .builder-workspace .ql-toolbar {
    padding: 4px;
  }
  .builder-workspace .ql-toolbar .ql-formats {
    margin-right: 8px;
  }
  .builder-workspace .ql-editor {
    min-height: 80px;
    padding: var(--space-2) var(--space-3);
  }

  /* Highlight toolbar: wrap to own line on narrow screens */
  .highlight-toolbar {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
  }

  /* Modals: near-full-width */
  .modal-dialog {
    margin: 0.5rem;
  }
}

/* ── Responsive: Unified Sidebar ── */

/* Tablet & below (≤991px): left nav is off-canvas, sidebar OVERLAYS workspace
   instead of pushing content aside — not enough room for side-by-side layout */
@media (max-width: 991px) {
  /* Workspace stays full width — sidebar floats on top */
  body.sidebar-open .builder-workspace,
  .sidebar-collapsed.sidebar-open .builder-workspace {
    max-width: 100%;
    margin: 0 auto;
  }
  /* Lock body scroll when sidebar is open on tablet/mobile */
  body.sidebar-open { overflow: hidden; }
  /* Sidebar caps at 75vw so user can still see workspace behind */
  .unified-sidebar {
    width: min(var(--sidebar-width, 360px), 75vw);
    box-shadow: -4px 0 20px rgba(0,0,0,0.18);
  }
  /* Semi-transparent backdrop behind sidebar — click to close */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1039; /* just below sidebar (1040) */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

/* Phone (≤576px): sidebar goes full-width drawer */
@media (max-width: 576px) {
  .unified-sidebar {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
  }
}

/* ─── AI Assistant Panel & Components ────────────────────── */

/* AI Response Panel (slide-out from right, fallback for compose.php).
   Scoped to #ai-response-panel so it does NOT collide with the gradient
   .ai-panel hero on home.php (see §11 above). */
#ai-response-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-primary, #fff);
  border-left: 3px solid var(--color-accent, #D4A84B);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: var(--z-panel);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#ai-response-panel.ai-panel-open {
  transform: translateX(0);
}

.ai-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  background: var(--bg-secondary, #f8f9fa);
  flex-shrink: 0;
}

.ai-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.ai-panel-body h5,
.ai-panel-body h6 {
  color: var(--color-primary, #1F3864);
}

.ai-panel-body .card {
  border: 1px solid var(--border-color, #dee2e6);
}

/* AI Loading Overlay */
#ai-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-loading-content {
  background: var(--bg-primary, #fff);
  padding: 2rem 3rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

/* AI Suggest button glow on hover */
.ai-suggest-btn:hover {
  color: #f0ad4e !important;
  text-shadow: 0 0 6px rgba(240,173,78,0.4);
}

/* AI Review content formatting */
.ai-review-content p {
  margin-bottom: 0.5rem;
}

.ai-review-content h5,
.ai-review-content h6 {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.ai-review-content li {
  margin-bottom: 0.25rem;
}

/* Dark mode AI adjustments */
html[data-mode="dark"] .ai-panel {
  background: var(--bg-primary, #1a1a2e);
  border-left-color: var(--color-accent, #E4C478);
}

html[data-mode="dark"] .ai-panel-header {
  background: var(--bg-secondary, #16213e);
  border-bottom-color: var(--border-color, #333);
}

html[data-mode="dark"] .ai-loading-content {
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

html[data-mode="dark"] #ai-loading-overlay {
  background: rgba(0,0,0,0.6);
}

/* Responsive: full-width panel on small screens */
@media (max-width: 576px) {
  .ai-panel {
    width: 100vw;
  }
}

/* ─── SCRIPTURE TAGGER ────────────────────────────────────── */

.scripture-ref {
  color: var(--color-primary);
  border-bottom: 1px dotted var(--color-primary);
  cursor: pointer;
  transition: background-color 0.15s;
}
.scripture-ref:hover {
  background-color: rgba(var(--color-primary-rgb, 26, 35, 126), 0.08);
  border-bottom-style: solid;
}

.scripture-popover {
  max-width: 420px;
  min-width: 280px;
}
.scripture-popover .popover-body {
  padding: 0;
}

.scripture-popup-header {
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  font-size: 0.9rem;
  color: var(--color-primary);
}
.scripture-popup-body {
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-teaching);
  color: var(--text-primary, #333);
}
.scripture-popup-body sup {
  font-weight: 700;
  color: var(--color-primary);
  margin-right: 2px;
  font-family: Arial, sans-serif;
  font-size: 0.7em;
}
.scripture-ellipsis {
  display: block;
  text-align: center;
  color: var(--text-muted, #888);
  font-style: italic;
  margin-top: 4px;
}

/* ─── GROUPED SERMONS BROWSE ─────────────────────────── */

.sermon-group {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg, #fff);
}

.sermon-group-header {
  padding: 0.75rem 1rem;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-color, #dee2e6);
  transition: background 0.15s;
  user-select: none;
}

.sermon-group-header:hover {
  background: var(--hover-bg, #f8f9fa);
}

.sermon-group-header h5 {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.sermon-group-chevron,
.sermon-subgroup-chevron {
  transition: transform 0.25s ease;
  font-size: var(--text-sm);
  color: var(--text-muted, #6c757d);
}

.sermon-group-chevron.collapsed,
.sermon-subgroup-chevron.collapsed {
  transform: rotate(-90deg);
}

.sermon-subgroup {
  border-top: 1px solid var(--border-color, #dee2e6);
}

.sermon-subgroup:first-child {
  border-top: none;
}

.sermon-subgroup-header {
  padding: 0.5rem 1rem 0.5rem 1.75rem;
  background: var(--hover-bg, #f8f9fa);
  user-select: none;
}

.sermon-subgroup-header:hover {
  background: var(--border-color, #dee2e6);
}

.sermon-subgroup-header h6 {
  font-size: var(--text-base);
  color: var(--text-secondary, #495057);
  font-weight: 600;
}

.sermon-browse-table {
  margin-bottom: 0;
}

.sermon-browse-table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #6c757d);
  border-bottom-width: 1px;
  padding: 0.4rem 0.75rem;
  font-weight: 600;
}

.sermon-browse-table tbody td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.sermon-browse-table .sermon-row:hover {
  background: var(--hover-bg, #f8f9fa);
}

.sermon-browse-table .fw-medium {
  font-size: var(--text-base);
}

.scripture-ref-inline {
  font-style: italic;
  font-size: var(--text-sm);
}

/* Collapse All / Expand All button */
.sermon-toggle-all {
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Mobile: compact groups */
@media (max-width: 767.98px) {
  .sermon-group-header {
    padding: 0.6rem 0.75rem;
  }
  .sermon-subgroup-header {
    padding: 0.4rem 0.75rem 0.4rem 1.25rem;
  }
  .sermon-browse-table .fw-medium {
    font-size: 0.85rem;
  }
  .sermon-browse-table thead th {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }
  .sermon-browse-table tbody td {
    padding: 0.4rem 0.5rem;
  }
}


/* ─── UNIFIED BROWSE CARD SYSTEM (.sbp-card) ─────────────── */
/*
 * Consistent card component for all browse pages:
 * Series, Illustrations, Service Orders, and future card-based pages.
 *
 * Structure:
 *   .sbp-card > .sbp-card-body
 *                  .sbp-card-title (link)
 *                  .sbp-card-desc  (optional)
 *                  .sbp-card-meta  (badges, dates)
 *               .sbp-card-footer
 *                  icon action buttons
 *
 * Grid: Use .row.g-3 > .col-md-6.col-lg-4 for 3-up desktop, 2-up tablet.
 */

.sbp-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sbp-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary-light, var(--border-color));
}

.sbp-card-body {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Card title — themed link color, no inline styles needed */
.sbp-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.sbp-card-title a {
  color: var(--color-primary);
  text-decoration: none;
}
.sbp-card-title a:hover {
  color: var(--color-primary-dark, var(--color-primary));
  text-decoration: underline;
}

/* Description / preview text */
.sbp-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadata row — badges, dates, counts */
.sbp-card-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: auto;
}
.sbp-card-meta i {
  margin-right: 2px;
}

/* Card footer — action buttons, separated by top border */
.sbp-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-light);
  background: transparent;
}

/* Icon action buttons in card footer */
.sbp-card-footer .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.sbp-card-footer .btn-icon:hover {
  background: var(--bg-surface-hover);
  color: var(--color-primary);
  border-color: var(--border-color);
}
.sbp-card-footer .btn-icon.text-danger:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
}

/* Status badge inside card header area */
.sbp-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Unified empty state for browse pages */
.sbp-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-muted);
}
.sbp-empty-state .sbp-empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  display: block;
  margin-bottom: var(--space-3);
}
.sbp-empty-state h5 {
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.sbp-empty-state p {
  margin-bottom: var(--space-4);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.sbp-empty-state .btn {
  margin-top: var(--space-2);
}


/* ─── FULLCALENDAR THEME OVERRIDES ────────────────────────── */
/* Make FullCalendar inherit SBP theme colors */
#fullCalendar .fc {
  --fc-border-color: var(--border-color);
  --fc-page-bg-color: var(--bg-surface);
  --fc-neutral-bg-color: var(--bg-surface-alt);
  --fc-today-bg-color: rgba(var(--color-primary-rgb, 31, 56, 100), 0.06);
  --fc-event-border-color: transparent;
}
#fullCalendar .fc .fc-button-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
#fullCalendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#fullCalendar .fc .fc-button-primary:not(:disabled):active {
  background: var(--color-primary-dark, var(--color-primary));
  border-color: var(--color-primary-dark, var(--color-primary));
}
#fullCalendar .fc .fc-toolbar-title {
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: 700;
}
#fullCalendar .fc .fc-col-header-cell-cushion {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
}
#fullCalendar .fc .fc-daygrid-day-number {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
#fullCalendar .fc .fc-event {
  cursor: grab;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  padding: 1px 4px;
}
#fullCalendar .fc .fc-event:active {
  cursor: grabbing;
}
#fullCalendar .fc .fc-day-sun {
  border-left: 3px solid var(--color-primary);
}


/* ─── STANDARDIZED EMPTY / LOADING / ERROR STATES ─────────── */

/* Empty state — centered icon + text for empty lists/tables */
.si-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-muted);
}
.si-empty-state .si-empty-icon {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: var(--space-3);
  display: block;
}
.si-empty-state h5,
.si-empty-state h4 {
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.si-empty-state p {
  margin-bottom: var(--space-4);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.si-empty-state .btn {
  margin-top: var(--space-2);
}

/* Loading state — spinner + message for async operations */
.si-loading {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}
.si-loading .spinner-border {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.si-loading p {
  margin: 0;
}
/* Spin animation for export loading indicator */
.spin {
  animation: si-spin 0.8s linear infinite;
}
@keyframes si-spin {
  100% { transform: rotate(360deg); }
}

/* Inline error — subtle error banner for failed operations */
.si-error {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-danger, #dc3545);
}
.si-error .si-error-icon {
  font-size: 2rem;
  opacity: 0.5;
  margin-bottom: var(--space-2);
  display: block;
}
.si-error p {
  margin-bottom: var(--space-3);
}

/* Toast notifications — stacked in top-right corner */
.si-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.si-toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: si-toast-in 0.3s ease-out;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.si-toast.si-toast-success { border-left: 4px solid #198754; }
.si-toast.si-toast-error   { border-left: 4px solid #dc3545; }
.si-toast.si-toast-warning { border-left: 4px solid #ffc107; }
.si-toast.si-toast-info    { border-left: 4px solid var(--color-primary); }
.si-toast i { font-size: 1.1rem; flex-shrink: 0; }
.si-toast.si-toast-success i { color: #198754; }
.si-toast.si-toast-error i   { color: #dc3545; }
.si-toast.si-toast-warning i { color: #ffc107; }
.si-toast.si-toast-info i    { color: var(--color-primary); }
.si-toast .si-toast-close {
  margin-left: auto;
  background: none;
  border: none;
  opacity: 0.5;
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 1rem;
  color: var(--text-muted);
}
.si-toast .si-toast-close:hover { opacity: 1; }

@keyframes si-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Toast: full-width on phone */
@media (max-width: 576px) {
  .si-toast-container {
    right: var(--space-3);
    left: var(--space-3);
  }
  .si-toast {
    min-width: 0;
    max-width: 100%;
  }
}


/* ================================================================
   10. MANUSCRIPT COMPOSE MODE
   ================================================================ */

/* --- New Draft: Compose Mode Toggle (scoped — the toolbar toggle on
   compose.php uses the same .compose-mode-toggle class, see §11). --- */
.compose-mode-option {
  flex: 1;
  cursor: pointer;
}
.compose-mode-card {
  border: 2px solid var(--border-color, #dee2e6);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  background: var(--bg-surface, #fff);
}
.compose-mode-option:hover .compose-mode-card {
  border-color: var(--color-primary, #4361ee);
  box-shadow: 0 0 0 1px var(--color-primary, #4361ee);
}
.compose-mode-option.selected .compose-mode-card {
  border-color: var(--color-primary, #4361ee);
  background: color-mix(in srgb, var(--color-primary, #4361ee) 6%, var(--bg-surface, #fff));
  box-shadow: 0 0 0 2px var(--color-primary, #4361ee);
}
.compose-mode-desc {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-muted, #6c757d);
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* (Manuscript editor CSS removed — dead code from unshipped feature) */


/* Utility badge colors */
.bg-purple-subtle {
  background-color: color-mix(in srgb, var(--element-definition) 12%, var(--bg-surface, #fff));
}
.text-purple {
  color: var(--element-definition);
}



/* ═══════════════════════════════════════════════════════════
   RESPONSIVE UX PASS — Tablet (1024px) & Phone (<768px)
   Priority: Sidebar overlay, Builder toolbar, Touch targets
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET (1024px and below) ── */
@media (max-width: 1024px) {
  /* Sidebar becomes overlay instead of pushing content */
  .app-sidebar {
    position: fixed;
    left: 0;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Overlay backdrop for sidebar */
  .sidebar-overlay.visible {
    display: block;
  }

  /* Main content takes full width */
  .app-main {
    margin-left: 0 !important;
  }

  /* Builder workspace uses more width on tablet */
  .builder-workspace {
    max-width: 98%;
    padding: 0 0.5rem;
  }

  /* Manuscript paper width shrinks for tablet */
  [data-compose-mode="manuscript"] {
    padding: 16px 12px !important;
  }

  [data-compose-mode="manuscript"] .builder-container {
    padding: 36px 42px 30px;
    max-width: var(--manuscript-page-width-tablet, 85vw);
  }

  /* Builder containers: reduce padding for touch */
  .builder-container {
    border-radius: var(--radius-sm);
  }

  .builder-container-header {
    padding: 0.5rem 0.6rem;
  }

  .builder-container-body {
    padding: 0.6rem;
  }

  /* Sub-elements: increase touch targets */
  .sub-element {
    margin-bottom: 0.5rem;
  }

  .sub-element-header {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }

  .sub-element-body {
    padding: 0.6rem;
  }

  /* Drag handles: larger cursor area */
  .container-drag-handle,
  .sub-drag-handle {
    padding: 0.3rem;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Buttons in containers: min 44px tap target */
  .builder-container-header .btn,
  .sub-element-header .btn,
  .builder-container-body .btn {
    min-height: 36px;
    min-width: 36px;
  }

  /* Header search: hide on tablet to save space */
  .header-search {
    display: none;
  }
}

/* ── PHONE (< 768px) ── */
@media (max-width: 767.98px) {
  /* Stack sidebar on left as overlay */
  .app-sidebar {
    width: 100% !important;
    position: fixed;
    left: 0;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--sidebar-bg);
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Overlay is more visible on phone — but must sit BELOW the sidebar panel
     (sidebar = --z-sidebar). Equal z-index let the backdrop paint over the
     menu and hide it. */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-dropdown);
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.visible {
    display: block;
  }

  /* Main content takes full width */
  .app-main {
    margin-left: 0 !important;
  }

  /* Header: stack horizontally with touch targets */
  .app-header {
    padding: 0.75rem 1rem;
    height: auto;
  }

  .header-left {
    min-width: 0;
    flex: 1;
  }

  .header-title {
    font-size: 1rem;
  }

  .header-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Builder toolbar: stack or wrap on phone */
  .builder-topbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  /* Mode toggle buttons: full height touch targets */
  .builder-topbar .btn-outline-secondary,
  .builder-topbar .btn-outline-primary {
    min-height: 40px;
    min-width: 40px;
    padding: 0.4rem 0.75rem;
    font-size: var(--text-sm);
  }

  /* Title input on phone: stack above toolbar */
  .builder-topbar-title {
    width: 100%;
    order: -1;
  }

  /* Save button: prominent on phone */
  .builder-topbar .btn-success,
  .builder-topbar .btn-primary {
    min-height: 40px;
    min-width: 100px;
  }

  /* Dropdown menus: wrap nicely */
  .builder-topbar .dropdown-menu {
    max-width: calc(100vw - 2rem);
  }

  /* Builder workspace: full width with minimal padding */
  .builder-workspace {
    max-width: 100%;
    padding: 0.5rem;
  }

  /* Containers: full width, reduced padding */
  .builder-container {
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
  }

  .builder-container-header {
    padding: 0.5rem 0.5rem;
  }

  .builder-container-body {
    padding: 0.5rem;
  }

  /* Container title input: full width */
  .container-title-input {
    font-size: var(--text-base);
    padding: 0.3rem 0.25rem;
  }

  /* Sub-elements: increase spacing for touch */
  .sub-element {
    margin-bottom: 0.6rem;
    border-radius: var(--radius-sm);
  }

  .sub-element-header {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
  }

  .sub-element-body {
    padding: 0.5rem;
  }

  /* Text inputs and textareas: readable on phone */
  .container-body-input,
  .form-control-sm {
    font-size: var(--text-base);
    padding: 0.5rem;
    min-height: 44px;
  }

  /* Drag handles: icon-only, larger tap area */
  .container-drag-handle,
  .sub-drag-handle {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Collapse buttons: larger on phone */
  .container-collapse-btn,
  .sub-collapse-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0.35rem;
  }

  /* Action buttons: min 44px tap target */
  .builder-container-header .btn,
  .sub-element-header .btn,
  .builder-container-body .btn {
    min-height: 40px;
    min-width: 40px;
    font-size: var(--text-sm);
  }

  /* Manuscript mode on phone: narrower paper */
  [data-compose-mode="manuscript"] {
    padding: 8px 4px !important;
    min-height: auto;
  }

  [data-compose-mode="manuscript"] .builder-container {
    padding: 24px 20px 20px;
    max-width: 100vw;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
  }

  [data-compose-mode="manuscript"] .builder-container-header {
    padding: 0 0 8px;
    margin-bottom: 12px;
  }

  [data-compose-mode="manuscript"] .builder-container-header .container-title-input {
    font-size: var(--text-base);
  }

  [data-compose-mode="manuscript"] .sub-element {
    margin-bottom: 8px;
    padding: 6px 10px;
  }

  [data-compose-mode="manuscript"] .sub-element-body .form-control-sm {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* AI sidebar: full-width overlay on phone */
  .builder-ai-sidebar {
    position: fixed !important;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    z-index: var(--z-dropdown);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow-y: auto;
    border: none;
    border-top: 1px solid var(--border-color);
  }

  .builder-ai-sidebar.show {
    transform: translateY(0);
  }

  /* AI sidebar close button */
  .builder-ai-sidebar .sidebar-close-btn {
    display: flex;
    position: sticky;
    top: 0;
    padding: 0.75rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
  }

  /* Quill editor on phone */
  .container-quill-wrap .ql-container {
    font-size: var(--text-base);
  }

  .container-quill-wrap .ql-editor {
    padding: 0.75rem;
    min-height: 100px;
  }

  /* Modal and offcanvas: full-width on phone */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
  }

  .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .offcanvas {
    width: 100% !important;
  }

  /* Cards in modals: readable padding */
  .modal-body {
    padding: 1rem;
  }

  .modal-header {
    padding: 1rem;
  }

  /* Forms on phone: full width */
  .form-group label {
    font-size: var(--text-sm);
    margin-bottom: 0.5rem;
  }

  .form-control,
  .form-select {
    font-size: var(--text-base);
    min-height: 44px;
    padding: 0.6rem;
  }

  /* Buttons on phone: full width for primary actions. 44px = WCAG 2.5.8 /
     Apple HIG touch-target floor (was 40px). */
  .btn {
    min-height: 44px;
  }

  .btn-primary,
  .btn-success,
  .btn-danger {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* …but never distort grouped/inline/toolbar/table buttons — full width is
     only for standalone CTAs (forms, cards), not action rows or kiosk rows. */
  .btn-group .btn,
  .input-group .btn,
  .toolbar-scroll .btn,
  .rtable-actions .btn,
  td .btn,
  .d-flex .btn,
  .d-inline .btn,
  .modal-footer .btn,
  .btn-sm {
    width: auto;
    margin-bottom: 0;
  }
}

/* ── SMALL PHONE (< 480px) ── */
@media (max-width: 479.98px) {
  /* Minimal padding everywhere */
  body {
    font-size: 15px;
  }

  .app-content {
    padding: 0.5rem !important;
  }

  .builder-workspace {
    padding: 0.25rem;
  }

  /* Header: more compact */
  .app-header {
    padding: 0.5rem 0.75rem;
  }

  .header-title {
    font-size: 0.95rem;
  }

  /* Builder toolbar: stack vertically */
  .builder-topbar {
    flex-direction: column;
    gap: 0.4rem;
  }

  .builder-topbar-title {
    width: 100%;
  }

  /* Buttons fill width on small screens */
  .builder-topbar .btn {
    width: 100%;
  }

  /* Containers: ultra-minimal padding */
  .builder-container {
    margin-bottom: 0.5rem;
  }

  .builder-container-header {
    padding: 0.4rem;
  }

  .builder-container-body {
    padding: 0.4rem;
  }

  .container-title-input {
    font-size: 0.95rem;
  }

  /* Sub-elements: minimal spacing */
  .sub-element {
    margin-bottom: 0.4rem;
    border-radius: 4px;
  }

  .sub-element-header {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
  }

  .sub-element-body {
    padding: 0.4rem;
  }

  /* Text on small screens */
  .form-control-sm {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.4rem 0.5rem;
  }

  /* Manuscript mode: paper width minimal */
  [data-compose-mode="manuscript"] .builder-container {
    padding: 20px 16px 16px;
    max-width: 100vw;
  }

  [data-compose-mode="manuscript"] .builder-container-header .container-title-input {
    font-size: var(--text-sm);
  }

  /* AI sidebar: maximum height on small screen */
  .builder-ai-sidebar {
    max-height: 50vh;
  }

  /* Modal: full screen almost */
  .modal-dialog {
    max-width: 100%;
  }

  .modal-content {
    margin: 0;
  }

  .modal-header,
  .modal-body {
    padding: 0.75rem;
  }

  /* Buttons: single column on small screens */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
    border-radius: var(--radius-sm);
    margin-bottom: 0.3rem;
  }

  /* Dropdowns: limit width */
  .dropdown-menu {
    max-width: calc(100vw - 1rem);
  }
}

/* ═══════════════════════════════════════════════════════
   HELP SYSTEM
   Sidebar panel, search, contextual help, articles, tours
   ═══════════════════════════════════════════════════════ */

/* ── Help Sidebar ── */
.help-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  z-index: 1060;
  background: var(--sidebar-bg, #fff);
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}
.help-sidebar.open {
  right: 0;
}
.help-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1059;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.help-sidebar-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.help-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--color-primary, #4A148C);
  color: #fff;
  flex-shrink: 0;
}
.help-sidebar-title {
  margin: 0;
  font-size: 1.1rem;
}
.help-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* Search in sidebar */
.help-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-height: 360px;
  overflow-y: auto;
}
.help-search-box {
  position: relative;
}
.help-search-item {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--text-color, #333);
  border-bottom: 1px solid var(--border-light, #eee);
}
.help-search-item:hover {
  background: var(--hover-bg, rgba(0,0,0,0.04));
}
.help-search-item-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.help-search-item-snippet {
  font-size: 0.78rem;
  color: var(--text-muted, #777);
  margin-top: 2px;
}
.help-search-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.88rem;
}

/* Quick links */
.help-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.help-quick-links li {
  margin-bottom: 0.25rem;
}
.help-quick-links a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  color: var(--text-color, #333);
  font-size: 0.9rem;
  transition: background 0.15s;
}
.help-quick-links a:hover {
  background: var(--hover-bg, rgba(0,0,0,0.05));
  color: var(--color-primary, #4A148C);
}
.help-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  margin-bottom: 0.5rem;
}

/* Contextual help cards */
.help-context-card {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light, #eee);
}
.help-context-card:last-child { border-bottom: none; }
.help-context-title {
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-primary, #4A148C);
}
.help-context-title:hover { text-decoration: underline; }
.help-context-desc {
  font-size: 0.8rem;
  color: var(--text-muted, #777);
  margin: 0.15rem 0 0;
}

/* ── Help Article Page ── */
.help-toc-sidebar {
  padding-right: 1rem;
}
.help-toc-cat-label {
  font-weight: 700;
}
.help-toc-link {
  text-decoration: none;
  display: block;
  padding: 0.15rem 0;
}
.help-toc-link:hover {
  color: var(--color-primary, #4A148C) !important;
}

/* Article body styling */
.help-body h4 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--heading-color, inherit); }
.help-body h5 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.help-body h6 { font-size: 0.95rem; margin-top: 1rem; margin-bottom: 0.5rem; }
.help-body p { margin-bottom: 0.75rem; line-height: 1.7; }
.help-body ul, .help-body ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.help-body li { margin-bottom: 0.35rem; line-height: 1.6; }
.help-body code { background: var(--code-bg, rgba(0,0,0,0.06)); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.88em; }
.help-body blockquote.help-blockquote {
  border-left: 3px solid var(--color-primary, #4A148C);
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
  background: var(--blockquote-bg, rgba(0,0,0,0.02));
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.help-body strong { color: var(--heading-color, inherit); }
.help-body hr { margin: 1.5rem 0; border-color: var(--border-color, #ddd); }

/* ── Inline help hint icons ── */
.help-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-light, rgba(74, 20, 140, 0.1));
  color: var(--color-primary, #4A148C);
  font-size: 0.7rem;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  text-decoration: none;
  transition: background 0.15s;
}
.help-hint:hover {
  background: var(--color-primary, #4A148C);
  color: #fff;
}

/* ── Shepherd.js tour overrides ── */
.sbp-tour-step .shepherd-content {
  border-radius: var(--radius, 8px);
}
.sbp-tour-step .shepherd-header {
  background: var(--color-primary, #4A148C);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.sbp-tour-step .shepherd-title {
  color: #fff;
  font-weight: 600;
}
.sbp-tour-step .shepherd-cancel-icon { color: rgba(255,255,255,0.7); }
.sbp-tour-step .shepherd-cancel-icon:hover { color: #fff; }
.sbp-tour-step .shepherd-text {
  padding: 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.sbp-tour-step .shepherd-footer {
  padding: 0.5rem 1rem 1rem;
}

/* ── Dark mode overrides ── */
[data-mode="dark"] .help-sidebar {
  background: var(--sidebar-bg, #1a1a2e);
}
[data-mode="dark"] .help-search-results {
  background: var(--card-bg, #1a1a2e);
  border-color: var(--border-color, #333);
}
[data-mode="dark"] .help-search-item:hover {
  background: rgba(255,255,255,0.05);
}
[data-mode="dark"] .help-hint {
  background: rgba(255,255,255,0.1);
}

/* ── Mobile ── */
@media (max-width: 767.98px) {
  .help-sidebar {
    width: 100vw;
    right: -100vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PASS (mobile-design skill) — shared, reusable phone patterns.
   Append-only section so it wins the cascade. Bump cache busters on edit.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Responsive tables → stacked label/value cards on phones ──────────────
   Add class "rtable" to a .table-responsive wrapper and data-label="Header"
   to each <td>. Desktop is unchanged; phones get tap-friendly cards with
   the row actions reachable at the bottom. */
@media (max-width: 767.98px) {
  .rtable > table > thead,
  .rtable > .table > thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .rtable > table,
  .rtable > .table { display: block; }
  .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: .6rem;
    margin-bottom: .65rem;
    padding: .55rem .8rem;
    background: var(--bg-surface, #fff);
  }
  .rtable td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 0 !important; padding: .35rem 0; text-align: right; min-height: 0;
  }
  .rtable td[data-label]::before {
    content: attr(data-label);
    font-weight: 600; color: var(--text-secondary, #6c757d);
    text-align: left; margin-right: auto; white-space: nowrap;
  }
  .rtable td[data-label=""]::before, .rtable td.rtable-actions::before { content: none; }
  .rtable td.rtable-actions {
    justify-content: flex-end; gap: .5rem;
    padding-top: .55rem; margin-top: .25rem;
    border-top: 1px dashed var(--border-light, #eee) !important;
  }
  .rtable td.rtable-actions .btn { min-height: 40px; min-width: 40px; }
  .rtable td.rtable-actions .rtable-label { display: inline !important; }
  /* Don't let inner forms force a row to overflow */
  .rtable td.rtable-actions form { display: inline-flex; }
}

/* ── Horizontal scroll strip for long button/toolbar rows ────────────────
   Wrap a row of buttons in .toolbar-scroll so it scrolls instead of cutting
   off. Children must not shrink. Scrollbar hidden; edge fade hints scroll. */
.toolbar-scroll {
  display: flex; flex-wrap: nowrap; gap: .5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.toolbar-scroll::-webkit-scrollbar { display: none; }
.toolbar-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (max-width: 767.98px) {
  .toolbar-scroll { margin-inline: -0.25rem; padding-inline: 0.25rem; }
}

/* Directory jump bar: WRAP, don't scroll — every section button stays visible
   (a hidden scrollbar reads as buttons running off the screen). */
.dir-jump { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Builder right-hand tool panel (AI / Research / Bible): stop the content
   collapsing to a sliver. The flex chain needs min-height:0 at every level,
   and full-dynamic-viewport height so it isn't cut by mobile browser chrome. */
.unified-sidebar { height: calc(100dvh - var(--topbar-height, 0px)); }
.unified-sidebar-body { min-height: 0; }
.unified-sidebar-body > .tab-pane { min-height: 0; }
.unified-sidebar-body > .tab-pane > .p-2 { min-height: 0; }
.ai-chat-messages { min-height: 0; }

/* AI tab layout (2026-06-07, take 3 — verified against a live screenshot):
   the messages area must FILL the column so the input lands at the very bottom
   (no white void below it), and SCROLL when the conversation is long. The chrome
   (action groups, settings, input) is pinned beneath it in DOM order. The tab
   itself must NOT scroll — only the messages area does — or the input drifts.
   Full redesign still owed — [[project-builder-sidebar-redesign]]. */
#sidebar-ai { overflow: hidden; min-height: 0; }
#sidebar-ai .ai-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#sidebar-ai .ai-quick-actions,
#sidebar-ai .ai-settings-wrap,
#sidebar-ai .ai-chat-input { flex: 0 0 auto; }

@media (max-width: 767.98px) {
  /* Full-screen drawer, honoring the notch/home indicator */
  .unified-sidebar { width: 100vw !important; max-width: 100vw !important; }
  .unified-sidebar-body { padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Give the bible/research results real room to show + scroll */
  #bible-tools-results, #scripture-passages { min-height: 40vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Compose Option 2 — thin tool RAIL + non-modal SLIDE-OVER (+ Study layout)
   Approved mockup: docs/compose-option2-preview.html.
   See [[project-builder-sidebar-redesign]] / [[feedback-compose-sidebar-hated]].
   - A thin always-on icon rail on the right summons one tool at a time.
   - The panel slides over NON-MODALLY on desktop (no backdrop, no scroll-lock);
     the editor stays editable and only gently shifts — never crushed.
   - "Study" layout (html[data-compose-layout=study]) pins the panel wide,
     side-by-side, for deep exegesis (reference parked open while you write).
   ═══════════════════════════════════════════════════════════════════════════ */
body.compose-route { --rail-w: 54px; --panel-w: 340px; --panel-w-study: 460px; }

/* Reserve space for the always-on rail only. In FOCUS the panel floats over
   the editor's right margin (no reserve = no crush); STUDY reserves panel
   space below. */
body.compose-route #main-content { padding-right: var(--rail-w); transition: padding-right 0.2s ease; }
/* When a tool opens, RESERVE the panel's width and keep the editor column
   CENTERED in what's left — balanced, same width, just re-centered (not the
   asymmetric left-shift that looked wonky). On laptops the column re-centers;
   it only narrows on genuinely small widths. ≤991px overlays instead (below). */
@media (min-width: 992px) {
  html[data-compose-layout="focus"] body.compose-route.sidebar-open #main-content {
    padding-right: calc(var(--rail-w) + var(--panel-w));
  }
}

/* Thin icon rail */
.compose-rail {
  /* Full-height strip, INDEPENDENT of the condensing topbar so it doesn't
     jump/resize on scroll. The topbar is padded away from the rail (see
     #main-content padding-right), so they never overlap horizontally. */
  position: fixed; top: 0; right: 0;
  width: var(--rail-w); height: 100dvh;
  background: var(--bg-primary, #fff); border-left: 1px solid var(--border-color, #dee2e6);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; z-index: 1052;
}
.compose-rail .rail-btn {
  position: relative; width: 40px; height: 40px; border: none; background: transparent;
  border-radius: 10px; color: var(--text-secondary, #6c757d); font-size: 1.15rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.compose-rail .rail-btn:hover { background: var(--bg-secondary, #f6f7f9); color: var(--color-primary, #1F3864); }
.compose-rail .rail-btn.active { background: var(--color-primary, #1F3864); color: #fff; }
.compose-rail .rail-spacer { flex: 1 1 auto; }
.compose-rail .rail-badge { position: absolute; top: 2px; right: 2px; background: #d33; color: #fff; font-size: .6rem; font-weight: 700; border-radius: 8px; padding: 0 4px; }
.compose-rail .rail-tip { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); background: #142544; color: #fff; font-size: .72rem; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 1; }
.compose-rail .rail-btn:hover .rail-tip { opacity: 1; }

/* Panel = slide-over docked to the LEFT of the rail */
body.compose-route .unified-sidebar { right: var(--rail-w); width: var(--panel-w); min-width: 0; max-width: none; }
body.compose-route .unified-sidebar.d-none { transform: translateX(calc(100% + var(--rail-w))); }
/* Calm readable writing column, always CENTERED in the available area (which
   shrinks by the panel width when a tool is open — see #main-content padding). */
body.compose-route .builder-workspace { max-width: 820px; margin-left: auto; margin-right: auto; transition: max-width 0.2s ease; }

/* The rail replaces the fat tab strip + the toolbar "AI & Tools" button */
body.compose-route .unified-sidebar-header .sidebar-tabs { display: none; }
body.compose-route #btn-sidebar-toggle { display: none; }
body.compose-route .unified-sidebar-header { padding: 0.55rem 2.6rem 0.55rem 0.9rem; display: flex; align-items: center; }
.unified-sidebar-title { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 7px; color: var(--text-primary, #212529); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Study layout: pin the panel wide & side-by-side ── */
html[data-compose-layout="study"] body.compose-route .unified-sidebar {
  width: var(--panel-w-study); transform: translateX(0) !important; pointer-events: auto !important;
}
html[data-compose-layout="study"] body.compose-route #main-content { padding-right: calc(var(--rail-w) + var(--panel-w-study)); }
html[data-compose-layout="study"] body.compose-route .unified-sidebar-header .sidebar-close-btn { display: none; }

/* Tablet (≤991px): rail stays; panel OVERLAYS (the existing ≤991 block adds the
   backdrop + scroll-lock). Editor doesn't reserve panel space. */
@media (max-width: 991px) {
  body.compose-route.sidebar-open #main-content,
  html[data-compose-layout="study"] body.compose-route #main-content { padding-right: var(--rail-w); }
  html[data-compose-layout="study"] body.compose-route .unified-sidebar { width: min(var(--panel-w-study), 80vw); }
}
/* Phone (≤576px): panel is a full-width drawer; hide the rail while it's open. */
@media (max-width: 576px) {
  body.compose-route #main-content,
  body.compose-route.sidebar-open #main-content { padding-right: 0; }
  body.compose-route.sidebar-open .compose-rail { display: none; }
}

/* ── CLASSIC layout: flip back to the ORIGINAL docked tabbed panel ──────────
   Kept as a side-by-side fallback (Layout ▸ Classic) until Option 2 is signed
   off. These overrides are more specific than the body.compose-route rules
   above, so they win and restore the pre-rail behavior verbatim. */
html[data-compose-layout="classic"] .compose-rail { display: none; }
html[data-compose-layout="classic"] body.compose-route #main-content { padding-right: 0; }
html[data-compose-layout="classic"] body.compose-route .unified-sidebar { right: 0; width: var(--sidebar-width, 420px); min-width: 360px; max-width: 80vw; }
html[data-compose-layout="classic"] body.compose-route .unified-sidebar.d-none { transform: translateX(100%); }
html[data-compose-layout="classic"] body.compose-route .builder-workspace { max-width: 95%; }
html[data-compose-layout="classic"] body.compose-route.sidebar-open .builder-workspace {
  max-width: min(95%, calc(100vw - 60px - var(--sidebar-width, 360px) - 3rem));
  margin-right: auto;
}
html[data-compose-layout="classic"] body.compose-route .unified-sidebar-header .sidebar-tabs { display: flex; }
html[data-compose-layout="classic"] body.compose-route .unified-sidebar-title { display: none; }
html[data-compose-layout="classic"] body.compose-route #btn-sidebar-toggle { display: inline-flex; }

/* ── iOS zoom guard: inputs/selects/textareas ≥16px on phones so focus
   doesn't trigger an auto-zoom that wrecks the layout. ─────────────────── */
@media (max-width: 576px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], input[type="date"],
  input[type="password"], textarea, select {
    font-size: 16px !important;
  }
  /* Comfortable tap height for primary controls on phones */
  .btn:not(.btn-xs):not(.btn-link) { min-height: 40px; }
}

/* Compose: a reachable menu button in the always-visible builder topbar
   (the global header — and its hamburger — auto-hides while writing). */
#composeNavBtn { display: none; }
@media (max-width: 991px) { #composeNavBtn { display: inline-flex; align-items: center; } }

/* ── Calendar on phones ──────────────────────────────────────────────────
   The interactive view pairs FullCalendar with a 260px drag-drop sidebar.
   Drag-drop doesn't work on touch and the sidebar squeezes the grid to
   nothing, so hide it on phones and give the calendar full width. Stack
   FullCalendar's header toolbar so prev/next/title/view don't overflow. */
@media (max-width: 767.98px) {
  #recentContentSidebar, #btnShowSidebar { display: none !important; }
  #interactiveView .d-flex.gap-3 { gap: 0 !important; }
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column; align-items: stretch; gap: .5rem; margin-bottom: 1rem;
  }
  .fc .fc-toolbar-title { font-size: 1.1rem; text-align: center; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  /* Comfortable day cells + tappable events */
  .fc .fc-daygrid-day-frame { min-height: 0; }
  .fc .fc-button { min-height: 40px; }
}

/* Grouped directory: jump-bar chips + anchor offset so tapping a group lands
   below the fixed header, and the current group header stays visible. */
.dir-anchor { position: relative; visibility: hidden; height: 0; scroll-margin-top: 72px; }
/* ── Inline "Ask AI" on selection (compose Option 2) ─────────────────────── */
.inline-ai-bar { position: absolute; z-index: 1080; }
.inline-ai-trigger { background: var(--color-primary,#1F3864); color:#fff; border:none; border-radius:99px; padding:5px 12px; font-size:.8rem; font-weight:600; box-shadow:0 3px 10px rgba(0,0,0,.28); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.inline-ai-trigger:hover { filter:brightness(1.1); }
.inline-ai-panel { position:absolute; z-index:1081; width:300px; max-width:92vw; background:var(--bg-primary,#fff); border:1px solid var(--border-color,#dee2e6); border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.2); padding:8px; }
.inline-ai-acts { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.inline-ai-act { font-size:.75rem; padding:3px 8px; border:1px solid var(--border-color,#dee2e6); background:var(--bg-secondary,#f6f7f9); border-radius:6px; cursor:pointer; color:var(--text-primary,#212529); }
.inline-ai-act:hover { background:var(--color-primary,#1F3864); color:#fff; border-color:var(--color-primary,#1F3864); }
.inline-ai-promptrow { display:flex; gap:4px; }
.inline-ai-prompt { flex:1; font-size:.8rem; padding:4px 8px; border:1px solid var(--border-color,#dee2e6); border-radius:6px; background:var(--bg-primary,#fff); color:var(--text-primary,#212529); }
.inline-ai-go { border:none; background:var(--color-primary,#1F3864); color:#fff; border-radius:6px; width:32px; cursor:pointer; }
.inline-ai-body { margin-top:6px; }
.inline-ai-loading { font-size:.8rem; color:var(--text-secondary,#6c757d); padding:6px 2px; }
.inline-ai-err { font-size:.8rem; color:#c0392b; padding:6px 2px; }
.inline-ai-result { font-size:.85rem; line-height:1.5; background:var(--bg-secondary,#f6f7f9); border-radius:6px; padding:8px 10px; max-height:240px; overflow:auto; white-space:pre-wrap; color:var(--text-primary,#212529); }
.inline-ai-resultacts { display:flex; gap:6px; margin-top:7px; }
.inline-ai-resultacts button { font-size:.78rem; padding:4px 10px; border-radius:6px; cursor:pointer; border:1px solid var(--border-color,#dee2e6); background:var(--bg-primary,#fff); color:var(--text-primary,#212529); }
.inline-ai-replace { background:var(--color-primary,#1F3864)!important; color:#fff!important; border-color:var(--color-primary,#1F3864)!important; }
.inline-ai-discard { color:var(--text-secondary,#6c757d); }
html[data-mode="dark"] .inline-ai-panel, html[data-mode="dark"] .inline-ai-result, html[data-mode="dark"] .inline-ai-act { background:var(--bg-secondary,#26263a); }

/* ── "/" Slash menu — insert element at cursor (compose Option 2) ─────────── */
.slash-menu { position:absolute; z-index:1082; width:230px; max-width:90vw; background:var(--bg-primary,#fff); border:1px solid var(--border-color,#dee2e6); border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.2); padding:5px; max-height:300px; overflow-y:auto; }
.slash-menu-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary,#6c757d); padding:3px 8px 5px; font-weight:600; }
.slash-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; border-radius:6px; padding:6px 8px; font-size:.85rem; color:var(--text-primary,#212529); cursor:pointer; }
.slash-item:hover, .slash-item.active { background:var(--bg-secondary,#f6f7f9); }
.slash-item .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
html[data-mode="dark"] .slash-menu { background:var(--bg-secondary,#26263a); }
html[data-mode="dark"] .slash-item:hover, html[data-mode="dark"] .slash-item.active { background:rgba(255,255,255,.07); }

/* ── Cmd/Ctrl+K command palette (compose Option 2) ───────────────────────── */
.cmdk-overlay { position:fixed; inset:0; z-index:1085; background:rgba(0,0,0,.4); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.cmdk-panel { width:560px; max-width:92vw; background:var(--bg-primary,#fff); border:1px solid var(--border-color,#dee2e6); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.3); overflow:hidden; }
.cmdk-inputrow { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border-color,#dee2e6); color:var(--text-secondary,#6c757d); }
.cmdk-input { flex:1; border:none; outline:none; background:transparent; font-size:1rem; color:var(--text-primary,#212529); }
.cmdk-list { max-height:46vh; overflow-y:auto; padding:6px; }
.cmdk-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:transparent; border-radius:8px; padding:9px 10px; font-size:.9rem; color:var(--text-primary,#212529); cursor:pointer; }
.cmdk-item .cmdk-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-item .cmdk-group { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary,#6c757d); flex:0 0 auto; }
.cmdk-item .bi { color:var(--color-primary,#1F3864); flex:0 0 auto; }
.cmdk-item:hover, .cmdk-item.active { background:var(--bg-secondary,#f6f7f9); }
.cmdk-empty { padding:18px 12px; text-align:center; color:var(--text-secondary,#6c757d); font-size:.88rem; }
html[data-mode="dark"] .cmdk-panel { background:var(--bg-secondary,#26263a); }
html[data-mode="dark"] .cmdk-item:hover, html[data-mode="dark"] .cmdk-item.active { background:rgba(255,255,255,.07); }

.dir-fam-card { transition: box-shadow .15s ease, transform .15s ease; }
.dir-fam-card:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.1) !important; transform: translateY(-1px); }
.dir-group-h { position: sticky; top: 0; z-index: 4; background: var(--bg-primary, #fff); padding: .4rem 0; }
html[data-mode="dark"] .dir-group-h { background: var(--bg-primary, #1e1e2f); }

/* ── Directory headline donuts (Active / Inactive / Regular Attenders) ────
   Conic-gradient rings; JS drives --p (0→target) for a fill + count-up.
   Custom props inherit by default, so --p set on .dir-donut reaches ::before. */
.dir-donut-card { transition: transform .15s ease, box-shadow .15s ease; }
.dir-donut-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12) !important; }

/* Product-home tiles — reuse the suite home's icon-chip card aesthetic so the
   per-product homes (People, etc.) match the suite dashboard. Soft-colored
   rounded chip behind the icon, on a bordered 14px-radius card. Color via a
   .c-<token> modifier that sets --tsoft (chip bg) + --tbd (icon/accent). */
/* Aligned to the shared card tokens (design system) — same look, one source. */
.phome-tile {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e6e8f0) !important;
  border-radius: var(--card-radius, 14px);
  box-shadow: var(--card-shadow, 0 1px 2px rgba(20,30,60,.05));
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.phome-tile:hover {
  border-color: var(--tbd, var(--area, #1F3864)) !important;
  box-shadow: var(--card-shadow-hover, 0 4px 12px rgba(20,30,60,.10));
  transform: translateY(-1px);
}
.phome-tile .ptchip {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--tsoft, #e7edf9); color: var(--tbd, #1F3864);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; margin-bottom: 8px;
}
.phome-tile .ptt { font-weight: 700; font-size: .96rem; color: var(--text-primary, #23262d); line-height: 1.2; }
.phome-tile .pts { font-size: .82rem; color: var(--text-muted, #6b7280); margin-top: 2px; }
.phome-tile.c-primary   { --tsoft:#e7edf9; --tbd:#1F3864; }
.phome-tile.c-info      { --tsoft:#e0f1f5; --tbd:#0c6478; }
.phome-tile.c-success   { --tsoft:#e3f4ea; --tbd:#1a7a44; }
.phome-tile.c-danger    { --tsoft:#fae4e6; --tbd:#b02a37; }
.phome-tile.c-warning   { --tsoft:#fbf2da; --tbd:#8a6d0b; }
.phome-tile.c-secondary { --tsoft:#eceef2; --tbd:#54607a; }

/* Product-home section headers — bold, dark, with a hairline divider rule
   under the label so each group is clearly separated (replaces the faint
   muted-gray label). Text uses --text-primary so it stays readable in dark
   themes; the rule uses the theme border color. */
.phome-section {
  font-weight: 800; font-size: .92rem; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-primary, #23262d);
  border-bottom: 2px solid var(--border-color, #dfe2ea);
  padding-bottom: 6px;
  margin: 22px 0 14px;
}
.phome-section:first-of-type { margin-top: 6px; }
.phome-section i { margin-right: 8px; font-size: 1.05em; vertical-align: -1px; color: var(--area, var(--phs-accent, #1F3864)); }
.dir-donut {
  --p: 0; --size: 84px; --thick: 11px; --c: var(--bs-primary); --track: #e9ecef;
  position: relative; width: var(--size); height: var(--size); flex: 0 0 auto;
}
.dir-donut::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thick)), #000 calc(100% - var(--thick)));
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thick)), #000 calc(100% - var(--thick)));
}
.dir-donut-hole { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dir-donut-num { font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--text-primary, #212529); }
.dir-donut-label { font-weight: 600; }
.dir-donut-pct { color: var(--text-secondary, #6c757d); font-size: .8rem; }
.dir-donut-bd { margin-top: .15rem; }
.dir-donut-active    .dir-donut { --c: #10b981; }
.dir-donut-inactive  .dir-donut { --c: #f59e0b; }
.dir-donut-attenders .dir-donut { --c: #3b82f6; }
html[data-mode="dark"] .dir-donut { --track: rgba(255,255,255,.13); }

/* ════════════════════════════════════════════════════════════════
   Church Calendar redesign — lenses, layer chips, event tints,
   segmented FullCalendar view switcher (2026-06)
   ════════════════════════════════════════════════════════════════ */

/* Lens row */
.cal-lens-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-bottom: .75rem;
}
.cal-lens { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.cal-lens-lbl { font-size: .78rem; font-weight: 600; color: var(--text-secondary, #6c757d); text-transform: uppercase; letter-spacing: .03em; margin-right: .15rem; }
.cal-lens-pill {
  border: 1px solid var(--bs-border-color, #dee2e6); background: var(--bs-body-bg, #fff);
  color: var(--text-primary, #343a40); border-radius: 999px;
  padding: .25rem .8rem; font-size: .82rem; font-weight: 500; line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.cal-lens-pill:hover:not(:disabled) { border-color: var(--bs-primary, #0d6efd); }
.cal-lens-pill.on {
  background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd);
  color: #fff; font-weight: 600;
}
.cal-lens-pill.cal-lens-soon { opacity: .5; cursor: not-allowed; }

/* Layer chips */
.cal-chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-chip {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--bs-border-color, #dee2e6); background: var(--bs-body-bg, #fff);
  border-radius: 999px; padding: .22rem .7rem; font-size: .8rem; font-weight: 500;
  color: var(--text-primary, #343a40); user-select: none; margin-bottom: 0;
  transition: opacity .12s, border-color .12s;
}
.cal-chip:hover { border-color: var(--bs-primary, #0d6efd); }
.cal-chip.off { opacity: .45; }
.cal-chip.off .dot { background: #adb5bd !important; }
.cal-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dot-plan  { background: #2563eb; }
.dot-event { background: #7c3aed; }
.dot-serve { background: #0f766e; }
.dot-meet  { background: #b45309; }

/* People lens hides pastor-only chrome */
body.cal-lens-people .cal-pastor-only,
body.cal-lens-people #recentContentSidebar,
body.cal-lens-people #btnShowSidebar { display: none !important; }

/* Event tints — soft background + 3px colored left border */
.fc-event.si-ev, .fc-event.si-ev .fc-event-main {
  color: var(--text-primary, #1f2937);
}
.fc-event.si-ev {
  border: 0; border-left: 3px solid #6c757d; border-radius: 4px;
  background: #eef0f2; font-size: .78rem; padding: 1px 4px;
}
.fc-event.si-plan     { border-left-color: #2563eb; background: #e8effd; }
.fc-event.si-st-ready,
.fc-event.si-st-preached { border-left-color: #198754; background: #e4f6ec; }
.fc-event.si-event    { border-left-color: #7c3aed; background: #f1eafc; }
.fc-event.si-serve    { border-left-color: #0f766e; background: #e2f3f1; }
.fc-event.si-meet     { border-left-color: #b45309; background: #fbf0dd; }
.fc-event.si-ev:hover { filter: brightness(.96); }
/* List view keeps the dot color */
.fc-list-event.si-plan .fc-list-event-dot  { border-color: #2563eb; }
.fc-list-event.si-st-ready .fc-list-event-dot,
.fc-list-event.si-st-preached .fc-list-event-dot { border-color: #198754; }
.fc-list-event.si-event .fc-list-event-dot { border-color: #7c3aed; }
.fc-list-event.si-serve .fc-list-event-dot { border-color: #0f766e; }
.fc-list-event.si-meet .fc-list-event-dot  { border-color: #b45309; }

html[data-mode="dark"] .fc-event.si-ev { background: rgba(108,117,125,.22); color: var(--text-primary, #e9ecef); }
html[data-mode="dark"] .fc-event.si-plan     { background: rgba(37,99,235,.22); }
html[data-mode="dark"] .fc-event.si-st-ready,
html[data-mode="dark"] .fc-event.si-st-preached { background: rgba(25,135,84,.22); }
html[data-mode="dark"] .fc-event.si-event    { background: rgba(124,58,237,.24); }
html[data-mode="dark"] .fc-event.si-serve    { background: rgba(15,118,110,.26); }
html[data-mode="dark"] .fc-event.si-meet     { background: rgba(180,83,9,.26); }

/* FullCalendar toolbar → segmented control look */
.fc .fc-button {
  background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6);
  color: var(--text-primary, #343a40); font-size: .82rem; font-weight: 500;
  padding: .3rem .75rem; box-shadow: none !important; text-transform: none;
}
.fc .fc-button:hover { background: var(--bs-tertiary-bg, #f1f3f5); color: var(--text-primary, #212529); }
.fc .fc-button:disabled { background: var(--bs-body-bg, #fff); color: var(--text-secondary, #6c757d); opacity: .6; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); color: #fff;
}
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: .75rem; row-gap: .5rem; flex-wrap: wrap; }

/* Quarter (multiMonth) polish */
.fc .fc-multimonth { border-radius: 6px; }
.fc .fc-multimonth-title { font-size: .9rem; font-weight: 600; padding: .5rem 0; }

@media (max-width: 575px) {
  .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  .fc .fc-button { padding: .28rem .55rem; font-size: .78rem; }
}