/*
 * OmniPATH Help Scout Docs - Dark Cyan Theme Override
 * ====================================================
 * 
 * This CSS is designed to be pasted into Help Scout's "Custom CSS" field
 * to override their default light theme with OmniPATH's dark cyan branding.
 * 
 * How to Apply:
 * 1. Log in to Help Scout (https://secure.helpscout.net)
 * 2. Go to Manage → Docs → Settings → Site Settings → Custom Code
 * 3. Paste this entire CSS into the "Custom CSS" field
 * 4. Save and publish
 * 
 * Version: 2.0 - Help Scout Override Edition
 * Last Updated: November 2025
 */

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

/* Body and main container */
body,
#body,
.docs-container,
.site-container,
.beacon-container {
  background: linear-gradient(180deg, #0A1926 0%, #1B2B40 100%) !important;
  color: #ffff !important;
  min-height: 100vh !important;
}

#docsSearch {
  background: #1B2B40;
  background-image: url("https://cdn.prod.website-files.com/667a81acb84289586f5aedf6/6853e79bbe01ba3c855b5b08_body10.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid #1B2B40;
  margin-bottom: 3em;
  padding: 8em 0em 8em 0em;
}

/* Remove any light backgrounds */
* {
  scrollbar-color: rgba(0, 255, 206, 0.3) rgba(10, 25, 38, 0.5) !important;
}

.category-list .category {
  text-align: center;
  display: inline-block;
  width: 29%;
  border: 1px solid #00FFCE !important;
  margin: 0 .8% 60px .8%;
  padding: 1.5em 1em;
}

#searchBar button:hover {
  background: #0D2031 !important;
  border: 1px solid rgba(0, 255, 206, 0.5) !important;
}

#searchBar button {
  color: #00FFCE !important;
  text-shadow: 0;
  background: #0D2031;
  border-radius: 0 5px 5px 0;
  border: 1px solid rgba(0, 255, 206, 1) !important;
}

.category:hover {
  background: #1B2B40 !important;
}

#sidebar form button {
  right: 0px !important;
}

.contentWrapper {
  background: 0;
  border: 0;
  color: 0;
  min-height: 460px;
  padding: 0;
}

#categoryHead .sort select {
  width: 140px;
  height: 42px;
  margin: 0;
  line-height: 14px;
  font-size: 12px;
}

h2 {
  color: #ffff !important;
  border-bottom: 2px solid rgba(0, 255, 206, 0.15) !important;
  padding-bottom: 8px !important;
}

#fullArticle strong {
  color: #ffff;
}

.articleRatings {
  background: 0;
  border: 1px solid #00FFCE;
  border-radius: 4px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,.05);
  font-size: 14px;
  color: #ffffff;
}

button {
  color: #0A1926 !important;
  border: #00FFCE !important;
  padding: 0;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.articleRatings-actions {
  width: 0px !important;
  flex-shrink: 0;
}

/* Search results container background */
.searchResults,
.search-results,
#searchResults {
  background-color: #1B2B40 !important;
}

/* If the results are in a list format */
.searchResults ul,
.search-results ul,
#searchResults ul {
  background-color: #1B2B40 !important;
}

/* Individual result items (adjust text color for readability) */
.searchResults li,
.search-results li,
#searchResults li,
.searchResults a,
.search-results a,
#searchResults a {
  color: #ffffff !important; /* White text for dark background */
}

/* Result hover state */
.searchResults li:hover,
.search-results li:hover,
#searchResults li:hover {
  background-color: #2a3f5f !important; /* Slightly lighter for hover */
}

/* Main search results dropdown container */
#serp-dd {
  background-color: #1B2B40 !important;
}

/* Individual result items */
#serp-dd .result {
  background-color: #1B2B40 !important;
}

/* Result links - make text white for visibility on dark background */
#serp-dd .result a {
  color: #ffffff !important;
}

/* Hover state for results */
#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background-color: #2a3f5f !important;
  color: #ffffff !important;
}

/* Results list */
#serp-dd ul {
  background-color: #1B2B40 !important;
}

/* Main search results dropdown container */
#serp-dd {
  background-color: #1B2B40 !important;
  border-color: #75fbd0 !important;
  border-style: solid !important;
  border-width: 1px !important;
}

/* Individual result items */
#serp-dd .result {
  background-color: #1B2B40 !important;
  border-bottom: 1px solid #75fbd0 !important;
}

/* Result links - make text white for visibility on dark background */
#serp-dd .result a {
  color: #ffffff !important;
}

/* Hover state for results */
#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background-color: #2a3f5f !important;
  color: #ffffff !important;
  border-left: 3px solid #75fbd0 !important;
}

/* Results list */
#serp-dd ul {
  background-color: #1B2B40 !important;
}

/* Body background - dark blue */
body {
  background-color: #1B2B40 !important;
}

