/* Global click / navigation feedback — linked by every layout.

   Every menu item and row action in this app is a real link, so moving between
   pages is a full page load. Until the next document arrives nothing on screen
   changes, which reads as "my click didn't register". These two pieces are the
   only visible response during that gap: a spinner on the control you clicked,
   and a bar across the top of the page.

   Driven entirely by resources/views/partials/loading_feedback.blade.php.

   NOT scoped under `.themed-page`. theme.css is opt-in per page so that records,
   certificates and printables can keep their own look; this has to work
   everywhere, including on those pages. */


/* Keyframe names are global to the document, and AdminCSS/dashboard.css:262
   already warns about a collision between two sheets, so prefix both. */
@keyframes clinicLoadingSpin {
    to { transform: rotate(360deg); }
}

@keyframes clinicLoadingSlide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}


/* ==================== SPINNER ==================== */

/* Appended to the clicked control rather than drawn as a pseudo-element:
   .nav-sublink already spends both ::before and ::after on its elbow connector
   (shared/sidebar.css:217,232) and .dropdown-toggle spends ::after on its caret.

   Sized in `em` and drawn in `currentColor`, so this one rule lands correctly on
   btn-primary, btn-outline-secondary, sidebar links and everything else without
   knowing anything about them. */
.clinic-spin {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.5em;
    vertical-align: -0.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: clinicLoadingSpin 0.7s linear infinite;
}

/* The rail's links are flex rows (shared/sidebar.css:96), so push the spinner to
   the far edge instead of letting it crowd the label. */
.sidebar-nav .nav-link > .clinic-spin {
    margin-left: auto;
}

/* .sidebar-nav .nav-link span sets overflow/text-overflow for label truncation
   (shared/sidebar.css:119); undo it so the ring is not clipped into an oval. */
.sidebar-nav .nav-link > span.clinic-spin {
    overflow: visible;
    text-overflow: clip;
}

/* Blocks the re-click that started all this. Deliberately not `disabled`:
   disabling a submit button before the browser has serialized the form can drop
   the submitter's name/value from the request. */
[data-loading] {
    pointer-events: none;
}


/* ==================== TOP PROGRESS BAR ==================== */

/* The spinner is only useful if you are still looking at what you clicked. This
   is the page-level answer to "is anything happening?" — one element, appended
   to <body> on demand.

   z-index clears Bootstrap's modal backdrop (1050) and offcanvas (1045): logging
   out and submitting a modal form both navigate from above those layers. */
.clinic-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.clinic-nav-progress.is-active {
    opacity: 1;
}

/* Indeterminate on purpose: a full page load gives us no progress events to
   report, and a fake percentage that stalls is worse than an honest sweep. */
.clinic-nav-progress::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4f6ef7, #3b5bdb);
    transform: translateX(-100%);
    animation: clinicLoadingSlide 1.4s ease-in-out infinite;
}


/* ==================== REDUCED MOTION ==================== */

/* Still show both — they are the only feedback there is — but stop them moving
   continuously. The spinner ticks in eight steps and the bar sits still. */
@media (prefers-reduced-motion: reduce) {
    .clinic-spin {
        animation-duration: 1.6s;
        animation-timing-function: steps(8, end);
    }

    .clinic-nav-progress::before {
        transform: none;
        animation: none;
        opacity: 0.7;
    }
}