
:root {
    --fsc-qi-tabs-bg: #eef2f7; /* muted text #545f71 on this = 5.9:1 */
    --fsc-qi-tab-hover: #f7f9fc;
}

/* ---------------------------------------------------
    Hero spacing — match the Accredited laboratories page
    (fsc-portal.css .fsc-hero) instead of the tighter list variant
----------------------------------------------------- */
.fsc-hero.fsc-hero--list {
    padding: 3.5rem 0 8rem;
}

@media (max-width: 767.98px) {
    .fsc-hero.fsc-hero--list {
        padding: 2.25rem 0 7rem;
    }
}

/* ---------------------------------------------------
    Search card spacing (the switch sits above the form)
----------------------------------------------------- */
.fsc-qi-search {
    padding-top: 1.25rem;
}

/* ---------------------------------------------------
    Search-type switch: General search / Document search
    Links (page navigation), current page = aria-current="page".
    Current state: white surface + 3px navy bar + shadow, not colour alone.
----------------------------------------------------- */
.fsc-searchtabs {
    margin: 0 0 1.5rem;
}

.fsc-searchtabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    margin: 0;
    padding: .375rem;
    list-style: none;
    background-color: var(--fsc-qi-tabs-bg);
    border-radius: 12px;
}

    .fsc-searchtabs__list > li {
        display: flex;
        min-width: 0;
    }