/* ============================================
   NAVIGATION / HEADER
   ============================================ */

/* Top navigation bar */
.navbar,
.site-header,
header,
nav,
.nav-container {
  background: #1B2B40 !important;
  border-bottom: 1px solid rgba(0, 255, 206, 0.15) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Navigation links */
.navbar a,
.navbar-link,
.nav-link,
header a {
  color: #ffff !important;
  transition: color 0.15s ease !important;
}

.navbar a:hover,
.navbar-link:hover,
.nav-link:hover,
header a:hover {
  color: #00FFCE !important;
}

/* Logo area */
.site-logo,
.navbar-brand {
  color: #e5e7eb !important;
}

/* ============================================
   SEARCH - PRIMARY FIX
   ============================================ */

/* Main search container */
.search-container,
.docsearch,
.docsearch-container,
.hs-search-container,
#docsearch,
.search-form-container,
.hero-search,
.search-wrapper {
  background: #0A1926 !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

/* Search input field */
input[type="search"],
input[type="text"].search,
.search-input,
.docsearch-input,
input.search-query,
.hs-search-input,
#search,
.search input {
  background: #0A1926 !important;
  color: #ffff !important;
  border: 2px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  padding-left: 44px !important;
  font-size: 16px !important;
  transition: all 0.15s ease !important;
}

input[type="search"]::placeholder,
.search-input::placeholder {
  color: #1B2B40 !important;
}

input[type="search"]:focus,
.search-input:focus {
  background: #1B2B40 !important;
  border-color: #00FFCE !important;
  box-shadow: 0 4px 6px -1px rgba(0, 255, 206, 0.3), 0 2px 4px -1px rgba(30, 220, 255, 0.2) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

/* Search icon */
.search-icon,
.search-submit,
.docsearch-icon {
  color: rgba(229, 231, 235, 0.5) !important;
}

/* Search results dropdown */
.search-results,
.docsearch-results,
.search-dropdown,
.hs-search-results,
.autocomplete-results {
  background: #1B2B40 !important;
  border: 1px #1B2B40 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  margin-top: 8px !important;
}

/* Search result items */
.search-result,
.docsearch-result,
.search-result-item,
.autocomplete-item {
  background: #1B2B40 !important;
  border-bottom: 1px solid rgba(0, 255, 206, 0.1) !important;
  padding: 12px 16px !important;
  transition: background 0.15s ease !important;
}

.search-result:hover,
.docsearch-result:hover,
.autocomplete-item:hover {
  background: #1B2B40 !important;
}

/* ============================================
   HERO / HEADER SECTION
   ============================================ */

.hero,
.hero-section,
.site-hero,
.jumbotron {
  background: transparent !important;
  color: #ffff !important;
}

.hero h1,
.hero-title,
.site-title {
  background: linear-gradient(135deg, #00FFCE 0%, #1EDCFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero p,
.hero-subtitle {
  color: rgba(229, 231, 235, 0.7) !important;
}

/* ============================================
   CONTENT AREAS
   ============================================ */

/* Main content container */
.content,
.main-content,
.article-content,
.docs-content,
article,
.container {
  background: rgba(27, 43, 64, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  color: #ffff important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffff !important;
  font-weight: 600 !important;
}

h1 {
  background: linear-gradient(135deg, #00FFCE 0%, #1EDCFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

h2 {
  color: #ffff !important;
  border-bottom: 2px solid rgba(0, 255, 206, 0.15) !important;
  padding-bottom: 8px !important;
}

/* Paragraphs and text */
p, span, div, li {
  color: #ffff !important;
}

/* Links */
a {
  color: #00FFCE !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

a:hover {
  color: #1EDCFF !important;
  border-bottom-color: #00FFCE !important;
}

/* ============================================
   CARDS & ARTICLES
   ============================================ */

/* Article cards */
.card,
.article-card,
.docs-card,
.category-card,
.collection-item {
  background: rgba(27, 43, 64, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid #2AF598 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover,
.article-card:hover,
.docs-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 255, 206, 0.2), 0 10px 10px -5px rgba(30, 220, 255, 0.1) !important;
  border-color: rgba(0, 255, 206, 0.3) !important;
}

/* Card titles */
.card-title,
.article-title {
  color: #ffffimportant;
  font-weight: 600 !important;
}

/* Card text */
.card-text,
.article-excerpt {
  color: rgba(229, 231, 235, 0.7) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar,
.docs-sidebar,
.nav-sidebar,
aside {
  background: #0A1926 !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Sidebar links */
.sidebar a,
.sidebar-link,
.nav-item {
  color: rgba(229, 231, 235, 0.7) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  display: block !important;
  transition: all 0.15s ease !important;
}

.sidebar a:hover,
.sidebar-link:hover {
  background: #0A1926 !important;
  color: #e5e7eb !important;
}

.sidebar a.active,
.sidebar-link.active {
  background: #0A1926 !important;
  color: #00FFCE !important;
  border-left: 3px solid #00FFCE !important;
  padding-left: 9px !important;
}

/* ============================================
   BUTTONS
   ============================================ */

button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
  color: #0A1926 !important;
  border: #00FFCE !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Secondary buttons */
.btn-secondary,
.button-secondary {
  background: rgba(27, 43, 64, 0.8) !important;
  color: #e5e7eb !important;
  border: 1px solid #00FFCE !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

/* All form inputs */
input:not([type="search"]),
textarea,
select {
  background: #0A1926 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: all 0.15s ease !important;
}

input:focus:not([type="search"]),
textarea:focus,
select:focus {
  background: #0A1926 !important;
  border-color: #00FFCE !important;
  box-shadow: 0 4px 6px -1px rgba(0, 255, 206, 0.3) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #0A1926 !important;
}

/* Select dropdowns */
select option {
  background: #1B2B40 !important;
  color: #e5e7eb !important;
}

/* ============================================
   CODE BLOCKS
   ============================================ */

code {
  background: rgba(0, 255, 206, 0.1) !important;
  color: #00FFCE !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Consolas', 'Monaco', monospace !important;
}

pre {
  background: rgba(10, 25, 38, 0.9) !important;
  color: #aed581 !important;
  padding: 16px !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
}

pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* ============================================
   TABLES
   ============================================ */

table {
  background: rgba(10, 25, 38, 0.5) !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

thead {
  background: rgba(0, 255, 206, 0.1) !important;
}

th {
  color: #ffffimportant;
  font-weight: 600 !important;
  border-bottom: 2px solid rgba(0, 255, 206, 0.3) !important;
  padding: 12px !important;
}

td {
  color: rgba(229, 231, 235, 0.7) !important;
  border-bottom: 1px solid rgba(0, 255, 206, 0.1) !important;
  padding: 12px !important;
}

tr:hover {
  background: rgba(0, 255, 206, 0.05) !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs,
.breadcrumb {
  color: rgba(229, 231, 235, 0.5) !important;
}

.breadcrumbs a,
.breadcrumb a {
  color: #00FFCE !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer,
.footer,
.site-footer {
  background: rgba(27, 43, 64, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(0, 255, 206, 0.15) !important;
  color: rgba(229, 231, 235, 0.7) !important;
  padding: 24px !important;
}

footer a,
.footer a {
  color: rgba(229, 231, 235, 0.7) !important;
}

footer a:hover,
.footer a:hover {
  color: #00FFCE !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert,
.notification,
.message {
  border-radius: 8px !important;
  padding: 16px !important;
  border-left: 4px solid !important;
}

.alert-info,
.notification-info {
  background: rgba(96, 165, 250, 0.1) !important;
  border-left-color: #60a5fa !important;
  color: #60a5fa !important;
}

.alert-success,
.notification-success {
  background: rgba(74, 222, 128, 0.1) !important;
  border-left-color: #4ade80 !important;
  color: #4ade80 !important;
}

.alert-warning,
.notification-warning {
  background: rgba(251, 146, 60, 0.1) !important;
  border-left-color: #fb923c !important;
  color: #fb923c !important;
}

.alert-error,
.notification-error {
  background: rgba(248, 113, 113, 0.1) !important;
  border-left-color: #f87171 !important;
  color: #f87171 !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(27, 43, 64, 0.3) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 206, 0.3) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 206, 0.5) !important;
}

/* ============================================
   MISC OVERRIDES
   ============================================ */

/* Remove any light boxes or panels */
.panel,
.box,
.well {
  background: rgba(27, 43, 64, 0.6) !important;
  border: 1px solid rgba(0, 255, 206, 0.15) !important;
  color: #ffff;
}

/* Labels and badges */
.label,
.badge,
.tag {
  background: rgba(0, 255, 206, 0.1) !important;
  color: #00FFCE !important;
  border: 1px solid rgba(0, 255, 206, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Dividers */
hr {
  border-color: rgba(0, 255, 206, 0.15) !important;
}

/* Loading states */
.loading,
.spinner {
  border-color: rgba(0, 255, 206, 0.3) !important;
  border-top-color: #00FFCE !important;
}

/* ============================================
   HELP SCOUT BEACON (Support Widget)
   ============================================ */

/* If Help Scout Beacon is present */
.BeaconFabButtonFrame,
#beacon-container {
  filter: none !important;
}

.BeaconContainer {
  background: rgba(27, 43, 64, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .navbar,
  .site-header {
    padding: 12px !important;
  }
  
  input[type="search"],
  .search-input {
    font-size: 16px !important;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

*:focus-visible {
  outline: 2px solid #00FFCE !important;
  outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   END OF CUSTOM CSS
   ============================================ */