/**
 * -------------------------------------------------------
 * Table Completion Component
 * -------------------------------------------------------
 */

:root {

    /*
    Variables spécifiques au composant uniquement
    */

    --tc-success-bg:
        color-mix(
            in srgb,
            var(--color-primary) 15%,
            transparent
        );

    --tc-error-bg:
        rgba(220,38,38,.12);

    --tc-warning-bg:
        rgba(245,158,11,.15);

    --tc-empty-bg:
        var(--color-bg);

}


/**
 * -------------------------------------------------------
 * Conteneur principal
 * -------------------------------------------------------
 */


.tc {

    width:100%;

    padding:1rem;

    color:var(--color-text);

    background:var(--color-surface);

    border-radius:var(--tc-radius);

}



/**
 * -------------------------------------------------------
 * Header
 * -------------------------------------------------------
 */


.tc-header {

    margin-bottom:1.5rem;

}


.tc-title {

    margin:0;

    font-size:1.5rem;

    font-weight:700;

    color:var(--color-title);

}


.tc-description {

    margin-top:.5rem;

    color:var(--color-muted);
}



/**
 * -------------------------------------------------------
 * Toolbar
 * -------------------------------------------------------
 */


.tc-toolbar {

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-bottom:1.5rem;

}



.tc-difficulty {

    display:flex;

    align-items:center;

    gap:.75rem;

    flex-wrap:wrap;

}



.tc-difficulty label {

    font-weight:600;

}



.tc-slider {

    width:100%;

    max-width:280px;

}



.tc-slider-value {

    font-weight:700;

    color:var(--tc-primary);

}



.tc-actions {

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

}



/**
 * -------------------------------------------------------
 * Boutons
 * -------------------------------------------------------
 */


.tc-btn {

    appearance:none;

    border:none;

    cursor:pointer;

    padding:.75rem 1.1rem;

    border-radius:var(--tc-radius-small);

    background: var(--color-primary);

    color:white;

    font-weight:600;

    transition:

        transform var(--tc-transition),

        background var(--tc-transition);

}


.tc-btn:hover {

    background: var(--color-primary-hover);

    transform:translateY(-2px);

}



.tc-btn:active {

    transform:translateY(0);

}



/**
 * -------------------------------------------------------
 * Tableau
 * -------------------------------------------------------
 */


.tc-table-wrapper {

    overflow-x:auto;

    margin-bottom:2rem;

}



.tc-table {

    width:100%;

    min-width:550px;

    border-collapse:collapse;

    background:var(--color-surface);

}



.tc-table th {

    background:--color-surface-second;

    font-weight:700;

}



.tc-table th,
.tc-table td {

    border:1px solid var(--color-border);

    padding:1rem;

    text-align:center;

}



.tc-table td {

    min-width:120px;

    height:65px;

    transition:

        background var(--tc-transition),

        border var(--tc-transition),

        transform var(--tc-transition);

}






.tc-dropzone:hover {

    background: var(--color-surface-second);

}

.tc-dropzone[data-value=""]::before {

    content:"Déposer ici";

    color:#94a3b8;

    font-size:.85rem;

}



.tc-dropzone:not([data-value=""])::before {

    display:none;

}



/**
 * -------------------------------------------------------
 * Résultats
 * -------------------------------------------------------
 */


.tc-success {

    background:

        var(--tc-success-bg)!important;

    border-color:

        var(--tc-success)!important;

    color:

        var(--tc-success);

    font-weight:700;

}



.tc-error {

    background:

        var(--tc-error-bg)!important;

    border-color:

        var(--tc-error)!important;

    color:

        var(--tc-error);

    font-weight:700;

}



.tc-empty {

    background:

        var(--tc-warning-bg)!important;

    border-color:

        var(--tc-warning)!important;

}



/**
 * -------------------------------------------------------
 * Banque de réponses
 * -------------------------------------------------------
 */


.tc-answer-wrapper {

    margin-top:2rem;

}



.tc-answer-wrapper h3 {

    margin-bottom:1rem;

}



.tc-answer-pool {

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

    min-height:60px;

    padding:1rem;

    border:

        1px solid var(--tc-border);

    border-radius:

        var(--tc-radius);

    background:--color-surface-second;

}



.tc-answer {

    border:none;

    cursor: pointer;

    user-select:none;

    padding:.75rem 1rem;

    border-radius:

        999px;

    background:var(--color-surface);

    color:var(--color-text);

    border:

        1px solid var(--tc-border);

    box-shadow:

        0 2px 8px rgba(0,0,0,.05);

    transition:

        transform var(--tc-transition),

        box-shadow var(--tc-transition);

}



.tc-answer:hover {

    transform:translateY(-3px);

    box-shadow:

        0 8px 20px rgba(0,0,0,.1);

}



.tc-answer:active {

    cursor:grabbing;

}



/**
 * -------------------------------------------------------
 * Score
 * -------------------------------------------------------
 */


.tc-result {

    margin-top:2rem;

    padding:1rem;

    border-radius:

        var(--tc-radius);

    background:#f8fafc;

}



.tc-score {

    margin-left:.5rem;

    font-weight:800;

}



/**
 * -------------------------------------------------------
 * Correction
 * -------------------------------------------------------
 */


.tc-solution {

    margin-top:2rem;

    padding:1rem;

    border:

        1px solid var(--tc-border);

    border-radius:

        var(--tc-radius);

    overflow-x: scroll;

}



.tc-solution summary {

    cursor:pointer;

    font-weight:700;

}



.tc-solution-content {

    margin-top:1rem;

}



/**
 * -------------------------------------------------------
 * Erreur chargement
 * -------------------------------------------------------
 */


.tc-error {

    padding:2rem;

    border-radius:

        var(--tc-radius);

    background:

        var(--tc-error-bg);

    color:

        var(--tc-error);

}



/**
 * -------------------------------------------------------
 * Responsive tablette
 * -------------------------------------------------------
 */


@media(min-width:700px){


    .tc {

        padding:2rem;

    }


    .tc-toolbar {

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }


}

.tc-answer.tc-selected {

    border-color:
        var(--tc-primary);

    background:
        #dff7ee;

    transform:
        translateY(-3px);

}


.tc-answer:disabled {

    opacity:.5;

    cursor:not-allowed;

}



/**
 * -------------------------------------------------------
 * Mobile
 * -------------------------------------------------------
 */


@media(max-width:600px){


    .tc-btn {

        width:100%;

    }


    .tc-actions {

        width:100%;

    }


    .tc-answer {

        width:100%;

        text-align:center;

    }


}