/* Globalna pretraga prati izabranu temu kroz njene zajedničke varijable boja.
   Ovaj završni sloj se učitava poslije svih tema da starija Graphite pravila ne
   bi nametala svoje boje novim temama. */
html:root[data-theme] body .topbar .bm-global-search {
    position: relative;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: clamp(12rem, 20vw, 22rem) !important;
    height: 2rem !important;
    margin: 0;
    white-space: nowrap;
    border: 1px solid var(--bm-search-border, var(--bm-border, rgba(127, 127, 127, 0.2))) !important;
    border-color: var(--bm-search-border, var(--bm-border, rgba(127, 127, 127, 0.2))) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    background: var(--bm-search-bg, var(--bm-surface, transparent)) !important;
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    box-shadow: none !important;
    overflow: hidden;
}

html:root[data-theme] body .topbar .bm-global-search:focus-within {
    border: 1px solid var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    border-color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    background: var(--bm-search-bg, var(--bm-surface, transparent)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-search-icon-active, var(--bm-accent, currentColor)) 16%, transparent) !important;
}

html:root[data-theme] body .topbar .bm-global-search .bm-global-search__icon,
html:root[data-theme] body .topbar .bm-global-search .bm-global-search__clear {
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
}

html:root[data-theme] body .topbar .bm-global-search .bm-global-search__icon {
    display: block !important;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: 0.65rem;
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:root[data-theme] body .topbar .bm-global-search:focus-within .bm-global-search__icon {
    color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
}

html:root[data-theme] body .topbar .bm-global-search .bm-global-search__input,
html:root[data-theme] body .topbar .bm-global-search .bm-global-search__input:focus {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    padding: 0 0.35rem 0 0.55rem;
    border: 0 !important;
    color: var(--bm-text-primary, var(--bm-text, currentColor)) !important;
    -webkit-text-fill-color: var(--bm-text-primary, var(--bm-text, currentColor)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 0.78rem;
}

/* Placeholder je namjerno sitniji i kurzivan da ostane pomoćni tekst, uz
   dovoljno proreda da se jasno odvaja od ikonice i ivice polja. */
html:root[data-theme] body #app-shell .topbar .bm-global-search .bm-global-search__input::placeholder {
    color: var(--bm-text-placeholder, var(--bm-text-muted, currentColor)) !important;
    -webkit-text-fill-color: var(--bm-text-placeholder, var(--bm-text-muted, currentColor)) !important;
    font-family: inherit !important;
    font-size: 0.76rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    opacity: 1;
}

/* Placeholder svih tema koristi istu prigušenu sivu kao Graphite, kako pomoćni
   tekst ne bi bio jači od stvarnog upita. */
html:root[data-theme] body #app-shell .topbar .bm-global-search .bm-global-search__input::placeholder {
    color: #8b93a1 !important;
    -webkit-text-fill-color: #8b93a1 !important;
}

html:root[data-theme].dark-theme body #app-shell .topbar .bm-global-search .bm-global-search__input::placeholder {
    color: #626771 !important;
    -webkit-text-fill-color: #626771 !important;
}

/* Pretrage unutar stranica koriste isti kurzivni pomoćni tekst kao Graphite.
   Selektor obuhvata i standardne bm-search-input i WireGuard wg-search kontrole. */
html:root[data-theme] body #app-shell :is(input.bm-search-placeholder, input.bm-search-input, input.wg-search)::placeholder {
    color: #8b93a1 !important;
    -webkit-text-fill-color: #8b93a1 !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
}

html:root[data-theme].dark-theme body #app-shell :is(input.bm-search-placeholder, input.bm-search-input, input.wg-search)::placeholder {
    color: #626771 !important;
    -webkit-text-fill-color: #626771 !important;
}

/* Na novim temama Graphite pravilo za izbor svijetlog/tamnog logotipa nije
   učitano, pa zajednički sloj mora osigurati da je uvijek vidljiv samo jedan. */
html:root[data-theme] body #app-shell .bm-analytics-brand-image--dark {
    display: none !important;
}

html:root[data-theme].dark-theme body #app-shell .bm-analytics-brand-image--light {
    display: none !important;
}

html:root[data-theme].dark-theme body #app-shell .bm-analytics-brand-image--dark {
    display: block !important;
}

/* Kursor ostaje vidljiv i kada polje još prikazuje placeholder. Graphite je
   ranije namjerno skrivao caret za :placeholder-shown stanje, pa ga ovdje
   vraćamo samo dok je pretraga stvarno fokusirana. */
