/* Custom activity code grid columns for reparto */
#ws_modal_codatt_grid {
  position: fixed;
  background: var(--tk-surface-plain);
  border: 1px solid var(--tk-border-soft);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1051;
  max-height: 450px;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
  width: 900px;
  max-width: 90vw;
  display: none;
}
#ws_modal_codatt_grid.show {
  display: block;
}
#ws_modal_codatt_grid > .d-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100%;
}
#ws_modal_codatt_grid .flex-fill {
  min-width: 140px;
  max-width: 180px;
  flex: 0 1 auto;
  border: 1px solid var(--tk-border-subtle);
  border-radius: 4px;
  overflow: hidden;
}
#ws_modal_codatt_grid .flex-fill > div:first-child {
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  background-color: #0d6efd;
  padding: 8px;
  margin: 0;
}
#ws_modal_codatt_grid .list-group-flush {
  margin: 0;
}
#ws_modal_codatt_grid .list-group-item {
  cursor: pointer;
  font-size: 13px;
  padding: 6px 8px;
  border: none;
  background: var(--tk-surface-plain);
  margin: 0;
}
#ws_modal_codatt_grid .list-group-item:hover {
  background-color: var(--tk-info-soft);
}
#logo_bar {
    display: block !important;
    background-color: #000 !important;
    padding: 1rem 0;
}
#logo_svg svg {
    height: 96px;
    width: auto;
    align-items: center;
}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--tk-navbar-bg) !important;
}
#main-inserimento {
    zoom: 0.92;
}
#tabella_tot,
#tabella-riepilogo-container {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#tabella_tot > .card,
#tabella-riepilogo-container > .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

#tabella_tot > .card > .table-responsive,
#tabella_tot > .card > .table-responsive-fixed,
#tabella-riepilogo-container > .card > .table-responsive,
#tabella-riepilogo-container > .card > .table-responsive-fixed,
#tabella-riepilogo-container > .table-responsive,
#tabella-riepilogo-container > .table-responsive-fixed {
    flex: 1 1 auto;
    min-height: 0;
}

#tabella_tot .pager-bar,
#tabella-riepilogo-container .pager-bar {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--tk-surface-plain);
}

#tabella_tot .pager-bar nav,
#tabella-riepilogo-container .pager-bar nav {
    min-width: 0;
}

#tabella_tot .pager-bar .pagination-scroll,
#tabella-riepilogo-container .pager-bar .pagination-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

#tabella_tot .pager-bar .pagination,
#tabella-riepilogo-container .pager-bar .pagination {
    flex-wrap: nowrap;
}
thead.table-dark th {
    line-height: 1.15;
}

.table thead th {
    vertical-align: middle;
    font-weight: var(--tk-font-th-weight, 600);
    line-height: var(--tk-font-th-lh, 1.12);
    letter-spacing: var(--tk-font-th-spacing, 0.02em);
    font-size: var(--tk-font-th, 0.84rem);
    padding-top: var(--tk-th-pad-v-display, 0.24rem);
    padding-bottom: var(--tk-th-pad-v-display, 0.24rem);
    padding-left: var(--tk-cell-pad-h, 0.5rem);
    padding-right: var(--tk-cell-pad-h, 0.5rem);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table.table-sm thead th {
    padding-top: var(--tk-th-pad-v-display, 0.24rem);
    padding-bottom: var(--tk-th-pad-v-display, 0.24rem);
    font-size: var(--tk-font-th, 0.84rem);
}

.table thead th.text-start,
.table thead th.ps-3,
.table thead th.ps-4 {
    text-align: left;
}

.table thead th.text-center {
    text-align: center;
}

.table thead th.text-end,
.table thead th.pe-3,
.table thead th.pe-4 {
    text-align: right;
}
#table-reparti-container table thead {
    background-color: var(--tk-table-header-bg) !important;
    color: var(--tk-table-header-color) !important;
}
#table-reparti-container table thead th {
    background-color: inherit !important;
    color: inherit !important;
}
:root {
    --nav-h: 56px;
    --nav-offset: 56px;
    --primary-color: #c40000;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --card-shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --bg-subtle-red: #c08d8d86;
    --text-subtle-red: #c40000;
    --bg-light: #f8f9fa;
    --ui-muted-color: #5b636e;
    --ui-small-size: .83rem;
    --ui-badge-size: .74rem;
    --ui-badge-radius: .5rem;
    --flt-h-desktop: 32px;
    --flt-h-mobile: 32px;
    --flt-h-mobile-xs: 30px;
    --flt-fs-desktop: .85rem;
    --flt-fs-mobile: .82rem;
    --flt-fs-mobile-xs: .78rem;

    /* === THEME TOKENS (overridden by themes/*.css) === */
    --tk-primary:            #c40000;
    --tk-primary-dark:       #a30000;
    --tk-navbar-bg:          #000000;
    --tk-navbar-text:        #ffffff;
    --tk-bg-surface:         #f8f9fa;
    --tk-bg-card:            #ffffff;
    --tk-text-primary:       #212529;
    --tk-border-color:       #dee2e6;
    --tk-table-header-bg:    #212529;
    --tk-table-header-color: #f8f9fa;
    --tk-hover-row-bg:       #f8fbff;
    --tk-hover-accent:       #c40000;
    --tk-accent-subtle-bg:   #c08d8d86;
    --tk-accent-subtle-text: #c40000;
    --tk-surface-plain:      #ffffff;
    --tk-border-soft:        #dee2e6;
    --tk-border-subtle:      #f0f0f0;
    --tk-info-soft:          #e7f1ff;
    --tk-overlay-dark:       rgba(0, 0, 0, .96);
    --tk-overlay-light:      rgba(255, 255, 255, .12);
    --tk-highlight-bg:       rgba(13, 110, 253, .06);
    --tk-highlight-border:   rgba(13, 110, 253, .35);
    --tk-skeleton-1:         #e9ecef;
    --tk-skeleton-2:         #dee2e6;
    --tk-active-soft-bg:     rgba(0, 0, 0, .03);

    --tk-commessa-code-color:  #1e40af;
    --tk-commessa-code-bg:     #dbeafe;
    --tk-commessa-code-border: #93c5fd;
    --tk-attivita-code-color:  #155e75;
    --tk-attivita-code-bg:     #ecfeff;
    --tk-attivita-code-border: #a5f3fc;

    /* === DENSITY TOKENS (overridden by data-density attribute) === */
    --tk-cell-pad-v: .45rem;
    --tk-cell-pad-h: .5rem;
    --tk-th-pad-v:   .6rem;
    --tk-th-pad-h:   .5rem;
    --tk-row-lh:     1.2;
    --tk-font-table: .8rem;
    --tk-font-th:    .75rem;

    /* === TYPOGRAPHY / SHAPE / ELEVATION TOKENS === */
    --tk-font-family-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --tk-font-family-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --tk-radius-sm: .35rem;
    --tk-radius-md: .5rem;
    --tk-radius-lg: .75rem;
    --tk-elevation-1: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --tk-elevation-2: 0 .6rem 1.2rem rgba(0, 0, 0, .12);
  }

  /* --- Density: Compact --- */
  html[data-density="compact"] {
    --tk-cell-pad-v: .22rem;
    --tk-cell-pad-h: .35rem;
    --tk-th-pad-v:   .3rem;
    --tk-th-pad-h:   .38rem;
    --tk-row-lh:     1.1;
    --tk-font-table: .76rem;
    --tk-font-th:    .72rem;
  }

  /* --- Density: Relaxed --- */
  html[data-density="relaxed"] {
    --tk-cell-pad-v: .65rem;
    --tk-cell-pad-h: .7rem;
    --tk-th-pad-v:   .8rem;
    --tk-th-pad-h:   .65rem;
    --tk-row-lh:     1.45;
    --tk-font-table: .86rem;
    --tk-font-th:    .8rem;
  }

  /* --- Font scale (scales all rem-based sizes) --- */
  html[data-fontscale="sm"] { font-size: 90%; }
  html[data-fontscale="md"] { font-size: 100%; }
  html[data-fontscale="lg"] { font-size: 110%; }

  /* --- Font family presets --- */
  html[data-fontfamily="humanist"] {
    --tk-font-family-main: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
  }

  html[data-fontfamily="serif"] {
    --tk-font-family-main: Georgia, "Times New Roman", Times, serif;
  }

  html[data-fontfamily="mono"] {
    --tk-font-family-main: "Courier New", Courier, monospace;
  }

  /* --- Radius presets --- */
  html[data-radius="sharp"] {
    --tk-radius-sm: 0;
    --tk-radius-md: 2px;
    --tk-radius-lg: 4px;
  }

  html[data-radius="round"] {
    --tk-radius-sm: .65rem;
    --tk-radius-md: .95rem;
    --tk-radius-lg: 1.25rem;
  }

  /* --- Elevation presets --- */
  html[data-elevation="flat"] {
    --tk-elevation-1: none;
    --tk-elevation-2: none;
  }

  html[data-elevation="deep"] {
    --tk-elevation-1: 0 .6rem 1.2rem rgba(0, 0, 0, .16);
    --tk-elevation-2: 0 1rem 1.8rem rgba(0, 0, 0, .22);
  }

  /* Global style application from picker controls */
  body {
    font-family: var(--tk-font-family-main);
  }

  code,
  pre,
  kbd,
  samp {
    font-family: var(--tk-font-family-mono);
  }

  :where(.btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .offcanvas, .modal-content, .alert, .badge) {
    border-radius: var(--tk-radius-md);
  }

  .btn-group > .btn,
  .btn-group > .btn:not(:first-child),
  .btn-group > .btn:not(:last-child) {
    border-radius: var(--tk-radius-sm);
  }

  :where(.btn-sm, .form-control-sm, .form-select-sm, .badge, .pagination .page-link) {
    border-radius: var(--tk-radius-sm);
  }

  :where(.card, .toast, .offcanvas, .modal-content, .dropdown-menu) {
    box-shadow: var(--tk-elevation-1);
  }

  :where(.btn):not(.btn-link):hover {
    box-shadow: var(--tk-elevation-2);
  }

  /* Explicit overrides to make radius/elevation presets visible despite legacy specific rules */
  html[data-radius="sharp"] :where(.card, .btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .offcanvas, .modal-content, .alert, .badge, .nav-link) {
    border-radius: 0 !important;
  }

  html[data-radius="round"] :where(.card, .btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .offcanvas, .modal-content, .alert, .badge, .nav-link) {
    border-radius: var(--tk-radius-lg) !important;
  }

  html[data-elevation="flat"] :where(.card, .toast, .offcanvas, .modal-content, .dropdown-menu, .btn, .table-responsive, .table-responsive-fixed) {
    box-shadow: none !important;
  }

  html[data-elevation="deep"] :where(.card, .toast, .offcanvas, .modal-content, .dropdown-menu) {
    box-shadow: var(--tk-elevation-2) !important;
  }

  html[data-elevation="deep"] :where(.btn):not(.btn-link):hover {
    box-shadow: var(--tk-elevation-2) !important;
  }

