:root {
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1200px;

  /* --brand-* in --color-red-* preneseni v teme (Korak 2): theme-<brand>/overrides/_theme.scss.
     bb.css ostane barvno nevtralna; brand paleto zagotovi aktivna tema (privzeto bizbox). */
  --mono:monospace;
}

/* Fluid font sizes using clamp()
   Minimum size: 75% of base on small screens (320px)
   Maximum size: 100% of base on large screens (1280px)
   Scales proportionally between breakpoints

   POZOR: prefiks ".bb-body" ni okrasek - brez njega je razred gol (specificnost 0,1,0) in ga
   premaga vsak temin selektor s tema deloma, torej "body .ui-widget" (0,1,1, font-size 1rem;
   nosi ga p:message, p:panel in vecina PF komponent) in ".bb-body .ui-outputlabel" (0,2,0,
   font-size 0.9rem). Razred tedaj tiho ne naredi nicesar - napake ni, velikost je pac
   drugacna. S prefiksom je nas selektor (0,2,0) in ker se bb.css nalaga ZA temo, pri enaki
   specifičnosti zmaga (izmerjeno 2026-08-17: p:message 14px -> 10,5px, span z razredom
   ui-outputlabel 12,6px -> 15,75px). Zato: ce dodas nov "-clamp" razred, mu dodaj prefiks. */

.bb-body .text-xs-clamp {
  font-size: clamp(0.5625rem, 0.5rem + 0.3125vw, 0.75rem);
}
.bb-body .text-sm-clamp {
  font-size: clamp(0.65625rem, 0.5833rem + 0.3646vw, 0.875rem);
}
.bb-body .text-base-clamp {
  font-size: clamp(0.75rem, 0.6667rem + 0.4167vw, 1rem);
}
.bb-body .text-lg-clamp {
  font-size: clamp(0.84375rem, 0.75rem + 0.4688vw, 1.125rem);
}
.bb-body .text-xl-clamp {
  font-size: clamp(0.9375rem, 0.8333rem + 0.5208vw, 1.25rem);
}
.bb-body .text-2xl-clamp {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
}
.bb-body .text-3xl-clamp {
  font-size: clamp(1.3125rem, 1.1667rem + 0.7292vw, 1.75rem);
}
.bb-body .text-4xl-clamp {
  font-size: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
}
.bb-body .text-5xl-clamp {
  font-size: clamp(1.875rem, 1.6667rem + 1.0417vw, 2.5rem);
}
.bb-body .text-6xl-clamp {
  font-size: clamp(2.25rem, 2rem + 1.25vw, 3rem);
}
.bb-body .text-7xl-clamp {
  font-size: clamp(3rem, 2.6667rem + 1.6667vw, 4rem);
}
.bb-body .text-8xl-clamp {
  font-size: clamp(4.5rem, 4rem + 2.5vw, 6rem);
}

.red-color {
  color: hsl(0, 100%, 50%);
}
.lightred-color {
  color: hsl(0, 100%, 75%);
}

/* JetBrains Mono @font-face je v layout-light.css/layout-dark.css (kjer EL {resource[...]} deluje).
   NE tukaj: EL v bb.css sesuje cel resource (glej CSS-REORGANIZACIJA past). */
.bb-body .mono, .mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: "tnum";   /* tabularne (enakoširoke) števke — poravnava v stolpcih */
}

.bb-body .layout-topbar {
  z-index: 2000;
}
.layout-topbar-action-item {
    padding: 0 !important; /* !important da override temo */
}
.layout-topbar-action-item a {
    display: flex;
    padding: .7rem 1rem;
    width: 100%;
}
.layout-topbar-action-item.topbar-account-selected > a {
    background-color: var(--highlight-bg);
    color: var(--highlight-text-color);
    box-shadow: inset 3px 0 0 var(--primary-color);
    border-radius: 4px;
}

body.ui-input-filled .ui-inputfield.ui-state-error, body .ui-input-filled .ui-inputfield.ui-state-error {
    background-size: 0 0, 100% 3px;
}

.bb-body mark {
    background: var(--mark-bg);
    padding: 0.2em 0.4em;
    margin: 0 -0.2em;
    border-radius: 4px;
    font-family: unset;
}

.ui-float-label>input:focus ~ label,
.ui-float-label>input.ui-state-filled ~ label,
.ui-float-label>textarea:focus ~ label,
.ui-float-label>textarea.ui-state-filled ~ label,
.ui-float-label>.ui-inputwrapper-focus ~ label,
.ui-float-label>.ui-inputwrapper-filled ~ label {
    font-size: 9px;
}

.bb-body .overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,.1);
    z-index: 2000;
}

.bb-body .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
    z-index: 2001;
    display: block !important;
}

.bb-body .lbl-state-disabled {
    opacity: 1;
    background-image: none !important;
}
.bb-body .ui-inputfield.ui-state-disabled,
.bb-body .ui-inputfield.ui-state-readonly {
    opacity: 1;
    background-image: none !important;
}
.bb-body .layout-wrapper .layout-main .layout-content {
    padding: 1rem;
}

.Separator {
  border-bottom: 1px solid var(--divider-color);
}

.bb-body .ui-badge.ui-badge-no-gutter {
    padding: 1px;
    border-radius: 4px;
}

/* Baza za vse "naslove" */
.style-h1, .style-h2, .style-h3, .style-h4, .style-h5, .style-h6 {
    margin: 1.5rem 0 1rem 0;
    font-weight: 900;
    line-height: 1.2;
    display: block; /* Da se obnaša kot naslov v svoji vrstici */
}

.bb-body h1, .style-h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);   /* 28px → 40px */
}
.bb-body h2, .style-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);        /* 24px → 32px */
}
.bb-body h3, .style-h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);  /* 22px → 28px */
}
.bb-body h4, .style-h4 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);   /* 20px → 24px */
}
.bb-body h5, .style-h5 {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);   /* 18px → 20px */
}
.bb-body h6, .style-h6 {
  font-size: clamp(1rem, 1.6vw, 1.2rem);      /* 16px → 19px */
}

