/* ==========================================================================
   ROFSS — global dark mode
   Scoped entirely under html.dark, toggled by js/theme.js. The site's
   colors are hardcoded as bgcolor="" attributes and inline style="color:..."
   declarations throughout every page (legacy table-based markup), so this
   file overrides them with attribute selectors instead of rewriting every
   element. Add a new rule here whenever a new hardcoded color shows up on
   a page — do not hand-edit colors in the HTML files themselves.
   ========================================================================== */

/* ---------- page + table background colors (bgcolor="...") ---------- */
html.dark body[bgcolor="#1f7200"],
html.dark [bgcolor="#1f7200"] { background-color: #04140b !important; }

html.dark [bgcolor="#0f3b00"] { background-color: #03100a !important; }

html.dark [bgcolor="#8aaf7d"] { background-color: #13301f !important; }

html.dark [bgcolor="#8ebb7e"] { background-color: #0c1912 !important; }

html.dark [bgcolor="#d1dcce"] { background-color: #0e1f16 !important; }

html.dark [bgcolor="#ffffff"] { background-color: #0a140d !important; }

html.dark [bgcolor="#f5f8f3"] { background-color: #0e1f16 !important; }

/* ---------- inline text colors (style="...color:#XXXXXX...") ---------- */
html.dark [style*="color:#0f3b00"] { color: #d9ecd8 !important; }
html.dark [style*="color:#103c00"] { color: #b9d1b7 !important; }
html.dark [style*="color:#5a5a5a"] { color: #8fa892 !important; }
html.dark [style*="color:#d1ddce"] { color: #e8f4e6 !important; }
html.dark [style*="color:#ffffff"] { color: #e8f4e6 !important; }
html.dark [style*="color:#f5f8f3"] { color: #e8f4e6 !important; }
html.dark [style*="color:#1f7200"] { color: #7fd68c !important; }
html.dark [style*="color:rgb(160,0,0)"] { color: #ff8a7a !important; }
html.dark [style*="color:rgb(210,0,0)"] { color: #ff9a8a !important; }

/* <font color="..."> tags (legacy markup) */
html.dark font[color="rgb(160,0,0)"] { color: #ff8a7a !important; }

/* generic anchor + heading colors that aren't inline */
html.dark a { color: #eafbe6; }
html.dark .newsdate { color: #ff9a8a; }
html.dark .newstext { color: #b9d1b7; }
html.dark .newsmore { color: #eafbe6; }
html.dark .style1 { color: #ff8a7a; }
html.dark .obyavlenie a:link,
html.dark .obyavlenie a:visited { color: #ff8a7a; }
html.dark .obyavlenie a:hover { color: #ffb0a2; }

/* ---------- images: dim photos, invert flat line-art/icons ---------- */
/* Photos (jpg content shots) get dimmed slightly so they don't glare
   against the dark background. Flat 2-color GIF nav icons/wordmark get
   inverted so they read as light-on-dark instead of near-invisible
   dark-on-dark. */
html.dark img[src$=".jpg"] {
  filter: brightness(0.82) saturate(0.9);
}
html.dark img[src$=".gif"],
html.dark img[src*="wordmark"],
html.dark img[src*="rofss-mark"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}
/* Photographic PNGs (QR code) should not be inverted */
html.dark img[src*="join-qr"] {
  filter: none;
}

/* ---------- contact form fields ---------- */
html.dark #rofss-contact-form input[type="text"],
html.dark #rofss-contact-form input[type="email"],
html.dark #rofss-contact-form textarea {
  background: #0a140d;
  color: #d9ecd8;
  border-color: #1f7a4d !important;
}
html.dark #rofss-contact-form label {
  color: #d9ecd8;
}

/* ---------- the yellow "join now" banner ---------- */
html.dark [style*="background-color:yellow"] {
  background-color: #3a3300 !important;
  border-color: #ff6b5e !important;
}

/* ---------- settings popup (already themed via CSS vars, but the
   fixed hex fallbacks in i18n-widget.css need a dark pass too) ---------- */
html.dark #rofssSettingsPopup {
  background: #0e1f16;
  border-color: #1f7a4d;
}
html.dark #rofssSettingsPopup .rofss-settings-head {
  background: #04140b;
  color: #eafbe6;
}
html.dark #rofssSettingsPopup .rofss-settings-close {
  color: #eafbe6;
}
html.dark #rofssSettingsPopup .rofss-settings-label {
  color: #eafbe6;
}
html.dark #rofssSettingsPopup .rofss-lang-btn,
html.dark #rofssSettingsPopup .rofss-theme-btn {
  background: #13301f;
  border-color: #1f7a4d;
  color: #d9ecd8;
}
html.dark #rofssSettingsPopup .rofss-lang-btn.is-active,
html.dark #rofssSettingsPopup .rofss-theme-btn.is-active {
  background: #1f7a4d;
  color: #eafbe6;
}

/* ---------- mobile "built for desktop" popup ---------- */
html.dark #rofssMobileBannerPopup {
  background: #0e1f16;
  border-color: #1f7a4d;
}
html.dark #rofssMobileBannerPopup .rofss-mobile-banner-head {
  background: #04140b;
  color: #eafbe6;
}
html.dark #rofssMobileBannerPopup .rofss-mobile-banner-close {
  color: #eafbe6;
}
html.dark #rofssMobileBannerPopup .rofss-mobile-banner-body p {
  color: #d9ecd8;
}
html.dark #rofssMobileBannerPopup .rofss-mobile-banner-ok {
  background: #1f7a4d;
  border-color: #1f7a4d;
  color: #eafbe6;
}

/* ---------- pixel-canvas preview widget on the homepage ---------- */
html.dark .rofss-canvas-widget {
  background: #0a140d;
  border-color: #16281c;
}
html.dark .rofss-panel-head,
html.dark .rofss-board-toolbar {
  background: #0e1e14;
  border-color: #16281c;
  color: #6c8873;
}
html.dark .rofss-canvas-grid {
  background-color: #0a140d;
}
html.dark .rofss-canvas-mock-text {
  color: #6c8873;
}
html.dark .rofss-board-eraser {
  background: #16281c;
  border-color: #2a4335;
}
html.dark .rofss-board-eraser svg {
  color: #8fae87;
}
html.dark .rofss-board-eraser.active {
  border-color: #eafbe6;
  box-shadow: 0 0 0 2px #0a140d, 0 0 0 3px #eafbe6;
}
html.dark .rofss-board-eraser:hover {
  border-color: #8fae87;
}
html.dark .rofss-board-divider {
  background: #2a4335;
}
html.dark .rofss-board-zoom {
  color: #8fae87;
}
html.dark .rofss-board-zoom-btn {
  background: #16281c;
  border-color: #2a4335;
  color: #8fae87;
}
html.dark .rofss-board-zoom-btn:hover {
  border-color: #eafbe6;
  color: #eafbe6;
}
html.dark .rofss-board-swatch.active {
  box-shadow: 0 0 0 2px #0a140d, 0 0 0 3px #eafbe6;
}