@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html {
  overflow: hidden !important;
}
body {
  padding: 0em !important;
  position: absolute;
  width: 100%;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
}
.grid {
  grid-template-columns: repeat(12, 1fr) !important;
  row-gap: 5px !important;
}
.grid8 {
  grid-template-columns: repeat(8, 1fr) !important;
}
.grid9 {
  grid-template-columns: repeat(9, 1fr) !important;
}

.grid10 {
  grid-template-columns: repeat(10, 1fr) !important;
}
.grid36 {
  grid-template-columns: repeat(72, 1fr) !important;
}
.frow {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
}
.supercontainer.frow {
  min-height: 0;
  overflow: hidden;
}
.row {
  align-items: stretch;
  row-gap: 5px;
}
.edit_mode {
  display:none;
}
.row .s1 { grid-column: auto/span 1 }
.row .s2 { grid-column: auto/span 2 }
.row .s3 { grid-column: auto/span 3 }
.row .s4 { grid-column: auto/span 4 }
.row .s5 { grid-column: auto/span 5 }
.row .s6 { grid-column: auto/span 6 }
.row .s7 { grid-column: auto/span 7 }
.row .s8 { grid-column: auto/span 8 }
.row .s9 { grid-column: auto/span 9 }
.row .s10 { grid-column: auto/span 10 }
.row .s11 { grid-column: auto/span 11 }
.row .s12 { grid-column: auto/span 12 }
.row .s13 { grid-column: auto/span 13 }
.row .s14 { grid-column: auto/span 14 }
.row .s15 { grid-column: auto/span 15 }
.row .s16 { grid-column: auto/span 16 }
.row .s17 { grid-column: auto/span 17 }
.row .s18 { grid-column: auto/span 18 }
.row .s19 { grid-column: auto/span 19 }
.row .s20 { grid-column: auto/span 20 }
.row .s21 { grid-column: auto/span 21 }
.row .s22 { grid-column: auto/span 22 }
.row .s23 { grid-column: auto/span 23 }
.row .s24 { grid-column: auto/span 24 }
.row .s25 { grid-column: auto/span 25 }
.row .s26 { grid-column: auto/span 26 }
.row .s27 { grid-column: auto/span 27 }
.row .s28 { grid-column: auto/span 28 }
.row .s29 { grid-column: auto/span 29 }
.row .s30 { grid-column: auto/span 30 }
.row .s31 { grid-column: auto/span 31 }
.row .s32 { grid-column: auto/span 32 }
.row .s33 { grid-column: auto/span 33 }
.row .s34 { grid-column: auto/span 34 }
.row .s35 { grid-column: auto/span 35 }
.row .s36 { grid-column: auto/span 36 }

.grid.grid36 .col.s1 { grid-column: auto/span 2 }
.grid.grid36 .col.s2 { grid-column: auto/span 4 }
.grid.grid36 .col.s3 { grid-column: auto/span 6 }
.grid.grid36 .col.s4 { grid-column: auto/span 8 }
.grid.grid36 .col.s5 { grid-column: auto/span 10 }
.grid.grid36 .col.s6 { grid-column: auto/span 12 }
.grid.grid36 .col.s7 { grid-column: auto/span 14 }
.grid.grid36 .col.s8 { grid-column: auto/span 16 }
.grid.grid36 .col.s9 { grid-column: auto/span 18 }
.grid.grid36 .col.s10 { grid-column: auto/span 20 }
.grid.grid36 .col.s11 { grid-column: auto/span 22 }
.grid.grid36 .col.s12 { grid-column: auto/span 24 }
.grid.grid36 .col.s13 { grid-column: auto/span 26 }
.grid.grid36 .col.s14 { grid-column: auto/span 28 }
.grid.grid36 .col.s15 { grid-column: auto/span 30 }
.grid.grid36 .col.s16 { grid-column: auto/span 32 }
.grid.grid36 .col.s17 { grid-column: auto/span 34 }
.grid.grid36 .col.s18 { grid-column: auto/span 36 }
.grid.grid36 .col.s19 { grid-column: auto/span 38 }
.grid.grid36 .col.s20 { grid-column: auto/span 40 }
.grid.grid36 .col.s21 { grid-column: auto/span 42 }
.grid.grid36 .col.s22 { grid-column: auto/span 44 }
.grid.grid36 .col.s23 { grid-column: auto/span 46 }
.grid.grid36 .col.s24 { grid-column: auto/span 48 }
.grid.grid36 .col.s25 { grid-column: auto/span 50 }
.grid.grid36 .col.s26 { grid-column: auto/span 52 }
.grid.grid36 .col.s27 { grid-column: auto/span 54 }
.grid.grid36 .col.s28 { grid-column: auto/span 56 }
.grid.grid36 .col.s29 { grid-column: auto/span 58 }
.grid.grid36 .col.s30 { grid-column: auto/span 60 }
.grid.grid36 .col.s31 { grid-column: auto/span 62 }
.grid.grid36 .col.s32 { grid-column: auto/span 64 }
.grid.grid36 .col.s33 { grid-column: auto/span 66 }
.grid.grid36 .col.s34 { grid-column: auto/span 68 }
.grid.grid36 .col.s35 { grid-column: auto/span 70 }
.grid.grid36 .col.s36 { grid-column: auto/span 72 }

