/******************
    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
*/
/* ═══════════════════════════════════════════════════════════════════════
   SCIROCCO küsimustik — teema kohandused
   LimeSurvey 6 · fruity_twentythree (Bootstrap 5) · v2

   Kuhu:  Configuration → Themes → integria_scirocco → Theme editor →
          parem paneel, keri alla → "Style files" → custom.css →
          kleebi kogu see fail → Salvesta.
          Seejärel: Küsitlus → Seaded → Üldseaded → Kujundus = integria_scirocco

   Pärast salvestamist ava eelvaade CTRL+F5-ga. Kui muudatust ei ole:
   Configuration → Global settings → General → "Turn asset manager off"
   ajutiselt sisse (LimeSurvey serveerib teemafaile tmp/assets/ vahemälust).

   NB: !important on siin teadlik. Teema enda fail ütleb päises, et
   kohandusi tuleb teha "tugeva spetsiifilisusega", ja Bootstrap 5
   .form-check reeglid võidavad muidu peaaegu kõik siinsed reeglid ära.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   1. VASTUSEVARIANTIDE ALA KOGU LAIUSES
   Fruity 23 hoiab vastusteploki kitsas Bootstrapi veerus. SCIROCCO
   skaalalaused on 1–3 lauset pikad ja muutuvad kitsas veerus loetamatuks.
   ─────────────────────────────────────────────────────────────────────── */

.question-container .answer-container,
.question-container .ls-answers,
.question-container .answers-list,
.question-container .radio-list,
.question-container .checkbox-list {
    width: 100% !important;
    max-width: 100% !important;
}

/* Bootstrapi veerud vastusteploki sees → täislaius */
.question-container .answer-container > .row > [class*="col-"],
.question-container .answer-container > [class*="col-"],
.question-container .ls-answers > [class*="col-"],
.question-container .ls-answers > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}


/* ───────────────────────────────────────────────────────────────────────
   2. ÜKS VASTUSEVARIANT: NUPP + TEKST
   Kaetud on mõlemad võimalikud markup-variandid: LimeSurvey oma
   .answer-item ja Bootstrapi .form-check. Kumb neist kasutusel on,
   sõltub versioonist — mõlema katmine on odavam kui arvamine.
   ─────────────────────────────────────────────────────────────────────── */

.question-container .answer-item,
.question-container .answer-item.radio-item,
.question-container .answer-item.checkbox-item,
.question-container .ls-answers .form-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;              /* vahe tuleb sildi margin-ist, vt allpool */
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;     /* Bootstrap .form-check lisab 1.5em */
    margin-bottom: 0.85rem;
}

/* Nupp: kindel laius, ei hõlju, joondub esimese tekstireaga.
   float:none on kriitiline — Bootstrapi .form-check-input hõljub
   negatiivse veerisega ja lõhub flex-paigutuse vaikselt ära.
   Rea kõrgus 1.5em ≈ 24px, nupp 16px → (24−16)/2 ≈ 0.3em ülevalt.        */
.question-container .answer-item input[type="radio"],
.question-container .answer-item input[type="checkbox"],
.question-container .ls-answers input.form-check-input {
    flex: 0 0 auto !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    margin-top: 0.3em !important;
}

/* Silt: kogu ülejäänud laius ja rippuv taane.                             */
.question-container .answer-item label,
.question-container .ls-answers .form-check label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    font-weight: 400;               /* pikk tekst rasvases on väsitav */
    line-height: 1.5;
}

/* Rippuv taane JA vahe raadionupu ja numbri vahel — mõlemad ainult sildi
   kaudu, sest raadionupp ise on teemas kohandatud ega allu selektorile.

     padding-left  = vahe (0.7em) + prefiksi "0 – " laius (1.5em) = 2.2em
     text-indent   = −prefiksi laius (−1.5em)

   Esimene rida algab seega 0.7em kaugusel nupust (vahe) ja murtud read
   2.2em kaugusel, mis on täpselt teksti algus prefiksi järel.

   1.5em on mõõdetud "0 – " laius Lato fondis (fruity_twentythree
   vaikefont); Lato numbrid on ühelaiused, seega klapib kõigil 0–5.
   Vahe muutmiseks liiguta AINULT padding-left väärtust (2.2em):
   suurem arv = suurem vahe. text-indent jääb alati −1.5em.                */
.question-container .answer-item.radio-item label,
.question-container .ls-answers .form-check label {
    padding-left: 2.2em !important;
    text-indent: -1.5em !important;
}


/* ───────────────────────────────────────────────────────────────────────
   3. VALITUD VARIANT NÄHTAVAKS
   Kuue pika variandi seast peab valik olema silmaga leitav.
   ─────────────────────────────────────────────────────────────────────── */

.question-container .answer-item.radio-item:has(input:checked) {
    background: rgba(11, 138, 143, 0.07);
    border-radius: 6px;
    box-shadow: inset 3px 0 0 rgba(11, 138, 143, 0.6);
    padding: 0.35rem 0.5rem !important;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}


/* ───────────────────────────────────────────────────────────────────────
   4. KOMMENTAARIVÄLI
   Kasti silt tuleb LimeSurvey enda tõlkest ja on kõigis kolmes keeles
   juba õige — oma silti lisada ei ole vaja. Ingliskeelne oli ainult
   kasti sisemine hall kohatäide, mille vahetab scirocco_custom.js.
   ─────────────────────────────────────────────────────────────────────── */

/* Vaikimisi paneb teema sildi kasti KÕRVALE (kaks veergu). Pikk silt
   murdub siis kitsaks tulbaks. Siin: silt kasti KOHALE, üle täislaiuse.  */

.question-container .text-item,
.question-container.list-with-comment .text-item,
.question-container .list-with-comment .text-item {
    display: block !important;
    margin-top: 1rem;
}

/* Sildi ja kasti veerud üksteise alla */
.question-container .text-item > .row,
.question-container .text-item > .form-group {
    display: block !important;
}

.question-container .text-item [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Silt: täislaius, kasti kohal, vasakule joondatud */
.question-container .text-item label,
.question-container .text-item .control-label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.35rem 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    font-weight: 600;
    line-height: 1.4;
}

/* Kast ise täislaiuses */
.question-container .text-item input[type="text"],
.question-container .text-item textarea,
.question-container .question-item textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ───────────────────────────────────────────────────────────────────────
   5. DIMENSIOONIKIRJELDUS (grupi kirjelduses olev <details> plokk)
   ─────────────────────────────────────────────────────────────────────── */

.group-description details {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.75rem 0;
    margin-bottom: 1rem;
}

.group-description details summary {
    cursor: pointer;
}

.group-description details ul {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.group-description details li {
    margin-bottom: 0.35rem;
}


/* ───────────────────────────────────────────────────────────────────────
   6. VEAOTSING
   Kui miski ei mõju, eemalda alt kommentaarimärgid ja salvesta.
   Kui vastusevariantide taust EI muutu punaseks, siis CSS ei jõua lehele
   (vahemälu või vale teema) — probleem ei ole selektorites.
   ─────────────────────────────────────────────────────────────────────── */

/* .question-container .answer-item { background: #ffdddd !important; } */