html, body {
    height: 100%;
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    margin: 0;
}

/* Loader dok se aplikacija povezuje i ucitava prijavu (vidi App.razor / Routes.razor). */
#app-preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F1F7;
    transition: opacity .25s ease;
}
.app-dark #app-preloader { background: #202226; }
#app-preloader.app-preloader-hide { opacity: 0; pointer-events: none; }
.app-preloader-box { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.app-preloader-box img { width: 44px; height: 44px; object-fit: contain; }
.app-preloader-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(132, 90, 223, .18);
    border-top-color: #845ADF;
    animation: app-preloader-spin .8s linear infinite;
}
@keyframes app-preloader-spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    background: #DC2626;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui a.reload {
    color: white;
    text-decoration: underline;
    margin-left: 8px;
}


.mymoment-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F9F3FA;
    background-image:
        radial-gradient(900px circle at 12% 8%, rgba(221, 60, 230, 0.10), transparent 55%),
        radial-gradient(900px circle at 88% 92%, rgba(183, 112, 246, 0.10), transparent 55%);
    padding: 16px;
}

/* Prijava: dvodelna kartica - levo brend (tamni prelaz kao meni), desno forma; na telefonu samo forma. */
.mymoment-login-shell {
    width: 100%;
    max-width: 980px;
    min-height: 600px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(43, 27, 51, 0.18);
    display: flex;
    overflow: hidden;
}

