/* App-level styling for authenticated Bootstrap pages (the bootstrap_app
   layout). Bridges self-rendering controls that emit plain markup.

   Shared Bootstrap palette adjustments live in bootstrap_theme.css so
   they apply to the patient interface and login / exception screens as
   well. Anything here is specific to the authenticated app chrome. */

.autocomplete-spinner-wrapper {
    position: relative;
}

.autocomplete-spinner {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    margin-top: -0.5rem;
    pointer-events: none;
}

/* Second-level (sub-)navigation pills. Bootstrap's default active pill is a
   solid primary fill, which reads like a primary button; tone it down to a
   subtle grey "selected" state with dark text. */
.nav-pills {
    --bs-nav-pills-link-active-color: #212529;
    --bs-nav-pills-link-active-bg: #e9ecef;
}

.nav-pills .nav-link {
    color: #495057;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: #f1f3f5;
}

/* Avatar in the navbar (the user dropdown toggle). */
.navbar-avatar {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Avatars rendered by the avatar control (css_class="avatar"), e.g. in the
   task thread. Bootstrap has no avatar component, so size them here. */
img.avatar {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* State-change rows (task & issue threads) use a smaller inline avatar. */
.task-state-row img.avatar,
.issue-state-row img.avatar {
    height: 20px;
    width: 20px;
}

/* Legacy utility classes that Primer provided and several templates/JS still
   rely on (e.g. the scoreboard toggles visibility via the `hidden` class). */
.hidden {
    display: none !important;
}

.overflow-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Scroll wrapper for wide / height-limited tables (e.g. rdp tables.pt, where
   a max-height may be set inline). overflow:auto covers both axes. */
.table-container {
    max-width: 100%;
    overflow: auto;
}

.table-highlight,
.table-highlight > td {
    --bs-table-bg-state: #fff3cd;
    background-color: #fff3cd;
}

/* Child rows of an expandable parent row (table_row_toggle.js adds the
   .nested-row class). Indent the first column so the row visually nests
   under the parent's toggle. */
tr.nested-row > td:first-child {
    padding-left: 1.8rem;
}

/* jquery-autocomplete suggestions dropdown (e.g. patient search). Its styling
   lived in the Primer stylesheet, so restore it for Bootstrap pages. */
.autocomplete-suggestions {
    background: #fff;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow: auto;
    z-index: 1056;
    /* The autocomplete plugin sets `width: <input width>` inline on this
       element; override so long suggestion labels aren't clipped by a
       narrow search field. min-width keeps the dropdown at least as wide
       as the input, max-width prevents it from running off the viewport. */
    width: auto !important;
    min-width: var(--ocqms-autocomplete-min-width, 16rem);
    max-width: 32rem;
}

.autocomplete-suggestion {
    overflow: hidden;
    padding: 0.375rem 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}

.autocomplete-selected {
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.autocomplete-suggestions strong {
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

/* Bootstrap renders placeholders at full secondary-color strength, which
   reads like real input. Tone it down so it looks like a hint instead. */
::placeholder {
    opacity: 0.5 !important;
}

/* Counter badge attached to a navigation tab label (e.g. the Issues
   tab). Floated absolutely in the tab's upper-right corner so the
   tab width stays constant whether the badge is present (or even
   visible) or not — that's important for deferred badges (Issues
   fetches its count via XHR) where appearing inline would shift
   every tab to the right and cause a visible flicker. */
.nav-link:has(.nav-badge-counter) {
    position: relative;
    padding-right: 2rem;
}

.nav-badge-counter {
    font-size: 0.65em;
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
}

/* Deferred counter badges (Issues navbar tab, SCQM patient-filter
   list) start hidden via .d-none and get revealed by JS once their
   XHR returns. Replace the abrupt display-toggle with a short
   opacity fade — the @keyframes animation triggers when the element
   re-renders after `d-none` is removed, so no extra JS is needed.
   Targeting the data-attribute selectors keeps the non-deferred
   Tasks badge (which renders server-side) animation-free. */
[data-issues-count-url],
[data-count-key] {
    animation: badge-fade-in 0.3s ease-in;
}

@keyframes badge-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Breadcrumb link in the navbar: muted at rest, fully opaque on hover.
   Bootstrap's .link-opacity-*-hover utilities only adjust --bs-link-opacity
   on the text color, so they leave inline <img>/<svg> children (e.g. the
   cohort logo) at full opacity. .opacity-* has no hover variant. Drop the
   plain `opacity` rule on the link itself so the entire content — text
   AND image — fades together.
   inline-flex + align-items:center makes the link a single-row flex
   container so a fixed-height logo <img> centers on the same baseline
   as the surrounding text crumbs (vertical-align alone doesn't work
   reliably when the img is taller than the text line-box). */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
    opacity: 1;
}