h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    font-size: 12px !important;
    font-weight: bold !important;
}

.e-grid .e-headercelldiv {
    font-size: 12px !important;
    font-weight: bold !important;
}

.e-grid .e-rowcell, .e-grid .e-headercell {
    word-break: break-word !important;
    white-space: normal !important;
}

/* Manja slova u svim Syncfusion gridovima */
.e-grid .e-rowcell,
.e-grid .e-headercell .e-headertext,
.e-grid .e-groupcaption,
.e-grid .e-summarycell,
.e-grid .e-filterbarcell input,
.e-grid .e-pager,
.e-grid .e-toolbar .e-tbar-btn-text {
    font-size: 12px;
}

/* Niži redovi */
.e-grid .e-rowcell {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Oznake u gridu (status plaćanja, odobren, odbijen...): 11 px da ne budu veće od teksta reda */
.e-grid .e-rowcell .rounded-full {
    font-size: 11px;
    line-height: 18px;
}

.e-grid .e-rowcell .rounded-full .mdi {
    font-size: 12px;
}

/* Tamna tema: označeni red i hover u gridovima. Syncfusion tailwind-dark daje svijetlu pozadinu označenom
   redu (i pod mišem), a slova ostaju svijetla pa se ništa ne vidi. Ovdje su tamne boje u skladu s temom. */
html.dark .e-grid .e-row:hover .e-rowcell:not(.e-active):not(.e-selectionbackground):not(.e-indentcell),
html.dark .e-grid .e-rowcell.e-hover:not(.e-active):not(.e-selectionbackground) {
    background-color: #1f2937 !important;     /* gray-800 */
    color: #f3f4f6 !important;                /* gray-100 */
}

html.dark .e-grid .e-rowcell.e-active,
html.dark .e-grid .e-rowcell.e-selectionbackground,
html.dark .e-grid .e-detailrowcollapse.e-active,
html.dark .e-grid .e-detailrowexpand.e-active {
    background-color: #312e81 !important;     /* indigo-900 */
    color: #f9fafb !important;
}

html.dark .e-grid .e-row:hover .e-rowcell.e-active,
html.dark .e-grid .e-row:hover .e-rowcell.e-selectionbackground {
    background-color: #3730a3 !important;     /* indigo-800 */
    color: #ffffff !important;
}

@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}
/* Stavke ulaznog računa preko cijelog ekrana (UlazniRacunDetalji.razor): Syncfusion dijalog se iscrtava
   izvan stranice, pa pravila moraju biti globalna. Sadržaj zauzme cijelu visinu, a scrolla se samo grid. */
.stavke-cijeli-ekran.e-dialog {
    max-height: 96vh !important;
}

.stavke-cijeli-ekran .e-dlg-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Padajući izbornici (DropDownList, MultiSelect, ComboBox): dugi tekst se lomi u više redova umjesto da se
   odsiječe; popup je najmanje širok kao kontrola (Syncfusion), a red raste koliko treba. */
.e-dropdownbase .e-list-item,
.e-popup .e-dropdownbase .e-list-item {
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 32px;
    line-height: 1.35 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Syncfusion uvlači tekst stavke s text-indent, a on vrijedi samo za prvi red: slomljeni redovi bi išli do ruba.
   Uvlaka je zato padding (vrijedi za sve redove). MultiSelect s kvačicama ima svoj razmak pa se ne dira. */
.e-popup:not(.e-checkbox) .e-dropdownbase .e-list-item {
    text-indent: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Ugniježđeni grid (DetailTemplate): ista veličina slova i visina redova kao glavni grid.
   Syncfusion ćeliji s detaljima daje veća slova pa ih unutarnji grid nasljeđuje. */
.e-grid .e-detailcell,
.e-grid .e-detailcell .e-grid .e-rowcell,
.e-grid .e-detailcell .e-grid .e-headercell,
.e-grid .e-detailcell .e-grid .e-headercelldiv,
.e-grid .e-detailcell .e-grid .e-headertext {
    font-size: 12px !important;
}

.e-grid .e-detailcell .e-grid .e-rowcell {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Tanki scrollbarovi u cijeloj aplikaciji (gridovi, kartice, popupi, stranica); scroll radi kao i prije.
   Standardna svojstva (Chrome 121+, Edge, Firefox); ::-webkit-scrollbar za starije Chrome/Safari. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175 / 0.6) transparent;          /* gray-400 */
}

html.dark * {
    scrollbar-color: rgb(75 85 99 / 0.8) transparent;             /* gray-600 */
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175 / 0.6);
    border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128 / 0.8);                    /* gray-500 */
}

html.dark *::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99 / 0.8);
}

/* Po želji potpuno skriven scrollbar (scroll i dalje radi): dodati klasu bez-scrollbara na element */
.bez-scrollbara {
    scrollbar-width: none;
}

.bez-scrollbara::-webkit-scrollbar {
    display: none;
}

/* Poravnanje zaglavlja i redova grida uz vertikalni scrollbar. Syncfusion zaglavlju dodaje razmak desno
   (padding-right) koji izračuna jednom, za širinu svog scrollbara, a ne našeg tankog; kod nekih gridova
   redovi se zato pomaknu ulijevo u odnosu na zaglavlje. Umjesto toga i redovi i zaglavlje uvijek drže isti
   prostor za scrollbar (scrollbar-gutter), pa su stupci poravnati imao grid scrollbar ili ne. */
.e-grid .e-gridcontent > .e-content {
    scrollbar-gutter: stable;
}

.e-grid .e-gridheader {
    padding-right: 0 !important;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}


/* Okvir grida koji ispunjava ostatak stranice (kao ulazni dokumenti): Syncfusion Height="100%" vrijedi samo za redove,
   pa zaglavlje, toolbar i pager inače izlaze ispod ruba. Grid je apsolutno unutar okvira (div.absolute.inset-0);
   selektori idu samo na glavni grid, ne na ugniježđene gridove u reci. */
.grid-okvir > .absolute > .e-grid {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}
.grid-okvir > .absolute > .e-grid > .e-toolbar,
.grid-okvir > .absolute > .e-grid > .e-gridheader,
.grid-okvir > .absolute > .e-grid > .e-gridpager {
    flex: 0 0 auto;
}
.grid-okvir > .absolute > .e-grid > .e-gridcontent {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.grid-okvir > .absolute > .e-grid > .e-gridcontent > .e-content {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow-y: auto;
}