/* TomSelect: Bootstrap validation feedback (mirrors .form-control.is-invalid/is-valid) */
.ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545;
}
.ts-wrapper.is-valid .ts-control {
    border-color: #198754;
}

/* Disabled rows: grey the main link to match the row's secondary color */
tr.text-secondary a:not(.btn) {
    color: rgba(var(--bs-secondary-rgb), 1) !important;
}

/* Fritz #20, 2026-09-15: dashboard cards whose content grows without bound (Announcements,
   Employee Resources) get a fixed maximum height and scroll internally, so one long list
   does not push every other card off the screen. */
.nyeia-scroll-card {
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fritz #6, 2026-09-15: a missing required field was only outlined in red, which is easy
   to miss on a long form. Fill it as well as outline it. Bootstrap's .is-invalid already
   supplies the red border and icon; this adds the tint, and covers the TomSelect wrapper
   (.ts-wrapper) that sti-custom.js flags alongside the native control. Kept light so the
   text stays readable, and the label is reddened so the field is findable when scrolling. */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.ts-wrapper.is-invalid .ts-control {
    background-color: #fdf0f0;
    border-color: #dc3545;
}
.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    background-color: #fff;
}

/* ---------------------------------------------------------------------------
 * TomSelect dropdowns inside Bootstrap modals
 * ---------------------------------------------------------------------------
 * Reported by Fritz 2026-09-15 as "I can't add a City" on the Add Electrician
 * form. The dropdown was opening correctly and positioned correctly, but
 * TomSelect ships .ts-dropdown at z-index 1000 while a Bootstrap 5 modal sits at
 * 1055, so inside a modal the list rendered BEHIND the dialog: invisible and
 * unclickable. elementFromPoint() over the dropdown returned the modal body.
 *
 * Keyboard use still worked (Enter selects the active option without needing to
 * see it), which is why this survived testing. Mouse and touch users saw the
 * field simply turn red with no suggestions and no way to accept a new value.
 *
 * initCityTomSelects() and initAjaxTomSelects() both pass dropdownParent:'body',
 * so every city and ajax select in every modal was affected, not just this form:
 * Electricians insert/update, Power Companies insert/update, and the Jobs modals.
 *
 * 1060 clears the modal (1055) and stays below Bootstrap's popover (1070) and
 * tooltip (1080), so tooltips still paint over an open dropdown.
 * ------------------------------------------------------------------------- */
.ts-dropdown {
    z-index: 1060;
}