/* values */
:root {
    font-size: 16px;

    --red-error: #dc203c;
    --deep-red-error: #a6192e;
    --light-red-error: #e5576c;
    --superlight-red-error: #f6c7ce;
}

/* color wheel: https://www.figma.com/fr-fr/roue-chromatique/ */
/* contrat checker: https://webaim.org/resources/contrastchecker/ */
:root {
    /* charte graphique limseo */
    --limseo-blue: #353B8D;
    --limseo-black: #1E1E1E;
    --limseo-white: #FCFCFC;
    --limseo-lblue: #4EC1F0;
    --limseo-orange: #F4981C;
    --limseo-green: #54B584;
    --limseo-pink: #E83C69;
    /* dérivées plus claires */
    --limseo-light-lblue: #6DDFFF; /* #94DAF5 */
    --limseo-light-orange: #F8BF75;
    --limseo-light-green: #74d4a2; /* 98D2B4 */
    --limseo-light-pink: #F5B0C2;
    /* light gray */
    --superlight-gray: #E9E9E9;
    --light-gray: #D1D1D1;
    --heavy-gray: #2F2F2F; /* E2E2E2 */
    --limseo-superlight-lblue: #E8F7FC;

    --border-thickness: 1px;
    --border: var(--border-thickness) solid var(--light-gray);
}

body.fluent { --border-radius: 6px; }
body.material { --border-radius: 25px; }

[data-theme="dark"] {
    /* charte graphique limseo */
    --limseo-blue: #000000;
    --limseo-black: #000000;
    --limseo-white: #000000;
    --limseo-lblue: #000000;
    --limseo-orange: #000000;
    --limseo-green: #000000;
    --limseo-pink: #000000;
    /* dérivées plus claires */
    --limseo-light-lblue: #000000; /* #94DAF5 */
    --limseo-light-orange: #000000;
    --limseo-light-green: #000000; /* 98D2B4 */
    --limseo-light-pink: #000000;
    /* light gray */
    --light-gray: #000000;
    --limseo-superlight-lblue: #000000;
}

/* =================== ELEVATION ============================================================= */

.elevation-0 { --elevation: 0; }
.elevation-1 { --elevation: 1; }
.elevation-2 { --elevation: 2; }
.elevation-4 { --elevation: 4; }
.elevation-8 { --elevation: 8; }
.elevation-0:hover { --elevation: 4; }
.elevation {
    --epx: calc(var(--elevation) * 1px);
    --shadow1: 0 0 1px rgba(0, 0, 0, .1);
    --shadow2: 0 1px 2px rgba(0, 0, 0, .08);
    --offset-y: calc(var(--epx) + 1px);
    --blur: calc(var(--epx) * 2);
    --spread: calc(var(--epx) * .3);
    --shadow3: 0 var(--offset-y) var(--blur) var(--spread) rgba(0, 0, 0, 0.2);
    box-shadow: var(--shadow1), var(--shadow2), var(--shadow3);
}


/* =================== RADIO-BUTTON & CHECKBOXES ============================================= */


.selection-controls {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    font-family: sans-serif;
}
    .selection-controls:hover { background-color: #ebf5ff; }
    .selection-controls.custom > input { display: none; }
    
    /* remplacer par un symbole par défaut */
    .selection-controls.custom > .custom-mark.default-mark::after { content: ">"; }
    .selection-controls.custom > .custom-mark {
        display: inline-block;
        transition: transform 0.3s ease;
        font-weight: bold;
        color: #007bff;
    }
    .selection-controls.custom > input:checked + .custom-mark { transform: rotate(90deg); }
    
/* =================== KANBAN ================================================================ */

.kanban {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
    .kanban > .kbanColonne {
        /* prend de la place si il y en a */
        min-width: 10rem;
        max-height: 90vh;
        padding-bottom: 10px;
        /* flex */
        display: flex;
        flex-direction: column;
        /* border */
        border: var(--border);
        border-radius: var(--border-radius);
        overflow: hidden;
        --elevation: 2;
    }
        .kanban > .kbanColonne > h3 {
            font-weight: 500;
            margin-block: 8px;
            padding-top: 4px;
            align-self: stretch;
            text-align: center;
        }
        .kanban > .kbanColonne > .card-container {
            padding: .7rem 6px .4rem;
            /* flex */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            /* scrollers */
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-gutter: stable both-edges;
            scrollbar-color: auto transparent;
            /* fade */
            --fade-range: 1rem;
            --header-start: 0%;
            --footer-stop: 100%;
            --header-top: transparent var(--header-start);
            --header-bottom: black calc(var(--header-start) + var(--fade-range));
            --footer-top: black calc(var(--footer-stop) - var(--fade-range));
            --footer-bottom: transparent var(--footer-stop);
            mask-image: linear-gradient( to bottom, var(--header-top), var(--header-bottom), var(--footer-top), var(--footer-bottom) );
        }
            .kanban > .kbanColonne > .card-container > .card { margin-bottom: 10px; }

/* =================== OTHERS ================================================================ */

.title {
    font-weight: 700;
    color: var(--text-title);
}
.theme-switch {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #eee;
    padding: 1rem;
    border-radius: var(--border-radius);
}
.search-bar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #eee;
    padding: 1rem;
    border-radius: 8px;
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.bold-light { font-weight: 500; }
.bold-normal { font-weight: bold; }
.bold-heavy { font-weight: 700; }

.italique { font-style: italic; }

.limited-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =================== TEST ================================================================== */

.dashboard {
    display: flex;
    flex-direction: column;
}
.dashboard-top,
.dashboard-bottom {
    display: flex;
    align-self: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard .card.card_column {
    max-width: none;
}

.better-table {
    display: flex;
    flex-direction: column;
}
.better-table > .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem
}