/* Renewed Love — Theme System */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=Lato:wght@300;400;700;900&display=swap');

/* ========== Classic Theme (default — Warm & Earthy) ========== */
:root,
[data-theme="classic"] {
  /* Bootstrap overrides */
  --bs-body-bg: #F5F0E8;
  --bs-body-color: #3A3330;
  --bs-primary: #6B4C3B;
  --bs-primary-rgb: 107, 76, 59;
  --bs-success: #7D8B6A;
  --bs-success-rgb: 125, 139, 106;
  --bs-warning: #C4A265;
  --bs-warning-rgb: 196, 162, 101;
  --bs-danger: #A65D57;
  --bs-danger-rgb: 166, 93, 87;
  --bs-light: #FAF7F2;
  --bs-dark: #2C2420;

  /* Custom theme tokens */
  --sf-cream: #F5F0E8;
  --sf-parchment: #EDE7DB;
  --sf-brown: #6B4C3B;
  --sf-brown-light: #8B6B58;
  --sf-brown-dark: #4A3328;
  --sf-sage: #7D8B6A;
  --sf-sage-light: #9DAB8A;
  --sf-gold: #C4A265;
  --sf-gold-light: #D4BA85;
  --sf-text: #3A3330;
  --sf-text-muted: #7A7068;
  --sf-border: #D8D0C4;
  --sf-shadow: rgba(74, 51, 40, 0.08);
  --sf-shadow-hover: rgba(74, 51, 40, 0.15);
  --sf-focus-rgb: 107, 76, 59;
  --sf-form-bg: #fff;
  --sf-danger: #A65D57;

  /* Typography */
  --sf-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========== The River Theme (Blue & Teal) ========== */
[data-theme="river"] {
  --bs-body-bg: #EDF4F8;
  --bs-body-color: #1A2A33;
  --bs-primary: #0093E9;
  --bs-primary-rgb: 0, 147, 233;
  --bs-success: #50B8A8;
  --bs-success-rgb: 80, 184, 168;
  --bs-warning: #E8A838;
  --bs-warning-rgb: 232, 168, 56;
  --bs-danger: #D05050;
  --bs-danger-rgb: 208, 80, 80;
  --bs-light: #F5F9FC;
  --bs-dark: #16222A;

  --sf-cream: #EDF4F8;
  --sf-parchment: #DCE8EE;
  --sf-brown: #0093E9;
  --sf-brown-light: #3AADE9;
  --sf-brown-dark: #006EAF;
  --sf-sage: #50B8A8;
  --sf-sage-light: #80D0C7;
  --sf-gold: #E8A838;
  --sf-gold-light: #F0C060;
  --sf-text: #1A2A33;
  --sf-text-muted: #5A7080;
  --sf-border: #C0D4DE;
  --sf-shadow: rgba(0, 70, 120, 0.08);
  --sf-shadow-hover: rgba(0, 70, 120, 0.15);
  --sf-focus-rgb: 0, 147, 233;
  --sf-form-bg: #fff;
  --sf-danger: #D05050;

  --sf-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sf-font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========== Dark Theme ========== */
[data-theme="dark"] {
  --bs-body-bg: #1C1917;
  --bs-body-color: #E7E0D6;
  --bs-primary: #C4A265;
  --bs-primary-rgb: 196, 162, 101;
  --bs-success: #9DAB8A;
  --bs-success-rgb: 157, 171, 138;
  --bs-warning: #D4BA85;
  --bs-warning-rgb: 212, 186, 133;
  --bs-danger: #E07070;
  --bs-danger-rgb: 224, 112, 112;
  --bs-light: #292524;
  --bs-dark: #E7E0D6;

  --sf-cream: #1C1917;
  --sf-parchment: #292524;
  --sf-brown: #C4A265;
  --sf-brown-light: #D4BA85;
  --sf-brown-dark: #E0CC9A;
  --sf-sage: #9DAB8A;
  --sf-sage-light: #B5C3A2;
  --sf-gold: #D4BA85;
  --sf-gold-light: #E0CC9A;
  --sf-text: #E7E0D6;
  --sf-text-muted: #A09888;
  --sf-border: #44403C;
  --sf-shadow: rgba(0, 0, 0, 0.25);
  --sf-shadow-hover: rgba(0, 0, 0, 0.40);
  --sf-focus-rgb: 196, 162, 101;
  --sf-form-bg: #292524;
  --sf-danger: #E07070;

  --sf-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--sf-font-sans);
  background-color: var(--sf-cream);
  color: var(--sf-text);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Typography */
.font-serif {
  font-family: var(--sf-font-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font-serif);
  color: var(--sf-brown-dark);
  font-weight: 600;
}

/* Scripture display */
.scripture-text {
  font-family: var(--sf-font-serif);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--sf-text);
  letter-spacing: 0.01em;
}

.scripture-reference {
  font-family: var(--sf-font-serif);
  font-style: italic;
  color: var(--sf-text-muted);
  font-size: 0.95rem;
}

/* Cards */
.card {
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--sf-shadow);
  background: var(--bs-light);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 16px var(--sf-shadow-hover);
}

