/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Global search dropdown loading state. Turbo sets [busy] on a frame while its
   request is in flight, so this needs no JS. */
#global_search_results[busy] {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
}

/* --- Pricing grid (docs/prd/36) -------------------------------------------
   Appended here rather than shipped as its own file: Propshaft does not glob,
   and the layout links exactly two stylesheets — a pricing_grid.css would have
   been served and never loaded.

   These are the rules shared by ~200 inputs on one page, where repeating the
   utility string would drown the ERB. Everything else on the grid is Tailwind.

   .grid-cell-input is the one deliberate departure from _charge_row's inputs:
   a ring only on hover/focus, so the matrix reads as a table at rest and as
   inputs on intent. */

.grid-cell-input {
  width: 100%;
  min-width: 4.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.25rem 0.375rem;
  text-align: right;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px transparent;
}
/* Reads as a table at rest, as an input on intent. */
.grid-cell-input:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgb(209 213 219); }
.grid-cell-input:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--color-primary-600, #2563eb);
}
.grid-cell-input:disabled { color: rgb(156 163 175); }
.grid-cell-margin { min-width: 3.5rem; }

/* Unpriced cell: the amber gap the grid exists to expose. */
.grid-missing-cell {
  display: inline-block;
  border: 1px dashed var(--color-warning-600, #d97706);
  border-radius: 0.375rem;
  color: var(--color-warning-700, #b45309);
  font-size: 11px;
  line-height: 1.1;
  padding: 0.2rem 0.55rem;
  background: transparent;
  cursor: pointer;
}
.grid-missing-cell:hover { background: var(--color-warning-50, #fffbeb); }

/* First column stays put under horizontal scroll (many containers). */
.grid-sticky-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

/* Last column stays put under horizontal scroll: the tender's routes table
   carries its actions — the pricing grid link, Edit — in its final column, and
   a wide table (Spanish headers, five columns of hubs and money) pushed that
   column past the card's edge, where it was clipped mid-word with no scrollbar
   to hint it existed. The shadow says "there is more underneath". */
.grid-sticky-col-right {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 1;
  box-shadow: -10px 0 8px -8px rgba(0, 0, 0, 0.12);
}

/* A machine priced this and no human has looked yet (docs/prd/34 §34.2). The
   accordion has room for a status pill; a cell does not, so the input says it. */
.grid-cell-review { box-shadow: inset 0 0 0 1px var(--color-warning-600, #d97706); }

/* The container count in a column header: narrow, because it sits inline with
   the type it counts ("2 × 40HC") rather than in a column of its own. */
.grid-count-input { width: 3rem; min-width: 3rem; }

/* Reporting filter popovers (docs/prd/38). Everything structural is Tailwind
   utilities in the partials; this is only the entrance, which utilities can't
   express. Same reasoning as the toasts above: an animation, not a transition. */
.report-popover {
  transform-origin: top left;
  animation: report-pop 120ms ease-out;
}
@keyframes report-pop {
  from { opacity: 0; transform: scale(0.98) translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .report-popover { animation: none; }
}

/* --- Rate alternatives workboard (docs/prd/40) ------------------------------
   Appended here for the same reason the pricing-grid block is: Propshaft does
   not glob, and the layout links exactly two stylesheets. These are the states
   the Stimulus controller toggles through data-alt-* / aria-* — docs/prd/26
   keeps Tailwind out of JavaScript, so a JS-driven state needs a rule here.
   Layout and type stay utilities in the partials. */

/* The picked column: header, cells and footer share the tint through one
   attribute, so a pick repaints the whole column in one pass. */
[data-column-key][data-alt-picked="true"] { background: var(--color-primary-50, #eff5ff); }

/* Δ colouring. up = costs more than the pick, down = cheaper, flat = equal or unknown. */
[data-alt-sign="up"]   { color: var(--color-danger-700, #b91c1c); }
[data-alt-sign="down"] { color: var(--color-success-700, #15803d); }
[data-alt-sign="flat"] { color: rgb(156 163 175); }

/* The radio glyph in a column header, filled from the column's picked state so
   the header button needs no class swap; the "current pick" word beside it
   takes the same cue. */
.alt-radio {
  display: inline-block; width: 13px; height: 13px; border-radius: 9999px; background: #fff;
  box-shadow: inset 0 0 0 1px rgb(209 213 219);
}
[data-alt-picked="true"] .alt-radio { box-shadow: inset 0 0 0 4px var(--color-primary-600, #2563eb); }
[data-alt-picked="true"] [data-alt-pick-state] { color: var(--color-primary-700, #1d4fd0); font-weight: 500; }

/* Shortlist star → numbered preference badge. */
[data-alt-shortlist][aria-pressed="true"] {
  background: var(--color-primary-100, #dbe7fe); color: var(--color-primary-700, #1d4fd0);
}

/* The cover-depth segmented control (JS-toggled, so a class rather than
   utilities). A checked radio keeps its fill even when the shortlist shrinks
   under it and disables it: the intent is preserved, only unreachable. */
.alt-pill {
  border-radius: 0.375rem; padding: 0.25rem 0.625rem; font-size: 12px; font-weight: 500;
  background: #fff; color: rgb(55 65 81); box-shadow: inset 0 0 0 1px rgb(209 213 219); cursor: pointer;
}
.alt-pill:hover:not(:disabled) { background: rgb(249 250 251); }
.alt-pill[aria-checked="true"] { background: var(--color-primary-900, #082b6b); color: #fff; box-shadow: none; }
.alt-pill:disabled:not([aria-checked="true"]) { color: rgb(156 163 175); }
.alt-pill:disabled { cursor: not-allowed; }

/* Arrival focus (§4.4): the row the pricer came from, briefly amber. An
   animation, not a transition — same reasoning as the toasts. */
.alt-focus { animation: alt-focus-fade 1.5s ease-out forwards; outline: none; }
@keyframes alt-focus-fade {
  from { background: var(--color-warning-50, #fffbeb); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-focus { animation: none; }
}