:root {
    --fars-color-primary: #0a6cff;
    --fars-color-text: #111111;
    --fars-color-light: white;
    --fars-nav-active: #ccc;
}


.fars-title {
    color: var(--fars-color-primary);
}

.fars .form-label {
    font-weight: 500;
}

/* =========================================================
   FARS Wizard Layout - Sidebar Contrast
   Targets your exact structure:
   .fars > aside ... + .wizard wrapper containing <WizardNav/>
   ========================================================= */

.fars aside {
    /* subtle contrasting surface */
    background: #f6f7f9;
    border-right-color: #e1e5ea !important;
}

    /* Sidebar header strip (Case # ...) */
    .fars aside > .border-bottom {
        background: #ffffff;
        border-bottom-color: #e1e5ea !important;
    }

    /* Wizard scroll area */
    .fars aside .wizard {
        /* optional: a touch of inset depth */
        background: transparent;
    }

        /* ---------- WizardNav link styling (covers most render styles) ---------- */
        /* Covers: <a>, .nav-link, links inside li, etc. */
        .fars aside .wizard a,
        .fars aside .wizard .nav-link {
            color: #26323f;
            border-radius: .5rem;
            padding: .5rem .75rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            text-decoration: none;
            position: relative;
        }

            /* Hover */
            .fars aside .wizard a:hover,
            .fars aside .wizard .nav-link:hover {
                background: #eef1f5;
                color: #111827;
            }

            /* Keyboard focus */
            .fars aside .wizard a:focus-visible,
            .fars aside .wizard .nav-link:focus-visible {
                outline: 2px solid rgba(31, 111, 235, .35);
                outline-offset: 2px;
            }

            /* Active: supports .active and aria-current="page" */
            .fars aside .wizard a.active,
            .fars aside .wizard .nav-link.active,
            .fars aside .wizard a[aria-current="page"],
            .fars aside .wizard .nav-link[aria-current="page"] {
                background: #1f6feb;
                color: #ffffff;
                padding-left: 15px!important;
            }

                /* Active left rail accent */
                .fars aside .wizard a.active::before,
                .fars aside .wizard .nav-link.active::before,
                .fars aside .wizard a[aria-current="page"]::before,
                .fars aside .wizard .nav-link[aria-current="page"]::before {
                    content: "";
                    position: absolute;
                    left: .25rem;
                    top: .35rem;
                    bottom: .35rem;
                    width: .25rem;
                    border-radius: .25rem;
                    background: #0b4fc2;
                }

            /* Muted text inside a nav item (small, badges, secondary labels) */
            .fars aside .wizard a small,
            .fars aside .wizard .nav-link small,
            .fars aside .wizard .text-muted {
                color: #6b7785 !important;
            }

            /* Muted text should remain readable in active item */
            .fars aside .wizard a.active small,
            .fars aside .wizard .nav-link.active small,
            .fars aside .wizard a.active .text-muted,
            .fars aside .wizard .nav-link.active .text-muted {
                color: rgba(255,255,255,.85) !important;
            }

        /* Optional: tighten list spacing if WizardNav uses UL/LI */
        .fars aside .wizard ul {
            padding-left: 0;
            margin: 0;
        }

        .fars aside .wizard li {
            list-style: none;
            margin: .125rem 0;
        }

/* Only card headers for cards that are direct children of a column in the wizard body */
.fars .wizard-body .card-header {
    background-color: #505168;
    color: whitesmoke;
}

.fars .wizard-body .card .card .card-header {
    background-color: transparent;
    color: inherit;
}



/* =========================================================
   FARS Wizard Shell – Contrast & Scroll Affordance
   - Outer chrome background
   - Header/Footer fixed frame feel
   - Scrollable main area recessed surface
   ========================================================= */

:root {
    /* optional tokens (safe defaults) */
    --fars-shell-bg: #eef2f6; /* outer frame */
    --fars-main-bg: #f8fafc; /* scrolling workspace */
    --fars-divider: rgba(0,0,0,.06);
    --fars-shadow: rgba(0,0,0,.04);
}

