/* ais.eposlovanje.hr — globalni stilovi (uz MudBlazor temu) */

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar kao na certifikat.eposlovanje.hr */
::-webkit-scrollbar { width: 8px; height: 8px; z-index: 1; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 1px; }
::-webkit-scrollbar-thumb:hover { background: #a6a6a6; }
html, body * { scrollbar-color: #c4c4c4 transparent; scrollbar-width: thin; }

/* Footer (Metronic): svijetli, gornji border, prigušen tekst. */
.ais-footer {
    background: #FFFFFF;
    color: #71717A;
    border-top: 1px solid #E4E4E7;
    flex-shrink: 0;
}

/* Sticky footer: javni layout je flex-stupac visok bar cijeli viewport, sadržaj
   (mud-main-content) se rasteže (flex:1), pa footer sjedne na dno i kad je stranica
   kratka (npr. naslovnica). Fiksni appbar je izvan toka pa ne smeta. */
.ais-public-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Placeholderi / oznake polja: manji font i svjetlija (zinc-400) boja. */
::placeholder { font-size: 0.8125rem; color: #A1A1AA; opacity: 1; }
.mud-input-root input::placeholder,
.mud-input-root textarea::placeholder { font-size: 0.8125rem; color: #A1A1AA; opacity: 1; }
/* MudBlazor lebdeća oznaka (djeluje kao placeholder u outlined poljima). */
.mud-input-label { font-size: 0.8125rem; color: #A1A1AA; }
/* Obična SSR polja (AuthCard — prijava). */
.ais-form-row label { font-size: 0.8125rem; color: #A1A1AA; }
.ais-field::placeholder { font-size: 0.8125rem; color: #A1A1AA; opacity: 1; }

/* Živa lista zahtjeva lozinke (registracija): sivo dok nije ispunjeno, zeleno kad jest. */
.ais-pwreq { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 2px 2px; }
.ais-pwreq-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #71717A; }
.ais-pwreq-item .mud-icon-root { font-size: 1rem; color: #A1A1AA; }
.ais-pwreq-item.ok { color: #16A34A; }
.ais-pwreq-item.ok .mud-icon-root { color: #16A34A; }

/* Prekidač jezika — nativni <details> dropdown (radi na SSR i interaktivno, bez JS). */
.ais-lang { position: relative; display: inline-block; margin-right: 10px; }
.ais-lang > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    color: inherit;
    user-select: none;
}
.ais-lang > summary::-webkit-details-marker { display: none; }
.ais-lang > summary:hover { background: rgba(0, 0, 0, .05); }
.ais-lang[open] > summary { background: rgba(0, 0, 0, .05); }
.ais-lang-caret { transition: transform .15s ease; }
.ais-lang[open] .ais-lang-caret { transform: rotate(180deg); }
.ais-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(24, 24, 27, .12);
    padding: 5px;
    z-index: 1400;
}
.ais-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #3F3F46;
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}
.ais-lang-item:hover { background: #F4F4F5; }
.ais-lang-item.active { color: #2563EB; font-weight: 600; }
.ais-lang-check { margin-left: auto; color: #2563EB; }

/* ═══════════════ INTERNI GUI — Metronic 9.5 dizajn ═══════════════ */

/* Bijeli sidebar (Metronic): tamni tekst, hover svijetli zinc, aktivni link plavi
   soft-highlight (blue-50 podloga + blue-600 tekst), zaobljeni linkovi. */
.ais-app .mud-navmenu { padding: 12px 12px; }
.ais-app .mud-nav-link {
    color: #3F3F46 !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 0;
    padding-top: 9px;
    padding-bottom: 9px;
}
.ais-app .mud-nav-link:hover { background: #F4F4F5 !important; color: #18181B !important; }
.ais-app .mud-nav-link.active {
    background: #EFF6FF !important;   /* blue-50 */
    color: #2563EB !important;        /* blue-600 */
    font-weight: 600;
}
.ais-app .mud-nav-link .mud-icon-root { color: #A1A1AA !important; }        /* zinc-400 */
.ais-app .mud-nav-link:hover .mud-icon-root { color: #52525B !important; }
.ais-app .mud-nav-link.active .mud-icon-root { color: #2563EB !important; }
.ais-app .mud-nav-group .mud-nav-group-text,
.ais-app .mud-nav-group > .mud-nav-link {
    color: #71717A !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: .04em;
}

/* Kartice (Metronic): bijele, 1px zinc-200 border, radius 8, bez teške sjene. */
.ais-app .mud-main-content .mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-menu-paper):not(.mud-table) {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}
.ais-app .mud-main-content .mud-table {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

/* Tablice (Metronic): zaglavlje svijetlo zinc-50, muted uppercase labeli. */
.ais-app .mud-table thead th,
.ais-app .mud-simple-table thead th {
    background: #FAFAFA;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ais-app .mud-table tbody td,
.ais-app .mud-simple-table tbody td { font-size: 0.875rem; }

/* Mono brojke i iznosi. */
.ais-app .ais-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.ais-app .ais-money { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 600; white-space: nowrap; }

/* kai-badge — soft status badge formula iz Katice (StatusBadge.razor + app.css). */
.kai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600;
             padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.kai-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.kai-badge-ok      { background: #ECFDF5; color: #059669; }
.kai-badge-warn    { background: #FFFBEB; color: #D97706; }
.kai-badge-err     { background: #FEF2F2; color: #DC2626; }
.kai-badge-info    { background: #EFF6FF; color: #2563EB; }
.kai-badge-sent    { background: #EDE9FE; color: #5B21B6; }
.kai-badge-default { background: #F1F5F9; color: #64748B; }

/* Gumbi: eracun mikro-tipografija. */
.ais-app .mud-button-root { text-transform: none; }

/* Odjava forma u bijelom draweru. */
.ais-app .mud-drawer form button,
.ais-app .mud-drawer form a { color: #71717A; }
.ais-app .mud-drawer form button:hover { color: #DC2626; }

/* Blazor error UI */
#blazor-error-ui {
    background: #C62828;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* MudTabs: PanelClass NIJE parametar MudTabs-a (MUD0002) — postavljen atribut se tiho
   gubi i sadržaj taba ostaje zalijepljen za traku s tabovima. Padding zato ide CSS-om,
   preko klase koju MudTabs stvarno prihvaća (Class). */
.ais-tabs .mud-tabs-panels { padding: 20px; }
@media (max-width: 600px) {
    .ais-tabs .mud-tabs-panels { padding: 14px; }
}

/* ── Traka filtera (obrazac iz eRačun modula) ──────────────────────────────────
   Svaki filter je kompaktan gumb u dva reda: naziv malom verzalom + trenutna
   vrijednost. Tako desetak filtera stane u jedan red umjesto da traka naraste u
   zid input polja. Klik otvara panel s kontrolom (MudMenu popover). */
.ais-filter-traka {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ais-chip {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 86px;
    padding: 6px 12px;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
    user-select: none;
    line-height: 1.15;
    transition: border-color .12s ease, background-color .12s ease;
}
.ais-chip:hover { background: #FAFAFA; border-color: #D4D4D8; }
.ais-chip:focus-visible { outline: 2px solid #3B82F6; outline-offset: 1px; }

.ais-chip__labela {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #A1A1AA;                    /* zinc-400 */
    white-space: nowrap;
}
.ais-chip__ikona { font-size: .875rem !important; }

.ais-chip__vrijednost {
    font-size: .8125rem;
    font-weight: 600;
    color: #3F3F46;                    /* zinc-700 */
    white-space: nowrap;
}

/* Aktivan = vrijednost različita od zadane. Plavo, jer je to akcentna boja teme
   (eRačun koristi narančastu; oblik je isti, boja prati ovu aplikaciju). */
.ais-chip--aktivan {
    border-color: #3B82F6;
    background: #EFF6FF;               /* blue-50 */
}
.ais-chip--aktivan .ais-chip__labela { color: #2563EB; }
.ais-chip--aktivan .ais-chip__vrijednost { color: #1D4ED8; }

/* <details> omotač: panel se pozicionira u odnosu na njega. */
.ais-chip-wrap { position: relative; }

/* Trokutić koji <details> crta po defaultu ne treba nam — gumb je sam po sebi jasan. */
.ais-chip-wrap > summary { list-style: none; }
.ais-chip-wrap > summary::-webkit-details-marker { display: none; }
.ais-chip-wrap > summary::marker { content: ""; }

/* Panel koji se otvara klikom na filter. Apsolutno pozicioniran da ne razmiče
   tablicu ispod sebe; z-index iznad MudTable zaglavlja. */
.ais-chip-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    padding: 12px 14px;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

/* Bez ovoga bi panel bio odrezan rubom panela tabova. */
.ais-tabs .mud-tabs-panels,
.ais-tabs .mud-tab-panel { overflow: visible; }

/* Polje za pretragu u istoj traci — zaobljeno, s lupom, visine kao chipovi. */
.ais-filter-pretraga { min-width: 240px; max-width: 320px; }
.ais-filter-pretraga .mud-input-root {
    border-radius: 8px;
    background: #FFFFFF;
    font-size: .8125rem;
}

/* Gumb "Prijava" u gornjoj traci nosi ikonu, pa je na uskom zaslonu bio preširok i
   lomio se u dva retka ("Sign / in"). Tekst ostaje u jednom retku; ispod 400 px se
   krati razmak, jer uz logotip i prekidač jezika mjesta ondje gotovo i nema. */
.mud-appbar .mud-button-root { white-space: nowrap; }

@media (max-width: 400px) {
    .mud-appbar .mud-button-filled-primary { padding-left: 10px; padding-right: 10px; }
    .mud-appbar .mud-button-filled-primary .mud-button-icon-start { margin-right: 4px; }
}

/* ── Logotip banke sa zastavom (BankLogo.razor) ────────────────────────────────
   Zastava je overlay u donjem desnom kutu; bijeli obrub je odvaja od logotipa
   (mnogi su logotipi tamni ili šareni do samog ruba). */
.ais-bank-logo {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}
.ais-bank-logo__slika {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: contain;
    display: block;
}
.ais-bank-logo__inicijal {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E4E4E7;
    color: #3F3F46;
    font-weight: 700;
}
.ais-bank-logo__zastava {
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 45%;
    min-width: 16px;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    box-shadow: 0 0 0 1.5px #FFFFFF, 0 1px 3px rgba(0, 0, 0, .25);
    object-fit: cover;
}

/* ── Odabir države u wizardu rekvizicije (panel FilterChipa) ─────────────────── */
.ais-drzave {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    min-width: 230px;
    overflow-y: auto;
    margin: -4px -6px;
}
.ais-drzava {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: .8125rem;
    color: #3F3F46;
    text-align: left;
    cursor: pointer;
}
.ais-drzava:hover { background: #F4F4F5; }
.ais-drzava--odabrana { background: #EFF6FF; color: #1D4ED8; font-weight: 600; }
.ais-drzava__zastava {
    width: 20px;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    object-fit: cover;
    flex: 0 0 auto;
}
.ais-drzava__broj { margin-left: auto; padding-left: 12px; color: #A1A1AA; font-weight: 400; }

/* Široka varijanta chipa (FilterChip Sirok="true") — samo ŠIRINA; visina i slova ostaju
   kao kod ostalih chipova, da gumb stoji u ravnini s dense poljem pretrage. */
.ais-chip-wrap--sirok .ais-chip { min-width: 200px; }
.ais-chip-wrap--sirok .ais-chip-panel { min-width: 260px; }

/* Polje pretrage iznad popisa država — izvan kliznog dijela, pa ostaje vidljivo pri skrolanju. */
.ais-drzave-pretraga {
    display: block;
    width: calc(100% + 4px);
    margin: -2px -2px 10px;
    padding: 7px 10px;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    background: #FFFFFF;
    font: inherit;
    font-size: .8125rem;
    color: #3F3F46;
    outline: none;
}
.ais-drzave-pretraga:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.ais-drzave-prazno { padding: 7px 8px; font-size: .8125rem; color: #A1A1AA; }

/* Blazorov FocusOnNavigate nakon svake navigacije fokusira <h1> (radi čitača zaslona).
   Fokus ostaje, ali bez vidljivog obruba — naslov nije interaktivan element. */
h1:focus { outline: none; }

/* Pravni dokumenti (/uvjeti, /privatnost): jedna bijela kartica uže širine za čitanje,
   ista podloga, radijus i sjena kao kartice s opisom usluge na naslovnici. */
.ais-pravni {
    max-width: 860px;
    margin: 0 auto;
    padding: 36px 44px;
    background: #FFFFFF;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-2);
    color: #3F3F46;
    font-size: .9375rem;
    line-height: 1.7;
}
.ais-pravni h1 { margin: 0 0 6px; font-size: 1.75rem; font-weight: 700; color: #18181B; line-height: 1.25; }
.ais-pravni h2 { margin: 32px 0 10px; font-size: 1.2rem; font-weight: 700; color: #18181B; line-height: 1.35; }
.ais-pravni h3 { margin: 18px 0 6px; font-size: 1rem; font-weight: 600; color: #18181B; }
.ais-pravni p { margin: 0 0 10px; }
.ais-pravni ul, .ais-pravni ol { margin: 0 0 12px; padding-left: 22px; }
.ais-pravni li + li { margin-top: 5px; }
.ais-pravni a { color: #3B82F6; text-decoration: none; }
.ais-pravni a:hover { text-decoration: underline; }
.ais-pravni__meta { color: #71717A; font-size: .875rem; }
.ais-pravni__istaknuto { padding: 14px 18px; margin: 0 0 14px; background: #FAFAFA; border-left: 3px solid #E4E4E7; }
.ais-pravni__istaknuto p:last-child { margin-bottom: 0; }
.ais-pravni table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: .875rem; }
.ais-pravni th, .ais-pravni td { padding: 8px 10px; border: 1px solid #E4E4E7; text-align: left; vertical-align: top; }
.ais-pravni th { background: #FAFAFA; font-weight: 600; color: #18181B; }
.ais-pravni__tablica { overflow-x: auto; }

@media (max-width: 760px) {
    .ais-pravni { padding: 24px 20px; }
}

/* Kućica "Prihvaćam Uvjete…" na registraciji i onboardingu. */
.ais-uvjeti-prihvat { font-size: .875rem; color: #3F3F46; line-height: 1.5; }
.ais-uvjeti-prihvat a { color: #3B82F6; text-decoration: none; }
.ais-uvjeti-prihvat a:hover { text-decoration: underline; }
.ais-form-row label.ais-uvjeti-prihvat--ssr { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; color: #3F3F46; cursor: pointer; }
.ais-uvjeti-prihvat--ssr input { margin-top: 3px; }

/* Boje naslovnice na JAVNIM stranicama (prijava, registracija, potvrda e-maila, /banks,
   /uvjeti, /privatnost, /ais/return): crvena s certifikat.eposlovanje.hr umjesto Metronic
   plave. Mijenja se MudBlazorova paleta SAMO unutar označenog elementa — gumbi, poveznice
   i fokus polja je čitaju iz ovih varijabli, pa ne treba pravilo po komponenti.
   Klijentski dio (iza prijave) i administracija ostaju plavi. */
.ais-boje-naslovnice {
    --mud-palette-primary: #E2372D;
    --mud-palette-primary-rgb: 226, 55, 45;
    --mud-palette-primary-darken: #C42A21;
    --mud-palette-primary-lighten: #E85A51;
    --mud-palette-primary-hover: rgba(226, 55, 45, .07);
}
/* Kućice OSTAJU u izvornoj plavoj iz teme (AisTheme.Primary): crveni obrub neoznačene kućice
   čita se kao greška validacije, a ne kao boja marke. Varijabla se vraća na samoj kućici jer se
   naslijeđena vrijednost ne može "preskočiti". */
.ais-boje-naslovnice .mud-checkbox {
    --mud-palette-primary: #3B82F6;
    --mud-palette-primary-rgb: 59, 130, 246;
    --mud-palette-primary-darken: #2563EB;
    --mud-palette-primary-lighten: #60A5FA;
    --mud-palette-primary-hover: rgba(59, 130, 246, .06);
}
.ais-boje-naslovnice .mud-button-filled-primary { box-shadow: none; }
.ais-boje-naslovnice a:not(.mud-button-root) { color: #E2372D; }
.ais-boje-naslovnice .ais-field:focus,
.ais-boje-naslovnice .ais-drzave-pretraga:focus { border-color: #E2372D; box-shadow: 0 0 0 3px rgba(226, 55, 45, .2); }
/* Filtar država u katalogu banaka (dijeli ga i klijentski dio, gdje ostaje plav). */
.ais-boje-naslovnice .ais-chip:focus-visible { outline-color: #E2372D; }
.ais-boje-naslovnice .ais-chip--aktivan { border-color: #E2372D; background: #FEF2F2; }
.ais-boje-naslovnice .ais-chip--aktivan .ais-chip__labela { color: #C42A21; }
.ais-boje-naslovnice .ais-drzava--odabrana { background: #FEF2F2; color: #C42A21; }

/* ── Admin: red filtara ───────────────────────────────────────────────────────
   Polja stoje lijevo, svako svoje širine. Style="max-width" na MudTextField/MudSelect/
   MudDatePicker ne drži: stil završi na unutarnjem elementu, a omotač (.mud-input-control,
   .mud-picker, .mud-select) kao flex stavka naraste na cijelu širinu. Zato širina ide na
   omotač kroz klasu. */
.ais-filtri { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
.ais-filtri > * { flex: 0 0 auto; }
.ais-filtri .ais-filtar-140 { width: 140px !important; min-width: 0; }
.ais-filtri .ais-filtar-170 { width: 170px !important; min-width: 0; }
.ais-filtri .ais-filtar-220 { width: 220px !important; min-width: 0; }
.ais-filtri .ais-filtar-240 { width: 240px !important; min-width: 0; }
.ais-filtri .ais-filtar-260 { width: 260px !important; min-width: 0; }
.ais-filtri .ais-filtar-300 { width: 300px !important; min-width: 0; }
.ais-filtri .ais-filtar-340 { width: 340px !important; min-width: 0; }
/* Sporedni podatak ispod glavnog u ćeliji tablice (npr. e-mail ispod naziva tvrtke). */
.ais-sporedno { color: #71717A; font-size: .75rem; }