/* ============================================================================
   Modal Modernization — global overrides
   Applies to every Bootstrap modal in the project. Bespoke modals (e.g.
   .route-detail-modal__content) keep their own rules via higher specificity.
   Themed modals (.modal-primary / -success / -info / -warning / -danger /
   -secondary) keep their colored title + close via the rules in colors.css —
   we deliberately do NOT override .modal-header backgrounds so theme identity
   is preserved.
   ============================================================================ */

/* --- Container ----------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(34, 41, 47, 0.32);
    overflow: hidden; /* clip child corners */
    background: #ffffff;
}

/* Centered dialogs get a touch more breathing room from the top/bottom */
.modal-dialog-centered {
    min-height: calc(100% - 3rem);
}

.modal-dialog {
    margin: 1.75rem auto;
}

/* --- Header -------------------------------------------------------------- */

.modal .modal-header {
    position: relative;
    align-items: center;
    padding: 1rem 3.5rem 1rem 1.5rem; /* right space reserves room for the floating close */
    border-bottom: 1px solid rgba(34, 41, 47, 0.06);
}

.modal .modal-header .modal-title,
.modal .modal-header .modal-title h1,
.modal .modal-header .modal-title h2,
.modal .modal-header .modal-title h3,
.modal .modal-header .modal-title h4,
.modal .modal-header .modal-title h5,
.modal .modal-header .modal-title h6 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.3;
    margin: 0;
}

/* Modernized close (×) — floating circular chip pinned to the top-right.
   Works whether the close button sits in the header, body or directly in
   modal-content. The positioning context is modal-content (position: relative
   by default in Bootstrap) so the chip always lands in the same place. */
.modal .modal-content {
    position: relative;
}

.modal .modal-header .close,
.modal .modal-content > .close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(34, 41, 47, 0.06);
    color: #5e5873;
    font-size: 1.35rem;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    float: none; /* override Bootstrap's float-right */
    transition: background-color .15s ease, color .15s ease, transform .25s ease,
                box-shadow .15s ease;
}

.modal .modal-header .close:hover,
.modal .modal-header .close:focus,
.modal .modal-content > .close:hover,
.modal .modal-content > .close:focus {
    background: rgba(234, 84, 85, 0.14);
    color: #ea5455;
    transform: rotate(90deg);
    outline: none;
    box-shadow: 0 6px 16px -8px rgba(234, 84, 85, 0.45);
}

.modal .modal-header .close span,
.modal .modal-content > .close span {
    display: inline-block;
    margin-top: -2px; /* optical centering for × glyph */
    line-height: 1;
    pointer-events: none;
}

/* When the modal has a colored hero (e.g. .modal-primary, .modal-success
   color-themed headers), keep the close chip readable against dark colors. */
.modal.modal-primary .modal-header .close,
.modal.modal-secondary .modal-header .close,
.modal.modal-success .modal-header .close,
.modal.modal-info .modal-header .close,
.modal.modal-warning .modal-header .close,
.modal.modal-danger .modal-header .close {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.modal.modal-primary .modal-header .close:hover,
.modal.modal-secondary .modal-header .close:hover,
.modal.modal-success .modal-header .close:hover,
.modal.modal-info .modal-header .close:hover,
.modal.modal-warning .modal-header .close:hover,
.modal.modal-danger .modal-header .close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* --- Body ---------------------------------------------------------------- */

.modal .modal-body {
    padding: 1.4rem 1.5rem;
    color: #2d3142;
}

.modal-dialog-scrollable .modal-body {
    scrollbar-gutter: stable;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: rgba(34, 41, 47, 0.15);
    border-radius: 3px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 41, 47, 0.25);
}

/* --- Footer -------------------------------------------------------------- */

.modal .modal-footer {
    padding: 0.9rem 1.5rem 1.1rem;
    gap: 0.5rem;
    background: rgba(34, 41, 47, 0.015);
    border-top: 1px solid rgba(34, 41, 47, 0.06);
}

/* Bootstrap puts margin between siblings; we already use gap. */
.modal .modal-footer > * {
    margin: 0;
}

/* Footer buttons get a tiny size-up of border radius to feel cohesive */
.modal .modal-footer .btn {
    border-radius: 8px;
    padding: 0.5rem 1.05rem;
    font-weight: 600;
}

/* --- Backdrop ------------------------------------------------------------ */

.modal-backdrop {
    background-color: #0e1318;
    transition: opacity .25s ease;
}

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

/* Subtle blur behind the modal where supported. Falls back to plain dim. */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .modal-backdrop.show {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* --- Entrance animation -------------------------------------------------- */

.modal.fade .modal-dialog {
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity .25s ease;
    transform: scale(0.96) translateY(10px);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* Skip the elastic transform for slide-in variant so it still slides in */
.modal.modal-slide-in.fade .modal-dialog {
    transform: translateX(100%);
}

.modal.modal-slide-in.show .modal-dialog {
    transform: translateX(0);
}

/* --- Dark mode ----------------------------------------------------------- */

.dark-layout .modal-content {
    background: #283046;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}

.dark-layout .modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark-layout .modal .modal-header .modal-title,
.dark-layout .modal .modal-header .modal-title h1,
.dark-layout .modal .modal-header .modal-title h2,
.dark-layout .modal .modal-header .modal-title h3,
.dark-layout .modal .modal-header .modal-title h4,
.dark-layout .modal .modal-header .modal-title h5,
.dark-layout .modal .modal-header .modal-title h6 {
    color: #d0d2d6;
}

.dark-layout .modal .modal-header .close,
.dark-layout .modal .modal-content > .close {
    background: rgba(255, 255, 255, 0.08);
    color: #b4b7bd;
}

.dark-layout .modal .modal-header .close:hover,
.dark-layout .modal .modal-header .close:focus,
.dark-layout .modal .modal-content > .close:hover,
.dark-layout .modal .modal-content > .close:focus {
    background: rgba(234, 84, 85, 0.24);
    color: #f29b9b;
    box-shadow: 0 6px 16px -8px rgba(234, 84, 85, 0.55);
}

.dark-layout .modal .modal-body {
    color: #d0d2d6;
}

.dark-layout .modal .modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.06);
}

.dark-layout .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.dark-layout .modal-backdrop {
    background-color: #050708;
}

.dark-layout .modal-backdrop.show {
    opacity: 0.6;
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 575.98px) {
    .modal .modal-body,
    .modal .modal-footer {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .modal .modal-header {
        padding: 1rem 3.25rem 1rem 1.15rem; /* keep room for close on mobile */
    }

    .modal .modal-header .close,
    .modal .modal-content > .close {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    .modal-dialog {
        margin: 1rem;
    }
}

/* --- Respect reduced-motion preferences ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog,
    .modal .modal-header .close,
    .modal-backdrop {
        transition: none !important;
        transform: none !important;
    }
}