/* ========================================================= */
/* DARK MODE                                                   */
/* ========================================================= */

body.dark-mode {
    --dark-bg: #1e1f22;
    --dark-bg-secondary: #27282b;
    --dark-bg-tertiary: #303136;
    --dark-surface: #292a2e;
    --dark-surface-hover: #333438;
    --dark-border: #44464b;
    --dark-border-light: #505258;
    --dark-text: #f1f1f1;
    --dark-text-secondary: #b8bac0;
    --dark-text-muted: #85878e;
    --dark-accent: #80bfff;
    --dark-accent-hover: #a8d4ff;
    --dark-success: #4ade80;
    --dark-danger: #ff6b81;
}


    /* ========================================================= */
    /* BASE                                                        */
    /* ========================================================= */

    body.dark-mode,
    body.dark-mode #site,
    body.dark-mode #main,
    body.dark-mode #content,
    body.dark-mode #footer {
        background-color: var(--dark-bg);
        color: var(--dark-text);
    }

        body.dark-mode a {
            color: var(--dark-accent);
        }

            body.dark-mode a:hover {
                color: var(--dark-accent-hover);
            }


        /* ========================================================= */
        /* TITRES                                                      */
        /* ========================================================= */

        body.dark-mode h1,
        body.dark-mode h2,
        body.dark-mode h3,
        body.dark-mode h4,
        body.dark-mode h5,
        body.dark-mode .menu-title {
            color: #fff;
        }

        body.dark-mode .menu-info {
            color: var(--dark-accent);
        }

        body.dark-mode .menu-image {
            background-color: transparent !important;
        }


        /* ========================================================= */
        /* SECTIONS                                                    */
        /* ========================================================= */

        body.dark-mode .section {
            background-color: var(--dark-surface);
            border-color: var(--dark-border);
            color: var(--dark-text);
        }

            body.dark-mode .section .section-header,
            body.dark-mode .section .section-footer {
                background-color: var(--dark-bg-secondary);
                border-color: var(--dark-border);
                box-shadow: none;
            }

        body.dark-mode .section-client {
            background-color: var(--dark-bg-secondary);
            border-color: var(--dark-border-light);
            color: var(--dark-text);
        }

        body.dark-mode .section-header.titre {
            color: #fff;
        }


        /* ========================================================= */
        /* FORMULAIRES                                                  */
        /* ========================================================= */

        body.dark-mode input[type="text"],
        body.dark-mode input[type="password"],
        body.dark-mode input[type="email"],
        body.dark-mode input[type="number"],
        body.dark-mode input[type="search"],
        body.dark-mode textarea,
        body.dark-mode select {
            background-color: var(--dark-bg-tertiary);
            color: var(--dark-text);
            border-color: var(--dark-border);
        }

        body.dark-mode input[type="file"] {
            background-color: var(--dark-surface);
            border-color: var(--dark-border);
        }

        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder {
            color: var(--dark-text-muted);
        }

        body.dark-mode input:focus,
        body.dark-mode textarea:focus,
        body.dark-mode select:focus {
            outline: none;
            border-color: var(--dark-accent);
            box-shadow: 0 0 0 3px rgba(128, 191, 255, 0.15);
        }


/* ========================================================= */
/* IMAGE INPUT                                                 */
/* ========================================================= */

input[type="image"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ========================================================= */
/* CHECKBOX / RADIO                                            */
/* ========================================================= */

body.dark-mode input[type="checkbox"]:checked + label,
body.dark-mode input[type="radio"]:checked + label {
    color: #fff;
}


/* ========================================================= */
/* BOUTONS                                                      */
/* ========================================================= */

body.dark-mode .button-light {
    height: 50px;
    background-color: var(--dark-surface-hover);
    border-color: var(--dark-border);
    color: #fff;
}

    body.dark-mode .button-light:hover {
        background-color: #3b3c40;
        border-color: var(--dark-border-light);
        color: #fff;
    }


    /* ========================================================= */
    /* BOUTONS DÉSACTIVÉS                                         */
    /* ========================================================= */

    body.dark-mode button:disabled,
    body.dark-mode .button:disabled,
    body.dark-mode .button-primary:disabled,
    body.dark-mode .button-info:disabled,
    body.dark-mode .button-accent:disabled,
    body.dark-mode .button-approve:disabled,
    body.dark-mode .button-caution:disabled,
    body.dark-mode .button-error:disabled,
    body.dark-mode .button-check:disabled,
    body.dark-mode .button-light:disabled,
    body.dark-mode .button-light-small:disabled {
        color: var(--dark-text-muted);
        background-color: var(--dark-bg-tertiary);
        border-color: var(--dark-border);
        opacity: 0.7;
        cursor: not-allowed;
    }


/* ========================================================= */
/* SLIDEBAR                                                     */
/* ========================================================= */

body.dark-mode .slidebar-menu li a {
    color: var(--dark-text-secondary);
    background-color: transparent;
}

    body.dark-mode .slidebar-menu li a:hover {
        color: #fff;
        background-color: var(--dark-surface-hover);
    }

body.dark-mode .slidebar-menu li.submenu-label {
    color: var(--dark-text-muted);
}

body.dark-mode .slidebar-menu li.submenu-rule {
    background-color: var(--dark-border);
}


/* ========================================================= */
/* SOUS-MENU                                                   */
/* ========================================================= */

body.dark-mode .slidebar-submenu {
    background-color: rgba(255, 255, 255, 0.035);
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
}

    body.dark-mode .slidebar-submenu li a {
        color: var(--dark-text-secondary);
    }

    body.dark-mode .slidebar-submenu li.submenu-dismiss {
        color: var(--dark-text-muted);
    }

        body.dark-mode .slidebar-submenu li.submenu-dismiss:hover {
            color: #fff;
            background-color: var(--dark-surface-hover);
        }


/* ========================================================= */
/* WIDGETS                                                     */
/* ========================================================= */

body.dark-mode .slidebar-widget {
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text-secondary);
}

    body.dark-mode .slidebar-widget .slidebar-widget-header {
        color: #fff;
    }


/* ========================================================= */
/* ICÔNES                                                      */
/* ========================================================= */

body.dark-mode .glyphicons,
body.dark-mode .glyphicons-social {
    color: var(--dark-text-secondary);
}

    body.dark-mode .glyphicons:hover,
    body.dark-mode .glyphicons-social:hover {
        color: #f71756;
    }


/* ========================================================= */
/* NOTICE INFO                                                  */
/* ========================================================= */

body.dark-mode .notice-info {
    color: var(--dark-text);
}

    body.dark-mode .notice-info:before {
        background-color: #17475d;
    }

    body.dark-mode .notice-info h4,
    body.dark-mode .notice-info .h4,
    body.dark-mode .notice-info a {
        color: #82cded;
    }

        body.dark-mode .notice-info a:hover {
            color: #b6e6ff;
        }


/* ========================================================= */
/* GOOGLE SEARCH                                               */
/* ========================================================= */

body.dark-mode .google-search-button {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

    body.dark-mode .google-search-button:hover {
        background: var(--dark-surface-hover) !important;
        border-color: var(--dark-border-light) !important;
        color: #fff !important;
    }


/* ========================================================= */
/* BOUTON RETOUR EN HAUT                                      */
/* ========================================================= */

body.dark-mode #btnTop {
    background-color: var(--dark-surface-hover);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

    body.dark-mode #btnTop:hover {
        background-color: #414247;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6);
    }