/* ==========================================================
   Brand loader -- the PERJODA app's BrandLoaderView, on the web
   (BITSCONDUCTOR ui/common/BrandLoaderView.java): the logo that
   gently "breathes", a faint accent pulse behind it, a track ring
   with an arc that spins while its length grows and shrinks, and
   an uppercase label underneath. The arc runs the logo's own blue
   -> red, a shade darker; the logo sits on no background.
   Sizes sm 46 / md 88 / lg 120px; 1.4s arc, 1.8s pulse.

   Markup comes from includes/brandLoader.php (bits_loader()) or
   assets/js/brandLoader.js (BitsLoader.html()); the page overlay
   (#bitsLoaderOverlay) is driven by BitsLoader.show() / hide().
   ========================================================== */

.bits-loader {
    --bl-size: 88px;
    --bl-gap: 14px;
    --bl-blue: #1F23A8;     /* logo blue #3333CC, darker */
    --bl-red: #C8161D;      /* logo red #F64E4E, darker */
    --bl-track: rgba(31, 35, 168, .12);
    --bl-label: #3A4256;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bl-gap);
    line-height: 1;
}
.bits-loader--sm { --bl-size: 46px; --bl-gap: 8px; }
.bits-loader--lg { --bl-size: 120px; }

/* On dark surfaces the darkened logo tones would vanish -- use them as-is. */
[data-bs-theme="dark"] .bits-loader {
    --bl-blue: #5A5FE6;
    --bl-red: #F05252;
    --bl-track: rgba(163, 182, 198, .18);
    --bl-label: #A3B6C6;
}

.bits-loader__mark {
    position: relative;
    width: var(--bl-size);
    height: var(--bl-size);
    flex: none;
}

/* Pulse disc, scale 0.9 -> 1.35 while fading out (ease-out). */
.bits-loader__pulse {
    position: absolute;
    left: 14%; top: 14%; width: 72%; height: 72%;
    border-radius: 50%;
    background: var(--bl-blue);
    opacity: 0;
    animation: bits-loader-pulse 1.8s cubic-bezier(.33, 1, .68, 1) infinite;
}
@keyframes bits-loader-pulse {
    0%   { transform: scale(.9);  opacity: .126; }  /* .9 x .14 */
    100% { transform: scale(1.35); opacity: 0; }
}

/* Track ring + gradient arc (r = 45 of a 100 box, stroke 6). */
.bits-loader__ring {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    animation: bits-loader-rotate 1.4s linear infinite;
}
.bits-loader__track { fill: none; stroke: var(--bl-track); stroke-width: 6; }
.bits-loader__g1 { stop-color: var(--bl-blue); }
.bits-loader__g2 { stop-color: var(--bl-red); }
.bits-loader__arc {
    fill: none;
    /* stroke = the url(#...) gradient attribute on the element */
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1 289;
    stroke-dashoffset: 0;
    animation: bits-loader-dash 1.4s ease-in-out infinite;
}
@keyframes bits-loader-rotate {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(270deg); }
}
@keyframes bits-loader-dash {
    0%   { stroke-dasharray: 1 289;   stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 150 289; stroke-dashoffset: -40; }
    100% { stroke-dasharray: 150 289; stroke-dashoffset: -288; }
}

/* The logo itself (no disc behind it), "breathing" 1 -> 0.95 -> 1, sized to
   fit inside the ring -- the diamond's tips sit on the centre line. */
.bits-loader__disc {
    position: absolute;
    left: 10%; top: 10%; width: 80%; height: 80%;
    display: flex; align-items: center; justify-content: center;
    animation: bits-loader-breathe 1.8s ease-in-out infinite;
}
.bits-loader__disc img {
    width: 92%; height: 92%;
    object-fit: contain;
    display: block;
}
@keyframes bits-loader-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(.95); }
}

.bits-loader__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bl-label);
    white-space: nowrap;
}
.bits-loader--sm .bits-loader__label { font-size: 11px; }
.bits-loader__label:empty { display: none; }

/* Animations off: one still frame -- arc at its longest, pulse faded out. */
@media (prefers-reduced-motion: reduce) {
    .bits-loader__ring, .bits-loader__arc, .bits-loader__pulse, .bits-loader__disc { animation: none; }
    .bits-loader__ring { transform: rotate(90deg); }
    .bits-loader__arc { stroke-dasharray: 150 289; stroke-dashoffset: -40; }
}

/* A centred block for in-content placeholders (modals, empty panels). */
.bits-loader-block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1rem;
}

/* ---- page overlay --------------------------------------------------------
   Dims the window with a slate scrim (slight blur) and swallows clicks while
   shown. Above Bootstrap modals (1055) and SweetAlert (1060). On the scrim
   the loader takes its bright arc tones, a light track and a white label. */
.bits-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.bits-loader-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: progress;
    transition: opacity .18s ease, visibility 0s;
}
.bits-loader-overlay .bits-loader {
    --bl-blue: #6B70F0;
    --bl-red: #F25C5C;
    --bl-track: rgba(255, 255, 255, .22);
    --bl-label: #F1F4F9;
}
.bits-loader-overlay .bits-loader__label { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .bits-loader-overlay { background: rgba(0, 0, 0, .6); }

/* Every page arrives with the overlay up (.is-boot); brandLoader.js takes it
   down. If the script never runs, this lets the page go after 12s anyway. */
.bits-loader-overlay.is-boot {
    animation: bits-loader-boot-fallback 0s linear 12s forwards;
}
@keyframes bits-loader-boot-fallback {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Nothing animates while it's hidden. */
.bits-loader-overlay:not(.is-active) .bits-loader * { animation-play-state: paused; }

/* Small in-place overlay over one panel (e.g. a table being refreshed). */
.bits-loader-panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.5rem;
    background: rgba(255, 255, 255, .55);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 55%, transparent);
}

@media print {
    .bits-loader-overlay { display: none !important; }
}