.bb-body .margin-top-auto .field {
    margin-top: auto;
}

.bb-body .field {
    margin-bottom: .85rem;
}

/* .ui-outputlabel barva/videz → brand teme (theme-<brand>/overrides/_theme.scss).
   Odstranjeno iz bb.css: color je bila barva (krsi barvno-nevtralnost), povozila je temo.
   Margin label→polje dajo teme (margin-bottom .25rem, oxygen original), ne primeflex .5rem. */

/* Dodatki za scroller */
.bb-body .ui-scrollpanel-native {
    overflow: hidden;
}
.bb-body .ui-scrollpanel-native:hover {
    overflow: auto;
}
/* Dodatki za scroller */

/* Dodatki za <p:scrollPanel mode="default"> - overlay scrollbar (PF sam nariše prek
   jScrollPane), neviden dokler ni hover, ne zavzame prostora v layoutu. Glej
   _.wireScrollPanelBackTop() v underLine.js za "nazaj na vrh" gumb. */
.bb-body .ui-scrollpanel {
    position: relative; /* referenca za absolute track + "nazaj na vrh" gumb */
}
.bb-body .ui-scrollpanel .ui-scrollpanel-content {
    width: 100% !important; /* PF sicer rezervira prostor za scrollbar (~13px); ni potreben, ker je scrollbar overlay */
}
.bb-body .ui-scrollpanel .ui-scrollpanel-container {
    position: relative;
}
.bb-body .ui-scrollpanel .ui-scrollpanel-track {
    position: absolute !important;
    top: 0; right: 2px; bottom: 0; left: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 0;
    transition: opacity .2s ease;
}
.bb-body .ui-scrollpanel:hover .ui-scrollpanel-track {
    opacity: 1;
}
.bb-body .ui-scrollpanel .ui-scrollpanel-drag {
    border-radius: 4px;
}
/* Horizontalni scrollbar ni nikoli zazelen v teh panelih (vsebina naj se ovija, ne
   scrolla vodoravno) - PF/jScrollPane obcasno ustvari .ui-scrollpanel-hbar tudi ob
   robni/zacasni meritvi brez dejanskega horizontalnega overflow-a, in ga po
   reinitialise() ne odstrani vedno takoj - zato ga vedno skrijemo, namesto da se
   zanasamo na opacity fade (potrjeno: opacity:0 na .ui-scrollpanel-track znotraj
   hbar-ja ni zadostoval, drag je bil vseeno viden). */
.bb-body .ui-scrollpanel .ui-scrollpanel-hbar {
    display: none !important;
}
.bb-body .ui-scrollpanel .bb-scrollpanel-backtop.ui-scrolltop {
    position: absolute !important;
    right: 16px; bottom: 16px; left: auto; top: auto;
    z-index: 20;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
    cursor: pointer;
}
.bb-body .ui-scrollpanel .bb-scrollpanel-backtop.ui-scrolltop.show {
    display: flex;
    opacity: 1;
}
/* Dodatki za <p:scrollPanel mode="default"> */

/* Dodatki za fieldset */
.bb-body .ui-fieldset .ui-fieldset-legend {
    padding: .5em 1em .35em .5em;
}
/* Dodatki za fieldset */

/* Dodatki za Footer */
/* Media query za mobilne zaslone */
@media (max-width: 520px) {
    .bb-layout .layout-footer .smallScreen {display: none !important;}
}

/* Dodatki za Footer */

/* Splošni stil za sličico v gumbu */
.bb-body .ui-button.custom-image-button {
  background-position: 1rem 50%;
  background-repeat: no-repeat;
  padding-left: 2rem;
}

@media (max-width: 768px) {
  /* Skrijemo samo tekstovni del */
  .responsive-btn .ui-button-text {
      display: none !important;
  }

  /* Resetiramo padding, ki ga PrimeFaces doda za tekst */
  .responsive-btn.ui-button {
      padding: 9px 0px 8px 5px !important;
      width: auto !important;
      min-width: 35px;
  }

  /* Centriranje ikone */
  .responsive-btn.ui-button .ui-button-icon-left {
      position: static !important;
      margin: 1px 5px 0px 0px !important;
  }

  .responsive-btn.ui-button .ui-icon {
    position: static !important;
    margin: 1px 5px 0px 0px !important;
  }
}
/* Splošni stil za sličico v gumbu */

/* .readOnlyBtn > button barve → bb-light.css / bb-dark.css */

.bb-body .ui-button.ui-button-white, .bb-body .ui-splitbutton.ui-button-white > .ui-button, .bb-body .ui-menubutton.ui-button-white > .ui-button {
    background: white;
    color: black;
    border: 1px solid var(--surface-400);
}
.bb-body .ui-button.ui-button-white.ui-state-hover, .bb-body .ui-splitbutton.ui-button-white > .ui-button.ui-state-hover, .bb-body .ui-menubutton.ui-button-white > .ui-button.ui-state-hover {
    background: var(--surface-100);
}

/* Flat (icon) gumbi: mocnejsi hover kontrast.
   Privzeti hover je rgba(primary, 0.04) — prešibak in se izgubi ob row/cell hover.
   Theme-aware (primarna barva teme), velja globalno za privzete flat gumbe.
   Plain in barvno-variantni flat gumbi ostanejo nespremenjeni (bolj specificna pravila teme). */
