/* ═══════════════════════════════════════════════════════════════════════════════════════════
   miniISGS kućni stilovi
   Globalna pravila za cijelu aplikaciju, prenesena iz app-template i prilagođena miniISGS-u.
   Boje dolaze isključivo iz aktivne MudBlazor palete, bez fiksnih hex vrijednosti.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

html,
body {
    margin: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--mud-palette-primary);
}

.mud-table-root {
    border: 1px solid var(--mud-palette-table-lines);
}

.mud-table-root .mud-table-head {
    background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.mud-table-root .mud-table-row:nth-child(even) {
    background: var(--mud-palette-table-striped);
}

.mf-pregled-stranica {
    display: grid;
    gap: 10px;
}

.mf-pregled-zaglavlje {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 8px;
}

.mf-pregled-zaglavlje h1 {
    margin: 0;
}

.godisnji-header-copy h1 {
    margin: .1rem 0;
    font-size: 2rem;
    line-height: 1.2;
}

.godisnji-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.godisnji-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, .35fr) minmax(320px, 1fr);
    gap: 1rem;
}

.mf-filteri {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mf-pregled-akcije {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.mf-pregled-zaglavlje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.mf-pregled-zaglavlje .mud-typography {
    margin: 0;
}

.mf-pregled-identitet {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.mf-pregled-ikona {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
    opacity: .9;
}

.mf-pregled-opis {
    margin-top: .12rem !important;
    color: var(--mud-palette-text-secondary);
}

.mf-filter-regija {
    display: grid;
    grid-template-columns: 15rem minmax(18rem, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: .75rem;
    min-width: 0;
}

.mf-filter-fiksni {
    width: 15rem;
    min-width: 15rem;
}

.mf-filter-rastezljivi {
    width: 100%;
    min-width: 0;
}

.mf-jednoredne-akcije {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.mf-toolbar-naslov-statistika {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
}

.mf-filter-panel {
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.mf-filter-siroki {
    min-width: 260px;
}

.mf-pregled-kartica {
    overflow: hidden;
}

.mf-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.mf-status--aktivan {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.mf-status--neaktivan {
    background: color-mix(in srgb, var(--mud-palette-action-default) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

.mf-akcije-retka {
    width: 52px;
    text-align: right;
}

.mf-json-prikaz {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* App-template bridge for feature-rich screens that retain their proven Razor flow. */
:where(.nastavni-page, .sifarnik-page, .staff-page, .students-page, .ucenici-page, .djelatnici-page) {
    display: grid;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem;
}

:where(.nastavni-header, .sifarnik-header, .staff-header, .students-header, .ucenici-hero, .djelatnici-header) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}

:where(.nastavni-header, .sifarnik-header, .staff-header, .students-header, .ucenici-hero, .djelatnici-header) h1 {
    margin: .1rem 0;
    color: var(--mud-palette-text-primary) !important;
    font: inherit;
    font-size: 2rem;
    font-weight: 700;
}

:where(.nastavni-eyebrow, .sifarnik-eyebrow, .staff-eyebrow, .students-eyebrow, .ucenici-eyebrow, .djelatnici-eyebrow) {
    margin: 0;
    color: var(--mud-palette-primary) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

:where(.nastavni-badge, .sifarnik-badge, .staff-badge, .students-badge) {
    border: 1px solid var(--mud-palette-primary) !important;
    border-radius: 999px;
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
    padding: .35rem .7rem;
}

:where(.nastavni-tabs, .sifarnik-tabs, .ucenici-tabs) {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent !important;
}

:where(.nastavni-tabs, .sifarnik-tabs, .ucenici-tabs) button {
    min-height: 42px;
    padding: .55rem .9rem;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mud-palette-text-secondary) !important;
    font: inherit;
    font-weight: 600;
}

