/* ============================================================
   SyFoCloud Search — SynoForce brand theme for SearXNG (simple)
   Auto light/dark via prefers-color-scheme; Preferences override
   respected (theme-auto / theme-light / theme-dark). Overrides the
   theme's own CSS custom properties, so all components stay cohesive.
   ============================================================ */

/* ---------- LIGHT  (auto @ OS-light  +  forced light) ---------- */
html.theme-auto,
html.theme-light {
  --color-base-background: #F7FAFC !important;
  --color-base-background-mobile: #F7FAFC !important;
  --color-base-font: #475569 !important;
  --color-base-font-rgb: 71, 85, 105 !important;

  --color-header-background: #FFFFFF !important;
  --color-header-border: #E2E8F0 !important;
  --color-footer-background: #FFFFFF !important;
  --color-footer-border: #E2E8F0 !important;

  --color-search-background: #FFFFFF !important;
  --color-search-background-hover: #FFFFFF !important;
  --color-search-border: #E2E8F0 !important;
  --color-search-font: #0E182E !important;
  --color-search-shadow: 0 2px 10px rgba(1, 162, 253, 0.10) !important;

  --color-btn-background: #01A2FD !important;
  --color-btn-font: #FFFFFF !important;

  --color-categories-item-selected: rgba(1, 162, 253, 0.08) !important;
  --color-categories-item-selected-font: #01A2FD !important;
  --color-categories-item-border-selected: #01A2FD !important;

  --color-result-background: #FFFFFF !important;
  --color-result-border: #E2E8F0 !important;
  --color-result-link-font: #253E74 !important;
  --color-result-link-font-highlight: #0E182E !important;
  --color-result-link-visited-font: #64748B !important;
  --color-result-url-font: #6B7280 !important;
  --color-result-search-url-font: #6B7280 !important;
  --color-result-search-url-border: #E2E8F0 !important;
  --color-result-publishdate-font: #94A3B8 !important;
  --color-result-description-highlight-font: #0E182E !important;
  --color-result-detail-background: #F7FAFC !important;
  --color-result-detail-font: #475569 !important;
  --color-result-engines-font: #94A3B8 !important;
  --color-result-vim-selected: rgba(1, 162, 253, 0.10) !important;

  --color-url-font: #01A2FD !important;
  --color-url-visited-font: #64748B !important;

  --color-answer-background: #FFFFFF !important;
  --color-answer-font: #0E182E !important;

  --color-autocomplete-background: #FFFFFF !important;
  --color-autocomplete-background-hover: #EDF2F7 !important;
  --color-autocomplete-border: #E2E8F0 !important;
  --color-autocomplete-font: #0E182E !important;

  --color-sidebar-background: #FFFFFF !important;
  --color-sidebar-border: #E2E8F0 !important;
  --color-sidebar-font: #253E74 !important;

  --color-show-btn-background: #EDF2F7 !important;
  --color-show-btn-font: #253E74 !important;
  --color-backtotop-background: #FFFFFF !important;
  --color-backtotop-border: #E2E8F0 !important;
  --color-backtotop-font: #01A2FD !important;

  --color-favicon-background-color: #EDF2F7 !important;
  --color-favicon-border-color: #E2E8F0 !important;
  --color-loading-indicator: #01A2FD !important;

  --color-error: #EF4444 !important;
  --color-error-background: #FEF2F2 !important;
  --color-success: #10B981 !important;
  --color-success-background: #ECFDF5 !important;
  --color-warning: #F59E0B !important;
  --color-warning-background: #FFFBEB !important;
}

