/*
 * 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. 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
   a bare dialog renders top-left. `: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 or an `m-auto` utility). New modal dialogs
   center automatically — do NOT add per-dialog `m-auto`. */
dialog:modal {
  margin: auto;
}

/* Activity date range (architecture.md §20). The desktop dialog is positioned
   against its trigger; mobile deliberately becomes a full-screen range task. */
dialog.modal.activity-date-range-dialog {
  inset: auto;
  top: var(--activity-picker-top, 1rem);
  left: var(--activity-picker-left, 1rem);
  width: min(52rem, calc(100vw - 2rem));
  margin: 0;
  overflow: visible;
}

dialog.modal.activity-date-range-dialog[open] {
  display: block;
}

dialog.modal.activity-date-range-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.08);
  backdrop-filter: none;
}

.activity-date-range-panel {
  width: 100% !important;
  max-width: none !important;
  max-height: min(42rem, calc(100vh - 2rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  animation: none;
}

.activity-date-range-body {
  overflow: hidden;
}

.activity-date-range-mobile-summary {
  display: none;
}

.activity-date-range-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  height: min(33rem, calc(100vh - 12rem));
  min-height: 24rem;
}

.activity-date-range-presets {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  border-right: 1px solid hsl(var(--border));
  padding: 1rem 0.75rem;
}

.activity-date-range-preset {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.625rem 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  white-space: nowrap;
}

.activity-date-range-preset:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.activity-date-range-preset:focus-visible,
.activity-calendar-day:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.activity-date-range-preset[data-active="true"] {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-weight: 500;
}

.activity-date-range-preset-check {
  flex: none;
  opacity: 0;
}

.activity-date-range-preset[data-active="true"] .activity-date-range-preset-check {
  opacity: 1;
}

.activity-date-range-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.activity-date-range-calendar {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem 6rem;
}

.activity-calendar-month {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  scroll-margin-top: 0.75rem;
}

.activity-calendar-month:last-child {
  margin-bottom: 0;
}

.activity-calendar-month-title {
  margin: 0 -0.25rem 0.5rem;
  background: hsl(var(--card));
  padding: 0.375rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.activity-calendar-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.activity-calendar-grid th {
  height: 2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.activity-calendar-grid td {
  height: 2.5rem;
  padding: 0.125rem 0;
  text-align: center;
}

.activity-calendar-day {
  width: 100%;
  height: 2.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.activity-calendar-day:hover:not(:disabled) {
  background: hsl(var(--muted));
}

.activity-calendar-day:disabled {
  cursor: not-allowed;
  color: hsl(var(--muted-foreground) / 0.35);
}

.activity-calendar-day[data-range="middle"] {
  border-radius: 0;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--foreground));
}

.activity-calendar-day[data-range="start"] {
  border-radius: 9999px 0 0 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.activity-calendar-day[data-range="end"] {
  border-radius: 0 9999px 9999px 0;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.activity-calendar-day[data-range="both"] {
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

@media (max-width: 639px) {
  dialog.modal.activity-date-range-dialog {
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
  }

  dialog.modal.activity-date-range-dialog::backdrop {
    background: transparent;
  }

  .activity-date-range-panel {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border: 0;
    border-radius: 0;
  }

  .activity-date-range-body {
    overflow-y: auto;
  }

  .activity-date-range-mobile-summary {
    position: sticky;
    top: 0;
    z-index: 4;
    display: block;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    padding: 0.75rem 1rem;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  .activity-date-range-layout {
    display: block;
    height: auto;
    min-height: 0;
  }

  .activity-date-range-presets {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
  }

  .activity-date-range-calendar {
    overflow: visible;
    padding-inline: 1rem;
    padding-bottom: max(6rem, calc(100dvh - 33rem));
  }

  .activity-calendar-day {
    min-height: 2.75rem;
  }
}

/* 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 architecture.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.
 *
 * These are plain custom-property declarations, so they apply equally to the
 * CSP-safe _component.html.erb override below — that partial relocates the gem's
 * inline style tag, it does not restyle the field.
 */
.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));
  /* The gem ships raw hex for these, which ignores the theme entirely. Options
   * and group headers sit on the popover surface like every other floating
   * menu (.dropdown-content), and the active states use the same muted wash
   * as .dropdown-item hover. */
  --hw-option-bg-color: hsl(var(--popover));
  --hw-group-bg-color: hsl(var(--popover));
  --hw-active-bg-color: hsl(var(--muted));
}

/* The gem paints OPTIONS but never the listbox itself, so anywhere the list
 * overhangs other content — always, once combobox-position lifts it to fixed
 * positioning — the dropdown was transparent and the page showed through.
 * Same surface treatment as .dropdown-content; the shadow and border only
 * exist when the list is actually showing something, matching the gem's own
 * border guard, so a collapsed listbox cannot cast a hairline shadow. */
.hw-combobox__listbox {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

.hw-combobox__listbox:has([role="option"]:not([hidden])),
.hw-combobox__listbox:has(.hw-combobox__no-results:not([hidden])) {
  border-color: hsl(var(--border));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.hw-combobox__input {
  display: block;
}

/* hotwire_combobox also emits these essential rules in a nonce-bearing style
 * tag. Keeping them in the application stylesheet makes the live region safe
 * across Turbo navigations where a request nonce can become stale.
 */
.hw-combobox__announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hw_combobox__pagination__wrapper {
  height: 1px;
}

.hw-combobox__no-results {
  padding: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  list-style: none;
}

/* 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;
}