#filter-container .filters-card .form-control,
#filter-container .filters-card .form-select,
#filter-container .filters-card .btn {
    min-height: var(--flt-h-desktop);
    font-size: var(--flt-fs-desktop);
    line-height: 1.1;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: var(--tk-radius-md);
}

#filter-container .filters-card .input-group-text {
    min-height: var(--flt-h-desktop);
    font-size: .74rem;
    line-height: 1;
    padding: .18rem .4rem;
    border-radius: var(--tk-radius-sm);
}

#filter-container .filters-card .btn .small {
    line-height: 1;
    white-space: nowrap;
}

#filter-container .filters-card #q_global::placeholder {
    font-size: .82rem;
}

#filter-container .filters-grid {
    gap: .4rem;
}

.ws-l1-toast-highlight {
  border: 1px solid rgba(255, 153, 0, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25), 0 12px 28px rgba(80, 55, 0, 0.28) !important;
  animation: wsL1ToastPulse 0.9s ease-out;
}

.ws-l1-toast-highlight .toast-body {
  min-width: 320px;
}

@keyframes wsL1ToastPulse {
  0% {
    transform: translateY(8px) scale(0.98);
    opacity: 0.2;
  }
  55% {
    transform: translateY(0) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-l1-toast-highlight {
    animation: none;
  }
}

#filter-container .filters-actions {
    gap: .38rem;
}

/* Highlight per filtro attivo (border + sfondo sottile) */
.filter-active {
  background-color: var(--tk-highlight-bg) !important;
  border: 1.5px solid var(--tk-highlight-border) !important;
  border-radius: var(--tk-radius-md);
    transition: border-color .2s, background-color .2s;
}

#filter-container .admin-db-filter-field.filter-active .form-control,
#filter-container .admin-db-filter-field.filter-active .form-select {
  border-color: var(--tk-highlight-border) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

/* Caselle suggerimento (datalist/autocomplete) nelle barre */
#filter-container input[list],
#filter-form input[list],
#container-filtri-dinamici input[list],
#ws_toolbar_row input[list],
#ws_massimale_form input[list],
#filtri-rapportini input[list] {
  min-height: 34px;
  font-size: .86rem;
  line-height: 1.15;
}

#ws_massimale_form input[list] {
  min-height: 36px;
}

@media (max-width: 768px) {
  #filter-container input[list],
  #filter-form input[list],
  #container-filtri-dinamici input[list],
  #ws_toolbar_row input[list],
  #ws_massimale_form input[list],
  #filtri-rapportini input[list] {
    min-height: 38px;
    font-size: .9rem;
  }
}

/* Regola generale: il viewport tabella usa tutto lo spazio residuo, footer/pager resta compatto */
#tabella_tot,
#tabella-riepilogo-container,
#table-utenti-container,
#table-reparti-container,
#table-commesse-container,
#table-attivita-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: var(--dyn-panel-h, auto);
  max-height: var(--dyn-panel-h, none);
}

#tabella_tot .card,
#tabella-riepilogo-container .card,
#table-utenti-container .card,
#table-reparti-container .card,
#table-commesse-container .card,
#table-attivita-container .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

#tabella_tot .table-responsive,
#tabella_tot .table-responsive-fixed,
#tabella-riepilogo-container .table-responsive,
#tabella-riepilogo-container .table-responsive-fixed,
#table-utenti-container .table-responsive,
#table-utenti-container .table-responsive-fixed,
#table-reparti-container .table-responsive,
#table-reparti-container .table-responsive-fixed,
#table-commesse-container .table-responsive,
#table-commesse-container .table-responsive-fixed,
#table-attivita-container .table-responsive,
#table-attivita-container .table-responsive-fixed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

#tabella_tot .pager-bar,
#tabella-riepilogo-container .pager-bar,
#table-utenti-container .pager-bar,
#table-reparti-container .pager-bar,
#table-commesse-container .table-footer-nav,
#table-attivita-container .table-footer-nav {
  flex: 0 0 auto;
}

#tabella_tot .pager-bar,
#tabella-riepilogo-container .pager-bar {
  padding: .2rem .38rem !important;
  gap: .18rem !important;
}

#table-commesse-container .table-footer-nav {
  margin-top: .35rem !important;
  padding: .2rem .1rem;
}

#table-commesse-container .table-footer-nav .pagination {
  margin-bottom: 0 !important;
}

#table-commesse-container .table-footer-nav .small {
  line-height: 1.1;
}

/* ── Pager bar: compatto su tutte le tabelle ── */
.pager-bar,
.table-footer-nav.pager-bar {
  padding: .22rem .4rem !important;
  gap: .22rem !important;
  min-height: 0 !important;
  row-gap: .12rem !important;
}

.pager-bar .pager-bar-meta,
.table-footer-nav.pager-bar .pager-bar-meta,
.pager-bar small,
.table-footer-nav.pager-bar small {
  margin: 0 !important;
  line-height: 1.1 !important;
  font-size: .7rem !important;
  flex: 1 1 100%;
  width: 100%;
}

.pager-bar nav,
.table-footer-nav.pager-bar nav {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}

.pager-bar .pagination-scroll,
.table-footer-nav.pager-bar .pagination-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.pager-bar .pagination,
.table-footer-nav.pager-bar .pagination {
  margin-bottom: 0 !important;
  gap: .06rem;
  flex-wrap: nowrap;
}

.pager-bar .page-link,
.table-footer-nav.pager-bar .page-link,
.pager-bar .page-item .page-link,
.table-footer-nav.pager-bar .page-item button.page-link {
  padding: .1rem .28rem !important;
  font-size: .7rem !important;
  line-height: 1.05 !important;
  min-height: 26px;
}

.pager-bar .btn,
.table-footer-nav.pager-bar .btn {
  min-height: 26px !important;
  height: 26px !important;
  padding: .08rem .32rem !important;
  font-size: .7rem !important;
  line-height: 1.05 !important;
  border-radius: .4rem !important;
}

