/* The panel's one waiting state (تسک ۱۴۰۵/۰۶/۱۱/۰۳).

   Every page of this panel is drawn by the same layout, so the waiting state
   belongs to that layout rather than to a list of pages: this stylesheet and
   `panel-loading.js` are registered once in `AdminPanelProvider`, which means a
   management, page, tab or monitor built tomorrow has it without being named
   anywhere (بند ۳، ۳۰ و ۳۱).

   **The appearance is the crawler's own.** The spinner is the crawler's logo,
   turning in its own colours (تسک ۱۴۰۵/۰۷/۲۰/۰۵ بند ۵) — the same file the
   header draws — cloned from a template the layout prints once. It replaced
   Filament's `fi-loading-indicator`, which the first version of this standard
   borrowed. Nothing of the Baligpa panel is carried over.

   The surfaces are the panel's own too: the box under the words is Filament's
   card (its radius, its ring, its shadow) and the veil is the page's own
   background at 72%, so what is behind stays legible as *the page being
   replaced* rather than becoming a grey sheet. */

#crawler-loading-layer {
    /* The layer itself never covers anything: each waiting state inside it is
       positioned over the one region that is actually waiting (بند ۱۲). */
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

/* A waiting state over a region: where it sits and how what is inside it is
   arranged. Whether it dims what is behind it is the *next* two rules' business
   and not this one's — a shared `background-color` here would have to be undone
   by the lighter state below, and `.dark .crawler-loading` would then outrank
   `.crawler-loading-refresh` and dim a page that was only refreshing itself. */
.crawler-loading {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A page or a section being opened: the page's own background, thinned — the
   outgoing content stays visible underneath, which is what tells the user this
   is the page they were on being replaced rather than a page that has broken
   (بند ۷). */
.crawler-loading-veil {
    background-color: color-mix(in srgb, #f9fafb 72%, transparent);
    /* Clicks on the region being replaced go nowhere while it waits, so a
       second click cannot land on content that is already stale (بند ۱۸). The
       column of managements and the header are deliberately outside every
       veil, so changing destination mid-wait stays possible (بند ۱۹). */
    pointer-events: auto;
}

.dark .crawler-loading-veil {
    background-color: color-mix(in srgb, #111827 72%, transparent);
}

/* The lighter state a page that is already usable takes while it refreshes
   itself (بند ۲۴): a pill at the top of the region, nothing dimmed, nothing
   blocked — the page is not taken away for a refresh it did not ask for. */
.crawler-loading-refresh {
    align-items: flex-start;
    background-color: transparent;
    pointer-events: none;
}

.crawler-loading-box {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow:
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
    /* Filament's own card ring, so the box belongs to this panel rather than
       floating on it. */
    outline: 1px solid rgb(17 24 39 / 0.05);
    outline-offset: -1px;
}

.dark .crawler-loading-box {
    background-color: #1f2937;
    outline-color: rgb(255 255 255 / 0.1);
}

.crawler-loading-refresh .crawler-loading-box {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    gap: 0.45rem;
}

/* The crawler's own mark, turning in its own colours
   (تسک ۱۴۰۵/۰۷/۲۰/۰۵ بند ۵). A fixed box, so the words beside it never move
   while it turns, and `will-change` so the turn is the compositor's and stays
   smooth while the page behind it is busy being replaced. */
.crawler-loading-logo {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    will-change: transform;
    animation: crawler-loading-spin 1.1s linear infinite;
}

.crawler-loading-refresh .crawler-loading-logo {
    width: 1.15rem;
    height: 1.15rem;
}

@keyframes crawler-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* A wait that ended in an error: the wait is gone, and this says so — at the
   foot of the window, over nothing the user was reading, with a way to try
   again. It is the only thing in the layer that takes a click. */
.crawler-loading-failure {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100vw - 2rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    color: #991b1b;
    font-size: 0.875rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
    outline: 1px solid rgb(220 38 38 / 0.45);
    outline-offset: -1px;
    pointer-events: auto;
}

.dark .crawler-loading-failure {
    background-color: #1f2937;
    color: #fecaca;
}

.crawler-loading-failure-retry {
    padding: 0.3rem 0.8rem;
    border-radius: 0.5rem;
    background-color: var(--panel-accent, #0ea5e9);
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.crawler-loading-failure-close {
    padding: 0 0.35rem;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
}

.crawler-loading-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.dark .crawler-loading-text {
    color: #f9fafb;
}

.crawler-loading-refresh .crawler-loading-text {
    font-size: 0.75rem;
    color: #6b7280;
}

.dark .crawler-loading-refresh .crawler-loading-text {
    color: #d1d5db;
}

/* A page whose content is deferred renders an element with no height at all,
   so a veil measured off it would be invisible. The floor is on the veil, not
   on the page: nothing in the layout moves. */
.crawler-loading-min {
    min-height: 6rem;
}

/* ── The one place a waiting state already existed ─────────────────────────

   Filament defers a widget and a relation manager by rendering
   `fi-loading-section`: a box of the right height with a label only a screen
   reader hears. On screen that is an empty grey rectangle — the «قالب آمده،
   داده نیامده، و هیچ وضعیت انتظاری نیست» of بند ۱ و ۱۰, and the reason the two
   header widgets of this panel had their laziness switched off by hand rather
   than their placeholder fixed.

   The placeholder itself is Filament's and stays Filament's; this gives it the
   breathing it never had, in the panel's own blue. It is written against the
   shared class rather than against any page, so every deferred section in the
   panel — the dashboard's figures, «منابع خبری» inside a crawler, and whatever
   is deferred next — reads as waiting (بند ۲۷ تا ۲۹). */

.fi-loading-section {
    background-color: color-mix(in srgb, var(--panel-accent, #0ea5e9) 6%, transparent);
    animation: crawler-loading-breathe 1.4s ease-in-out infinite;
}

.dark .fi-loading-section {
    background-color: color-mix(in srgb, var(--panel-accent, #0ea5e9) 10%, transparent);
}

@keyframes crawler-loading-breathe {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Someone who has asked their system for less movement gets the colour and
   none of the motion. Filament's own spinner honours the same request. */
@media (prefers-reduced-motion: reduce) {
    .fi-loading-section,
    .crawler-loading-logo {
        animation: none;
    }
}