/* ------ Custom Blue Gradient Background ------ */

/* Define the gradient and color variables */
:root {
  --Blue-Gradient: linear-gradient(90deg, #252c7c 16.56%, #141835 99.78%);
  --color-primary: #273262;

  /* Custom Color Palette */
  --palette-amber: #f3a845;
  --palette-cyan: #00e5ff;
  --palette-teal: #26a69a;
  --palette-cyan-light: #64ffda;
  --palette-lime: #75c63b;
  --palette-lime-bright: #76ff03;
  --palette-lime-yellow: #aeea00;
  --palette-orange-dark: #c06a01;
  --palette-orange: #ff9100;
  --palette-orange-red: #ff6e40;
  --palette-magenta: #d500f9;
  --palette-purple: #8a38f5;
  --palette-purple-deep: #651fff;
  --palette-indigo: #536dfe;
  --palette-blue: #2979ff;
  --palette-blue-light: #82b1ff;
  --palette-white: #ffffff;
  --palette-gray: #898d93;
  --palette-gray-light: #cfd8dc;
}

/* Apply gradient to main containers only */
html {
  background: var(--Blue-Gradient) !important;
  background-attachment: fixed !important;
}

body {
  background: var(--Blue-Gradient) !important;
  background-attachment: fixed !important;
}

#app {
  background: var(--Blue-Gradient) !important;
  background-attachment: fixed !important;
}

/* Apply to Ant Design layout containers */
.ant-layout {
  background: var(--Blue-Gradient) !important;
}

.ant-layout-content {
  background: var(--Blue-Gradient) !important;
}

/* Apply gradient to header */
.header-with-actions {
  background: var(--Blue-Gradient) !important;
}

/* Primary filled buttons - ensure white text by default */
.ant-btn.ant-btn-color-primary.ant-btn-variant-filled,
.ant-btn.ant-btn-color-primary.ant-btn-variant-filled.superset-button,
.ant-btn.ant-btn-color-primary.ant-btn-variant-filled.superset-button-secondary {
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* Override button filled variant hover (removes gray hover) */
.ant-btn-variant-filled:hover,
.ant-btn-filled:hover {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Keep dashboard shell transparent so the gradient shows */
.dashboard,
.dashboard-content,
.dashboard-grid,
.grid-container {
  background: transparent !important;
}

/* Chart tiles only: semi-opaque panel */
.dashboard-component-chart-holder {
  background: rgba(20, 26, 46, 0.5) !important;
  border: 1px solid #273262 !important;
  border-radius: 6px !important;
  padding: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

/* Let the viz itself be transparent so the panel shows clean */
.dashboard-component-chart-holder .chart-container > *,
.slice_container > *,
.slice-container > * {
  background: transparent !important;
}

.ant-modal .ant-modal-content,
.ant-modal .ant-modal-header,
.ant-modal .ant-modal-body,
.ant-modal .ant-modal-footer {
  background: rgba(20, 26, 46, 1) !important;
}
.ant-card-body {
  background: rgba(20, 26, 46, 0.5) !important;
}

/* Container & base toast */
#toast-presenter [data-test="toast-container"].toast {
  background: rgba(20, 26, 46, 1) !important;
  color: #fff !important;
  border: 1px solid #273262 !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  padding: 10px 14px !important;
}

/* Variants */
#toast-presenter .toast.toast--success {
  border-color: #5ac189 !important;
}
#toast-presenter .toast.toast--warning {
  border-color: #fcc700 !important;
}
#toast-presenter .toast.toast--error {
  border-color: #e04355 !important;
}
#toast-presenter .toast.toast--info {
  border-color: #66bcfe !important;
}

/* Icon colors (keep text white) */
#toast-presenter .toast.toast--success svg,
#toast-presenter .toast.toast--success .anticon {
  color: #5ac189 !important;
}

#toast-presenter .toast.toast--warning svg,
#toast-presenter .toast.toast--warning .anticon {
  color: #fcc700 !important;
}

#toast-presenter .toast.toast--error svg,
#toast-presenter .toast.toast--error .anticon {
  color: #e04355 !important;
}

#toast-presenter .toast.toast--info svg,
#toast-presenter .toast.toast--info .anticon {
  color: #66bcfe !important;
}

/* Optional: a slim left accent bar by status */
#toast-presenter .toast {
  position: relative;
  overflow: hidden;
}
#toast-presenter .toast.toast--success::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #5ac189;
}
#toast-presenter .toast.toast--warning::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fcc700;
}
#toast-presenter .toast.toast--error::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e04355;
}
#toast-presenter .toast.toast--info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #66bcfe;
}

/* Darken success/error cell backgrounds inside AntD tables */
.ant-table td.is-success,
.ant-table td.cell-success,
.ant-table td.success {
  background: #123628 !important;
  color: #fff !important;
}

.ant-table td.is-error,
.ant-table td.cell-error,
.ant-table td.error {
  background: #3e1420 !important;
  color: #fff !important;
}

/* If Superset uses "positive"/"negative" semantics */
.ant-table td.positive {
  background: #123628 !important;
  color: #fff !important;
}
.ant-table td.negative {
  background: #3e1420 !important;
  color: #fff !important;
}

/* Filter Bar Expand/Collapse Icon - White Color */
[data-test="filter-bar__expand-button"],
.filter-bar__expand-button,
.collapse-icon.anticon-vertical-align-top,
.collapse-icon.anticon-vertical-align-bottom {
  color: #ffffff !important;
}

[data-test="filter-bar__expand-button"] svg,
.collapse-icon svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Keep horizontal menu title text white */
.ant-menu-title-content {
  color: #ffffff !important;
}

.ant-menu-light .ant-menu-submenu-title,
.ant-menu-light .ant-menu-submenu-title:hover,
.ant-menu-light .ant-menu-submenu-title:focus {
  color: #ffffff !important;
}

.toggle-button,
.toggle-button:hover,
.toggle-button:focus {
  color: #ffffff !important;
}

.toggle-button svg {
  color: inherit !important;
  fill: currentColor !important;
}

.toggle-button.active,
.toggle-button.active:hover,
.toggle-button.active:focus {
  background-color: #3d4a7c !important;
  border-color: #273262 !important;
  color: #ffffff !important;
}