/* ──────────────────────────────────────────────────────────────────────────
   Native <dialog> wrapper  –  replaces jQuery UI .ui-dialog
   ────────────────────────────────────────────────────────────────────────── */

/* ── Backdrop (native ::backdrop pseudo-element) ─────────────────────── */
.ft-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ── Dialog shell ────────────────────────────────────────────────────── */
.ft-dialog {
    /* Reset browser defaults */
    border: none;
    outline: none;
    padding: 0;
    overflow: visible;
    background: #fff;
    color: var(--primary-bg-color);
    background: var(--primary-fg-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
    min-width: 280px;
    max-width: 90vw;
    max-height: 90vh;
}

/* display:flex only when open — must not override the UA's display:none on closed dialogs */
.ft-dialog[open] {
    display: flex;
    flex-direction: column;
}

/* Explicit hide guard in case a CSS reset sets dialog { display: block } */
.ft-dialog:not([open]) {
    display: none;
}

/* ── Title bar ───────────────────────────────────────────────────────── */
.ft-dialog-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 12px;
    background: var(--primary-bg-color);
    color: var(--primary-fg-color);
    flex-shrink: 0;
    min-height: 20px;
}

.ft-dialog-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    z-index: 1;
}

.ft-dialog-titlebar-close {
    background: none;
    border: none;
    color: var(--primary-fg-color);
    cursor: pointer;
    padding: 3px 0;
    opacity: 0.7;
    line-height: 1;
    font-size: 28px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
}

.ft-dialog-titlebar-close:hover {
    opacity: 1;
}

/* ── Content area ────────────────────────────────────────────────────── */
.ft-dialog-content {
    position: relative;
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* ── Button pane ─────────────────────────────────────────────────────── */
.ft-dialog-buttonpane {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 12px;
    flex-shrink: 0;
    border-top: 1px solid var(--secondary-bg-color);
}

.ft-dialog-buttonpane:empty {
    display: none;
}

/* Buttons that lead somewhere else rather than acting on this dialog sit at
   the far end of the pane, so the dialog's own actions keep the reading
   position. Only the first one takes the auto margin — the rest ride along
   behind it at the normal gap. */
.ft-dialog-buttonpane .ft-dialog-button-right {
    margin-left: auto;
}

.ft-dialog-buttonpane .ft-dialog-button-right ~ .ft-dialog-button-right {
    margin-left: 0;
}

/* ── Variant: no resizable handle needed (native <dialog> is not resizable) */

/* ── quizDialog variant ──────────────────────────────────────────────── */
.ft-dialog.quizDialog {
    /* ResourceQuiz uses position: center */
}