/*
 * QQUADRO Analytics — CSS overrides for Superset v6
 * Full visual parity with Ford Trucks CRM (QQUADRO CRM).
 *
 * Targets:
 *   header#main-menu.top         — main navbar (Emotion StyledHeader)
 *   .main-nav                    — horizontal nav menu
 *   [data-test="login-form"]     — login page
 *   .ant-* classes               — Ant Design v5 components
 */

/* ===== Variables (matching CRM ford-trucks.css) ===== */
:root {
  --qq-navy: #1B3A5C;
  --qq-navy-dark: #142d4a;
  --qq-navy-hover: #234b72;
  --qq-orange: #E87722;
  --qq-orange-dark: #d06a1e;
  --qq-border: #e8e8e8;
  --qq-surface: #f8f9fa;
  --qq-text: #333;
  --qq-text-light: rgba(255, 255, 255, 0.85);
  --qq-font: Arial, Helvetica, sans-serif;
}

/* ===== Global font ===== */
body {
  font-family: var(--qq-font) !important;
  padding-bottom: 32px;
}

/* ================================================================
   NAVBAR — header#main-menu.top
   The header has Emotion inline styles setting background to
   colorBgContainer (white). We override with navy.
   Height: 43px (matching CRM navbarHeight).
   ================================================================ */
header#main-menu,
header#main-menu.top,
header[role="navigation"] {
  background-color: var(--qq-navy) !important;
  border-bottom: none !important;
  height: 43px;
  min-height: 43px;
  line-height: 43px;
}

/* Row inside header — remove any background leak */
header#main-menu .ant-row {
  background-color: transparent !important;
  height: 43px;
}

/* ===== Navbar — menu bar background ===== */
header#main-menu .ant-menu,
header#main-menu .ant-menu-horizontal,
.main-nav,
.main-nav.ant-menu-horizontal,
[data-test="navbar-top"] {
  background-color: transparent !important;
  border-bottom: none !important;
  color: var(--qq-text-light) !important;
  height: 43px;
  line-height: 43px;
}

/* ===== Navbar — brand/logo ===== */
header#main-menu .navbar-brand,
header#main-menu .navbar-brand img,
header#main-menu .ant-image {
  height: 24px;
}

/* Brand text beside logo — hide it (logo SVG contains the full brand) */
header#main-menu [class*="StyledBrandText"],
header#main-menu .ant-col > div:has(> span) {
  color: #fff !important;
  border-left-color: rgba(255, 255, 255, 0.2) !important;
  border-right-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== CSS pill-badge logo fallback =====
   If the SVG token doesn't render correctly, overlay CSS pills
   on the brand link area. */
header#main-menu .navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}

/* ===== Navbar — menu items text ===== */
header#main-menu .ant-menu-submenu-title,
header#main-menu .ant-menu-title-content,
header#main-menu .ant-menu-item-icon,
header#main-menu .ant-menu-submenu > .ant-menu-submenu-title,
.main-nav .ant-menu-submenu-title,
.main-nav .ant-menu-title-content,
.submenu-with-caret .ant-menu-submenu-title,
.submenu-with-caret .ant-menu-title-content {
  color: var(--qq-text-light) !important;
}

/* All icons and SVGs in navbar */
header#main-menu .anticon,
header#main-menu svg:not(.qquadro-footer svg),
header#main-menu .ant-menu-item-icon .anticon,
[data-test="new-dropdown-icon"] {
  color: var(--qq-text-light) !important;
  fill: var(--qq-text-light) !important;
}

/* ===== Navbar — hover state (orange accent) ===== */
header#main-menu .ant-menu-submenu:hover > .ant-menu-submenu-title,
header#main-menu .ant-menu-submenu:hover .ant-menu-title-content,
header#main-menu .ant-menu-submenu-active > .ant-menu-submenu-title,
header#main-menu .ant-menu-submenu-active .ant-menu-title-content,
header#main-menu .ant-menu-submenu-open > .ant-menu-submenu-title,
header#main-menu .ant-menu-item:hover,
.submenu-with-caret:hover .ant-menu-title-content,
.submenu-with-caret.ant-menu-submenu-active .ant-menu-title-content {
  color: var(--qq-orange) !important;
}