.bb-body .ui-button.ui-button-flat.ui-state-hover {
    background-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

/* Dodatki za PAGINATOR */
.bb-body .ui-paginator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.bb-body .ui-paginator .ui-paginator-current, .bb-body .ui-paginator .ui-paginator-rpp-options {
    margin: 0;
}
/* rowsPerPage dropdown na skrajno desno stran paginatorja.
   V PF15 so vsi paginator tokeni (nav, current, rowsPerPage) znotraj
   .ui-paginator-center-content, zato margin-left:auto na dropdownu ne seze do
   roba paginatorja. Center-content mora zavzeti celotno sirino, desni prazni
   slot pa ne sme rezervirati min-width prostora (PF jedro postavlja 5em). */
.bb-body .ui-paginator-center-content {
    flex-grow: 1;
}
.bb-body .ui-paginator-center-content .ui-paginator-rpp-options {
    margin-left: auto;
}
.bb-body .ui-paginator-top-right-content,
.bb-body .ui-paginator-bottom-right-content {
    min-width: unset !important;
}
.bb-body .ui-paginator .ui-paginator-first, .bb-body .ui-paginator .ui-paginator-prev, .bb-body .ui-paginator .ui-paginator-next, .bb-body .ui-paginator .ui-paginator-last {
    width: 2rem;
    height: 2rem;
    line-height: 2.3rem;
}
.bb-body .ui-paginator-bottom-left-content {
    min-width: unset !important;
}
.bb-body .ui-paginator-center-content {
    flex-wrap: nowrap;
}
 /* Dodatki za PAGINATOR */

/* Dodatki za table */
.bb-body .visibleHeaderBug th span.ui-column-title {
    display: unset;
}
/* PRIVZETI table-layout JE PRI NAS auto, PRI PRIMEFACESU JE fixed (obrnjeno 2026-08-20).
   PF ima v components.css `.ui-datatable table {table-layout: fixed}` (PF 15.0.17): stolpci so
   enako široki ne glede na vsebino, celica pa ima `overflow: hidden` — kar ne gre v celico, je
   zato odrezano brez sledi, ne v dnevniku in ne v konzoli brskalnika. Za naše zaslone je
   pravilnejši `auto`, torej stolpec po vsebini. Naše pravilo je bolj specifično (0,2,1 proti
   0,1,1) in zato zmaga, ne glede na vrstni red nalaganja datotek.
   Prej je bil opt-in obraten (razred `table-layout-auto` na tabelo); ta je odpadel, ker je bilo
   treba pisati na vsako tabelo tisto, kar je pravilo.

   ⚠️ CENA obrata: pri `auto` dolg neprekinjen niz (e-naslov, URL, GUID) ne more prelomiti in
   namesto da bi bil odrezan, razteguje stolpec in z njim celo tabelo čez rob. Tak stolpec dobi
   še razred `overflow-wrap-anywhere` (spodaj med pomožnimi razredi).

   ⚠️ VRSTNI RED NASLEDNJIH TREH BLOKOV JE DEL REŠITVE — specifičnosti so enake ali višje, zato
   odloča zaporedje v datoteki: privzetek, nato variante PF, nato opt-in. */
.bb-body .ui-datatable table {
  table-layout: auto;
}

/* ⚠️ TU GA MORAMO VRNITI NA fixed. Pri scrollable, sticky in resizable tabeli sta glava in telo
   dve LOČENI tabeli in se poravnata samo pri fiksno izračunanih širinah stolpcev — zato PF za te
   tri variante `fixed` izrecno ponovi. Ker pravilo zgoraj premaga tudi tista PF pravila (0,2,1
   proti 0,1,1), bi brez tega bloka prva taka tabela dobila razsuto glavo. Danes take tabele nima
   nobena naša aplikacija; pravilo stoji zato, da ga tista, ki bo prva, ne odkrije po nesreči. */
.bb-body .ui-datatable-scrollable table,
.bb-body .ui-datatable-sticky table,
.bb-body .ui-datatable-resizable table {
  table-layout: fixed;
}

/* Opt-in za fiksne širine stolpcev na navadni tabeli: razred gre na `p:dataTable`.
   ⚠️ Velja za VSAKO tabelo v njej, torej tudi za ugnezdeno tabelo v `p:rowExpansion` — pravilo
   je descendant. Isti razred deluje tudi na `p:treeTable`, ta pa privzetka ne obrne in ostaja
   fixed po PF: nobena naša aplikacija je ne uporablja. */
.bb-body .table-layout-fixed table {
  table-layout: fixed;
}
.bb-body .no-header-table thead {
  display: none;
}
.bb-body .no-gridlines-table .ui-datatable-data>tr>td {
    padding: 1rem 1rem;
    border: none;
    border-width: 0 0 1px 0;
}
.bb-body .ui-datatable thead th,
.bb-body .ui-treetable thead th {
    background: var(--primary-100);
    border-color: var(--primary-200);
    border-width: 1px;
}
/* Brez <f:facet name="header"> je thead prva vrstica tabele. Pravilo zgoraj (border-width: 1px)
   da th rob na vseh 4 stranicah, ki se na zunanjih straneh podvoji z obrobo celotne tabele
   (brand teme, theme.css) → dvojna črta. Okvir je zunanja obroba, zato zunanji th robovi
   odpadejo: zgoraj prva vrstica, levo/desno prvi in zadnji stolpec. Notranje ločnice med
   stolpci ostanejo. S facetom je vmes header div in se nič ne spremeni. */
.bb-body .ui-datatable:not(:has(> .ui-datatable-header)) thead > tr:first-child > th {
    border-top-width: 0;
}
.bb-body .ui-datatable:not(:has(> .ui-datatable-header)) thead > tr > th:first-child {
    border-left-width: 0;
}
.bb-body .ui-datatable:not(:has(> .ui-datatable-header)) thead > tr > th:last-child {
    border-right-width: 0;
}
.bb-body .ui-datatable thead th.ui-state-active,
.bb-body .ui-datatable thead th.ui-state-focus {
    background: var(--primary-100);
}
.bb-body .ui-datatable thead th button {
    height: 2rem;
    width: 2rem;
}

.bb-body .ui-datatable .ui-datatable-scrollable-header, .bb-body .ui-datatable .ui-datatable-scrollable-footer {
    background: var(--surface-200);
}

/* Tabela z <f:facet name="header">: uokviri CELO tabelo v eno obrobo (radij + clip). `:has()` velja
   SAMO ko facet obstaja; brez faceta tabela začne z glavo kot doslej. Barve (obroba, header
   background, ločnica) → bb-light.css / bb-dark.css. */
.bb-body .ui-datatable:has(> .ui-datatable-header) {
    border-radius: 6px;
    overflow: hidden;
}

/* Cell hover (opt-in) — dodaj razred "cell-hover" na <p:dataTable>.
   Polprosojni crni sloj se sesteva z row hover (rgba(0,0,0,0.04)), zato je
   celica pod misko nianso temnejsa od ostanka vrstice. Ker je sloj prosojen,
   deluje neodvisno od barve vrstice (crtaste, oznacene rdece/zelene ...). */
/* .cell-hover td:hover barva → bb-light.css / bb-dark.css */

.bb-body .ui-dataview.ui-dataview-list .ui-dataview-row {
    border: unset;
}

.bb-body .ui-dataview .ui-paginator.ui-paginator-bottom {
    border-radius: 8px;
}
/* Dodatki za table */

/* Dodatki za dialog */
.bb-body .ui-confirm-dialog {
    min-width: 350px;
}
/* Omejitev vsebine dialoga na 80% višine ekrana */
.bb-body .responsive-dialog .ui-dialog-content {
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Med modalnim dialogom topbar NE sme lebdeti nad njim. Pravilo `.bb-body .layout-topbar`
   zgoraj v tej datoteki topbar dvigne na z-index 2000 (zaradi mobilnih akcijskih panelov),
   PF pa modalno masko in dialog postavlja v območje 1002+ — izmerjeno 2026-08-26 na
   me-pooblastila-gui: maska 1007, dialog 1003, topbar 2000. Topbar je zato dialog prekrival;
   na namizju tega ni videti, ker je dialog kratek in centriran, na ozkem zaslonu pa je visok,
   PF mu vrh potisne na y=24 in topbar (višina 58) mu pokrije celo naslovno vrstico z gumbom
   za zapiranje (izmerjeno: titlebar T=24 H=56).
   `.ui-widget-overlay` je v DOM samo dokler je modalna maska odprta (preverjeno 0 -> 1 -> 0),
   zato je `:has()` samodejno omejen na čas modalnega dialoga; takrat vrnemo Ultimino
   privzeto vrednost 998, sicer ostane 2000. */
.bb-body:has(.ui-widget-overlay) .layout-topbar {
    z-index: 998;
}

/* Mobilno: dialog se razpre čez celotno širino zaslona. Sredinjenje na ozkem zaslonu skoraj
   nikoli ne uspe, ker je dialog širši od zaslona. Atribut `width` na `p:dialog` je v tem načinu
   NAMENOMA brez učinka.
   ⚠️ `!important` je nujen: PF širino iz atributa `width` zapiše kot INLINE stil na `.ui-dialog`
   (izmerjeno 520/640/760px), inline stila pa navaden CSS ne premaga.
   ⚠️ `width: auto` z `left/right: 0` in NE `100vw`: pri `position: fixed` da to natanko širino
   zaslona brez drsnika, `100vw` pa drsnik všteje in povzroči vodoravno prelivanje. */
@media (max-width: 991px) {   /* 991px = Ultimin $mobileBreakpoint */
    .bb-body .ui-dialog {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* `.ui-confirm-dialog` ima zgoraj `min-width: 350px`; na 360px zaslonu bi štrlel čez rob */
    .bb-body .ui-confirm-dialog {
        min-width: 0 !important;
    }
}

/* Dodatki za dialog */

/* Dodatki za wizard */
.bb-body .ui-wizard-content {
    margin-bottom: 1rem;
}
.bb-body .ui-inputotp>.ui-inputotp-input {
    width: 3rem;
}
.bb-body .ui-panel .ui-panel-titlebar {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/* .ui-panel-titlebar / .ui-accordion-header barve → bb-light.css / bb-dark.css */

.bb-body .ui-inputgroup .ui-password {
  display: inline-block;
  padding: 0;
  width: 100%;
}
/* Dodatki za wizard */

/* Dodatki za growl and messages */
.bb-body .ui-growl {
    width: min(90%, 400px);
}
.bb-body .ui-growl-message {
  padding: 0;
  width: calc(100% - 40px);
}
.bb-body .ui-growl,
  .bb-body .ui-growl-item-container,
  .bb-body .ui-growl-item {
    opacity: .99;
    z-index: 5555 !important;
}
.bb-body .ui-growl-message p {
  word-break: auto-phrase;
}
/* Sporocilo pod poljem v nasih composite komponentah (z:inputText, z:password, z:inputPhone,
   z:selectBooleanCheckbox): drobno bold besedilo BREZ okvirja, ne barvna skatla.
   Rdeca barva besedila (#B71C1C) in ikona prideta iz teme in ostaneta; obroba teme je
   "solid transparent" z 0 0 0 3px, torej je neviden zamik na levi in je ni treba odstranjevati.
   Velikost (text-xs) in zgornji razmik (mt-2) sta PRIMEFLEXOVA razreda na komponenti: nasa
   "-clamp" druzina je namenjena vecjim naslovom, sporocilo pod poljem pa ni naslov.
   Primeflexovi utility razredi imajo !important, zato drzijo tako proti temini "body
   .ui-widget" (font-size 1rem) kot proti shorthandom "margin" v pravilih nize.
   POZOR: background-color rabi !important, ker je selektor teme
   "body .ui-message.ui-message-error" specificnejsi (0,2,1) od tega (0,2,0). Pri paddingu tega
   ni treba - tema ga nastavlja z "body .ui-message" (0,1,1) in to pravilo ga premaga. */
.bb-body .fieldError {
    font-weight: 700;
    padding: 0;
    background-color: unset !important;
}

.bb-body .ui-widget + .ui-message {
  margin: 0 0 0 0.1rem;
}

/* PRAZNO SPOROCILO NE SME ZAVZETI PROSTORA.
   PrimeFaces razrede zapise TUDI kadar sporocila ni: v MessageRenderer.encodeMarkup je
   writeAttribute("class", ...) enkrat v zanki po sporocilih in se enkrat v veji "if (!hasMessage)",
   zato prazen p:message izrise <div class="ui-message fieldError text-xs mt-2 w-full"></div>.
   Primeflexov mt-2 ima !important in ga zato pravilo z marginom zgoraj ne premaga - prazen div
   doda pod poljem 0,5 rem. Posledica se ne pokaze na polju samem, ampak na SOSEDU: gumb, ki stoji
   ob polju in je poravnan na dno vrstice (align-items-end), pade pod crto polja. Tako je bilo
   videti v iskalni kartici in v iskalnih dialogih, ko so polja postala komponente z: (2026-08-20).
   Zato "display: none" in ne popravek margina: element mora iz toka, sicer margin ostane.
   Specificnost (0,2,1) zadosca proti teminemu "body .ui-message" (0,1,1). Ko sporocilo pride,
   :empty ne velja vec in sporocilo se pokaze samo. */
.bb-body .ui-message:empty {
  display: none;
}
.bb-body .ui-message-info, .bb-body .ui-message-error, .bb-body .ui-message-warn, .bb-body .ui-message-fatal {
  margin: 0 0 0 0.1rem;
}
.bb-body .ui-growl-item-container.ui-growl-error .ui-growl-image:before, .bb-body .ui-growl-item-container.ui-growl-fatal .ui-growl-image:before {
    content: "\e935" !important;
    font-weight: 900;
}

/* Dodatki za growl */

/* Dodatki za selectOne... */
.bb-body .preLabel .ui-selectonemenu-label {
  white-space: pre-wrap;
  height: 38px;
}
.bb-body .preCheckBox .ui-selectcheckboxmenu-token {
    margin: -1px .5rem .2rem 0 !important;
}
.bb-body .wrapLabel .ui-selectonemenu-label {
    white-space: pre-line;
}
.bb-body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item,
.bb-body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
  white-space: normal;
}

.bb-body .ui-input-icon-left, .bb-body .ui-input-icon-right {
    display: unset;
}

/* Dodatki za menuBar... */
.bb-body .layout-menu-wrapper .layout-menu-container .layout-menu li > ul > li {
    margin: 2px;
}

 .menuForTopBar.ui-menubar {
  border: none !important;
}
/* Barve sledijo topbar temi prek --topbar-* (layout-light/dark.css, _topbar_exports.scss).
   Hardkodirana bela je delovala samo na temnih topbarih (bizbox), na svetlih (uccg, white)
   je bil menu neviden. */
.menuForTopBar .ui-menu-parent > .ui-submenu-link:hover {
  background: var(--topbar-item-hover-bg-color) !important;
}

.menuForTopBar .ui-menu-parent > .ui-submenu-link .ui-menuitem-text {
  color: var(--topbar-text-color) !important;
}
.menuForTopBar .ui-menu-parent > .ui-submenu-link .ui-icon {
  color: var(--topbar-text-color) !important;
}

.menuForTopBar .ui-menu-parent > .ui-submenu-link .ui-menuitem-icon {
  color: var(--topbar-text-color) !important;
  fill: var(--topbar-text-color) !important;
}

.menuForTopBar .ui-menu-parent > ul.ui-menu-child {
  width: max-content !important;
  min-width: 100%;
  white-space: nowrap;
}

/* reset originalnih definicij */
body .ui-chkbox:has(:not(.ui-state-disabled).ui-state-hover),
body .ui-chkbox:has(:not(.ui-state-disabled).ui-state-focus),
body .ui-chkbox:has(.ui-state-active):has(:not(.ui-state-disabled).ui-state-hover),
body .ui-chkbox:has(.ui-state-active):has(:not(.ui-state-disabled).ui-state-focus) {
    box-shadow: none !important;
}
/* .ui-chkbox-box hover/focus glow → bb-light.css / bb-dark.css */
.bb-body .field .ui-chkbox {
    height: 2.8rem;
}
 /* Dodatki za selectOne... */


.bb-body .ui-progressbar-value.ui-widget-header {
  background-color: inherit !important;
}
.bb-body .ui-progressbar.ui-progressbar-danger .ui-progressbar-value {
    background: var(--pink);
}
.bb-body .ui-progressbar.ui-progressbar-warning .ui-progressbar-value {
    background: var(--brand-orange);
}
#bb-body .ui-progressbar.ui-progressbar-info .ui-progressbar-value {
    background: var(--brand-blue);
}
.bb-body .ui-progressbar.ui-progressbar-success .ui-progressbar-value {
    background: var(--brand-green);
}


.bb-body .ui-scrolltop {
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--brand-orange) 58%, transparent);
}