html:root[data-theme] body #app-shell .topbar .bm-global-search:focus-within .bm-global-search__input,
html:root[data-theme] body #app-shell .topbar .bm-global-search:focus-within .bm-global-search__input:focus {
    caret-color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
}

html:root[data-theme] body .topbar .bm-global-search .bm-global-search__clear {
    display: grid;
    place-items: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent !important;
    font-size: 1rem;
}

html:root[data-theme] body .topbar .bm-global-search .bm-global-search__clear:hover,
html:root[data-theme] body .topbar .bm-global-search .bm-global-search__clear:focus-visible {
    color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    background: var(--bm-row-hover, transparent) !important;
    outline: 0;
}

/* Ikona pretrage na stranici Serveri koristi vektorsku masku umjesto
   pozadinske slike, pa ostaje oštra u svim temama i pri svakom skaliranju. */
html:root[data-theme] body .content .bm-server-search .bm-server-search__icon {
    width: 1rem !important;
    height: 1rem !important;
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
    -webkit-mask: none !important;
    mask: none !important;
}

html:root[data-theme] body .content .bm-server-search .bm-server-search__icon svg,
html:root[data-theme] body .content .bm-server-search .bm-server-search__icon svg circle,
html:root[data-theme] body .content .bm-server-search .bm-server-search__icon svg path {
    display: block;
    width: 100%;
    height: 100%;
    fill: none !important;
    stroke: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    stroke-width: 2.1 !important;
    vector-effect: non-scaling-stroke;
    filter: none !important;
    opacity: 1 !important;
}

html:root[data-theme] body .content .bm-server-search:focus-within .bm-server-search__icon {
    color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
}

html:root[data-theme] body .content .bm-server-search:focus-within .bm-server-search__icon svg,
html:root[data-theme] body .content .bm-server-search:focus-within .bm-server-search__icon svg circle,
html:root[data-theme] body .content .bm-server-search:focus-within .bm-server-search__icon svg path {
    stroke: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
}

/* Tamni osnovni stil je na input primjenjivao backdrop blur. Pošto input
   prekriva prostor ispred ikonice, taj blur je zamutio ikonu Serveri pretrage. */