header#main-menu .ant-menu-submenu:hover .anticon,
header#main-menu .ant-menu-submenu:hover svg,
header#main-menu .ant-menu-submenu-active .anticon,
header#main-menu .ant-menu-item:hover .anticon,
header#main-menu .ant-menu-item:hover svg {
  color: var(--qq-orange) !important;
  fill: var(--qq-orange) !important;
}

/* ===== Navbar — active/selected (orange underline) ===== */
header#main-menu .ant-menu-submenu-selected > .ant-menu-submenu-title,
header#main-menu .ant-menu-submenu-selected .ant-menu-title-content,
.main-nav .ant-menu-submenu-selected .ant-menu-title-content {
  color: #fff !important;
}

/* Orange underline via ::after pseudo-element */
.main-nav .ant-menu-submenu-selected.ant-menu-submenu-horizontal::after,
.main-nav .ant-menu-submenu:hover::after,
.main-nav .ant-menu-submenu-open::after {
  background-color: var(--qq-orange) !important;
}

/* ===== Navbar — right-side links ===== */
header#main-menu a[target="_blank"],
header#main-menu a[href="/login/"] {
  color: var(--qq-text-light) !important;
}

header#main-menu a[target="_blank"]:hover,
header#main-menu a[href="/login/"]:hover {
  color: var(--qq-orange) !important;
}

/* Environment tag */
header#main-menu .ant-tag {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ================================================================
   DROPDOWN MENUS (portaled to body)
   ================================================================ */
.ant-menu-submenu-popup .ant-menu,
.ant-dropdown .ant-dropdown-menu,
.ant-select-dropdown {
  border: 1px solid var(--qq-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
}

.ant-menu-submenu-popup .ant-menu-item:hover,
.ant-dropdown-menu-item:hover,
.ant-select-item-option-active {
  background-color: var(--qq-surface) !important;
}

.ant-menu-submenu-popup .ant-menu-item-selected,
.ant-dropdown-menu-item-selected {
  background-color: #e8eff5 !important;
  color: var(--qq-navy) !important;
}

/* ================================================================
   SUBMENU (secondary nav bar on list pages)
   ================================================================ */
.ant-row.menu[role="navigation"] {
  border-bottom: 1px solid var(--qq-border);
}

.ant-row.menu .header {
  color: var(--qq-navy) !important;
  font-weight: 700 !important;
}

/* Active tab in submenu */
.ant-row.menu .ant-menu-item .active,
.ant-row.menu .ant-menu-item .no-router.active {
  color: var(--qq-navy) !important;
  font-weight: 600 !important;
}

/* ================================================================
   BUTTONS — matching CRM button styles
   ================================================================ */

/* Primary buttons — navy bg, white text */
.ant-btn-primary,
button.ant-btn-primary {
  background-color: var(--qq-navy) !important;
  border-color: var(--qq-navy) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: var(--qq-font) !important;
  font-weight: 600 !important;
  padding: 4px 14px !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
.ant-btn-primary:active {
  background-color: var(--qq-navy-hover) !important;
  border-color: var(--qq-navy-hover) !important;
}

/* Default/secondary buttons — navy border+text, orange on hover */
.ant-btn-default,
.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link) {
  border-color: var(--qq-navy) !important;
  color: var(--qq-navy) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.ant-btn-default:hover,
.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):hover {
  border-color: var(--qq-orange) !important;
  color: var(--qq-orange) !important;
}

/* Link-style buttons */
.ant-btn-link {
  color: var(--qq-navy) !important;
}

.ant-btn-link:hover {
  color: var(--qq-orange) !important;
}

/* ================================================================
   LINKS — navy default, orange hover
   ================================================================ */
a {
  color: var(--qq-navy);
}

a:hover {
  color: var(--qq-orange);
}

/* ================================================================
   TABS — navy active, navy ink-bar
   ================================================================ */
.ant-tabs-tab-active,
.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--qq-navy) !important;
  font-weight: 600 !important;
}

