/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Centra logo OAD - versione forte */
.logo-container {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.logo-container img.logo {
  display: block !important;
  max-width: 260px;
  height: auto;
}

.navbar,
header {
  position: relative !important;
}
/* Sfondo generale OAD */
body {
  background: linear-gradient(135deg, #f2f6fa 0%, #e7eff6 50%, #f4f8fb 100%) !important;
  font-family: Arial, Helvetica, sans-serif;
  color: #243447;
}

/* Box centrale bianco */
.container,
.survey-container,
.group-container,
#welcome-container {
  background: #ffffff;
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 56, 91, 0.06);
}

/* Welcome e pagine domande */
#welcome-container,
.group-container {
  max-width: 980px;
  margin: 24px auto;
  padding: 28px 32px;
}

/* Accento superiore */
#welcome-container {
  border-top: 4px solid #1f5f99;
}

.group-container {
  border-top: 3px solid #e3ebf3;
}

/* Mobile */
@media (max-width: 768px) {
  #welcome-container,
  .group-container,
  .container,
  .survey-container {
    max-width: 100% !important;
    margin: 12px 8px !important;
    padding: 16px 14px !important;
    border-radius: 10px;
  }
}
/* =========================================
   OAD - MATRICE S2d1 MOBILE FRIENDLY
   ========================================= */

@media (max-width: 768px) {

  .ls-answers,
  .answer-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ls-answers table,
  .question-container table {
    min-width: 620px;
    width: max-content;
    border-collapse: collapse;
  }

  .ls-answers table th,
  .ls-answers table td,
  .question-container table th,
  .question-container table td {
    font-size: 14px;
    padding: 8px 6px;
    vertical-align: middle;
    white-space: normal;
  }

  .ls-answers table th:first-child,
  .ls-answers table td:first-child,
  .question-container table th:first-child,
  .question-container table td:first-child {
    min-width: 260px;
    max-width: 320px;
  }

  .ls-answers table th:not(:first-child),
  .ls-answers table td:not(:first-child),
  .question-container table th:not(:first-child),
  .question-container table td:not(:first-child) {
    min-width: 150px;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .ls-answers table,
  .question-container table {
    min-width: 560px;
  }

  .ls-answers table th:first-child,
  .ls-answers table td:first-child,
  .question-container table th:first-child,
  .question-container table td:first-child {
    min-width: 230px;
  }

  .ls-answers table th:not(:first-child),
  .ls-answers table td:not(:first-child),
  .question-container table th:not(:first-child),
  .question-container table td:not(:first-child) {
    min-width: 140px;
  }
}
/* =========================================
   OAD - UX MOBILE MATRICI S2d1 / S2d2
   ========================================= */

@media (max-width: 768px) {

  /* contenitore scroll orizzontale */
  .ls-answers,
  .answer-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* tabella matrice */
  .ls-answers table,
  .question-container table {
    width: max-content;
    min-width: 640px;
    border-collapse: collapse;
  }

  /* celle */
  .ls-answers table th,
  .ls-answers table td,
  .question-container table th,
  .question-container table td {
    font-size: 14px;
    padding: 8px 6px;
    vertical-align: middle;
  }

  /* prima colonna: testo della tecnica / tipologia */
  .ls-answers table th:first-child,
  .ls-answers table td:first-child,
  .question-container table th:first-child,
  .question-container table td:first-child {
    min-width: 270px;
    max-width: 330px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* colonne 2025 e 1° quadrimestre 2026 */
  .ls-answers table th:not(:first-child),
  .ls-answers table td:not(:first-child),
  .question-container table th:not(:first-child),
  .question-container table td:not(:first-child) {
    min-width: 115px;
    text-align: center;
  }

  /* checkbox più comode */
  .ls-answers input[type="checkbox"] {
    transform: scale(1.2);
  }
}

/* Smartphone piccoli */
@media (max-width: 480px) {

  .ls-answers table,
  .question-container table {
    min-width: 600px;
  }

  .ls-answers table th:first-child,
  .ls-answers table td:first-child,
  .question-container table th:first-child,
  .question-container table td:first-child {
    min-width: 250px;
    max-width: 300px;
    font-size: 12.5px;
  }

  .ls-answers table th:not(:first-child),
  .ls-answers table td:not(:first-child),
  .question-container table th:not(:first-child),
  .question-container table td:not(:first-child) {
    min-width: 105px;
  }
}
/* Sticky footer navigazione */
#navigator-container {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
.progress-bar {
  background: linear-gradient(90deg, #1f5f99, #2f78b5);
}

/* =========================================
   OAD - STAMPA RIEPILOGO QUESTIONARIO
   ========================================= */

.oad-hidden {
  display: none !important;
}

.oad-critical-item {
  border-left: 4px solid #d32f2f;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff8f8;
  border-radius: 6px;
}

.oad-critical-question {
  font-weight: 600;
  color: #243447;
  margin-bottom: 8px;
  line-height: 1.45;
}

.oad-critical-answer {
  display: block;
  color: #b00020;
  font-size: 14px;
  font-weight: 600;
}

@media print {
  body * {
    visibility: hidden !important;
  }

  #oad-print-area,
  #oad-print-area * {
    visibility: visible !important;
  }

  #oad-print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 30px !important;
    background: #ffffff !important;
    color: #243447 !important;
  }

  #oad-print-button {
    display: none !important;
  }

#welcome-container,
#survey-welcome,
.survey-welcome {
  max-width: 980px !important;
  width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}