/* ---------- DARK  (auto @ OS-dark) ---------- */
@media (prefers-color-scheme: dark) {
  html.theme-auto {
    --color-base-background: #070C17 !important;
    --color-base-background-mobile: #070C17 !important;
    --color-base-font: #A0AEC0 !important;
    --color-base-font-rgb: 160, 174, 192 !important;

    --color-header-background: #0E182E !important;
    --color-header-border: #17213A !important;
    --color-footer-background: #0E182E !important;
    --color-footer-border: #17213A !important;

    --color-search-background: #0E182E !important;
    --color-search-background-hover: #0E182E !important;
    --color-search-border: #253E74 !important;
    --color-search-font: #FFFFFF !important;
    --color-search-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;

    --color-btn-background: #01A2FD !important;
    --color-btn-font: #FFFFFF !important;

    --color-categories-item-selected: rgba(74, 188, 254, 0.12) !important;
    --color-categories-item-selected-font: #4ABCFE !important;
    --color-categories-item-border-selected: #4ABCFE !important;

    --color-result-background: #0E182E !important;
    --color-result-border: #17213A !important;
    --color-result-link-font: #4ABCFE !important;
    --color-result-link-font-highlight: #FFFFFF !important;
    --color-result-link-visited-font: #8B9BC4 !important;
    --color-result-url-font: #7B8CA6 !important;
    --color-result-search-url-font: #7B8CA6 !important;
    --color-result-search-url-border: #17213A !important;
    --color-result-publishdate-font: #64748B !important;
    --color-result-description-highlight-font: #FFFFFF !important;
    --color-result-detail-background: #0B1220 !important;
    --color-result-detail-font: #A0AEC0 !important;
    --color-result-engines-font: #64748B !important;
    --color-result-vim-selected: rgba(1, 162, 253, 0.16) !important;

    --color-url-font: #4ABCFE !important;
    --color-url-visited-font: #8B9BC4 !important;

    --color-answer-background: #0E182E !important;
    --color-answer-font: #FFFFFF !important;

    --color-autocomplete-background: #0E182E !important;
    --color-autocomplete-background-hover: #17213A !important;
    --color-autocomplete-border: #253E74 !important;
    --color-autocomplete-font: #FFFFFF !important;

    --color-sidebar-background: #0E182E !important;
    --color-sidebar-border: #17213A !important;
    --color-sidebar-font: #E2E8F0 !important;

    --color-show-btn-background: #17213A !important;
    --color-show-btn-font: #E2E8F0 !important;
    --color-backtotop-background: #0E182E !important;
    --color-backtotop-border: #17213A !important;
    --color-backtotop-font: #4ABCFE !important;

    --color-favicon-background-color: #17213A !important;
    --color-favicon-border-color: #253E74 !important;
    --color-loading-indicator: #01A2FD !important;

    --color-error: #F87171 !important;
    --color-error-background: #2A1213 !important;
    --color-success: #34D399 !important;
    --color-success-background: #0C2A20 !important;
    --color-warning: #FBBF24 !important;
    --color-warning-background: #2A200A !important;
  }
}

/* ---------- DARK  (forced dark) ---------- */
html.theme-dark {
  --color-base-background: #070C17 !important;
  --color-base-background-mobile: #070C17 !important;
  --color-base-font: #A0AEC0 !important;
  --color-base-font-rgb: 160, 174, 192 !important;

  --color-header-background: #0E182E !important;
  --color-header-border: #17213A !important;
  --color-footer-background: #0E182E !important;
  --color-footer-border: #17213A !important;

  --color-search-background: #0E182E !important;
  --color-search-background-hover: #0E182E !important;
  --color-search-border: #253E74 !important;
  --color-search-font: #FFFFFF !important;
  --color-search-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;

  --color-btn-background: #01A2FD !important;
  --color-btn-font: #FFFFFF !important;

  --color-categories-item-selected: rgba(74, 188, 254, 0.12) !important;
  --color-categories-item-selected-font: #4ABCFE !important;
  --color-categories-item-border-selected: #4ABCFE !important;

  --color-result-background: #0E182E !important;
  --color-result-border: #17213A !important;
  --color-result-link-font: #4ABCFE !important;
  --color-result-link-font-highlight: #FFFFFF !important;
  --color-result-link-visited-font: #8B9BC4 !important;
  --color-result-url-font: #7B8CA6 !important;
  --color-result-search-url-font: #7B8CA6 !important;
  --color-result-search-url-border: #17213A !important;
  --color-result-publishdate-font: #64748B !important;
  --color-result-description-highlight-font: #FFFFFF !important;
  --color-result-detail-background: #0B1220 !important;
  --color-result-detail-font: #A0AEC0 !important;
  --color-result-engines-font: #64748B !important;
  --color-result-vim-selected: rgba(1, 162, 253, 0.16) !important;

  --color-url-font: #4ABCFE !important;
  --color-url-visited-font: #8B9BC4 !important;

  --color-answer-background: #0E182E !important;
  --color-answer-font: #FFFFFF !important;

  --color-autocomplete-background: #0E182E !important;
  --color-autocomplete-background-hover: #17213A !important;
  --color-autocomplete-border: #253E74 !important;
  --color-autocomplete-font: #FFFFFF !important;

  --color-sidebar-background: #0E182E !important;
  --color-sidebar-border: #17213A !important;
  --color-sidebar-font: #E2E8F0 !important;

  --color-show-btn-background: #17213A !important;
  --color-show-btn-font: #E2E8F0 !important;
  --color-backtotop-background: #0E182E !important;
  --color-backtotop-border: #17213A !important;
  --color-backtotop-font: #4ABCFE !important;

  --color-favicon-background-color: #17213A !important;
  --color-favicon-border-color: #253E74 !important;
  --color-loading-indicator: #01A2FD !important;

  --color-error: #F87171 !important;
  --color-error-background: #2A1213 !important;
  --color-success: #34D399 !important;
  --color-success-background: #0C2A20 !important;
  --color-warning: #FBBF24 !important;
  --color-warning-background: #2A200A !important;
}

