/* ─────────────────────────────────────────────────────────
   CRM CONSOLE: BASE

   Resets and typography, scoped to the console. globals.css still loads
   on /crm (the root layout imports it), so its element rules (body font,
   link colour, button reset) reach in; everything here re-states what
   the console wants under .crm-body / .crm-app and nothing leaks back
   out to the funnels.
   ───────────────────────────────────────────────────────── */

.crm-body {
  background: var(--c-bg);
  color: var(--c-text);
}

.crm-app {
  min-height: var(--c-window-h);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--c-font-ui);
  font-size: var(--c-text-md);
  font-weight: 400;
  line-height: var(--c-leading);
  letter-spacing: -0.003em;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--c-text-4) transparent;
}

.crm-app :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote) {
  margin: 0;
}

.crm-app :where(ol, ul) {
  list-style: none;
  padding: 0;
}

/* A phone never scrolls sideways: whatever is wider than the window
   scrolls inside its own container (a table, the calendar, the metrics
   pivot) or wraps. clip, not hidden, so the page is not made a scroll
   container and the sticky top bar keeps sticking. */
@media (max-width: 720px) {
  .crm-app {
    overflow-x: clip;
  }
}

.crm-app :where(a) {
  color: inherit;
  text-decoration: none;
}

/* Form controls are reset except Clerk's (class cl-*): its sign-in box
   injects its styles ahead of ours with the same weight, so an
   unqualified reset here would strip its buttons of fill and colour.
   The exclusion sits in :where so the reset keeps zero weight. */
.crm-app :where(button, input, select, textarea):where(:not([class^='cl-'], [class*=' cl-'])) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* A phone: iOS zooms into any field whose text is under 16px when it
   takes focus, and stays zoomed. Every text field, select and textarea
   (Clerk's too) takes --c-text-field there; the weight beats a
   primitive's or a screen's own size. The viewport stays zoomable. */
@media (max-width: 720px) {
  .crm-app :is(input, select, textarea):not([type='checkbox'], [type='radio'], [type='range'], [type='file']) {
    font-size: var(--c-text-field);
  }
}

.crm-app :where(button):where(:not([class^='cl-'], [class*=' cl-'])) {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.crm-app :where(button:disabled) {
  cursor: default;
}

.crm-app :where(table) {
  border-collapse: collapse;
  width: 100%;
}

.crm-app :where(time) {
  font-variant-numeric: tabular-nums;
}

.crm-app ::selection {
  background: var(--c-selection);
}

.crm-app :focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}

/* Screen-reader only. */
.ui-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text roles, for the rare run of text that is not inside a primitive. */
.ui-text-2 {
  color: var(--c-text-2);
}

.ui-text-3 {
  color: var(--c-text-3);
}

.ui-mono {
  font-family: var(--c-font-mono);
  font-size: 0.94em;
  letter-spacing: 0;
}

.ui-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ui-link {
  color: var(--c-accent);
  font-weight: 500;
}

.ui-link:hover {
  text-decoration: underline;
}

/* The thing a ?focus= link points at (FocusScroller scrolls to it). */
.ui-focus {
  box-shadow: 0 0 0 2px var(--c-accent);
}