/* === CSS PER IL GRID E LA SORTBAR (inizio) === */
.grid-toolbar-container {
  background-color: black;
  padding: 0px 5px;
  border-radius: 10px;
}

.grid-toolbar-container button {
  margin: 0px;
}

.grid {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  table-layout: fixed;
}

.grid tr {
  cursor: pointer;
  background-color: transparent;
  /*  ghostwhite; */
  transition: background-color 0.3s ease-in-out;
}

.grid tr.rigafiltri {
  background-color: transparent
}

.grid tr.rigafiltri td {
  background-color: transparent
}

.grid tr.row-selected .capt {
  color: darkblue;
  transition: color 0.3s ease;
}

.grid td .dato {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.grid td md-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 3px
}

.grid tr.visibile {
  display: table-row !important
}

/* mostra la colonna */
.grid tr.nascosta {
  display: none !important
}

/* nasconde la colonna */
.grid tr.visibilePC {
  display: table-row !important
}

/* mostra la colonna */

.grid td.visibile {
  display: table-cell !important
}

/* mostra la colonna */
.grid td.nascosta {
  display: none !important
}

/* nasconde la colonna */
.grid td.visibilePC {
  display: table-cell !important
}

/* mostra la colonna */
@media (max-width:399px) {
  .grid td.visibilePC {
    display: none !important
  }

  /* mostra la colonna */
}

.grid td input {
  width: -webkit-fill-available;
}

/* EFFETTO -VENTAGLIO- PER LE RIGHE GRID */
.grid tr.ng-enter {
  -webkit-transition: 0.1s ease-in-out all;
  /* Durata della singola animazione */
  transition: 0.1s ease-in-out all;
}

/* La riga è inizialmente invisibile e leggermente spostata in alto */
.grid tr.ng-enter {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

/* Stato finale di ENTRATA (ritorna alla posizione normale) */
.grid tr.ng-enter.ng-enter-active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Applicato quando gli elementi vengono AGGIUNTI */
.grid tr.ng-enter-stagger {
  /* Questo deve essere un 'transition-delay' */
  -webkit-transition-delay: 0.02s;
  transition-delay: 0.02s;

  /* E deve essere ripristinato a 0 per la singola riga! */
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}

.grid .filter-input {
  width: 100%;
  padding: 10px;
  /* Padding per lasciare spazio all'icona */
  border: 1px solid #ccc;
  /* Bordo dell'input */
  border-radius: 4px;
  /* Bordo arrotondato */
  font-size: 16px;
  /* Dimensione del testo */
  box-sizing: border-box;
  /* Includi padding e bordo nella larghezza totale */
}

/* STICKY FILTERS */
.grid {
  display: block;
  overflow-y: auto;
  max-height: calc(100vh - 85px);
  /* Regola in base al tuo layout */

  /* flex: 1; /* Prende tutto lo spazio rimanente */
  /* min-height: 0; /* Importante per Firefox */
}

.grid thead,
.grid tbody {
  display: block;
  width: 100%;
}

.grid .rigafiltri {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

.grid tbody {
  overflow-y: auto;
  max-height: calc(100vh - 123px);
  /* Regola in base al tuo layout */
}

.grid tr {
  /* display: table; */
  width: 100%;
  table-layout: fixed;
  transition: background-color 0.3s ease;
}

.grid td .immagine {
  background-color: transparent;
  padding: 0px
}

.grid td .immagine img {
  width: 87px;
  max-width: 87px;
  min-width: 87px;
  height: 87px;
  max-height: 87px;
  min-height: 87px;
}

.grid td .numero,
.grid td .stringa,
.grid td .data,
.grid td .boolean {
  padding: 6px;
  height: 75px;
  width: -webkit-fill-available;
}

.grid td .etichetta {
  border-radius: 10px;
  padding: 2px 4px;
  border: 1px solid black;
  background-color: lightyellow;
  text-align: center;
}

.grid td .left {
  text-align: left
}

.grid td .center {
  text-align: center
}

.grid td .right {
  text-align: right
}

.grid-container {
  padding: 10px 10px 0px 10px
}

@media (min-width: 1280px) {
  .grid-container {
    max-width: calc(100vw - 245px);
  }
}

.grid-titolo-container {
  width: 100%;
  margin-bottom: 2px;
}

.grid-titolo {
  background-color: black;
  padding: 0px 5px;
  border-radius: 10px;
  min-width: 100px;
  color: white;
  min-height: 36px;
}

/* STICKY FILTERS - fine */

.sortBar {
  background-color: lightblue;
  margin: 0px;
  border-radius: 10px;
  position: absolute;
  z-index: 100;
  right: 10px;
  top: 55px;
  width: min-content;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

;
@media (max-width:500px) {
  .sortBar {
    top: 96px
  }
}

.sortBar-container {
  margin-left: 12px;
  /* flex-shrink: 0; /* Non si riduce */
  /* height: 80px;*/
  background-color: rgb(255, 255, 255, 0.3);
  padding: 12px;
  border-radius: 5px;
  max-height: 48px;
}

.mini-sortBar .md-chips {
  font-size: 12px;
  padding: 0px
}

.mini-sortBar .md-chips md-chip {
  border-radius: 8px;
  height: 25px;
  line-height: 25px;
  margin: 4px 4px 0 0;
}

.mini-sortBar .md-chips md-chip .md-chip-remove {
  width: 25px;
  height: 25px;
}

.menu-item-hover {
  padding: 13px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-item-hover:hover {
  background-color: #eeeeee;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  min-width: 150px;
  border-radius: 4px;
  overflow: hidden;
}

.context-menu-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  border-bottom: 1px solid silver;
}

.context-menu-item:hover {
  background-color: #f0f0f0;
}

.context-menu-item:active {
  background-color: #e0e0e0;
}

/* === CSS PER IL GRID E LA SORTBAR (fine) === */

/* === CSS PER RESIZE COLONNE == */
/* Stile per il resize handle */
.grid td {
  position: relative;
  min-width: 50px;
  width: 50px;
  background-color: white;
}

.grid td.icona {
  min-width: 32px;
  max-width: 32px;
  background-color: transparent;
  text-align: center;
}

.grid td.icona img {
  width: 30px;
}

/* Feedback visivo durante il resize */
.grid td.resizing {
  background-color: #f0f0f0;
  user-select: none;
}

/* Previeni selezione testo durante drag */
.grid.resizing-active {
  user-select: none;
  cursor: col-resize;
}

/* Hover sul resize handle */
.grid td [column-resizer]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
}

.resize-handle:hover {
  background: rgba(33, 150, 243, 0.3);
}

.resize-handle:active {
  background: rgba(33, 150, 243, 0.5);
}

.excel-icon {
  width: 25px;
  height: 25px;
  animation: pulse 1s infinite;
}

/* definire animazioni personalizzate */
@keyframes pulse {

  /* Grigio Chiaro e occupa metà dell'animazione */
  0%,
  49% {
    transform: scale(0.8);
    /* dimensione ridotta all'80% */
    filter: grayscale(100%) brightness(0.8);
  }

  /* Giallo e occupa il resto dell'animazione*/
  50%,
  100% {
    transform: scale(1);
    /* dimensione normale */
    filter: brightness(0) saturate(100%) invert(85%) sepia(94%) saturate(1453%) hue-rotate(358deg) brightness(107%) contrast(104%);
  }
}