.tabs-content li.tab-pane {
    display: none !important;
    list-style: none !important;
    overflow-y: scroll;
}
.sidenav-right {
    flex: 0 0 var(--sidebar-right-width) !important;
    padding: 8px !important;
}
.sidenav-right li,
li.sidenav-right {
  margin-bottom: 8px !important;
}
.tabs-content ul {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.tabs-content li.is-active {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
    max-height: 100%;
}
li.is-selected {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}
.tabs-content {
  display: flex;
  flex: 1 1 100%;
  padding: var(--bulma-block-spacing);
  border-left: 1px solid var(--bulma-border) !important;
  border-right: 1px solid var(--bulma-border) !important;
  border-bottom: 1px solid var(--bulma-border) !important;
  max-height: 100%;
  max-width: 100%;
  overflow-y: hidden;
}
.tabs {
    margin-bottom: 0 !important;
}

input[type=date] {
  width: 110px !important;
}

.panel {
  --bulma-panel-radius: var(--bulma-radius-medium) !important;
  --bulma-panel-heading-line-height: 0.5 !important;
  --bulma-panel-heading-padding: 1em 1em 0.75em 1em !important;
  --bulma-panel-heading-radius: calc(var(--bulma-radius) / 2) !important;
  --bulma-panel-heading-size: 1em !important;
  --bulma-panel-heading-weight: var(--bulma-weight-bold) !important;
  --bulma-panel-margin: calc(var(--bulma-block-spacing) / 4) !important;
}
.panel-block {
    padding: .5em .5em !important;
}
.panel-heading {
  border-bottom: 1px solid var(--bulma-border) !important;
}

.block:not(:last-child), .box:not(:last-child), .breadcrumb:not(:last-child), .buttons:not(:last-child), .card:not(:last-child), .content:not(:last-child), .field:not(:last-child), .file:not(:last-child), .fixed-grid:not(:last-child), .grid:not(:last-child), .level:not(:last-child), .media:not(:last-child), .message:not(:last-child), .notification:not(:last-child), .pagination:not(:last-child), .progress:not(:last-child), .skeleton-block:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .tabs:not(:last-child), .tags:not(:last-child), .title:not(:last-child) {
    margin-bottom: 0 !important;
}

.vnavspacer {
  border-left: 1px solid var(--bulma-border);
  padding-left: var(--bulma-grid-gap);
}
.panel.subpanel {
  align-self: flex-start;
  --bulma-panel-shadow: none;
  border: 1px solid var(--bulma-border-weak);
}
.tabs.scroll {
  flex: 1 1 auto;
  overflow: hidden;
}
main-tabs {
  max-width: 100%;
  max-height: calc(100% - var(--bulma-navbar-height) - 1em);
  margin-bottom: 1em;
}
main-tabs.narrow {
  max-width: 100%;
}
.tabs-wrapper {
  display: flex;
  flex: 0 0 calc(2.5em + 2px);
  flex-direction: row;
  max-width: 100%;
  overflow: hidden;
}
.scroll-btn {
  flex: 0 0 var(--bulma-control-height);
  align-self: center;
  border-bottom: 1px solid var(--bulma-border) !important;
  align-self: stretch;
}
.scroll-btn:hover i {
  background: #eaeaea;
  padding: 0.25em 0.69em;
  border-radius: 50%;
}
.scroll-btn.hidden i {
  opacity: 0;
  pointer-events: none;
}
.scroll-btn.realHidden {
  display: none;
}
.scroll-btn i {
  padding: var(--bulma-tabs-link-padding);
  line-height: var(--bulma-body-line-height);
}
.panel.is-flat,
.panel.is-flat .panel-heading,
.panel.is-flat .panel-tabs,
.panel.is-flat .panel-block {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
:root {
    --bulma-label-spacing: 0.0em !important;
    --bulma-input-disabled-color: var(--bulma-text-dark);
    --bulma-block-spacing: 1rem;
    --sidebar-left-width: 50px;
    --sidebar-right-width: 0px;
    --bulma-navbar-height: 3rem;
    --bulma-label-color: var(--bulma-text-weak);
}

aside.sidenav-left {
  flex: 0 0 var(--sidebar-left-width) !important;
}
aside.sidenav-right {
  flex: 0 0 var(--sidebar-right-width) !important;
}

@media screen and (min-width: 769px) {
  :root {
    --sidebar-left-width: 75px;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --sidebar-left-width: 125px;
  }
  html {
    font-size: 12px !important;
  }
}
@media screen and (min-width: 1216px) {
  :root {
    --sidebar-left-width: 180px;
    --sidebar-right-width: 150px;
  }
  .collection-header.grid,
  li.grid {
    --bulma-grid-gap: 0.5rem !important;
  }
}
@media screen and (min-width: 1408px) {

}
.control.has-icons-left .icon {
  left: 0.25rem;
}
.is-tab-link {
  position: relative;
  margin-right: 0.25rem;
}
tab-content {
  height: 100%;
}
.inner_tab {
  height: 100%;
}
.supercontainer {
  height: 100%;
}
.supercontainer.frow > .container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.scrollercontainer {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
/*
 * Master-detail (elenco e schede): scroll su .container / .fixed-grid; aside destra fissa.
 */
.supercontainer.frow.supercontainer-master-detail,
.frow.supercontainer-master-detail {
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  align-items: stretch;
}
.supercontainer-master-detail > .container,
.supercontainer-master-detail > .fixed-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Partial HTMX annidati nel pannello elenco: niente doppio scroll */
.scrollercontainer-detail-target .supercontainer-master-detail {
  height: auto;
  max-height: none;
  overflow: visible;
}
.scrollercontainer-detail-target .supercontainer-master-detail > .fixed-grid {
  overflow: visible;
  max-height: none;
}
/* Scheda OC: lista righe affiancata alla testata (s8), dettaglio riga sotto (s12) */
.supercontainer-master-detail .scheda-righe-scroller > .collection-scroller-root {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: min(420px, 40vh);
  overflow: hidden;
}
.supercontainer-master-detail > aside.sidenav-right {
  flex: 0 0 var(--sidebar-right-width) !important;
  align-self: stretch;
  max-height: 100%;
  overflow: hidden;
}
.supercontainer-master-detail .scrollercontainer.scrollercontainer-with-detail {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  gap: 0.75rem;
  overflow: visible;
}
.supercontainer-master-detail .scrollercontainer-with-detail > .collection-scroller-root {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: min(420px, 40vh);
  overflow: hidden;
}
.supercontainer-master-detail .scrollercontainer-with-detail > .scrollercontainer-detail-panel {
  flex: 0 0 auto;
  width: 100%;
  overflow: visible;
  display: block;
}
.supercontainer-master-detail .scrollercontainer-with-detail > .scrollercontainer-detail-target {
  overflow: visible;
  display: block;
}
.collection-scroller-root {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
aside.sidenav-left.hidden {
  display: none;
}
#sidenav-left i {
  margin-right: 0.35em;
}

.menu-item-not-implemented {
  opacity: 0.6;
  color: #dc3545 !important; /* rosso Bootstrap/Bulma */
  pointer-events: none; /* rende il link non cliccabile */
  cursor: not-allowed;
}
.menu-item-not-implemented .tag {
  vertical-align: middle;
}
/* Per i figli nei dropdown */
.navbar-dropdown .menu-item-not-implemented {
  color: #dc3545 !important;
  pointer-events: none;
}
#theMainMenu .navbar-dropdown {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* Mobile/Tablet Menu Redesign (Drawer) */
@media screen and (max-width: 1023px) {
  /* Hide default menu */
  #theMainMenu .navbar-menu {
    display: block; 
    position: fixed;
    top: 0;
    left: -320px; 
    width: 300px;
    height: 100vh;
    background-color: #1a1a1a !important; /* Force solid dark background */
    z-index: 2147483647 !important; 
    transition: left 0.3s ease-in-out;
    padding: 0;
    overflow-y: auto;
    direction: rtl; /* Move scrollbar to left */
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
  }

  #theMainMenu .navbar-menu .navbar-start {
    background-color: transparent !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    direction: ltr; /* Content direction ltr while container is rtl */
  }

  /* Show burger */
  #theMainMenu .navbar-burger {
    display: block;
    margin-left: auto; 
  }
  
  /* Active State (Slide in) */
  #theMainMenu .navbar-menu.is-active {
    left: 0;
    display: block !important;
  }

  /* Backdrop for closing */
  .mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2147483646 !important; 
    backdrop-filter: blur(2px);
  }
  .mobile-backdrop.is-active {
    display: block;
  }

  /* Navbar Items Styling in Drawer */
  #theMainMenu .navbar-menu .navbar-item,
  #theMainMenu .navbar-menu .navbar-link {
    color: #e0e0e0 !important; /* Consistent light text */
    background-color: transparent !important; /* Ensure no white backgrounds */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1.25rem; /* COMPACTED vertically */
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separation */
  }
  
  #theMainMenu .navbar-menu .navbar-link:hover,
  #theMainMenu .navbar-menu .navbar-item:hover {
     background-color: rgba(255,255,255,0.08) !important;
     color: #ffffff !important;
  }

  /* Dropdown interactions (Accordion) */
  #theMainMenu .navbar-menu .has-dropdown .navbar-dropdown {
    display: none; 
    background-color: #252525 !important; /* VISIBLE solid dark background, no alpha issues */
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  
  #theMainMenu .navbar-menu .has-dropdown.is-active-dropdown > .navbar-dropdown {
    display: block; 
  }
  
  /* Remove Bulma background from dropdown link on mobile */
  #theMainMenu .navbar-menu .navbar-link.is-active,
  #theMainMenu .navbar-menu .navbar-link.is-hoverable:hover {
      background-color: rgba(255,255,255,0.05) !important;
  }

  /* Chevron rotation for open state */
  #theMainMenu .navbar-menu .has-dropdown > .navbar-link::after {
    transform: rotate(-45deg); 
    transition: transform 0.2s;
    border-color: #e0e0e0 !important;
  }
  
  #theMainMenu .navbar-menu .has-dropdown.is-active-dropdown > .navbar-link::after {
    transform: rotate(135deg); 
    margin-top: -5px;
  }

  /* Sub items indentation and vertical compaction */
  #theMainMenu .navbar-menu .navbar-dropdown .navbar-item {
    padding: 0.5rem 1.25rem 0.5rem 2.5rem !important;
    font-size: 0.95em;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  
  /* Third level indentation */
  #theMainMenu .navbar-menu .navbar-dropdown .navbar-dropdown .navbar-item {
    padding-left: 3.5rem !important;
  }
  
  /* Adjust burger color */
  #theMainMenu .navbar-burger {
      color: #e0e0e0;
  }

  body {
    font-size: 14px; 
  }
}    

