/* Inter font (Google Fonts) – loaded so MantineProvider theme fontFamily applies */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Filter panel: compact, reference-style tabs (rounded pills, active = white) */
.filter-panel-tabs-list {
  gap: 0.5rem;
  background-color: transparent;
}
.filter-panel-tabs [class*="mantine-Tabs-tab"] {
  border-radius: 8px;
  padding: 0.4rem 1rem;
  font-weight: 500;
}
.filter-panel-tabs [class*="mantine-Tabs-tab"][data-active="true"],
.filter-panel-tabs [class*="mantine-Tabs-tab"].mantine-Tabs-tab--active {
  background-color: #fff;
  color: var(--mantine-color-default-text, #1a1a1a);
}
.filter-panel-tabs [class*="mantine-Tabs-tab"]:not([data-active="true"]):not(.mantine-Tabs-tab--active) {
  background-color: transparent;
  color: var(--mantine-color-dimmed, #868e96);
}

/* Section titles (Entry Details, Entries Over Time, etc.): same size and spacing */
[class*="mantine-Title-root"][data-order="5"] {
  font-size: 1rem !important;
  font-weight: 600;
  margin-bottom: var(--mantine-spacing-sm, 0.5rem);
}

/* Minimal overrides: logo size, chat input, and Dash DataTable/Plotly where Mantine doesn't apply */

.app-logo {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

/* Chat input (dcc.Input) to align with Mantine look; focus = brand #45A1BF */
.dmc-input-style,
.dash-input-container.dmc-input-style {
  padding: 0.5rem 0.75rem;
  border-radius: var(--mantine-radius-default, 4px);
  border: 1px solid var(--mantine-color-default-border);
  font-size: 0.875rem;
  min-height: 36px;
  box-sizing: border-box;
}
.dmc-input-style:focus,
.dmc-input-style:focus-visible,
.dash-input-container.dmc-input-style:focus-within,
.dash-input-container.dmc-input-style input:focus,
.dash-input-container.dmc-input-style input:focus-visible {
  outline: none !important;
  border-color: #45A1BF !important;
  box-shadow: 0 0 0 1px #45A1BF !important;
}
.dash-input-container.dmc-input-style input {
  outline: none;
}
.dash-input-container.dmc-input-style input:focus,
.dash-input-container.dmc-input-style input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Plotly charts: rounded corners inside Paper */
.js-plotly-plot,
.plotly {
  border-radius: var(--mantine-radius-md, 8px);
  overflow: hidden;
}

/* Dash DataTable: reduce selected cell emphasis so it doesn't clash */
td.dash-cell.cell--selected,
td.dash-cell.focused,
td.dash-cell.cell--selected.focused {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Chat markdown: keep headings readable */
#chat-messages .dash-markdown h1,
#chat-messages .dash-markdown h2,
#chat-messages .dash-markdown h3 {
  font-size: 1rem !important;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Chat data accordion (details/summary) and table: use Inter */
#chat-messages details,
#chat-messages summary,
#chat-messages .dash-table-container {
  font-family: "Inter", var(--mantine-font-family), sans-serif;
}