@tailwind base;
@tailwind components;
@tailwind utilities;

/* What a form control's box is painted with. A screen that names no surface
   keeps the zinc it always had; a tinted one rewrites these so the border sinks
   into its ground. */
:root {
  --cup-field-border: #d4d4d8;
  --cup-field-bg: #ffffff;
  --cup-panel-border: #e4e4e7;
}
.dark {
  --cup-field-border: #3f3f46;
  --cup-field-bg: #18181b;
  --cup-panel-border: #27272a;
}

/* While a table's Turbo Frame is fetching (filter / search / sort / pagination),
   Turbo stamps [busy] on the frame. Reveal the DataTable's overlay (dim +
   spinner) so the wait is visible. The overlay stays pointer-events:none and
   never intercepts a click mid-fetch: Turbo already cancels/replaces an
   in-flight frame request, so a repeat submit can't stack, and blocking the
   table would only risk racing a legitimate click against the [busy] window. */
turbo-frame[busy] .cup-table-busy {
  opacity: 1;
}

/* Toolbar locked while its table's Turbo Frame is fetching (filters_controller):
   dim it so the disabled (`inert`) state reads as "loading, hold on". */
.is-busy-locked {
  opacity: 0.55;
  cursor: progress;
  transition: opacity 0.1s ease;
}

/* The navbar's strip of destinations scrolls horizontally once they no longer
   fit the window. A visible scrollbar there would sit permanently under the
   pills on Windows/Linux (where scrollbars take layout space) and add a second
   horizontal rule beside the header's border. The strip stays reachable without
   it: tabbing scrolls a focused pill into view, and a two-finger or shift-wheel
   gesture scrolls the container as usual. */
.cup-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cup-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Our search fields carry their own clear (×) button (clearable_controller), so
   suppress the browser's native type=search cancel widget to avoid a double ×. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* A column header is draggable to reorder (columns_controller sets cursor-move on
   the <th>), but its filter popover is interactive — keep the normal cursor there
   so it doesn't read as draggable. */
[data-controller~="column-filter"] {
  cursor: auto;
}

/* Inline email preview. Tailwind's preflight strips list markers and block
   margins, so the rendered template body would collapse into an un-flowed blob;
   re-establish email-client-like flow here, scoped to the preview container so
   it can never leak into the app chrome. */
.email-template-preview {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #18181b;
}
.email-template-preview p {
  margin: 0 0 1em;
}
.email-template-preview ul,
.email-template-preview ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.email-template-preview ul {
  list-style: disc;
}
.email-template-preview ol {
  list-style: decimal;
}
.email-template-preview li {
  margin: 0.25em 0;
}
.email-template-preview a {
  color: #2563eb;
  text-decoration: underline;
}
.email-template-preview strong {
  font-weight: 700;
}
.email-template-preview :first-child {
  margin-top: 0;
}
.email-template-preview :last-child {
  margin-bottom: 0;
}

/* Variable chip pill — the editor's inserted attachment and the preview both
   render this small rounded inline badge for a template variable. */
.cup-var-chip {
  display: inline-block;
  padding: 0 0.35em;
  border-radius: 0.25rem;
  background: #e4e4e7;
  color: #18181b;
  font-size: 0.85em;
}

/* Iteration tints. Three positional colors the mapping editor cycles through,
   carried as custom properties so one class on an iteration's root paints its
   whole surface — head, fields and conditions — and so the browser can re-tint
   a row after an add or a removal by swapping that single class. Written here
   rather than as Tailwind color tokens because a `dark:` utility cannot set a
   variable both themes read. Red and blue stay out: red is destructive, blue is
   the focus ring. */
.cup-iteration-tint-1 {
  --cup-iteration-ink: #3730a3;
  --cup-iteration-ground: #dfe3f7;
  --cup-iteration-sunk: #d0d6f0;
  --cup-iteration-head: #c0c8e9;
}
.cup-iteration-tint-2 {
  --cup-iteration-ink: #115e59;
  --cup-iteration-ground: #d9efe6;
  --cup-iteration-sunk: #c8e7d9;
  --cup-iteration-head: #b3dcca;
}
.cup-iteration-tint-3 {
  --cup-iteration-ink: #92400e;
  --cup-iteration-ground: #f7ead0;
  --cup-iteration-sunk: #f2dfb9;
  --cup-iteration-head: #ead09c;
}
.dark .cup-iteration-tint-1 {
  --cup-iteration-ink: #a5b4fc;
  --cup-iteration-ground: #15172c;
  --cup-iteration-sunk: #1c1f3b;
  --cup-iteration-head: #232748;
}
.dark .cup-iteration-tint-2 {
  --cup-iteration-ink: #5eead4;
  --cup-iteration-ground: #0d2320;
  --cup-iteration-sunk: #12302b;
  --cup-iteration-head: #173c34;
}
.dark .cup-iteration-tint-3 {
  --cup-iteration-ink: #fcd34d;
  --cup-iteration-ground: #241b09;
  --cup-iteration-sunk: #31250c;
  --cup-iteration-head: #3d2e0f;
}

/* A control keeps its border and its size and loses only the tone of the line:
   it is painted in the surface it stands on, so it vanishes there and returns
   the moment the control takes focus, or the screen names no surface. */
.cup-surface-head {
  background-color: var(--cup-iteration-head, transparent);
  --cup-field-border: var(--cup-iteration-head, #d4d4d8);
  --cup-panel-border: var(--cup-iteration-head, #e4e4e7);
}
.cup-surface-ground {
  background-color: var(--cup-iteration-ground, transparent);
  --cup-field-border: var(--cup-iteration-ground, #d4d4d8);
  --cup-panel-border: var(--cup-iteration-ground, #e4e4e7);
}
.cup-surface-sunk {
  background-color: var(--cup-iteration-sunk, transparent);
  --cup-field-border: var(--cup-iteration-sunk, #d4d4d8);
  --cup-panel-border: var(--cup-iteration-sunk, #e4e4e7);
}

/* Zinc-900 sits too close to the deep tints to read as a control on top of
   them; every dark surface lifts its fields one step clear of its own ground.
   The fallbacks are repeated per surface because a surface class reached for
   outside a tinted block would otherwise paint the light theme's zinc here. */
.dark .cup-surface-head {
  --cup-field-bg: #292930;
  --cup-field-border: var(--cup-iteration-head, #3f3f46);
  --cup-panel-border: var(--cup-iteration-head, #27272a);
}
.dark .cup-surface-ground {
  --cup-field-bg: #292930;
  --cup-field-border: var(--cup-iteration-ground, #3f3f46);
  --cup-panel-border: var(--cup-iteration-ground, #27272a);
}
.dark .cup-surface-sunk {
  --cup-field-bg: #292930;
  --cup-field-border: var(--cup-iteration-sunk, #3f3f46);
  --cup-panel-border: var(--cup-iteration-sunk, #27272a);
}