/* Global trial-admin base layer: text-role tokens + typography.
 *
 * Loaded on every admin page via config/unfold.py STYLES. Establishes one shared
 * set of readable text colours (remapped darker than the raw base-400/500 the
 * custom CSS used to reach for) plus baseline typography, so the hub, overview,
 * setup wizard and stock dashboard read consistently on the warm cream panels.
 *
 * Palette is unchanged (warm taupe + teal). Only the muted-text *roles* move
 * darker to clear WCAG AA on the base-50/100 panel fills.
 */
:root {
  /* Text roles — consume these instead of raw --color-base-* for text. */
  --to-text-heading: var(--color-base-900, #423d36);  /* titles / important */
  --to-text-body:    var(--color-base-800, #4e473e);  /* default body copy */
  --to-text-muted:   var(--color-base-600, #746757);  /* labels / secondary (AA on cream) */
  --to-text-faint:   var(--color-base-500, #93846f);  /* de-emphasised (counts, hints) */
  /* Surfaces. */
  --to-panel-bg: var(--color-base-50, #fcfbf8);
  --to-th-bg:    var(--color-base-100, #f6f3ed);
  --to-border:   var(--color-base-200, #eee8dc);
}

/* Crisper glyph rendering for the system-ui stack on the light theme. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Shared mobile shell. Unfold supplies the drawer; these rules keep custom
 * portal pages usable once the drawer is opened on a phone-sized viewport. */
@media (max-width: 1279px) {
  #main,
  #content,
  #header-inner {
    min-width: 0;
  }

  #main > .bg-white,
  #main > .bg-white > .container,
  #main > .px-4 {
    max-width: 100%;
  }

  .to-mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    border: 0;
    padding: 0;
    background: rgba(37, 33, 29, 0.38);
    cursor: pointer;
  }

  .to-mobile-sidebar-backdrop[hidden] {
    display: none;
  }
}

@media (max-width: 640px) {
  #main > .bg-white > .container,
  #main > .px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #header-inner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #header-inner > div {
    min-width: 0;
  }

  #header-inner h1 {
    max-width: calc(100vw - 7rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #header-inner .ml-auto {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .to-table,
  .ts-form-grid,
  .hub-page-wrap {
    max-width: 100%;
  }

  .to-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}