/* Ripple Enhanced Styles (Option 2: Higher Contrast + Icon Accents)
 * Works alongside existing styles.css
 * Author: Gary Roos © 2025
 */

/* ===== ANIMATION PRESETS ===== */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulseBorder {
  0%   { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

/* ===== WHY THIS MATTERS ===== */
.why-matters {
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
  border: 2px solid #667eea;
  border-left-width: 6px;
  padding: 20px 20px 18px 20px;
  margin: 22px 0;
  border-radius: 14px;
  position: relative;
  animation: floatIn 280ms ease-out;
}

.why-matters::before {
  content: "💡";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #667eea;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: pulseBorder 2.4s ease-out infinite;
}

.why-matters h4 {
  color: #4c5bd8;
  margin: 0 0 10px 0;
  font-size: 1.05em;
  letter-spacing: 0.2px;
}

.why-matters p {
  margin: 8px 0;
  line-height: 1.6;
  color: #2c3e50;
}

.why-matters p strong {
  color: #1f2a44;
  display: block;
  margin-top: 12px;
}

/* Dark mode */
body.dark-mode .why-matters {
  background: linear-gradient(135deg, rgba(123,148,255,0.10), rgba(118,75,162,0.12));
  border-color: #7b94ff;
}
body.dark-mode .why-matters::before { background: #7b94ff; }
body.dark-mode .why-matters h4 { color: #9fb0ff; }
body.dark-mode .why-matters p { color: #e0e0e0; }
body.dark-mode .why-matters p strong { color: #fff; }

/* ===== COMMON PITFALLS ===== */
.common-pitfalls {
  background: linear-gradient(135deg, rgba(255, 243, 205, 0.55), rgba(255, 211, 88, 0.08));
  border: 2px solid #f39c12;
  border-left-width: 6px;
  padding: 20px;
  margin: 22px 0;
  border-radius: 14px;
  position: relative;
  animation: floatIn 300ms ease-out;
}

.common-pitfalls::before {
  content: "⚠️";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f39c12;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: pulseBorder 2.4s ease-out infinite;
}

.common-pitfalls h4 {
  color: #d3840d;
  margin: 0 0 12px 0;
  font-size: 1.05em;
}

.pitfall-list {
  list-style: none;
  padding: 0;
}

.pitfall-list li {
  margin: 14px 0;
  padding-left: 36px;
  position: relative;
  background: rgba(255,255,255,0.65);
  border-radius: 10px;
  border: 1px dashed rgba(243, 156, 18, 0.45);
  padding: 12px 12px 12px 40px;
}

.pitfall-wrong, .pitfall-right {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 1.1em;
}

.pitfall-wrong { color: #e74c3c; }
.pitfall-right { color: #27ae60; }

.pitfall-list li strong {
  display: block;
  margin-bottom: 6px;
  color: #2c3e50;
}

.pitfall-list li p {
  margin: 4px 0 0 0;
  color: #5e6b77;
  font-size: 0.95em;
}

/* Dark mode */
body.dark-mode .common-pitfalls {
  background: linear-gradient(135deg, rgba(255, 200, 64, 0.18), rgba(255, 170, 0, 0.10));
  border-color: #ffb84d;
}
body.dark-mode .common-pitfalls::before { background: #ffb84d; }
body.dark-mode .common-pitfalls h4 { color: #ffd38a; }
body.dark-mode .pitfall-list li {
  background: rgba(26, 26, 46, 0.6);
  border-color: rgba(255, 184, 77, 0.45);
}
body.dark-mode .pitfall-list li strong { color: #fff; }
body.dark-mode .pitfall-list li p { color: #b0b0b0; }

/* ===== QUICK REFERENCE GUIDE ===== */
.quick-reference-guide {
  background: #ffffff;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  margin: 22px 0;
  border: 2px solid #e9ecef;
  animation: floatIn 260ms ease-out;
}

.quick-reference-guide h2 {
  color: #e74c3c;
  text-align: center;
  margin-bottom: 26px;
  letter-spacing: 0.3px;
}

.quick-reference-guide h3 {
  color: #667eea;
  margin-top: 26px;
  margin-bottom: 12px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.4);
  padding-bottom: 8px;
}

.emergency-steps {
  background: #ffe5e5;
  padding: 18px;
  border-radius: 12px;
  margin: 18px 0;
  border: 1px solid rgba(231, 76, 60, 0.35);
}

.emergency-step {
  display: flex;
  gap: 14px;
  margin: 12px 0;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.step-number {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #667eea;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1em;
  box-shadow: 0 8px 18px rgba(102,126,234,0.35);
}

.step-content strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 4px;
}

.micro-action {
  font-size: 0.92em;
  color: #616e7c;
  font-style: italic;
  margin-top: 5px;
}

.critical-questions ul,
.red-flags ul,
.green-lights ul {
  padding-left: 24px;
}

.red-flag-action, .green-light-action {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 700;
}

.red-flag-action {
  background: #e74c3c;
  color: #fff;
}

.green-light-action {
  background: #27ae60;
  color: #fff;
}

.sentence-starters {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 10px;
  margin: 18px 0;
  border: 1px solid #e9ecef;
}

.starter-category strong {
  color: #667eea;
  display: block;
  margin-bottom: 6px;
}

.remember-box {
  background: #d4edda;
  border: 2px solid #27ae60;
  padding: 18px;
  border-radius: 10px;
  margin: 18px 0;
}

/* Dark mode */
body.dark-mode .quick-reference-guide {
  background: #2c2c3e;
  border-color: #3a3a4e;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
body.dark-mode .quick-reference-guide h2 { color: #ff8a80; }
body.dark-mode .quick-reference-guide h3 { color: #9fb0ff; border-bottom-color: rgba(123,148,255,0.35); }
body.dark-mode .emergency-steps { background: rgba(231, 76, 60, 0.16); border-color: rgba(231,76,60,0.35); }
body.dark-mode .emergency-step { background: #1a1a2e; box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
body.dark-mode .step-number { background: #7b94ff; }
body.dark-mode .step-content strong { color: #fff; }
body.dark-mode .micro-action { color: #b0b0b0; }
body.dark-mode .sentence-starters { background: #1a1a2e; border-color: #3a3a4e; }
body.dark-mode .remember-box { background: rgba(39,174,96,0.15); border-color: #27ae60; color: #e0e0e0; }

/* ===== EXPANDED GLOSSARY (CARD STYLE) ===== */
.glossary-expanded .glossary-item {
  background: #ffffff;
  padding: 18px;
  margin: 14px 0;
  border-radius: 12px;
  border-left: 6px solid #667eea;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  animation: floatIn 240ms ease-out;
}

.glossary-expanded .glossary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glossary-term {
  font-size: 1.08em;
  font-weight: 800;
  color: #1f2a44;
  margin-bottom: 8px;
}

.glossary-definition {
  line-height: 1.65;
  color: #5b6470;
}

.glossary-definition strong {
  color: #667eea;
}

/* Dark mode */
body.dark-mode .glossary-expanded .glossary-item {
  background: #1a1a2e;
  border-left-color: #7b94ff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.65);
}
body.dark-mode .glossary-expanded .glossary-item:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.75);
}
body.dark-mode .glossary-term { color: #fff; }
body.dark-mode .glossary-definition { color: #cfcfcf; }
body.dark-mode .glossary-definition strong { color: #9fb0ff; }

/* ===== UTILITY ===== */
.enhanced-divider {
  height: 2px;
  background: linear-gradient(90deg, rgba(102,126,234,0), rgba(102,126,234,0.6), rgba(102,126,234,0));
  border: none;
  margin: 24px 0;
  opacity: 0.9;
}

/* Small screens */
@media (max-width: 600px) {
  .emergency-step {
    flex-direction: row;
    align-items: center;
  }
  .why-matters::before,
  .common-pitfalls::before {
    left: -12px;
    top: -12px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}


/* === Readability Fixes: Step 7 + Journal (Dark & Light) === */

/* STEP 7: Why This Matters block contrast */
.step7 .why-matters,
.why-matters.step7 {
  /* Light mode: slightly stronger background + darker body copy */
  background: linear-gradient(135deg, rgba(102,126,234,0.10), rgba(118,75,162,0.10));
  color: #1f2a44;
}
.step7 .why-matters h4,
.why-matters.step7 h4 { color: #4c5bd8; }
.step7 .why-matters p strong,
.why-matters.step7 p strong { color: #1f2a44; }

/* Dark mode: elevate card, brighten text, cooler border tone */
body.dark-mode .step7 .why-matters,
body.dark-mode .why-matters.step7 {
  background: linear-gradient(135deg, rgba(123,148,255,0.22), rgba(118,75,162,0.20));
  border-color: #9fb0ff;
  color: #f1f3f8;
  box-shadow: 0 0 18px rgba(123,148,255,0.25);
}
body.dark-mode .step7 .why-matters h4,
body.dark-mode .why-matters.step7 h4 { color: #c7d2ff; }
body.dark-mode .step7 .why-matters p,
body.dark-mode .why-matters.step7 p { color: #e8ebf5; }
body.dark-mode .step7 .why-matters p strong,
body.dark-mode .why-matters.step7 p strong { color: #ffffff; }


/* JOURNAL PAGE: unify cards and empty states for contrast */

/* Try common selectors used on journal views; if your DOM uses different ones,
   these fallbacks still catch typical "card in dark mode" patterns. */
.journal-card,
.notes-summary,
.notes-empty,
.empty-notes,
.stats-bar,
.notes-list,
.notes-actions {
  /* Light mode baseline */
  background: #ffffff;
  color: #2c3e50;
  border-radius: 14px;
  border: 1px solid #e9ecef;
}

/* Buttons already themed; no change */

/* Headers inside summary bar */
.journal-card h2, .journal-card h3,
.notes-summary h2, .notes-summary h3,
.stats-bar h2, .stats-bar h3 {
  color: #2c3e50;
}

/* Empty state copy */
.notes-empty .empty-title,
.empty-notes .empty-title {
  color: #2c3e50;
  font-weight: 700;
}
.notes-empty .empty-sub,
.empty-notes .empty-sub { color: #6c757d; }

/* Dark mode overrides for all these blocks */
body.dark-mode .journal-card,
body.dark-mode .notes-summary,
body.dark-mode .notes-empty,
body.dark-mode .empty-notes,
body.dark-mode .stats-bar,
body.dark-mode .notes-list,
body.dark-mode .notes-actions {
  background: #2c2c3e;
  color: #e6e8ef;
  border-color: #3a3a4e;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}

body.dark-mode .journal-card h2, body.dark-mode .journal-card h3,
body.dark-mode .notes-summary h2, body.dark-mode .notes-summary h3,
body.dark-mode .stats-bar h2, body.dark-mode .stats-bar h3 {
  color: #ffffff;
}

body.dark-mode .notes-empty .empty-title,
body.dark-mode .empty-notes .empty-title { color: #ffffff; }
body.dark-mode .notes-empty .empty-sub,
body.dark-mode .empty-notes .empty-sub { color: #b0b0b0; }

/* Optional: subtle divider edge to separate light text from dark background */
body.dark-mode .notes-summary { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }



/* === FORCED HIGH-CONTRAST OVERRIDES (Step 7 + Journal) === */
/* Toggleable global helper: add class="hc" to <body> to enforce stronger contrast sitewide */
body.hc * { text-shadow: none !important; }

/* ---------- STEP 7 (Why + Pitfalls) ---------- */

/* Light mode defaults */
.detailed-view.step7 .why-matters,
.step7 .step-content .why-matters,
#step7 .why-matters,
[data-step="step7"] .why-matters {
  background: #f4f6ff !important;
  border-color: #3e55e8 !important;
  color: #0f172a !important; /* slate-900 */
}

.detailed-view.step7 .why-matters h4,
.step7 .why-matters h4,
#step7 .why-matters h4,
[data-step="step7"] .why-matters h4 {
  color: #2536d0 !important;
  font-weight: 800 !important;
}

.detailed-view.step7 .why-matters p,
.step7 .why-matters p,
#step7 .why-matters p,
[data-step="step7"] .why-matters p {
  color: #0f172a !important;
  line-height: 1.7 !important;
  font-size: 1.02em !important;
}

.detailed-view.step7 .why-matters p strong,
.step7 .why-matters p strong { color: #0b1220 !important; }

/* Dark mode */
body.dark-mode .detailed-view.step7 .why-matters,
body.dark-mode .step7 .why-matters,
body.dark-mode #step7 .why-matters,
body.dark-mode [data-step="step7"] .why-matters {
  background: #1d2240 !important;       /* solid indigo/blue */
  border-color: #aab9ff !important;
  color: #f8fafc !important;             /* near-white */
  box-shadow: 0 0 0 1px rgba(170,185,255,0.28), 0 10px 28px rgba(0,0,0,0.55) !important;
}

body.dark-mode .detailed-view.step7 .why-matters h4,
body.dark-mode .step7 .why-matters h4 {
  color: #dbe3ff !important;
}

body.dark-mode .detailed-view.step7 .why-matters p,
body.dark-mode .step7 .why-matters p {
  color: #eef2ff !important;
}

/* Pitfalls block inside Step 7 too */
body.dark-mode .step7 .common-pitfalls,
body.dark-mode #step7 .common-pitfalls,
body.dark-mode [data-step="step7"] .common-pitfalls {
  background: #2a1f12 !important;        /* darker warm panel */
  border-color: #ffcc66 !important;
  color: #fff7e6 !important;
}
body.dark-mode .step7 .common-pitfalls .pitfall-list li { 
  background: #1e2438 !important;
  border-color: rgba(255,200,64,.45) !important;
  color: #e8ecff !important;
}
body.dark-mode .step7 .common-pitfalls .pitfall-list li strong { color: #ffffff !important; }
body.dark-mode .step7 .common-pitfalls .pitfall-list li p { color: #d3d9ff !important; }

/* Optional: high-contrast mode pushes sizes up slightly */
body.hc .step7 .why-matters p,
body.hc .step7 .common-pitfalls p { font-size: 1.06em !important; }


/* ---------- JOURNAL VIEW (Summary bar, cards, empty state) ---------- */
/* Make a very broad selector net with high specificity and !important flags. */

/* Light mode */
.journal, #journal, .journal-view, [data-view="journal"],
.notes-summary, .journal-summary, .notes-card, .journal-card, .notes-empty, .empty-notes, .notes-panel {
  background: #ffffff !important;
  color: #1f2a44 !important;
  border: 1px solid #dfe3ea !important;
  border-radius: 14px !important;
}

.journal h1, .journal h2, .journal h3,
.journal-view h1, .journal-view h2, .journal-view h3,
.notes-summary h1, .notes-summary h2, .notes-summary h3 {
  color: #0f172a !important;
}

.notes-empty .empty-title, .empty-notes .empty-title { color: #0f172a !important; font-weight: 800 !important; }
.notes-empty .empty-sub, .empty-notes .empty-sub { color: #475569 !important; }

/* Buttons: keep their own colors but boost label contrast on dark bg */
body.dark-mode .btn, body.dark-mode button {
  color: #fff !important;
}

/* Dark mode cards */
body.dark-mode .journal, 
body.dark-mode #journal, 
body.dark-mode .journal-view, 
body.dark-mode [data-view="journal"],
body.dark-mode .notes-summary, 
body.dark-mode .journal-summary, 
body.dark-mode .notes-card, 
body.dark-mode .journal-card, 
body.dark-mode .notes-empty, 
body.dark-mode .empty-notes,
body.dark-mode .notes-panel {
  background: #2b2f44 !important;           /* deep slate/indigo */
  color: #e9ecf5 !important;
  border-color: #3c4160 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.55) !important;
}

body.dark-mode .notes-summary h1,
body.dark-mode .notes-summary h2,
body.dark-mode .notes-summary h3,
body.dark-mode .journal-view h1,
body.dark-mode .journal-view h2,
body.dark-mode .journal-view h3 {
  color: #ffffff !important;
}

/* Empty state icon/text */
body.dark-mode .notes-empty .empty-title, 
body.dark-mode .empty-notes .empty-title { color: #ffffff !important; }
body.dark-mode .notes-empty .empty-sub, 
body.dark-mode .empty-notes .empty-sub { color: #c7cee6 !important; }

/* Textareas in journal */
.notes-textarea, .journal textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cfd6e4 !important;
}

.notes-textarea::placeholder, .journal textarea::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

body.dark-mode .notes-textarea, body.dark-mode .journal textarea {
  background: #1a1f33 !important;
  color: #e6ebff !important;
  border-color: #3b4270 !important;
}

body.dark-mode .notes-textarea::placeholder, body.dark-mode .journal textarea::placeholder {
  color: #adb5bd !important;
  opacity: 1 !important;
}

/* Utility to verify quickly: apply HC style globally in dark mode */
body.dark-mode.hc .detailed-view, 
body.dark-mode.hc .step-card, 
body.dark-mode.hc .notes-section,
body.dark-mode.hc .notes-summary, 
body.dark-mode.hc .notes-card {
  filter: none !important;
}



/* === DARK-MODE READABILITY: TARGETED TO ACTUAL DOM (index.html) === */

/* STEP 7 specific overrides inside #detailedSections */
body.dark-mode #detailedSections .detailed-view .step-content .why-matters {
  background: #1e2450 !important;  /* solid indigo */
  color: #f6f8ff !important;
  border: 2px solid #aab9ff !important;
  box-shadow: 0 0 0 1px rgba(170,185,255,.25), 0 10px 28px rgba(0,0,0,.55) !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .why-matters h4 {
  color: #dbe3ff !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .why-matters p,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters li {
  color: #f2f4ff !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .why-matters p strong,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters li strong {
  color: #ffffff !important;
}

/* Pitfalls block in Step 7 */
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls {
  background: #2b2330 !important;   /* deep maroon/eggplant for clear separation */
  color: #fff6fb !important;
  border: 2px solid #ffb870 !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls h4 {
  color: #ffd79c !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls .pitfall-list li {
  background: #1a2036 !important;
  color: #e9edff !important;
  border-color: rgba(255,200,64,.45) !important;
}
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls .pitfall-list li strong {
  color: #ffffff !important;
}

/* JOURNAL VIEW: #allNotesSection and dynamic container #allNotesContainer */
body.dark-mode #allNotesSection .detailed-view {
  background: #23263a !important;
  color: #e8ebf7 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.55) !important;
}
body.dark-mode #allNotesSection .detailed-view .step-content {
  color: #eef2ff !important;
}
body.dark-mode #allNotesSection .detailed-view .step-content h3 {
  color: #ffffff !important;
  border-bottom: 1px solid #3c4160;
  padding-bottom: 6px;
}
body.dark-mode #allNotesContainer,
body.dark-mode #allNotesContainer * {
  color: #e6ebff !important;
}
body.dark-mode #allNotesContainer .notes-summary,
body.dark-mode #allNotesContainer .notes-card,
body.dark-mode #allNotesContainer .notes-empty,
body.dark-mode #allNotesContainer .empty-notes {
  background: #2b2f44 !important;
  border: 1px solid #3c4160 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.5) !important;
}
body.dark-mode #allNotesContainer .notes-textarea,
body.dark-mode #allNotesSection .notes-textarea {
  background: #1a1f33 !important;
  color: #e6ebff !important;
  border-color: #3b4270 !important;
}
body.dark-mode #allNotesContainer .empty-title { color: #ffffff !important; }
body.dark-mode #allNotesContainer .empty-sub   { color: #c7cee6 !important; }

/* Make Export button legible on dark bg */
body.dark-mode #allNotesSection .save-note-btn {
  background: #28a745 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Ensure general paragraph/list contrast in any .detailed-view on dark mode */
body.dark-mode .detailed-view .step-content p,
body.dark-mode .detailed-view .step-content li {
  color: #e9ecf7 !important;
}



/* === GLOBAL DARK-MODE FALLBACKS (Guaranteed Readability) === */

/* Make every .why-matters and .common-pitfalls fully legible in dark mode, regardless of container */
body.dark-mode .why-matters {
  background: #12142b !important;
  color: #ffffff !important;
  border: 1px solid #9fb0ff !important;
  box-shadow: 0 0 0 1px rgba(159,176,255,.25), 0 10px 28px rgba(0,0,0,.65) !important;
}
body.dark-mode .why-matters h4 { color: #c7d2ff !important; }
body.dark-mode .why-matters p,
body.dark-mode .why-matters li { color: #f2f4ff !important; }
body.dark-mode .why-matters strong { color: #ffffff !important; }

body.dark-mode .common-pitfalls {
  background: #1d1622 !important;
  color: #fff6fb !important;
  border: 1px solid #ffcc88 !important;
}
body.dark-mode .common-pitfalls h4 { color: #ffdca6 !important; }
body.dark-mode .common-pitfalls .pitfall-list li {
  background: #10162b !important;
  color: #e9edff !important;
  border-color: rgba(255,200,64,.45) !important;
}
body.dark-mode .common-pitfalls .pitfall-list li strong { color: #ffffff !important; }
body.dark-mode .common-pitfalls .pitfall-list li p { color: #d3d9ff !important; }

/* Journal container: force direct children to dark surfaces and bright text */
body.dark-mode #allNotesContainer > * {
  background: #12142b !important;
  color: #f9f9ff !important;
  border: 1px solid #3a3f6d !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(90,90,150,0.3), 0 12px 28px rgba(0,0,0,0.85) !important;
}

/* Text inside summary/empty states */
body.dark-mode #allNotesContainer h1,
body.dark-mode #allNotesContainer h2,
body.dark-mode #allNotesContainer h3,
body.dark-mode #allNotesContainer .empty-title { color: #ffffff !important; }
body.dark-mode #allNotesContainer .empty-sub { color: #c7cee6 !important; }

/* Textareas and inputs in journal */
body.dark-mode #allNotesContainer textarea,
body.dark-mode #allNotesContainer input[type="text"],
body.dark-mode #allNotesContainer input[type="search"] {
  background: #0b0e1c !important;
  color: #f4f6ff !important;
  border: 1px solid #4c52a3 !important;
}


/* =========================================
   CLEANUP & DEFINITIVE JOURNAL FIX
   This single block replaces all previous failed attempts and ensures readability.
   ========================================= */

/* Journal text area input field content */
body.dark-mode #allNotesSection textarea,
body.dark-mode #allNotesContainer textarea,
body.dark-mode .notes-textarea {
    /* Set the background to a deeper dark color than the card for contrast */
    background: #0b0e1c !important; 
    
    /* Set the text color to a bright, near-white for high readability */
    color: #f4f6ff !important; 
    
    /* Ensure border color is visible */
    border-color: #3c4160 !important;
}

/* Fix placeholder contrast for journal textareas - HIGHEST SPECIFICITY */
body.dark-mode #allNotesSection textarea::placeholder,
body.dark-mode #allNotesContainer textarea::placeholder,
body.dark-mode .notes-textarea::placeholder,
body.dark-mode .detailed-view textarea::placeholder,
body.dark-mode .notes-section textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* Light mode placeholder fix - HIGHEST SPECIFICITY */
#allNotesSection textarea::placeholder,
#allNotesContainer textarea::placeholder,
.notes-textarea::placeholder,
.detailed-view textarea::placeholder,
.notes-section textarea::placeholder,
textarea::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* Global textarea placeholder override */
textarea::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

body.dark-mode textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* FINAL OVERRIDE - MAXIMUM SPECIFICITY */
html body textarea::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

html body.dark-mode textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* NUCLEAR OPTION - FORCE PLACEHOLDER COLORS */
* textarea::placeholder {
    color: #495057 !important;
    opacity: 1 !important;
}

* body.dark-mode textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* Target specific journal textareas */
.notes-section textarea::placeholder,
#allNotesContainer textarea::placeholder,
#allNotesSection textarea::placeholder {
    color: #495057 !important;
    opacity: 1 !important;
}

body.dark-mode .notes-section textarea::placeholder,
body.dark-mode #allNotesContainer textarea::placeholder,
body.dark-mode #allNotesSection textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* JavaScript fallback - add this script to force placeholder colors */
/*
<script>
document.addEventListener('DOMContentLoaded', function() {
    function fixPlaceholderColors() {
        const textareas = document.querySelectorAll('textarea');
        textareas.forEach(textarea => {
            if (document.body.classList.contains('dark-mode')) {
                textarea.style.setProperty('--placeholder-color', '#adb5bd', 'important');
            } else {
                textarea.style.setProperty('--placeholder-color', '#495057', 'important');
            }
        });
    }
    
    fixPlaceholderColors();
    
    // Re-run when dark mode toggles
    const observer = new MutationObserver(fixPlaceholderColors);
    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
});
</script>
*/