* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  background-color: black;
  text-transform: uppercase;
}

.layout {
  flex: 1;
  display: flex;
  height: calc(100vh - 60px);
  /* sottrae l'altezza della topbar */
  background-color: black;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 220px;
  background-color: #1e1d2c;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* angoli arrotondati del div */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* ombra generale del div */
  border: 2px solid rgba(145, 144, 173, 0.3);
  height: calc(100vh - 60px);
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed~.main {
  margin-left: 80px;
}

.sidebar h2 {
  margin-bottom: 30px;
  font-size: 20px;
  color: white;
  font-weight: 200;
}

.sidebar a {
  color: rgba(242,242,248,0.87);
  text-decoration: none;
  margin-bottom: 15px;
  display: block;
  font-size: 17px;
  font-weight: 200;
}

.sidebar.collapsed span {
  display: none;
}

/* Main */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: black;
  overflow-x: hidden;
  margin-left: 230px;
  transition: margin-left 0.3s ease;
}

/* Topbar */
.topbar {
  height: 60px;
  background-color: black;
  padding: 10px 20px;
  color: rgba(242,242,248,0.87);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h1 {
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
}

.topbar .actions button {
  background-color: #2f80ed;
  color: rgba(242,242,248,0.87);
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

/* Table-like content */
.board {
  position: relative;
  padding: 20px;
  margin-left: 10px;
  background-color: #1e1d2c;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* angoli arrotondati del div */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* ombra generale del div */
  height: 100%;
  border: 2px solid rgba(145, 144, 173, 0.3);
  padding-bottom: 0;
  padding-right: 0;
}

.table-activities,
.table-tasks,
.table-users {
  width: 100%;
  table-layout: fixed;
  background-color: transparent;
  border-collapse: separate;
  background-color: transparent;
  border-spacing: 0 6px !important;
  margin-bottom: 40px;
}

.table-activities > tbody > tr:hover > *,
.table-tasks > tbody > tr:hover > *,
.table-users > tbody > tr:hover > * {
   background-color:#464564; !important;
}
  
.table-activities th,
.table-activities td,
.table-tasks th,
.table-tasks td,
.table-users th,
.table-users td  {
  text-align: left;
  font-size: 0.875rem;
  color: rgba(242,242,248,0.87) !important;
  overflow: hidden;
  font-weight: 400 !important;
  padding: .42rem .5rem !important;
  border: none;
  background-color: #39374F;
  padding: 12px;
  border-left: 2px solid rgba(145, 144, 173, 0.3);
  word-break: break-word;
}

.table-activities thead th,
.table-tasks thead th,
.table-users thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.round-left-tr {
  border-left: 5px solid #0d6efd;
  /* Bordo sinistro */
  border-radius: 10px;
  padding: 10px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.round-right-tr {
  border-right: 5px solid #1e1d2c;
  /* Bordo sinistro */
  border-radius: 10px;
  padding: 0 12px;
}

.table-wrapper .round-left-tr.state1 {
  border-left: 10px solid #ffa000;
  /* Bordo sinistro */
}

.table-wrapper .round-left-tr.state2 {
  border-left: 10px solid #00c875f2;
  /* Bordo sinistro */
}

.table-wrapper .round-left-tr.state3 {
  border-left: 10px solid #e91e63;
  /* Bordo sinistro */
}

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

.table-activities td:last-child {
  text-align: center;
}

.table-scroll {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

.table-scroll h4 {
  font-weight: 300;
  font-size: 24px;
  text-transform: uppercase;
  color: rgba(242,242,248,0.87);
  margin-bottom: 20px;
}

.table-scroll h2 {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  color: #2f80ed;
  margin: 0;
  padding: 0;
}

.table-scroll h2.state2 {
  color: rgb(0, 200, 117);
}

.table-scroll h2.state1 {
  color: #ffa000;
}

.table-scroll h2.state3 {
  color: #e91e63;
}

.table-wrapper {
  position: relative;
  border-radius: 8px;
}

.table-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  /*background-color: #2f80ed;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;*/
  z-index: 11;
}

.open-panel, .open-task, .open-user {
  color: white !important;
  cursor: pointer;
}

.open-panel:hover, .open-task:hover, .open-user:hover {
  color: #4e8aff !important;
}

#table-user-select,
#table-task-select {
  border-spacing: 0 6px !important;
  border-collapse: separate;
  margin: 0;
}

#table-user-select tbody tr td,
#table-task-select tbody tr td {
  text-align: center;
  background-color: #79789c4d;
  border-radius: 5px;
  padding: 6px;
}

#table-user-select tbody tr td:hover,
#table-task-select tbody tr td:hover {
  background-color: #464564;
  cursor: pointer;
}