.bb-body .ui-column-title {
  width: 100%;
  font-weight: 900;
}

/* ⚠️ TABELA V RAZŠIRJENI VRSTICI IZGUBI GLAVE STOLPCEV — brez sledu.

   PrimeFaces vsebino glave stolpca ovije v <span class="ui-column-title"> — tudi ikono, ki
   pride iz facete (npr. z:iconHeader) — svoje reflow pravilo pa tem span-om v razširjeni
   vrstici vzame prikaz:

     .ui-datatable-reflow .ui-expanded-row-content td .ui-column-title { display: none }
     (components.css, PrimeFaces 15.0.17)

   Pravilo NI v media poizvedbi, razred .ui-datatable-reflow pa nosi ZUNANJA tabela. Zato
   p:dataTable, postavljena v p:rowExpansion, ostane brez naslovov stolpcev pri VSAKI širini,
   in to tiho: ne v dnevniku, ne v konzoli brskalnika. Namenjeno je zloženim oznakam v celicah
   TELESA, kjer je prav — zato prikaz vračamo samo v <thead>.

   Neposredni otrok (>) ni okras: composite komponente svoj naslov same skrijejo z vgnezdenim
   <span class="ui-column-title ui-helper-hidden"> in ta MORA ostati skrit, sicer se ob ikoni
   pokaže še njeno besedilo. (izmerjeno 2026-08-19 v brskalniku, ekran Aplikacije) */
