/* ================================================================
   jobtracker-corrections.css
   1) Supprime le hover rouge sur les boutons carrés (icon-btn, close)
   2) Ajoute des marges gauche/droite dans la vue "Offres"
   3) Fixe le haut (et le bas) de la modal détail d'offre au scroll
   4) Texte noir sur les champs de formulaire (bug texte blanc sur fond blanc)
   À charger EN DERNIER, après tous les autres CSS/JS de thème
   (streaming.css, jobtracker-netflix-v2.css, jobtracker-patch-v2.js, etc.)
   ================================================================ */

/* ── 1. HOVER ROUGE SUR LES BOUTONS CARRÉS ──────────────────────
   Le préfixe "body" ajoute juste assez de spécificité pour
   l'emporter sur les règles !important existantes, quel que soit
   l'ordre de chargement des fichiers. */

body .icon-btn:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

body .app-modal-close:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}

/* Si vous voulez garder du rouge UNIQUEMENT sur un vrai bouton
   de suppression, ajoutez la classe "danger" au bouton en question
   et décommentez ce bloc :
body .icon-btn.danger:hover {
  background: rgba(229,9,20,.15) !important;
  border-color: rgba(229,9,20,.3) !important;
  color: #e50914 !important;
}
*/

/* ── 2. MARGES GAUCHE/DROITE DANS "OFFRES" ─────────────────────── */

body #view-search {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 1000px) {
  body #view-search {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 640px) {
  body #view-search {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── 3. MODAL DÉTAIL D'OFFRE — HEADER/FOOTER FIXES AU SCROLL ────
   Avant : .modal scrolle en un seul bloc (titre + contenu + actions)
   Après : seul #job-detail-content scrolle, le titre reste en haut
   et les boutons "Fermer / Postuler" restent en bas. */

#modal-job-detail .modal {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-height: 90vh !important;
}

#modal-job-detail .modal-title {
  flex-shrink: 0;
  margin: 0;
  padding: 20px 28px 16px;
  background: var(--surface, #141414);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  position: sticky;
  top: 0;
  z-index: 2;
}

#modal-job-detail #job-detail-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 28px;
}

#modal-job-detail .modal-actions {
  flex-shrink: 0;
  margin: 0;
  padding: 14px 28px;
  background: var(--surface, #141414);
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}

/* ── 4. TEXTE NOIR SUR LES CHAMPS DE FORMULAIRE ─────────────────
   var(--tx-1) n'était pas définie : le texte héritait de la
   couleur du parent (blanc), donc invisible sur fond clair. */

input:not([type=checkbox]):not([type=radio]), select, textarea, .form-input-app, .form-select-app {
  border-radius: 8px !important;
  color: #000000 !important;
  font-size: 13px !important;
  transition: border-color .15s, background .15s !important;
}

.modal-input {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-size: 13px !important;
  transition: border-color .15s, background .15s !important;
}

.app-modal-section-label {
  color: rgb(0 0 0 / 35%) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

.tx-1, [style*="color: var(--tx-1)"] {
  color: #180303 !important;
}