/*
.table-activities th:nth-child(1),
.table-activities td:nth-child(1),
.table-activities th:nth-child(2),
.table-activities td:nth-child(2) {
  position: sticky;
  left: 0;
  background: white;
  z-index: 11;
  box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1); 
}*/

#table-tasks table tr td {
  text-align: center !important;
}

#table-users table tr td {
  text-align: center !important;
}

#table-roles table tr td {
  text-align: center !important;
}

.status {
  text-align: center !important;
}

td.users,
td.request_users {
  white-space: nowrap;
}

.status_tag,
.role_tag,
.user_tag,
.request_user_tag {
  border-radius: 4px;
  font-size: 0.640rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  line-height: 25px;
}

span.user_tag,
span.request_user_tag {
  font-weight: 500;
  font-size: 0.765rem;
  padding: 3px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 7px;
}

.container-user-tag {
  background-color: #79789c4d;
  padding: 8px;
  border-radius: 5px;
}

.detail-panel {
  position: fixed;
  top: 60px;
  right: -100%;
  width: 50%;
  height: 100%;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
  z-index: 1031;
  background-color: #39374F;
  color: rgba(242,242,248,0.87);
}

.detail-panel.open {
  right: 0;
}

.detail-content {
  padding: 20px;
  overflow-y: auto;
  height: 100%;
  position: relative;
}

.close-detail {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Modal invisibile per default */
.loading-modal,
.loading-modal-panel {
  display: block;
  /* sarà mostrato con JS */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.loading-modal-panel {
  display: none;
  z-index: 1030;
}

/* Sfondo sfocato semi-trasparente */
.loading-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

/* Contenuto centrale */
.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  border: 2px solid rgba(145, 144, 173, 0.3);
  background-color: #1e1d2c;
  color: rgba(242,242,248,0.87);
  font-weight: 300;
}

/* Spinner CSS */
.spinner {
  margin: 0 auto 15px;
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#detail-request-table,
#detail-message-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: rgba(242,242,248,0.87);
}

#detail-request-table td,
#detail-message-table td {
  background-color: transparent;
  color: rgba(242,242,248,0.87);
  font-weight: 300;
  font-size: 14px;
}

#detail-request-table td
{
	padding:3px 20px !important;
	min-width:150px;
}

.editable-message {
  width: 100%;
  background-color: #79789c4d;
  border: 0;
  font-size: 14px;
  color: rgba(242,242,248,0.87);
}

.form-control:focus,
.editable-message:focus {
  background-color: #f0f8ff !important;
  color: black;
  /* Azzurrino */
  outline: none !important;
  /* Rimuove il bordo blu predefinito */
}

.editable-message option:focus {
  color: #000 !important;
  /* testo nero */
  background-color: #fff;
  /* sfondo bianco */
}

.editable-message::placeholder {
  color: rgba(242,242,248,0.87);
  font-weight: 200;
}

#detail-request-table button {
  font-size: 13px;
}

#dettagli {
  background-color: #38374f;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  border: 2px solid rgba(145, 144, 173, 0.3);
}

