/* ============================================================
   components.css  —  Shared UI Components
   Session-timeout popup and other reusable overlay components
   ============================================================ */

/* ================================================================
   SESSION TIMEOUT POPUP  (#sm-overlay)
   ================================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
.sm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.sm-overlay.sm-visible {
    display: flex;
    animation: sm-fade-in .25s ease;
}

/* ── Backdrop ────────────────────────────────────────────────── */
.sm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);   /* FIX: was "revert-layer" — missing value + semicolon */
    backdrop-filter: blur(4px);
}

/* ── Card ────────────────────────────────────────────────────── */
.sm-card {
    position: relative;
    background: var(--bs-body-bg, #fff);
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    width: min(420px, 92vw);
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    animation: sm-slide-up .3s cubic-bezier(.34,1.56,.64,1);
    border: 1px solid rgba(255,255,255,.12);
}

/* ── Icon ────────────────────────────────────────────────────── */
.sm-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
}

.sm-icon-bg {
    position: absolute;
    inset: 0;
    color: #3b82f6;
    animation: sm-spin 12s linear infinite;
}

.sm-lock-icon {
    position: absolute;
    inset: 18px;
    color: #3b82f6;
}

/* ── Text ────────────────────────────────────────────────────── */
.sm-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--bs-body-color, #1a1a2e);
}

.sm-subtitle {
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 1.5rem;
}

/* ── Ring Timer ──────────────────────────────────────────────── */
.sm-timer-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.75rem;
}

.sm-ring { width: 100%; height: 100%; }

.sm-ring-bg {
    fill: none;
    stroke: var(--bs-border-color, #e5e7eb);
    stroke-width: 5;
}

.sm-ring-track {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset .9s linear, stroke .3s ease;
}

.sm-counter-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sm-counter {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-body-color, #1a1a2e);
    font-variant-numeric: tabular-nums;
}

.sm-counter-label {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.sm-actions { display: flex; flex-direction: column; gap: .75rem; }

.sm-btn {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 12px;
    border: none;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .15s, box-shadow .15s, opacity .15s;
}

.sm-btn:hover  { transform: translateY(-1px); }
.sm-btn:active { transform: translateY(0); }

.sm-btn-primary {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 4px 14px rgba(59,130,246,.35);
}

.sm-btn-primary:hover { box-shadow: 0 6px 20px rgba(59,130,246,.45); }

.sm-btn-ghost {
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.sm-btn-ghost:hover { background: var(--bs-tertiary-bg, #f8f9fa); }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes sm-fade-in  { from { opacity: 0; }                                         to { opacity: 1; } }
@keyframes sm-slide-up { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sm-spin     { to   { transform: rotate(360deg); } }