.pager-go-form {
  gap: .2rem !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

.pager-go-form .form-control {
  min-height: 26px !important;
  height: 26px !important;
  padding: .06rem .24rem !important;
  font-size: .7rem !important;
  width: 3.1rem !important;
}

.pager-page-input {
  width: 3.1rem !important;
}

@media (max-width: 768px) {
  .pager-bar,
  .table-footer-nav.pager-bar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .18rem .32rem !important;
    gap: .16rem !important;
  }

  .pager-bar .pager-bar-meta,
  .table-footer-nav.pager-bar .pager-bar-meta,
  .pager-bar small,
  .table-footer-nav.pager-bar small {
    flex: 1 1 100%;
    font-size: .66rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pager-bar nav,
  .table-footer-nav.pager-bar nav {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 100%;
  }

  .pager-bar .pager-go-form,
  .table-footer-nav.pager-bar .pager-go-form {
    flex: 0 0 auto;
    margin-left: 0 !important;
  }

  .pager-bar .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled),
  .table-footer-nav.pager-bar .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
    display: none;
  }
}

/* --- Sobrio UX polish cross-microservices --- */
#table_container .card,
#tabella-riepilogo-container .card,
#ws_container .card {
  transition: transform .16s ease, box-shadow .18s ease;
}

#table_container .btn,
#tabella-riepilogo-container .btn,
#ws_container .btn {
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}

#table_container .table-hover tbody tr,
#tabella-riepilogo-container .table-hover tbody tr,
#ws_container .table-hover tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease;
}

@media (hover: hover) {
  #table_container .card:hover,
  #tabella-riepilogo-container .card:hover,
  #ws_container .card:hover {
    transform: translateY(-2px);
  }

  #table_container .btn:hover,
  #tabella-riepilogo-container .btn:hover,
  #ws_container .btn:hover {
    transform: translateY(-1px);
  }

  #table_container .table-hover tbody tr:hover,
  #tabella-riepilogo-container .table-hover tbody tr:hover,
  #ws_container .table-hover tbody tr:hover {
    box-shadow: inset 3px 0 0 rgba(13, 110, 253, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  #table_container .card,
  #tabella-riepilogo-container .card,
  #ws_container .card,
  #table_container .btn,
  #tabella-riepilogo-container .btn,
  #ws_container .btn,
  #table_container .table-hover tbody tr,
  #tabella-riepilogo-container .table-hover tbody tr,
  #ws_container .table-hover tbody tr {
    transition: none !important;
  }
}

@media (min-width: 768px) {
  #tabella_tot .pager-bar,
  #tabella-riepilogo-container .pager-bar,
  #table-utenti-container .pager-bar,
  #table-reparti-container .pager-bar,
  #table-commesse-container .table-footer-nav,
  #table-attivita-container .table-footer-nav {
    padding: .22rem .45rem !important;
    gap: .28rem !important;
    min-height: 0 !important;
  }

  #tabella_tot .pager-bar small,
  #tabella-riepilogo-container .pager-bar small,
  #table-commesse-container .table-footer-nav .small,
  #table-attivita-container .table-footer-nav .small {
    margin: 0 !important;
    line-height: 1.05 !important;
    font-size: .74rem;
    white-space: nowrap;
  }

  #tabella_tot .pager-bar nav,
  #tabella-riepilogo-container .pager-bar nav,
  #table-commesse-container .table-footer-nav,
  #table-attivita-container .table-footer-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #tabella_tot .pager-bar .pagination,
  #tabella-riepilogo-container .pager-bar .pagination,
  #table-commesse-container .table-footer-nav .pagination,
  #table-attivita-container .table-footer-nav .pagination {
    margin-bottom: 0 !important;
  }

  #tabella_tot .pager-bar .page-link,
  #tabella-riepilogo-container .pager-bar .page-link,
  #table-commesse-container .table-footer-nav .page-link,
  #table-attivita-container .table-footer-nav .page-link {
    padding: .14rem .34rem;
    line-height: 1.05;
    font-size: .75rem;
  }

  #tabella_tot .pager-go-form,
  #tabella-riepilogo-container .pager-go-form {
    margin: 0 !important;
    gap: .3rem !important;
  }

  #tabella_tot .pager-go-form .form-control,
  #tabella-riepilogo-container .pager-go-form .form-control {
    min-height: 28px;
    height: 28px;
    padding: .08rem .28rem;
    font-size: .74rem;
  }

  #tabella_tot .pager-go-form .btn,
  #tabella-riepilogo-container .pager-go-form .btn {
    min-height: 28px;
    height: 28px;
    padding: .08rem .36rem;
    font-size: .74rem;
  }
}

@media (hover: none){
  .card:hover{ transform:none; box-shadow: var(--card-shadow); }
}
@media (min-width: 768px){
.w-md-auto { width: auto !important; }
  body.desktop-lock-scroll{
    height: 100dvh;
    overflow: hidden;
  }

  body.desktop-lock-scroll .app-main{
    height: calc(100dvh - var(--nav-offset, var(--nav-h)) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.desktop-lock-scroll .app-shell{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.desktop-lock-scroll .tab-content{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.desktop-lock-scroll .tab-pane.active{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.desktop-lock-scroll #filter-container{
    flex: 0 0 auto;
  }

  body.desktop-lock-scroll #table_container{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
  }

  body.desktop-lock-scroll [id^="table-"][id$="-container"]{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.desktop-lock-scroll .table-responsive,
  body.desktop-lock-scroll .table-responsive-fixed{
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.desktop-lock-scroll .pager-bar{
    flex: 0 0 auto;
  }

  #table-utenti-container,
  #table-commesse-container,
  #table-attivita-container,
  #table-reparti-container,
  #tabella_tot,
  #tabella-riepilogo-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: var(--dyn-panel-h, auto);
    max-height: var(--dyn-panel-h, none);
  }

  #table-utenti-container .table-responsive,
  #table-utenti-container .table-responsive-fixed,
  #table-reparti-container .table-responsive,
  #table-reparti-container .table-responsive-fixed,
  #table-commesse-container .table-responsive,
  #table-commesse-container .table-responsive-fixed,
  #table-attivita-container .table-responsive,
  #table-attivita-container .table-responsive-fixed,
  #tabella_tot .table-responsive,
  #tabella_tot .table-responsive-fixed,
  #tabella-riepilogo-container .table-responsive,
  #tabella-riepilogo-container .table-responsive-fixed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable both-edges;
  }
}

.filters-grid{
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: nowrap;
}

/* Floating feedback bubble + toast panel */
.tk-feedback-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tk-primary), #b10000 70%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
  transition: transform .18s ease, box-shadow .2s ease;
}

.tk-feedback-fab:hover,
.tk-feedback-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .26);
}

.tk-feedback-fab i {
  font-size: 1.18rem;
}

.tk-feedback-toast {
  width: min(420px, calc(100vw - 1.2rem));
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--tk-radius-lg);
  overflow: hidden;
}

.tk-feedback-toast .toast-header {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.tk-feedback-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6c757d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .45rem;
}

.tk-feedback-close:hover,
.tk-feedback-close:focus-visible {
  background: rgba(0, 0, 0, .06);
  color: #1f2328;
}

.tk-feedback-close i {
  font-size: .78rem;
  line-height: 1;
}

.tk-feedback-reopen {
  position: fixed;
  right: .35rem;
  bottom: 120px;
  z-index: 1087;
  width: 28px;
  height: 44px;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: rgba(20, 24, 28, .85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.tk-feedback-reopen:hover,
.tk-feedback-reopen:focus-visible {
  background: rgba(20, 24, 28, .96);
}

.tk-feedback-title {
  font-weight: 700;
  letter-spacing: .01em;
}

.tk-feedback-subtitle {
  font-size: .76rem;
  color: #6c757d;
}

.tk-feedback-textarea {
  min-height: 120px;
  resize: vertical;
}

.tk-feedback-meta {
  font-size: .74rem;
  color: #6c757d;
}

@media (max-width: 768px) {
  .tk-feedback-fab {
    right: .75rem;
    bottom: .75rem;
    width: 52px;
    height: 52px;
  }

  .tk-feedback-toast {
    width: min(100vw - .8rem, 100vw - .8rem);
  }

  .tk-feedback-reopen {
    right: .2rem;
    bottom: 112px;
  }
}

#filtri-avanzati.d-lg-block{
  display: flex !important;
  align-items: center;
  min-width: 0;
}

#container-filtri-dinamici{
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  min-width: 0;
}

#container-filtri-dinamici > *{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
}

/* Force filter input-groups on a single row (no label wrapping) */
#container-filtri-dinamici .input-group {
  flex-wrap: nowrap;
}

#container-filtri-dinamici select,
#container-filtri-dinamici input{
  width: 180px;
  max-width: 220px;
}

.filters-row-2{
  display: flex !important;
  align-items: flex-end;
  gap: .45rem;
  flex: 0 0 auto;
}

/* Filtri admin_db: micro-label sopra il controllo (più leggibile di REP./PER.) */
.filter-field-stack {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  min-width: 0;
}