#dettagli,
#messaggi {

  border-collapse: separate;
  border-spacing: 0;
}

.table-messaggi-wrapper {
  border: 2px solid rgba(145, 144, 173, 0.3) !important;
  background-color: #38374f !important;
  border-radius: 10px;
  margin-bottom: 10px;
}

.table-messaggi-wrapper table {
  margin-bottom: 0;
}

.table-messaggi-wrapper table tbody tr td {
  background-color: transparent !important;
  color: rgba(242,242,248,0.87);
}

.update {
  cursor: pointer;
}

#myTabContent {
  margin-top: 10px;
  font-size: 13px;
  background-color: #272638;
  color: rgba(242,242,248,0.87);
  border: 2px solid rgba(145, 144, 173, 0.3) !important;
}

.nav-tabs {
  --bs-nav-tabs-border-width: 0 !important;
  font-size: 12px !important;
}

.nav-link {
  background-color: transparent !important;
  color: rgba(242,242,248,0.87) !important;
  border-radius: 10px !important;
}

.nav-link.active {
  background-color: #79789c4d !important;
}

.comment-card {
  border: 2px solid rgba(145, 144, 173, 0.3);
  border-radius: 10px;
  padding: 0;
  background-color: #79789c4d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #8bc34a;
  color: rgba(242,242,248,0.87);
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.comment-body {
  /*padding: 0.75rem;*/

}

.comment-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
 color: rgba(242,242,248,0.87);
  font-size: 1rem;
}

.comment-footer .message-btn {
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.editable-message-wrapper {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #1e1d2c;
  background-color: #79789c4d;
}

.editable-message {
  border: 0;
  padding: 10px;
  min-height: 40px;
  flex-grow: 1;
  border-radius: 5px;
  text-transform:uppercase;
}

.save-message-btn {
  display: none;
  white-space: nowrap;
  cursor: pointer;
}

tr.separator {

  background-color: rgba(145, 144, 173, 0.3);
  padding: 0;
}

tr.separator>td {
  padding: 0;
  height: 1px;
}

.tippy-box[data-theme~='custom'] {
  background-color: #1e1d2c;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(145, 144, 173, 0.3);
  max-height: 350px;
  overflow-y: scroll;
}

.tippy-box[data-theme~='custom'][data-placement^='top']>.tippy-arrow {
  border-top-color: rgba(145, 144, 173, 0.3);
}

.tippy-box[data-theme~='custom'][data-placement^='bottom']>.tippy-arrow {
  border-bottom-color: rgba(145, 144, 173, 0.3);
}

.tippy-arrow {
  color: rgba(145, 144, 173, 0.3);
}

.add-commento {
  cursor: pointer;
}

.add-commento:hover {
  background-color: #79789c4d !important;
}

/* Per Chrome, Edge, Safari */
/* Contenitore della scrollbar */
::-webkit-scrollbar {
  width: 8px;
  /* larghezza verticale */
  height: 8px;
  /* altezza orizzontale */
}

/* Sfondo del binario (track) */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

/* Thumb (il cursore che si muove) */
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

/* Al passaggio del mouse */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Per Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: red transparent;
}

.bullet-item {
  font-size: 13px;
  margin-bottom: 10px;
}

.bullet-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #000;
  /* colore del cerchio */
  border-radius: 50%;
  /* rende il quadrato un cerchio */
  margin-right: 8px;
  vertical-align: middle;
}

.swal2-popup {
  font-size: 14px;
  background-color: #1e1d2c;
  border: 2px solid rgba(145, 144, 173, 0.3);
  color: white;
}

.swal-label {
  display: block;
  text-align: left !important;
  font-size: 14px;
  font-weight: 400;
}

.swal2-confirm {
  background-color: #0d6efd !important;
  /* verde, per esempio */
  color: white !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: uppercase;
}