@media screen and (min-width: 1024px) {
  /* Cascading Menus for Desktop */
  .navbar-item.has-dropdown.is-cascading .navbar-dropdown.is-nested-flyout {
    top: 0 !important;
    left: 100% !important;
    margin-top: -5px; /* Alignment fix */
    border-radius: 4px !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2) !important;
    display: none;
  }
  
  .navbar-item.has-dropdown.is-cascading:hover > .navbar-dropdown.is-nested-flyout {
    display: block !important;
  }

  /* Hide default arrows on flyout parents if needed */
  .navbar-link.is-arrowless-desktop-flyout::after {
    display: none !important;
  }
}

/* MODERN SIDEBAR DRAWER for 1024px - 1280px */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  :root {
      --sidebar-desktop-width: 180px;
      --burger-width: 48px;
  }

  /* Container spans the necessary area on the right */
  #theMainMenu {
    position: fixed !important;
    right: 0;
    top: 0;
    width: auto;
    height: 100vh;
    background: transparent !important;
    z-index: 2147483647 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }

  /* Trigger Burger - Stays at the edge */
  #theMainMenu .navbar-brand {
    position: fixed !important;
    right: 0;
    top: 5px;
    width: var(--burger-width);
    height: var(--burger-width);
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    z-index: 2147483647 !important;
  }
  
  #theMainMenu .navbar-brand > *:not(.navbar-burger) {
      display: none !important; /* Hide "Mosaico Web" label */
  }

  #theMainMenu .navbar-burger {
    display: block !important;
    color: #ffffff;
    background: #1a1a1a; 
    border-radius: 4px;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }

  /* The actual drawer - stops AT the burger */
  #theMainMenu .navbar-menu {
    position: fixed !important;
    top: 0;
    right: calc(-1 * var(--sidebar-desktop-width) - var(--burger-width)); 
    width: var(--sidebar-desktop-width) !important;
    height: 100vh;
    background-color: #0f0f0f !important;
    border-left: 1px solid rgba(255,255,255,0.05);
    box-shadow: -4px 0 15px rgba(0,0,0,0.4);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem 0;
    z-index: 2147483646 !important; /* Below burger */
    overflow-y: visible !important;
    overflow-x: visible !important;
  }

  /* Open State - Menu is to the left of burger */
  #theMainMenu:has(.navbar-burger.is-active) .navbar-menu,
  #theMainMenu.is-active .navbar-menu {
    right: var(--burger-width) !important;
  }

  #theMainMenu .navbar-start {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #theMainMenu .navbar-item, 
  #theMainMenu .navbar-link {
    width: calc(100% - 1rem) !important;
    margin: 1px 0.5rem !important;
    border-radius: 4px;
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    color: #b0b0b0 !important;
    font-size: 0.85rem;
    transition: all 0.2s ease;
  }
  
  #theMainMenu .navbar-item:hover,
  #theMainMenu .navbar-link:hover {
      background-color: #2a2a2a !important;
      color: #ffffff !important;
  }

  #theMainMenu .navbar-link::after {
      display: none !important;
  }

  /* Fly-outs to the LEFT of the drawer */
  #theMainMenu .navbar-item.has-dropdown .navbar-dropdown {
    position: fixed !important;
    right: calc(var(--sidebar-desktop-width) + var(--burger-width)) !important;
    left: auto !important;
    top: auto !important; 
    transform: translateY(-0.5rem);
    min-width: 200px;
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    box-shadow: -8px 8px 20px rgba(0,0,0,0.5);
    border-radius: 6px;
    padding: 0.5rem 0 !important;
    display: none !important;
  }

  #theMainMenu .navbar-item.has-dropdown:hover > .navbar-dropdown {
    display: block !important;
  }

  /* Third level - even more to the LEFT */
  #theMainMenu .navbar-dropdown .navbar-item.has-dropdown .navbar-dropdown {
      right: calc(var(--sidebar-desktop-width) + var(--burger-width) + 200px) !important;
      left: auto !important;
  }

  #theMainMenu .fa-chevron-right {
      transform: rotate(180deg);
  }

  body { padding: 0 !important; }
  main-windows, main-tabs { left: 0 !important; width: 100% !important; }
  .mobile-backdrop.is-active { display: block !important; }
}