.filter-field-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5b636e;
  line-height: 1;
  margin: 0;
  padding: 0 0.12rem;
  white-space: nowrap;
}

/* Text input con datalist/suggest — freccia come form-select (Costi lavoratore, ecc.) */
.tk-suggest-as-select.form-control {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 14px 10px;
  cursor: pointer;
}

.filter-field-stack .form-select,
.filter-field-stack .form-control {
  min-height: calc(1.5em + 0.5rem + 2px);
  font-size: 0.85rem;
}

#container-filtri-dinamici {
  align-items: flex-end;
}

#container-filtri-dinamici .filter-field-stack {
  flex: 0 1 auto;
  min-width: 0;
}

/* admin_db filter bar: stesso linguaggio visivo di Editor Database registry */
#filter-container .admin-db-filter-bar {
  background-color: var(--bs-light, #f8f9fa) !important;
}

#filter-container .admin-db-filter-bar .form-control,
#filter-container .admin-db-filter-bar .form-select {
  border-color: var(--bs-primary) !important;
  background-color: var(--tk-input-bg, #fff);
}

#filter-container .admin-db-filter-bar .input-group-text {
  border-color: var(--bs-primary) !important;
  background-color: var(--tk-input-bg, #fff);
  color: var(--tk-primary, var(--bs-primary));
}

#filter-container .admin-db-filter-bar .filter-field-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5b636e;
}

/* Cluster filtri entità admin_db: distinto dalla ricerca globale ma coerente */
#filter-container .filters-entity-cluster {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.28rem 0.42rem;
  background: var(--tk-filter-cluster-bg, rgba(255, 255, 255, 0.82));
  border: 1px solid var(--tk-border-color, rgba(13, 110, 253, 0.22));
  border-radius: var(--tk-radius-md, 0.5rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#filter-container .filters-entity-primary {
  flex: 0 0 auto;
  min-width: 0;
}

#filter-container .filters-drawer-col {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

#filter-container .fg-entity {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.35rem;
  min-width: 0;
}

#filter-container .fg-advanced-panel {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 992px) {
  #filter-container .filters-drawer-col .fg-advanced-toggle {
    display: none !important;
  }
}

#filter-container .filter-field-stack--global .input-group {
  min-width: 0;
  max-width: 220px;
  width: 100%;
}

#filter-container .filters-grid .fg-search {
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 220px);
  max-width: 220px;
  min-width: 0;
}

#filter-container .filters-grid .fg-entity {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

#filter-container .filters-entity-advanced {
  align-items: flex-end;
}

#filter-container #container-filtri-dinamici.filters-entity-advanced,
#filter-container .filters-entity-advanced #container-filtri-dinamici {
  align-items: flex-end;
}

.tabella-rapportini thead th.th-sortable {
  cursor: default;
}

.tabella-rapportini thead th.th-sortable .th-sort-hit {
  cursor: pointer;
  user-select: none;
}

.tabella-rapportini thead th.th-sortable .sort-indicator {
  cursor: pointer;
}

.tabella-rapportini thead th .sort-indicator {
  font-size: 0.72em;
  opacity: 0.62;
  vertical-align: middle;
}

.tabella-rapportini thead th.th-sort-active .sort-indicator {
  opacity: 1;
  font-size: 0.78em;
}

#container-filtri-dinamici .filtro-dyn-reparto .form-select {
  min-width: 8.5rem;
  max-width: 12rem;
  padding-right: 1.85rem !important;
  text-align: left;
  text-align-last: left;
  background-position: right 0.5rem center;
}

#container-filtri-dinamici .filtro-dyn-commessa .form-control,
#container-filtri-dinamici .filtro-dyn-attivita .form-control {
  min-width: 8.5rem;
  max-width: 12rem;
}

.filters-row-2 .filter-field-stack .form-select {
  min-width: 7.25rem;
}

.filter-field-stack--period-ref {
  flex: 0 1 11.5rem;
  min-width: 9.25rem;
  max-width: 13.5rem;
}

#f_periodo_ref,
.filter-select-ref {
  min-width: 9.25rem;
  padding-right: 1.85rem !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background-position: right 0.5rem center;
  background-size: 12px 10px;
}

/* Period filter input-groups: single row */
.filters-row-2 .input-group {
  flex-wrap: nowrap;
}

#spinner-global,
.filters-btn-spinner {
  margin: 0 !important;
  padding: 0 !important;
}

.filters-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .45rem;
}

@media (min-width: 992px) {
  #filter-container .filters-grid {
    align-items: flex-end;
    flex-wrap: nowrap;
  }

  #filter-container .filters-grid .fg-search { order: 1 !important; }
  #filter-container .filters-grid .fg-user,
  #filter-container .filters-grid .fg-entity { order: 2 !important; }
  #filter-container .filters-grid .fg-advanced { order: 3 !important; }
  #filter-container .filters-grid .fg-dates { order: 4 !important; }
  #filter-container .filters-grid .fg-actions { order: 5 !important; margin-left: auto; }

  #filter-container .filters-grid .fg-search {
    flex: 0 0 auto;
    width: clamp(140px, 16vw, 220px);
    max-width: 220px;
    min-width: 0;
  }

  #filter-container .filters-grid .fg-user {
    flex: 0 1 190px;
    min-width: 150px;
  }

  #filter-container .filters-grid .fg-entity {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  #filter-container .filters-grid .fg-advanced {
    flex: 1 1 280px;
    min-width: 0;
    max-width: none !important;
    overflow: hidden;
  }

  #filter-container .filters-grid .fg-dates {
    flex: 0 1 320px;
    min-width: 240px;
    max-width: 360px;
  }

  #filter-container .filters-grid .fg-actions {
    flex: 0 0 auto;
    min-width: max-content;
  }

  #filter-container .filters-row-2 {
    display: flex !important;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0;
    gap: 0.35rem;
  }

  #filter-container .filters-row-2 .input-group {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  #filter-container .filters-row-2 .form-select {
    width: 100%;
    min-width: 0;
  }

  #filtri-avanzati.d-lg-block {
    min-width: 0;
    max-width: none !important;
  }

  #container-filtri-dinamici {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap !important;
    gap: .35rem;
  }

  #container-filtri-dinamici > * {
    flex: 1 1 0 !important;
    min-width: 100px;
    max-width: 160px;
  }

  #container-filtri-dinamici select,
  #container-filtri-dinamici input {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* admin_db: viewport desktop stretto/medio (992–1680) — una riga, baseline allineata */
@media (min-width: 992px) and (max-width: 1680px) {
  #filter-container .filters-grid {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: clamp(0.28rem, 0.32vw, 0.42rem);
  }

  #filter-container .filters-grid .fg-search {
    flex: 0 0 clamp(128px, 9vw, 168px);
    max-width: clamp(128px, 9vw, 168px);
    order: 1 !important;
  }

  #filter-container .filter-field-stack--global .input-group {
    max-width: clamp(128px, 9vw, 168px);
  }

  #filter-container .filters-grid .fg-entity {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    order: 2 !important;
  }

  #filter-container .filters-entity-cluster {
    flex-wrap: nowrap;
    width: 100%;
    padding: 0.22rem 0.38rem;
    gap: clamp(0.26rem, 0.3vw, 0.36rem);
  }

  #filter-container .filters-grid .fg-dates {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    order: 3 !important;
  }

  #filter-container .filters-row-2 {
    display: flex !important;
    flex-wrap: nowrap;
    width: auto;
    gap: clamp(0.26rem, 0.3vw, 0.36rem);
  }

  #filter-container .filters-grid .fg-actions {
    flex: 0 0 auto;
    order: 4 !important;
    margin-left: auto !important;
    align-self: flex-end;
  }

  #filter-container #container-filtri-dinamici {
    flex-wrap: nowrap !important;
    overflow: visible;
    gap: clamp(0.26rem, 0.3vw, 0.36rem);
  }

  #filter-container #container-filtri-dinamici > * {
    flex: 0 1 auto !important;
    min-width: clamp(62px, 4.8vw, 88px);
    max-width: clamp(92px, 7.5vw, 124px);
  }

  #filter-container #container-filtri-dinamici .filtro-dyn-reparto .form-select,
  #filter-container #container-filtri-dinamici .filtro-dyn-commessa .form-control,
  #filter-container #container-filtri-dinamici .filtro-dyn-attivita .form-control {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(0.78rem, 0.82vw, 0.85rem);
  }

  #filter-container .filters-grid .fg-user {
    flex: 0 1 clamp(108px, 9vw, 160px);
    min-width: 108px;
    max-width: 160px;
  }

  #filter-container .filter-field-stack--period-ref {
    min-width: clamp(6.75rem, 7vw, 8.75rem);
    max-width: clamp(8.5rem, 9vw, 10.5rem);
  }

  #filter-container .filters-row-2 .filter-field-stack .form-select,
  #filter-container #f_periodo {
    font-size: clamp(0.78rem, 0.82vw, 0.85rem);
  }

  #filter-container .filters-actions .btn {
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
  }
}

