/* ═══════════════════════════════════════════════════════════════════════════
   Multipricer — Overrides CSS
   Styles premium pour les composants NumberInput du formulaire pricing
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── NumberInput : boutons de contrôle step ── */

/* Zone contrôles : fond transparent, border subtile à gauche */
.mantine-NumberInput-controls {
    border-left: 1px solid var(--mantine-color-default-border);
    gap: 0;
}

/* Chaque bouton (↑ et ↓) */
.mantine-NumberInput-control {
    border: none !important;
    background: transparent;
    color: light-dark(rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.3));
    transition: background 110ms ease, color 110ms ease, transform 80ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

/* Hover : fond brand léger + couleur brand */
.mantine-NumberInput-control:hover:not([data-disabled]) {
    background: color-mix(in srgb, var(--mantine-color-brand-5) 10%, transparent) !important;
    color: var(--mantine-color-brand-5) !important;
}

/* Clic : micro-scale pour retour haptique */
.mantine-NumberInput-control:active:not([data-disabled]) {
    transform: scale(0.88);
}

/* Icône SVG (flèche) : plus petite et centrée */
.mantine-NumberInput-control svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.5;
}

/* Séparateur entre ↑ et ↓ */
.mantine-NumberInput-control + .mantine-NumberInput-control {
    border-top: 1px solid var(--mantine-color-default-border);
}

/* ── Suppression des bordures parasites sur le wrapper quand focus ── */
.mantine-NumberInput-wrapper:focus-within .mantine-NumberInput-controls {
    border-left-color: var(--mantine-color-brand-5);
    transition: border-color 100ms ease;
}

/* ── Error text hidden — tooltip on hover provides the message instead ── */
.mantine-InputWrapper-error {
    display: none !important;
}

/* ── Error state: force red border — overrides glass theme borderColor ─────
   The global theme sets borderColor: var(--glass-border) via styles prop,
   which beats Mantine's --input-bd variable. !important wins over CSS classes.  */
.mantine-Input-input[data-invalid] {
    border-color: var(--mantine-color-error) !important;
    box-shadow: 0 0 0 1px var(--mantine-color-error) !important;
    outline: none !important;
}

/* Same fix for Select in error state */
.mantine-Select-input[data-invalid],
.mantine-TagsInput-input[data-invalid],
.mantine-TextInput-input[data-invalid] {
    border-color: var(--mantine-color-error) !important;
    box-shadow: 0 0 0 1px var(--mantine-color-error) !important;
}

/* ── TagsInput pills : fond brand (orange), texte blanc ────────────────── */
.mantine-TagsInput-pill {
    background:   var(--mantine-color-brand-5) !important;
    color:        white                         !important;
    border:       none                          !important;
}
/* Bouton × de suppression */
.mantine-TagsInput-pill .mantine-Pill-remove {
    color:  rgba(255,255,255,0.8) !important;
}
.mantine-TagsInput-pill .mantine-Pill-remove:hover {
    background: rgba(255,255,255,0.15) !important;
    color:      white                  !important;
}

/* ── Grid row validity border ─────────────────────────────────────────────
   La bordure rouge gauche est appliquée via className seulement,
   jamais via le style prop (qui doit préserver gridTemplateColumns). */
.mp-grid-row {
    border-left: 3px solid transparent;
    transition: border-left-color 0.2s ease;
}
.mp-grid-row--invalid {
    border-left-color: var(--mantine-color-red-6) !important;
}

/* ── Grid Solving state — fond orange sur l'input lui-même ───────────────
   .mp-grid-input--solving est le className sur dmc.NumberInput (root Mantine).
   L'input reste cliquable et éditable (aucun overlay, aucun pointer-events).
   Réactif : className mis à jour par _apply_grid_field_errors → _cls_vals.
   - 1 champ vide solvable  → className="mp-grid-input--solving" → orange
   - 2+ champs vides → className="" → fond normal + bordure rouge (error=True) */
.mp-grid-input--solving .mantine-NumberInput-input {
    background: linear-gradient(
        135deg,
        var(--mantine-color-brand-6),
        var(--mantine-color-brand-4)
    ) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--mantine-color-brand-5) !important;
    color: transparent !important;      /* cache les chiffres tapés pendant SOLVING */
    caret-color: white !important;
}
.mp-grid-input--solving .mantine-NumberInput-input::placeholder {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    font-size: 10px !important;
    text-transform: uppercase;
}

/* ── Solve placeholder : taille réduite dans le grid compact ─────────────── */
.mp-grid-row .mp-grid-input--solving .mantine-NumberInput-input::placeholder {
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
}

/* Solve state : annule le contour rouge même si data-invalid est temporairement actif */
.mp-grid-input--solving .mantine-NumberInput-input[data-invalid] {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--mantine-color-brand-5) !important;
}

/* Solve state : disabled=True mais apparence non-atténuée ────────────────
   Mantine réduit l'opacity via [data-disabled] sur le wrapper et le root.
   On annule ça pour garder le visuel orange vif malgré disabled. */
.mp-grid-input--solving,
.mp-grid-input--solving .mantine-Input-wrapper,
.mp-grid-input--solving .mantine-Input-wrapper[data-disabled],
.mp-grid-input--solving .mantine-InputWrapper-root[data-disabled] {
    opacity: 1 !important;
}
/* L'input lui-même : reset cursor et opacity */
.mp-grid-input--solving .mantine-NumberInput-input:disabled,
.mp-grid-input--solving .mantine-NumberInput-input[data-disabled] {
    opacity:  1      !important;
    cursor:   default !important;
}
/* Flèches step : cacher pendant SOLVING (champ en lecture seule) */
.mp-grid-input--solving .mantine-NumberInput-controls {
    display: none !important;
}

/* ── Solve button states ──────────────────────────────────────────────────
   Les props Mantine bg/c ont été retirées du composant pour permettre
   à className de piloter le visuel sans conflits de spécificité.
   On réplique ici get_glass_style("brand", is_gray=False) en CSS. */

/* État SOLVE (base) — glass brand */
.mp-solve-btn.mantine-Button-root {
    background: linear-gradient(
        90deg,
        light-dark(
            color-mix(in srgb, var(--mantine-color-brand-7) 14%, transparent),
            color-mix(in srgb, var(--mantine-color-brand-5) 20%, transparent)
        ) 0%,
        light-dark(
            color-mix(in srgb, var(--mantine-color-brand-7) 14%, transparent),
            color-mix(in srgb, var(--mantine-color-brand-5) 3%, transparent)
        ) 100%
    ) !important;
    border: 1px solid light-dark(
        color-mix(in srgb, var(--mantine-color-brand-7) 55%, transparent),
        color-mix(in srgb, var(--mantine-color-brand-5) 40%, transparent)
    ) !important;
    color: light-dark(
        var(--mantine-color-brand-8),
        var(--mantine-color-brand-4)
    ) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

/* État TARGET — bouton actif orange plein */
.mp-solve-btn--target.mantine-Button-root {
    background: var(--mantine-color-orange-6) !important;
    color:      white                         !important;
    font-weight: 700                          !important;
    border-color: transparent                 !important;
}