/* Impostazioni di base */
*, *::before, *::after { box-sizing: border-box; }

td{
  color: #fafafa;
  font-weight: 700;
}

/* Pulsanti coerenti col tema */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 40px;
  border:none; border-radius:0;
  text-transform:uppercase; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:background .2s ease;
}
.btn-primary { background:#fbb900; color:#000; }
.btn-primary:hover { background:#e0a800; }
.btn-secondary { background: color-mix(in oklab, canvas 85%, canvastext 15%); color: canvastext; }
.btn-secondary:hover { background: color-mix(in oklab, canvas 80%, canvastext 20%); }

/* DataTables: header e righe */
table.dataTable thead th { background: color-mix(in oklab, canvas 92%, transparent); }
table.dataTable tbody td .btn { padding:6px 10px; }

/* ===== Modal (coerente con index.html) ===== */
.modal {
  display: none;                 /* JS -> 'flex' quando aperto */
  position: fixed;
  z-index: 100;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-content {
  position: relative;
  background: canvas;
  color: canvastext;
  /* border-radius: 12px; */     /* tienilo commentato per stessi spigoli di index */
  padding: 24px 28px;
  max-width: 420px;              /* <- come index */
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-content h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;            /* <- come index */
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}

/* Form nel modal (campi, select, bottone) */
#eventForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#eventForm label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
#eventForm input,
#eventForm select {
  display:block;
  width: 100%;
  padding: 10px 12px;                 /* <-- padding laterale ripristinato */
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, canvastext 20%, transparent);
  background: canvas; color: canvastext;
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#eventForm .btn {
  margin-top: 8px;
  width: 100%;
  border: none;
  font-weight: 600;
  padding: 12px;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s ease;
  /* niente override colore: eredita i gialli/tema globali .btn */
}

/* Messaggi di errore */
.error-msg { color: crimson; font-size: 13px; min-height: 18px; }

/* Mobile: stessa logica di index */
@media (max-width: 430px) {
  
}

/* Logo header */
.brand .logo { max-height:75px; height:auto; width:auto; display:block; }

/* Stile del select "Mostra N elementi" */
.dataTables_length select {
  min-width: 80px;
  padding: 6px 8px;
  background: canvas;
  color: canvastext;
  border: 1px solid color-mix(in oklab, canvastext 20%, transparent);
  border-radius: 8px;
}

/* Contenitore filtro */
.dataTables_filter {
  margin: 0 12px 12px 12px;
  position: relative;
}
.dataTables_filter label { display: block; }

/* Input di ricerca: padding come i bottoni, sfondo bianco */
.dataTables_filter input[type="search"] {
  padding: 12px 40px;                  /* come .btn (12px 40px) */
  min-height: 44px;                    /* altezza coerente con i bottoni */
  background: #fff;                    /* sempre bianco */
  color: canvastext;
  border: 1px solid color-mix(in oklab, canvastext 20%, transparent);
  border-radius: 0;                    /* come i bottoni */
  font-size: 14px;
  letter-spacing: .05em;
  box-shadow: none;
  outline: none;
  width: clamp(220px, 24vw, 360px);    /* ampiezza gradevole vicino ai bottoni */
  transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

/* Placeholder interno */
.dataTables_filter input[type="search"]::placeholder {
  color: color-mix(in oklab, canvastext 60%, transparent);
  opacity: 1;
}

/* Hover / focus (coerente col tema) */
.dataTables_filter input[type="search"]:hover {
  border-color: color-mix(in oklab, canvastext 35%, transparent);
}
.dataTables_filter input[type="search"]:focus {
  border-color: #fbb900;
  box-shadow: 0 0 0 3px rgba(251,185,0,.25);
  transform: translateY(1px);
}

/* (Opz.) Icona lente decorativa */
.dataTables_filter::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .75;
  pointer-events: none;
}

/* Sfondo giallo per Operatore */
#eventsTable tr.row-operatore td {
  background-color: #fbb900; /* giallo chiaro */
}

/* Sfondo rosso per Causale */
#eventsTable tr.row-causale td {
  background-color: rgb(211, 47, 47) !important;
}

/* Bottone Modifica */
.btn-modifica{
  background-color: #046a38 !important;
}

@media (max-width: 640px) {
    .btn { width: 100%; }
    #linkEventi { width: 100%; }
    #linkCronologia { width: 100%; }
    #linkCalendario { width: 100%; }
    #linkIVR { width: 100%; }
}

@media (max-width: 430px) {
  .brand .logo {
      max-height: 46px;
  }
}