/* ---- Listings: clickable filter tiles and tab navigation -----------------------------------
   Slice: summary tiles above a listing become filter links, and the Printing screen splits into
   tabs. Kept in its own file (rather than components.css) because it is additive to an existing
   pattern someone else owns right now.

   I2: logical properties only — this file never uses left/right, only inline-start/inline-end,
   so it reads correctly when the page is mirrored for Arabic (dir="rtl").
   Q4: an applied filter is never colour-only. `.stat-tile__state` is a visible text label, not a
   tint, so a tile reads as applied even for someone who cannot see the tinted border. */

/* ---- Filter tiles ---------------------------------------------------------------------------- */

a.stat-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.stat-tile:hover {
    border-color: var(--primary);
}

a.stat-tile:focus-visible {
    outline: var(--focus-ring-width, 3px) solid var(--primary-soft);
    outline-offset: 2px;
}

.stat-tile--on {
    border-width: calc(var(--border-width) * 2);
    border-color: var(--primary);
    background-color: var(--surface-2);
}

.stat-tile__state {
    display: inline-block;
    margin-inline-start: 0.4rem;
    font-weight: 700;
    font-size: var(--font-size-label);
    color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
    a.stat-tile {
        transition: none;
    }
}

/* ---- Tabs -------------------------------------------------------------------------------------
   Bootstrap's own nav-tabs, restyled to match the product rather than the framework default:
   quiet resting tabs, the active one picked out in the primary colour, and touch targets tall
   enough to hit reliably on a ward tablet. */

.nav-tabs {
    border-bottom-color: var(--border-2);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border: var(--border-width) solid transparent;
    border-start-start-radius: var(--radius-sm);
    border-start-end-radius: var(--radius-sm);
    color: var(--text-2);
    font-weight: 600;
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--text);
    border-color: var(--border-2);
}

.nav-tabs .nav-link:focus-visible {
    outline: var(--focus-ring-width, 3px) solid var(--primary-soft);
    outline-offset: 2px;
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    background-color: var(--surface);
    border-color: var(--border-2);
    border-block-end-color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link {
        transition: none;
    }
}

/* A search box wide enough for a name and no wider.

   A bare `.form-control` is 100% wide, so in a flex row it consumed the line and pushed its own
   button onto the next one — two controls that belong together reading as two separate things. */
.search-field {
    min-inline-size: 14rem;
    flex: 1 1 14rem;
}

@media (max-inline-size: 30rem) {
    /* On a genuinely narrow screen the field shrinks rather than the button wrapping away. */
    .search-field { min-inline-size: 8rem; }
}

/*
    A report card that is a link.

    Wrapping a card in `<a>` gave every title and figure inside it the browser's link underline, so a
    dashboard of four cards read as sixteen underlined fragments. The card is the target; its
    contents are content.
*/
.report-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.report-card:hover {
    border-color: var(--primary);
    color: inherit;
}

.report-card :is(h1, h2, h3, h4, a, span, div) {
    text-decoration: none;
}

.report-card:focus-visible {
    outline: 3px solid var(--primary-soft);
    outline-offset: 2px;
}