.swal2-confirm:hover {
  background-color: #0b5ed7 !important;
  /* verde scuro al hover */
  color: #4e8aff !important;
}


/* Rende sticky la prima colonna */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: transparent;
  box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.30) !important;
  /* Ombra a destra */
}

.sticky-col-r {
  position: sticky;
  right: 0;
  z-index: 2;
  background-color: transparent;
  box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.30) !important;
  /* Ombra a destra */
}

/* Per evitare che venga coperta da altre colonne */
.table-activities thead th.sticky-col,
.table-tasks thead th.sticky-col,
.table-users thead th.sticky-col {
  z-index: 12 !important;
}

th.sortable {
  cursor: pointer;
}

.sort-arrow {
  font-size: 14px;
  color: #fff;
  float: right;
}

#fileLabel {
  display: inline-block;
  padding: 0.5em 1em;
  border: 0px solid #ccc;
  border-radius: 4px;
  background: #79789c4d;
  font-size: 0.9em;
  width: 100%;
  text-align: left;
  color: white;
}

.labelTitleTask {
  font-size: 20px;
  text-transform: uppercase;
  padding: 5px;
  width: 96%;
  font-size: 20px;
  border-radius: 6px;
}

.selectpage {
  background-color: #1e1d2c !important;
}

#pagination_container {
  position: fixed;
  bottom: 10px;
  width: 100%;
  background-color: #39374F;
  padding: 6px;
  color: white;
  z-index: 12;
  border-top: 2px solid black;
}

#pagination_container table {
  position: sticky;
  bottom: 0;
  width: 100%;
}

#pagination-footer {
  background-color: #39374F;
  ;
}

.filter
{
    background-color: #39374F;
    padding:10px;
    border-radius:10px;
    position:sticky;
    left:0;
}
.filters-row .form-control, 
.filters-row .form-select {
    padding: 4px 8px;
    font-size: 0.875rem; /* più piccolo */
    height: auto;
    min-height: 30px !important;
    text-transform: uppercase;
}

.filters-row .form-select
{
    padding-right: 1.8rem; /* spazio per la freccia */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 7l3 3 3-3z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.2rem;
    background-size: 2rem;
    text-transform: uppercase !important;
}

.filters-row label {
    font-size: 0.75rem;
    margin-bottom: 2px;
    color: rgba(242,242,248,0.87);
}

.filters-row .form-group {
    margin-right: 8px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 60px;
	right: 10px;
	background-color: #38374f;
  	border-collapse: separate;
  	border-spacing: 0;
  	border-radius: 10px;
  	border: 2px solid rgba(145, 144, 173, 0.3);
    min-width: 150px;
    z-index: 101;
}

.dropdown-content a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: white;
}
    
    
.text-wrap-line
{
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.link-task {
  display: inline-flex;       /* usa flexbox */
  align-items: center;        /* centra verticalmente */
  gap: 6px;                   /* spazio tra icona e testo */
  text-decoration: none;      /* opzionale: rimuove sottolineatura */
}

.link-task span {
  margin-top: 0; /* togli il margin-top che avevi messo */
}


/* Contenitore principale */
.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    user-select: none;
    color: #32325d; /* Colore testo stile Stripe */
}

/* Nascondiamo la checkbox di sistema */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Creiamo il quadratino personalizzato */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 6px; /* Arrotondato come i bottoni moderni */
    transition: all 0.2s ease;
    border: 2px solid #e6e6e6;
}

/* Effetto hover */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #dfdfdf;
    border-color: #6772e5;
}

/* Colore quando è selezionata */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #6772e5; /* Blu moderno */
    border-color: #6772e5;
}

/* Creiamo l'icona del check (il baffo) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Mostriamo il baffo quando selezionato */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Stile del baffo (bianco) */
.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Spazio per il testo */
.label-text-preventivo{
  font-size: 12px;
}
.label-text-preventivo > a
{
	color:white;
}