.card-body {
  padding: 1.5rem;
}

/* Buttons — override Bootstrap 5.3 component-level variables */
.btn-primary {
  --bs-btn-bg: var(--sf-brown);
  --bs-btn-border-color: var(--sf-brown);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--sf-brown-dark);
  --bs-btn-hover-border-color: var(--sf-brown-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sf-brown-dark);
  --bs-btn-active-border-color: var(--sf-brown-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--sf-focus-rgb);
  --bs-btn-disabled-bg: var(--sf-brown-light);
  --bs-btn-disabled-border-color: var(--sf-brown-light);
  font-weight: 500;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 2px 8px var(--sf-shadow-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--sf-brown);
  --bs-btn-border-color: var(--sf-brown);
  --bs-btn-hover-bg: var(--sf-brown);
  --bs-btn-hover-border-color: var(--sf-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sf-brown-dark);
  --bs-btn-active-border-color: var(--sf-brown-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--sf-focus-rgb);
  border-radius: 8px;
  font-weight: 500;
}

.btn-outline-secondary {
  --bs-btn-color: var(--sf-text-muted);
  --bs-btn-border-color: var(--sf-border);
  --bs-btn-hover-bg: var(--sf-parchment);
  --bs-btn-hover-border-color: var(--sf-border);
  --bs-btn-hover-color: var(--sf-text);
  --bs-btn-active-bg: var(--sf-parchment);
  --bs-btn-active-border-color: var(--sf-brown-light);
  --bs-btn-active-color: var(--sf-text);
  --bs-btn-focus-shadow-rgb: var(--sf-focus-rgb);
}

/* Focus ring override — prevent blue glow */
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--sf-focus-rgb), 0.25) !important;
}

/* Links and text-primary */
.text-primary {
  color: var(--sf-brown) !important;
}

a {
  color: var(--sf-brown);
}

a:hover {
  color: var(--sf-brown-dark);
}

/* Bootstrap Icons — inherit earthy colors, not blue */
.bi {
  color: inherit;
}

.btn-success {
  --bs-btn-bg: var(--sf-sage);
  --bs-btn-border-color: var(--sf-sage);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #6B7A5A;
  --bs-btn-hover-border-color: #6B7A5A;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #5B6A4A;
  --bs-btn-active-border-color: #5B6A4A;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

/* Border color overrides */
.border-primary {
  border-color: var(--sf-brown) !important;
}

.border-success {
  border-color: var(--sf-sage) !important;
}

.border-warning {
  border-color: var(--sf-gold) !important;
}

.border-danger {
  border-color: var(--sf-danger) !important;
}

/* Form controls */
.form-control, .form-select {
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background-color: var(--sf-form-bg);
  color: var(--sf-text);
  padding: 0.6rem 0.85rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--sf-brown-light);
  box-shadow: 0 0 0 3px rgba(var(--sf-focus-rgb), 0.15);
}

textarea.form-control {
  font-family: var(--sf-font-serif);
  line-height: 1.7;
}

/* Progress bars */
.progress {
  height: 8px;
  border-radius: 4px;
  background-color: var(--sf-parchment);
}

.progress-bar {
  background-color: var(--sf-sage);
  border-radius: 4px;
}

/* Badges */
.badge-gold {
  background-color: var(--sf-gold);
  color: var(--sf-brown-dark);
  font-weight: 600;
}

.badge-sage {
  background-color: var(--sf-sage);
  color: #fff;
}

/* Discipline calendar cell styles */
.cal-full {
  background-color: var(--sf-sage) !important;
  color: #fff !important;
}

.cal-partial {
  background-color: var(--sf-sage-light) !important;
  color: #fff !important;
  opacity: 0.6;
}

.cal-missed {
  background-color: var(--sf-parchment) !important;
  color: var(--sf-text-muted) !important;
}

