:root {
    --primary-color: #377af4;
    --button_hov: #2d64c9;
    --text_color_contrast:white;
    --table-free:Grey;
    --generic-color:black;
    --prent-color:blue;
    --ocup-color:red;
    --opt-hov:#DEE3E8;
    --note-color:Grey;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.loghh_new{
  width: 73%;
  margin-top: 18px;
  margin-bottom: 5vh;
}
.loghh{
  height: 10vh;
  margin-top: 18px;
  mix-blend-mode: multiply;
}
.logofooter{
  height: 11vh;
  margin-top: -21px;
}
.logindiv{
    text-align: center;
    border: 1px solid var(--primary-color);
    border-radius: 54px;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: 12vw;
    margin-right: 12vw;
    padding-top: 4vh;
    background: white;
    padding-bottom: 4vh;
}
footer {
  position: absolute;
    bottom: 0;
    width: 100%;} 

.inputstyle{

    border: 1px solid var(--primary-color);
    width: 13rem;

}
.inputbuttonlog{
  color: var(--text_color_contrast);
  background-color: var(--primary-color);
  border-radius: 5px;
  width: 13rem;
  border: 0px solid var(--primary-color);
  margin:1rem;
}
.inputbutton{
  position: relative; /* fondamentale per ancorare il badge */
  color: var(--text_color_contrast);
  background-color: var(--primary-color);
  border-radius: 5px;
  width: 13rem;
  height: 13rem;
  border: 0px solid var(--primary-color);
  margin: 1rem;
}
.inputbutton:hover{
    background-color: var(--button_hov);

}
  
  .topnav button {
    color:var(--text_color_contrast);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
    background: var(--primary-color);
    border: 0px solid var(--primary-color);
  }

.topnav button:hover{
    background-color: var(--button_hov)
}

      @media (max-height: 500px) {
          footer{
            display: none;
          }
      }

.imgbuttonhei{
  height: 5vh;
}

.divspace{
  height: 10vh;

}
label{
  text-align: left;
}

.buttonpas{
  position: absolute;
  border: 0px;
  background: none;
  margin-left: -33px;
}


@media (max-width: 768px) {
  .divspace{
    height: 5vh;
  }
}


  .badge {
    position: absolute;   /* rispetto al bottone */
    top: 8px;            
    right: 8px;          
    background: #ff0a0a;
    color: white;
    border-radius: 50%;   /* lo rende un cerchio */
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;        /* centra il testo */
    align-items: center;
    justify-content: center;
    width: 28px;          /* diametro minimo */
    aspect-ratio: 1 / 1;  /* mantiene il cerchio perfetto */
  }

  .badge_cart{
    position: absolute;
    top: 8px;
    right:-13px;
    background: #ff0a0a;
    color: white;
    border-radius: 6%;
    font-size: 0.9rem;
    font-weight: bold;
    padding-left: 13px;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-right: 13px;
  }

  .inputbutton img {
  transition: transform 0.3s ease; /* effetto smooth */
}

.inputbutton:hover img {
  transform: scale(1.05);
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0% { transform: scale(1.05) rotate(0deg); }
  25% { transform: scale(1.05) rotate(5deg); }
  50% { transform: scale(1.05) rotate(-5deg); }
  75% { transform: scale(1.05) rotate(5deg); }
  100% { transform: scale(1.05) rotate(0deg); }
}

.disabled-option {
background-color: #e0e0e0 !important; /* Sfondo grigio */
color: #888 !important; /* Testo più chiaro */
cursor: not-allowed; /* Mostra il cursore di divieto */
pointer-events: none; /* Impedisce il clic */
}

.option-item {
padding-left: 10px !important; /* Aggiunge spazio a destra */
}
.selectize-control.single .selectize-input {
padding-right: 2.5em; /* Aggiusta il valore in base alle dimensioni della freccia */
}

/* Se vuoi aggiungere padding anche quando l'elemento è selezionato */
.selectize-control .selectize-input > div {
padding-left: 10px !important;
}

.truebox{
  border: 1px solid green;
    padding: 10px;
    margin-top: 10px;
    background: #f6fdf6;
}
/* =========================================
   STRUTTURA BASE
   ========================================= */
body { 
    background-color: #f4f7f9; 
    color: #334155; 
}

.main-container { 
    padding-top: 40px; 
    padding-bottom: 60px; 
}

.loghh { 
    max-height: 80px; 
    margin-bottom: 30px; 
}

/* =========================================
   CARD E PANNELLI
   ========================================= */
.card-custom {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background: #fff;
    margin-bottom: 25px;
    padding: 25px;
}

.card-header-custom {
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-custom h1 { 
    margin: 0; 
    font-size: 1.5rem; 
    font-weight: 600; 
    color: #1e293b; 
}

#div_ref_new { 
    background: #fdfdfd; 
    border: 1px dashed #cbd5e1; 
    border-radius: 10px; 
    margin-top: 10px; 
    padding: 15px; /* Consigliato per evitare che il testo tocchi i bordi */
}

/* =========================================
   PULSANTI
   ========================================= */
.btn-primary { 
    background-color: #2563eb; 
    border: none; 
    padding: 10px 20px; /* Media tra 8px/16px e 12px/25px */
    border-radius: 8px; 
    font-weight: 600; 
}
.btn-primary:hover { background-color: #1d4ed8; }

.btn-outline-primary { 
    border-radius: 8px; 
    font-weight: 600; 
    border-width: 2px; 
}

.btn-light-custom { 
    background-color: #f1f5f9; 
    color: #475569; 
    border: none; 
    font-weight: 600; 
    border-radius: 8px; 
    padding: 8px 16px; /* Aggiunto padding di default */
}
.btn-light-custom:hover { background-color: #e2e8f0; color: #1e293b; }

/* =========================================
   FORM E TESTI INFORMATIVI
   ========================================= */
label { 
    font-weight: 500; 
    margin-bottom: 5px; 
    margin-top: 15px; 
    color: #64748b; 
    font-size: 0.95rem; 
}

.form-control { 
    /*border-radius: 8px !important; */
    border: 1px solid #d1d5db; 
    padding: 10px 15px; 
}
.form-control:focus { 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); 
    border-color: #3b82f6; 
}

.info-p { margin-bottom: 10px; font-size: 1rem; }
.info-p strong { 
    color: #94a3b8; 
    font-weight: 500; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    display: block; 
}
.info-val { font-weight: 600; color: #1e293b; }

/* =========================================
   TABELLA TICKET
   ========================================= */
.table-custom th {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
}

.table-custom td {
    vertical-align: middle;
    color: #1e293b;
    font-size: 0.95rem;
    padding: 15px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.table-custom tbody tr:hover { background-color: #f8fafc; }

/* =========================================
   BADGE DI STATO
   ========================================= */
.status-badge { 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    display: inline-block;
}

.status-open { background-color: #dbeafe; color: #1e40af; }
.status-progress { background-color: #fef08a; color: #854d0e; }
.status-closed { background-color: #dcfce3; color: #166534; }



/* Logo aziendale */
.loghh {
    max-width: 200px;
    height: auto;
}

/* Card personalizzata */
.card-custom {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.card-header-custom {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem;
}

/* Stili per la tabella */
.table-custom {
    font-size: 0.95rem;
}

.table-custom th {
    font-weight: 600;
    color: #495057;
    padding: 1rem;
}

.table-custom td {
    padding: 1rem;
    vertical-align: middle;
}

/* Bottoni personalizzati nella tabella */
.btn-light-custom {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    transition: all 0.2s;
}

.btn-light-custom:hover {
    background-color: #e9ecef;
    color: #0d6efd;
    border-color: #c1c9d0;
}

/* Badge degli stati (Status Badges) */
.status-badge {
    padding: 0.4em 0.8em;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 20px;
    display: inline-block;
}

.status-open {
    background-color: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.status-progress {
    background-color: #fef08a;
    color: #a16207;
    border: 1px solid #fde047;
}

.status-closed {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Personalizzazione Input Search */
.input-group-text {
    background-color: #f8f9fa;
}
.form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}


        /* =========================================
           STILI AGGIUNTIVI PER LA CHAT (Avanzamenti)
           Puoi spostare questi stili nel tuo file miostile.css
           ========================================= */
        .chat-container {
            max-height: 500px;
            overflow-y: auto;
            padding: 15px;
            background-color: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        .chat-message {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        /* Messaggio del Cliente (Allineato a destra) */
        .chat-message.customer {
            align-items: flex-end;
        }
        
        /* Messaggio Assistenza/Staff (Allineato a sinistra) */
        .chat-message.staff {
            align-items: flex-start;
        }

        .chat-bubble {
            max-width: 80%;
            padding: 12px 18px;
            border-radius: 18px;
            font-size: 0.95rem;
            line-height: 1.4;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .chat-message.customer .chat-bubble {
            background-color: #2563eb;
            color: #ffffff;
            border-bottom-right-radius: 4px;
        }

        .chat-message.staff .chat-bubble {
            background-color: #ffffff;
            color: #1e293b;
            border: 1px solid #e2e8f0;
            border-bottom-left-radius: 4px;
        }

        .chat-meta {
            font-size: 0.75rem;
            color: #64748b;
            margin-top: 6px;
            padding: 0 5px;
        }

        .chat-input-area {
            background-color: #ffffff;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
            margin-top: 20px;
        }

                /* CSS per la Chat degli Avanzamenti */
        .chat-container {
            max-height: 500px;
            overflow-y: auto;
            padding: 15px;
            background-color: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        .chat-message {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .chat-message.customer { align-items: flex-end; }
        .chat-message.staff { align-items: flex-start; }

        .chat-bubble {
            max-width: 80%;
            padding: 12px 18px;
            border-radius: 18px;
            font-size: 0.95rem;
            line-height: 1.4;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            word-wrap: break-word;
        }

        .chat-message.customer .chat-bubble {
            background-color: #2563eb;
            color: #ffffff;
            border-bottom-right-radius: 4px;
        }

        .chat-message.staff .chat-bubble {
            background-color: #ffffff;
            color: #1e293b;
            border: 1px solid #e2e8f0;
            border-bottom-left-radius: 4px;
        }

        .chat-meta {
            font-size: 0.75rem;
            color: #64748b;
            margin-top: 6px;
            padding: 0 5px;
        }

        .chat-input-area {
            background-color: #ffffff;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
            margin-top: 20px;
        }