.ant-tabs-ink-bar {
  background: var(--qq-navy) !important;
}

.ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: var(--qq-navy-hover) !important;
}

/* ================================================================
   FILTER BAR
   ================================================================ */
[data-test="filter-bar"] {
  border-right: 1px solid var(--qq-border) !important;
  background: var(--qq-surface) !important;
}

/* ================================================================
   CARDS — #e8e8e8 border, 4px radius
   ================================================================ */
.ant-card {
  border-color: var(--qq-border) !important;
  border-radius: 4px !important;
  font-family: var(--qq-font) !important;
}

/* ================================================================
   CHART CONTAINERS
   ================================================================ */
[data-test="chart-container"],
.dashboard-component-chart-holder {
  border: 1px solid var(--qq-border);
  border-radius: 4px;
}

/* ================================================================
   LOGIN PAGE — matching CRM login card style
   ================================================================ */
[data-test="login-form"] {
  min-height: calc(100vh - 120px);
}

[data-test="login-form"] .ant-card {
  border: 1px solid var(--qq-border);
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  max-width: 400px;
}

/* Navy card header with white title */
[data-test="login-form"] .ant-card-head {
  background: var(--qq-navy);
  border-radius: 6px 6px 0 0;
}

[data-test="login-form"] .ant-card-head-title {
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

[data-test="login-form"] .ant-form-item-label label,
[data-test="login-form"] .ant-form-item-label .ant-typography {
  color: var(--qq-navy) !important;
  font-weight: 600;
}

/* Full-width navy submit button */
[data-test="login-button"] {
  height: 42px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

/* ================================================================
   INPUTS & FORM CONTROLS — navy focus ring
   ================================================================ */
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector {
  border-color: var(--qq-navy) !important;
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.15) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-select:hover .ant-select-selector {
  border-color: var(--qq-navy) !important;
}

/* Checkbox / Radio — navy when checked */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
  background-color: var(--qq-navy) !important;
  border-color: var(--qq-navy) !important;
}

/* Switch — navy when checked */
.ant-switch-checked {
  background-color: var(--qq-navy) !important;
}

/* Select — navy focus border */
.ant-select-focused .ant-select-selector,
.ant-select-open .ant-select-selector {
  border-color: var(--qq-navy) !important;
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.15) !important;
}

/* ================================================================
   TABLES — matching CRM report table styling
   ================================================================ */

/* Header: #f5f5f5 bg, 2px solid #ddd bottom-border, font-weight 600 */
.ant-table-thead > tr > th,
.ant-table-thead > tr > td {
  background: #f5f5f5 !important;
  border-bottom: 2px solid #ddd !important;
  font-weight: 600 !important;
  color: var(--qq-text) !important;
}

/* Rows: 1px solid #eee separator, #f8f9fa hover */
.ant-table-tbody > tr > td {
  border-bottom: 1px solid #eee !important;
}

.ant-table-tbody > tr:hover > td {
  background: var(--qq-surface) !important;
}

/* Pagination — navy active */
.ant-pagination-item-active {
  border-color: var(--qq-navy) !important;
}

.ant-pagination-item-active a {
  color: var(--qq-navy) !important;
}

/* ================================================================
   BREADCRUMB & PAGE HEADERS
   ================================================================ */
.ant-breadcrumb a {
  color: var(--qq-navy) !important;
}

.ant-breadcrumb a:hover {
  color: var(--qq-orange) !important;
}

/* ================================================================
   TOOLTIP
   ================================================================ */
.ant-tooltip-inner {
  font-family: var(--qq-font) !important;
}

/* ================================================================
   LOADING SPINNER — navy dots
   ================================================================ */
.ant-spin-dot-item {
  background-color: var(--qq-navy) !important;
}

/* ================================================================
   SCROLLBAR (Webkit) — custom #b3cce0 thumb, #f5f5f5 track
   ================================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #b3cce0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--qq-navy-hover);
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}