/* CSS pour les pages admin - FOND BLANC OPAQUE 100% */

/* Conteneur principal des pages admin */
.admin-page-container {
  position: relative !important;
  z-index: 100 !important;
  min-height: 100vh !important;
  background-color: #f3f4f6 !important;
  background: #f3f4f6 !important;
}

/* Fond opaque pour masquer l'image de fond */
.admin-page-container::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #f3f4f6 !important;
  background: #f3f4f6 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Card blanche opaque - RÈGLE ABSOLUE */
.admin-card {
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
}

/* Texte noir pour les titres */
.admin-title,
h1.admin-title,
h2.admin-title {
  color: #111827 !important;
}

/* RÈGLE GLOBALE : Tous les titres et textes des pages admin doivent être NOIRS */
/* Utiliser la spécificité maximale pour override tout CSS Tailwind */
[data-page="change-password"] h1,
[data-page="change-password"] h2,
[data-page="change-password"] h3,
[data-page="change-password"] h4,
[data-page="change-password"] label,
[data-sf-seller-edit="on"] h1,
[data-sf-seller-edit="on"] h2,
[data-sf-seller-edit="on"] h3,
[data-sf-seller-edit="on"] h4,
[data-sf-seller-edit="on"] label,
[data-sf-seller-edit="on"] .text-gray-900,
[data-sf-seller-edit="on"] .text-gray-800,
[data-sf-seller-edit="on"] .text-gray-700,
[data-sf-seller-edit="on"] .font-bold,
[data-sf-seller-edit="on"] .font-semibold,
[data-page="change-password"] .text-gray-900,
[data-page="change-password"] .text-gray-800,
[data-page="change-password"] .font-bold,
[data-page="change-password"] .font-semibold {
  color: #000000 !important;
}

/* Paragraphes en gris foncé (pas gris clair) */
[data-page="change-password"] p,
[data-sf-seller-edit="on"] p,
[data-page="change-password"] .text-gray-600,
[data-page="change-password"] .text-gray-500,
[data-sf-seller-edit="on"] .text-gray-600,
[data-sf-seller-edit="on"] .text-gray-500 {
  color: #4b5563 !important;
}

/* Sous-titres en gris foncé (pas gris clair) */
[data-page="change-password"] .admin-subtitle,
[data-sf-seller-edit="on"] .admin-subtitle {
  color: #4b5563 !important;
}

/* Texte gris pour les sous-titres */
.admin-subtitle {
  color: #6b7280 !important;
}

/* Labels de formulaire */
.admin-label {
  color: #374151 !important;
  font-weight: 500 !important;
}

/* Champs de formulaire - FOND BLANC, TEXTE NOIR, LARGE */
.admin-input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  outline: none !important;
}

/* Fix pour les icônes de recherche (loupe) - toujours au-dessus du texte */
input[type="text"] + svg,
input[type="search"] + svg,
.relative > svg.absolute,
form > svg.absolute {
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Fix pour les champs avec icône - padding suffisant à gauche */
input.pl-10,
input[class*="pl-10"] {
  padding-left: 2.75rem !important;
}

.admin-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.admin-input::placeholder {
  color: #9ca3af !important;
}

/* Select avec fond blanc */
.admin-select {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  outline: none !important;
  cursor: pointer !important;
}

.admin-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Textarea */
.admin-textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  outline: none !important;
  resize: vertical !important;
  min-height: 120px !important;
}

.admin-textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Bouton principal */
.admin-btn-primary {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.admin-btn-primary:hover {
  background-color: #1d4ed8 !important;
}

.admin-btn-primary:disabled {
  background-color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* Bouton secondaire */
.admin-btn-secondary {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.admin-btn-secondary:hover {
  background-color: #f9fafb !important;
}