:root {
    --couleur-texte: black;
    --couleur-fond-en-tete: black;
    --couleur-fond: white;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--couleur-fond);
    margin: 0;
    padding: 0;
    color: var(--couleur-texte); /* Définir la couleur de texte par défaut */
}

h1 {
    color: var(--couleur-texte);
    text-align: center;
    padding: 20px;
}

h6 {
    color: var(--couleur-texte);
    text-align: center;
    margin-top: -10px;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

th {
    background-color: var(--couleur-fond-en-tete);
}

a {
    text-decoration: none;
    color: var(--couleur-texte);
}

a:hover {
    text-decoration: underline;
}

#passwordForm {
    text-align: center;
    margin: 20px;
}

#passwordForm p {
    color: var(--couleur-texte); /* Appliquer la couleur au texte dans le formulaire */
}

#passwordForm input {
    padding: 10px;
    margin-right: 10px;
}

/* Base theming variables (legacy) */
:root {
    --couleur-texte: black;
    --couleur-fond-en-tete: black;
    --couleur-fond: white;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--couleur-fond);
    margin: 0;
    padding: 0;
    color: var(--couleur-texte); /* Définir la couleur de texte par défaut */
}

h1 {
    color: var(--couleur-texte);
    text-align: center;
    padding: 20px;
}

h6 {
    color: var(--couleur-texte);
    text-align: center;
    margin-top: -10px;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

th {
    background-color: var(--couleur-fond-en-tete);
}

a {
    text-decoration: none;
    color: var(--couleur-texte);
}

a:hover {
    text-decoration: underline;
}

#passwordForm {
    text-align: center;
    margin: 20px;
}

#passwordForm p {
    color: var(--couleur-texte); /* Appliquer la couleur au texte dans le formulaire */
}

#passwordForm input {
    padding: 10px;
    margin-right: 10px;
}

/* ---- Dark mode overrides ---- */
body.dark-mode {
    --couleur-texte: #e0e0e0;
    --couleur-fond: #121212;
    --couleur-fond-en-tete: #1f1f1f;
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode a { color: #82b1ff; }
body.dark-mode a:hover { color: #a6c8ff; }

body.dark-mode .navbar { background-color: #1f1f1f !important; border-bottom: 1px solid #2c2c2c; }
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link { color: #e0e0e0 !important; }
body.dark-mode .navbar .nav-link.active { color: #ffffff !important; }
body.dark-mode .navbar-light .navbar-toggler { border-color: rgba(255,255,255,0.3); }
body.dark-mode .navbar-light .navbar-toggler-icon { filter: invert(1); }

body.dark-mode .list-group-item { background-color: #1a1a1a; color: #e0e0e0; border-color: #2e2e2e; }
body.dark-mode .breadcrumb { background-color: transparent; }
body.dark-mode .breadcrumb .breadcrumb-item a { color: #a6c8ff; }
body.dark-mode .border { border-color: #2e2e2e !important; }

/* Code blocks readability in dark mode */
body.dark-mode pre,
body.dark-mode code { background-color: #1e1e1e !important; color: #e0e0e0 !important; }

/* Tables */
body.dark-mode table { color: #e0e0e0; }
body.dark-mode th, body.dark-mode td { border-color: #2e2e2e; }
body.dark-mode th { background-color: #242424; }

/* Drive preview container improvements */
#preview-container { max-width: 100%; overflow: auto; height: 70vh; }
#preview-container img, #preview-container iframe { max-width: 100%; }

/* Optional: smoother theme transition */
html, body, .navbar, .list-group-item { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }