html,
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--finance-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root,
.theme-dark {
  --finance-bg: #080a0d;
  --finance-panel: #11141a;
  --finance-panel-raised: #171b22;
  --finance-border: #2a303a;
  --finance-text: #e6edf3;
  --finance-muted: #9aa7b6;
  --finance-label: #b7c2cf;
  --finance-accent: #67e8f9;
  --finance-hover: #1b2028;
  --finance-selected: #172033;
  --finance-table-active: #1f2937;
}

.theme-light {
  --finance-bg: #eef3f8;
  --finance-panel: #ffffff;
  --finance-panel-raised: #f5f7fb;
  --finance-border: #cfd8e5;
  --finance-text: #18202a;
  --finance-muted: #667388;
  --finance-label: #475569;
  --finance-accent: #0369a1;
  --finance-hover: #e8eef6;
  --finance-selected: #dbeafe;
  --finance-table-active: #e0f2fe;
}

#react-entry-point,
#_dash-app-content,
.finance-page {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--finance-bg);
  color: var(--finance-text);
}

.finance-toolbar {
  min-height: 32px;
}

.finance-theme-control {
  border: 1px solid var(--finance-border);
  background: var(--finance-panel);
}

.finance-tabs > .mantine-Tabs-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: thin;
}

.finance-tabs .mantine-Tabs-tab {
  flex: 0 0 auto;
  color: var(--finance-muted);
}

.finance-tabs .mantine-Tabs-tab[data-active] {
  color: var(--finance-text);
}

.finance-filter-control {
  width: 100%;
}

.finance-relative-date-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.finance-relative-date-button {
  appearance: none;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--finance-border);
  border-radius: 7px;
  background: var(--finance-panel-raised);
  color: var(--finance-label);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.finance-relative-date-button:hover {
  border-color: var(--finance-muted);
  background: var(--finance-hover);
  color: var(--finance-text);
}

.finance-relative-date-button:focus-visible {
  outline: 2px solid var(--finance-accent);
  outline-offset: 2px;
}

.finance-relative-date-button:active {
  border-color: var(--finance-accent);
  background: var(--finance-selected);
  color: var(--finance-accent);
  transform: translateY(1px);
}

.finance-filter-input,
.finance-filter-control .mantine-Input-input,
.finance-filter-control .mantine-PillsInput-input {
  background: var(--finance-panel-raised) !important;
  border-color: var(--finance-border) !important;
  color: var(--finance-text) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.finance-filter-control .mantine-Input-input:hover,
.finance-filter-control .mantine-PillsInput-input:hover {
  background: var(--finance-hover) !important;
  border-color: var(--finance-muted) !important;
}

.finance-filter-control .mantine-Input-input:focus,
.finance-filter-control .mantine-PillsInput-input:focus-within {
  border-color: var(--finance-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--finance-accent) 18%, transparent) !important;
}

.finance-filter-control input,
.finance-filter-control input::placeholder,
.finance-filter-control .mantine-Input-placeholder,
.finance-filter-control .mantine-MultiSelect-placeholder {
  color: var(--finance-muted) !important;
  opacity: 1 !important;
}

.finance-filter-control input:not(:placeholder-shown) {
  color: var(--finance-text) !important;
}

.finance-filter-control .mantine-Input-section,
.finance-filter-control .mantine-InputClearButton-root {
  color: var(--finance-muted) !important;
}

.finance-filter-control .mantine-InputClearButton-root:hover {
  background: var(--finance-hover) !important;
  color: var(--finance-text) !important;
}

.finance-filter-overlay,
.mantine-Combobox-dropdown,
.mantine-DatePickerInput-dropdown {
  background: var(--finance-panel) !important;
  border: 1px solid var(--finance-border) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22) !important;
}

.finance-filter-option,
.mantine-Combobox-option {
  color: var(--finance-text) !important;
}

.mantine-Combobox-option:hover,
.mantine-Combobox-option[data-combobox-selected],
.mantine-Combobox-option[data-combobox-active] {
  background: var(--finance-selected) !important;
  color: var(--finance-text) !important;
}

.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-calendarHeader,
.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-calendarHeaderLevel,
.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-weekday,
.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-day {
  color: var(--finance-text) !important;
}

.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-day:hover,
.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-day[data-selected],
.mantine-DatePickerInput-dropdown .mantine-DatePickerInput-day[data-in-range] {
  background: var(--finance-selected) !important;
  color: var(--finance-text) !important;
}

.finance-graph {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  height: clamp(400px, 46vh, 660px) !important;
  min-height: 400px;
  overflow: hidden;
}

.finance-graph .js-plotly-plot,
.finance-graph .plot-container,
.finance-graph .svg-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

.finance-metric-card {
  min-width: 0;
}

.dash-table-container {
  max-width: 100%;
  overflow-x: auto;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
  background: var(--finance-panel-raised);
  color: var(--finance-text);
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  background-color: var(--finance-panel);
  color: var(--finance-text);
  border-color: var(--finance-border) !important;
}

.finance-drilldown-drawer .mantine-Drawer-content,
.finance-drilldown-drawer .mantine-Drawer-header {
  background: var(--finance-panel);
  color: var(--finance-text);
}

@media (min-width: 1900px) {
  .finance-graph {
    height: clamp(440px, 48vh, 760px) !important;
    min-height: 440px;
  }
}

@media (max-width: 1180px) {
  .finance-graph {
    height: clamp(380px, 52vh, 620px) !important;
    min-height: 380px;
  }
}

@media (max-width: 720px) {
  .finance-graph {
    height: 360px !important;
    min-height: 360px;
  }
}