/* ============================================================
   Rubigo Cards — Aurora UI
   Soft, fixed aurora gradient canvas behind translucent
   "frosted glass" MudBlazor surfaces. Light mode only.
   ============================================================ */

html, body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Aurora background — fixed, low-saturation blobs over a cool off-white.
   Applied to body (login / EmptyLayout) and to the app layout. */
body,
.aurora-bg.mud-layout {
    background-color: #F6F7FB;
    background-image:
        radial-gradient(58% 48% at 12% 6%, rgba(99, 102, 241, 0.22), transparent 62%),
        radial-gradient(52% 46% at 90% 10%, rgba(14, 165, 233, 0.18), transparent 60%),
        radial-gradient(60% 55% at 78% 96%, rgba(20, 184, 166, 0.16), transparent 62%),
        radial-gradient(54% 48% at 8% 94%, rgba(168, 85, 247, 0.14), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.aurora-bg.mud-layout {
    min-height: 100dvh;
}

/* ---- Frosted glass surfaces ---------------------------------- */
/* Paper / cards float as glass over the aurora. Exclude popovers,
   snackbars and alerts (handled separately for legibility). */
.mud-paper:not(.mud-popover):not(.mud-snackbar):not(.mud-alert),
.mud-card {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.20),
                0 4px 12px -8px rgba(15, 23, 42, 0.10);
}

/* Top app bar — glass with a subtle hairline under it. */
.glass-bar.mud-appbar {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Side drawer — glass with a hairline on its trailing edge. */
.glass-drawer.mud-drawer .mud-drawer-content {
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-right: 1px solid rgba(226, 232, 240, 0.8);
}

/* Dropdowns / menus / selects must stay opaque for readability. */
.mud-popover {
    background-color: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.25);
}

/* ---- Misc polish --------------------------------------------- */
h1:focus { outline: none; }

::selection { background: rgba(99, 102, 241, 0.22); }

/* Slim, themed scrollbars (WebKit). */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.45) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.40);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.60); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Blazor framework UI (kept, recolored) ------------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #10b981; }
.invalid { outline: 1px solid #dc2626; }
.validation-message { color: #dc2626; }

#blazor-error-ui {
    background: #fff;
    color: #0f172a;
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
    border-top: 1px solid #e2e8f0;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .reload { color: #4f46e5; font-weight: 600; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.9rem;
    top: 0.6rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 12px;
}
.blazor-error-boundary::after { content: "Došlo je do greške."; }

/* App load spinner */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #6366f1;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: #475569;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Učitavanje…");
}