.mymoment-login-brand {
    flex: 0 0 44%;
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(160deg, var(--mud-palette-drawer-background, #1A1C1E) 0%, var(--mud-palette-drawer-background, #1A1C1E) 30%, var(--mud-palette-primary) 150%);
}

.mymoment-login-form {
    flex: 1 1 auto;
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mymoment-login-mobile-logo { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }

@media (max-width: 760px) {
    .mymoment-login-shell { min-height: 0; border-radius: 20px; }
    .mymoment-login-brand { display: none; }
    .mymoment-login-form { padding: 32px 24px; }
    .mymoment-login-mobile-logo { display: flex; justify-content: center; }
    /* Na telefonu: logo, naslov i podnaslov centrirani. */
    .mymoment-login-form .mymoment-heading,
    .mymoment-login-form .mymoment-heading + .mud-typography { text-align: center; }
    .mymoment-login-form .mymoment-auth-head { align-items: center !important; text-align: center; }
    .mymoment-login-form .mymoment-auth-icon { margin-left: auto; margin-right: auto; }
}

.mymoment-auth-card {
    width: 100%;
    max-width: 420px;
}

.mymoment-heading {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
}

.mymoment-powered-by {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mud-palette-text-disabled, #9CA3AF);
    text-align: center;
    letter-spacing: 0.02em;
}

.mymoment-legal-link { color: inherit; text-decoration: underline; }

.mymoment-input .mud-input-outlined {
    border-radius: 14px;
    background-color: var(--mud-palette-background-gray, #F7F1F9);
}

.mymoment-input .mud-input-filled,
.mymoment-input .mud-input-filled:hover,
.mymoment-input .mud-input-filled:focus-within,
.mymoment-input .mud-input-slot {
    box-shadow: none !important;
}


/* Zamucena pozadina iza svakog dijaloga. "BackgroundClass" na MudDialogProvider-u (kako uputstvo
   MudBlazor-a nalaze) ne radi u ovoj verziji - klasa se nikad ne pojavi u DOM-u. Zato ciljamo
   direktno stvarni element pozadine koji MudBlazor pravi (provereno u DevTools): .mud-overlay-scrim. */
.mud-overlay-scrim {
    background-color: rgba(43, 27, 51, 0.48) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

/* Javni wizard za kreiranje naloga (izbor paketa -> podaci -> placanje -> potvrda). */
.mymoment-signup-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F9F3FA;
    background-image:
        radial-gradient(900px circle at 12% 8%, rgba(221, 60, 230, 0.10), transparent 55%),
        radial-gradient(900px circle at 88% 92%, rgba(183, 112, 246, 0.10), transparent 55%);
    padding: 24px;
}

.mymoment-signup-card {
    width: 100%;
    max-width: 960px;
    min-height: 560px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(43, 27, 51, 0.18);
    display: flex;
    overflow: hidden;
}

.mymoment-signup-side {
    flex: 0 0 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--mud-palette-drawer-background, #1A1C1E) 0%, var(--mud-palette-drawer-background, #1A1C1E) 30%, var(--mud-palette-primary) 150%);
    color: #fff;
    padding: 36px 32px;
}

.mymoment-signup-side > * { position: relative; }

.mymoment-signup-side > .mymoment-signup-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mymoment-signup-login { margin-top: auto; padding-top: 28px; }

.mymoment-signup-login-mobile { display: none; }

.mymoment-signup-steps {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.mymoment-signup-steps li {
    padding: 10px 0;
    opacity: .65;
    font-weight: 500;
}

.mymoment-signup-steps li.active {
    opacity: 1;
    font-weight: 700;
}

.mymoment-signup-mobile-progress { display: none; }

.mymoment-signup-side .mymoment-signup-back,
.mymoment-signup-side .mymoment-signup-back:hover {
    color: #fff !important;
    opacity: .9;
    display: inline-block;
    margin-top: 28px;
}

/* Bez unutrasnjeg skrola: kartica raste sa sadrzajem, a ako je ekran nizak skroluje se cela strana. */
.mymoment-signup-main {
    flex: 1 1 auto;
    padding: 36px 40px;
}

@media (max-width: 720px) {
    .mymoment-signup-page { padding: 0; align-items: flex-start; }

    .mymoment-signup-card {
        flex-direction: column;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    /* Bocni panel postaje tanka traka na vrhu - ne sme da pojede ceo ekran pre nego sto se vidi forma. */
    .mymoment-signup-side {
        flex: none;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mymoment-signup-side img { height: 28px; flex-shrink: 0; }
    .mymoment-signup-side h2 { margin: 0 !important; font-size: 17px !important; }
    .mymoment-signup-side p { display: none; }
    .mymoment-signup-steps { display: none; }
    .mymoment-signup-mobile-progress { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
    .mymoment-signup-side { flex-direction: row; }
    .mymoment-signup-login { display: none; }
    .mymoment-signup-login-mobile { display: flex; justify-content: center; margin-top: 24px; }

    .mymoment-signup-side .mymoment-signup-back {
        margin: 0 0 0 auto !important;
        font-size: 13px;
    }

    .mymoment-signup-main {
        max-height: none;
        overflow-y: visible;
        padding: 20px 16px 32px;
    }
}

.mymoment-package-option {
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.mymoment-package-option.selected {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

/* Kockice za 6-cifreni kod (2FA). */
.mm-otp { display: flex; gap: 8px; justify-content: center; }
.mm-otp-box {
    width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
    border: 1.5px solid var(--mud-palette-lines-default); border-radius: 10px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font-family: inherit; -webkit-appearance: none; appearance: none;
}
.mm-otp-box:focus { outline: none; border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(221, 60, 230, .16); }
.mm-otp-box:disabled { opacity: .6; }

/* Tabele: zaglavlje izdvojeno bojom umesto da sve bude belo-na-belom. */
.mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.mud-table-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Zvonce uvek u istoj liniji sa ostalim ikonicama (sa brojem i bez njega) - bez poravnanja po liniji teksta. */
.mud-badge-root.mm-badge-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.mud-badge-root.mm-badge-center .mud-badge-wrapper { line-height: 0; }

/* Manji broj obavestenja na zvoncetu (podrazumevani MudBadge je prevelik za ikonicu od 24px). */
.mud-badge.mm-badge-small {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: .62rem;
    line-height: 16px;
    inset: auto auto calc(100% - 10px) calc(100% - 10px) !important;
}

/* Prijava sa telefona (uzak ekran na dodir): poruka "koristite aplikaciju" umesto forme, dok se ne izabere "Ipak nastavi". */
.phone-gate { display: none; }
@media (max-width: 767px) and (pointer: coarse) {
    .phone-gate { display: block; }
    .phone-gate ~ .login-body { display: none; }
}
.phone-gate-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: rgba(132, 90, 223, .12); color: #845ADF; }
.phone-gate-icon .mud-icon-root { font-size: 34px; }
/* Poruka za telefon na prijavi je fiksna - stranica se ne skroluje gore-dole. */
@media (max-width: 767px) and (pointer: coarse) {
    html:has(.phone-gate), body:has(.phone-gate) { overflow: hidden; overscroll-behavior: none; height: 100%; }
}
/* I obicna forma za prijavu ("Ipak nastavi na desktop verziji") je fiksna na telefonu. */
@media (max-width: 767px) and (pointer: coarse) {
    html:has(.login-body), body:has(.login-body) { overflow: hidden; overscroll-behavior: none; height: 100%; }
}
/* Slanje slika (gost) na telefonu: dok nista nije izabrano, strana je fiksna (bez skrolovanja). */
@media (max-width: 767px) and (pointer: coarse) and (min-height: 600px) {
    html:has(.gu-idle), body:has(.gu-idle) { overflow: hidden; overscroll-behavior: none; height: 100%; }
}
/* Sve strane sa prijavom (prijava, zaboravljena lozinka, postavljanje lozinke, potvrda mejla) su fiksne na telefonu. */
@media (max-width: 767px) and (pointer: coarse) {
    html:has(.mymoment-auth-page), body:has(.mymoment-auth-page) { overflow: hidden; overscroll-behavior: none; height: 100%; }
}
/* Uputstvo za kameru u Chrome-u na iPhone-u (vidi GuestGalleryUpload). */
html.mm-ios-chrome .gu-cam-hint { display: flex; }

/* ---------- Web na telefonu (uzak ekran) - racunar se ne menja ---------- */
@media (max-width: 599px) {
    /* Dok se ne prepozna telefon, "mini" meni se ne prikazuje (posle postaje klizni meni preko stranice). */
    .mud-drawer.mud-drawer-mini { display: none; }
    .mud-layout .mud-main-content { margin-left: 0 !important; }
    .mud-layout .mud-appbar { left: 0 !important; width: 100% !important; margin-left: 0 !important; }
    .mud-appbar .mud-toolbar { padding-left: 8px; padding-right: 4px; gap: 0; }
    .mud-appbar .mud-icon-button { padding: 8px; }
    .mud-appbar .mm-cel-chip { max-width: 150px !important; }
    .mud-appbar .mm-pay-btn { min-width: 0; padding: 2px 10px; }
    /* Naslovi stranica i razmaci - zbijenije. */
    .mud-main-content .mud-typography-h4 { font-size: 1.65rem; line-height: 1.2; }
    .mud-main-content .mud-typography-h5 { font-size: 1.3rem; }
    .mud-main-content .mud-paper.pa-6 { padding: 16px !important; }
    .mud-main-content .mud-paper.pa-5 { padding: 14px !important; }
    .mud-appbar .mm-user-name { display: none !important; }
    /* Tabele: pretraga i filteri jedno ispod drugog umesto preklapanja. */
    .mud-table-toolbar { flex-wrap: wrap; height: auto !important; min-height: 56px; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
    .mud-table-toolbar .mud-input-control { max-width: none !important; flex: 1 1 100%; }
}

/* Tamni baner sa animiranim linijama (ParticlesCanvas): platno je iza sadrzaja. */
.mm-particles-host { position: relative; overflow: hidden; }
.mm-particles-host > *:not(canvas) { position: relative; z-index: 1; }

/* Prekid veze sa serverom (vidi App.razor): nas prozor na srpskom umesto Blazor-ovog. */
.mm-reconnect { display: none; position: fixed; inset: 0; z-index: 4000; align-items: center; justify-content: center; padding: 16px;
    background: rgba(24, 22, 34, .45); backdrop-filter: blur(3px); }
.mm-reconnect.components-reconnect-show, .mm-reconnect.components-reconnect-failed, .mm-reconnect.components-reconnect-rejected { display: flex; }
.mm-reconnect-card { width: 100%; max-width: 400px; padding: 28px 24px 24px; border-radius: 20px; text-align: center; background: #FFFFFF; color: #333335;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25); font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; }
.app-dark .mm-reconnect-card { background: #2A2C31; color: #DEE2E6; }
.mm-reconnect-logo { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.mm-reconnect-logo img { width: 40px; height: 40px; object-fit: contain; }
.mm-reconnect-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(132, 90, 223, .18); border-top-color: #845ADF;
    animation: app-preloader-spin .9s linear infinite; }
.components-reconnect-failed .mm-reconnect-ring { animation: none; border-color: rgba(245, 184, 73, .35); }
.mm-reconnect-card h3 { margin: 0 0 6px; font-family: 'Manrope', 'Inter', sans-serif; font-size: 20px; font-weight: 800; }
.mm-reconnect-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #8C9097; }
.app-dark .mm-reconnect-card p { color: #9AA0A6; }
.mm-reconnect-state { display: none; }
.components-reconnect-show .mm-reconnect-when-show,
.components-reconnect-failed .mm-reconnect-when-failed,
.components-reconnect-rejected .mm-reconnect-when-rejected { display: block; }
/* Povratak iz druge aplikacije (veza pala u pozadini): prvih par sekundi bez prozora, posle tekst "vracamo vas". */
html.mm-resume-quiet .mm-reconnect.components-reconnect-show { display: none; }
html.mm-resume .components-reconnect-show .mm-reconnect-when-show,
html.mm-resume .components-reconnect-failed .mm-reconnect-when-failed,
html.mm-resume .components-reconnect-rejected .mm-reconnect-when-rejected { display: none; }
html.mm-resume .components-reconnect-show .mm-reconnect-when-resume,
html.mm-resume .components-reconnect-failed .mm-reconnect-when-resume,
html.mm-resume .components-reconnect-rejected .mm-reconnect-when-resume { display: block; }
/* Loader umesto prozora: samo logo i krug koji se vrti (kao pri otvaranju aplikacije), bez kartice i teksta. */
html.mm-resume .mm-reconnect { background: rgba(240, 241, 247, .55); backdrop-filter: blur(2px); }
html.mm-resume.app-dark .mm-reconnect { background: rgba(32, 34, 38, .55); }
html.mm-resume .mm-reconnect-card { background: none !important; box-shadow: none; padding: 0; width: auto; }
html.mm-resume .mm-reconnect-logo { margin: 0; }
html.mm-resume .components-reconnect-failed .mm-reconnect-ring { animation: app-preloader-spin .9s linear infinite; border-color: rgba(132, 90, 223, .18); border-top-color: #845ADF; }
/* Dok se proverava da li je server pao - ne prikazuje se nista (traje delic sekunde). */
html.mm-probing .mm-reconnect.components-reconnect-show { display: none; }
/* Odbrojavanje do sledeceg pokusaja - samo kad Blazor upise broj. */
#components-seconds-to-next-attempt:empty, .mm-reconnect-next:has(#components-seconds-to-next-attempt:empty) { display: none; }
.mm-reconnect-btn { margin-top: 16px; border: 0; border-radius: 12px; padding: 11px 22px; background: #845ADF; color: #fff; font: inherit;
    font-weight: 700; font-size: 14px; cursor: pointer; }
.mm-reconnect-btn:hover { background: #7449D1; }