/*
=============================================================
 APROVAMENTORIA
 ONBOARDING DO ALUNO - CHECKBOXES V3
=============================================================
*/


/* ==========================================================
   SOMENTE CHECKBOXES DOS CAMPOS DE DIAS / DISCIPLINAS
========================================================== */

input[type="checkbox"][name*="dia"],
input[type="checkbox"][name*="Dia"],
input[type="checkbox"][name*="disciplin"],
input[type="checkbox"][name*="Disciplin"] {

    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    position:
        static !important;

    inset:
        auto !important;

    float:
        none !important;

    display:
        inline-grid !important;

    place-items:
        center !important;

    flex:
        0 0 20px !important;

    box-sizing:
        border-box !important;

    width:
        20px !important;

    height:
        20px !important;

    min-width:
        20px !important;

    min-height:
        20px !important;

    max-width:
        20px !important;

    max-height:
        20px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;

    border:
        2px solid #46627F !important;

    border-radius:
        6px !important;

    background:
        #0C192C !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    vertical-align:
        middle !important;

    cursor:
        pointer !important;

    opacity:
        1 !important;
}


/* check desenhado */

input[type="checkbox"][name*="dia"]::after,
input[type="checkbox"][name*="Dia"]::after,
input[type="checkbox"][name*="disciplin"]::after,
input[type="checkbox"][name*="Disciplin"]::after {

    content:
        "" !important;

    display:
        block !important;

    width:
        8px !important;

    height:
        4px !important;

    border-left:
        2px solid #102039 !important;

    border-bottom:
        2px solid #102039 !important;

    transform:
        rotate(-45deg)
        scale(0) !important;

    transition:
        transform .12s ease !important;
}


/* marcado */

input[type="checkbox"][name*="dia"]:checked,
input[type="checkbox"][name*="Dia"]:checked,
input[type="checkbox"][name*="disciplin"]:checked,
input[type="checkbox"][name*="Disciplin"]:checked {

    border-color:
        #24BDB7 !important;

    background:
        #73DDD7 !important;

    box-shadow:
        0 0 0 3px
        rgba(36,189,183,.13) !important;
}


input[type="checkbox"][name*="dia"]:checked::after,
input[type="checkbox"][name*="Dia"]:checked::after,
input[type="checkbox"][name*="disciplin"]:checked::after,
input[type="checkbox"][name*="Disciplin"]:checked::after {

    transform:
        rotate(-45deg)
        scale(1) !important;
}


/* ==========================================================
   LABEL DA OPÇÃO
========================================================== */

label:has(input[type="checkbox"][name*="dia"]),
label:has(input[type="checkbox"][name*="Dia"]),
label:has(input[type="checkbox"][name*="disciplin"]),
label:has(input[type="checkbox"][name*="Disciplin"]) {

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        10px !important;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        42px !important;

    margin:
        0 !important;

    padding:
        9px 11px !important;

    position:
        relative !important;

    inset:
        auto !important;

    transform:
        none !important;

    border:
        1px solid rgba(116,147,177,.16) !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.022) !important;

    color:
        #EAF2FA !important;

    font-size:
        .90rem !important;

    line-height:
        1.35 !important;

    text-align:
        left !important;

    cursor:
        pointer !important;
}


/*
  Mesmo que o Django gere:
  <label>Segunda<input ...></label>
  checkbox fica sempre antes do texto visualmente.
*/

label:has(input[type="checkbox"][name*="dia"])
input[type="checkbox"],

label:has(input[type="checkbox"][name*="Dia"])
input[type="checkbox"],

label:has(input[type="checkbox"][name*="disciplin"])
input[type="checkbox"],

label:has(input[type="checkbox"][name*="Disciplin"])
input[type="checkbox"] {

    order:
        -1 !important;
}


/* selecionado */

label:has(
    input[type="checkbox"][name*="dia"]:checked
),
label:has(
    input[type="checkbox"][name*="Dia"]:checked
),
label:has(
    input[type="checkbox"][name*="disciplin"]:checked
),
label:has(
    input[type="checkbox"][name*="Disciplin"]:checked
) {

    border-color:
        rgba(36,189,183,.42) !important;

    background:
        rgba(36,189,183,.075) !important;

    color:
        #FFFFFF !important;
}


/* hover */

label:has(input[type="checkbox"][name*="dia"]):hover,
label:has(input[type="checkbox"][name*="Dia"]):hover,
label:has(input[type="checkbox"][name*="disciplin"]):hover,
label:has(input[type="checkbox"][name*="Disciplin"]):hover {

    border-color:
        rgba(115,221,215,.27) !important;

    background:
        rgba(36,189,183,.05) !important;
}


/* ==========================================================
   WRAPPERS GERADOS PELO DJANGO
========================================================== */

div:has(
    > label >
    input[type="checkbox"][name*="dia"]
),

div:has(
    > label >
    input[type="checkbox"][name*="Dia"]
),

div:has(
    > label >
    input[type="checkbox"][name*="disciplin"]
),

div:has(
    > label >
    input[type="checkbox"][name*="Disciplin"]
) {

    display:
        grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap:
        8px !important;

    align-items:
        stretch !important;

    width:
        100% !important;
}


/* ==========================================================
   CASO O DJANGO GERE div > div > label
========================================================== */

div:has(
    input[type="checkbox"][name*="dia"]
)
> div,

div:has(
    input[type="checkbox"][name*="Dia"]
)
> div,

div:has(
    input[type="checkbox"][name*="disciplin"]
)
> div,

div:has(
    input[type="checkbox"][name*="Disciplin"]
)
> div {

    min-width:
        0 !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:640px) {

    div:has(
        > label >
        input[type="checkbox"][name*="dia"]
    ),

    div:has(
        > label >
        input[type="checkbox"][name*="Dia"]
    ),

    div:has(
        > label >
        input[type="checkbox"][name*="disciplin"]
    ),

    div:has(
        > label >
        input[type="checkbox"][name*="Disciplin"]
    ) {

        grid-template-columns:
            1fr !important;
    }


    label:has(input[type="checkbox"][name*="dia"]),
    label:has(input[type="checkbox"][name*="Dia"]),
    label:has(input[type="checkbox"][name*="disciplin"]),
    label:has(input[type="checkbox"][name*="Disciplin"]) {

        min-height:
            44px !important;

        padding:
            10px !important;
    }
}