.cal-today {
  border: 2px solid var(--sf-brown) !important;
  font-weight: 700;
}

/* Dashboard header */
.dash-tagline {
  font-size: 0.85rem;
  color: var(--sf-text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

.dash-divider {
  width: 36px;
  height: 1.5px;
  background: var(--sf-gold);
  margin: 0.75rem auto;
  opacity: 0.45;
}

.dash-greeting {
  font-style: italic;
  color: var(--sf-brown-light);
  font-size: 1.1rem;
  font-weight: 400;
}

/* Streak counter */
.streak-number {
  font-family: var(--sf-font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--sf-brown);
  line-height: 1;
}

.streak-label {
  font-size: 0.85rem;
  color: var(--sf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Session type indicators */
.session-morning { color: var(--sf-gold); }
.session-midday { color: var(--sf-sage); }
.session-evening { color: var(--sf-brown); }

/* Memorization rounds */
.round-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
}

.round-active {
  background-color: var(--sf-brown);
  color: #fff;
}

.round-complete {
  background-color: var(--sf-sage);
  color: #fff;
}

.round-locked {
  background-color: var(--sf-parchment);
  color: var(--sf-text-muted);
}

/* Diff highlighting */
.diff-correct { color: var(--sf-sage); }
.diff-missing { color: var(--sf-danger); text-decoration: underline; opacity: 0.7; }
.diff-extra { color: var(--sf-gold); background: rgba(var(--bs-warning-rgb), 0.15); border-radius: 2px; padding: 0 2px; }
.diff-wrong { color: var(--sf-danger); background: rgba(var(--bs-danger-rgb), 0.12); border-radius: 2px; padding: 0 2px; }

/* ---- New memorization technique styles ---- */

/* Blank words (every-other-word & fading-words) */
.blank-word,
.faded-word {
  display: inline;
  color: var(--sf-text-muted);
  opacity: 0.4;
  letter-spacing: 0.1em;
  font-family: monospace;
  border-bottom: 2px dashed var(--sf-brown-light);
  padding-bottom: 1px;
}

.faded-word {
  opacity: 0.3;
  border-bottom-style: dotted;
}

/* Scrambled word chips */
.scramble-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.scramble-chip {
  display: inline-block;
  background: var(--sf-parchment);
  border: 1px solid var(--sf-brown-light);
  border-radius: 0.375rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.9rem;
  color: var(--sf-text);
  cursor: default;
  transition: opacity 0.2s;
}

/* Checklist icons */
.check-done {
  color: var(--sf-sage);
}

.check-pending {
  color: var(--sf-text-muted);
  opacity: 0.4;
}

/* Achievement card */
.achievement-card {
  border-left: 4px solid var(--sf-gold);
}

.achievement-card.earned {
  border-left-color: var(--sf-sage);
}

/* Verse timeline */
.verse-timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 1.5rem;
}

.verse-timeline-item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background-color: var(--sf-border);
}

.verse-timeline-item:last-child::before {
  display: none;
}

.verse-timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.verse-mastered .verse-timeline-dot {
  background-color: var(--sf-sage);
  color: #fff;
}

.verse-active .verse-timeline-dot {
  background-color: var(--sf-brown);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--sf-focus-rgb), 0.2);
}

.verse-locked .verse-timeline-dot {
  background-color: var(--sf-parchment);
  color: var(--sf-text-muted);
  border: 2px solid var(--sf-border);
}

/* Nav / App bar */
.app-nav {
  background-color: var(--bs-light);
  border-bottom: 1px solid var(--sf-border);
  padding: 0.75rem 0;
}

.app-nav .nav-brand {
  font-family: var(--sf-font-serif);
  font-weight: 700;
  color: var(--sf-brown-dark);
  font-size: 1.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-brand-logo {
  height: 36px;
  width: auto;
}

/* App logo (login / signup screens) */
.app-logo {
  width: 160px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Bottom nav (mobile) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bs-light);
  border-top: 1px solid var(--sf-border);
  padding: 0.5rem 0;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
  z-index: 1030;
  display: flex;
  justify-content: space-around;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--sf-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s;
}

.bottom-nav a.active {
  color: var(--sf-brown-dark);
  font-weight: 600;
}

.bottom-nav a.active i {
  position: relative;
}

.bottom-nav a.active i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.8em;
  height: 1.8em;
  border-radius: 8px;
  background: rgba(var(--sf-focus-rgb), 0.15);
  z-index: -1;
}

