/*
 * 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.
 */

/* Media lightbox dialog sizing - 95% viewport for full-screen experience */
.modal-lightbox {
  width: 95vw;
  max-width: 95vw;
  height: 95vh;
}

/* Center every native modal <dialog> app-wide (WLS-976). Tailwind v4 Preflight
   resets `dialog { margin: 0 }` (its universal `*, ::backdrop { margin: 0 }`),
   which cancels the user-agent `margin: auto` that centers a showModal() dialog
   — so ad-hoc dialogs render top-left (WLS-969 was the first instance). `:modal`
   matches only showModal()-opened dialogs. This rule is unlayered, so it beats
   Preflight's `@layer base` reset regardless of specificity, and it's a no-op
   for dialogs that already center (the shadcn `.modal` component / `m-auto`). */
dialog:modal {
  margin: auto;
}

/* Hotwire Combobox - full width and consistent styling */
fieldset.hw-combobox {
  width: 100% !important;
}

div.hw-combobox__main__wrapper {
  width: 100% !important;
}

/* Combobox control metrics — the combobox is a chassis control (WLS-1246).
 * The contract and its reasons live in docs/architecture/ui-hotwire.md Section 6;
 * what follows is only the arithmetic, which is not self-evident from the values.
 *
 * The gem's visible box (.hw-combobox__main__wrapper) sets no height of its own,
 * so the height falls out of border + padding + line box:
 *
 *   2 x 1px border + 2 x 7px padding + 20px line box = 36px = h-9
 *
 * The padding is derived rather than written as 7px so it stays correct if the
 * control height or the leading moves. The field is made block-level because the
 * gem leaves it inline-block, and an inline box reserves descender space beneath
 * it — the half pixel that rounded the control up to 37px. It already spans the
 * full width, so nothing else about the layout changes.
 */
.hw-combobox {
  --hw-font-size: 0.875rem; /* text-sm, as on .input / .select */
  --hw-line-height: 1.25rem; /* text-sm leading */
  --hw-padding--slim: calc((2.25rem - var(--hw-line-height)) / 2 - var(--hw-border-width--slim));
  --hw-border-color: hsl(var(--border));
  --hw-component-bg-color: hsl(var(--input-background));
  --hw-focus-color: hsl(var(--ring));
}

.hw-combobox__input {
  display: block;
}

/* Filter bars and dense form surfaces run at 13px, the size their `.select`,
 * `.input` and body-text neighbours already use. Driven by `variant: :filter` /
 * `variant: :compact` on the helper, never by a class passed at the call site.
 * The two differ only in behaviour — `:filter` also auto-submits — so they share
 * one size rule rather than letting the same number drift in two places.
 */
.combobox-filter .hw-combobox,
.combobox-compact .hw-combobox {
  --hw-font-size: 13px;
}

/* Hide blank option in combobox dropdowns to prevent duplicate placeholder
 * The placeholder is shown in the input field; showing it again as a selectable
 * option in the dropdown creates confusion. The blank option still functions
 * for clearing selections via keyboard navigation.
 */
.hw-combobox__option--blank {
  display: none;
}

/* Combobox listbox fixed positioning for modal escape
 * When combobox-position controller applies fixed positioning,
 * ensure the listbox appears above modals (modal z-index is 10)
 */
.hw-combobox__listbox[style*="position: fixed"] {
  z-index: 9999 !important;
}

/* KPI card: suppress card hover when hovering the target button */
[data-controller="card-link"]:hover:has([data-controller="kpi-target"]:hover) {
  background-color: hsl(var(--card)) !important;
  cursor: default;
}

/* Honour the operating system's "reduce motion" accessibility setting.
 *
 * This is a genuine accessibility improvement first: users who ask their OS to
 * reduce motion should not get our transitions and animations. It also makes
 * the system test suite deterministic, because the Playwright BrowserContext
 * sets reducedMotion: "reduce" and this rule is what gives that effect
 * (WLS-1221) — it removes the whole "clicked or measured mid-transition" class
 * of flake at the source rather than compensating for it with sleeps.
 *
 * Durations are .001ms rather than 0s deliberately: a zero duration suppresses
 * the transitionend / animationend events entirely, and code (ours or a
 * library's) that waits for them would hang.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}