/* Global aesthetic polish: cohesive dark palette, cleaner typography, subtle accents */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --ds-bg: #0b0f14;          /* page background */
  --ds-surface: #111827;     /* cards, modals */
  --ds-surface-2: #1f2937;   /* secondary surfaces */
  --ds-border: #293241;      /* subtle borders */
  --ds-text: #e5e7eb;        /* primary text */
  --ds-text-muted: #94a3b8;  /* muted */
  --ds-primary: #0ea5e9;     /* accent blue */
  --ds-primary-600: #0284c7; /* darker accent */
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
}

html, body { background-color: var(--ds-bg) !important; color: var(--ds-text) !important; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }

/* Cards and modals */
.card, .modal-content, .modal-header, .modal-body, .modal-footer { background-color: var(--ds-surface) !important; color: var(--ds-text) !important; border-color: var(--ds-border) !important; }
.card { border-radius: 10px !important; border: 1px solid var(--ds-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }
.modal-header { border-bottom: 1px solid var(--ds-border) !important; }
.modal-footer { border-top: 1px solid var(--ds-border) !important; }

/* Sidebar surface */
#sidebar-details, .bg-dark { background-color: var(--ds-surface) !important; }

/* Inputs */
.form-control, .Select-control { background-color: var(--ds-surface-2) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important; }
.Select-menu-outer { background-color: var(--ds-surface-2) !important; border: 1px solid var(--ds-border) !important; }
.Select-option { color: var(--ds-text) !important; }
.Select-option:hover, .Select-option.is-focused { background-color: #273244 !important; }

/* ============================================
   Dash Dropdown - Comprehensive Dark Theme
   ============================================ */

/* Main dropdown control */
.Select-control, .Select__control, 
.dash-dropdown .Select-control,
#search-dropdown .Select-control,
.dropdown-dark .Select-control {
  background-color: var(--ds-surface-2) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

/* Dropdown menu - all possible selectors */
.Select-menu-outer, .Select__menu, .Select-menu,
.dash-dropdown .Select-menu-outer,
#search-dropdown .Select-menu-outer,
.dropdown-dark .Select-menu-outer,
div[class*="menu"]:not(.navbar-nav):not(.dropdown-menu) {
  background-color: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text) !important;
}

/* Menu list container */
.Select__menu-list, .Select-menu {
  background-color: var(--ds-surface-2) !important;
}

/* Individual options */
.Select-option, .Select__option, .VirtualizedSelectOption,
.dash-dropdown .Select-option,
#search-dropdown .Select-option {
  background-color: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
}

/* Option hover/focus states */
.Select-option:hover, .Select-option.is-focused,
.Select__option:hover, .Select__option--is-focused,
.VirtualizedSelectOption:hover, .VirtualizedSelectFocusedOption {
  background-color: #273244 !important;
}

/* Input text */
.Select-input input, .Select__input input,
.Select-input, .Select__input {
  color: var(--ds-text) !important;
  background-color: transparent !important;
}

/* Placeholder text */
.Select-placeholder, .Select__placeholder {
  color: var(--ds-text-muted) !important;
}

/* Selected value text */
.Select-value-label, .Select__single-value,
.Select__multi-value__label {
  color: var(--ds-text) !important;
}

/* Multi-select tags - outlined style (not filled) */
.Select__multi-value, .Select-value {
  background-color: transparent !important;
  border: 1px solid var(--ds-primary) !important;
  border-radius: 4px !important;
  color: var(--ds-primary) !important;
}
.Select__multi-value__label, .Select-value-label {
  color: var(--ds-primary) !important;
}
.Select__multi-value__remove {
  color: var(--ds-primary) !important;
}
.Select__multi-value__remove:hover {
  background-color: var(--ds-primary) !important;
  color: white !important;
}

/* Clear and dropdown indicators */
.Select-clear-zone, .Select__clear-indicator,
.Select-arrow-zone, .Select__dropdown-indicator {
  color: var(--ds-text-muted) !important;
}
.Select-clear-zone:hover, .Select__clear-indicator:hover,
.Select-arrow-zone:hover, .Select__dropdown-indicator:hover {
  color: var(--ds-text) !important;
}

/* Virtual list container */
.VirtualizedSelectOption {
  background-color: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
  border-bottom: 1px solid var(--ds-border) !important;
}

/* Checkbox styling inside dropdown (if any) */
.Select-option input[type="checkbox"],
.VirtualizedSelectOption input[type="checkbox"] {
  accent-color: var(--ds-primary) !important;
}

/* Search input inside dropdown */
.Select-input input::placeholder {
  color: var(--ds-text-muted) !important;
}

/* No options message */
.Select-noresults, .Select__menu-notice {
  background-color: var(--ds-surface-2) !important;
  color: var(--ds-text-muted) !important;
}

/* Specific fix for dropdown-dark class */
.dropdown-dark, .dropdown-dark * {
  color: var(--ds-text) !important;
}

/* Buttons */
.btn, .dbc-btn { border-radius: 8px !important; }
.btn-primary { background-color: var(--ds-primary) !important; border-color: var(--ds-primary) !important; }
.btn-primary:hover { background-color: var(--ds-primary-600) !important; border-color: var(--ds-primary-600) !important; }
.btn-secondary { background-color: #334155 !important; border-color: #334155 !important; color: var(--ds-text) !important; }

/* Badges */
.badge { border-radius: 9999px !important; padding: 0.35rem 0.5rem !important; }
.badge.bg-info, .alert-info { background-color: rgba(14,165,233,0.15) !important; color: var(--ds-text) !important; border-color: rgba(14,165,233,0.25) !important; }

/* Tables */
.table-dark { background-color: var(--ds-surface) !important; color: var(--ds-text) !important; }
.table-dark th { background-color: var(--ds-surface-2) !important; border-color: var(--ds-border) !important; }
.table-dark td { background-color: var(--ds-surface) !important; border-color: var(--ds-border) !important; }
.table-dark tbody tr:hover { background-color: #172033 !important; }

/* Links in drilldown table as subtle pills with a single accent color */
.table-dark td a { color: #93c5fd !important; text-decoration: none !important; border: 1px solid rgba(147,197,253,0.25) !important; border-radius: 9999px !important; padding: 2px 8px !important; display: inline-block !important; transition: all 0.2s ease !important; cursor: pointer !important; }
.table-dark td a:hover { background-color: rgba(147,197,253,0.15) !important; border-color: rgba(147,197,253,0.45) !important; transform: translateY(-1px) !important; }

/* Remove multi-color left borders for different types; unify look */
.table-dark td a[title*="company"],
.table-dark td a[title*="category"],
.table-dark td a[title*="main"],
.table-dark td a[title*="country"] { border-left: none !important; }

/* Headings and small text */
h1,h2,h3,h4,h5,h6 { color: var(--ds-text) !important; }
.text-muted, .text-white-50 { color: var(--ds-text-muted) !important; }

/* Markdown formatting in AI results - make it more natural */
#ai-qa-results-drill h1 { font-size: 1.5rem !important; font-weight: 600 !important; margin-top: 1rem !important; margin-bottom: 0.75rem !important; }
#ai-qa-results-drill h2 { font-size: 1.25rem !important; font-weight: 600 !important; margin-top: 0.75rem !important; margin-bottom: 0.5rem !important; }
#ai-qa-results-drill h3 { font-size: 1.1rem !important; font-weight: 600 !important; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
#ai-qa-results-drill p { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 0.75rem !important; color: var(--ds-text) !important; }
#ai-qa-results-drill ul, #ai-qa-results-drill ol { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 0.75rem !important; padding-left: 1.5rem !important; }
#ai-qa-results-drill li { margin-bottom: 0.25rem !important; color: var(--ds-text) !important; }
#ai-qa-results-drill strong { font-weight: 600 !important; color: var(--ds-text) !important; }
#ai-qa-results-drill code { background-color: var(--ds-surface-2) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.9rem !important; }

/* Simple inline spinner for AI loading */
.ai-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Intro.js alignment with theme (complements tour.css) */
.introjs-helperLayer { border-color: var(--ds-primary) !important; }
.introjs-tooltip { background: var(--ds-surface-2) !important; }
.introjs-button { background-color: var(--ds-primary) !important; border-color: var(--ds-primary) !important; }

/* Info tooltip (question mark helper) - MUST be above everything */
.info-button-wrapper {
  position: relative !important;
  z-index: 99999 !important;
}
.info-button-wrapper:hover .info-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.info-tooltip {
  z-index: 999999 !important;
  position: absolute !important;
}