.bb-body .ui-datatable-reflow .ui-expanded-row-content thead th > span.ui-column-title {
  display: inline;
}

.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdright{text-align: right;}
.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvat{vertical-align: top;}
.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdcenter{text-align: center;}
.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvab{vertical-align: bottom;}
.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvam {vertical-align: middle;}
.bb-body .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdnowrap {white-space: nowrap;}

/* Isti razredi za GLAVO tabele; par s td-pravili zgoraj in namenoma enake oblike.
   ⚠️ Svoje potrebuje, ker PrimeFaces styleClass s <p:column> zapiše v OBE celici - v <th> glave
   IN v vse <td> stolpca (DataTableRenderer, PF 15.0.17). Prav zato sta oba niza pravil ozko
   privezana - td na .ui-datatable-data, th na thead - in šele tako je mogoče glavo poravnati
   drugače kot celice: styleClass="thleft tdright".
   Reflow (mobilni prelom) tu ne potrebuje ničesar, drugače kot td-pravila: PF v njem glavo skrije
   v celoti (.ui-datatable-reflow thead th {display:none}) in naslov stolpca izriše v celici.
   thleft je pri naših temah privzetek (theme.css: thead th {text-align: left}), torej piše samo
   namero - a ostane edini način, da se poravnava glave pove izrecno. */
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thleft{text-align: left;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thright{text-align: right;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thcenter{text-align: center;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thvat{vertical-align: top;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thvab{vertical-align: bottom;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thvam {vertical-align: middle;}
.bb-body .ui-datatable thead th[scope="col"]:not(.ui-helper-hidden).thnowrap {white-space: nowrap;}

/* Razpiralnik vrstice (p:rowToggler) se mora vesti kot gumb — ker to tudi JE.
   Izmerjeno 2026-08-27: `<div class="ui-row-toggler ui-icon" role="button" tabindex="0">`,
   28x28, `border-radius: 50%`, torej okrogel gumb v drevesu dostopnosti. Ultima mu da le
   `:hover { background: rgba(0,0,0,.04) }` — komaj vidno — stanja pritiska nima, fokusni
   obroček pa mu tema IZRECNO vzame z `:focus { box-shadow: none }`. Kdor tipka s tipkovnico,
   torej ne dobi nobenega znaka, kje je.

   Tint je iz `currentColor` in ne iz `--primary-color`: barvo ikone si vsaka znamka nastavi
   po svoje (uccg jo ima zlato, osnovna tema sivo akcijsko), tako pa odziv barvi sledi sam.
   Specifičnost (0,5,1) premaga temino (0,4,2), zato `!important` ni potreben.

   Velja pri vseh širinah, ne samo v reflow načinu: isti gumb ima isto pomanjkljivost tudi na
   namizju, drugačno vedenje po širinah pa bi bilo težje razložiti kot popraviti. */
.bb-body .ui-datatable .ui-datatable-data > tr .ui-row-toggler:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.bb-body .ui-datatable .ui-datatable-data > tr .ui-row-toggler:active {
    background: color-mix(in srgb, currentColor 26%, transparent);
}

.bb-body .ui-datatable .ui-datatable-data > tr .ui-row-toggler:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
}

@media (max-width: 640px) {
  /* Velja samo za <p:dataTable reflow="true"> */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:first-child {
    background-color: var(--surface-300);
  }

  /* Vrstica = kartica. Prej sta zapise ločili DVE ločili hkrati: siva pasica prve celice
     (zgoraj) in 3px črta pod zadnjo celico — `td:last-child::after`, ki jo ta popravek
     odstranjuje. Zdaj kartice loči presledek med njimi.
     ⚠️ `:not(.ui-expanded-row-content)` je nujen: vrstica z vsebino p:rowExpansion nosi cel
     gnezden p:dataTable in kartica ter poravnava spodaj bi jo stisnili. */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr:not(.ui-expanded-row-content) {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    margin: 0 0 .75rem;
    overflow: hidden;
  }

  /* Razširitev se drži SVOJE kartice: reža gre POD razširitev, ne nad njo.

     ⚠️ SIGNAL JE RAZRED `ui-expanded-row` NA NADREJENI VRSTICI, ne sosedski selektor na
     razširitveno vrstico. Razširitvena vrstica ob zaprtju OSTANE v DOM in dobi le
     `display: none`, zato se `tr:has(+ tr.ui-expanded-row-content)` drži za vedno.
     Izmerjeno 2026-08-28 v treh stanjih: svež izris (razreda ni), razprto (je), zaprto
     (razreda ni več, razširitvena vrstica pa je še vedno tam, skrita). Stari selektor je v
     zaprtem stanju še vedno lovil zadetek, razred pa nič. Razred preživi tudi strežniški
     izris tabele; `aria-expanded` na razpiralniku NI uporaben, ker ob strežniškem zaprtju
     ostane `true`.

     ⚠️ Razširjena vrstica je `table-row` (glej popravek spodaj), zato margin na njej ne prime.
     Režo zato da naslednja kartica prek `margin-top` — ta je blok in margin ji prime.
     `+ tr + tr` je kartica ZA razširitvijo razprte kartice. */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-expanded-row {
    margin-bottom: 0;
  }

  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-expanded-row + tr + tr {
    margin-top: .75rem;
  }

  /* Oznaka in vrednost kot dva stolpca. PF poravnava z `min-width: 30%` na oznaki, kar je le
     približek: dolga vrednost se ovije POD oznako (vidno pri vrstici z ikono).
     ⚠️ `flex` in NE `grid`: v mreži bi vsak otrok celice postal svoja mrežna celica, zato bi
     celica z več akcijskimi gumbi drugega in tretjega prelomila v novo vrstico (izmerjeno
     2026-08-27: trije gumbi -> viden samo prvi). Pri flexu ostanejo gumbi v isti vrstici. */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr:not(.ui-expanded-row-content) > td[role="gridcell"] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .75rem;
  }

  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr:not(.ui-expanded-row-content) > td[role="gridcell"] > span.ui-column-title {
    flex: 0 0 40%;
    min-width: 0;
    font-weight: 500;
    color: var(--text-color-secondary);
  }

  /* Prva celica je glava kartice (sivino ji da pravilo zgoraj); tesnejši odmik, ker je v njej
     samo razpiralnik. */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr:not(.ui-expanded-row-content) > td[role="gridcell"]:first-child {
    padding: .35rem .75rem;
  }

  /* Prazna oznaka ne sme rezervirati 40% širine. PF v reflow načinu v vsako celico vrine
     `<span class="ui-column-title">` z besedilom glave; stolpec brez glave (npr. razpiralnik,
     ki mora imeti svoj stolpec) dobi PRAZEN span, ki je pred tem porinil chevron 182px v desno
     (izmerjeno 2026-08-27 pri širini 575px). */
  .bb-body .ui-datatable-reflow .ui-datatable-data td span.ui-column-title:empty {
    display: none;
  }

  /* ⚠️ VSEBINA p:rowExpansion JE BILA ODREZANA NA ~49px. Tema da tej celici
     `display: block; width: 100%` (theme.css, `tr.ui-expanded-row-content > td`), vrstica pa
     ostane `table-row` — tabelarni layout jo zato stisne, `overflow: hidden` pa ostanek odreže.
     Izmerjeno 2026-08-27 na uccg-app01-test, Applications: tr 50 / td 49, gnezdena tabela 386.
     Z `table-cell` se vrstica spet razteza po vsebini: tr 437 / td 437, tabela 409.
     Hrošč je obstajal že prej in ni posledica kartic zgoraj — preverjeno z izklopljenimi pravili. */
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-expanded-row-content > td {
    display: table-cell;
  }

  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdright { text-align: inherit; }
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvat   { vertical-align: inherit; }
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdcenter{ text-align: inherit; }
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvab   { vertical-align: inherit; }
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdvam   { vertical-align: inherit; }
  .bb-body .ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden).tdnowrap{ white-space: inherit; }
}

.bb-body .white-space-pre{white-space: pre;}
.bb-body .white-space-pre-wrap{white-space: pre-wrap;}
.bb-body .white-space-pre-line{white-space: pre-line;}
.bb-body .overflow-wrap-break-word{overflow-wrap: break-word;}
.bb-body .overflow-wrap-anywhere{overflow-wrap: anywhere;}
.bb-body .uppercase{text-transform: uppercase;}
.bb-body .line-break-anywhere{line-break: anywhere;}

.bb-body .dwidth{width: 75px;}
.bb-body .dtwidth{width: 110px;}
@media(max-width: 990px) {
    .bb-body .dtwidth{max-width: 75px;}
}

.bb-body .multi-line-menu .layout-menuitem-text {
  white-space: pre-line;
}

/* custom PI icons */
#bb-body .pi.pi-custom {
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
}
#bb-body .pi.pi-zzi {
    background-image: url("/bizBoxLogin/jakarta.faces.resource/images/zzi.png.xhtml?ln=layout&av=2.0.2026-08-28.000") !important;
}
#bb-body .pi.pi-bizBox {
    background-image: url("/bizBoxLogin/jakarta.faces.resource/images/favicon-16x16.png.xhtml?ln=layout&av=2.0.2026-08-28.000") !important;
}
#bb-body .pi.pi-api {
    background-image: url("/bizBoxLogin/jakarta.faces.resource/images/api.png.xhtml?ln=layout&av=2.0.2026-08-28.000") !important;
}
#bb-body .pi.pi-eslog {
    background-image: url("/bizBoxLogin/jakarta.faces.resource/images/eslog.png.xhtml?ln=layout&av=2.0.2026-08-28.000") !important;
}
#bb-body .pi.pi-cert {
    background-image: url("/bizBoxLogin/jakarta.faces.resource/images/cert.png.xhtml?ln=layout&av=2.0.2026-08-28.000") !important;
}
#bb-body .pi.pi-custom::before {
    content: ''; /* prepreči standardni znak */
}

