/*
 * Självbedömningen av manuellt rättade uppgifter: uppmaningen, Rätt svar,
 * bedömningspunkterna och Rättad, i den ordningen (Anna, okt 2026).
 *
 * Egen fil i stället för SCSS:en: eddler.min.css byggs av grunt ur dk-style.css,
 * och en ombyggnad drar med sig allt annat som ligger okompilerat där.
 */

/* "Rättas inte automatiskt …" står precis ovanför knappraden, med luft upp till svarsfältet */
.dk-manual-correcting-info {
    margin-top: 24px;
    margin-bottom: -24px;   /* knappraden har margin-top 32px; 8px kvar mellan text och knappar */
}

/* Rätt svar i en vit ruta, överst i bedömningsrutan */
.dk-bedom-ratt-svar {
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid #e3ebf6;
    border-radius: 4px;
    line-height: 1.6em;
}

/* "Korrekta varianter" öppnar en tooltip vid hovring */
.dk-bedom-ratt-svar u,
.dk-precis-text-correct-answer u {
    cursor: pointer;
}

/*
 * Rättad som switch, i linje med kryssrutorna. Färgen följer ramen runt uppgiften:
 * blå tills eleven har rättat, sedan grön, gul eller röd efter poängen.
 */
.dk-question-correcting ul.dk-question-guide-lines-correcting-wrapper li.dk-bedom-rattad {
    margin-left: -42px;
    padding-top: 4px;
}

label.dk-bedom-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.dk-bedom-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dk-bedom-switch-spar {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background-color: #33b5e5;
    transition: background-color .2s;
}

.dk-bedom-switch-spar::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.dk-bedom-switch-input:checked + .dk-bedom-switch-spar::after {
    transform: translateX(18px);
}

.dk-bedom-switch-input:focus-visible + .dk-bedom-switch-spar {
    outline: 2px solid #12263f;
    outline-offset: 2px;
}

li.wp-education-examination-question[data-is-correct="1"] .dk-bedom-switch-spar,
li.wp-education-examination-question[data-score-per-grade="true"][data-is-corrected="1"][data-max-grade-score="0"] .dk-bedom-switch-spar {
    background-color: #99cc00;
}

li.wp-education-examination-question[data-is-correct="2"] .dk-bedom-switch-spar {
    background-color: #ffbb33;
}

li.wp-education-examination-question[data-is-correct="0"][data-is-corrected="1"] .dk-bedom-switch-spar {
    background-color: #ff4444;
}

li.wp-education-examination-question[data-is-corrected="0"] .dk-bedom-switch-spar {
    background-color: #33b5e5;
}

/* Den gula triangeln vid delvis rätt är ett ::before och kan inte ha tooltip.
   Elementet ligger osynligt ovanpå den, på samma statiska position. */
.dk-precis-text-answer .dk-delvis-ratt-ikon {
    position: absolute;
    left: -20px;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    cursor: help;
}

/* Hängande indrag: "+1 APL" står för sig och texten fortsätter i linje vid radbyte */
.dk-question-guide-lines-correcting-wrapper .dk-question-guide-line-text {
    padding-left: 4.25em;
    text-indent: -4.25em;
}

.dk-question-guide-lines-correcting-wrapper .dk-question-guide-line-text > span.text-uppercase:first-child {
    display: inline-block;
    min-width: 4em;
    text-indent: 0;
}