/*
 * vii.css — Custom dark theme for SearXNG (search.7thspectrum.net)
 * v10 — clean rewrite, no conflicting grid rules
 */

/* ══════════════════════════════════════════════════════════════════════════
   CSS VARIABLE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

:root.theme-dark,
:root.theme-black {
  --color-base-font:                         #e8e6e3;
  --color-base-font-rgb:                     232, 230, 227;
  --color-base-background:                   #0f0f10;
  --color-base-background-mobile:            #0f0f10;
  --color-url-font:                          #6a9e6a;
  --color-url-visited-font:                  #8a7a9a;
  --color-header-background:                 #0f0f10;
  --color-header-border:                     transparent;
  --color-footer-background:                 #0a0a0b;
  --color-footer-border:                     #2a2a2c;
  --color-sidebar-border:                    #2a2a2c;
  --color-sidebar-font:                      #9a9a9c;
  --color-sidebar-background:                #0f0f10;
  --color-backtotop-font:                    #8a8a8c;
  --color-backtotop-border:                  #3a3a3c;
  --color-backtotop-background:              #252528;
  --color-btn-background:                    #3a3a3c;
  --color-btn-font:                          #e8e6e3;
  --color-show-btn-background:               #252528;
  --color-show-btn-font:                     #aaaaaa;
  --color-search-border:                     transparent;
  --color-search-shadow:                     none;
  --color-search-background:                 #252528;
  --color-search-font:                       #e8e6e3;
  --color-search-background-hover:           #252528;
  --color-error:                             #c0614a;
  --color-warning:                           #b89a4a;
  --color-success:                           #6a9e6a;
  --color-categories-item-selected-font:     #e8e6e3;
  --color-categories-item-border-selected:   #e8e6e3;
  --color-autocomplete-font:                 #e8e6e3;
  --color-autocomplete-border:               #3a3a3c;
  --color-autocomplete-shadow:               0 4px 20px rgba(0,0,0,0.5);
  --color-autocomplete-background:           #252528;
  --color-autocomplete-background-hover:     #303035;
  --color-answer-font:                       #b0b0b2;
  --color-answer-background:                 #1e1e21;
  --color-result-keyvalue-col-table:         #0f0f10;
  --color-result-keyvalue-odd:               #0f0f10;
  --color-result-keyvalue-even:              #1e1e21;
  --color-result-background:                 #1e1e21;
  --color-result-border:                     #2a2a2c;
  --color-result-url-font:                   #6a9e6a;
  --color-result-vim-selected:               #2a2a2ccc;
  --color-result-vim-arrow:                  #6a9e6a;
  --color-result-description-highlight-font: #e8e6e3;
  --color-result-link-font:                  #e8e6e3;
  --color-result-link-font-highlight:        #ffffff;
  --color-result-link-visited-font:          #9a9098;
  --color-result-publishdate-font:           #606062;
  --color-result-engines-font:               #707072;
  --color-result-search-url-border:          #3a3a3c;
  --color-result-search-url-font:            #e8e6e3;
  --color-result-detail-font:                #e8e6e3;
  --color-result-detail-label-font:          #8a8a8c;
  --color-result-detail-background:          #0a0a0b;
  --color-result-detail-hr:                  #3a3a3c;
  --color-result-detail-link:                #6a9e6a;
  --color-result-detail-loader-border:       rgba(255,255,255,0.1);
  --color-result-detail-loader-borderleft:   rgba(0,0,0,0);
  --color-result-image-span-font:            #e8e6e3;
  --color-result-image-span-font-selected:   #ffffff;
  --color-result-image-background:           #0f0f10;
  --color-settings-tr-hover:                 #252528;
  --color-settings-engine-description-font:  #8a8a8c;
  --color-settings-table-group-background:   #0a0a0b;
  --color-toolkit-badge-font:                #e8e6e3;
  --color-toolkit-badge-background:          #3a3a3c;
  --color-toolkit-kbd-font:                  #e8e6e3;
  --color-toolkit-kbd-background:            #0a0a0b;
  --color-toolkit-dialog-border:             #3a3a3c;
  --color-toolkit-dialog-background:         #0f0f10;
  --color-toolkit-tabs-label-border:         #0f0f10;
  --color-toolkit-tabs-section-border:       #3a3a3c;
  --color-toolkit-select-background:         #252528;
  --color-toolkit-select-border:             #3a3a3c;
  --color-toolkit-select-background-hover:   #303035;
  --color-toolkit-input-text-font:           #e8e6e3;
  --color-toolkit-checkbox-onoff-off-background:      #252528;
  --color-toolkit-checkbox-onoff-on-background:       #252528;
  --color-toolkit-checkbox-onoff-on-mark-background:  #6a9e6a;
  --color-toolkit-checkbox-onoff-on-mark-color:       #0f0f10;
  --color-toolkit-checkbox-onoff-off-mark-background: #4a4a4c;
  --color-toolkit-checkbox-onoff-off-mark-color:      #b0b0b2;
  --color-toolkit-checkbox-label-background:  #252528;
  --color-toolkit-checkbox-label-border:      #3a3a3c;
  --color-toolkit-checkbox-input-border:      #6a9e6a;
  --color-toolkit-engine-tooltip-border:      #3a3a3c;
  --color-toolkit-engine-tooltip-background:  #0f0f10;
  --color-toolkit-loader-border:              rgba(255,255,255,0.1);
  --color-toolkit-loader-borderleft:          rgba(0,0,0,0);
  --color-doc-code:                           #a8c8a8;
  --color-doc-code-background:               #252528;
  --color-bar-chart-primary:                 #6a9e6a;
  --color-bar-chart-secondary:               #b89a4a;
  --color-favicon-background-color:          #3a3a3c;
  --color-favicon-border-color:              #4a4a4c;
  --color-line-number:                       #4a4a4c;
  --color-image-resolution-background:       rgba(0,0,0,0.6);
  --color-image-resolution-font:             #e8e6e3;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --color-base-font:                         #e8e6e3;
    --color-base-background:                   #0f0f10;
    --color-base-background-mobile:            #0f0f10;
    --color-url-font:                          #6a9e6a;
    --color-header-background:                 #0f0f10;
    --color-header-border:                     transparent;
    --color-footer-background:                 #0a0a0b;
    --color-search-border:                     transparent;
    --color-search-shadow:                     none;
    --color-search-background:                 #252528;
    --color-search-font:                       #e8e6e3;
    --color-search-background-hover:           #252528;
    --color-categories-item-selected-font:     #e8e6e3;
    --color-categories-item-border-selected:   #e8e6e3;
    --color-result-background:                 #1e1e21;
    --color-result-border:                     #2a2a2c;
    --color-result-url-font:                   #6a9e6a;
    --color-result-link-font:                  #e8e6e3;
    --color-result-link-visited-font:          #9a9098;
    --color-sidebar-font:                      #9a9a9c;
    --color-autocomplete-background:           #252528;
    --color-answer-font:                       #b0b0b2;
    --color-answer-background:                 #1e1e21;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL
   ══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  background: #0f0f10 !important;
  color: #e8e6e3 !important;
}

* { box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE LOGO
   ══════════════════════════════════════════════════════════════════════════ */