/* p:datePicker: show only Today button, hide Clear button */
.noClearBtn .ui-datepicker-buttonbar .ui-clear-button {
    display: none;
}

/* ZOutputText: lblAsInputText — osnovni layout */
.z-lbl-as-input {
    display: inline-block;
    min-height: 39.7px;
}

/* ZOutputText: overflowMode="ellipsis" */
.z-overflow-ellipsis {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 0.75rem;      /* ujemi desni padding z ui-inputfield */
}

/* ZOutputText: overflowMode="scroll" — skrij scrollbar na vseh brskalnikih */
.z-overflow-scroll {
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
    padding-right: 0.75rem;      /* ujemi desni padding z ui-inputfield */
}
.z-overflow-scroll::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
}

/* ZOutputText: textAlignRight */
.z-text-right {
    text-align: right;
}


body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options, body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-end {
    float: right;
    margin-right: .5rem;
}

/* TabView: aktivni tab — 4px indikator via box-shadow (no layout shift) */
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-bottom-color: transparent;
    box-shadow: inset 0 -4px 0 0 var(--primary-color);
}
body .ui-tabs.ui-tabs-bottom > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-top-color: transparent;
    box-shadow: inset 0 4px 0 0 var(--primary-color);
}
body .ui-tabs.ui-tabs-left > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-right-color: transparent;
    box-shadow: inset -4px 0 0 0 var(--primary-color);
}
body .ui-tabs.ui-tabs-right > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-left-color: transparent;
    box-shadow: inset 4px 0 0 0 var(--primary-color);
}

