:root {
  @mixin light-root {
    --mantine-color-body: #ffffff;
    --mantine-color-text: #3b3b3b;
    --input-disabled-color: #3c4045;
  }

  /*
   * Dark scheme.
   *
   * This block used to force `--mantine-color-body: #ffffff` and dark text —
   * i.e. it tried to make dark mode look like light mode. It only half worked:
   * Mantine's own components still resolve their surfaces from the `dark`
   * palette, so switching schemes produced a white page with grey inputs,
   * grey SegmentedControls and washed-out text.
   *
   * The surface indices are remapped HERE rather than in theme.ts on purpose.
   * `colors.dark` is also the theme's `primaryColor`, and ~29 components plus
   * ~57 CSS-module rules reference `dark.N` / `--mantine-color-dark-N`
   * expecting the current light-mode values. Overriding inside the dark-scheme
   * scope leaves light mode byte-identical while giving dark mode real
   * surfaces.
   *
   * Indices 0-3 (light greys, used for text) and 9-12 (near-black, used for
   * the primary button) are intentionally left alone.
   */
  @mixin dark-root {
    --mantine-color-body: #16181c;
    --mantine-color-text: #e6e8eb;

    /* Surface ramp: borders → cards → page. */
    --mantine-color-dark-4: #4a5058;
    --mantine-color-dark-5: #343a40;
    --mantine-color-dark-6: #22262c;
    --mantine-color-dark-7: #16181c;
    --mantine-color-dark-8: #101216;

    /* Semantic aliases Mantine resolves for inputs, borders and dimmed text. */
    --mantine-color-default: #22262c;
    --mantine-color-default-hover: #2b3037;
    --mantine-color-default-border: #343a40;
    --mantine-color-default-color: #e6e8eb;
    --mantine-color-dimmed: #9aa4b2;
    --mantine-color-placeholder: #6b7280;
    --mantine-color-disabled: #22262c;
    --mantine-color-disabled-color: #6b7280;
    --mantine-color-disabled-border: #343a40;
    --input-disabled-color: #6b7280;
  }
  .input {
    font-size: 12px;
  }

  .label {
    font-size: 10px;
    margin-bottom: 5px;
  }
}

:root[data-mantine-color-scheme="light"] {
  --mantine-color-disabled-color: #3c4045;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  scrollbar-width: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
}

/*
 * iOS Safari zooms the whole page in whenever a focused field's font-size is
 * under 16px. The console's inputs are 12px (`.input` above) plus `size="xs"`
 * in places, so every tap on an iPhone zoomed and shifted the layout out from
 * under the user — worst inside modals and drawers, where the panel then
 * scrolls sideways. Phone widths only; desktop keeps the compact type.
 *
 * Not scoped to a page: modals and drawers render in a body-level portal.
 */
@media (max-width: 48em) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* Hide Google Charts' built-in tooltip — we render our own in a Portal so it isn't clipped by parents */
.google-visualization-tooltip {
  display: none !important;
}