/* Mobile support for cascading (indent instead of flyout) */
@media screen and (max-width: 1023px) {
  #theMainMenu .navbar-menu .has-dropdown.is-cascading .navbar-dropdown.is-nested-flyout {
    background-color: rgba(255,255,255,0.02) !important;
    display: none;
  }
  #theMainMenu .navbar-menu .has-dropdown.is-cascading.is-active-dropdown > .navbar-dropdown.is-nested-flyout {
    display: block !important;
  }
}

.opacity-50 { opacity: 0.5; }

.container {
  max-width: min(1920px, 100vw) !important;
  width: 100%;
  margin-inline: auto; 
}
.navbar-link {
  padding-left: 0 !important;
}
.field {
  position: relative;
  padding-top: 0.5rem;
}
.label {
  font-size: 70% !important;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  top: -0.25em;
  left: 0.25em;
  background-color: var(--bulma-body-background-color);
  padding: 0.25em;
  max-height: 1.5em;
  overflow: hidden;
  text-wrap-mode: nowrap;
  line-height: 1em;
  font-family: Roboto;
}
.value {
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 1.5em;
}

input[type=checkbox],
input[type=radio] {
    margin-top: 0.6em;
}
.control.has-icons-left .input,.control.has-icons-left .select select {
    padding-left: var(--bulma-control-padding-horizontal) !important;
}

