/* ===== Session timeout ("Stay connected") dialog =====
   The Bootstrap modal controller stays as the transport so the plugin's
   show/hide and its hide.bs.modal keep-alive contract are unchanged; only the
   content and chrome are the refreshed centered-dialog design. Same approach as
   the export progress dialog (components.css, #export_progress).
   Markup: web/plugins/session-timeout/session-timeout.js */

.ui-refresh #session-timeout-dialog .session-timeout-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    max-width: calc(100vw - var(--space-8));
    margin: 0;
    /* The id beats Bootstrap's `.modal.fade .modal-dialog` slide-down, so the
       dialog micro-zooms out of the page surface instead. */
    transform: translate(-50%, -50%) scale(0.95);
    transition: transform var(--transition-normal);
}
.ui-refresh #session-timeout-dialog.in .session-timeout-dialog {
    transform: translate(-50%, -50%) scale(1);
}
.ui-refresh #session-timeout-dialog .modal-content {
    position: relative;
    padding: var(--space-8) var(--space-8) var(--space-6);
    border: 0;
    /* --sh-lg carries a dark variant; --shadow-xl is tuned for light paper only. */
    box-shadow: var(--sh-lg);
    text-align: center;
    /* components.css pins every .ui-refresh .modal-content to --bg-page with
       !important, which would leave this card the same tone as the page behind
       it. A confirm-style dialog sits on the raised surface. */
    background-color: var(--bg-surface) !important;
}

.ui-refresh #session-timeout-dialog .session-timeout-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1);
    border: 0;
    background: none;
    color: var(--fg-muted);
    font-size: var(--font-size-base);
    line-height: 1;
    cursor: pointer;
}
.ui-refresh #session-timeout-dialog .session-timeout-close:hover,
.ui-refresh #session-timeout-dialog .session-timeout-close:focus {
    color: var(--fg-default);
}

.ui-refresh #session-timeout-dialog .confirm-dialog__subtitle {
    margin-bottom: var(--space-5);
}

.ui-refresh #session-timeout-dialog .session-timeout-countdown {
    margin-bottom: var(--space-6);
}
.ui-refresh #session-timeout-dialog .countdown-holder {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-3xl);
    font-weight: var(--font-weight-semibold);
    /* Proportional digits jitter the whole number on every tick. */
    font-variant-numeric: tabular-nums;
    color: var(--fg-default);
    transition: color var(--transition-fast);
}
/* The dashlet .progress adds `flex: 1` and a 1px --input-border; neither belongs
   on a track that is the full width of a centered dialog. */
.ui-refresh #session-timeout-dialog .progress {
    height: 6px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    box-shadow: none;
    overflow: hidden;
}
.ui-refresh #session-timeout-dialog .countdown-bar {
    background-color: var(--accent-primary);
    box-shadow: none;
    /* The width is written once a second; a linear transition over exactly that
       second turns the steps into a smooth drain. */
    transition: width 1s linear, background-color var(--transition-fast);
}
/* Last ten seconds. Keep these two separate — a combined rule would also paint
   the track's own background red underneath the fill. */
.ui-refresh #session-timeout-dialog .session-timeout-countdown.is-urgent .countdown-holder {
    color: var(--color-error);
}
.ui-refresh #session-timeout-dialog .session-timeout-countdown.is-urgent .countdown-bar {
    background-color: var(--color-error);
}

@media (max-width: 767px) {
    .ui-refresh #session-timeout-dialog .modal-content {
        padding: var(--space-6) var(--space-6) var(--space-4);
    }
}