/*
 * Pulse Theme — Global CSS overrides for Superset standalone mode.
 *
 * Applied on top of THEME_OVERRIDES (which handles Ant Design internals).
 * This file handles layout, chart cards, filter bar, and typography
 * that THEME_OVERRIDES can't reach.
 *
 * Designed for ?standalone=3 mode (no Superset header/nav).
 */

/* ========================================================================
   Fonts
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&family=Barlow:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');


/* ========================================================================
   Global
   ======================================================================== */

body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background-color: #F9FAFB !important;
    color: #1C252E !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========================================================================
   Dashboard Layout
   ======================================================================== */

/* Dashboard background */
.dashboard {
    background-color: #F9FAFB !important;
}

.grid-container {
    background-color: #F9FAFB !important;
}

.dashboard-content {
    background-color: #F9FAFB !important;
}

/* Add comfortable padding in standalone mode */
.dashboard--editing .grid-container,
.grid-container {
    padding: 16px 24px !important;
}


/* ========================================================================
   Chart Cards — rounded, elevated, clean
   ======================================================================== */

/* Main chart wrapper */
.dashboard-component-chart-holder {
    border-radius: 16px !important;
    border: 1px solid #F4F6F8 !important;
    box-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dashboard-component-chart-holder:hover {
    box-shadow: 0 0 2px rgba(145, 158, 171, 0.24), 0 16px 32px -4px rgba(145, 158, 171, 0.2) !important;
}

/* Chart header (title area) */
.header-title,
.slice_container .header-title {
    font-family: 'Barlow', 'Public Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #1C252E !important;
    letter-spacing: -0.01em !important;
}

/* Remove default Superset chart borders */
.chart-container {
    border: none !important;
}

/* Chart action buttons (kebab menu etc.) — subtle until hover */
.slice-header .header-controls {
    opacity: 0 !important;
    transition: opacity 200ms ease !important;
}

.dashboard-component-chart-holder:hover .slice-header .header-controls {
    opacity: 1 !important;
}


/* ========================================================================
   Tabs — clean underline style
   ======================================================================== */

/* Primary dashboard tabs */
.ant-tabs-tab {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: #637381 !important;
    padding: 10px 16px !important;
    border-radius: 8px 8px 0 0 !important;
    transition: color 200ms ease !important;
}

.ant-tabs-tab:hover {
    color: #1C252E !important;
}

.ant-tabs-tab-active,
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #00A76F !important;
    font-weight: 600 !important;
}

/* Tab underline indicator */
.ant-tabs-ink-bar {
    background: #00A76F !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
}

/* Tab bar bottom border */
.ant-tabs-top > .ant-tabs-nav::before {
    border-bottom-color: #DFE3E8 !important;
}


/* ========================================================================
   Filter Bar — minimal overrides, don't break layout
   ======================================================================== */

/* Filter labels only — safe typography override */
.filter-bar__labels label,
.ant-form-item-label > label {
    font-family: 'Public Sans', sans-serif !important;
    color: #637381 !important;
}


/* ========================================================================
   Form Controls — rounded, clean
   ======================================================================== */

/* Select dropdowns */
.ant-select-selector,
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-radius: 8px !important;
    border-color: #DFE3E8 !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 0.875rem !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.ant-select-focused .ant-select-selector,
.ant-select-selector:hover {
    border-color: #00A76F !important;
    box-shadow: 0 0 0 2px rgba(0, 167, 111, 0.12) !important;
}

/* Input fields */
.ant-input,
.ant-input-affix-wrapper {
    border-radius: 8px !important;
    border-color: #DFE3E8 !important;
    font-family: 'Public Sans', sans-serif !important;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
    border-color: #00A76F !important;
    box-shadow: 0 0 0 2px rgba(0, 167, 111, 0.12) !important;
}


/* ========================================================================
   Buttons
   ======================================================================== */

.ant-btn {
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 600 !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-btn-primary {
    background-color: #00A76F !important;
    border-color: #00A76F !important;
}

.ant-btn-primary:hover {
    background-color: #007867 !important;
    border-color: #007867 !important;
}

.ant-btn-primary:active {
    background-color: #004B50 !important;
    border-color: #004B50 !important;
}


/* ========================================================================
   Tooltips & Popovers
   ======================================================================== */

.ant-tooltip-inner {
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 0.75rem !important;
}

.ant-popover-inner {
    border-radius: 12px !important;
    box-shadow: 0 8px 16px rgba(145, 158, 171, 0.16) !important;
}

/* ECharts tooltip */
div.echarts-tooltip {
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    box-shadow: 0 4px 8px rgba(145, 158, 171, 0.16) !important;
    border: 1px solid #F4F6F8 !important;
}


/* ========================================================================
   Dropdown menus
   ======================================================================== */

.ant-dropdown-menu,
.ant-select-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 8px 16px rgba(145, 158, 171, 0.16) !important;
    border: 1px solid #F4F6F8 !important;
    padding: 4px !important;
}

