/* ===================================================== PAGE LOAD ======== */
/* Quiet refresh, shared by portal and standalone pages via page_refresh.php.
   On reload the old page stays fully visible while the server works, and
   the new page paints its content without an intentional blank frame.
   Normal navigation waits for DataTables/Select2 to initialize. The
   "Refreshing…" card only shows up when loading is slow.

   Opacity only, on purpose: a transform on .content-page would turn it into
   the containing block for position:fixed descendants, and modals opened on
   page load would render offset until the animation ended. */

html.srms-shell-pending #wrapper {
    visibility: hidden;
    /* Failsafe if the boot script never runs: show after 5s regardless. */
    animation: srms-boot-shell-failsafe 0s linear 5s forwards;
}

html.srms-booting .content-page,
html.srms-booting:not(.srms-shell):not(.srms-content-layout) body {
    opacity: 0;
    pointer-events: none;
    animation: srms-boot-content-failsafe 0s linear 5s forwards;
}

html.srms-revealing .content-page {
    transition: opacity 0.12s ease-out;
}

html.srms-reloading.srms-revealing .content-page {
    transition: none;
}

/* Navigation to another page dims after 0.6s. Reloads override this below. */
html.srms-leaving .content-page,
html.srms-leaving:not(.srms-shell):not(.srms-content-layout) body {
    opacity: 0.6;
    transition: opacity 0.2s ease 0.6s;
}

/* A reload must never paint an empty content area. The browser's parser
   hold can end before jQuery's ready callbacks, especially on pages with
   more plugins. Keep the arriving content visible throughout that gap and
   leave the outgoing page at full opacity while the server responds. */
html.srms-reloading .content-page,
html.srms-reloading:not(.srms-shell):not(.srms-content-layout) body {
    opacity: 1;
    transition: none;
}

html.srms-reloading.srms-shell-pending #wrapper {
    visibility: visible;
}

@keyframes srms-boot-shell-failsafe {
    to { visibility: visible; }
}

@keyframes srms-boot-content-failsafe {
    to { opacity: 1; pointer-events: auto; }
}

/* Spinner card — a white card with a spinning ring over the content area,
   labelled "Refreshing…" (F5 / reload) or "Loading…" (another page). Drawn
   with the two pseudo-elements of <html>, which exist before <body> does, so
   it is there in the very first frame and on every page using page_refresh.php,
   with or without the sidebar. ::after is the card + label, ::before the ring.
   Centred on the content area: offset by half the top bar, and by half the
   sidebar where there is one. */
html.srms-page-refresh::after,
html.srms-page-refresh::before {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

html.srms-page-refresh::after {
    content: "Loading\2026";
    z-index: 2147482999;
    box-sizing: border-box;
    width: 150px;
    margin-top: 35px;
    padding: 60px 12px 16px;
    transform: translate(-50%, -50%);
    background: var(--srms-surface, #fff);
    border: 1px solid var(--srms-line, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    font: 600 13px/1.25 "Geist", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    color: var(--srms-ink-2, #475569);
    text-align: center;
    white-space: nowrap;
}

html.srms-reloading::after {
    content: "Refreshing\2026";
}

html.srms-page-refresh::before {
    content: "";
    z-index: 2147483000;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    /* Card is ~95px tall around its centre; the ring sits in its top half. */
    margin-top: 19px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(37, 99, 235, 0.15);
    border-top-color: var(--srms-blue-600, #2563eb);
    border-radius: 50%;
}

/* Leaving (any page): the card fades in only after 0.6s of waiting. The
   class is added to an existing element, so a transition delay works here. */
html.srms-leaving::after,
html.srms-leaving::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.6s, visibility 0s linear 0.6s;
}

/* Arriving: only if setting up takes over 0.4s. The element is born in this
   state, and transitions never run for a first style, so use an animation. */
html.srms-page-refresh.srms-booting::after {
    visibility: visible;
    animation: srms-pl-card-in 0.2s ease 0.4s both;
}

html.srms-page-refresh.srms-booting::before {
    visibility: visible;
    animation: srms-pl-ring 0.8s linear infinite, srms-pl-card-in 0.2s ease 0.4s both;
}

/* The previous page was already showing the card: keep it up, no gap. */
html.srms-page-refresh.srms-booting.srms-busy::after {
    opacity: 1;
    animation: none;
}

html.srms-page-refresh.srms-booting.srms-busy::before {
    opacity: 1;
    animation: srms-pl-ring 0.8s linear infinite;
}

html.srms-leaving::before,
html.srms-revealing::before {
    animation: srms-pl-ring 0.8s linear infinite;
}

@keyframes srms-pl-card-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes srms-pl-ring {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (min-width: 768px) {
    html.srms-shell::after,
    html.srms-shell::before {
        margin-left: 120px;
    }

    html.srms-shell:has(> body.enlarged)::after,
    html.srms-shell:has(> body.enlarged)::before {
        margin-left: 35px;
    }
}


@media (prefers-reduced-motion: reduce) {
    html.srms-revealing .content-page {
        transition: none !important;
    }

    /* Keep the 0.6s "only when slow" delay; just drop the fade itself. */
    html.srms-leaving .content-page,
    html.srms-leaving:not(.srms-shell):not(.srms-content-layout) body {
        transition: opacity 0s linear 0.6s !important;
    }

    /* Slower ring; the second value is the card's own fade-in. */
    html.srms-page-refresh.srms-booting::before,
    html.srms-leaving::before,
    html.srms-revealing::before {
        animation-duration: 2.4s, 0.2s !important;
    }

}

@media print {
    html.srms-page-refresh::before,
    html.srms-page-refresh::after {
        display: none !important;
    }

    html.srms-page-refresh #wrapper,
    html.srms-page-refresh body,
    html.srms-page-refresh .content-page {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
    }
}