/* ═══════════════════════════════════════════════════════════
   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;

  --text-primary: #1A1A2E;
  --text-secondary: #555770;
  --text-muted: #6E6E80;  /* WCAG AA 4.7:1 on white (was #8E8EA0 at 3.2:1) */
  --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);
}


/* ─── 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 */
html[data-mode="dark"][data-theme="grace"]  { --color-primary: #5A8FD4; --color-primary-light: #7BAAE0; } /* 4.7:1 on #1A1D27 */
html[data-mode="dark"][data-theme="ocean"]  { --color-primary: #3399EE; --color-primary-light: #66B3FF; }
html[data-mode="dark"][data-theme="emerald"]{ --color-primary: #34D399; --color-primary-light: #6EE7B7; }
html[data-mode="dark"][data-theme="warm"]   { --color-primary: #F59E0B; --color-primary-light: #FBBF24; }


/* ─── 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: 36px;
  height: 36px;
  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);
}


/* ─── 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;
  margin-bottom: var(--space-3);
}
.dash-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.dash-section-title i {
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.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(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}
a.dash-metric:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
  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);
}
.badge-status.status-pending   { background: #6C757D20; color: #6C757D; }
.badge-status.status-extracted { background: #19875420; color: #198754; }
.badge-status.status-parsed    { background: #0D6EFD20; color: #0D6EFD; }
.badge-status.status-complete  { background: #05966920; color: #059669; }
.badge-status.status-error     { background: #DC354520; color: #DC3545; }

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: #6C757D; }
.prep-status-in_progress { background: #0D6EFD18; color: #0D6EFD; }
.prep-status-ready       { background: #19875418; color: #198754; }
.prep-status-preached    { background: #D4A84B18; color: #B8922E; }

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; }
.badge-doctype.doctype-lesson       { background: #0dcaf0; }
.badge-doctype.doctype-handout      { background: #fd7e14; }
.badge-doctype.doctype-listener_notes { background: #20c997; }
.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. 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);
  position: relative;
  z-index: var(--z-topbar);
  overflow: visible;
  max-width: 100%;
}
.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 */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-sidebar);
    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 */
  .btn {
    min-height: 40px;
  }

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

/* ── 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;
  }
}