.bottom-nav a svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}

.bottom-nav a i {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

.bottom-nav a.nav-home {
  margin-top: -6px;
}

.bottom-nav a.nav-home i {
  font-size: 1.75rem;
}


/* App container */
#app {
  padding-top: 1rem;
  padding-bottom: 1rem;
  max-width: 100%;
}

@media (max-width: 767px) {
  #app {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 34px));
  }
}

/* Utility */
.text-muted {
  color: var(--sf-text-muted) !important;
}

.bg-parchment {
  background-color: var(--sf-parchment);
}

/* Loading spinner */
.spinner-warm {
  color: var(--sf-brown);
}

/* Toast / notification styling */
.toast-warm {
  background-color: var(--sf-brown-dark);
  color: #FAF7F2;
  border-radius: 10px;
}

/* Responsive */
@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }

  #app {
    padding-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .desktop-nav {
    display: none;
  }
}

/* Typing Tutor */
.typing-tutor {
  position: relative;
}

.typing-tutor-display {
  font-family: var(--sf-font-serif);
  font-size: 1rem;
  line-height: 1.7;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-form-bg);
  min-height: 120px;
  white-space: pre-wrap;
  word-wrap: break-word;
  cursor: text;
}

.typing-tutor-display.focused {
  border-color: var(--sf-brown-light);
  box-shadow: 0 0 0 3px rgba(var(--sf-focus-rgb), 0.15);
}

.typing-tutor-display.is-invalid {
  border-color: var(--sf-danger);
}

.typing-tutor-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: text;
  font-size: 16px; /* prevent iOS zoom */
  padding: 0;
  border: none;
  resize: none;
}

.tt-correct {
  color: var(--sf-text);
}

.tt-wrong {
  color: var(--sf-danger);
  background: rgba(var(--bs-danger-rgb), 0.12);
  border-radius: 2px;
  padding: 0 1px;
}

.tt-ghost {
  color: #C8C0B4;
}

.tt-cursor::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--sf-brown);
  vertical-align: text-bottom;
  animation: tt-blink 1s step-end infinite;
  margin: 0 -1px;
}

@keyframes tt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tt-extra {
  color: var(--sf-danger);
  text-decoration: underline wavy;
  opacity: 0.7;
}

/* Verse Picker (admin) */
.verse-picker {
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-parchment);
  padding: 0.75rem;
}

.vp-selection-bar .badge {
  cursor: pointer;
}

.vp-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
}

.vp-book-btn {
  border: 1px solid var(--sf-border);
  background: var(--sf-form-bg);
  border-radius: 6px;
  padding: 4px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sf-text);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.vp-book-btn:hover {
  background: var(--sf-brown);
  color: #fff;
  border-color: var(--sf-brown);
}

.vp-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}

.vp-chapter-btn {
  border: 1px solid var(--sf-border);
  background: var(--sf-form-bg);
  border-radius: 6px;
  padding: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sf-text);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.vp-chapter-btn:hover {
  background: var(--sf-brown);
  color: #fff;
  border-color: var(--sf-brown);
}

/* ========== Dark theme-specific overrides ========== */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  border-color: var(--sf-border);
  background-color: var(--sf-form-bg);
  color: var(--sf-text);
}

[data-theme="dark"] .form-check-input {
  background-color: var(--sf-parchment);
  border-color: var(--sf-border);
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--sf-brown);
  border-color: var(--sf-brown);
}

[data-theme="dark"] .tt-ghost {
  color: #5A5550;
}

[data-theme="dark"] .badge-gold {
  color: #1C1917;
}

[data-theme="dark"] body {
  background-image: none;
}

[data-theme="dark"] .cal-cell {
  border: 1px solid var(--sf-border);
}

[data-theme="dark"] .theme-swatch-label {
  color: var(--sf-text);
}

/* ========== Theme Chooser Swatches ========== */
.theme-chooser {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.theme-swatch {
  flex: 1;
  min-width: 80px;
  border: 2px solid var(--sf-border);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--sf-text);
}

.theme-swatch:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--sf-shadow-hover);
}

.theme-swatch.active {
  border-color: var(--sf-brown);
  box-shadow: 0 0 0 3px rgba(var(--sf-focus-rgb), 0.25);
}

.theme-swatch-preview {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.theme-swatch-preview span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}

.theme-swatch-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sf-text) !important;
}

/* Print / share styles */
@media print {
  .bottom-nav,
  .app-nav,
  .btn {
    display: none !important;
  }
}