:where(.nastavni-tabs, .sifarnik-tabs, .ucenici-tabs) button.is-active {
    border-bottom-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

:where(.nastavni-card, .sifarnik-card, .staff-card, .students-card, .ucenici-card, .djelatnici-card) {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: none !important;
}

:where(.nastavni-card-header, .sifarnik-card-header, .staff-card-header, .students-card-header, .ucenici-card-header, .djelatnici-toolbar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    background: transparent !important;
}

:where(.nastavni-grid, .sifarnik-grid, .staff-grid, .students-grid, .ucenici-table, .nastavni-card table, .sifarnik-card table) {
    width: 100%;
    border-collapse: collapse;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

:where(.nastavni-grid, .sifarnik-grid, .staff-grid, .students-grid, .ucenici-table, .nastavni-card table, .sifarnik-card table) th {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-background-gray) !important;
    color: var(--mud-palette-text-secondary) !important;
    text-align: left;
    font-size: .76rem;
    font-weight: 700;
}

:where(.nastavni-grid, .sifarnik-grid, .staff-grid, .students-grid, .ucenici-table, .nastavni-card table, .sifarnik-card table) td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

:where(.nastavni-button, .sifarnik-button, .staff-button, .students-button) {
    min-height: 36px;
    padding: .45rem .85rem;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
    font: inherit;
    font-weight: 600;
}

:where(.nastavni-button, .sifarnik-button, .staff-button, .students-button).is-primary {
    border-color: var(--mud-palette-primary) !important;
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

:where(.nastavni-link, .sifarnik-link, .staff-link, .students-link) {
    border: 0 !important;
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
    font: inherit;
    font-weight: 600;
}

:where(.nastavni-alert, .sifarnik-alert, .staff-alert, .students-alert) {
    padding: .75rem 1rem;
    border: 1px solid var(--mud-palette-info) !important;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-info-hover) !important;
    color: var(--mud-palette-text-primary) !important;
}

:where(.nastavni-modal, .sifarnik-modal, .staff-modal, .students-modal, .ucenici-modal, .djelatnici-modal) {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: var(--mud-elevation-24) !important;
}

:where(.nastavni-modal, .sifarnik-modal, .staff-modal, .students-modal, .ucenici-modal, .djelatnici-modal) :where(input, select, textarea) {
    border-color: var(--mud-palette-lines-inputs) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

@media (max-width: 700px) {
    :where(.nastavni-page, .sifarnik-page, .staff-page, .students-page, .ucenici-page, .djelatnici-page) { padding: .75rem; }
    :where(.nastavni-header, .sifarnik-header, .staff-header, .students-header, .ucenici-hero, .djelatnici-header, .nastavni-card-header, .sifarnik-card-header, .staff-card-header, .students-card-header, .ucenici-card-header, .djelatnici-toolbar) { align-items: stretch; flex-direction: column; }
}

.ucenici-hero-icon { color: var(--mud-palette-primary) !important; }
.ucenici-table-wrap { width: 100%; overflow-x: auto; }
.ucenici-filter-panel .mud-input-control,
.djelatnici-filter-panel .mud-input-control { width: 100%; }
.ucenici-search-actions,
.djelatnici-search-actions { margin-bottom: -.35rem; }
.ucenici-actions,
.djelatnici-actions { width: 72px; text-align: center !important; }
.djelatnici-toolbar h2,
.ucenici-card-header h2 { margin: 0; font-size: 1.25rem; }
.djelatnici-toolbar p,
.ucenici-card-header p { margin: .25rem 0 0; color: var(--mud-palette-text-secondary); }
.djelatnici-toolbar { flex-wrap: wrap; }
.djelatnici-toolbar-spacer { flex: 1 1 auto; }
.djelatnici-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .75rem 1rem; }

.mf-gustoca-zbijeno .ucenici-table :where(th, td) {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.mf-gustoca-prostrano .ucenici-table :where(th, td) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mf-gustoca-zbijeno .sifarnik-grid :where(th, td) {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.mf-gustoca-prostrano .sifarnik-grid :where(th, td) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Jednaka profilna gustoća za sve ručno građene poslovne gridove. */
.mf-gustoca-zbijeno :is(.ucenici-table, .sifarnik-grid, .nastavni-grid) :where(th, td) {
    padding-top: 3px;
    padding-bottom: 3px;
}

.mf-gustoca-normalno :is(.ucenici-table, .sifarnik-grid, .nastavni-grid) :where(th, td) {
    padding-top: 6px;
    padding-bottom: 6px;
}

.mf-gustoca-prostrano :is(.ucenici-table, .sifarnik-grid, .nastavni-grid) :where(th, td) {
    padding-top: 11px;
    padding-bottom: 11px;
}

.sifarnik-actions {
    width: 72px;
    text-align: center !important;
}

@media (max-width: 700px) {
    .mf-pregled-zaglavlje {
        align-items: stretch;
        flex-direction: column;
    }

    .mf-filteri > * {
        width: 100%;
    }

    .mf-pregled-akcije > * {
        flex: 1 1 auto;
    }

    .mf-pregled-zaglavlje {
        align-items: flex-start;
    }

    .mf-filter-regija {
        grid-template-columns: 1fr;
    }

    .mf-filter-fiksni,
    .mf-filter-rastezljivi {
        width: 100%;
        min-width: 0;
    }

    .mf-jednoredne-akcije {
        justify-content: stretch;
    }

    .godisnji-filter-grid {
        grid-template-columns: 1fr;
    }

    .godisnji-stats {
        justify-content: flex-start;
    }
}

.mud-tabs-tabbar .mud-tab {
    min-width: 90px !important;
    padding: 6px 12px;
}

.mud-popover .mud-picker-paper,
.mud-picker-popover-paper {
    width: max-content !important;
    max-width: none !important;
}

.mud-popover .mud-picker-datepicker-toolbar,
.mud-popover .mud-picker-timepicker-toolbar {
    display: none !important;
}

.mud-popover .mud-picker-content,
.mud-popover .mud-picker-container {
    max-width: none !important;
}

.mud-table-toolbar {
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-dialog-title {
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mf-forma-modal {
    gap: 6px;
    overflow-x: hidden;
    padding-bottom: 12px;
}

.mf-akcije-forme {
    width: 156px;
    flex: 0 0 156px;
    align-self: stretch;
    border-radius: var(--mud-default-borderradius);
    padding: 8px 10px;
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.mf-akcije-prilijepi {
    position: sticky;
    top: 8px;
}

.mf-prazni-gumb {
    height: 32px;
    flex: 0 0 32px;
}

.mf-broj {
    text-align: right;
}

.mf-gustoca-zbijeno .mud-table-dense * .mud-table-row .mud-table-cell,
.mf-gustoca-zbijeno .mud-table-dense * tr th {
    padding-top: 2px;
    padding-bottom: 2px;
}

.mf-gustoca-prostrano .mud-table-dense * .mud-table-row .mud-table-cell,
.mf-gustoca-prostrano .mud-table-dense * tr th {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
}

.mf-redak-fokus > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-lines-inputs);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.isgs-icon {
    display: block;
    flex: none;
}

.mf-menu-icon {
    opacity: .78;
}

.mf-stat-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--mud-palette-primary);
    opacity: .42;
}

.mf-quick-icon {
    color: var(--mud-palette-primary);
}

.mf-attention-icon {
    color: var(--mud-palette-warning);
}

/* Globalni raspored zaglavlja: MudBlazor podkomponente ne smiju ostati izvan CSS isolation dosega. */
.mf-shell.is-login .mf-appbar,
.mf-shell.is-login .mf-topmenu {
    display: none !important;
}

.mf-topmenu .mud-nav-link,
.mf-topmenu .mud-nav-link-text,
.mf-topmenu .mud-icon-root {
    color: #f5f1eb !important;
}

.mf-topmenu .mud-nav-link:hover,
.mf-topmenu .mud-nav-link.active {
    color: #e2a45f !important;
}

/* NavLink renderira vlastiti anchor izvan Razor CSS isolation dosega. */
.mf-topmenu > a.mf-topmenu__home {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 56px;
    padding: 0 10px;
    color: #f5f1eb !important;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.mf-topmenu > a.mf-topmenu__home:hover,
.mf-topmenu > a.mf-topmenu__home.active {
    background: rgba(255, 255, 255, .08);
    color: #e2a45f !important;
}

.mf-topmenu__home .mud-icon-root {
    display: block;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .mf-topmenu > a.mf-topmenu__home {
        min-width: 34px;
        justify-content: center;
        padding: 0 5px;
    }

    .mf-topmenu__home span {
        display: none;
    }
}

/* Kontrastni hover menija: automatski se obrce prema aktivnoj temi. */
.mf-topmenu > a:hover,
.mf-topmenu > details > summary:hover,
.mf-topmenu > details[open] > summary {
    background: var(--mud-palette-appbar-text) !important;
    color: var(--mud-palette-appbar-background) !important;
}

.mf-topmenu > a:focus-visible,
.mf-topmenu > details > summary:focus-visible {
    background: var(--mud-palette-appbar-text) !important;
    color: var(--mud-palette-appbar-background) !important;
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: -2px;
}

.mf-topmenu__panel a:hover,
.mf-topmenu__panel a:focus-visible {
    background: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-surface) !important;
    outline: none;
}

/* Standard prvog akcijskog stupca u svim poslovnim pregledima. */
.mf-akcije-prva {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 4.75rem;
    text-align: center !important;
    white-space: nowrap;
}

.mf-akcije-prva .mud-icon-button {
    margin-inline: auto;
}