@media (max-width: 991.98px) {
  .filters-grid {
    flex-wrap: wrap;
    gap: .35rem;
  }

  /* Keep requested order: search -> user -> advanced -> dates -> actions */
  #filter-container .filters-grid .fg-search { order: 1 !important; }
  #filter-container .filters-grid .fg-user,
  #filter-container .filters-grid .fg-entity { order: 2 !important; }
  #filter-container .filters-grid .fg-advanced { order: 3 !important; flex: 1 1 340px; }
  #filter-container .filters-grid .fg-dates { order: 4 !important; flex: 0 1 380px; min-width: 280px; }
  #filter-container .filters-grid .fg-actions { order: 5 !important; margin-left: auto !important; width: auto; }

  #filtri-avanzati.d-lg-block,
  #container-filtri-dinamici {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  #container-filtri-dinamici select,
  #container-filtri-dinamici input {
    width: min(220px, 100%);
    max-width: 100%;
  }

  .filters-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 992px) {
  .filters-row-2 {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .32rem;
  }

  .filters-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
  }

  .filters-actions .btn,
  .filters-actions a.btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #filter-container .filters-card .form-control,
  #filter-container .filters-card .form-select,
  #filter-container .filters-card .btn {
    min-height: 34px;
    font-size: .83rem;
    line-height: 1.08;
  }

  #filter-container .filters-card .input-group-text {
    min-height: 34px;
    font-size: .75rem;
  }

  .filters-actions {
    gap: .3rem;
    align-items: stretch;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  #filter-container .filters-card .form-control,
  #filter-container .filters-card .form-select,
  #filter-container .filters-card .btn {
    min-height: 33px;
    font-size: .82rem;
    line-height: 1.06;
  }

  #filter-container .filters-card .input-group-text {
    min-height: 33px;
    font-size: .73rem;
  }

  .filters-grid {
    gap: .34rem;
  }

  .filters-actions {
    gap: .32rem;
  }
}

@media (max-width: 576px) {
  .filters-row-2 {
    grid-template-columns: 1fr;
  }

  .filters-actions {
    grid-template-columns: 1fr;
  }
}

.filters-actions .btn{
  padding: .28rem .55rem !important;
  font-size: .90em !important;
  line-height: 1.1;
}

.filters-actions .btn i{
  font-size: .95em;
  line-height: 1;
}

.filters-compact .form-select,
.filters-compact .form-control{
  min-height: 32px;
  padding: .25rem .5rem !important;
  font-size: .90em !important;
}

.filters-compact .input-group-text{
  padding: .2rem .4rem !important;
  font-size: .85em !important;
}

.filters-card{ margin-bottom: .12rem !important; }

@media (min-width: 769px) and (max-width: 991.98px) {
  #filter-container .filters-grid {
    flex-wrap: wrap;
    align-items: center;
    row-gap: .42rem;
  }

  #filter-container .filters-grid .fg-search { order: 1 !important; }
  #filter-container .filters-grid .fg-user,
  #filter-container .filters-grid .fg-entity { order: 2 !important; }
  #filter-container .filters-grid .fg-advanced { order: 3 !important; }
  #filter-container .filters-grid .fg-dates { order: 4 !important; }
  #filter-container .filters-grid .fg-actions { order: 5 !important; }

  #filter-container .filters-grid .fg-search {
    flex: 0 0 auto;
    width: clamp(200px, 42vw, 280px);
    max-width: 280px;
    min-width: 0;
  }

  #filter-container .filters-grid .fg-user {
    flex: 0 1 230px;
    min-width: 170px;
  }

  #filter-container .filters-grid .fg-entity {
    flex: 1 1 100%;
    min-width: min(100%, 280px);
    max-width: 100%;
  }

  #filter-container .filters-grid .fg-advanced {
    flex: 1 1 340px;
    min-width: 260px;
    max-width: 100% !important;
  }

  #filter-container .filters-grid .fg-dates {
    flex: 1 1 380px;
    min-width: 280px;
    max-width: 520px;
  }

  #filter-container .filters-row-2 {
    width: 100%;
    min-width: 0;
  }

  #filter-container .filters-row-2 .input-group {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  #filter-container .filters-row-2 .form-select {
    width: 100%;
    min-width: 0;
  }

  #filter-container #f_periodo_ref {
    min-width: 0;
  }

  #filter-container .filters-grid .fg-actions {
    flex: 0 0 auto;
    min-width: max-content;
    margin-left: auto;
  }
}



body {
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--tk-bg-surface);
    margin: 0;
    padding-top: calc(var(--nav-offset, var(--nav-h)) + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
}

body.centered-layout {
    display: flex;
    align-items: center;
    justify-content: center;
}