.ant-dropdown-menu-item,
.ant-select-item {
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 0.875rem !important;
}

.ant-dropdown-menu-item:hover,
.ant-select-item-option-active {
    background-color: #F4F6F8 !important;
}

.ant-select-item-option-selected {
    background-color: rgba(0, 167, 111, 0.08) !important;
    color: #00A76F !important;
    font-weight: 600 !important;
}


/* ========================================================================
   Modals
   ======================================================================== */

.ant-modal-content {
    border-radius: 16px !important;
    box-shadow: 0 8px 16px rgba(145, 158, 171, 0.16) !important;
    overflow: hidden !important;
}

.ant-modal-header {
    border-bottom: 1px solid #F4F6F8 !important;
}

.ant-modal-title {
    font-family: 'Barlow', 'Public Sans', sans-serif !important;
    font-weight: 700 !important;
}


/* ========================================================================
   Tables (data table chart type)
   ======================================================================== */

.superset-legacy-chart-table,
.dt-container {
    font-family: 'Public Sans', sans-serif !important;
}

.superset-legacy-chart-table th,
table.table thead th {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #637381 !important;
    background-color: #F9FAFB !important;
    border-bottom: 1px solid #DFE3E8 !important;
}

.superset-legacy-chart-table td,
table.table tbody td {
    font-size: 0.875rem !important;
    color: #1C252E !important;
    border-bottom: 1px solid #F4F6F8 !important;
    padding: 10px 12px !important;
}

table.table tbody tr:hover td {
    background-color: #F9FAFB !important;
}


/* ========================================================================
   Big Number charts
   ======================================================================== */

.superset-legacy-chart-big-number .header-line {
    font-family: 'Barlow', 'Public Sans', sans-serif !important;
    font-weight: 700 !important;
    color: #1C252E !important;
}

/* Subheader (comparison text) — base style */
.superset-legacy-chart-big-number .subheader-line {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #637381 !important;
}

/* Positive trend — green with up arrow */
.superset-legacy-chart-big-number.positive .subheader-line {
    color: #118D57 !important;
    background-color: rgba(34, 197, 94, 0.08) !important;
}

.superset-legacy-chart-big-number.positive .subheader-line::before {
    content: "\25B2" !important;  /* ▲ */
    font-size: 0.625rem !important;
    color: #22C55E !important;
}

/* Negative trend — red with down arrow */
.superset-legacy-chart-big-number.negative .subheader-line {
    color: #B71D18 !important;
    background-color: rgba(255, 86, 48, 0.08) !important;
}

.superset-legacy-chart-big-number.negative .subheader-line::before {
    content: "\25BC" !important;  /* ▼ */
    font-size: 0.625rem !important;
    color: #FF5630 !important;
}

/* Trendline sparkline — use Pulse teal color */
.superset-legacy-chart-big-number .text-container {
    padding: 8px 16px 0 16px !important;
}


/* ========================================================================
   Top Navigation Bar
   ======================================================================== */

/* Dashboard header (title/published/edit) — blend with page background */
.header-with-actions {
    background-color: #F9FAFB !important;
}

/* Top nav bar container */
.css-pyvf21 {
    background-color: #FFFFFF !important;
}

/* Nav menu */
.ant-menu.ant-menu-light.ant-menu-root.ant-menu-horizontal {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #F4F6F8 !important;
}

/* Nav menu items */
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
    color: #637381 !important;
}

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-item-selected {
    color: #00A76F !important;
    border-bottom-color: #00A76F !important;
}


/* ========================================================================
   Standalone mode cleanup
   ======================================================================== */

/* Hide edit/explore buttons in standalone */
.standalone .chart-header .header-controls .slice-header-controls-trigger,
.standalone .dashboard-header,
.standalone .header-with-actions {
    display: none !important;
}

/* Hide Superset favicon-related elements */
.favstar-container {
    display: none !important;
}

/* Hide "Powered by Apache Superset" if present */
.powered-by-apache {
    display: none !important;
}


/* ========================================================================
   Scrollbars — subtle, rounded
   ======================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C4CDD5;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #919EAB;
}


/* ========================================================================
   Native Filters
   ======================================================================== */

/* Apply Now / Clear All buttons */
.filter-apply-button,
.filter-clear-button {
    border-radius: 8px !important;
    font-weight: 600 !important;
}


/* ========================================================================
   Loading states
   ======================================================================== */

.loading .spinner {
    border-color: #C8FAD6 !important;
    border-top-color: #00A76F !important;
}

.ant-spin-dot-item {
    background-color: #00A76F !important;
}