/* ============================================================================
   Superset Dashboard Theme
   Phase 1: Typography + Tabs
   Phase 2: Card elevation (floating look) at container level only
   Phase 3: Table + Pivot Table polish

   Served at /sil-static/embed.css and injected into the dashboard routes in
   sil_superset/utils/session.py::_EMBED_CSS_PATH_PREFIXES (embedded iframes
   and the native dashboard view).

   Notes:
   - No chart internal padding overrides
   - No ECharts / viz-root styling
   - No cell alignment overrides (respects Superset user settings)
   - No zebra striping (respects Superset conditional formatting)
   - Superset retains its default spacing and layout logic
============================================================================ */

/* ----------------------------- Typography --------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* Tabs */
  --tab-blue: #185cfd;
  --tab-purple: #7b2ff7;
  --tab-muted: #8a96a9;

  /* Text */
  --text-ink: #111827;
  --text-sub: #6b7280;

  /* Card elevation system (container-level only) */
  --card-bg: #ffffff;
  --card-border: rgba(17, 24, 39, 0.12);
  --card-radius: 14px;

  /* Gentle elevation by default */
  --card-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
  --card-shadow-hover: 0 12px 24px rgba(17, 24, 39, 0.08);

  /* Lighter elevation for filter bar (optional but recommended) */
  --card-shadow-soft: 0 6px 14px rgba(17, 24, 39, 0.05);

  /* Shared table system */
  --table-header-bg: #ffffff;
  --table-header-border: rgba(17, 24, 39, 0.12);
  --table-row-border: rgba(17, 24, 39, 0.05);
}

/* Apply Montserrat across the Superset app without wildcard selectors. Left
   app-wide on purpose: it mirrors the fontFamily token in the UI theme, so
   Explore and SQL Lab already render in Montserrat. */
html, body, #app, .App,
.ant-layout, .ant-layout-content,
.dashboard-app, .dashboard,
.ant-typography,
.ant-btn, .ant-input, .ant-select, .ant-picker, .ant-table,
.ant-tabs, .ant-form, .ant-tag {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
  color: var(--text-ink);
}

/* ============================================================================
   Force a pure white dashboard canvas background

   Dashboard containers only. This sheet is injected into every Superset SPA
   page (the dashboard route is client-side, so it cannot be scoped by request
   path), so html/body/#app/.ant-layout are deliberately not listed here —
   including them would repaint Explore, SQL Lab and the admin screens.
============================================================================ */
.dashboard-app, .dashboard,
.dashboard .dashboard-content,
.dashboard .grid-container,
.dashboard-view-content,
.dashboard-content > .dragdroppable-container {
  background-color: #ffffff !important;
}

/* Header component classes */
.header-style {
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--text-ink) !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.3 !important;
}

.header-sub-title {
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: var(--text-sub) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* ------------------------------- Tabs ------------------------------------- */

.dashboard-component-tabs .ant-tabs-nav {
  margin-bottom: 2px !important;
}

.dashboard-component-tabs .ant-tabs-tab {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 2px !important;
  margin-right: 16px !important;
}

.dashboard-component-tabs .ant-tabs-tab .ant-tabs-tab-btn {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: var(--tab-muted) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}

.dashboard-component-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: #623f99 !important;
}

.dashboard-component-tabs .ant-tabs-tab .ant-tabs-tab-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #623f99, var(--tab-purple));
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.dashboard-component-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #623f99 !important;
}

.dashboard-component-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn::after {
  transform: translateX(-50%) scaleX(1);
}

.dashboard-component-tabs .ant-tabs-ink-bar {
  display: none !important;
}

/* ============================================================================
   Phase 2: Floating cards (container-level only)
============================================================================ */

.dashboard .dashboard-component-chart-holder {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: visible !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard .dashboard-component-chart-holder:hover {
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
}

.dashboard .dashboard-component-chart-holder .chart-header .header-title,
.dashboard .dashboard-component-chart-holder .slice-header .header-title,
.dashboard .dashboard-component-chart-holder .chart-header .title,
.dashboard .dashboard-component-chart-holder .slice-header .title {
  font-weight: 600 !important;
  color: var(--text-ink) !important;
}

.dashboard .dashboard-component-chart-holder .chart-header .header-sub-title,
.dashboard .dashboard-component-chart-holder .slice-header .header-sub-title {
  color: var(--text-sub) !important;
}

/* Native Filters bar */
.dashboard [data-test*="native-filter"],
.dashboard [data-test*="native-filters"],
.dashboard .dashboard-native-filters,
.dashboard .filter-bar {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow-soft) !important;
}

