/* Dark theme styling for the refactored portal.

   The palette is inspired by Tailwind's dark colours and includes
   background gradients, glass card effects and customised form
   controls.  Responsive tweaks ensure comfortable reading on mobile.
*/

:root {
    --bg-gradient-start: #0f172a;
    --bg-gradient-end: #1e293b;
    --card-bg: rgba(15, 23, 42, 0.85);
    --accent: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.2);
}

html,
body {
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #1f2937 0, #020617 55%, #000 100%);
    /*
     * Utiliser du texte blanc partout dans l’interface pour assurer
     * un contraste maximal avec le fond sombre.  La couleur par défaut
     * de Bootstrap (#212529) ainsi que certains gris (#e5e7eb) donnaient
     * un rendu terne sur un thème sombre.  En fixant la couleur à
     * #ffffff ici, nous garantissons que tous les textes qui héritent
     * de la couleur du body resteront parfaitement lisibles.
     */
    color: #ffffff;
}

.main-wrapper {
    min-height: calc(100vh - 56px);
}

/* Navbar */
.navbar {
    background: linear-gradient(to right, #020617, #0f172a) !important;
}

/* Cards */
.glass-card {
    background: var(--card-bg);
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(16px);
}

/*
 * Les cartes héritent elles aussi de la couleur par défaut du body
 * lorsqu'aucune couleur n'est explicitement définie.  Pour éviter
 * d'obtenir du texte gris foncé à l'intérieur des cartes, on force
 * également la couleur à blanc ici.  La propriété !important n'est
 * volontairement pas utilisée afin de permettre à des classes comme
 * .text-danger ou .text-success de surcharger la couleur si besoin.
 */
.card-body {
    color: #ffffff;
}

/*
 * La classe text-muted de Bootstrap applique une nuance de gris (#6c757d)
 * qui n’est pas lisible sur fond sombre.  Nous la redéfinissons en blanc
 * afin d’éliminer tout texte gris ou anthracite dans l’application.
 */
.text-muted {
    color: #ffffff !important;
}

/*
 * De même, certains éléments comme la barre de navigation affichent des
 * textes en gris via la classe navbar-text.  Nous la surclassons pour
 * assurer la cohérence avec le reste de l’interface.
 */
.navbar .navbar-text {
    color: #ffffff !important;
}

/* Forms */
.form-control,
.form-select {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    /*
     * Les champs de saisie héritaient précédemment d'un gris (#e5e7eb), ce qui
     * rendait le texte peu visible sur un fond sombre.  En forçant la couleur
     * à #ffffff, nous assurons un contraste optimal pour les utilisateurs.
     */
    color: #ffffff;
}

.form-control::placeholder {
    color: #6b7280;
}

/*
 * Lorsque les champs de formulaire reçoivent le focus, conserver la
 * couleur du texte en blanc pour assurer un contraste optimal.  Sans
 * cette règle, certains navigateurs réappliquent une couleur par
 * défaut (souvent grise ou noire) lorsque l'utilisateur saisit du
 * texte.  Nous veillons également à conserver les styles existants
 * pour la bordure et la mise en surbrillance du champ actif.
 */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft);
    background-color: rgba(15, 23, 42, 1);
    color: #ffffff;
}

/*
 * Les sélecteurs HTML5 de date et d'heure appliquent par défaut un
 * schéma de couleur clair, ce qui rend le texte sombre lorsque
 * l'utilisateur interagit avec eux.  En spécifiant un color‑scheme
 * sombre et en fixant explicitement la couleur du texte, nous
 * harmonisons leur apparence avec le reste du thème.  L'inversion du
 * sélecteur d'icônes via le filtre CSS assure que les icônes de
 * calendrier et d'horloge restent visibles sur un fond sombre.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    color: #ffffff;
    color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border: none;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.45);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.6);
}

/* Alerts */
.alert {
    border-radius: 0.8rem;
    background-color: rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.5);
    /*
     * Les messages d'alerte utilisent par défaut une couleur gris clair qui
     * manque de contraste sur un fond sombre.  Pour les rendre plus
     * lisibles, on fixe la couleur à blanc, tout en laissant les
     * bordures colorées distinguer les types (succès, danger, info).
     */
    color: #ffffff;
}

.alert-success {
    border-left: 4px solid #22c55e;
}

.alert-danger {
    border-left: 4px solid #ef4444;
}

.alert-info {
    border-left: 4px solid #0ea5e9;
}

/* Helpers */
.min-vh-75 {
    min-height: 75vh;
}

pre {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
      Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .card-body {
      padding: 1.5rem;
    }
}