/* =============================================================================
   Yezan : thème « Classique » (palette A)
   Noir et blanc pour la base, vert pour confirmer, rouge pour refuser ou interdire.
   Chargé en dernier sur toutes les pages de l'application (pas sur website.html),
   il remplace les anciennes couleurs (rose, violet) par des jetons sémantiques.
   Contrastes AA : texte blanc sur --confirm 5,0:1, sur --danger 4,5:1.
   ============================================================================= */
:root {
  /* Base */
  --ink: #111111;
  --muted: #5f6368;
  --line: #e4e4e4;
  --cream: #ffffff;
  --surface: #ffffff;
  --neutral-soft: #f1f1f1;
  /* Actions */
  --confirm: #188038;
  --confirm-dark: #0d652d;
  --confirm-soft: #e6f4ea;
  --danger: #d93025;
  --danger-dark: #a50e0e;
  --danger-soft: #fce8e6;
  /* Anciens noms, conservés pour les pages existantes */
  --rose: var(--ink);
  --violet: var(--ink);
  --plum: var(--ink);
  --lightrose: var(--neutral-soft);
  --green: var(--confirm);
}
body { background: #f2f2f2; }
.app-shell, .login-card { background: var(--surface); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--confirm); }
a { color: inherit; }

/* --- Confirmer : vert ------------------------------------------------------ */
.primary-button, .primary, .accept-request, .approve, button.confirm {
  background: var(--confirm) !important;
  border-color: var(--confirm) !important;
  color: #fff !important;
}
.primary-button:hover, .primary:hover, .accept-request:hover, .approve:hover { background: var(--confirm-dark) !important; }

/* --- Refuser, supprimer, interdire : rouge ------------------------------------ */
.reject-request, .reject, .remove-product, button.danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.reject-request:hover, .reject:hover, .remove-product:hover { background: var(--danger-dark) !important; }
.login-error, .field-error { color: var(--danger-dark); }
.login-success { color: var(--confirm-dark); }

/* --- Actions neutres : contour noir ----------------------------------------- */
.outline, .outline-action, .join-pro {
  background: #fff !important;
  border: 1.5px solid var(--ink) !important;
  color: var(--ink) !important;
}

/* --- Statuts ------------------------------------------------------------ */
.status.confirmed, .status-confirmed, .status-completed, .status-verified { background: var(--confirm-soft); color: var(--confirm-dark); }
.status.pending, .status-pending { background: var(--neutral-soft); color: var(--ink); }
.status.declined, .status.cancelled, .status.rejected, .status-suspended, .status-restricted { background: var(--danger-soft); color: var(--danger-dark); }

/* --- Badges et étiquettes ---------------------------------------------------- */
.client-badge, .pro-badge { background: var(--ink) !important; color: #fff !important; }
.pro-tag { background: var(--neutral-soft); color: var(--ink); }
.brand-dot { background: var(--ink); }

/* --- Blocs mis en avant : noir ----------------------------------------------- */
.pro-hero, .discover-hero { background: linear-gradient(135deg, #2a2a2a, #111111) !important; }
.salon-hero:not([style*="background-image"]) { background: linear-gradient(135deg, #2a2a2a, #111111); }

/* --- Catégories et vignettes : gris neutre ------------------------------------ */
.pink, .violet, .orange, .blue { color: var(--ink); background: var(--neutral-soft); }
.green { color: var(--confirm-dark); background: var(--confirm-soft); }
.category.selected .category-icon { outline-color: var(--ink); }
.professional-image.salon, .professional-image.tresseuse, .professional-image.boutique, .professional-image.toilettage, .professional-image.homme { background-color: #ececec; }

/* --- Sélections ---------------------------------------------------------- */
.slot.selected, .style-option.selected, .deposit-choice:has(input:checked) { border-color: var(--ink) !important; color: var(--ink); background: var(--neutral-soft) !important; }
.nav-item.active { color: var(--ink); font-weight: 700; }
.gallery-add { border-color: #bdbdbd !important; color: var(--ink) !important; background: #fafafa !important; }
.salon-amenities span { background: var(--confirm-soft); color: var(--confirm-dark); }
.service-card .price, .merchant-stats b { color: var(--ink); }

/* --- Administration ---------------------------------------------------------- */
.admin-layout .sidebar { background: #111111 !important; color: #fff !important; border-right: 0 !important; }
.admin-layout .admin-brand, .admin-layout .admin-brand span { color: #fff !important; }
.admin-layout .admin-brand span { background: var(--confirm) !important; }
.admin-layout .workspace { color: #9e9e9e !important; }
.admin-layout .menu-item { color: #d6d6d6 !important; }
.admin-layout .menu-item:hover, .admin-layout .menu-item.active { background: #fff !important; color: #111 !important; }
/* Compteurs du menu : chiffre blanc sur pastille sombre, lisible aussi sur l'élément sélectionné (fond blanc). */
.admin-layout .menu-item b { background: #333 !important; color: #fff !important; }
.admin-layout .menu-item:hover b, .admin-layout .menu-item.active b { background: #111 !important; color: #fff !important; }
.admin-layout .admin-user { border-top-color: #333 !important; }
.admin-layout .admin-user > span { background: var(--confirm) !important; }
.admin-layout .admin-user small { color: #bdbdbd !important; }

/* --- Formulaires : validation champ par champ (inscription) ------------------- */
.field-state { display: block; min-height: 15px; margin-top: 4px; font: 600 11px Arial, sans-serif; }
input.is-valid, select.is-valid { border-color: var(--confirm) !important; box-shadow: 0 0 0 2px var(--confirm-soft); }
input.is-invalid, select.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-soft); }
.field-state.valid { color: var(--confirm-dark); }
.field-state.invalid { color: var(--danger-dark); }

/* --- Site vitrine (website.html) --------------------------------------------- */
.hero { background: linear-gradient(135deg, #f4f4f4, #ffffff) !important; border: 1px solid var(--line); }
.hero > span, .download-text > span, .choice-cards small, .articles p { color: var(--muted) !important; }
.sign-link, a.dl-android, .assistant button { background: var(--confirm) !important; color: #fff !important; }
.assistant { background: #111111 !important; }
.assistant span { color: #cfcfcf !important; }
.dl-ios { background: var(--neutral-soft) !important; color: var(--muted) !important; }
.choice-cards a { box-shadow: 0 6px 18px #0000000f !important; }
.site-header nav a { color: var(--ink); }
footer { color: var(--muted); }
/* Bouton « Créer mon compte » : gris tant que tous les champs ne sont pas corrects, puis vert. */
#registerSubmit:not(.ready) { background: #9e9e9e !important; }
#registerSubmit.ready { background: var(--confirm) !important; }
/* Liens secondaires de la page de connexion (« Créer un compte », « Se connecter », « Annuler ») */
.login-card .login-toggle { background: none !important; color: var(--ink) !important; text-decoration: underline; min-height: 0; }
.login-card .login-error { color: var(--danger-dark) !important; font-weight: 700; }

/* --- Mot de passe : bouton « œil » (password-toggle.js) ----------------------- */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field > input { width: 100%; box-sizing: border-box; padding-right: 46px !important; }
.pw-field > .pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; min-height: 0 !important; padding: 0; border: 0 !important; border-radius: 8px; background: transparent !important; color: var(--muted) !important; cursor: pointer; }
.pw-field > .pw-toggle:hover, .pw-field > .pw-toggle[aria-pressed="true"] { color: var(--ink) !important; }
.pw-field > .pw-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
input::-ms-reveal { display: none; }