html:root[data-theme] body .content .bm-server-search input.bm-search-input,
html:root[data-theme] body .content .bm-server-search input.bm-search-input:focus {
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Unutrašnji input ne smije dobiti zaseban Bootstrap fokusni okvir. Fokus
   ostaje na spoljašnjem search boxu, kao u Graphite temi. */
html:root[data-theme] body #app-shell :is(
    .bm-searchbar > input.bm-search-input,
    .bm-searchbar > input.bm-search-placeholder,
    .bm-server-search > input.bm-search-input,
    .chat-search > input.bm-search-placeholder,
    input.bm-search-input.wg-search,
    input.wg-search
),
html:root[data-theme] body #app-shell :is(
    .bm-searchbar > input.bm-search-input:focus,
    .bm-searchbar > input.bm-search-placeholder:focus,
    .bm-server-search > input.bm-search-input:focus,
    .chat-search > input.bm-search-placeholder:focus,
    input.bm-search-input.wg-search:focus,
    input.wg-search:focus
) {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Isti prijelomi i skupljanje polja kao u Graphite temi. */
@media (max-width: 1100px) {
    html:root[data-theme] body .topbar .bm-global-search {
        width: min(18rem, 26vw) !important;
    }
}

@media (max-width: 850px) {
    html:root[data-theme] body .topbar .bm-global-search {
        width: 2rem !important;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html:root[data-theme] body .topbar .bm-global-search:focus-within {
        position: absolute;
        right: 0.5rem;
        z-index: 30;
        width: min(22rem, calc(100vw - 1rem)) !important;
        border-color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
        background: var(--bm-search-bg, var(--bm-surface, transparent)) !important;
    }

    html:root[data-theme] body .topbar .bm-global-search:not(:focus-within) .bm-global-search__input,
    html:root[data-theme] body .topbar .bm-global-search:not(:focus-within) .bm-global-search__clear {
        width: 0;
        flex-basis: 0;
        padding: 0;
        overflow: hidden;
    }

    html:root[data-theme] body .topbar .bm-global-search .bm-global-search__input {
        padding: 0;
    }
}

/* FTP lista na stranici Podešavanje mora koristiti paletu aktivne nove teme.
   Ova pravila su u završnom sloju zato što stariji Graphite stilovi dolaze
   poslije CSS-a izolovanog Razor komponentom i inače prepišu redove liste. */
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card--ftp {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-table {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-table thead th {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-table tbody td {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border-subtle) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-table tbody tr:hover td {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-actions .bm-btn-edit {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-actions .bm-btn-edit:hover:not(:disabled) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-ftp-empty {
    color: var(--bm-text-muted) !important;
}

/* Isti završni tematski sloj važi i za gornje tabove, dugme Logovi i prve
   tri konfiguracione kartice, jer se svi nalaze u istom dokumentu. */
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: var(--bm-shadow-soft, none) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) :is(.bm-cfg-card__header, .bm-cfg-card__footer) {
    background: transparent !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) .bm-cfg-card__icon {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) .bm-cfg-card__title {
    color: var(--bm-text-primary) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) .bm-cfg-row {
    border-color: var(--bm-border-subtle) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) :is(.bm-cfg-label, .bm-cfg-form label) {
    color: var(--bm-text-secondary) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) .bm-cfg-value {
    color: var(--bm-text-primary) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) :is(.bm-btn-edit, .bm-btn-add, .bm-btn-test) {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-cfg-card:not(.bm-cfg-card--table-columns) :is(.bm-btn-edit, .bm-btn-add, .bm-btn-test):hover:not(:disabled) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-config-tabs {
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-config-tab {
    color: var(--bm-text-secondary) !important;
    background: transparent !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-config-tab:hover {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-config-tab.is-active,
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-config-tab.is-active:hover {
    color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-accent)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-btn-log {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-config-page .bm-btn-log:hover:not(:disabled) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

/* Komande koriste ista tematska pravila kao ostale stranice. Stari Graphite
   selektori za ovu komponentu su veoma specifični, zato su završni selektori
   ovdje učitani poslije svih tema i koriste !important samo za tematske boje. */
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-command-list-card, .bm-command-editor-card, .bm-command-doc-table) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-cfg-card__header, .bm-cfg-card__footer, .bm-command-doc-table__head) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-cfg-card__title, .bm-command-list__item strong) {
    color: var(--bm-text-primary) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(label, .bm-command-list__item small) {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-list__item {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-list__item:hover {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-list__item.is-active {
    color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-surface-hover)) !important;
    border-color: var(--bm-accent) !important;
    box-shadow: inset 3px 0 0 var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-list__state.is-on {
    color: var(--bm-accent-2, var(--bm-accent)) !important;
    background: color-mix(in srgb, var(--bm-accent-2, var(--bm-accent)) 14%, var(--bm-surface) 86%) !important;
    border-color: color-mix(in srgb, var(--bm-accent-2, var(--bm-accent)) 34%, var(--bm-border) 66%) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-list__state.is-off {
    color: var(--bm-text-muted) !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-input, .bm-command-select, .bm-command-select option) {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-input, .bm-command-select):focus {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-accent) 18%, transparent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-doc-table__row {
    color: var(--bm-text-primary) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-doc-table__row:hover {
    background: var(--bm-surface-hover) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config input[type="checkbox"] {
    accent-color: var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button:hover:not(:disabled) {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button--add,
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button--save {
    color: var(--bm-accent) !important;
    background: color-mix(in srgb, var(--bm-accent) 13%, var(--bm-surface) 87%) !important;
    border-color: color-mix(in srgb, var(--bm-accent) 38%, var(--bm-border) 62%) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config :is(.bm-command-button--add, .bm-command-button--save):hover:not(:disabled) {
    color: var(--bm-accent) !important;
    background: color-mix(in srgb, var(--bm-accent) 21%, var(--bm-surface) 79%) !important;
    border-color: var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button--delete {
    color: #ef4444 !important;
    background: color-mix(in srgb, #ef4444 12%, var(--bm-surface) 88%) !important;
    border-color: color-mix(in srgb, #ef4444 36%, var(--bm-border) 64%) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-command-config .bm-command-button--delete:hover:not(:disabled) {
    color: #ef4444 !important;
    background: color-mix(in srgb, #ef4444 19%, var(--bm-surface) 81%) !important;
    border-color: #ef4444 !important;
}

/* HoteliTable koristi starije izolovane kontrole pretrage i filtera. Ovaj
   završni sloj ih veže za varijable izabrane teme, uključujući i samu tabelu. */
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-searchbar {
    color: var(--bm-search-icon, var(--bm-text-secondary)) !important;
    background: var(--bm-search-bg, var(--bm-surface)) !important;
    border-color: var(--bm-search-border, var(--bm-border)) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-searchbar:focus-within {
    background: var(--bm-search-bg, var(--bm-surface)) !important;
    border-color: var(--bm-search-icon-active, var(--bm-accent)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-search-icon-active, var(--bm-accent)) 16%, transparent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-search-icon {
    color: var(--bm-search-icon, var(--bm-text-secondary)) !important;
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-searchbar:focus-within .bm-search-icon {
    color: var(--bm-search-icon-active, var(--bm-accent)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-search-input,
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-search-input:focus {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: var(--bm-text-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-search-input::placeholder {
    color: var(--bm-text-placeholder, var(--bm-text-muted)) !important;
    -webkit-text-fill-color: var(--bm-text-placeholder, var(--bm-text-muted)) !important;
    font-style: italic !important;
    opacity: 1 !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh) {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: var(--bm-text-secondary) !important;
    background-color: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh):hover:not(:disabled),
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh):focus-visible:not(:disabled) {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: var(--bm-text-primary) !important;
    background-color: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) :is(.bm-hoteli-columns-button, .bm-btn-icon-columns)::before {
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16M8 6v12m8-12v12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16M8 6v12m8-12v12'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-btn-icon-refresh::before {
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-count-card {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: var(--bm-shadow-soft, none) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-count-card__label {
    color: var(--bm-text-muted) !important;
    -webkit-text-fill-color: var(--bm-text-muted) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-count-card__value {
    color: var(--bm-accent) !important;
    -webkit-text-fill-color: var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tabs {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab {
    color: var(--bm-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab:hover {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab--active {
    color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-accent)) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab__count,
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab--active .bm-filter-tab__count {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-page-shell:has(.bm-hoteli-table) .bm-filter-tab--active .bm-filter-tab__count {
    background: color-mix(in srgb, var(--bm-accent) 16%, var(--bm-surface) 84%) !important;
    border-color: var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-hoteli-table :is(.bm-table-modern-wrapper, .bm-table-x-scroll, .bm-table-scroll) {
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-hoteli-table .bm-table th {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: var(--bm-text-secondary) !important;
    background: var(--bm-page-bg-soft, var(--bm-surface-raised)) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-hoteli-table .bm-table td {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border-subtle) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-hoteli-table .bm-table tbody tr:hover td {
    background: var(--bm-row-hover) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-hoteli-table .bm-table tbody tr.bm-row-offline td {
    background: var(--bm-surface) !important;
}

/* Fallback za stranice koje HoteliTable ugrađuju u drugačiji roditeljski
   raspored: tematske boje se vezuju direktno za klase kontrola i tabela. */
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-searchbar {
    color: var(--bm-search-icon, var(--bm-text-secondary)) !important;
    background: var(--bm-search-bg, var(--bm-surface)) !important;
    border-color: var(--bm-search-border, var(--bm-border)) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-searchbar:focus-within {
    border-color: var(--bm-search-icon-active, var(--bm-accent)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-search-icon-active, var(--bm-accent)) 16%, transparent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh) {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: var(--bm-text-secondary) !important;
    background-color: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh):hover:not(:disabled),
html:root[data-theme]:not([data-theme="graphite"]) body .content :is(.bm-hoteli-columns-button, .bm-btn-icon-columns, .bm-btn-icon-refresh):focus-visible:not(:disabled) {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: var(--bm-text-primary) !important;
    background-color: var(--bm-surface-hover) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-count-card {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: var(--bm-shadow-soft, none) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-count-card__label {
    color: var(--bm-text-muted) !important;
    -webkit-text-fill-color: var(--bm-text-muted) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-count-card__value {
    color: var(--bm-accent) !important;
    -webkit-text-fill-color: var(--bm-accent) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tabs {
    color: var(--bm-text-secondary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tab {
    color: var(--bm-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tab:hover {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface-hover) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tab--active {
    color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-accent)) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tab__count,
html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-filter-tab--active .bm-filter-tab__count {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content :is(.bm-table-modern-wrapper, .bm-table-x-scroll, .bm-table-scroll) {
    background: var(--bm-surface-raised) !important;
    border-color: var(--bm-border) !important;
    box-shadow: none !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-table th {
    color: var(--bm-text-secondary) !important;
    -webkit-text-fill-color: var(--bm-text-secondary) !important;
    background: var(--bm-page-bg-soft, var(--bm-surface-raised)) !important;
    border-color: var(--bm-border) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-table td {
    color: var(--bm-text-primary) !important;
    background: var(--bm-surface) !important;
    border-color: var(--bm-border-subtle) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body .content .bm-table tbody tr:hover td {
    background: var(--bm-row-hover) !important;
    border-color: var(--bm-border) !important;
}

/* Ovaj blok je poslije opštih pravila za ćelije zato što izbor reda mora
   uvijek imati prednost nad osnovnom i hover bojom tabele. */
html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content :is(
    .table, .bm-table, .bm-analytics-table, .wg-table
) tbody tr:is(.bm-row-selected, .selected, [aria-selected="true"], .bm-maintenance-bulk-row--selected) > td {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-surface-hover, var(--bm-surface))) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content :is(
    .table, .bm-table, .bm-analytics-table, .wg-table
) tbody tr:is(.bm-row-selected, .selected, [aria-selected="true"], .bm-maintenance-bulk-row--selected):hover > td {
    color: var(--bm-text-primary) !important;
    -webkit-text-fill-color: var(--bm-text-primary) !important;
    background: var(--bm-row-selected, var(--bm-surface-hover, var(--bm-surface))) !important;
    border-color: var(--bm-border-strong, var(--bm-border)) !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content .wg-table tbody tr.wg-row-selected > td,
html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content .wg-table tbody tr.wg-row-selected:hover > td {
    color: var(--wg-selected-row-text, var(--bm-text-primary)) !important;
    -webkit-text-fill-color: var(--wg-selected-row-text, var(--bm-text-primary)) !important;
    background: var(--wg-selected-row-bg, var(--bm-row-selected, var(--bm-surface-hover, var(--bm-surface)))) !important;
    border-color: var(--wg-selected-row-border, var(--bm-border-strong, var(--bm-border))) !important;
}

/* Brojevi nefiskalizovanih računa na stranici Održavanje koriste istu
   graphite crvenu boju na svim ostalim temama, uključujući light i dark režim. */
html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content .bm-hoteli-table .bm-nef-button--maintenance {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #b42334 !important;
    background-color: #b42334 !important;
    border-color: #9f1f2f !important;
    box-shadow: none !important;
    font-weight: 750 !important;
}

html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content .bm-hoteli-table .bm-nef-button--maintenance:hover,
html:root[data-theme]:not([data-theme="graphite"]) body #app-shell .content .bm-hoteli-table .bm-nef-button--maintenance:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #8f1d2b !important;
    background-color: #8f1d2b !important;
    border-color: #7f1a26 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18) !important;
}

/* Offline i prekinuti redovi koriste prigušenu graphite varijantu dugmeta,
   dok online redovi ostaju na osnovnoj crvenoj boji iz prethodnog bloka. */
html:root[data-theme]:not([data-theme="graphite"]):not(.dark-theme) body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #cf7a83 !important;
    background-color: #cf7a83 !important;
    border-color: #c98b92 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

html:root[data-theme]:not([data-theme="graphite"]):not(.dark-theme) body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance:hover,
html:root[data-theme]:not([data-theme="graphite"]):not(.dark-theme) body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #bf6872 !important;
    background-color: #bf6872 !important;
    border-color: #b77b83 !important;
}

html:root[data-theme]:not([data-theme="graphite"]).dark-theme body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance {
    color: #c7ccd4 !important;
    -webkit-text-fill-color: #c7ccd4 !important;
    background: rgba(110, 112, 115, 0.16) !important;
    background-color: rgba(110, 112, 115, 0.16) !important;
    border-color: rgba(141, 146, 154, 0.30) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

html:root[data-theme]:not([data-theme="graphite"]).dark-theme body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance:hover,
html:root[data-theme]:not([data-theme="graphite"]).dark-theme body #app-shell .content .bm-hoteli-table .bm-maintenance-table tbody tr:is(.bm-row-offline, .bm-row-inactive) .bm-nef-button--maintenance:focus-visible {
    color: #e1e4e9 !important;
    -webkit-text-fill-color: #e1e4e9 !important;
    background: rgba(141, 146, 154, 0.24) !important;
    background-color: rgba(141, 146, 154, 0.24) !important;
    border-color: rgba(174, 176, 181, 0.42) !important;
}