/* QTG Analytics Dark Theme
 * THEME_OVERRIDES in superset_config.py handles Emotion/React components.
 * This CSS handles: Flask/Bootstrap pages, Ant Design gaps, edge cases.
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  --qtg-bg: #020817;
  --qtg-bg-elevated: #0F172A;
  --qtg-card: #020817;
  --qtg-surface: #1E293B;
  --qtg-border: #1E293B;
  --qtg-text: #F8FAFC;
  --qtg-text-muted: #94A3B8;
  --qtg-primary: #00FFFF;
  --qtg-primary-dark: #00D4D4;
  --qtg-success: #22C55E;
  --qtg-warning: #F59E0B;
  --qtg-danger: #EF4444;
  --qtg-info: #3B82F6;
  --qtg-ring: rgba(0, 255, 255, 0.15);
  --qtg-radius: 0.5rem;
}

/* ============================================
   GLOBAL / RESET
   ============================================ */
html, body {
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  background-color: var(--qtg-bg) !important;
  color: var(--qtg-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Force dark on main app container */
#app, #app > div, #app > div > div, #app > div > div > div {
  background-color: var(--qtg-bg) !important;
}

/* ============================================
   BOOTSTRAP 3 NAVBAR (Flask-AppBuilder)
   ============================================ */
.navbar, .navbar-inverse, .navbar-static-top, .navbar-default {
  background-color: var(--qtg-bg) !important;
  border-bottom: 1px solid var(--qtg-border) !important;
  border-color: var(--qtg-border) !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar a, .navbar .navbar-brand {
  color: var(--qtg-text) !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a {
  color: var(--qtg-primary) !important;
  background-color: transparent !important;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: var(--qtg-border) !important;
}

.navbar-inverse .navbar-toggle {
  border-color: var(--qtg-border) !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--qtg-text) !important;
}

.navbar .dropdown-menu, .navbar-inverse .dropdown-menu {
  background-color: var(--qtg-bg-elevated) !important;
  border: 1px solid var(--qtg-border) !important;
}

.dropdown-menu > li > a {
  color: var(--qtg-text) !important;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: var(--qtg-surface) !important;
  color: var(--qtg-primary) !important;
}

/* ============================================
   BOOTSTRAP PANELS (Login, FAB admin)
   ============================================ */
.panel, .panel-default, .panel-primary {
  background-color: var(--qtg-card) !important;
  border: 1px solid var(--qtg-border) !important;
  border-radius: var(--qtg-radius) !important;
  box-shadow: none !important;
}

.panel-heading, .panel-primary > .panel-heading {
  background-color: var(--qtg-bg-elevated) !important;
  border-bottom: 1px solid var(--qtg-border) !important;
  border-color: var(--qtg-border) !important;
  color: var(--qtg-text) !important;
}

.panel-body {
  background-color: var(--qtg-card) !important;
  color: var(--qtg-text) !important;
}

.panel-footer {
  background-color: var(--qtg-bg-elevated) !important;
  border-top: 1px solid var(--qtg-border) !important;
}

.panel-title { color: var(--qtg-text) !important; font-weight: 600 !important; }

/* ============================================
   LOGIN PAGE
   ============================================ */
#loginbox { margin-top: 80px !important; }
#loginbox .panel { border-radius: 12px !important; overflow: hidden; }
#loginbox .panel-heading { padding: 20px 24px !important; }
#loginbox .panel-title { font-size: 20px !important; letter-spacing: -0.01em !important; }
#loginbox .panel-body { padding: 24px !important; }
#loginbox .help-block { color: var(--qtg-text-muted) !important; }
#loginbox .control-label { color: var(--qtg-text) !important; font-weight: 500 !important; }

/* ============================================
   FORMS & INPUTS (Bootstrap 3 / FAB)
   ============================================ */
/* Scope to FAB/login pages only — don't override Ant Design inputs */
#loginbox .form-control,
#loginbox input[type="text"],
#loginbox input[type="password"],
.appbuilder .form-control {
  background-color: var(--qtg-bg) !important;
  border: 1px solid var(--qtg-border) !important;
  color: var(--qtg-text) !important;
  border-radius: var(--qtg-radius) !important;
}

#loginbox .form-control:focus,
#loginbox input:focus,
.appbuilder .form-control:focus {
  border-color: var(--qtg-primary) !important;
  box-shadow: 0 0 0 2px var(--qtg-ring) !important;
  outline: none !important;
}

#loginbox input::placeholder,
.appbuilder input::placeholder {
  color: var(--qtg-text-muted) !important;
}

.input-group-addon {
  background-color: var(--qtg-surface) !important;
  border: 1px solid var(--qtg-border) !important;
  color: var(--qtg-text-muted) !important;
}

/* ============================================
   BUTTONS (Bootstrap 3 / FAB)
   ============================================ */
.btn-default {
  background-color: var(--qtg-surface) !important;
  border: 1px solid var(--qtg-border) !important;
  color: var(--qtg-text) !important;
}

.btn-default:hover {
  border-color: var(--qtg-primary) !important;
  color: var(--qtg-primary) !important;
}

.btn-primary, input[type="submit"].btn-primary {
  background-color: #00FFFF !important;
  border-color: #00FFFF !important;
  color: #020817 !important;
  font-weight: 600 !important;
  border-radius: var(--qtg-radius) !important;
}

.btn-primary:hover, input[type="submit"].btn-primary:hover {
  background-color: #00D4D4 !important;
  border-color: #00D4D4 !important;
  color: #020817 !important;
}

.btn-danger { background-color: var(--qtg-danger) !important; border-color: var(--qtg-danger) !important; color: white !important; }
.btn-success { background-color: var(--qtg-success) !important; border-color: var(--qtg-success) !important; color: white !important; }

/* ============================================
   TABLES (Bootstrap 3 / FAB)
   ============================================ */
.table { background-color: var(--qtg-card) !important; color: var(--qtg-text) !important; }
.table > thead > tr > th { background-color: var(--qtg-bg-elevated) !important; color: var(--qtg-text-muted) !important; border-color: var(--qtg-border) !important; }
.table > tbody > tr > td { border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.table > tbody > tr:hover > td { background-color: var(--qtg-bg-elevated) !important; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6, .panel-title, .page-header { color: var(--qtg-text) !important; }
a { color: var(--qtg-primary) !important; }
a:hover { color: var(--qtg-primary-dark) !important; text-decoration: none !important; }
.text-muted, .help-block { color: var(--qtg-text-muted) !important; }
hr { border-color: var(--qtg-border) !important; }

/* ============================================
   MODALS (Bootstrap)
   ============================================ */
.modal-content { background-color: var(--qtg-bg-elevated) !important; border: 1px solid var(--qtg-border) !important; color: var(--qtg-text) !important; border-radius: 12px !important; }
.modal-header { border-bottom: 1px solid var(--qtg-border) !important; }
.modal-footer { border-top: 1px solid var(--qtg-border) !important; }
.modal-title { color: var(--qtg-text) !important; }

/* ============================================
   WELL & ALERTS (Bootstrap)
   ============================================ */
.well { background-color: var(--qtg-surface) !important; border: 1px solid var(--qtg-border) !important; color: var(--qtg-text) !important; }
.alert { background-color: var(--qtg-surface) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.alert-success { border-left: 4px solid var(--qtg-success) !important; }
.alert-danger, .alert-error { border-left: 4px solid var(--qtg-danger) !important; }
.alert-warning { border-left: 4px solid var(--qtg-warning) !important; }
.alert-info { border-left: 4px solid var(--qtg-info) !important; }

/* ============================================
   FOOTER
   ============================================ */
footer, .nav-fixed-bottom {
  background-color: var(--qtg-bg) !important;
  color: var(--qtg-text-muted) !important;
  border-top: 1px solid var(--qtg-border) !important;
}

/* ============================================
   SELECT2 (FAB admin pages)
   ============================================ */
.select2-container .select2-choice, .select2-container .select2-choices {
  background-color: var(--qtg-bg) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important;
}
.select2-drop, .select2-results { background-color: var(--qtg-bg-elevated) !important; color: var(--qtg-text) !important; }
.select2-results .select2-highlighted { background-color: var(--qtg-surface) !important; color: var(--qtg-primary) !important; }

/* ============================================
   ANT DESIGN GAPS (not covered by Emotion theme)
   ============================================ */

/* Ant Menu - light variant forced by Superset */
.ant-menu-light, ul.ant-menu.ant-menu-light {
  background: var(--qtg-bg) !important;
  color: var(--qtg-text) !important;
  border-bottom-color: var(--qtg-border) !important;
}
.ant-menu-light .ant-menu-item, .ant-menu-light .ant-menu-item a { color: var(--qtg-text) !important; }
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-item-active,
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-submenu-title:hover,
.ant-menu-light .ant-menu-submenu-active,
.ant-menu-light > .ant-menu > .ant-menu-submenu:hover > .ant-menu-submenu-title {
  color: var(--qtg-primary) !important;
  background-color: transparent !important;
}

/* Ant menu hover overlay — Superset uses this for highlight */
.ant-menu-light .ant-menu-item:hover::after,
.ant-menu-light .ant-menu-submenu:hover::after {
  border-bottom-color: var(--qtg-primary) !important;
}

/* Ant Inputs - override light defaults */
.ant-input, input.ant-input { background-color: var(--qtg-bg) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.ant-input::placeholder { color: #64748B !important; }
.ant-input-affix-wrapper { background-color: var(--qtg-bg) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused { border-color: var(--qtg-primary) !important; box-shadow: 0 0 0 2px var(--qtg-ring) !important; }

/* Ant Select */
.ant-select-selector, div.ant-select-selector { background-color: var(--qtg-bg) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.ant-select-selection-placeholder { color: #64748B !important; }
.ant-select-arrow { color: var(--qtg-text-muted) !important; }
.ant-select-focused .ant-select-selector { border-color: var(--qtg-primary) !important; }

/* Ant Dropdowns */
.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner, .ant-modal-content, .ant-drawer-content {
  background: var(--qtg-bg-elevated) !important; color: var(--qtg-text) !important; border: 1px solid var(--qtg-border) !important;
}
.ant-select-item, .ant-dropdown-menu-item { color: var(--qtg-text) !important; }
.ant-select-item-option-active, .ant-select-item-option-selected, .ant-dropdown-menu-item:hover {
  background: var(--qtg-surface) !important; color: var(--qtg-primary) !important;
}

/* Ant Table */
.ant-table, .ant-table-content { background: var(--qtg-card) !important; color: var(--qtg-text) !important; }
.ant-table-thead > tr > th { background: var(--qtg-bg-elevated) !important; color: var(--qtg-text-muted) !important; border-color: var(--qtg-border) !important; }
.ant-table-tbody > tr > td { background: var(--qtg-card) !important; color: var(--qtg-text) !important; border-color: var(--qtg-border) !important; }
.ant-table-tbody > tr:hover > td { background: var(--qtg-bg-elevated) !important; }

/* Ant Button primary */
.ant-btn-primary { background: var(--qtg-primary) !important; border-color: var(--qtg-primary) !important; color: var(--qtg-bg) !important; font-weight: 600 !important; }
.ant-btn-primary:hover { background: var(--qtg-primary-dark) !important; border-color: var(--qtg-primary-dark) !important; }
.ant-btn-default, .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous) {
  background: var(--qtg-surface) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important;
}
.ant-btn-default:hover, .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):hover {
  border-color: var(--qtg-primary) !important; color: var(--qtg-primary) !important;
}
.ant-btn-link { color: var(--qtg-primary) !important; }

/* Ant Tabs */
.ant-tabs-nav, .ant-tabs-tab { color: var(--qtg-text-muted) !important; }
.ant-tabs-tab-active, .ant-tabs-tab:hover { color: var(--qtg-primary) !important; }
.ant-tabs-ink-bar { background: var(--qtg-primary) !important; }

/* Ant Tags, Pagination, Tooltips */
.ant-tag { background: var(--qtg-surface) !important; border-color: var(--qtg-border) !important; color: var(--qtg-text) !important; }
.ant-pagination-item { background: var(--qtg-surface) !important; border-color: var(--qtg-border) !important; }
.ant-pagination-item a { color: var(--qtg-text) !important; }
.ant-pagination-item-active { border-color: var(--qtg-primary) !important; }
.ant-pagination-item-active a { color: var(--qtg-primary) !important; }
.ant-tooltip-inner { background: var(--qtg-surface) !important; color: var(--qtg-text) !important; }

/* Ant Checkbox, Radio, Switch */
.ant-checkbox-inner, .ant-radio-inner { background: var(--qtg-bg) !important; border-color: var(--qtg-border) !important; }
.ant-checkbox-checked .ant-checkbox-inner { background: var(--qtg-primary) !important; border-color: var(--qtg-primary) !important; }
.ant-switch { background: var(--qtg-surface) !important; }
.ant-switch-checked { background: var(--qtg-primary) !important; }

/* Ant Collapse, Tree */
.ant-collapse, .ant-collapse-header, .ant-collapse-content { background: var(--qtg-bg-elevated) !important; color: var(--qtg-text) !important; border-color: var(--qtg-border) !important; }
.ant-tree { background: var(--qtg-bg) !important; color: var(--qtg-text) !important; }
.ant-tree-node-content-wrapper:hover { background: var(--qtg-surface) !important; }

/* Ant Empty, Badge, Divider */
.ant-empty-description { color: var(--qtg-text-muted) !important; }
.ant-badge-count { background-color: var(--qtg-primary) !important; color: var(--qtg-bg) !important; }
.ant-divider { border-color: var(--qtg-border) !important; }

/* Ant Modal */
.ant-modal-header { background: var(--qtg-bg-elevated) !important; border-bottom: 1px solid var(--qtg-border) !important; }
.ant-modal-title, .ant-modal-close-x { color: var(--qtg-text) !important; }
.ant-modal-footer { background: var(--qtg-bg-elevated) !important; border-top: 1px solid var(--qtg-border) !important; }

/* Ant Popover */
.ant-popover-content, .ant-popover-inner-content { background-color: var(--qtg-bg-elevated) !important; color: var(--qtg-text) !important; }
.ant-popover-arrow-content { background-color: var(--qtg-bg-elevated) !important; }

/* Ant Layout */
.ant-layout, .ant-layout-content, .ant-layout-sider, .ant-layout-footer, .ant-layout-header {
  background: var(--qtg-bg) !important; color: var(--qtg-text) !important;
}

/* Ant Card */
.ant-card { background: var(--qtg-card) !important; border: 1px solid var(--qtg-border) !important; color: var(--qtg-text) !important; }
.ant-card-head { background: var(--qtg-card) !important; border-bottom: 1px solid var(--qtg-border) !important; color: var(--qtg-text) !important; }

/* Ant Progress */
.ant-progress-inner { background-color: var(--qtg-surface) !important; }
.ant-progress-bg { background-color: var(--qtg-primary) !important; }

/* Ant Skeleton */
.ant-skeleton-content .ant-skeleton-title, .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(90deg, #1E293B 25%, #0F172A 50%, #1E293B 75%) !important;
}

/* ============================================
   SUPERSET-SPECIFIC EDGE CASES
   ============================================ */

/* SQL Lab editor */
.ace_editor, .ace-github { background: var(--qtg-bg-elevated) !important; color: var(--qtg-text) !important; }
.ace_gutter { background: var(--qtg-surface) !important; color: var(--qtg-text-muted) !important; }

/* SQL Lab panels */
.SouthPane, .sql-toolbar, .ResultSet, .queryArea { background: var(--qtg-bg) !important; color: var(--qtg-text) !important; }

/* Dashboard */
.dashboard-content, .grid-container, .dashboard-header { background: var(--qtg-bg) !important; }
.dashboard-header { border-bottom: 1px solid var(--qtg-border) !important; }
.dashboard-component, .dashboard-component-chart-holder, .slice_container, .chart-container {
  background: var(--qtg-card) !important; border: 1px solid var(--qtg-border) !important; color: var(--qtg-text) !important;
}

/* Filter bar */
div[class*="FilterBar"], div[class*="filter-bar"] { background-color: var(--qtg-bg-elevated) !important; border-color: var(--qtg-border) !important; }

/* Sidebar */
.ant-layout-sider, div[class*="LeftPanel"] { background: var(--qtg-bg-elevated) !important; border-right: 1px solid var(--qtg-border) !important; }

/* Explore page */
.explore-column, .control-label { color: var(--qtg-text) !important; }

/* Empty state SVGs */
div[class*="EmptyState"] svg, .ant-empty svg { filter: invert(0.85) hue-rotate(180deg) !important; opacity: 0.5 !important; }

/* Loading spinner */
.loading-image, .ant-spin-dot-item { filter: invert(1) hue-rotate(180deg) !important; }
.ant-spin-text { color: var(--qtg-text) !important; }

/* Card thumbnails */
div[class*="CardCover"], .ant-card-cover { background-color: var(--qtg-bg-elevated) !important; }

/* Inline white background overrides */
div[style*="background: rgb(255, 255, 255)"],
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="background:#fff"],
div[style*="background-color:#fff"] {
  background: var(--qtg-bg) !important;
  background-color: var(--qtg-bg) !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--qtg-bg); }
::-webkit-scrollbar-thumb { background: var(--qtg-surface); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ============================================
   SEARCH ICONS
   ============================================ */
.anticon-search, .ant-input-prefix, .ant-input-suffix { color: #64748B !important; }

/* Logo */
.superset-logo, img[alt*="logo"], .navbar-brand img { max-height: 40px !important; }

/* ============================================
   POPUP MENUS - NUCLEAR OVERRIDES
   These catch all Ant Design popup/submenu
   containers regardless of Emotion styling
   ============================================ */
.ant-menu-submenu-popup,
.ant-menu-submenu-popup > .ant-menu,
.ant-menu-submenu > .ant-menu,
.ant-menu-vertical,
.ant-menu-vertical-left,
.ant-menu-vertical-right,
.ant-menu-sub,
.ant-menu-inline,
div[class*="ant-menu-submenu"] {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border: 1px solid #1E293B !important;
}

.ant-menu-submenu-popup .ant-menu-item,
.ant-menu-vertical .ant-menu-item,
.ant-menu-sub .ant-menu-item {
  color: #F8FAFC !important;
}

.ant-menu-submenu-popup .ant-menu-item:hover,
.ant-menu-vertical .ant-menu-item:hover,
.ant-menu-sub .ant-menu-item:hover,
.ant-menu-submenu-popup .ant-menu-item-active,
.ant-menu-vertical .ant-menu-item-active {
  background-color: #1E293B !important;
  color: #00FFFF !important;
}

/* Ant popover/dropdown containers rendered at body level */
.ant-menu-submenu-placement-bottomLeft,
.ant-menu-submenu-placement-bottomRight,
div[class*="ant-menu"][class*="popup"] {
  background-color: #0F172A !important;
}

/* Menu item dividers */
.ant-menu-item-divider {
  background-color: #1E293B !important;
}

/* Ant dropdown overlay */
.ant-dropdown {
  background-color: transparent !important;
}

.ant-dropdown .ant-dropdown-menu {
  background-color: #0F172A !important;
  border: 1px solid #1E293B !important;
}

.ant-dropdown .ant-dropdown-menu-item {
  color: #F8FAFC !important;
}

.ant-dropdown .ant-dropdown-menu-item:hover {
  background-color: #1E293B !important;
  color: #00FFFF !important;
}