input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-base);
}
.config-card {
    border-radius: 20px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
    max-width: 500px;
    width: 95%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

#table_container {
    background: var(--tk-table-container-bg, var(--tk-bg-card, #fff));
    border-radius: 10px;
    padding: 0.3rem;
    margin: 0.5rem 0;
}

.table-responsive{
  width: 100%;
  border: none !important;
  border-radius: 8px;
  max-height: none;
  min-height: 0;
}

.table-responsive-fixed{
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tabella-rapportini{
    font-size: var(--tk-font-table);
    line-height: var(--tk-row-lh);
}

.tabella-rapportini thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--tk-table-header-bg) !important;
  color: var(--tk-table-header-color) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.tabella-rapportini tbody td{
  padding: var(--tk-cell-pad-v-display, 0.18rem) var(--tk-cell-pad-h) !important;
  vertical-align: top;
}

.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cell-attivita-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
}

/* Pill codice condivisa — commessa (blu) vs attività (teal) */
.tk-code-pill {
  display: inline-block;
  font-family: var(--tk-font-family-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.15;
  border-radius: 0.28rem;
  padding: 0.06rem 0.34rem;
  margin-bottom: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: baseline;
}

.tk-code-pill--commessa {
  color: var(--tk-commessa-code-color, #1e40af);
  background: var(--tk-commessa-code-bg, #dbeafe);
  border-color: var(--tk-commessa-code-border, #93c5fd);
}

#tabella_tot .tk-code-pill--commessa {
  cursor: pointer;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

#tabella_tot .tk-code-pill--commessa:hover {
  filter: brightness(0.97);
  box-shadow: 0 0 0 1px var(--tk-commessa-code-border, #93c5fd);
}

.tk-code-pill--attivita {
  color: var(--tk-attivita-code-color, #155e75);
  background: var(--tk-attivita-code-bg, #ecfeff);
  border-color: var(--tk-attivita-code-border, #a5f3fc);
}

/* Admin DB — attività: stesso criterio commessa (codice + desc clamp) */
.cell-attivita {
  min-width: 120px;
  max-width: 180px;
  line-height: 1.2;
}
.cell-attivita-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  word-break: break-word;
  line-height: 1.2;
}

/* Admin DB — commessa: codice + desc clamp 2 righe (max ~3 righe cella) */
.cell-commessa {
  min-width: 150px;
  max-width: 200px;
  line-height: 1.2;
}
.cell-commessa-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  word-break: break-word;
  line-height: 1.2;
}
.tabella-rapportini tbody td.cell-compact {
  vertical-align: middle !important;
}

.tk-badge-reparto-xs {
  font-size: 0.7rem;
}

.tk-detail-xs {
  font-size: 0.72rem;
}

.tk-live-suggestions-panel {
  z-index: 1055;
  max-height: 220px;
  overflow-y: auto;
}

.tk-live-suggestions-panel[style*="position: fixed"],
.tk-live-suggestions-panel.tk-live-suggestions-panel--viewport {
  z-index: 1080;
}

.tk-input-ore-narrow {
  width: 65px;
}

.table-hover tbody tr:hover {
    background-color: var(--tk-hover-row-bg) !important;
    box-shadow: inset 4px 0 0 var(--tk-hover-accent);
}

.cell-description {
    max-width: 200px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.3rem 1rem;
    transition: all 0.3s ease-in-out;
}

.filters-actions .btn,
.ws-toolbar .btn,
.input-group .btn,
.card-header .btn.btn-sm,
.pager-bar .btn {
    min-height: 34px;
    padding: .28rem .62rem;
    line-height: 1.1;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
}

.btn-group .btn {
    border-radius: .5rem;
}

.btn-group .btn + .btn {
    margin-left: .2rem;
}

.pager-go-form {
    gap: 0.5rem;
}

.pager-page-input {
    width: 5.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25) !important;
}

.table tbody td .btn.btn-sm,
.table tbody td button.btn.btn-sm {
    min-height: 30px;
    padding: .22rem .48rem;
    line-height: 1.1;
    font-size: .76rem;
    font-weight: 600;
    border-radius: .45rem;
}

.table tbody td .btn.btn-outline-primary,
.table tbody td .btn.btn-outline-danger,
.table tbody td .btn.btn-outline-secondary {
    border-width: 1px;
}

.table tbody td .btn + .btn,
.table tbody td .btn-group > .btn + .btn {
    margin-left: .22rem;
}

.fw-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.text-muted {
    color: var(--ui-muted-color) !important;
}

small,
.small {
    font-size: var(--ui-small-size);
    line-height: 1.2;
}

.badge {
    font-size: var(--ui-badge-size);
    font-weight: 600;
    line-height: 1.08;
    border-radius: var(--ui-badge-radius);
    letter-spacing: .02em;
}

/* Bootstrap 5.2+ text-bg utilities — polyfill (project ships BS 5.0.x).
   Without these, .badge defaults to color:#fff → invisible on light table rows. */
.text-bg-primary   { color: #fff !important; background-color: var(--bs-primary, #0d6efd) !important; }
.text-bg-secondary { color: #fff !important; background-color: var(--bs-secondary, #6c757d) !important; }
.text-bg-success   { color: #fff !important; background-color: var(--bs-success, #198754) !important; }
.text-bg-warning   { color: #000 !important; background-color: var(--bs-warning, #ffc107) !important; }
.text-bg-danger    { color: #fff !important; background-color: var(--bs-danger, #dc3545) !important; }
.text-bg-info      { color: #000 !important; background-color: var(--bs-info, #0dcaf0) !important; }
.text-bg-light     { color: #000 !important; background-color: var(--bs-light, #f8f9fa) !important; }
.text-bg-dark      { color: #fff !important; background-color: var(--bs-dark, #212529) !important; }

@media (max-width: 768px) {
    .display-5 { font-size: 1.25rem !important; }
    .lead { font-size: 0.9rem !important; }
    .card-body { padding: 1.25rem !important; }

    #form_container { gap: 1rem; }
    .col-md-4 { min-width: 100%; }

    .filters-actions .btn,
    .ws-toolbar .btn,
    .input-group .btn,
    .card-header .btn.btn-sm,
    .pager-bar .btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: .08rem .32rem !important;
        font-size: .7rem !important;
        border-radius: .4rem !important;
    }

    .btn-group .btn + .btn {
        margin-left: .16rem;
    }

    .text-muted {
        color: #525b66 !important;
    }

    small,
    .small {
        font-size: .8rem;
    }

    .badge {
        font-size: .7rem;
        border-radius: .46rem;
    }
}
thead th:hover {
    filter: brightness(0.98);
}

thead th i {
    transition: opacity 0.2s;
}

#table_container:fullscreen {
    background-color: white;
    padding: 20px;
    overflow-y: auto;
}
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.htmx-settling tr {
    background-color: #d1e7dd;
    transition: background-color 1s ease-out;
}
.pagination-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pagination-scroll .pagination {
  flex-wrap: nowrap;
}

@media (max-width: 576px) {
  .tabella-rapportini { font-size: .82rem !important; }
  .tabella-rapportini thead th {
    padding-top: var(--tk-th-pad-v-display, 0.24rem) !important;
    padding-bottom: var(--tk-th-pad-v-display, 0.24rem) !important;
    padding-left: var(--tk-cell-pad-h, 0.45rem) !important;
    padding-right: var(--tk-cell-pad-h, 0.45rem) !important;
    font-size: var(--tk-font-th, 0.84rem) !important;
  }
  .tabella-rapportini tbody td {
    padding: .35rem .45rem !important;
    vertical-align: top !important;
  }
  .tabella-rapportini .ps-4 { padding-left: .45rem !important; }
  .tabella-rapportini .pe-4 { padding-right: .45rem !important; }
  .hide-xs { display:none !important; }
  .xs-nowrap { white-space: nowrap; }
  .pagination-sm .page-link {
    padding: .25rem .45rem;
  }

  .table thead th {
    font-size: .78rem;
    line-height: 1.1;
  }

  .table.table-sm thead th {
    font-size: .76rem;
  }

  .table tbody td .btn.btn-sm,
  .table tbody td button.btn.btn-sm {
    min-height: 28px;
    padding: .2rem .4rem;
    font-size: .7rem;
    border-radius: .4rem;
  }
}

@media (max-width: 576px) {
  #tabella_tot .pager-bar,
  #tabella-riepilogo-container .pager-bar {
      gap: .16rem !important;
      padding: .18rem .32rem !important;
  }

  #tabella_tot .pager-bar small,
  #tabella-riepilogo-container .pager-bar small {
      white-space: nowrap;
  }

  #tabella_tot .pager-bar .page-link,
  #tabella-riepilogo-container .pager-bar .page-link {
      padding: .2rem .4rem;
      font-size: .76rem;
  }

  #tabella_tot .pager-bar .pager-go-form,
  #tabella-riepilogo-container .pager-bar .pager-go-form {
      width: auto !important;
      margin-left: auto;
      gap: .28rem !important;
      flex-wrap: nowrap;
  }

  #tabella_tot .pager-bar .pager-go-form .form-control,
  #tabella-riepilogo-container .pager-bar .pager-go-form .form-control {
      width: 4.4rem !important;
      min-height: 30px;
      padding: .14rem .32rem;
      font-size: .76rem;
  }

  #tabella_tot .pager-bar .pager-go-form .btn,
  #tabella-riepilogo-container .pager-bar .pager-go-form .btn {
      min-height: 30px;
      padding: .14rem .38rem;
      font-size: .74rem;
      line-height: 1.05;
  }

  .table-responsive {
      min-height: auto !important;
  }
  #container-filtri-dinamici > * { width: 100% !important; }
  #table_container{
      padding: .5rem !important;
      margin: .5rem 0 !important;
      border-radius: .75rem !important;
    }
  .hide-xs { display: none !important; }
  .xs-nowrap { white-space: nowrap; }
  .xs-compact { font-size: .78rem; }
  .xs-muted { color: #6c757d; }
  .card.rounded-4 { border-radius: .75rem !important; }
  .card-header { padding: .5rem .75rem !important; }

  .tabella-rapportini { font-size: .82rem !important; }
  .tabella-rapportini thead th,
  .tabella-rapportini tbody td {
    padding-top: var(--tk-th-pad-v-display, 0.24rem) !important;
    padding-bottom: var(--tk-th-pad-v-display, 0.24rem) !important;
    padding-left: var(--tk-cell-pad-h, 0.45rem) !important;
    padding-right: var(--tk-cell-pad-h, 0.45rem) !important;
    vertical-align: top !important;
  }

  .tabella-rapportini thead th.ps-4,
  .tabella-rapportini tbody td.ps-4 { padding-left: .45rem !important; }
  .tabella-rapportini thead th.pe-4,
  .tabella-rapportini tbody td.pe-4 { padding-right: .45rem !important; }

  .card-header .badge { font-size: .72rem; padding: .25rem .45rem; }

  .pagination-sm .page-link { padding: .25rem .45rem; }
  .pagination-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pagination-scroll .pagination { flex-wrap: nowrap; }

  .pager-bar { padding: .18rem .32rem !important; }
  .pager-bar small { font-size: .66rem !important; }
  .filters-card .card-body { padding: .35rem .5rem !important; }
  .filters-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .filters-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .filters-actions { display: flex; gap: .5rem; }
  .filters-actions .btn { flex: 1; padding: .45rem .6rem; }
  .filters-compact .form-select,
  .filters-compact .form-control { font-size: .85rem; padding: .45rem .55rem; }
  .filters-compact .input-group-text { font-size: .75rem; padding: .25rem .4rem; }
}

@media (max-width: 420px) {
  #tabella_tot .pager-bar,
  #tabella-riepilogo-container .pager-bar {
      flex-direction: row !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      align-items: center;
  }

  #tabella_tot .pager-bar > *,
  #tabella-riepilogo-container .pager-bar > * {
      flex: 0 0 auto;
  }

  #tabella_tot .pager-bar nav,
  #tabella-riepilogo-container .pager-bar nav {
      width: auto !important;
  }

  #tabella_tot .pager-bar .pager-go-form,
  #tabella-riepilogo-container .pager-bar .pager-go-form {
      margin-left: .2rem !important;
  }
}

.app-shell{ max-width: 100%; width: 100% !important; margin-left: 0.05rem !important; margin-right: 0.05rem !important; padding-left: .05rem; padding-right: .05rem !important; box-sizing: border-box;}

body.login-page {
  overflow-x: hidden;
  max-width: 100vw;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Login: no fixed navbar (mobile keyboard + tap targets) */
body.login-page #mainNavbar {
  display: none !important;
}

body.login-page .app-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

body.login-page .login-page-wrap {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.login-page #logo_svg svg {
  max-width: min(100%, 260px);
  height: auto;
  max-height: 64px;
}

body.login-page .login-brand-hero {
  margin-bottom: 1rem !important;
}

body.login-page #logo_bar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: min(100%, 320px);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.login-page .login-brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

body.login-page #logo_svg img.tenant-logo-login,
body.login-page #logo_svg .tenant-logo-login {
  max-width: min(100%, 280px);
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

body.login-page .login-brand-link:focus-visible .login-brand-logo-wrap {
  outline: 2px solid var(--tk-primary, #0d6efd);
  outline-offset: 3px;
}

body.login-page .tenant-brand-login {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

body.login-page .login-page-wrap {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

body.login-page .login-page-wrap > .row > .col-12 > .text-center.mb-4 {
  margin-bottom: 0.75rem !important;
}

body.login-page .login-page-wrap .lead {
  font-size: 0.92rem;
  line-height: 1.35;
  margin-bottom: 0.25rem;
  white-space: normal !important;
  overflow-wrap: anywhere;
  max-width: 100%;
}

body.login-page .login-brand-hero,
body.login-page .login-page-wrap,
body.login-page .container,
body.login-page .row,
body.login-page [class*="col-"] {
  min-width: 0;
  max-width: 100%;
}

body.login-page .tk-lang-switcher {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

body.login-page .login-card .btn,
body.login-page #ldapToggleButton {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

body.login-page .login-card .card-body {
  padding: 1.25rem 1.5rem !important;
}

@media (min-height: 520px) {
  body.login-page .app-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 576px) {
  body.login-page .login-card .btn.btn-lg {
    min-height: var(--tk-touch-min, 44px);
  }

  body.login-page .login-card .form-control {
    font-size: 16px !important;
    min-height: var(--tk-touch-min, 44px);
  }

  body.login-page .login-submit-btn {
    touch-action: manipulation;
  }

  body.login-page .login-page-wrap {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (min-width: 1400px){
  .app-shell{ width: 100%; margin-left: 0.05rem !important; margin-right: 0.05rem !important; padding-left: .05rem; padding-right: .05rem;}
}
@media (min-width: 1900px){
  .app-shell{ max-width: 100%; width: 100%; margin-left: 0.05rem; margin-right: 0.05rem; padding-left: .05rem; padding-right: .05rem;}
}
@media (min-width: 768px){
  .app-main{ max-width: 100%; width: 100% !important; padding: .05rem .05rem !important; }
}
.starter-template { padding: 0 !important; }
.app-main{ padding-left: .05rem; padding-right: .05rem; }
.navbar .navbar-logo .cws_logotype_svg {
  width: auto !important;
  height: auto !important;
  display: block;
}
.navbar .navbar-logo svg {
  height: calc(var(--nav-h) * 0.50);
  width: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 576px){
  .navbar .navbar-logo svg { height: 23px; }
}

@media (max-width: 991.98px) {
  .navbar .navbar-brand {
      flex: 0 0 auto;
      max-width: calc(100% - 3.5rem);
      margin-right: 0.4rem;
      overflow: hidden;
      align-self: center;
  }

  .navbar .navbar-logo,
  .navbar .navbar-logo .logo_desktop,
  .navbar .navbar-logo .cws_logotype_svg {
      display: inline-flex !important;
      align-items: center;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
  }

  .navbar .navbar-logo svg {
      width: auto !important;
      height: 23px !important;
      max-width: min(96px, 100%) !important;
      flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .app-main {
      padding-left: .35rem !important;
      padding-right: .35rem !important;
  }

  .card {
      border-radius: 10px;
  }

  .btn,
  .form-control,
  .form-select,
  .input-group-text {
      min-height: 40px;
  }

  .form-control,
  .form-select {
      font-size: .95rem;
  }

  #filter-container .filters-card .form-control,
  #filter-container .filters-card .form-select,
  #filter-container .filters-card .btn {
      min-height: var(--flt-h-mobile) !important;
      font-size: var(--flt-fs-mobile) !important;
      line-height: 1.08;
      padding-top: .16rem !important;
      padding-bottom: .16rem !important;
  }

  #filter-container .filters-card {
      margin-bottom: .08rem !important;
  }

  #filter-container .filters-card .filters-body-tight {
      padding: .12rem .22rem 2px !important;
  }

  #filter-container .filters-card .input-group-text {
      min-height: var(--flt-h-mobile) !important;
      font-size: .7rem !important;
      padding: .12rem .32rem !important;
  }

  #filter-container .filters-grid {
      gap: .32rem !important;
  }

  #filter-container .filters-row-2 {
      gap: .32rem !important;
  }

  #filter-container .filters-actions {
      gap: .3rem !important;
  }

  #filter-container .filters-actions .btn {
      padding-left: .48rem !important;
      padding-right: .48rem !important;
  }

  #filter-container #container-filtri-dinamici .form-control,
  #filter-container #container-filtri-dinamici .form-select {
      min-height: var(--flt-h-mobile) !important;
      font-size: var(--flt-fs-mobile) !important;
  }

  #filter-container #container-filtri-dinamici .input-group-text {
      min-height: var(--flt-h-mobile) !important;
      font-size: .68rem !important;
      padding: .1rem .28rem !important;
  }

  .navbar .navbar-collapse {
      margin-top: .35rem;
      background: var(--tk-overlay-dark);
      border-radius: .6rem;
      padding: .35rem .45rem;
  }

  .navbar .navbar-nav .nav-link {
      border-radius: .45rem;
      padding: .48rem .62rem;
      margin: .08rem 0;
  }

  .navbar .navbar-nav .nav-link.active {
      background: var(--tk-overlay-light);
  }

  .nav-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
  }

  .nav-tabs .nav-item {
      min-width: 170px;
  }

  .nav-tabs .nav-link {
      white-space: nowrap;
  }
}

