/*
 * Thème sombre du back-office recruteurs.
 *
 * Palette reprise telle quelle du thème public lesjoiesducode3
 * (src/css/critical.css + src/css/variables.css) :
 *   page       #151b23   surface   #0d1117   accent   #60a5fa
 *   texte      #f3f4f6   secondaire #d1d5db  atténué  #9ca3af
 *   bordure    #262c38
 *
 * Principe : aucune classe `dark:` n'est ajoutée dans les templates.
 * Ce fichier remappe les utilitaires Tailwind neutres quand <html> porte
 * la classe `dark`. Sans cette classe, il n'a strictement aucun effet.
 *
 * Il n'est chargé que sur les pages du BO (voir inc/dark-mode.php) :
 * la landing recruteurs et les pages légales ne le reçoivent jamais.
 */

/* ==========================================================================
   1. Tokens shadcn (définis dans src/css/tailwind.css) — version sombre
   `html.dark` (0,1,1) l'emporte sur les `:root` inline des template-parts.
   ========================================================================== */

html.dark {
    color-scheme: dark;

    --background: 214 25% 11%;          /* #151b23 */
    --foreground: 220 14% 96%;          /* #f3f4f6 */
    --card: 216 28% 7%;                 /* #0d1117 */
    --card-foreground: 220 14% 96%;
    --muted: 220 19% 18%;               /* #262c38 */
    --muted-foreground: 218 11% 65%;    /* #9ca3af */
    --border: 220 19% 18%;
    --input: 220 19% 18%;
    --primary: 213 94% 68%;             /* #60a5fa */
    --primary-foreground: 216 28% 7%;
    --secondary: 220 19% 18%;
    --secondary-foreground: 220 14% 96%;
}

/* `accent` et `secondary` ne sont PAS branchés sur ces tokens : Tailwind les a
   compilés en dur dans dist/style.css (#f9fafb et #f3f4f6, donc quasi blancs).
   Il faut donc les remapper à la main, sinon un `hover:bg-accent` rend un fond
   blanc en plein thème sombre. */