/* Outer container chrome */
.fars {
    background: var(--fars-shell-bg);
}

    /* Main panel frame (right side) */
    .fars section {
        background: var(--fars-shell-bg);
    }

        /* Header/Footer: fixed frame */
        .fars section > .d-flex > header,
        .fars section > .d-flex > footer {
            background: #ffffff; /* keep crisp */
            position: relative;
            z-index: 2;
        }

        /* Header shadow = hints content scrolls under it */
        .fars section > .d-flex > header {
            box-shadow: 0 1px 0 var(--fars-divider), 0 2px 8px var(--fars-shadow);
        }

        /* Footer shadow = inverse */
        .fars section > .d-flex > footer {
            box-shadow: 0 -1px 0 var(--fars-divider), 0 -2px 8px var(--fars-shadow);
        }

        /* Scrollable content workspace */
        .fars section > .d-flex > main {
            
            border-radius: .75rem;
            /* Creates a clear "panel within the shell" */
            margin: .75rem;
            padding: 1rem;
            /* subtle inset border, no heavy shadows */
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.045);
            background: linear-gradient(var(--fars-main-bg) 30%, transparent), linear-gradient(transparent, var(--fars-main-bg) 70%), var(--fars-main-bg);
           
        }

/* Reduce spacing on very small screens so it doesn't feel cramped */
@media (max-width: 576px) {
    .fars section > .d-flex > main {
        margin: .5rem;
        border-radius: .5rem;
        padding: .75rem;
    }
}

/* Make cards inside the scroll region feel a touch flatter */
.fars section > .d-flex > main .card {
    border-color: #e3e7ec;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* FARS Crash Wizard Shell */
/* Whole shell takes the viewport slice */
.crash-shell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crash-wizard-header-title {
    background-color: #6b7785;
    color:white;
}
/* Keep header/footer visible */
.crash-shell-header {
    position: sticky;
    top: 0;
    z-index: 10;
    flex: 0 0 auto;
}

.crash-shell-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex: 0 0 auto;
}

/* Middle area consumes remaining height and hosts scrolling regions */
.crash-shell-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* IMPORTANT: prevents body scroll; enables inner scroll */
}

/* Sidebar column layout */
.crash-shell-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crash-shell-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Main content scroll */
.crash-shell-main {
    min-height: 0;
    overflow: hidden;
}

.crash-shell-main-scroll {
    height: 89dvh;
    overflow: auto;
    min-height: 0;
}

/* Wizard Tabs */

.wizard-tabs .nav-tabs .nav-link {
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    padding: .4rem .75rem;
    font-weight: 500;
}

    .wizard-tabs .nav-tabs .nav-link.active {
        font-weight: 600;
    }


/* =========================
   FARS Button Overrides
   ========================= */

.fars .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0e5d7c;
    --bs-btn-border-color: #0a4a64;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0b4f6a;
    --bs-btn-hover-border-color: #09465f;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #09465f;
    --bs-btn-active-border-color: #083d54;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #7aa5b8;
    --bs-btn-disabled-border-color: #7aa5b8;
}

.fars .btn-outline-primary {
    --bs-btn-color: #0e5d7c;
    --bs-btn-border-color: #0e5d7c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0e5d7c;
    --bs-btn-hover-border-color: #0a4a64;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b4f6a;
    --bs-btn-active-border-color: #09465f;
    --bs-btn-disabled-color: #7aa5b8;
    --bs-btn-disabled-border-color: #7aa5b8;
}

/* Secondary = subtle neutral variant */
.fars .btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #495057;
    --bs-btn-border-color: #3f454a;
    --bs-btn-hover-bg: #3f454a;
    --bs-btn-hover-border-color: #343a40;
    --bs-btn-active-bg: #343a40;
    --bs-btn-active-border-color: #2c3136;
}

/* Outline secondary */
.fars .btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #495057;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #3f454a;
    --bs-btn-active-bg: #3f454a;
    --bs-btn-active-border-color: #343a40;
}

.fars .btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #2f7fa1;
    --bs-btn-border-color: #2a718f;
    --bs-btn-hover-bg: #296b86;
    --bs-btn-active-bg: #235e75;
}