@media (max-width: 576px) {
  #filter-container .filters-card {
      margin-bottom: .08rem !important;
  }

  #filter-container .filters-card .form-control,
  #filter-container .filters-card .form-select,
  #filter-container .filters-card .btn {
      min-height: var(--flt-h-mobile-xs) !important;
      font-size: var(--flt-fs-mobile-xs) !important;
      padding-top: .12rem !important;
      padding-bottom: .12rem !important;
  }

  #filter-container .filters-card #q_global::placeholder {
      font-size: .74rem;
  }

  #filter-container .filters-card .small {
      font-size: .74rem;
  }

  #filter-container .filters-card .input-group-text {
      min-height: var(--flt-h-mobile-xs) !important;
      font-size: .66rem !important;
      padding: .08rem .28rem !important;
  }

  #filter-container .filters-actions .btn {
      padding-left: .5rem !important;
      padding-right: .5rem !important;
  }
}

/* === Final mobile readability overrides: admin_db filters + table (non-WS) === */
@media (max-width: 768px) {
  #filter-container .filters-card {
    border-radius: .8rem !important;
    margin-bottom: .35rem !important;
  }

  #filter-container .filters-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "search drawer"
      "entity drawer"
      "dates dates"
      "actions actions";
    gap: 0.28rem !important;
    align-items: stretch;
  }

  #filter-container .filters-grid:has(#filtri-avanzati.show) {
    grid-template-columns: minmax(0, 1fr) minmax(7.25rem, 42%) !important;
  }

  #filter-container .filters-grid > .fg-search,
  #filter-container .filters-grid > .fg-dates,
  #filter-container .filters-grid > .fg-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #filter-container .filters-grid > .fg-entity {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #filter-container .filters-entity-primary {
    grid-area: entity;
    min-width: 0;
  }

  #filter-container .filters-drawer-col {
    grid-area: drawer;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.14rem;
    min-width: 0;
    align-self: stretch;
    justify-content: flex-end;
  }

  #filter-container .filters-entity-cluster {
    display: contents !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #filter-container .filters-grid .fg-search {
    grid-area: search;
    order: unset !important;
  }

  #filter-container .filters-grid .fg-dates {
    grid-area: dates;
    order: unset !important;
  }

  #filter-container .filters-grid .fg-actions {
    grid-area: actions;
    order: unset !important;
  }

  #filter-container .filters-entity-primary {
    grid-area: entity;
    min-width: 0;
    align-self: start;
  }

  #filter-container .filters-drawer-col .fg-advanced-toggle {
    order: 2;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    min-width: 2.35rem;
    align-self: stretch;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    margin: 0 !important;
    padding: 0.3rem 0.14rem !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    font-size: 0.62rem !important;
    line-height: 1.12;
    white-space: normal;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    border-radius: var(--tk-radius-md, 0.5rem) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    background: #fff !important;
    overflow: hidden;
  }

  #filter-container .filters-drawer-col .fg-advanced-toggle-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    max-width: 100%;
  }

  #filter-container .filters-drawer-col .fg-chevron-when-open {
    display: none;
  }

  #filter-container .filters-drawer-col .fg-advanced-toggle[aria-expanded="true"] .fg-chevron-when-closed {
    display: none;
  }

  #filter-container .filters-drawer-col .fg-advanced-toggle[aria-expanded="true"] .fg-chevron-when-open {
    display: inline;
  }

  #filter-container .filters-drawer-col #filtri-avanzati.collapse:not(.show) {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden;
  }

  #filter-container .filters-drawer-col #filtri-avanzati.show {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
  }

  #filter-container .filters-drawer-col #filtri-avanzati.show #container-filtri-dinamici {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.18rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #filter-container .filters-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 0.28rem !important;
    width: 100% !important;
  }

  #filter-container .filters-actions > :nth-child(3) {
    grid-column: auto !important;
    justify-self: end;
  }

  #filter-container .filters-actions .filters-clear-label {
    display: none !important;
  }

  #filter-container .filters-actions .btn-filters-clear {
    min-width: 2.15rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  #filtri-avanzati {
    width: 100% !important;
    max-width: 100% !important;
  }

  #filter-container #container-filtri-dinamici .filter-field-label {
    font-size: 0.54rem !important;
    margin-bottom: 0.02rem !important;
  }

  #filter-container #container-filtri-dinamici .form-control,
  #filter-container #container-filtri-dinamici .form-select {
    min-height: 26px !important;
    font-size: 0.66rem !important;
    padding: 0.06rem 0.22rem !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #filter-container #spinner-global.htmx-indicator,
  #filter-container .filters-btn-spinner.htmx-indicator {
    display: inline-block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #filter-container #filter-form.htmx-request #spinner-global.htmx-indicator,
  #filter-container #filter-form.htmx-request .filters-btn-spinner.htmx-indicator {
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
  }

  #filter-container .filters-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }

  #filter-container .filters-row-2 .filter-field-stack {
    background: var(--bg-light);
    border-radius: .55rem;
    padding: 0.2rem 0.35rem 0.28rem;
  }

  #filter-container .filters-row-2 .input-group {
    background: var(--bg-light);
    border-radius: .55rem;
    padding: .12rem;
  }

  #filter-container .filters-row-2 .input-group .input-group-text {
    min-width: 40px;
    justify-content: center;
    font-size: .72rem !important;
    color: var(--ui-muted-color) !important;
    background: var(--bg-light) !important;
    border-radius: .5rem !important;
  }

  #filter-container .filters-row-2 .input-group .form-control {
    background: var(--bg-light) !important;
  }

  #container-filtri-dinamici > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #container-filtri-dinamici .filter-field-stack {
    border-radius: .55rem;
    background: var(--bg-light);
    padding: 0.2rem 0.35rem 0.28rem;
    width: 100% !important;
  }

  #container-filtri-dinamici .filter-field-stack .form-control,
  #container-filtri-dinamici .filter-field-stack .form-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    background: var(--bg-light) !important;
  }

  #container-filtri-dinamici .filtro-dyn {
    border-radius: .55rem;
    background: var(--bg-light);
    padding: .12rem;
  }

  #container-filtri-dinamici .filtro-dyn .input-group-text {
    min-width: 40px;
    justify-content: center;
    background: var(--bg-light) !important;
    color: var(--ui-muted-color) !important;
    border-radius: .5rem !important;
  }

  #container-filtri-dinamici .filtro-dyn .form-control,
  #container-filtri-dinamici .filtro-dyn .form-select {
    background: var(--bg-light) !important;
  }

  #search-commessa,
  #q_global,
  #f_utente,
  #f_data_dal,
  #f_data_al,
  #f_reparto,
  #f_commessa,
  #f_attivita {
    min-height: 35px !important;
    font-size: .84rem !important;
  }

  #filter-container .filters-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: .28rem !important;
  }

  #filter-container .filters-actions > :nth-child(3) {
    grid-column: auto !important;
    justify-self: end;
  }

  #filter-container .filters-actions .btn,
  #filter-container .filters-actions a.btn {
    min-height: 35px !important;
    font-size: .8rem !important;
    padding-top: .16rem !important;
    padding-bottom: .16rem !important;
  }

  .table-panel-viewport,
  #tabella_tot,
  #tabella-riepilogo-container,
  #table-utenti-container,
  #table-reparti-container,
  #table-commesse-container,
  #table-attivita-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: var(--dyn-panel-h, auto) !important;
    max-height: var(--dyn-panel-h, none) !important;
    margin-bottom: 0 !important;
  }

  .table-panel-viewport > .card,
  #tabella_tot > .card {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .table-panel-viewport .table-responsive,
  .table-panel-viewport .table-responsive-fixed,
  .table-panel-viewport > .table-responsive,
  .table-panel-viewport > .table-responsive-fixed,
  #tabella_tot .table-responsive,
  #tabella_tot .table-responsive-fixed {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  .table-panel-viewport .pager-bar,
  #tabella_tot .pager-bar,
  #tabella-riepilogo-container .pager-bar {
    flex: 0 0 auto;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }

  #tabella_tot .pager-bar,
  #tabella-riepilogo-container .pager-bar {
    padding: .18rem .32rem !important;
    gap: .16rem !important;
  }

  #tabella_tot .pager-bar small,
  #tabella-riepilogo-container .pager-bar small {
    font-size: .66rem !important;
  }

  #adminTabsContent {
    padding: 0.12rem 0.35rem 0.2rem !important;
  }

  #adminTabsContent .registry-create-col {
    padding-bottom: 0.08rem !important;
    margin-bottom: 0.08rem !important;
  }

  #adminTabsContent .registry-create-toggle {
    margin-bottom: 0.1rem !important;
  }

  #adminTabsContent .table-panel-viewport .table-responsive,
  #adminTabsContent .table-panel-viewport .table-responsive-fixed {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 430px) {
  #filter-container .filters-row-2 {
    grid-template-columns: 1fr !important;
  }

  #filter-container .filters-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Skeleton loading (Step 2 HTMX partial pattern) ─── */