/* TabView: hover — 4px indikator via box-shadow (no layout shift) */
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    box-shadow: inset 0 -4px 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent);
}
body .ui-tabs.ui-tabs-bottom > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    box-shadow: inset 0 4px 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent);
}
body .ui-tabs.ui-tabs-left > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    box-shadow: inset -4px 0 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent);
}
body .ui-tabs.ui-tabs-right > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.bb-body .simpleCard {
  padding: 1rem;
}

/* .card barve → bb-light.css / bb-dark.css */

/* .layout-menu-light active-item override (siva aktivna postavka + siva ikona) preseljen v
   _menu_bizbox.scss (Korak 2). bizBox uporablja menuTheme=bizbox, ne 'light'. */


/* ------------------------------------------------------------------
 * BizBox robustness error toast
 * ------------------------------------------------------------------ */
#bb-err-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: #d32f2f;
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    z-index: 9999;
    max-width: 420px;
    font-size: .9rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    display: none;
    animation: bbErrSlideIn .25s ease;
}
@keyframes bbErrSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

a.underline {
  background: linear-gradient(0deg, var(--link-underline-color), var(--link-underline-color)) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  padding-bottom: 0px;
  --bg-h: 2px;
}
a.underline:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}
a.underline.full {
  --bg-h: 100%;
}
a.underline > div[style*="display:flex"] {
  display: inline-flex !important;
}

