/* ===============================
   Forest — bright, readable greens (with pine pattern)
   =============================== */

html[data-theme="forest"] {
  /* Core palette */
  --forest-ink:        #0f2a1f;  /* deep evergreen text */
  --forest-ink-muted:  #3b5a4b;  /* muted labels */
  --forest-face:       #ffffff;  /* cards/panels */
  --forest-elev:       #f7fbf8;  /* elevated/secondary face */
  --forest-border:     #cde7d8;  /* soft mint border */
  --forest-shadow:     rgba(9, 30, 22, .06);

  /* Accents */
  --forest-accent:     #16a34a;  /* green-600 */
  --forest-accent-600: #15803d;  /* green-700 (hover) */
  --forest-accent-200: #bbf7d0;  /* light chips / outlines */

  /* Status */
  --forest-success:    #16a34a;
  --forest-warning:    #d97706;
  --forest-danger:     #e11d48;
  --forest-info:       #2563eb;

  /* Topbar */
  --forest-bar:        #0b4f38;  /* deep forest */
  --forest-bar-ink:    #ecfdf5;

  /* Background shades (darker) */
  --forest-bg-top: #dcece4;
  --forest-bg-mid: #cfe4da;
  --forest-bg-bot: #c2dcd2;

  /* Controls */
  --btn-radius: 12px;
  --panel-radius: 14px;
}

/* Page background & base ink */
html[data-theme="forest"] body {
  min-height: 100vh;
  color: var(--forest-ink);

  /* Layer order: vignette (top), pattern layers, base gradient (bottom) */
  background:
    /* Dark green vignette to anchor the page */
    radial-gradient(1200px 520px at 85% -10%, rgba(11,63,45,.24), transparent 62%),

    /* Pine pattern — fine grid */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
  <g stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
    <polygon points='80,16 58,48 102,48'/>\
    <polygon points='80,46 50,88 110,88'/>\
    <polygon points='80,86 44,136 116,136'/>\
    <line x1='80' y1='16' x2='80' y2='172'/>\
  </g>\
</svg>") left top / 220px 300px repeat,

    /* Pine pattern — larger, offset for variation */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
  <g stroke='%230b3f2d' stroke-opacity='.06' stroke-width='2'>\
    <polygon points='80,16 58,48 102,48'/>\
    <polygon points='80,46 50,88 110,88'/>\
    <polygon points='80,86 44,136 116,136'/>\
    <line x1='80' y1='16' x2='80' y2='172'/>\
  </g>\
</svg>") 60px 40px / 300px 410px repeat,

    /* Base gradient */
    linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
}

/* Subtle selection */
html[data-theme="forest"] ::selection { background: rgba(22,163,74,.28); }