.fsc-searchtab {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    padding: .625rem 1rem;
    border-bottom: 3px solid transparent;
    border-radius: var(--fsc-radius, 10px);
    color: var(--fsc-text-muted, #545f71);
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .fsc-searchtab:hover {
        background-color: var(--fsc-qi-tab-hover);
        color: var(--fsc-navy, #004085);
    }

        .fsc-searchtab:hover .fsc-searchtab__title {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    .fsc-searchtab:focus-visible {
        outline: 3px solid var(--fsc-focus-light, #4c9aff);
        outline-offset: 2px;
    }

    .fsc-searchtab[aria-current="page"] {
        background-color: #ffffff;
        border-bottom-color: var(--fsc-navy, #004085);
        box-shadow: 0 1px 3px rgba(10, 35, 80, .14);
        color: var(--fsc-navy, #004085);
    }

        .fsc-searchtab[aria-current="page"]:hover .fsc-searchtab__title {
            text-decoration: none;
        }

.fsc-searchtab__icon {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
}

.fsc-searchtab__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fsc-searchtab__title {
    color: var(--fsc-text, #1b2433);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.fsc-searchtab:not([aria-current="page"]) .fsc-searchtab__title {
    color: var(--fsc-text-muted, #545f71);
}

.fsc-searchtab:not([aria-current="page"]):hover .fsc-searchtab__title {
    color: var(--fsc-navy, #004085);
}

.fsc-searchtab__sub {
    color: var(--fsc-text-muted, #545f71);
    font-size: .825rem;
    line-height: 1.35;
}

/* ---------------------------------------------------
    Card footer: Document-search note + Clear filters
    (No Search button — results update as the user types)
----------------------------------------------------- */
.fsc-qi-applied {
    margin-top: 1.25rem;
}

.fsc-qi-switch {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
    color: var(--fsc-text-muted, #545f71);
    font-size: .9rem;
    line-height: 1.5;
}

    .fsc-qi-switch .bi {
        flex-shrink: 0;
        margin-top: .15rem;
        color: var(--fsc-navy, #004085);
    }

    .fsc-qi-switch a {
        color: var(--fsc-navy, #004085);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .fsc-qi-switch a:hover {
            color: var(--fsc-navy-900, #002a59);
        }

        .fsc-qi-switch a:focus-visible {
            outline: 3px solid var(--fsc-focus-light, #4c9aff);
            outline-offset: 2px;
            border-radius: 4px;
        }

/* ---------------------------------------------------
    Results table — column sizing
    Auto layout so DataTables Responsive can measure what fits.
----------------------------------------------------- */
.fsc-qi-table .fsc-col-lab {
    min-width: 15rem;
}

.fsc-qi-table .fsc-col-incident {
    width: 9rem;
}

.fsc-qi-table .fsc-col-date {
    width: 9.5rem;
}

.fsc-qi-table .fsc-col-action {
    width: 10rem;
}

.fsc-qi-table td.fsc-col-incident,
.fsc-qi-table td.fsc-col-date,
.fsc-qi-table td.fsc-col-action {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Laboratory cell: [arrow toggle] [avatar] name
   The arrow (.fsc-dtr-toggle, styled in fsc-forms.css) only shows while a column is collapsed. */
.fsc-qi-lab {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

    .fsc-qi-lab .fsc-entity {
        min-width: 0;
    }

/* Incident number (row header) re-uses .fsc-case; keep digits aligned */
.fsc-qi-table .fsc-case {
    font-variant-numeric: tabular-nums;
}

/* Incident date */
.fsc-qi-date {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--fsc-text, #1b2433);
    font-variant-numeric: tabular-nums;
}

    .fsc-qi-date .bi {
        color: var(--fsc-text-muted, #545f71);
    }

/* ---------------------------------------------------
    Corrective-action badge — icon + text, tones shared with status badges
    Yes: #1b6639 on #e3f3e9 (6.5:1) · No: #3b4556 on #eef0f4 (8.9:1)
----------------------------------------------------- */
.fsc-qi-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem .2rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

    .fsc-qi-action .bi {
        font-size: .85rem;
        -webkit-text-stroke: .3px currentColor;
    }

.fsc-qi-action--yes {
    background-color: var(--fsc-tone-closed-bg, #e3f3e9);
    color: var(--fsc-tone-closed-fg, #1b6639);
}

.fsc-qi-action--no {
    background-color: var(--fsc-tone-pending-bg, #eef0f4);
    color: var(--fsc-tone-pending-fg, #3b4556);
}

/* ---------------------------------------------------
    View button: "View" + new-tab icon (the link opens the incident in a new tab)
    The column is pinned by DataTables Responsive (class "all"), so it never collapses.
----------------------------------------------------- */
.fsc-qi-table .fsc-btn-view {
    justify-content: center;
}

    .fsc-qi-table .fsc-btn-view .bi {
        font-size: .85rem;
    }

/* ---------------------------------------------------
    Responsive
----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fsc-qi-search {
        padding-top: 1rem;
    }

    .fsc-searchtabs {
        margin-bottom: 1.25rem;
    }

    .fsc-searchtab {
        gap: .625rem;
        padding: .5rem .75rem;
    }

    /* Footer: note above a full-width Clear button (button rule lives in fsc-forms.css) */
    .fsc-qi-switch {
        flex-basis: 100%;
    }

    .fsc-qi-table .fsc-col-lab {
        min-width: 11rem;
    }
}

@media (max-width: 575.98px) {
    /* Sub-lines are supplementary; the titles stay */
    .fsc-searchtab__sub {
        display: none;
    }

    .fsc-searchtab {
        min-height: 48px;
    }

    .fsc-searchtab__title {
        font-size: .95rem;
    }

    .fsc-qi-table .fsc-entity {
        gap: .5rem;
    }

    .fsc-qi-table .fsc-entity__avatar {
        width: 32px;
        height: 32px;
        font-size: .72rem;
    }

    /* Leave room for Incident number + the pinned View column */
    .fsc-qi-table .fsc-col-lab {
        min-width: 9rem;
    }

    /* View becomes an icon-only 40×40 target; "View" stays in the accessible name */
    .fsc-qi-table .fsc-btn-view {
        min-width: 40px;
        min-height: 40px;
        padding-left: 0;
        padding-right: 0;
    }

        .fsc-qi-table .fsc-btn-view .fsc-btn-view__text {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        .fsc-qi-table .fsc-btn-view .bi {
            font-size: 1rem;
        }

    .fsc-qi-table td.fsc-col-actions {
        padding-left: .5rem;
    }
}

/* 320px / 400% zoom (WCAG 1.4.10 Reflow): stack the search switch */
@media (max-width: 399.98px) {
    .fsc-searchtabs__list {
        grid-template-columns: 1fr;
    }

    .fsc-qi-table .fsc-entity__avatar {
        display: none;
    }

    .fsc-qi-table .fsc-col-lab {
        min-width: 0;
    }
}

/* ---------------------------------------------------
    Preferences & modes
----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fsc-searchtab {
        transition: none;
    }
}

@media (forced-colors: active) {
    .fsc-searchtabs__list {
        border: 1px solid CanvasText;
    }

    .fsc-searchtab[aria-current="page"] {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
        border-bottom-color: Highlight;
    }

    .fsc-qi-action {
        border: 1px solid CanvasText;
    }
}

@media print {
    .fsc-searchtabs,
    .fsc-qi-switch {
        display: none !important;
    }

    .fsc-qi-action {
        border: 1px solid #666666;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