/* Additive CSS for hover effect on specific links */
.icon-link img.icon-default,
.icon-link img.icon-hover {
    width: 22px;
    height: 22px;
}

/* Additive CSS for hover effect on specific links */
.icon-link {
    display: inline-block;
    line-height: 0; /* Removes extra space around the image */
}
.icon-link[data-btn="true"] {
    max-width: 42px;
    padding: 8px;
    border: 2px solid var(--icon-btn-border-color);
    border-radius: 6px;
    background-color: var(--icon-btn-bg);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.icon-link[data-btn="true"]:hover {
    border-color: var(--icon-btn-border-hover-color);
    background-color: var(--icon-btn-bg-hover);
}

.icon-link .icon-default {
    font-size: 1.5rem;
    display: inline-block;
}

.icon-link .icon-hover {
    font-size: 1.5rem;
    display: none;
}

.icon-link:hover .icon-default {
    display: none;
}

.icon-link:hover .icon-hover {
    display: inline-block;
}

/* Preneseno iz layout-*.css ob CSS↔SCSS rezu 2026-07 */
.card {
    border-radius: 0.8rem;
    margin-bottom: 0;
}

.layout-menu-wrapper .layout-inline-menu .layout-inline-menu-action-panel .layout-inline-menu-action-item {
    border-radius: 0.8rem;
}

.layout-rightmenu .next-events li {
    border-radius: 0.8rem;
}

mark {
    border-radius: 0.8rem;
}

.layout-topbar .layout-topbar-right .layout-topbar-actions-right .layout-topbar-items .layout-topbar-item {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.layout-topbar .layout-topbar-right .layout-topbar-actions-right .layout-topbar-items .layout-topbar-item .layout-topbar-action-panel {
    max-height: calc(100vh - 4rem);
    min-width: max-content;
    overflow-y: auto;
    padding: 0;
}

@media (max-width: 991px) {
    .layout-topbar .layout-topbar-right .layout-topbar-actions-right .layout-topbar-items {
        padding-left: 0.5rem;
    }

    .layout-topbar .layout-topbar-right.layout-topbar-mobile-active {
        align-items: flex-start;
    }

    .layout-topbar-items > li:first-child {
        margin-right: auto;
    }
}

@media screen and (max-width: 991px) {
    .layout-topbar .layout-topbar-right .layout-topbar-actions-right .layout-topbar-items .layout-topbar-item .layout-topbar-action-panel {
        min-width: fit-content;
    }
}

@media (min-width: 992px) {
    .layout-menu-horizontal .layout-menu-wrapper {
        height: 4rem;
    }

    .layout-menu-horizontal .layout-menu-wrapper .layout-menu-container .layout-menu > li > ul {
        border-radius: 0.8rem;
    }

    .layout-menu-horizontal .layout-menu-wrapper .layout-menu-container .layout-menu > li > ul.layout-menuitem-leaf-submenu,
    .layout-menu-horizontal .layout-menu-wrapper .layout-menu-container .layout-menu > li.active-menuitem > ul.layout-menuitem-leaf-submenu {
        display: none;
    }

    .layout-menu-horizontal .layout-menu-wrapper .layout-menu-container .layout-menu > li.layout-root-menuitem > a:has(~ ul.layout-menuitem-leaf-submenu) {
        display: flex;
    }

    .layout-menu-horizontal.layout-wrapper .layout-main {
        padding-top: 8rem;
    }

    .layout-menu-slim .layout-menu-wrapper .layout-menu-container .layout-menu > li > ul.layout-menuitem-leaf-submenu,
    .layout-menu-slim .layout-menu-wrapper .layout-menu-container .layout-menu > li.active-menuitem > ul.layout-menuitem-leaf-submenu {
        display: none;
    }

    .layout-menu-slim .layout-menu-wrapper .layout-menu-container .layout-menu > li.layout-root-menuitem > a:has(~ ul.layout-menuitem-leaf-submenu) {
        display: flex;
        justify-content: center;
    }
}