/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO - Global widgets / overlays + large-screen layout.
   Token-driven -> dark/light. Loaded globally.
   ============================================================================ */

/* ---- Large screens: use more width (six's .container is narrow). ----------
   The homepage handles its own full-bleed in landing.css (loaded later). ---- */
@media (min-width: 1400px) {
  #main-body > .container { max-width: min(1680px, 94vw); }
}
@media (min-width: 1920px) {
  #main-body > .container { max-width: 1780px; }
}

/* ---- Modals ---- */
.modal-content { background: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.modal-header, .modal-footer { border-color: var(--border-color) !important; background: var(--bg-muted) !important; }
.modal-header .modal-title { color: var(--text-primary) !important; font-family: var(--font-display); }
.modal-body { color: var(--text-primary) !important; }
.modal .close { color: var(--text-secondary) !important; opacity: .85; text-shadow: none; }
.modal .close:hover { color: var(--text-primary) !important; }

/* ---- Dropdowns ---- */
.dropdown-menu { background: var(--bg-elevated) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--radius) !important; }
.dropdown-menu > li > a, .dropdown-item { color: var(--text-secondary) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-item:hover { background: color-mix(in oklch, var(--primary-color) 12%, transparent) !important; color: var(--primary-strong) !important; }
.dropdown-menu .divider, .dropdown-divider { background: var(--border-color) !important; }
.dropdown-header { color: var(--text-muted) !important; }

/* ---- Tooltips / popovers ---- */
.tooltip-inner { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color); }
.popover { background: var(--bg-elevated) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
.popover-title { background: var(--bg-muted) !important; color: var(--text-primary) !important; border-bottom-color: var(--border-color) !important; }

/* ---- Pagination ---- */
.pagination > li > a, .pagination > li > span { background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.pagination > li > a:hover { background: var(--bg-muted) !important; color: var(--text-primary) !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--text-on-primary) !important; }

/* ---- Badges / generic labels ---- */
.badge { background: color-mix(in oklch, var(--primary-color) 16%, transparent) !important; color: var(--primary-strong) !important; }

/* ---- Header language / currency selectors ---- */
.languageDropdown .dropdown-menu, .currencyDropdown .dropdown-menu, #languageChooserDropdown, #currencyChooserDropdown { background: var(--bg-elevated) !important; }

/* ---- Flash / toast messages ---- */
.toast, .growl, .alert-dismissable { background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }

/* ---- Focus visibility (global, WCAG 2.4.7) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring) !important; outline-offset: 2px;
}

/* ---- Scrollbars (subtle, theme-aware) ---- */
* { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Back to top: bare chevron, theme-aware (kills six's grey box) ---- */
#back-to-top, .back-to-top, a[href="#top"].btn {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--text-muted) !important;
}
/* six wraps the glyph in a hardcoded #ddd chip via `.back-to-top i` — strip it */
.ll-footer .back-to-top i, section#footer .back-to-top i {
  background: none !important; background-color: transparent !important;
  color: inherit !important; padding: 0 !important; border-radius: 0 !important;
  opacity: 1 !important; box-shadow: none !important;
}
#back-to-top:hover, .back-to-top:hover,
#back-to-top:focus-visible, .back-to-top:focus-visible { color: var(--primary-strong) !important; }