.index .title {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cg transform='translate(-40.921 -17.417)'%3E%3Ccircle cx='75.921' cy='53.903' r='30' fill='none' stroke='%23e8e6e3' stroke-width='10'/%3E%3Cpath d='M67.515 37.915a18 18 0 0 1 21.051 3.313 18 18 0 0 1 3.138 21.078' fill='none' stroke='%23e8e6e3' stroke-width='5'/%3E%3Crect width='18.846' height='39.963' x='3.706' y='122.09' transform='rotate(-46.235)' fill='%23e8e6e3'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-height: 4rem !important;
  margin: 4rem auto !important;
}

.title h1, .index .title h1 {
  visibility: hidden !important;
  font-size: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS PAGE SVG LOGO
   ══════════════════════════════════════════════════════════════════════════ */

#search_logo svg {
  filter: brightness(0) invert(1) !important;
  opacity: 0.88 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */

#search_header {
  background: #0f0f10 !important;
  border-bottom: 1px solid transparent !important;
  /* Keep original grid — 2 cols, 2 rows */
  grid-template-columns: 3rem 1fr !important;
  grid-template-areas:
    "logo   search"
    "spacer categories" !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH BOX
   ══════════════════════════════════════════════════════════════════════════ */

.search_box {
  border: 1px solid #3a3a3c !important;
  border-radius: 0.8rem !important;
  background: #252528 !important;
  box-shadow: none !important;
}

#search_view:focus-within .search_box {
  border: 1px solid #4a4a4c !important;
  border-bottom: 1px solid #4a4a4c !important;
  border-radius: 0.8rem !important;
  box-shadow: none !important;
}

#search_view:focus-within .search_box * {
  box-shadow: none !important;
  border: none !important;
}

#search_view:focus-within #q {
  border-radius: 0.8rem 0 0 0.8rem !important;
}

#search_view:focus-within #send_search {
  border-radius: 0 0.8rem 0.8rem 0 !important;
}

#q {
  font-size: 0.92rem !important;
  color: #e8e6e3 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

#q::placeholder { color: #606062 !important; }

#clear_search {
  background: transparent !important;
  border: none !important;
  color: #606062 !important;
  outline: none !important;
}

#clear_search:hover {
  color: #aaaaaa !important;
  background: transparent !important;
}

