/* ============================================================
   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: 0.375rem;
}

.tt-offcanvas-form-footer-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* 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: 1px 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);
}