@keyframes skeleton-pulse {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-line {
  height: .75rem;
  border-radius: var(--tk-radius-sm);
  width: 75%;
  background: linear-gradient(90deg, var(--tk-skeleton-1) 25%, var(--tk-skeleton-2) 50%, var(--tk-skeleton-1) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease infinite;
}
.skeleton-line-header {
  width: 55%;
  height: .65rem;
  opacity: .7;
}
.skeleton-line-bold {
  width: 55%;
}

/* ============================================================
   THEME PICKER — stili panel offcanvas
   ============================================================ */
.tk-theme-card.tk-option-active,
.tk-theme-card[aria-pressed="true"] {
    border-color: var(--tk-primary) !important;
    box-shadow: 0 0 0 2px var(--tk-primary) !important;
  background-color: var(--tk-active-soft-bg);
}

.tk-options-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}

.tk-options-grid-2 .btn {
  width: 100%;
}

.btn-group [data-tk-density].tk-option-active,
.btn-group [data-tk-fontscale].tk-option-active,
.btn-group [data-tk-fontfamily].tk-option-active,
.btn-group [data-tk-radius].tk-option-active,
.btn-group [data-tk-elevation].tk-option-active,
.btn-group [data-tk-density][aria-pressed="true"],
.btn-group [data-tk-fontscale][aria-pressed="true"],
.btn-group [data-tk-fontfamily][aria-pressed="true"],
.btn-group [data-tk-radius][aria-pressed="true"],
.btn-group [data-tk-elevation][aria-pressed="true"] {
    background-color: var(--tk-primary) !important;
    border-color:     var(--tk-primary) !important;
    color:            #fff !important;
}

[data-tk-fontfamily].tk-option-active,
[data-tk-radius].tk-option-active,
[data-tk-elevation].tk-option-active,
[data-tk-fontfamily][aria-pressed="true"],
[data-tk-radius][aria-pressed="true"],
[data-tk-elevation][aria-pressed="true"] {
  background-color: var(--tk-primary) !important;
  border-color:     var(--tk-primary) !important;
  color:            #fff !important;
}