/* ============================================================
   MODAL & OFFCANVAS — design-system token overrides
   Remaps Bootstrap's CSS variables to tt- tokens so both
   components respect the light/dark theme correctly.
   ============================================================ */

/* --- Offcanvas -------------------------------------------- */
.offcanvas {
    --bs-offcanvas-width: 550px;
    --bs-offcanvas-bg: var(--bg-color);
    --bs-offcanvas-color: var(--text-color);
    --bs-offcanvas-border-color: var(--border-muted);
}

/* --- Offcanvas form footer --------------------------------- */
.tt-offcanvas-form-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-3xs);
}

.tt-offcanvas-form-footer-group {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
}

/* Fixed footer built directly by reusable-offcanvas-controller (sits outside offcanvas-body, so needs its own spacing) */
.offcanvas > .tt-offcanvas-form-footer {
    padding: var(--space-xs) var(--space-s);
    border-top: var(--border-thin) solid var(--border-muted);
}

/* Reset form-context button sizing — these buttons sit outside the field area */
.tt-form .tt-offcanvas-form-footer .tt-btn {
    height: auto;
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
    border-radius: var(--button-radius-sm);
}

.offcanvas-header,
.modal-header {
    border-bottom: var(--border-thin) solid var(--border-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Bootstrap modal dialog ------------------------------ */
.modal {
    --bs-modal-bg: var(--bg-color);
    --bs-modal-color: var(--text-color);
    --bs-modal-border-color: var(--border-muted);
    --bs-modal-header-border-color: var(--border-muted);
    --bs-modal-footer-border-color: var(--border-muted);
    /* Fluid gutter instead of Bootstrap's 0.5rem → 1.75rem jump at 576px */
    --bs-modal-margin: clamp(0.5rem, 5vw - 1rem, 1.75rem);
}

/* Size is a cap, not a breakpoint: a dialog fills the room it has up to its
   width, so modal-lg never shrinks between 576px and 991px. */
.modal-dialog:not(.modal-fullscreen, [class*="modal-fullscreen-"]) {
    max-width: min(var(--bs-modal-width), 100% - 2 * var(--bs-modal-margin));
    margin-inline: auto;
}

.modal-sm { --bs-modal-width: 300px; }
.modal-lg { --bs-modal-width: 800px; }
.modal-xl { --bs-modal-width: 1140px; }