/* ============================================================
   greembow — SearXNG "simple" theme overlay
   Loaded last (nginx sub_filter), so !important on the theme's
   CSS custom properties wins over light/dark without touching
   SearXNG's own files. Palette mirrors the home dashboard.
   ============================================================ */
:root {
  --gb-bg:        #0a110d;
  --gb-bg2:       #0c150f;
  --gb-surface:   #101d15;
  --gb-surface2:  #14251a;
  --gb-line:      #22362a;
  --gb-line-soft: #1a2b20;
  --gb-text:      #eef2e9;
  --gb-muted:     #94a89a;
  --gb-faint:     #62766a;
  --gb-green:     #57c26a;
  --gb-glow:      #7ee08f;
  --gb-amber:     #e3b877;

  --color-base-background:        var(--gb-bg) !important;
  --color-base-background-mobile: var(--gb-bg2) !important;
  --color-base-font:              var(--gb-text) !important;
  --color-base-font-rgb:          238, 242, 233 !important;

  --color-header-background: var(--gb-bg2) !important;
  --color-header-border:     var(--gb-line-soft) !important;
  --color-footer-background: var(--gb-bg2) !important;
  --color-footer-border:     var(--gb-line-soft) !important;

  --color-sidebar-background: var(--gb-surface) !important;
  --color-sidebar-border:     var(--gb-line) !important;
  --color-sidebar-font:       var(--gb-text) !important;

  --color-search-background:       var(--gb-surface) !important;
  --color-search-font:             var(--gb-text) !important;
  --color-search-border:           var(--gb-line) !important;
  --color-search-background-hover: var(--gb-green) !important;
  --color-search-shadow:           0 2px 12px #00000066 !important;

  --color-autocomplete-background:       var(--gb-surface) !important;
  --color-autocomplete-background-hover: var(--gb-surface2) !important;
  --color-autocomplete-font:             var(--gb-text) !important;
  --color-autocomplete-border:           var(--gb-line) !important;
  --color-autocomplete-shadow:           0 2px 12px #00000066 !important;

  --color-btn-background:      var(--gb-green) !important;
  --color-btn-font:            #0a110d !important;
  --color-show-btn-background: var(--gb-surface2) !important;
  --color-show-btn-font:       var(--gb-text) !important;

  --color-url-font:         var(--gb-glow) !important;
  --color-url-visited-font: #a7b7a9 !important;

  --color-result-background:                 var(--gb-surface) !important;
  --color-result-border:                     var(--gb-line-soft) !important;
  --color-result-link-font:                  var(--gb-text) !important;
  --color-result-link-font-highlight:        var(--gb-glow) !important;
  --color-result-link-visited-font:          #b9c6bb !important;
  --color-result-url-font:                   var(--gb-green) !important;
  --color-result-search-url-font:            var(--gb-muted) !important;
  --color-result-search-url-border:          var(--gb-line) !important;
  --color-result-publishdate-font:           var(--gb-faint) !important;
  --color-result-engines-font:               var(--gb-faint) !important;
  --color-result-description-highlight-font: var(--gb-glow) !important;
  --color-result-detail-background:          var(--gb-surface2) !important;
  --color-result-detail-font:                var(--gb-text) !important;
  --color-result-detail-link:                var(--gb-green) !important;
  --color-result-detail-hr:                  var(--gb-line) !important;

  --color-answer-background: var(--gb-surface2) !important;
  --color-answer-font:       var(--gb-text) !important;

  --color-categories-item-selected:        var(--gb-green) !important;
  --color-categories-item-selected-font:   var(--gb-glow) !important;  /* selected tab sits on dark, not filled → light green, not dark */
  --color-categories-item-border-selected: var(--gb-green) !important;

  --color-toolkit-badge-background: var(--gb-green) !important;
  --color-toolkit-badge-font:       #0a110d !important;
  --color-toolkit-kbd-background:   var(--gb-surface2) !important;
  --color-toolkit-kbd-font:         var(--gb-text) !important;
  --color-toolkit-select-background:        var(--gb-surface) !important;
  --color-toolkit-select-background-hover:  var(--gb-surface2) !important;
  --color-toolkit-select-border:            var(--gb-line) !important;
  --color-toolkit-dialog-background:        var(--gb-surface) !important;
  --color-toolkit-dialog-border:            var(--gb-line) !important;
  --color-toolkit-input-text-font:          var(--gb-text) !important;

  --color-backtotop-background: var(--gb-surface) !important;
  --color-backtotop-border:     var(--gb-line) !important;
  --color-backtotop-font:       var(--gb-muted) !important;

  --color-loading-indicator:  var(--gb-green) !important;
  --color-bar-chart-primary:   var(--gb-green) !important;
  --color-bar-chart-secondary: var(--gb-amber) !important;
  --color-settings-tr-hover:   var(--gb-surface2) !important;
  --color-settings-table-group-background: var(--gb-surface2) !important;
}

/* soft atmosphere behind everything, like the home dashboard — pinned to the VIEWPORT
   (background-attachment: fixed) so tall result pages don't reveal a scrolling seam
   where the radial fade meets the base colour. Gradient lives on <html>; body is
   transparent so it doesn't repaint its own (scrolling) copy on top. */
html {
  background:
    radial-gradient(120% 90% at 12% -10%, #10241a 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, #0e1b14 0%, transparent 50%),
    var(--gb-bg) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
body { background: transparent !important; }

/* rounder, softer surfaces to match the dashboard's tiles */
#search, .search { border-bottom-color: var(--gb-line-soft) !important; }
.autocomplete, article.result, .result,
.answer, .infobox, #linkto_preferences, .searxng-select {
  border-radius: 14px !important;
}
article.result:hover, .result:hover {
  border-color: color-mix(in srgb, var(--gb-green) 40%, var(--gb-line)) !important;
}
/* accent ONLY the real submit button (the category tabs are <button type=submit> too,
   so a broad rule painted a square glow around every square tab). */
#send_search { box-shadow: 0 0 22px -8px var(--gb-green) !important; }
.category_button { box-shadow: none !important; }

/* top-left logo magnifier is a stock-blue SVG — bring it onto the greembow palette */
#search_logo, #search_logo * { color: var(--gb-green) !important; }
#search_logo svg, #search_logo path, #search_logo g { fill: var(--gb-green) !important; stroke: var(--gb-green) !important; }

/* belt-and-suspenders: selected category label readable even if the theme skips the var */
.category_button.selected, .category_button.selected .category_name { color: var(--gb-glow) !important; }