#send_search {
  background: transparent !important;
  border: none !important;
  border-radius: 0 0.8rem 0.8rem 0 !important;
  color: #808082 !important;
  outline: none !important;
}

#send_search:hover {
  background: transparent !important;
  color: #e8e6e3 !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTOCOMPLETE — border only when open
   ══════════════════════════════════════════════════════════════════════════ */

.autocomplete {
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  background: #252528 !important;
}

.autocomplete.open {
  border: 1px solid #3a3a3c !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV — About, Preferences
   ══════════════════════════════════════════════════════════════════════════ */

header a,
header nav a,
a.pure-menu-link,
.pure-menu-link {
  font-size: 0.68rem !important;
  color: #606062 !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  text-decoration: none !important;
}

header a:hover,
header nav a:hover,
a.pure-menu-link:hover,
.pure-menu-link:hover {
  color: #aaaaaa !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORIES + FILTERS ROW
   
   After template edit, search.html has:
     #search_header (grid: logo/search / spacer/categories)
       ...
       <div class="categories_filters_row">   ← NEW WRAPPER
         #categories.search_categories
         .search_filters
       </div>
   
   The wrapper takes grid-area:categories.
   Inside it, flex-row puts categories left, filters immediately after.
   ══════════════════════════════════════════════════════════════════════════ */

.categories_filters_row {
  grid-area: categories !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  /* Don't stretch to full width — only as wide as content + filters */
  width: 100% !important;
  overflow: visible !important;
}

/* Categories: natural width, flex row of buttons */
.categories_filters_row #categories.search_categories {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  /* Clear any grid-area from compiled CSS */
  grid-area: unset !important;
  overflow: visible !important;
}

/* Filters: immediately after categories, left-aligned, natural width */
.categories_filters_row .search_filters {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.4rem !important;
  margin: 0 0 0 1.5rem !important;
  padding: 0 !important;
  /* Clear any grid placement from compiled or our own CSS */
  grid-area: unset !important;
  position: static !important;
  justify-self: unset !important;
  align-self: unset !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  /* Also clear the compiled margin that assumes filters are standalone */
  margin-top: 0 !important;
  overscroll-behavior-inline: unset !important;
}

/* Category buttons */
button.category_button {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin-right: 1.25rem !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

button.category_button:not(.selected) { color: #808082 !important; }
button.category_button:not(.selected):hover { color: #c0c0c2 !important; }
button.category_button.selected {
  color: #e8e6e3 !important;
  border-bottom: 2px solid #e8e6e3 !important;
}

/* Filter dropdowns */
.search_filters select {
  font-size: 0.7rem !important;
  color: #808082 !important;
  background: #252528 !important;
  border: 1px solid #3a3a3c !important;
  border-radius: 6px !important;
  padding: 0.15rem 0.5rem !important;
  cursor: pointer !important;
  outline: none !important;
}

.search_filters select:hover,
.search_filters select:focus {
  color: #c0c0c2 !important;
  border-color: #4a4a4c !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULT CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.result {
  background: #1e1e21 !important;
  border: 1px solid #2a2a2c !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.1s, background 0.1s !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.result:hover {
  border-color: #3a3a3c !important;
  background: #252528 !important;
}

#main_results .result-file {
  margin: 0 0 8px 0 !important;
  border-radius: 8px !important;
}

article.result {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.result h3 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin: 0 0 3px !important;
  white-space: normal !important;
}

.result h3 a {
  color: #e8e6e3 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  white-space: normal !important;
}

.result h3 a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: #4a4a4c !important;
  text-underline-offset: 2px !important;
}

.result h3 a:visited { color: #9a9098 !important; }

.url_header, .url_wrapper {
  font-size: 0.72rem !important;
  color: #6a9e6a !important;
  font-family: 'SF Mono', 'Fira Mono', 'Consolas', monospace !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.url_header a, .url_wrapper a,
.url_header span, .url_wrapper span { color: #6a9e6a !important; }

.content {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  color: #9a9a9c !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.content b, .content strong {
  color: #d0cec9 !important;
  font-weight: 500 !important;
}

.engines span, .engines a {
  font-size: 0.68rem !important;
  background: #252528 !important;
  color: #707072 !important;
  border: 1px solid #3a3a3c !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  font-family: monospace !important;
}

.published_date, .result-publishdate {
  font-size: 0.72rem !important;
  color: #606062 !important;
}

.answer {
  background: #1e1e21 !important;
  border: 1px solid #2a2a2c !important;
  border-left: 3px solid #4a4a4c !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.82rem !important;
  color: #b0b0b2 !important;
  margin-bottom: 8px !important;
  padding: 0.75rem 1rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#sidebar, .sidebar {
  background: transparent !important;
  color: #9a9a9c !important;
}

#sidebar .infobox {
  background: #1e1e21 !important;
  border: 1px solid #2a2a2c !important;
  border-radius: 8px !important;
  padding: 0.85rem !important;
  margin: 0 0 8px !important;
  font-size: 1rem !important;
}

#sidebar .infobox h2 {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #d0cec9 !important;
  margin: 0 0 0.5rem !important;
}

#sidebar .infobox dt {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: #707072 !important;
}

#sidebar .infobox dd {
  font-size: 0.8rem !important;
  color: #9a9a9c !important;
}

#sidebar .infobox p, #sidebar .infobox .content {
  font-size: 0.8rem !important;
  color: #9a9a9c !important;
  line-height: 1.6 !important;
}

