/* =========================================================================
   Default - lista questionari nascosta - LimeSurvey 6.x
   Porting del template "default" di LimeSurvey 2.x.

   Il template di partenza era il default della 2.x lasciato intatto, con
   una sola modifica: surveylist.pstpl svuotato per nascondere l'elenco
   pubblico dei questionari. Quella parte e' in
   views/layout_survey_list.twig; qui c'e' la resa grafica del default 2.x.

   Palette dell'originale:
     testo            #1d2d45     sfondo domanda    #eef6ff
     titoli h1-h2     #328639     barra del gruppo  #d2e0f2
     bordo cornice    #bbc6cc     obbligatorio      red
     validazione      #ff00ff

   Blocchi:
     1. Variabili
     2. Cornice esterna (ex table.innerframe)
     3. Tipografia
     4. Domanda (ex td.questiontext / td.answer)
     5. Gruppo e descrizione
     6. Navigatore
     7. Messaggi di validazione
     8. Pagina della lista questionari
     9. Stampa
   ========================================================================= */

/* ---------- 1. Variabili ------------------------------------------------ */
:root {
    --def-navy: #1d2d45;
    --def-navy-dark: #14203a;
    --def-card: #eef6ff;
    --def-mid: #d2e0f2;
    --def-green: #328639;
    --def-frame: #bbc6cc;
    --def-valid: #ff00ff;
    --def-width: 75%;

    --bs-primary: #1d2d45;
    --bs-primary-rgb: 29, 45, 69;
}

/* ---------- 2. Cornice esterna ------------------------------------------ */
/* Ex "table.innerframe": 75% di larghezza, bordo 1px #BBC6CC, centrata. */

body {
    background-color: #ffffff;
    color: var(--def-navy);
}

#outerframeContainer > .row > .col-centered,
#outerframeContainer .col-centered.col-xl-8 {
    width: var(--def-width);
    max-width: 1100px;
    margin: 20px auto 40px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid var(--def-frame);
}

@media (max-width: 900px) {
    #outerframeContainer > .row > .col-centered,
    #outerframeContainer .col-centered.col-xl-8 {
        width: auto;
        padding: 12px;
    }
}

#main-col.space-col {
    margin-top: 0;
    margin-bottom: 0;
}

/* barra di avanzamento: ex td.graph, fondo blu intermedio */
.top-container {
    background-color: transparent;
}

.progress-bar {
    background-color: var(--def-navy);
}

/* logo: il default 2.x non ne aveva, ma l'opzione resta disponibile */
#survey-nav.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--def-frame);
    box-shadow: none;
}

#survey-nav .container-fluid {
    position: relative;
    justify-content: center;
}

#survey-nav .logo-container {
    float: none;
    margin: 0 auto;
    padding: 0;
    min-height: 0;
}

#survey-nav .logo-container > img {
    max-height: 90px;
    max-width: 100%;
    width: auto;
    padding: 10px 0;
}

#survey-nav #navbar-menu {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
}

/* ---------- 3. Tipografia ----------------------------------------------- */
/* Verdana 13px come nel default 2.x.
   >>> Per riattivare il selettore font delle opzioni tema, cancella
       questo blocco. <<< */
body[class*="font-"],
body[class*="font-"] .form-control,
body[class*="font-"] .form-select,
body[class*="font-"] .btn {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
    font-size: 13px;
    line-height: 1.4;
}

h1, .h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--def-green);
    margin-top: 0;
    margin-bottom: 12px;
}

h2, .h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--def-green);
    margin-top: 0;
    margin-bottom: 10px;
}

h3, .h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--def-navy);
}

.ls-welcometext,
.survey-description {
    text-align: left;
}

.x-questions,
.ls-count-questions {
    font-style: italic;
}

/* ---------- 4. Domanda -------------------------------------------------- */
/* Ex td.questiontext (fondo #EEF6FF, 12px grassetto) + td.answer. */

.question-container {
    background-color: var(--def-card);
    border: 0;
    border-radius: 0;
    margin: 0 0 2px;
    padding: 0;
    box-shadow: none;
}

.question-container.row,
#navigator-container.row {
    margin-left: 0;
    margin-right: 0;
}

.question-container > * {
    padding-left: 0;
    padding-right: 0;
}

.question-title-container {
    padding: 0.5em 1em;
    margin-bottom: 0;
}

.question-container .ls-label-question {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: var(--def-navy);
    margin-bottom: 0;
}