html.dark .bg-secondary { background-color: #1f2937; }
html.dark .text-secondary-foreground { color: #f3f4f6; }
html.dark .hover\:bg-accent:hover { background-color: #1f2937; }
html.dark .hover\:bg-accent\/50:hover { background-color: rgba(31, 41, 55, .5); }
html.dark .hover\:text-accent-foreground:hover { color: #f3f4f6; }

/* Les surcharges de texte de la section 3 sont en (0,2,1) : elles battraient les
   utilitaires `hover:text-*` (0,2,0) et figeraient la couleur au survol. On les
   repasse donc toutes en (0,3,1) ici. */
html.dark .hover\:text-primary:hover { color: hsl(var(--primary)); }
html.dark .hover\:text-primary\/80:hover { color: hsl(var(--primary) / 0.8); }
html.dark .hover\:text-primary\/70:hover { color: hsl(var(--primary) / 0.7); }
html.dark .hover\:text-foreground:hover { color: hsl(var(--foreground)); }
html.dark .hover\:text-muted-foreground:hover { color: hsl(var(--muted-foreground)); }

/* Les boutons `bg-primary text-white` (2 occurrences) : le fond devient bleu
   clair, on repasse le libellé en sombre pour garder le contraste. */
html.dark .bg-primary.text-white { color: #0d1117; }

/* ==========================================================================
   2. Surfaces neutres
   ========================================================================== */

html.dark .bg-white { background-color: #0d1117; }
html.dark .bg-gray-50 { background-color: #151b23; }
html.dark .bg-gray-100 { background-color: #1a2029; }
html.dark .bg-gray-200 { background-color: #262c38; }
html.dark .bg-gray-300 { background-color: #2d3744; }
html.dark .bg-gray-400 { background-color: #3b4757; }

html.dark .hover\:bg-white:hover { background-color: #151b23; }
html.dark .hover\:bg-gray-50:hover { background-color: #1a2029; }
html.dark .hover\:bg-gray-100:hover { background-color: #222a35; }
html.dark .hover\:bg-gray-200:hover { background-color: #2d3744; }
html.dark .hover\:bg-gray-300:hover { background-color: #38424f; }

html.dark .group:hover .group-hover\:bg-gray-200 { background-color: #2d3744; }
html.dark .group:hover .group-hover\:bg-gray-300 { background-color: #38424f; }

/* Dégradé de la page de connexion (from-gray-50 to-gray-100) */
html.dark .from-gray-50 {
    --tw-gradient-from: #151b23 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(21 27 35 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .to-gray-100 { --tw-gradient-to: #0d1117 var(--tw-gradient-to-position); }

/* ==========================================================================
   3. Textes neutres
   ========================================================================== */

html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-800 { color: #f3f4f6; }

html.dark .text-gray-700,
html.dark .text-gray-600 { color: #d1d5db; }

html.dark .text-gray-500,
html.dark .text-gray-400 { color: #9ca3af; }

html.dark .text-gray-300 { color: #6b7280; }

html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-800:hover { color: #f3f4f6; }

html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-600:hover,
html.dark .hover\:text-gray-500:hover { color: #d1d5db; }

html.dark .group:hover .group-hover\:text-gray-700,
html.dark .group:hover .group-hover\:text-gray-600 { color: #d1d5db; }

html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7280; }

/* ==========================================================================
   4. Bordures neutres
   ========================================================================== */

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #262c38; }

html.dark .border-gray-400 { border-color: #2d3744; }
html.dark .border-white { border-color: #0d1117; }

html.dark .hover\:border-gray-300:hover,
html.dark .hover\:border-gray-400:hover { border-color: #3b4757; }

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: #262c38; }

/* ==========================================================================
   5. Pastilles et encarts colorés
   Les fonds -50/-100 deviennent une teinte translucide de la couleur,
   les textes -600 à -900 remontent en -300 pour rester lisibles.
   ========================================================================== */

html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, .15); }
html.dark .hover\:bg-red-50:hover, html.dark .hover\:bg-red-100:hover, html.dark .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, .25); }
html.dark .border-red-100, html.dark .border-red-200, html.dark .border-red-300 { border-color: rgba(239, 68, 68, .35); }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5; }
html.dark .hover\:text-red-700:hover, html.dark .hover\:text-red-800:hover { color: #fecaca; }

html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, .15); }
html.dark .hover\:bg-blue-50:hover, html.dark .hover\:bg-blue-100:hover, html.dark .hover\:bg-blue-200:hover { background-color: rgba(59, 130, 246, .25); }
html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300 { border-color: rgba(59, 130, 246, .35); }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd; }
html.dark .hover\:text-blue-700:hover, html.dark .hover\:text-blue-800:hover { color: #bfdbfe; }

html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34, 197, 94, .15); }
html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-green-100:hover, html.dark .hover\:bg-green-200:hover { background-color: rgba(34, 197, 94, .25); }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-green-300 { border-color: rgba(34, 197, 94, .35); }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac; }

html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, .15); }
html.dark .hover\:bg-yellow-50:hover, html.dark .hover\:bg-yellow-100:hover, html.dark .hover\:bg-yellow-200:hover { background-color: rgba(234, 179, 8, .25); }
html.dark .border-yellow-100, html.dark .border-yellow-200, html.dark .border-yellow-300 { border-color: rgba(234, 179, 8, .35); }
html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fde047; }

html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .15); }
html.dark .hover\:bg-amber-50:hover, html.dark .hover\:bg-amber-100:hover, html.dark .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, .25); }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, .35); }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d; }

html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, .15); }
html.dark .hover\:bg-orange-50:hover, html.dark .hover\:bg-orange-100:hover, html.dark .hover\:bg-orange-200:hover { background-color: rgba(249, 115, 22, .25); }
html.dark .border-orange-100, html.dark .border-orange-200, html.dark .border-orange-300 { border-color: rgba(249, 115, 22, .35); }
html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900 { color: #fdba74; }

html.dark .bg-teal-50, html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, .15); }
html.dark .hover\:bg-teal-50:hover, html.dark .hover\:bg-teal-100:hover, html.dark .hover\:bg-teal-200:hover { background-color: rgba(20, 184, 166, .25); }
html.dark .border-teal-100, html.dark .border-teal-200, html.dark .border-teal-300 { border-color: rgba(20, 184, 166, .35); }
html.dark .text-teal-600, html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900 { color: #5eead4; }

html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .15); }
html.dark .hover\:bg-indigo-50:hover, html.dark .hover\:bg-indigo-100:hover, html.dark .hover\:bg-indigo-200:hover { background-color: rgba(99, 102, 241, .25); }
html.dark .border-indigo-100, html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: rgba(99, 102, 241, .35); }
html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #a5b4fc; }

html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, .15); }
html.dark .hover\:bg-purple-50:hover, html.dark .hover\:bg-purple-100:hover, html.dark .hover\:bg-purple-200:hover { background-color: rgba(168, 85, 247, .25); }
html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-purple-300 { border-color: rgba(168, 85, 247, .35); }
html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: #d8b4fe; }

html.dark .bg-pink-50, html.dark .bg-pink-100 { background-color: rgba(236, 72, 153, .15); }
html.dark .hover\:bg-pink-50:hover, html.dark .hover\:bg-pink-100:hover, html.dark .hover\:bg-pink-200:hover { background-color: rgba(236, 72, 153, .25); }
html.dark .border-pink-100, html.dark .border-pink-200, html.dark .border-pink-300 { border-color: rgba(236, 72, 153, .35); }
html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-pink-800, html.dark .text-pink-900 { color: #f9a8d4; }

/* ==========================================================================
   6. Champs de saisie
   Les champs du BO n'ont aucune classe de fond (`w-full px-3 py-2 border
   border-gray-300 rounded-md`) : sans règle ici, ils gardent le blanc du
   navigateur en plein thème sombre. On leur donne le fond des BLOCS qui les
   contiennent (#0d1117, comme `.bg-white` en section 2), pas celui de la page.
   Les cases à cocher, boutons et champs fichier sont volontairement exclus :
   ils ont leur propre rendu.
   ========================================================================== */

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="month"],
html.dark input[type="week"],
html.dark input[type="time"],
html.dark input:not([type]),
html.dark textarea,
html.dark select {
    background-color: #0d1117;
    color: #f3f4f6;
}

/* Le menu déroulant natif d'un `select` est peint par l'OS : `color-scheme`
   (posé sur html.dark plus haut) suffit, mais Firefox veut les options. */
html.dark select option {
    background-color: #0d1117;
    color: #f3f4f6;
}

/* Champ désactivé : les variantes `disabled:` ont leur propre spécificité
   (0,2,0) et échappent au remaquillage des classes simples de la section 2.
   Seul le `select` d'intégration ATS (écran Comptes clients) les utilise. */
html.dark .disabled\:bg-gray-100:disabled { background-color: #1a2029; }
html.dark .disabled\:text-gray-400:disabled { color: #6b7280; }

/* Champ en lecture seule (voir `.field-readonly` dans src/css/tailwind.css) :
   en clair il reste gris très pâle, en sombre il suit le fond des blocs. */
html.dark .field-readonly {
    background-color: #0d1117 !important;
    color: #d1d5db !important;
}

/* ==========================================================================
   7. Cas particuliers
   ========================================================================== */

/* Logo LJDC : pastille noire + texte blanc, invisible sur fond sombre.
   Le thème public l'inverse aussi en dark (critical.css, .dark .brand-name). */
html.dark img[src*="ljdc-logo-light"] { filter: invert(1); }

/* Éditeur Quill (CSS servi par le CDN, hors de notre contrôle) */
html.dark .ql-toolbar.ql-snow,
html.dark .ql-container.ql-snow { border-color: #262c38; }

/* Barre d'outils : `#f8fafc` en dur dans src/css/tailwind.css, donc restée
   blanche en thème sombre. En clair elle est à peine plus sombre que la zone de
   saisie ; on reproduit ce léger décrochage à l'envers, un cran plus clair que
   le champ. */
html.dark .ql-snow.ql-toolbar { background: #151b23; }

/* Zone de saisie : le template lui pose `bg-background`, qui la cale sur le fond
   de PAGE (#151b23) alors que tous les autres champs suivent le fond des BLOCS.
   L'écart est invisible en clair (les deux valent blanc), pas en sombre. */
html.dark .ql-container.ql-snow.bg-background { background-color: #0d1117; }
html.dark .ql-snow .ql-stroke { stroke: #d1d5db; }
html.dark .ql-snow .ql-fill { fill: #d1d5db; }
html.dark .ql-snow .ql-picker { color: #d1d5db; }
html.dark .ql-snow .ql-picker-options { background-color: #0d1117; border-color: #262c38; }
html.dark .ql-editor.ql-blank::before { color: #6b7280; }

/* ==========================================================================
   8. Le sélecteur de thème lui-même (styles clair + sombre)
   ========================================================================== */

.ljdc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.ljdc-theme-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.ljdc-theme-toggle button:hover { background-color: #f3f4f6; color: #111827; }
.ljdc-theme-toggle button[aria-pressed="true"] { background-color: #eff6ff; color: #2563eb; }

html.dark .ljdc-theme-toggle { border-color: #262c38; }
html.dark .ljdc-theme-toggle button { color: #9ca3af; }
html.dark .ljdc-theme-toggle button:hover { background-color: #1f2937; color: #f3f4f6; }
html.dark .ljdc-theme-toggle button[aria-pressed="true"] { background-color: rgba(96, 165, 250, .15); color: #60a5fa; }