/* ============================================================
   Structure — modern layer (radius 8, 8/16/24 spacing, shadows)
   ============================================================ */

body, input, button, select, textarea, #q {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Search box — keep the theme's unified pill (input rounds its LEFT corners,
   button rounds its RIGHT corners, flush divider between). Do NOT set radius
   on #q / #send_search or they split into two detached shapes. Just widen the
   box a touch and give the button the brand gradient, flush to the edge. */
.search_box {
  max-width: 48rem !important;
}
#send_search {
  background: linear-gradient(135deg, #01A2FD 0%, #4ABCFE 100%) !important;
  color: #FFFFFF !important;
  margin-right: 0 !important;
}
/* Clear (×) button: the theme keeps its background box + divider even when the
   field is empty (only the glyph hides), and its :hover recolors the glyph to
   the background so it vanishes. Fix: no box, hide fully when empty, glyph stays
   visible and turns brand-blue on hover. */
#clear_search {
  background: transparent !important;
  border-left: none !important;
  color: var(--color-result-url-font) !important;
}
#clear_search:hover {
  color: #01A2FD !important;
}
/* Hide the clear button whenever the field is empty — driven by the input's
   own :placeholder-shown state (deterministic, not the theme's JS class), with
   the .empty class as a fallback. */
.search_box:has(#q:placeholder-shown) #clear_search,
#clear_search.empty {
  display: none !important;
}

/* Wider result column. Two things were making the cards narrow:
   1) --center-page-width was a fixed per-breakpoint value that wasted screen;
      use min(cap, viewport-margin) so it scales with the actual window.
   2) the sidebar is a fixed 25rem (400px) column that only holds a couple of
      collapsibles — shrink it to 15rem so the reclaimed width goes to cards.
   Scoped to >=62rem (the wide two-column layout); mobile/narrow untouched. */
@media screen and (min-width: 62rem) {
  #main_results {
    --center-page-width: min(78rem, calc(100vw - 9rem)) !important;
  }
  #main_results #results:not(.only_template_images, .image-detail-open) {
    grid-template-columns: calc(var(--center-page-width) - 4rem - 15rem) 15rem !important;
    column-gap: 4rem !important;
  }
}

