/* ============================================================================
   fid-modal.css — universal modal theme (loaded on every page).

   Lifts every modal in the app out of "plain bootstrap" and gives the shared
   tracking/history modals (.fid-flow stage strip + .fid-timeline) the same
   polished look as the dashboard. Deliberately NEUTRAL — no status colouring;
   accents come from the brand blue so it fits every screen.

   Loaded AFTER @RenderSection("Styles") in _Layout, so it also overrides the
   older per-page copies of .fid-flow / .fid-timeline without touching them.
   ============================================================================ */

/* ---------------------------------------------------------------
   1. Modal shell
   --------------------------------------------------------------- */
.modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 30px 70px -22px rgba(8, 20, 40, .5) !important;
}

.modal-backdrop.show { opacity: .55; }

/* header: subtle gradient band + accent rule */
.modal-header {
    position: relative;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.05rem 1.25rem;
    border-bottom: 1px solid var(--fid-border, #DBE3EE) !important;
    background: linear-gradient(180deg,
                 color-mix(in srgb, var(--fid-accent, #1B6FE3) 7%, transparent),
                 transparent);
}

    /* thin brand bar across the top of every modal */
    .modal-header::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--fid-accent, #1B6FE3), var(--fid-accent-ink, #0B4FB0));
    }

    .modal-header .modal-title {
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--phoenix-body-emphasis-color);
    }

.modal-body { padding: 1.15rem 1.25rem; }

.modal-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--fid-border, #DBE3EE) !important;
    background: var(--phoenix-secondary-bg, #f7f9fc);
}

[data-bs-theme="dark"] .modal-footer { background: rgba(255,255,255,.03); }

/* stacked modals (a modal opened from another modal) stay readable */
.modal.modal-stacked { z-index: 1075; }
.modal-backdrop.hist-backdrop { z-index: 1070; opacity: .6; }

/* ---------------------------------------------------------------
   2. Shared stage strip  (.fid-flow)  — connected stepper
   Used by every tracking modal: Pending / In Progress / Review /
   Assigned / Completed / Rejected / QC Memo List.
   --------------------------------------------------------------- */
.fid-flow {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 1.4rem !important;
    padding: .25rem 0;
}

    .fid-flow .fstep {
        flex: 1;
        min-width: 84px;
        position: relative;
        text-align: center;
        font-size: .68rem !important;
        font-weight: 700 !important;
        letter-spacing: .01em;
        color: var(--phoenix-secondary-color) !important;
        padding: 0 !important;
        border-bottom: 0 !important;   /* kill the old underline style */
    }

        /* connector line between steps */
        .fid-flow .fstep:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 1rem;
            left: 50%;
            width: 100%;
            height: 3px;
            background: var(--fid-border, #DBE3EE);
            z-index: 0;
        }

        .fid-flow .fstep.ok:not(:last-child)::after { background: #3fae86; }

        /* the icon bubble */
        .fid-flow .fstep small {
            position: relative;
            z-index: 1;
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 2.1rem;
            height: 2.1rem;
            margin: 0 auto .4rem !important;
            border-radius: 50%;
            font-size: .78rem !important;
            background: var(--phoenix-body-bg);
            border: 3px solid var(--fid-border, #DBE3EE);
            color: var(--phoenix-secondary-color);
            transition: transform .15s ease;
        }

        /* completed */
        .fid-flow .fstep.ok { color: #2c7a5e !important; }

            .fid-flow .fstep.ok small {
                background: #3fae86;
                border-color: #3fae86;
                color: #fff;
            }

        /* current */
        .fid-flow .fstep.on { color: var(--fid-accent-ink, #0B4FB0) !important; }

            .fid-flow .fstep.on small {
                background: var(--fid-accent, #1B6FE3);
                border-color: var(--fid-accent, #1B6FE3);
                color: #fff;
                box-shadow: 0 0 0 5px color-mix(in srgb, var(--fid-accent, #1B6FE3) 18%, transparent);
            }

        /* terminal / rejected */
        .fid-flow .fstep.bad { color: #a72f27 !important; }

            .fid-flow .fstep.bad small {
                background: #d1372e;
                border-color: #d1372e;
                color: #fff;
            }

/* ---------------------------------------------------------------
   3. Shared timeline  (.fid-timeline)
   --------------------------------------------------------------- */
.fid-timeline {
    position: relative;
    padding-left: 30px !important;
    list-style: none;
    margin: 0;
}

    .fid-timeline::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background: var(--fid-border, #DBE3EE);
    }

    .fid-timeline .ti {
        position: relative;
        padding-bottom: .85rem !important;
    }

        .fid-timeline .ti:last-child { padding-bottom: 0 !important; }

        /* the node */
        .fid-timeline .ti::before {
            content: "" !important;
            position: absolute;
            left: -30px !important;
            top: 2px !important;
            width: 22px !important;
            height: 22px !important;
            border-radius: 50%;
            background: var(--fid-accent, #1B6FE3) !important;
            border: 0 !important;
            box-shadow: 0 0 0 3px var(--phoenix-body-bg);
        }

        .fid-timeline .ti.muted::before {
            background: var(--phoenix-secondary-color) !important;
            opacity: .45;
        }

        /* event card */
        .fid-timeline .ti > div:first-of-type,
        .fid-timeline .ti .tbody {
            background: var(--phoenix-secondary-bg, #f7f9fc);
            border: 1px solid var(--fid-border, #DBE3EE);
            border-radius: 10px;
            padding: .5rem .7rem .2rem;
        }

        .fid-timeline .ti > div:last-of-type {
            background: var(--phoenix-secondary-bg, #f7f9fc);
            border: 1px solid var(--fid-border, #DBE3EE);
            border-top: 0;
            border-radius: 0 0 10px 10px;
            padding: 0 .7rem .5rem;
            margin-top: -1px;
        }

        /* newest entry highlighted */
        .fid-timeline .ti:not(.muted) > div {
            background: var(--fid-accent-soft, #E7F0FE);
            border-color: color-mix(in srgb, var(--fid-accent, #1B6FE3) 28%, transparent);
        }

/* ---------------------------------------------------------------
   4. Modal detail tiles  (the bordered boxes used in track modals)
   --------------------------------------------------------------- */
.modal-body .border.rounded.p-2,
.modal-body .border.rounded-2.p-2,
.modal-body .border.rounded-2.p-3 {
    border-color: var(--fid-border, #DBE3EE) !important;
    border-radius: 12px !important;
    background: var(--phoenix-card-bg, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .modal-body .border.rounded.p-2:hover,
    .modal-body .border.rounded-2.p-2:hover {
        border-color: color-mix(in srgb, var(--fid-accent, #1B6FE3) 40%, transparent) !important;
    }

/* small caption above a value inside those tiles */
.modal-body .fs-10.text-body-tertiary {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
    font-size: .62rem !important;
}

/* findings / read-only blocks get an accent rail */
.modal-body .bg-body-secondary.fs-9 {
    border-left: 3px solid var(--fid-accent, #1B6FE3) !important;
    border-radius: 10px !important;
}

/* ---------------------------------------------------------------
   5. Buttons inside modals
   --------------------------------------------------------------- */
.modal-footer .btn { min-width: 6rem; }

.modal .btn-close { opacity: .55; transition: opacity .15s ease, transform .15s ease; }

    .modal .btn-close:hover { opacity: 1; transform: rotate(90deg); }

/* ---------------------------------------------------------------
   6. Legacy close button in list-page modals
   The tracking / assign / review / inspect modals use a hand-rolled
   <button class="btn ..."><span class="fas fa-xmark"></span></button>
   instead of Bootstrap's .btn-close, so it flowed inline right after the
   title. Pin it to the top-right corner and give it a solid dark chip look.
   --------------------------------------------------------------- */
.modal-header .btn[data-bs-dismiss="modal"]:not(.btn-close) {
    position: absolute !important;
    top: .85rem;
    right: .9rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #22304a;
    color: #fff !important;
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 2px 6px -2px rgba(8, 20, 40, .45);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .modal-header .btn[data-bs-dismiss="modal"]:not(.btn-close):hover {
        background: #d1372e;                     /* clear "close" intent */
        border-color: #d1372e;
        transform: rotate(90deg);
        box-shadow: 0 4px 12px -3px rgba(209, 55, 46, .55);
    }

    .modal-header .btn[data-bs-dismiss="modal"]:not(.btn-close):focus-visible {
        outline: 2px solid var(--fid-accent, #1B6FE3);
        outline-offset: 2px;
    }

    .modal-header .btn[data-bs-dismiss="modal"]:not(.btn-close) .fas { color: #fff !important; }

/* keep the title clear of the pinned button */
.modal-header { padding-right: 3.25rem !important; }

.modal-header > div:first-child,
.modal-header .modal-title { flex: 1 1 auto; min-width: 0; }