/*
    Replacement for the Bootstrap classes still referenced in this project's markup, written to let
    the `bootstrap` NuGet package and its vendored CSS be removed (Phase 6 of the Bootstrap removal
    effort) without changing how any existing page looks.

    This is NOT a general-purpose Bootstrap replacement - it only defines the specific classes this
    app's .razor markup actually uses (audited via a project-wide grep against Bootstrap 5.2.3's own
    class list before deleting it), with the real values Bootstrap 5.2.3 used for each of them.
    Load this BEFORE bootstrap-overrides.css and site.css, since both of those override a few of the
    base rules defined here (e.g. .btn-primary, .modal-content, .nav-item).
*/

/* ===== Display / layout ===== */
.d-flex { display: flex; }
.d-block { display: block !important; }
.d-none { display: none !important; }

/* ===== Flex utilities ===== */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-self-end { align-self: flex-end; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

/* ===== Spacing (Bootstrap's 0-3-5 rem scale: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem) ===== */
.m-0 { margin: 0; }
.m-1 { margin: .25rem; }
.m-2 { margin: .5rem; }
.m-3 { margin: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.me-1 { margin-right: .25rem; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-1 { margin-top: .25rem; margin-bottom: .25rem; }
.p-0 { padding: 0; }
.p-2 { padding: .5rem; }
.pt-2 { padding-top: .5rem; }
.pb-2 { padding-bottom: .5rem; }
.ps-3 { padding-left: 1rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }

/* ===== Text ===== */
.text-center { text-align: center; }
.text-xl-center { text-align: center !important; }
.text-danger { color: #dc3545; }
.text-dark { color: #212529; }
.text-light { color: #f8f9fa; }
.text-white { color: #fff; }
.fw-bold { font-weight: 700 !important; }
.text-decoration-none { text-decoration: none !important; }

/* ===== Position / sizing / misc ===== */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.float-end { float: right !important; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.align-bottom { vertical-align: bottom !important; }
.overflow-auto { overflow: auto !important; }
.rounded-circle { border-radius: 50% !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.bg-light { background-color: #f8f9fa !important; }

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem; }
.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-link { font-weight: 400; color: #0d6efd; text-decoration: underline; }
.btn-link:hover { color: #0a58ca; }
.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }

/* ===== Forms ===== */
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /* Hide the browser's own arrow; the background-image above is the only one shown. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
    padding-right: .75rem;
    background-image: none;
}
.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}
.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
}
.col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* ===== Cards ===== */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-header { padding: .5rem 1rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
.card-body { flex: 1 1 auto; padding: 1rem 1rem; }
.card-footer { padding: .5rem 1rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }

/* ===== Modal (hand-rolled popups in this app - shown via always-present "fade show d-block", no Bootstrap JS) ===== */
.modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal-dialog { position: relative; width: auto; margin: 1.75rem auto; max-width: 500px; pointer-events: none; }
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}
.fade:not(.show) { opacity: 0; }

/* ===== Nav / navbar / tabs (used by Components/Shared/Wizard, Components/Shared/TabControl, Shared/NavMenu) ===== */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: .5rem 1rem; color: #0d6efd; text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }
.nav-pills .nav-link { background: transparent; border: 0; border-radius: .25rem; }
.nav-pills .nav-link.active { color: #fff; background-color: #0d6efd; }
.nav-justified .nav-item, .nav-justified > .nav-link { flex-basis: 0; flex-grow: 1; text-align: center; }
.nav-justified .nav-item .nav-link { width: 100%; }

.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: .5rem; padding-bottom: .5rem; }
.navbar-brand { padding-top: .3125rem; padding-bottom: .3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.navbar-dark .navbar-brand { color: #fff; }
.navbar-toggler { padding: .25rem .75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: .25rem; transition: box-shadow .15s ease-in-out; }
.navbar-dark .navbar-toggler { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.1); }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: .5rem; color: #6c757d; content: "/"; }
.breadcrumb-item.active { color: #6c757d; }

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ===== Misc components ===== */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -.125em;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}
@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.img-thumbnail { padding: .25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: .25rem; max-width: 100%; height: auto; }