/* QuickTieModal styles. These used to be an inline <style> block inside the
   component, re-sent with every instance on every page. Linked once in each
   app's head (Portal, Nebula, MainWebsite), last, so they keep the precedence
   the inline block had over the app's other stylesheets. */

/* The dialog element itself only carries sizing/reset — all layout (flex
   column, radius, shadow, blur) lives on the inner .qt-modal__card. This
   avoids the classic dialog pitfall: the UA sets `display: none` on a
   closed dialog, and a `display: flex` rule on the dialog element itself
   fights that and can leave showModal() unable to display it correctly. */
.qt-modal {
    border: none;
    padding: 0;
    background: transparent;
    max-height: calc(100vh - 2rem);
    color-scheme: light dark;
}

/* A closed dialog must stay hidden no matter what CssClass callers pass:
   any global author rule setting `display` on that class name would beat
   the UA's `dialog:not([open]) { display: none }` and resurface the closed
   dialog inline (no backdrop, wrong stacking). */
.qt-modal:not([open]) {
    display: none !important;
}

/* The dialog element itself takes focus when nothing inside it does (showModal
   with no focusable content, or a click on a non-focusable spot after keyboard
   use), and Chrome then draws its two-tone focus ring around the whole card.
   A container ring carries no meaning for keyboard users — the ring on the
   focused control inside is what matters — so suppress it here. */
.qt-modal:focus,
.qt-modal:focus-visible {
    outline: none;
}

/* Fixed target widths — the dialog is always this wide (viewport-clamped). */
.qt-modal--sm { width: min(480px, calc(100vw - 2rem)); }
.qt-modal--default { width: min(640px, calc(100vw - 2rem)); }
.qt-modal--lg { width: min(880px, calc(100vw - 2rem)); }
.qt-modal--xl { width: min(1100px, calc(100vw - 2rem)); }

/* Content-fit — width hugs the content within a small band (height already
   hugs content in every mode: the card is capped at calc(100vh - 2rem) and
   the body scrolls). For confirms / short messages / tiny pickers. */
.qt-modal--auto {
    width: fit-content;
    min-width: min(320px, calc(100vw - 2rem));
    max-width: min(520px, calc(100vw - 2rem));
}

/* Viewport-percentage — ties width/height to the viewport. The
   --qt-modal-fill-w / --qt-modal-fill-h custom properties are set inline
   by FillWidth / FillHeight; the fallbacks here are the default preset
   (capped so it never gets absurd on very large monitors). The card fills
   the dialog's now-definite height so the body can flex and scroll. */
.qt-modal--fill {
    width: var(--qt-modal-fill-w, min(1400px, 92vw));
    height: var(--qt-modal-fill-h, min(1000px, 92vh));
}

.qt-modal--fill .qt-modal__card {
    height: 100%;
    max-height: 100%;
}

.qt-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: qt-modal-backdrop-in 200ms ease-out;
}

[data-bs-theme="dark"] .qt-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.qt-modal[open] .qt-modal__card {
    animation: qt-modal-card-in 220ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

@keyframes qt-modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes qt-modal-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qt-modal__card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    background: var(--quicktie-emphasis-bg);
    /* The dialog element's UA color is CanvasText, which follows the OS
       scheme (white on a dark OS) rather than the app theme — pair the
       themed background with the themed text color explicitly so content
       without its own color never goes white-on-white. */
    color: var(--quicktie-body-color, #31374a);
    border: 1px solid var(--quicktie-border-color-translucent, rgba(0, 0, 0, 0.15));
    border-radius: var(--qt-radius-lg);
    box-shadow: var(--qt-shadow-lg);
    overflow: hidden;
}

.qt-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--quicktie-border-color-translucent, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}

.qt-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--quicktie-emphasis-color);
}

/* Optional icon square for custom HeaderContent (icon + title + subtitle). */
.qt-modal__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--qt-module, #0d9488) 12%, transparent);
    color: var(--qt-module, #0d9488);
    font-size: 0.9rem;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .qt-modal__icon {
    background: color-mix(in srgb, var(--qt-module, #2dd4bf) 12%, transparent);
    color: var(--qt-module-ink, #2dd4bf);
}

.qt-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--quicktie-tertiary-color, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}

.qt-modal__close:hover {
    background: rgba(148, 163, 184, 0.15);
    color: var(--quicktie-emphasis-color);
}

.qt-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.35rem;
}

.qt-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--quicktie-border-color-translucent, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .qt-modal::backdrop,
    .qt-modal[open] .qt-modal__card {
        animation: none;
    }
}