/* ============================================================================
   Vertical spacing between tabs and tab content
============================================================================ */

.dashboard-component-tabs .ant-tabs-content-holder {
  padding-top: 10px !important;
}

/* ============================================================================
   Phase 3: Unified Table + Pivot Table Polish
   - White headers with uppercase labels
   - No zebra striping (preserves Superset conditional formatting)
   - No cell alignment overrides (respects Superset user settings)
   - No last-row styling (cannot verify if totals row exists)
   - Tabular number rendering, clean cell spacing
============================================================================ */

/* ---- Shared: Header treatment ---- */
.dashboard .dashboard-component-chart-holder .ant-table-thead > tr > th,
.dashboard .dashboard-component-chart-holder .pvtTable thead tr th,
.dashboard .dashboard-component-chart-holder table.table thead th {
  background: var(--table-header-bg) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--text-sub) !important;
  border-bottom: 2px solid var(--table-header-border) !important;
  padding: 10px 14px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* ---- Shared: Data cells ---- */
.dashboard .dashboard-component-chart-holder .ant-table-tbody > tr > td,
.dashboard .dashboard-component-chart-holder .pvtTable tbody td,
.dashboard .dashboard-component-chart-holder table.table tbody td {
  padding: 10px 14px !important;
  font-variant-numeric: tabular-nums !important;
  border-bottom: 1px solid var(--table-row-border) !important;
  color: var(--text-ink) !important;
}

/* ---- Shared: Table container cleanup ---- */
.dashboard .dashboard-component-chart-holder .ant-table-wrapper .ant-table,
.dashboard .dashboard-component-chart-holder .ant-table {
  background: transparent !important;
}

.dashboard .dashboard-component-chart-holder .ant-table-wrapper .ant-table-container,
.dashboard .dashboard-component-chart-holder .ant-table-container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.dashboard .dashboard-component-chart-holder .ant-table-wrapper .ant-table-bordered .ant-table-container,
.dashboard .dashboard-component-chart-holder .ant-table-bordered .ant-table-container {
  border: 0 !important;
}

.dashboard .dashboard-component-chart-holder table.table,
.dashboard .dashboard-component-chart-holder .pvtTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  font-size: 13px !important;
}

/* ---- Pivot-specific: Row labels ---- */
.dashboard .dashboard-component-chart-holder .pvtTable tbody tr th,
.dashboard .dashboard-component-chart-holder .pvtTable .pvtRowLabel {
  font-weight: 500 !important;
  color: var(--text-ink) !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border-right: 1px solid rgba(17, 24, 39, 0.08) !important;
}

/* ---- Pivot-specific: Column group separators ---- */
.dashboard .dashboard-component-chart-holder .pvtTable thead tr:first-child th {
  border-right: 2px solid var(--table-header-border) !important;
}

.dashboard .dashboard-component-chart-holder .pvtTable thead tr:first-child th:last-child {
  border-right: none !important;
}

/* ============================================================================
   Hide "Refresh dashboard" menu item
   Workaround for nested tabs infinite rerender bug (PR #37018)
============================================================================ */

[data-menu-id$="refresh_dashboard"] {
  display: none !important;
}

/* ============================================================================
   Embedded layout fix — restores box model so chart spacing matches
   the native dashboard view (workaround for Superset issue #36204)
   Scoped to avoid overriding scorecard/Big Number chart colors
============================================================================ */

.dashboard *:not([class*="big-number"]):not([class*="score"]):not([class*="metric"]):not([class*="kpi"]),
.dashboard *:not([class*="big-number"]):not([class*="score"]):not([class*="metric"]):not([class*="kpi"])::before,
.dashboard *:not([class*="big-number"]):not([class*="score"]):not([class*="metric"]):not([class*="kpi"])::after {
  box-sizing: border-box;
}

/* upgrade-fragile: .superset-1ydsv3z is a build-generated emotion hash and will
   stop matching on the next Superset bump. Re-derive it from the rendered DOM
   after any upgrade. */
.superset-1ydsv3z .ant-form-item-control {
  min-width: 195px;
}