/* ===================================================
    QUALITY INCIDENTS — DOCUMENT SEARCH
    Load order: fsc-portal.css → fsc-forms.css → quality-incidents.css → document-search.css
    Bootstrap 5.3 | Bootstrap Icons | DataTables 2 (+ Responsive) | WCAG 2.1 AA

    Re-uses: hero, search card, .fsc-input, .fsc-btn-primary, .fsc-select-sm, .fsc-empty,
    the results table + Responsive toggle (fsc-forms.css) and the General / Document
    search switch + table cells (quality-incidents.css).
    This file adds: the big search row, the results heading and the
    start / searching / no-results states.
    Contrast: text pairs ≥ 4.5:1; focus rings and state borders ≥ 3:1.
=================================================== */

:root {
    --fsc-doc-field-h: 56px;
}

/* ---------------------------------------------------
    Search row: [ search field (×) ] [ Search documents ]
----------------------------------------------------- */
.fsc-docsearch .form-label {
    font-size: .95rem;
}

.fsc-docsearch__row {
    display: flex;
    align-items: stretch;
    gap: .75rem;
}

.fsc-docsearch__field {
    flex: 1 1 auto;
    min-width: 0;
}

    .fsc-form .fsc-docsearch__field .form-control {
        height: var(--fsc-doc-field-h);
        padding-left: 3rem;
        font-size: 1.05rem;
    }

    .fsc-docsearch__field .fsc-input__icon {
        left: 1.1rem;
        font-size: 1.05rem;
    }

    /* Hide the browser's own clear control; the × button below is labelled */
    .fsc-docsearch__field input[type="search"]::-webkit-search-cancel-button,
    .fsc-docsearch__field input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .fsc-docsearch__field:has(.fsc-input__clear:not([hidden])) .form-control {
        padding-right: 3rem;
    }

    .fsc-docsearch__field .fsc-input__clear {
        position: absolute;
        top: 50%;
        right: .5rem;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        transform: translateY(-50%);
        background: transparent;
        border: 0;
        border-radius: var(--fsc-radius-sm, 8px);
        color: var(--fsc-text-muted, #545f71);
    }

        .fsc-docsearch__field .fsc-input__clear:hover {
            background-color: var(--fsc-navy-100, #e8effa);
            color: var(--fsc-navy, #004085);
        }

        .fsc-docsearch__field .fsc-input__clear:focus-visible {
            outline: 3px solid var(--fsc-focus-light, #4c9aff);
            outline-offset: 0;
        }

.fsc-docsearch__submit {
    flex: 0 0 auto;
    min-height: var(--fsc-doc-field-h);
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    white-space: nowrap;
}

    .fsc-docsearch__submit:focus-visible {
        outline: 3px solid var(--fsc-focus-light, #4c9aff);
        outline-offset: 2px;
        box-shadow: none;
    }

    /* While searching: spinner replaces the icon; aria-disabled keeps it focusable */
    .fsc-docsearch__submit[aria-disabled="true"] {
        cursor: progress;
        opacity: .85;
    }

        .fsc-docsearch__submit[aria-disabled="true"] .bi-search {
            display: none;
        }

.fsc-docsearch__hint {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--fsc-border, #dde3ec);
    color: var(--fsc-text-muted, #545f71);
    font-size: .9rem;
    line-height: 1.5;
}

    .fsc-docsearch__hint .bi {
        flex-shrink: 0;
        margin-top: .15rem;
        color: var(--fsc-navy, #004085);
    }

    .fsc-docsearch__hint strong {
        color: var(--fsc-text, #1b2433);
    }

/* ---------------------------------------------------
    Results toolbar: "4 documents match …"  ·  Sort by
----------------------------------------------------- */
.fsc-docresults__toolbar {
    margin-bottom: .875rem;
}

.fsc-docresults__title {
    margin: 0;
    color: var(--fsc-text-muted, #545f71);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .fsc-docresults__title strong {
        color: var(--fsc-text, #1b2433);
        font-weight: 700;
    }

    .fsc-docresults__title:focus {
        outline: none;
    }

    .fsc-docresults__title:focus-visible {
        outline: 3px solid var(--fsc-focus-light, #4c9aff);
        outline-offset: 4px;
        border-radius: 4px;
    }

/* ---------------------------------------------------
    Results card + states
----------------------------------------------------- */
.fsc-docresults__card {
    background-color: #ffffff;
    border: 1px solid var(--fsc-border, #dde3ec);
    border-radius: var(--fsc-radius-lg, 16px);
    box-shadow: var(--fsc-shadow, 0 10px 30px rgba(10, 35, 80, .08));
}

.fsc-docresults__state {
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.fsc-docresults__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--fsc-text-muted, #545f71);
    font-weight: 600;
}

    .fsc-docresults__loading[hidden] {
        display: none;
    }

.fsc-docresults__tips {
    max-width: 32rem;
    margin: .25rem auto 0;
    padding-left: 1.1rem;
    color: var(--fsc-text-muted, #545f71);
    font-size: .925rem;
    text-align: left;
}

    .fsc-docresults__tips li + li {
        margin-top: .25rem;
    }

    .fsc-docresults__tips a {
        color: var(--fsc-navy, #004085);
        font-weight: 700;
        text-underline-offset: 3px;
    }

        .fsc-docresults__tips a:focus-visible {
            outline: 3px solid var(--fsc-focus-light, #4c9aff);
            outline-offset: 2px;
            border-radius: 4px;
        }

/* ---------------------------------------------------
    Responsive
----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fsc-docsearch__row {
        flex-direction: column;
    }

    .fsc-docsearch__submit {
        width: 100%;
        justify-content: center;
    }

    .fsc-docresults__toolbar {
        align-items: flex-start;
    }

    .fsc-docresults__state {
        padding: 2rem 1rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --fsc-doc-field-h: 52px;
    }
}

/* ---------------------------------------------------
    Preferences & modes
----------------------------------------------------- */
@media (forced-colors: active) {
    .fsc-docresults__card {
        border: 1px solid CanvasText;
    }
}

@media print {
    .fsc-docsearch,
    .fsc-docresults__card {
        display: none !important;
    }
}