/* ============================================================
   DAY THEME — SAGE VARIANT
   Palette: soft sage green / muted earthy tones
   Scope: body[data-theme="light"][data-day-variant="sage"]
   ============================================================ */

/* ── Shorthand prefix used throughout: B = body[data-theme="light"][data-day-variant="sage"] ── */

/* Body text + fallback background when sky animation is off */
body[data-theme="light"][data-day-variant="sage"] { color: #0f1f10; }

body[data-theme="light"][data-day-variant="sage"] .animated-bg {
  background: linear-gradient(180deg,
    #4a8272 0%,
    #6a9e8c 18%,
    #8abaa8 38%,
    #aad0be 58%,
    #c4e0d4 76%,
    #daeee6 100%
  );
}

/* ── Top bar ── */
body[data-theme="light"][data-day-variant="sage"] .top-bar {
  background: rgba(220, 232, 214, 0.90);
  border: 1px solid rgba(74, 110, 60, 0.22);
  box-shadow: 0 2px 14px rgba(30, 60, 20, 0.08);
  backdrop-filter: blur(16px) saturate(140%);
}
body[data-theme="light"][data-day-variant="sage"] .chapter-selector label { color: #5a7254; }

/* ── Back button ── */
body[data-theme="light"][data-day-variant="sage"] .back-button { color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .back-button:hover { background: rgba(61, 99, 48, 0.1); color: #365d2d; }

/* ── Chapter dropdown ── */
body[data-theme="light"][data-day-variant="sage"] .chapter-select {
  background: rgba(228, 238, 222, 0.95);
  color: #1e3018;
  border: 1px solid rgba(74, 110, 60, 0.28);
}
body[data-theme="light"][data-day-variant="sage"] .chapter-select:hover { border-color: rgba(74, 110, 60, 0.52); }
body[data-theme="light"][data-day-variant="sage"] .chapter-select:focus {
  border-color: #4d7c3f;
  box-shadow: 0 0 0 3px rgba(77, 124, 63, 0.18);
  outline: none;
}
body[data-theme="light"][data-day-variant="sage"] .chapter-select option { background: #eef2eb; color: #0f1f10; }

/* ── Icon buttons ── */
body[data-theme="light"][data-day-variant="sage"] .icon-btn {
  background: linear-gradient(135deg, rgba(228,238,222,0.97), rgba(220,232,214,0.92));
  color: #4d7c3f;
  border: 1px solid rgba(74, 110, 60, 0.28);
  box-shadow: 0 2px 8px rgba(30,60,20,0.09), inset 0 1px 0 rgba(255,255,255,0.78);
}
body[data-theme="light"][data-day-variant="sage"] .icon-btn:hover {
  background: linear-gradient(135deg, rgba(61,99,48,0.12), rgba(77,124,63,0.09));
  border-color: #4d7c3f;
  color: #365d2d;
  box-shadow: 0 6px 16px rgba(61,99,48,0.18), inset 0 1px 0 rgba(255,255,255,0.58);
}

/* ── Progress bar ── */
body[data-theme="light"][data-day-variant="sage"] .progress-bar { background: rgba(74, 110, 60, 0.15); }
body[data-theme="light"][data-day-variant="sage"] .progress-fill {
  background: linear-gradient(90deg, #4d7c3f, #365d2d);
  box-shadow: 0 0 8px rgba(61, 99, 48, 0.35);
}

/* ── Chapter header ── */
body[data-theme="light"][data-day-variant="sage"] .chapter-header {
  background: rgba(220, 232, 214, 0.88);
  border: none;
  box-shadow: 0 4px 16px rgba(30, 60, 20, 0.07);
}
body[data-theme="light"][data-day-variant="sage"] .chapter-title { color: #0f1f10; }
body[data-theme="light"][data-day-variant="sage"] .chapter-meta  { color: #5a7254; }

/* ── Chapter content — soft sage glassmorphism panel ── */
body[data-theme="light"][data-day-variant="sage"] .chapter-content {
  background: rgba(220, 232, 214, 0.82) !important;
  border: 1px solid rgba(74, 132, 54, 0.20) !important;
  box-shadow: 0 4px 20px rgba(30, 60, 20, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  color: var(--reader-text-color, #1e3018) !important;
}
body[data-theme="light"][data-day-variant="sage"] .chapter-content p      { color: var(--reader-text-color, #1e3018) !important; text-align: justify; }
@media (max-width: 768px) { body[data-theme="light"][data-day-variant="sage"] .chapter-content p { text-align: left !important; } }
body[data-theme="light"][data-day-variant="sage"] .chapter-content strong  { color: var(--reader-text-color, #4d7c3f) !important; }
body[data-theme="light"][data-day-variant="sage"] .chapter-content em      { color: var(--reader-text-color, #365d2d) !important; }
body[data-theme="light"][data-day-variant="sage"] #readerContent           { color: var(--reader-text-color, #1e3018) !important; }

/* ── Navigation buttons ── */
body[data-theme="light"][data-day-variant="sage"] .nav-btn {
  background: rgba(228, 238, 222, 0.92);
  color: #4d7c3f;
  border: 1px solid rgba(74, 110, 60, 0.28);
}
body[data-theme="light"][data-day-variant="sage"] .nav-btn:hover {
  background: rgba(61, 99, 48, 0.1);
  border-color: #4d7c3f;
  color: #365d2d;
}

/* ── Like / Retry buttons ── */
body[data-theme="light"][data-day-variant="sage"] .like-button,
body[data-theme="light"][data-day-variant="sage"] .retry-button {
  background: linear-gradient(135deg, rgba(61,99,48,0.08), rgba(77,124,63,0.06));
  border: 1px solid rgba(61, 99, 48, 0.28);
  color: #4d7c3f;
}
body[data-theme="light"][data-day-variant="sage"] .like-button:hover,
body[data-theme="light"][data-day-variant="sage"] .retry-button:hover {
  background: linear-gradient(135deg, rgba(61,99,48,0.15), rgba(77,124,63,0.12));
  border-color: #4d7c3f;
  color: #365d2d;
}

/* ── Modal ── */
body[data-theme="light"][data-day-variant="sage"] .modal-content {
  background: linear-gradient(135deg, #eef5ea, #e4eedf);
  border: 1px solid rgba(74, 110, 60, 0.20);
  box-shadow: 0 25px 60px rgba(30, 60, 20, 0.13);
}
body[data-theme="light"][data-day-variant="sage"] .modal-header {
  background: linear-gradient(135deg, #eef5ea, #e4eedf);
  border-bottom: 1px solid rgba(74, 110, 60, 0.15);
}
body[data-theme="light"][data-day-variant="sage"] .modal-title  { color: #0f1f10; }
body[data-theme="light"][data-day-variant="sage"] .modal-footer { border-top: 1px solid rgba(74, 110, 60, 0.15); }
body[data-theme="light"][data-day-variant="sage"] .close-modal,
body[data-theme="light"][data-day-variant="sage"] .close-btn {
  background: rgba(228,238,222,0.65);
  border: 1px solid rgba(74, 110, 60, 0.18);
  color: #5a7254;
}
body[data-theme="light"][data-day-variant="sage"] .close-modal:hover,
body[data-theme="light"][data-day-variant="sage"] .close-btn:hover { color: #0f1f10; }
body[data-theme="light"][data-day-variant="sage"] .modal-cancel {
  background: rgba(228, 238, 222, 0.97);
  color: #5a7254;
  border: 1px solid rgba(74, 110, 60, 0.22);
}

/* ── Settings ── */
body[data-theme="light"][data-day-variant="sage"] .setting-group,
body[data-theme="light"][data-day-variant="sage"] .settings-group {
  background: rgba(236, 244, 232, 0.85);
  border-color: rgba(74, 110, 60, 0.12);
}
body[data-theme="light"][data-day-variant="sage"] .setting-label,
body[data-theme="light"][data-day-variant="sage"] .settings-label { color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .font-size-controls {
  background: rgba(236, 244, 232, 0.65);
  border-color: rgba(74, 110, 60, 0.15);
}
body[data-theme="light"][data-day-variant="sage"] .font-size-btn {
  background: linear-gradient(135deg, rgba(228,238,222,0.97), rgba(220,232,214,0.92));
  border: 1px solid rgba(74, 110, 60, 0.22);
  color: #1e3018;
}
body[data-theme="light"][data-day-variant="sage"] .font-size-btn:hover { background: rgba(61,99,48,0.1); border-color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .font-size-btn.active {
  background: rgba(61, 99, 48, 0.15);
  border-color: #4d7c3f;
  color: #1e3018;
  font-weight: 600;
}
body[data-theme="light"][data-day-variant="sage"] #fontSizeDisplay { color: #1e3018; }

/* ── Text color picker ── */
body[data-theme="light"][data-day-variant="sage"] .text-color-picker {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(74, 110, 60, 0.28);
  cursor: pointer;
  background: rgba(228, 238, 222, 0.97);
}

/* ── Font picker ── */
body[data-theme="light"][data-day-variant="sage"] .font-picker-selected {
  background: rgba(228, 238, 222, 0.97);
  border: 1px solid rgba(74, 110, 60, 0.25);
  color: #1e3018;
}
body[data-theme="light"][data-day-variant="sage"] .font-picker-selected:hover,
body[data-theme="light"][data-day-variant="sage"] .font-picker.open .font-picker-selected { border-color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .font-picker-dropdown {
  background: #eef2eb;
  border: 1px solid rgba(74, 110, 60, 0.20);
}
body[data-theme="light"][data-day-variant="sage"] .font-option:hover  { background: rgba(61,99,48,0.07); }
body[data-theme="light"][data-day-variant="sage"] .font-option.active  { background: rgba(61,99,48,0.13); }
body[data-theme="light"][data-day-variant="sage"] .font-preview-text  { color: #1e3018; }
body[data-theme="light"][data-day-variant="sage"] .font-name-tag      { color: #5a7254; }

/* ── Day colour swatches ── */
body[data-theme="light"][data-day-variant="sage"] .day-swatch.active { border-color: #4d7c3f; box-shadow: 0 0 0 2px rgba(77,124,63,0.30); }

/* ── Checkbox toggles ── */
body[data-theme="light"][data-day-variant="sage"] .checkbox-slider { background: rgba(74, 110, 60, 0.20); }
body[data-theme="light"][data-day-variant="sage"] input:checked + .checkbox-slider { background: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .checkbox-label { color: #1e3018; }

/* ── Buttons (modals / add-chapter) ── */
body[data-theme="light"][data-day-variant="sage"] .btn {
  color: #4d7c3f;
  border: 1px solid rgba(74, 110, 60, 0.30);
  background: rgba(61, 99, 48, 0.07);
}
body[data-theme="light"][data-day-variant="sage"] .btn:hover { background: rgba(61,99,48,0.14); border-color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .btn-primary {
  background: linear-gradient(135deg, #4d7c3f, #365d2d);
  color: #fff;
  border-color: #365d2d;
  box-shadow: 0 4px 14px rgba(61, 99, 48, 0.30);
}
body[data-theme="light"][data-day-variant="sage"] .btn-primary:hover { background: linear-gradient(135deg, #365d2d, #274520); box-shadow: 0 6px 18px rgba(61,99,48,0.40); }
body[data-theme="light"][data-day-variant="sage"] .btn-secondary { background: transparent; color: #4d7c3f; border-color: #4d7c3f; }
body[data-theme="light"][data-day-variant="sage"] .btn-secondary:hover { background: rgba(61,99,48,0.07); }

/* ── Glossary / edit buttons ── */
body[data-theme="light"][data-day-variant="sage"] .edit-btn {
  background: rgba(61, 99, 48, 0.08);
  border: 1px solid rgba(61, 99, 48, 0.22);
  color: #4d7c3f;
}
body[data-theme="light"][data-day-variant="sage"] .edit-btn:hover { background: rgba(61,99,48,0.16); border-color: #4d7c3f; color: #365d2d; }
body[data-theme="light"][data-day-variant="sage"] .tab-btn.active {
  color: #4d7c3f;
  border-bottom-color: #4d7c3f;
  background: rgba(61, 99, 48, 0.06);
}
body[data-theme="light"][data-day-variant="sage"] .tab-btn:hover { background: rgba(61,99,48,0.04); color: #365d2d; }

/* ── Form inputs (class-based) ── */
body[data-theme="light"][data-day-variant="sage"] .form-input { background: rgba(228,238,222,0.97); color: #0f1f10; border-color: rgba(74,110,60,0.25); }
body[data-theme="light"][data-day-variant="sage"] .form-input:focus { border-color: #4d7c3f; box-shadow: 0 0 0 3px rgba(77,124,63,0.16); outline: none; }
body[data-theme="light"][data-day-variant="sage"] .form-label { color: #1e3018; }
body[data-theme="light"][data-day-variant="sage"] .form-hint  { color: #5a7254; }

/* ── Form group element inputs (edit modals) ── */
body[data-theme="light"][data-day-variant="sage"] .form-group input[type="text"],
body[data-theme="light"][data-day-variant="sage"] .form-group textarea,
body[data-theme="light"][data-day-variant="sage"] .form-group select {
  background: rgba(228, 238, 222, 0.97);
  color: #0f1f10;
  border-color: rgba(74, 110, 60, 0.28);
}
body[data-theme="light"][data-day-variant="sage"] .form-group input[type="text"]:focus,
body[data-theme="light"][data-day-variant="sage"] .form-group textarea:focus,
body[data-theme="light"][data-day-variant="sage"] .form-group select:focus {
  border-color: #4d7c3f;
  box-shadow: 0 0 0 3px rgba(77, 124, 63, 0.16);
  background: #eef2eb;
}
body[data-theme="light"][data-day-variant="sage"] .form-group input[disabled] { background: rgba(210, 226, 205, 0.70); }
body[data-theme="light"][data-day-variant="sage"] .form-group label { color: #1e3018; }
body[data-theme="light"][data-day-variant="sage"] .form-group small { color: #5a7254; }

/* ── Scrollbar ── */
body[data-theme="light"][data-day-variant="sage"] ::-webkit-scrollbar-thumb       { background: rgba(74, 110, 60, 0.28); }
body[data-theme="light"][data-day-variant="sage"] ::-webkit-scrollbar-thumb:hover { background: rgba(74, 110, 60, 0.52); }

/* ── Birds — sage green ── */
body[data-theme="light"][data-day-variant="sage"] .bird {
  filter: invert(1) sepia(1) hue-rotate(75deg) saturate(2.5) brightness(0.44);
}

/* ── Glossary items ── */
body[data-theme="light"][data-day-variant="sage"] .glossary-item {
  background: rgba(232, 242, 228, 0.90) !important;
  border-color: rgba(74, 110, 60, 0.20) !important;
}
body[data-theme="light"][data-day-variant="sage"] .glossary-item:hover {
  background: rgba(224, 238, 218, 0.97) !important;
  border-color: rgba(61, 99, 48, 0.35) !important;
  box-shadow: 0 4px 12px rgba(30, 60, 20, 0.10);
}
body[data-theme="light"][data-day-variant="sage"] .glossary-header strong { color: #0f1f10; }
body[data-theme="light"][data-day-variant="sage"] .glossary-header { color: #5a7254; }
body[data-theme="light"][data-day-variant="sage"] .glossary-meta { color: #8aaa84; }
body[data-theme="light"][data-day-variant="sage"] .glossary-notes {
  background: rgba(61, 99, 48, 0.05);
  border-left-color: rgba(61, 99, 48, 0.35);
  color: #5a7254;
}
body[data-theme="light"][data-day-variant="sage"] .edit-btn {
  background: rgba(61, 99, 48, 0.08) !important;
  border-color: rgba(61, 99, 48, 0.24) !important;
  color: #4d7c3f !important;
}
body[data-theme="light"][data-day-variant="sage"] .edit-btn:hover {
  background: rgba(61, 99, 48, 0.16) !important;
  border-color: #4d7c3f !important;
  color: #365d2d !important;
}
body[data-theme="light"][data-day-variant="sage"] .delete-btn {
  background: rgba(220, 38, 38, 0.07) !important;
  border-color: rgba(220, 38, 38, 0.20) !important;
  color: #b91c1c !important;
}
body[data-theme="light"][data-day-variant="sage"] .delete-btn:hover {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: rgba(220, 38, 38, 0.38) !important;
  color: #991b1b !important;
}
body[data-theme="light"][data-day-variant="sage"] .badge-blue {
  background: rgba(61, 99, 48, 0.10);
  color: #4d7c3f;
  border-color: rgba(61, 99, 48, 0.22);
}
body[data-theme="light"][data-day-variant="sage"] .badge-gray {
  background: rgba(74, 110, 60, 0.10);
  color: #365d2d;
  border-color: rgba(74, 110, 60, 0.22);
}