/* Category tabs -> pills */
.category_button,
#categories .category_button,
label.category_button {
  border-radius: 999px !important;
  padding-block: 6px !important;
  padding-inline: 16px !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Results -> cards with hover lift.
   EXCLUDE image results: those use a tight masonry grid + a JS-driven detail
   pane, and card padding/margins + a hover transform there cause the grid to
   thrash and the detail pane to flash. Cards apply to text results only. */
article.result:not(.result-images) {
  background: var(--color-result-background);
  border: 1px solid var(--color-result-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-block-end: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
article.result:not(.result-images):hover {
  box-shadow: 0 6px 18px rgba(1, 162, 253, 0.10);
  border-color: #4ABCFE;
  transform: translateY(-1px);
}
/* Keep image tiles fully native — no card, no animation */
article.result.result-images {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}
article.result h3 {
  font-weight: 600;
  line-height: 1.35;
  margin-block: 0 2px;
}
article.result h3 a:hover {
  text-decoration: underline;
}
article.result:not(.result-images) img {
  border-radius: 6px;
}

/* Answer + infobox/sidebar -> cards */
.answer,
#sidebar .infobox,
aside#sidebar .infobox {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Autocomplete dropdown */
.autocomplete,
#autocomplete {
  border-radius: 10px;
  overflow: hidden;
}

/* Focus ring = brand cyan; content links underline on hover */
:focus-visible {
  outline: 2px solid #2DE2E6 !important;
  outline-offset: 2px;
}
::selection {
  background: rgba(1, 162, 253, 0.22);
}

/* Back-to-top / pill buttons a touch rounder */
#backToTop {
  border-radius: 10px !important;
}

/* Download button injected into the image detail pane (custom.js) */
.sxng-img-download {
  cursor: pointer;
  font-weight: 600;
  color: #01A2FD !important;
}
.sxng-img-download:hover {
  color: #4ABCFE !important;
  text-decoration: underline;
}

/* ============================================================
   Glass & glow polish (brand: blue #01A2FD, cyan #2DE2E6)
   Translucent surfaces + subtle neon glow. Light/dark aware.
   ============================================================ */
html.theme-auto,
html.theme-light {
  --sxng-glass-bg: rgba(255, 255, 255, 0.72);
  --sxng-glass-border: rgba(1, 162, 253, 0.22);
  --sxng-card-bg: rgba(255, 255, 255, 0.78);
  --sxng-ambient: radial-gradient(70% 55% at 50% -8%, rgba(1, 162, 253, 0.08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  html.theme-auto {
    --sxng-glass-bg: rgba(14, 24, 46, 0.55);
    --sxng-glass-border: rgba(45, 226, 230, 0.16);
    --sxng-card-bg: rgba(14, 24, 46, 0.55);
    --sxng-ambient: radial-gradient(72% 55% at 50% -10%, rgba(1, 162, 253, 0.14), rgba(45, 226, 230, 0.05) 42%, transparent 72%);
  }
}
html.theme-dark {
  --sxng-glass-bg: rgba(14, 24, 46, 0.55);
  --sxng-glass-border: rgba(45, 226, 230, 0.16);
  --sxng-card-bg: rgba(14, 24, 46, 0.55);
  --sxng-ambient: radial-gradient(72% 55% at 50% -10%, rgba(1, 162, 253, 0.14), rgba(45, 226, 230, 0.05) 42%, transparent 72%);
}

/* Ambient glow behind the page (keeps the theme's base background colour) */
body {
  background-image: var(--sxng-ambient) !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* --- Search box: one glass pill, glow on focus (not just the input) --- */
#q:focus,
#q:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#q {
  background: transparent !important;
}
.search_box {
  background: var(--sxng-glass-bg) !important;
  border: 1px solid var(--sxng-glass-border) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.search_box:focus-within {
  border-color: rgba(45, 226, 230, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(45, 226, 230, 0.55),
              0 0 22px rgba(45, 226, 230, 0.30),
              0 10px 34px rgba(0, 0, 0, 0.32) !important;
}
#send_search {
  box-shadow: 0 0 16px rgba(1, 162, 253, 0.45) !important;
}

/* --- Result cards: faint glass + brand glow on hover (text results only) --- */
article.result:not(.result-images) {
  background: var(--sxng-card-bg) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
article.result:not(.result-images):hover {
  box-shadow: 0 8px 24px rgba(1, 162, 253, 0.16),
              0 0 0 1px rgba(45, 226, 230, 0.28) !important;
}

/* Answer / infobox panels get the same glass treatment */
.answer,
#sidebar .infobox {
  background: var(--sxng-card-bg) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--sxng-glass-border) !important;
}