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

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

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

fieldset.hw-combobox input[type="text"] {
  font-size: 0.875rem !important;
}

.hw-combobox__option {
  font-size: 0.875rem !important;
}

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

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

/* Copy Enrollment Link button - CSS class-based state management */
.copy-enrollment-link-btn .copied-state {
  display: none;
}
.copy-enrollment-link-btn.copied .default-state {
  display: none;
}
.copy-enrollment-link-btn.copied .copied-state {
  display: inline-flex;
  align-items: center;
}