/* ═══════════════════════════════════════════════════════════════
   ZIMAM — Global CSS Manifest  (v5 — flattened)
   ─────────────────────────────────────────────────────────────
    RETIRED:  This file previously used @import to aggregate
    CSS modules 01–08.  Those @imports created a sequential
    download waterfall (browser had to fetch app.css, parse it,
    THEN discover the 8 sub-files).

    As of v5 each module is loaded as a direct <link> in
    App.razor, letting HTTP/2 multiplex them in parallel and
    removing a full round-trip from the critical rendering path.

    This file is kept as the cascade anchor for any future
    truly-global rules that don't belong in a numbered module.
   ═══════════════════════════════════════════════════════════════ */

/* ── Blazor Reconnect Modal ───────────────────────────────── */

/* ── App Loading Shell ────────────────────────────────────── */
/* Shown instantly on hard refresh while the SignalR circuit connects (~100-200ms).
   Auto-hidden via CSS :has() once Blazor renders the real route root.
   Protected app pages render .zimam-app; auth pages render .zimam-auth-root. */
.zimam-app-loading {
    display: grid;
    grid-template-columns: var(--zimam-sidebar-width, 280px) 1fr;
    height: 100vh;
    direction: rtl;
}
body:has(.zimam-app) .zimam-app-loading,
body:has(.zimam-auth-root) .zimam-app-loading {
    display: none;
}

/* Smooth entrance when Blazor renders the real app */
.zimam-app {
    animation: zimam-content-appear 250ms ease-out;
}

.zimam-app-loading__sidebar {
    background: var(--color-surface, #fff);
    border-inline-end: 1px solid var(--color-border, #e2e8f0);
    display: flex;
    align-items: flex-start;
    padding: 0.9rem 1.25rem;
}
.zimam-app-loading__logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--color-text-strong, #0f172a);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
    /* Exclude from LCP: contentVisibility auto makes the browser treat this as
       off-screen content, so it won't be a Largest Contentful Paint candidate.
       The real page subtitle should be the LCP element instead. */
    content-visibility: auto;
    contain-intrinsic-size: 34px 34px;
}
.zimam-app-loading__main {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg, #f8fafc);
}


/* Framework toggles CSS classes on #components-reconnect-modal:
   (none)                       → hidden (default)
   components-reconnect-show    → reconnecting
   components-reconnect-hide    → reconnected
   components-reconnect-failed  → retries exhausted
   components-reconnect-rejected → server rejected */
.zimam-reconnect-modal {
    position: fixed; inset: 0; z-index: 99999;
    align-items: center; justify-content: center;
    display: none;
}
.zimam-reconnect-modal.components-reconnect-show,
.zimam-reconnect-modal.components-reconnect-failed,
.zimam-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
.zimam-reconnect-overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
}
.zimam-reconnect-dialog {
    position: relative; z-index: 1;
    width: min(560px, calc(100vw - 2rem));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    text-align: center;
    direction: rtl;
    box-shadow: var(--shadow-floating);
}
.zimam-reconnect-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 0.875rem;
}
/* Hide spinner when retries are exhausted */
.components-reconnect-failed .zimam-reconnect-spinner,
.components-reconnect-rejected .zimam-reconnect-spinner { display: none; }
.zimam-reconnect-text { font-size: .95rem; color: var(--text-secondary, #555); margin: 0; }
/* "Reconnecting..." visible only during active retries */
.components-reconnect-failed .zimam-reconnect-text,
.components-reconnect-rejected .zimam-reconnect-text { display: none; }
/* "Reload" message hidden by default, shown when failed */
.zimam-reconnect-failed-text {
    font-size: var(--text-md);
    color: var(--color-error-text);
    margin: 0;
    line-height: var(--lh-normal);
    display: none;
}
.components-reconnect-failed .zimam-reconnect-failed-text,
.components-reconnect-rejected .zimam-reconnect-failed-text { display: block; }

.zimam-reconnect-actions {
    display: none;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.875rem;
}

.components-reconnect-failed .zimam-reconnect-actions,
.components-reconnect-rejected .zimam-reconnect-actions {
    display: inline-flex;
}

.zimam-reconnect-btn {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 0.45rem 0.95rem;
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.zimam-reconnect-btn:hover {
    transform: translateY(-1px);
}

.zimam-reconnect-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.zimam-reconnect-btn--primary {
    background: var(--color-text-strong);
    color: #fff;
    border-color: var(--color-text-strong);
}

.zimam-reconnect-btn--primary:hover {
    background: #020617;
    border-color: #020617;
}

.zimam-reconnect-btn--secondary {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.zimam-reconnect-btn--secondary:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-strong);
    border-color: var(--color-border-hover);
}

@media (max-width: 640px) {
    .zimam-reconnect-dialog {
        padding: 1rem;
        border-radius: var(--radius-lg);
    }

    .zimam-reconnect-actions {
        width: 100%;
        display: none;
        flex-direction: column;
    }

    .components-reconnect-failed .zimam-reconnect-actions,
    .components-reconnect-rejected .zimam-reconnect-actions {
        display: flex;
    }
}