/* ==========================================================================
   Diplomax HRMS - the preloader (Classical design).

   Every page opens on the cream of the page with the IUNET mark in its gold
   tile, a gold ring turning around it; when the page is ready it fades out
   and the content fades in. Driven by classes js/core/preloader.js sets
   on <html>:
     pl-on       the script runs (without it nothing here is ever shown)
     pl-ready    the page is ready: the preloader fades out
   Only opacity is animated on the content, never a transform, so panels
   and menus with position: fixed inside it stay where they belong.
   ========================================================================== */

.preloader { display: none; }

.pl-on .preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background-color: var(--color-bg, #f5f3ec);
    background-image: var(--page-gradient, none);
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.pl-on.pl-ready .preloader { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    animation: preloader-breathe 1.8s ease-in-out infinite;
}

.preloader__logo {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f5c842;
    box-shadow: 0 10px 28px -12px rgba(138, 109, 26, 0.55);
    color: #1f1f1f;
}

.preloader__logo svg { width: 28px; height: 28px; }

/* The ring: a gold arc on a faint track, turning */
.preloader__ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(245, 200, 66, 0.22);
    border-top-color: #f5c842;
    border-right-color: #e0b12b;
    border-radius: 50%;
    animation: preloader-turn 0.9s linear infinite;
}

.preloader__word {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    color: var(--color-text, #1f1f1f);
    font-size: 1rem;
    font-weight: var(--weight-extrabold, 800);
    letter-spacing: 0.18em;
}

.preloader__word span {
    color: var(--color-text-muted, #6b6a64);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0.04em;
}

@keyframes preloader-turn { to { transform: rotate(360deg); } }
@keyframes preloader-breathe { 50% { transform: scale(0.96); } }

/* --- the content fades in as the preloader fades out ------------------- */

.pl-on .app-main,
.pl-on .auth-main,
.pl-on .doc-shell > main { opacity: 0; }

.pl-on.pl-ready .app-main,
.pl-on.pl-ready .auth-main,
.pl-on.pl-ready .doc-shell > main { opacity: 1; transition: opacity 0.5s ease 0.1s; }

/* --- dark, reduced motion, print ------------------------------------------ */

:root[data-theme="dark"] .preloader__logo { box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .preloader__ring { border-color: rgba(245, 200, 66, 0.16); border-top-color: #f5c842; border-right-color: #e0b12b; }

@media (prefers-reduced-motion: reduce) {
    .preloader__mark,
    .preloader__ring { animation: none; }
    .pl-on .preloader,
    .pl-on.pl-ready .app-main,
    .pl-on.pl-ready .auth-main,
    .pl-on.pl-ready .doc-shell > main { transition: none; }
}

@media print {
    .preloader { display: none !important; }
    .pl-on .app-main,
    .pl-on .auth-main,
    .pl-on .doc-shell > main { opacity: 1 !important; }
}