.fars .btn-outline-info {
    --bs-btn-color: #2f7fa1;
    --bs-btn-border-color: #2f7fa1;
    --bs-btn-hover-bg: #2f7fa1;
    --bs-btn-hover-color: #ffffff;
}
.fars .btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #2f8f83;
    --bs-btn-border-color: #287b71;
    --bs-btn-hover-bg: #257268;
    --bs-btn-active-bg: #1f6159;
}

.fars .btn-outline-success {
    --bs-btn-color: #2f8f83;
    --bs-btn-border-color: #2f8f83;
    --bs-btn-hover-bg: #2f8f83;
    --bs-btn-hover-color: #ffffff;
}
.fars .btn-warning {
    --bs-btn-color: #1f2d33;
    --bs-btn-bg: #d6a545;
    --bs-btn-border-color: #bf913c;
    --bs-btn-hover-bg: #c0933d;
    --bs-btn-active-bg: #a67f34;
}

.fars .btn-outline-warning {
    --bs-btn-color: #a67f34;
    --bs-btn-border-color: #d6a545;
    --bs-btn-hover-bg: #d6a545;
    --bs-btn-hover-color: #1f2d33;
}
.fars .btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #b64242;
    --bs-btn-border-color: #9f3838;
    --bs-btn-hover-bg: #9f3838;
    --bs-btn-active-bg: #8a3030;
}

.fars .btn-outline-danger {
    --bs-btn-color: #b64242;
    --bs-btn-border-color: #b64242;
    --bs-btn-hover-bg: #b64242;
    --bs-btn-hover-color: #ffffff;
}
.fars .alert-info {
    --bs-alert-color: #09465f;
    --bs-alert-bg: #d8eaf3;
    --bs-alert-border-color: #b9d6e5;
}

.fars .alert-success {
    --bs-alert-color: #1f6159;
    --bs-alert-bg: #d6efeb;
    --bs-alert-border-color: #b5dfd9;
}

.fars .alert-warning {
    --bs-alert-color: #6b541d;
    --bs-alert-bg: #f5edd7;
    --bs-alert-border-color: #e8d9a9;
}

.fars .alert-danger {
    --bs-alert-color: #8a3030;
    --bs-alert-bg: #f1dada;
    --bs-alert-border-color: #e3bcbc;
}

.fars .table-hover tbody tr:hover {
    background-color: #cfe3ec;
}
.fars .wizard-step.active {
    background-color: #0e5d7c;
    color: #ffffff;
}



.fars .badge-resolved {
    background-color: #2f8f83;
}

.fars .badge-unresolved {
    background-color: #d6a545;
    color: #1f2d33;
}

.fars .text-bg-primary {
    color: #ffffff !important;
    background-color: #0e5d7c !important;
}

.fars .text-bg-info {
    color: #ffffff !important;
    background-color: #2f7fa1 !important;
}
.fars .text-bg-success {
    color: #ffffff !important;
    background-color: #2f8f83 !important;
}
.fars .text-bg-warning {
    color: #1f2d33 !important;
    background-color: #d6a545 !important;
}
.fars .text-bg-danger {
    color: #ffffff !important;
    background-color: #b64242 !important;
}
.fars .text-bg-secondary {
    color: #ffffff !important;
    background-color: #495057 !important;
}
.fars .text-bg-light {
    color: #09465f !important;
    background-color: #e6f1f6 !important;
}
.fars .text-bg-dark {
    color: #ffffff !important;
    background-color: #2e3438 !important;
}
.fars .text-bg-primary,
.fars .text-bg-info,
.fars .text-bg-success,
.fars .text-bg-warning,
.fars .text-bg-danger,
.fars .text-bg-secondary,
.fars .text-bg-light,
.fars .text-bg-dark {
    border-radius: 0.375rem;
    padding: 0.25em 0.5em;
}
.fars .text-bg-outline {
    background-color: transparent !important;
    border: 1px solid currentColor;
    font-weight: 500;
}
.fars .validated-multiselect .form-control {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.fars .validated-multiselect .badge {
    user-select: none;
}