.answer-container {
    padding: 0.5em 1.5em;
}

/* asterisco: rosso, solo sulle domande obbligatorie */
.question-container .asterisk {
    color: red;
    font-size: 9px;
    padding-right: 1em;
    display: none;
}

.question-container.mandatory .asterisk {
    display: inline;
}

/* aiuto in fondo alla domanda (ex td.survey-question-help, 10px) */
.question-container .ls-questionhelp-container {
    font-size: 10px;
    padding-left: 1em;
}

.question-container .ls-questionhelp-container:empty {
    display: none;
}

/* ---------- 5. Gruppo e descrizione ------------------------------------- */
/* Ex table.group / table.question-group: barra blu intermedio, centrata. */

.group-title {
    background-color: var(--def-mid);
    padding: 6px 10px;
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--def-navy);
    text-align: center;
}

.group-description {
    font-size: 13px;
    padding: 4px 10px 10px;
}

/* ---------- 6. Navigatore ----------------------------------------------- */
/* Ex .navigator-table: fondo azzurro, pulsanti al centro. */

#navigator-container {
    justify-content: center;
    background-color: var(--def-card);
    margin-top: 2px;
    padding: 10px 0;
}

#navigator-container.space-col {
    margin-bottom: 0;
}

#navigator-container > div {
    flex: 0 0 auto;
    width: auto;
    text-align: center !important;
    padding: 0 8px;
}

#navigator-container > hr {
    display: none;
}

.ls-move-btn,
#navigator-container .btn {
    min-width: 110px;
    padding: 6px 1.5em;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
}

.btn-primary {
    background-color: var(--def-navy);
    border-color: var(--def-navy);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-check:focus + .btn-primary {
    background-color: var(--def-navy-dark);
    border-color: var(--def-navy-dark);
    color: #ffffff;
    box-shadow: none;
}

.btn-outline-secondary {
    color: var(--def-navy);
    border-color: var(--def-frame);
    background-color: #ffffff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #ffffff;
    background-color: var(--def-navy);
    border-color: var(--def-navy);
}

/* selezione risposte */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: var(--def-navy);
}

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: var(--def-navy);
}

.radio-item input[type=radio]:checked + label::after {
    background-color: var(--def-navy);
}

.checkbox-item input[type=checkbox]:checked + label::after {
    color: var(--def-navy);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--def-navy);
    box-shadow: 0 0 0 0.2rem rgba(29, 45, 69, 0.15);
}

/* array: righe alternate come .array1 / .array2 dell'originale */
table.ls-answers thead th {
    text-align: center;
    vertical-align: bottom;
    background-color: #ffffff;
    font-size: 11px;
}

.ls-answers tbody tr:nth-child(even) {
    background-color: #eeeeee;
}

.ls-answers th.answertext,
.ls-answers .answertext {
    font-weight: 400;
    text-align: left;
    color: var(--def-navy);
}

/* ---------- 7. Messaggi di validazione ---------------------------------- */
.em_num_answers.error,
.em_value_range.error,
.em_sum_range.error,
.em_regex_validation.error,
.em_q_fn_validation.error,
.em_sq_fn_validation.error,
.em_other_comment_mandatory.error {
    color: var(--def-valid);
    display: block;
}

.em_num_answers.good,
.em_value_range.good,
.em_sum_range.good,
.em_regex_validation.good,
.em_q_fn_validation.good {
    color: green;
}

.input-error .em_num_answers.error,
.input-error .ls-question-message.error {
    color: red;
    display: block;
}

input.em_sq_validation.error,
textarea.em_sq_validation.error {
    color: black;
    background-color: pink;
}

.ls-question-mandatory,
.errormandatory {
    color: red;
    font-weight: 700;
}

/* ---------- 8. Pagina della lista questionari --------------------------- */
/* Stile della home page svuotata (vedi views/layout_survey_list.twig). */

body.surveylist-hidden {
    background-color: #ffffff;
}

.surveylist-empty {
    padding: 60px 20px;
    text-align: center;
}

.surveylist-notice {
    font-size: 15px;
    font-weight: 700;
    color: var(--def-navy);
    margin: 0;
}

/* ---------- 9. Stampa --------------------------------------------------- */
@media print {
    #survey-nav {
        position: static;
    }
    #outerframeContainer > .row > .col-centered {
        width: auto;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .question-container {
        background: #ffffff;
        break-inside: avoid;
    }
}