/* portal.css — compléments à Tailwind pour le Developer Portal WattMind.

   Tout est encapsulé dans @layer components pour que les utilities Tailwind
   (ex. `.hidden`, `.text-red-600`) gagnent dans la cascade. Sans ce layer,
   les règles brutes ici écrasent silencieusement les utilities (les styles
   hors-layer ont une priorité supérieure à tout @layer en CSS v4). */

/* Tabular numerals globaux : tous les nombres (prix, quotas, ticker, JSON, IDs)
   s'alignent en colonnes proprement, et un changement de valeur n'induit pas
   de reflow horizontal (critique pour le panel live dans le hero). */
body {
    font-feature-settings: 'cv11';
    font-variant-numeric: tabular-nums;
}

@layer components {

.text-wm-600 { color: #16a34a; }
.text-wm-700 { color: #15803d; }
.text-wm-800 { color: #166534; }
.text-wm-900 { color: #14532d; }

.bg-wm-50   { background-color: #f0fdf4; }
.bg-wm-100  { background-color: #dcfce7; }
.bg-wm-600  { background-color: #16a34a; }
.bg-wm-700  { background-color: #15803d; }

.border-wm-200 { border-color: #bbf7d0; }
.border-wm-600 { border-color: #16a34a; }

.hover\:bg-wm-50:hover    { background-color: #f0fdf4; }
.hover\:bg-wm-700:hover   { background-color: #15803d; }
.hover\:bg-wm-800:hover   { background-color: #166534; }
.hover\:text-wm-700:hover { color: #15803d; }
.hover\:text-wm-800:hover { color: #166534; }
.hover\:border-wm-200:hover { border-color: #bbf7d0; }

.focus\:ring-wm-600:focus { box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.4); }
.focus\:border-wm-600:focus { border-color: #16a34a; }

/* Gradient helper (Tailwind `from-*` sur CDN ne résout pas toujours notre palette). */
.from-wm-50 {
    --tw-gradient-from: #f0fdf4;
    --tw-gradient-to: rgba(240, 253, 244, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Spinner utilisé dans les boutons pendant les appels API. */
@keyframes wm-spin {
    to { transform: rotate(360deg); }
}

.wm-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wm-spin 0.6s linear infinite;
    vertical-align: -0.125em;
}

/* Fade-in discret pour les sections qui s'affichent après un fetch. */
@keyframes wm-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wm-fade-in {
    animation: wm-fade-in 0.25s ease-out;
}

/* Scrollbar mince dans les blocs <pre> code. */
.wm-code::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.wm-code::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}
.wm-code::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* Focus ring discret pour le clavier-only (Tailwind 4 n'est pas disponible en CDN). */
.wm-focus:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

/* Transitions douces par défaut sur les boutons. */
button:not(:disabled) {
    transition: all 0.15s ease-in-out;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Eyebrow pill — pattern de labels de sections du Design System.
   Mono kebab-case avec préfixe vert "//", utilisable on light et on dark.
   ============================================================ */
.eb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    line-height: 1;
}
.eb::before {
    content: '//';
    color: #16a34a;
    font-weight: 700;
    letter-spacing: -0.05em;
}
.eb.on-dark {
    color: #86efac;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.30);
}
.eb.on-dark::before { color: #4ade80; }
.eb.muted {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.eb.muted::before { color: #94a3b8; }

/* ============================================================
   Buttons motion — translateY GPU-only au hover, snap-down au press.
   À combiner avec .btn-primary-anim pour le glow sur CTA principal dark.
   ============================================================ */
.btn-anim {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease,
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;
    will-change: transform;
}
.btn-anim:hover { transform: translateY(-1px); }
.btn-anim:active {
    transform: translateY(0);
    transition-duration: 0.06s;
}
.btn-primary-anim:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 10px 28px -8px rgba(34, 197, 94, 0.55);
}

}

/* ============================================================
   Auth shell — split brand panel partagé par les pages portail
   (login, signup, forgot/reset-password, verify-email, success,
   cancel). Panneau sombre de marque à gauche (repris du hero de la
   landing : grid-bg pointillé + glow vert), colonne formulaire blanche
   à droite. Tout est namespacé .auth-* et placé dans @layer components
   pour que les utilities Tailwind (ex. pr-10 sur l'input mot de passe)
   gardent la priorité dans la cascade — même raison que le reste du
   fichier.
   ============================================================ */
@layer components {

/* Grille 2 colonnes ≥ lg ; empilé en-dessous (le panneau de marque
   se réduit alors à une barre compacte .auth-brand-bar). */
.auth-shell {
    min-height: 100vh;
}
@media (min-width: 1024px) {
    .auth-shell {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
    }
}

/* Panneau de marque sombre — masqué sous lg (cf. utilitaire hidden lg:flex
   posé dans le HTML). Fond slate-950 + texture + glow comme le hero. */
.auth-brand {
    position: relative;
    background-color: #020617; /* slate-950 */
    color: #f1f5f9;
    overflow: hidden;
    isolation: isolate;
}

/* Fond pointillé GPU-cheap (copie du .grid-bg du hero index/quickstart). */
.auth-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 22px 22px;
}
/* Glow vert (copie du .hero-glow). */
.auth-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 30% 40%, rgba(22, 163, 74, 0.18), transparent 70%);
}

/* Barre de marque compacte affichée uniquement sous lg, en haut de la
   colonne formulaire — garantit le logo-mark + une sortie vers l'accueil. */
.auth-brand-bar {
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

/* Inputs harmonisés DA : radius + focus ring vert wm cohérent avec la
   landing. S'applique aux <input> de type texte/email/password dans la
   colonne formulaire. (Le focus:ring-wm-600 utilitaire reste compatible.) */
.auth-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.625rem;
    outline: none;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input::placeholder { color: #9ca3af; }
.auth-input:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

}