#sidebar .infobox a, #sidebar .infobox .url, #sidebar .infobox .selectable_url {
  font-size: 0.75rem !important;
  color: #6a9e6a !important;
}

#sidebar .infobox img {
  max-width: 100% !important;
  max-height: 10em !important;
  border-radius: 6px !important;
  opacity: 0.9 !important;
}

.sidebar-collapsible { border-top: 1px solid #2a2a2c !important; }
#sidebar-end-collapsible { border-bottom: 1px solid #2a2a2c !important; }

#infoboxes .title, #suggestions .title,
#search_url .title, #engines_msg .title, #apis .title {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #707072 !important;
  margin: 1rem 0 0.35rem !important;
  padding-bottom: 0.25rem !important;
  border-bottom: 1px solid #2a2a2c !important;
}

#suggestions a, #suggestions .suggestion {
  font-size: 0.8rem !important;
  color: #9a9a9c !important;
  text-decoration: none !important;
}

#suggestions a:hover { color: #e8e6e3 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */

.page_number { text-decoration: none !important; }

#pagination a,
#pagination a:link,
#pagination a:visited,
#pagination a:hover,
#pagination a:active,
#pagination a:focus,
#pagination .btn-default,
.numbered_pagination a,
.numbered_pagination a:link,
.numbered_pagination a:visited,
.numbered_pagination a:hover,
.numbered_pagination a:active,
.numbered_pagination a:focus {
  text-decoration: none !important;
  font-size: 0.78rem !important;
  color: #8a8a8c !important;
  background: #1e1e21 !important;
  border: 1px solid #2a2a2c !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.65rem !important;
  display: inline-block !important;
}

#pagination a:hover,
.numbered_pagination a:hover {
  color: #e8e6e3 !important;
  border-color: #3a3a3c !important;
  background: #252528 !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

footer {
  font-size: 0.72rem !important;
  background: #0a0a0b !important;
  border-top: 1px solid #2a2a2c !important;
  color: #6a6a6c !important;
}

footer a, footer a:link, footer a:visited {
  color: #6a6a6c !important;
  text-decoration: none !important;
}

footer a:hover { color: #9a9a9c !important; }

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE RESULTS
   ══════════════════════════════════════════════════════════════════════════ */

.result-images img {
  border-radius: 4px !important;
  opacity: 0.88 !important;
  transition: opacity 0.12s !important;
}

.result-images img:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0f0f10; }
::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4c; }









/* ── Mobile: filters below categories, full width ────────────────────────
   Matches SearXNG's own mobile breakpoint at 50em.
   ──────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 50em) {
  .categories_filters_row {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .categories_filters_row .search_filters {
    margin: 0.4rem 0 0 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .categories_filters_row .search_filters select {
    flex: 1 1 auto !important;
  }
}

/* ── Nav z-index — prevent Preferences icon overlapping search field ─────
   Compiled CSS sets #search_view:focus-within { z-index: 2000 } on mobile.
   Nav needs to stay above that.
   ──────────────────────────────────────────────────────────────────────── */

#links_on_top,
nav#links_on_top {
  position: relative !important;
  z-index: 3000 !important;
}




/* ── Fix #links_on_top positioning — restore absolute, fix z-index ───────
   Compiled: position:absolute; top:2.7rem; right:1rem
   Our position:relative broke it. Restore and just raise z-index.
   ──────────────────────────────────────────────────────────────────────── */

#links_on_top {
  position: absolute !important;
  top: 2.7rem !important;
  right: 1rem !important;
  z-index: 3000 !important;
}

#main_index #links_on_top {
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 3000 !important;
}

/* ── Mobile: fix horizontal overflow and header width ────────────────────
   The categories_filters_row and search_header were expanding past viewport.
   Constrain everything to 100vw on small screens.
   ──────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 50em) {
  #search_header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .categories_filters_row {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .categories_filters_row #categories.search_categories {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .categories_filters_row .search_filters {
    margin: 0.4rem 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
  }

  .categories_filters_row .search_filters select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}