/* ═══════════════════════════════════════════════════════════════════════════
   Multipricer — Overrides CSS
   Styles premium pour les composants NumberInput du formulaire pricing
   + Styles proto DataTable (solve-btn, solvable-input, page-toggle, recap-badge)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 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;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Proto DataTable styles — intégrés depuis to_integrate/assets/styles.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Solve Button (DataTable / Single proto) ── */
.solve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 20px;
    min-width: 52px;
    border: none;
    text-transform: uppercase;
}

.solve-btn::after {
    content: "SOLVE";
}

.solve-btn.active {
    background: #FF6600;
    color: #FFFFFF;
}

.solve-btn.active::after {
    content: "TARGET";
}

.solve-btn.inactive {
    background: rgba(255, 102, 0, 0.08);
    color: rgba(255, 102, 0, 0.6);
    border: 1px solid rgba(255, 102, 0, 0.2);
}

.solve-btn.inactive:hover {
    background: rgba(255, 102, 0, 0.18);
    color: #FF6600;
    border-color: #FF6600;
}

/* ── Solvable Input — Normal ── */
.solvable-input-wrapper .mantine-Input-input {
    transition: background 0.25s ease, color 0.25s ease;
}

/* ── Solvable Input — Solving State ── */
.solvable-input-wrapper.solving {
    position: relative;
}

.solvable-input-wrapper.solving .mantine-Input-wrapper {
    position: relative;
}

.solvable-input-wrapper.solving .mantine-Input-input,
.solvable-input-wrapper.solving .mantine-Input-input:disabled,
.solvable-input-wrapper.solving .mantine-Input-input[disabled] {
    background: linear-gradient(90deg, #FF6600 0%, #FF8800 100%) !important;
    color: rgba(0, 0, 0, 0) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    border-color: transparent !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    caret-color: transparent;
    cursor: default;
    -webkit-text-fill-color: rgba(0, 0, 0, 0) !important;
}

.solvable-input-wrapper.solving .mantine-Input-input::placeholder,
.solvable-input-wrapper.solving .mantine-Input-input:disabled::placeholder {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    opacity: 1 !important;
}

.solvable-input-wrapper.solving .mantine-Input-wrapper[data-disabled],
.solvable-input-wrapper.solving .mantine-NumberInput-wrapper[data-disabled] {
    opacity: 1 !important;
}

/* ── Solvable Input — Required State ── */
.solvable-input-wrapper.req .mantine-Input-input,
.mantine-Input-input[data-error],
.mantine-Select-input[data-error],
.mantine-TagsInput-input[data-error] {
    background: rgba(255, 51, 51, 0.1) !important;
    border-color: rgba(255, 51, 51, 0.4) !important;
    color: #FF3333 !important;
}

.solvable-input-wrapper.req .mantine-Input-input::placeholder {
    color: rgba(255, 51, 51, 0.7) !important;
    font-weight: 700 !important;
}

/* ── Recap Badges ── */
.recap-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.recap-badge.missing {
    background: rgba(255, 51, 51, 0.15) !important;
    color: #FF3333 !important;
    border: 1px solid rgba(255, 51, 51, 0.25) !important;
    font-weight: 800 !important;
}

.recap-badge.solving {
    background: #FF6600 !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 900 !important;
}

/* ── Sections Masonry Grid ── */
.sections-grid {
    column-count: 1;
    column-gap: 16px;
}

@media (min-width: 768px) {
    .sections-grid {
        column-count: 2;
    }
}

.section-col-item {
    break-inside: avoid;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
}

.section-col-full {
    break-inside: avoid;
    column-span: all;
    margin-bottom: 16px;
    width: 100%;
    display: block;
}

/* ── Page / Mode Toggle (SegmentedControl) ── */
.page-toggle-control {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 2px !important;
}

:root[data-mantine-color-scheme="dark"] .page-toggle-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.page-toggle-control .mantine-SegmentedControl-indicator {
    background: #FF6600 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4) !important;
}

.page-toggle-control .mantine-SegmentedControl-label {
    color: rgba(0, 0, 0, 0.55) !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    font-size: 11px !important;
    padding: 6px 18px !important;
    border-radius: 999px !important;
    transition: color 0.2s ease !important;
}

:root[data-mantine-color-scheme="dark"] .page-toggle-control .mantine-SegmentedControl-label {
    color: rgba(255, 255, 255, 0.45) !important;
}

.page-toggle-control .mantine-SegmentedControl-label[data-active] {
    color: #ffffff !important;
}

/* ── Mode Toggle (Single / Batch SegmentedControl) ── */
#mode-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 2px !important;
    gap: 2px !important;
}

:root[data-mantine-color-scheme="dark"] #mode-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#mode-toggle .mantine-SegmentedControl-indicator {
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

:root[data-mantine-color-scheme="dark"] #mode-toggle .mantine-SegmentedControl-indicator {
    background: rgba(255, 255, 255, 0.12) !important;
}

#mode-toggle .mantine-SegmentedControl-label {
    color: rgba(0, 0, 0, 0.55) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 3px 12px !important;
    border-radius: 6px !important;
    transition: color 0.15s ease !important;
}

:root[data-mantine-color-scheme="dark"] #mode-toggle .mantine-SegmentedControl-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

#mode-toggle .mantine-SegmentedControl-label[data-active] {
    color: #000000 !important;
}

:root[data-mantine-color-scheme="dark"] #mode-toggle .mantine-SegmentedControl-label[data-active] {
    color: #ffffff !important;
}