/* ---------- Top bar ---------- */
html[data-theme="forest"] .topbar-wrap{
  background: linear-gradient(180deg, var(--forest-bar) 0%, #0a3f2d 100%);
  border-bottom: 1px solid rgba(12, 58, 43, .35);
  box-shadow: 0 6px 20px rgba(3, 25, 19, .18);
}
html[data-theme="forest"] .brand-title,
html[data-theme="forest"] .brand .tagline,
html[data-theme="forest"] .version-link{
  color: var(--forest-bar-ink) !important;
}
html[data-theme="forest"] .version-link:hover{ opacity:.9; text-decoration: underline; }

/* ---------- Topbar actions (Find/Create/Insights) ---------- */
html[data-theme="forest"] .topbar .nav-btn,
html[data-theme="forest"] .topbar .btn,
html[data-theme="forest"] .topbar .btn-success{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 6px 14px !important;
  box-sizing: border-box !important;

  background: #0f2a1f0a !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(236, 253, 245, .28) !important;
  border-radius: var(--btn-radius) !important;
  backdrop-filter: saturate(110%) blur(2px);
}
html[data-theme="forest"] .topbar .nav-btn:hover,
html[data-theme="forest"] .topbar .btn:hover,
html[data-theme="forest"] .topbar .btn-success:hover{
  background: #0f2a1f1a !important;
  border-color: rgba(236,253,245,.45) !important;
}

/* Username chip */
html[data-theme="forest"] .topbar .user-chip{
  height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important;
  background: #0f2a1f20 !important;
  color: #eafaf2 !important;
  border: 1px solid rgba(236,253,245,.35) !important;
  border-radius: 999px !important;
}

/* ---------- Cards / panels ---------- */
html[data-theme="forest"] .card,
html[data-theme="forest"] .result-card,
html[data-theme="forest"] .search-form,
html[data-theme="forest"] .form-card,
html[data-theme="forest"] .user-menu,
html[data-theme="forest"] .mobile-menu-inner{
  background: var(--forest-face);
  border: 1px solid var(--forest-border);
  color: var(--forest-ink);
  border-radius: var(--panel-radius);
  box-shadow: 0 10px 28px var(--forest-shadow);
}

/* Section headings & muted text */
html[data-theme="forest"] .cc-panel-title,
html[data-theme="forest"] .page-title,
html[data-theme="forest"] .subject-title{ color: var(--forest-ink); }
html[data-theme="forest"] .section-label,
html[data-theme="forest"] .meta-label,
html[data-theme="forest"] .page-subtitle,
html[data-theme="forest"] .muted{ color: var(--forest-ink-muted); }

/* ---------- Inputs ---------- */
html[data-theme="forest"] .search-input,
html[data-theme="forest"] .form-control,
html[data-theme="forest"] .login-input,
html[data-theme="forest"] .tool-input,
html[data-theme="forest"] textarea{
  background: #ffffff;
  border: 1px solid var(--forest-border);
  color: var(--forest-ink);
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(16, 24, 40, .02) inset;
}
html[data-theme="forest"] .search-input::placeholder,
html[data-theme="forest"] .form-control::placeholder{ color:#6a8a79; }
html[data-theme="forest"] .search-input:focus,
html[data-theme="forest"] .form-control:focus,
html[data-theme="forest"] .login-input:focus,
html[data-theme="forest"] .tool-input:focus{
  border-color: var(--forest-accent);
  box-shadow: 0 0 0 3px rgba(22,163,74,.22);
  outline: none;
}

/* Pills / chips */
html[data-theme="forest"] .chip,
html[data-theme="forest"] .chip-link{
  background: #f0fdf4;
  border: 1px solid var(--forest-accent-200);
  color: #0b3b2a;
}
html[data-theme="forest"] .chip-muted{
  background: #ecfdf5;
  color: #0b3b2a;
}

/* ---------- Buttons ---------- */
html[data-theme="forest"] .btn{
  background: #ffffff;
  border: 1px solid var(--forest-border);
  color: var(--forest-ink);
  border-radius: var(--btn-radius);
}
html[data-theme="forest"] .btn:hover{ background:#f7fbf8; }
html[data-theme="forest"] .btn-primary{
  background: var(--forest-accent);
  border-color: var(--forest-accent);
  color: #fff;
}
html[data-theme="forest"] .btn-primary:hover{
  background: var(--forest-accent-600);
  border-color: var(--forest-accent-600);
}
html[data-theme="forest"] .btn-danger{
  background: var(--forest-danger);
  border-color: var(--forest-danger);
  color:#fff;
}
html[data-theme="forest"] .btn-danger:hover{ filter: brightness(.95); }

/* ---------- Messages ---------- */
html[data-theme="forest"] .msg{
  background:#ffffff;
  border-color: var(--forest-border);
  color: var(--forest-ink);
}
html[data-theme="forest"] .msg.info    { border-left:4px solid var(--forest-info);    background:#eef4ff; }
html[data-theme="forest"] .msg.success { border-left:4px solid var(--forest-success); background:#ecfdf5; }
html[data-theme="forest"] .msg.warning { border-left:4px solid var(--forest-warning); background:#fff7ed; }
html[data-theme="forest"] .msg.error   { border-left:4px solid var(--forest-danger);  background:#fff1f3; }

/* ---------- Links ---------- */
html[data-theme="forest"] a{ color:#0e7e49; }
html[data-theme="forest"] a:hover{ color:#0b5f38; text-decoration: underline; }

/* ---------- Command Center accents ---------- */
html[data-theme="forest"] .settings-console .sec-tile{
  background: var(--forest-elev);
  border: 1px solid var(--forest-border);
  color: var(--forest-ink);
  border-radius: 12px;
}
html[data-theme="forest"] .settings-console .sec-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(9,30,22,.10);
}
html[data-theme="forest"] .settings-console .sec-icon{
  background: #e7f7ef;
  color:#0b3b2a;
  border: 1px solid var(--forest-border);
}

/* Theme swatches */
html[data-theme="forest"] .settings-console .swatch{
  border:1px solid var(--forest-border);
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'>\
  <polygon points='50,12 38,30 62,30' stroke='%230b3f2d' stroke-opacity='.18' stroke-width='3'/>\
  <polygon points='50,28 34,50 66,50' stroke='%230b3f2d' stroke-opacity='.14' stroke-width='3'/>\
</svg>") center/80% 80% no-repeat,
    linear-gradient(135deg,#e8fbef,#cdeedd);
}
html[data-theme="forest"] .settings-console .swatch-name{
  background: rgba(255,255,255,.85);
  color: var(--forest-ink);
}

/* ---------- Highlights & Validation ---------- */
html[data-theme="forest"] .mark-hit{
  background: #fff59d;
  color: #0b2f22;
  padding: 0 2px;
  border: 1px solid #f3e27a;
}

html[data-theme="forest"] .form-control.scripture-valid,
html[data-theme="forest"] .search-input.scripture-valid{
  border-color: var(--forest-success);
  background:#f0fff6;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

html[data-theme="forest"] .form-control.scripture-invalid,
html[data-theme="forest"] .search-input.scripture-invalid{
  border-color: var(--forest-danger);
  background:#fff1f3;
  box-shadow: 0 0 0 3px rgba(225,29,72,.18);
}

/* Scripture/Source state chips */
html[data-theme="forest"] .scripture-pill-invalid{
  background:#ffe6ea;
  border:1px solid #f3a5b4;
  color:#7a1d2a;
}
html[data-theme="forest"] .scripture-pill-wol{
  background:#e6fbff;
  border:1px solid #a8dcf3;
  color:#0f3d4f;
}

/* ---------- Menus ---------- */
html[data-theme="forest"] .user-menu,
html[data-theme="forest"] .mobile-menu-inner{
  background: var(--forest-face);
  border: 1px solid var(--forest-border);
}
html[data-theme="forest"] .user-menu .menu-item:hover,
html[data-theme="forest"] .mobile-link:hover{
  background:#ecfdf5;
}

/* ---------- Tables ---------- */
html[data-theme="forest"] table{ border-collapse: collapse; }
html[data-theme="forest"] th,
html[data-theme="forest"] td{
  border:1px solid var(--forest-border);
  background:#ffffff;
  color: var(--forest-ink);
}

/* ---------- Misc ---------- */
html[data-theme="forest"] .topbar-wrap.is-scrolled{
  box-shadow: 0 6px 24px rgba(3,25,19,.20);
  border-bottom-color: rgba(12,58,43,.25);
}