/* FIX: Ensure navbar and dropdowns are always on top of windows */
.navbar, .navbar-menu, .navbar-dropdown {
    z-index: 2147483647 !important;
}

.input.is-readonly {
    background-color: #f0f8ff !important; /* AliceBlue - distinct from disabled grey */
    border-color: #dbdbdb;
    color: #363636;
    cursor: default;
}

/* Loader Styles */
.loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  border-radius: 8px;
  animation: fadeIn 0.3s forwards;
  pointer-events: none;
}
.collection-scroller-root [data-scroller-part="list-wrap"].is-loading > .scroller-list-loader,
.collection-scroller-root [data-scroller-part="list-wrap"].htmx-request > .scroller-list-loader,
.collection-scroller-root .scroller-list-loader.is-visible {
  display: flex !important;
  pointer-events: auto;
}
.loader-overlay.is-hidden {
  display: none !important;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.spinner-container {
  position: relative;
  width: 80px;
  height: 80px;
}
.spinner {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 6px solid transparent;
  border-top-color: #3273dc;
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.spinner-inner {
  box-sizing: border-box;
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border: 4px solid transparent;
  border-bottom-color: #00d1b2;
  border-radius: 50%;
  animation: spin-reverse 1.5s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
  to { transform: rotate(-360deg); }
}
.loading-text {
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #363636;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Searchable Select (FK autocomplete) ─────────────────────────── */
searchable-select {
  display: block;
  position: relative;
}

.ss-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ss-dropdown.is-open {
  display: block;
}

.ss-dropdown .ss-option {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-dropdown .ss-option:hover {
  background-color: #f5f5f5;
  color: #363636;
}

/* ── Allegati ordine fornitore (modal / rightsidenav) ─────────── */
.of-allegati-block {
  max-height: min(45vh, 20rem);
  overflow: auto;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 0.75rem;
}

.of-allegati-table {
  font-size: 0.875rem;
}

.of-allegati-table thead th {
  background: #f5f5f5;
  color: #4a4a4a;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 #dbdbdb;
}

.of-allegati-col-icon {
  width: 2.75rem;
}

.of-allegati-col-actions {
  width: 1%;
  white-space: nowrap;
}

.of-allegati-name {
  word-break: break-word;
  font-weight: 500;
}

.of-allegati-thumb img {
  display: block;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: middle;
}

.of-allegati-table .buttons {
  justify-content: flex-end;
}

.of-allegati-table .of-allegati-actions-inline {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.of-allegati-table .of-allegati-actions-inline .button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
}