/* ============================================================
   Fichier  : kdp-diag-ecriture.css
   Rôle     : Stylo ✎ « modifier l'enchère chez Amazon » (composant ModifierEnchere.razor, lot 1 du plan
              PLAN-MISE-A-JOUR-AMAZON-API.md). Feuille GLOBALE : le composant est posé dans plusieurs autres
              composants (tableau des ciblages, fiche), l'isolation .razor.css ne traverserait pas.
              Palette reprise du reste du module (aucune nouvelle couleur).

              PIÈGE : le panneau est rendu DANS une cellule de tableau (<td>) qui impose white-space: nowrap,
              text-align, majuscules… et ces propriétés s'HÉRITENT jusque dans le panneau (texte coupé,
              défilement horizontal). On les remet à zéro sur .stylo-scrim : ne pas retirer ce bloc.
   ============================================================ */

.stylo-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #45c4dc;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    margin-left: 4px;
    padding: 1px 5px;
    vertical-align: baseline;
}

    .stylo-btn:hover,
    .stylo-btn:focus-visible {
        border-color: #45c4dc;
        background: rgba(69, 196, 220, .12);
    }

/* Au-dessus du tiroir de fiche (z-index 1040 / 1050) */
.stylo-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 7, 11, .65);
    padding: 16px;
    /* remise à zéro de ce qu'un <td> parent impose */
    white-space: normal;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    line-height: 1.4;
    cursor: default;
}

    .stylo-scrim *,
    .stylo-scrim *::before,
    .stylo-scrim *::after {
        box-sizing: border-box;
    }

.stylo-panneau {
    width: min(460px, 100%);
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #2a3a50;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    color: var(--sol-text, #e6edf6);
    font-size: .875rem;
    padding: 18px 20px 16px;
}

/* ── Trace d'une modification faite depuis l'outil (fiche et tableau) ── */
.fiche-appliquee {
    background: rgba(46, 201, 138, .1);
    border: 1px solid #2EC98A;
    border-radius: 6px;
    color: var(--sol-text, #e6edf6);
    font-size: .8rem;
    line-height: 1.4;
    margin: 8px 0;
    padding: 8px 12px;
}

.diag-badge-appliquee {
    background: rgba(46, 201, 138, .12);
    border: 1px solid #2EC98A;
    border-radius: 20px;
    color: #2EC98A;
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    margin: 0 4px 4px 0;
    padding: 1px 8px;
    white-space: normal;
}

/* ── En-tête ── */
.stylo-entete {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.stylo-entete-texte { min-width: 0; }

.stylo-titre { font-size: 1.05rem; font-weight: 700; }

.stylo-cible {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 6px;
}

.stylo-nom { color: #45c4dc; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }

.stylo-pastille {
    background: rgba(69, 196, 220, .14);
    border: 1px solid rgba(69, 196, 220, .45);
    border-radius: 4px;
    color: #45c4dc;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 1px 6px;
    text-transform: uppercase;
}

.stylo-camp {
    color: var(--sol-muted, #a7b6ca);
    font-size: .75rem;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.stylo-fermer {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    cursor: pointer;
    flex: none;
    font-size: .95rem;
    line-height: 1;
    padding: 5px 8px;
}

    .stylo-fermer:hover { border-color: #2a3a50; color: var(--sol-text, #e6edf6); }
    .stylo-fermer:disabled { cursor: default; opacity: .4; }

/* ── Enchère actuelle ── */
.stylo-actuelle {
    align-items: center;
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 14px;
    padding: 10px 14px;
}

.stylo-mini {
    color: var(--sol-muted, #a7b6ca);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.stylo-grand { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin-top: 2px; }

.stylo-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

    .stylo-meta small { color: var(--sol-muted, #a7b6ca); font-size: .7rem; }

.stylo-badge {
    border: 1px solid;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 9px;
}

.stylo-badge-actif { background: rgba(46, 201, 138, .12); border-color: #2EC98A; color: #2EC98A; }
.stylo-badge-pause { background: rgba(224, 160, 64, .12); border-color: #E0A040; color: #E0A040; }

/* ── Suggestion du moteur ── */
.stylo-sugg {
    align-items: center;
    border: 1px dashed #2a3a50;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 10px;
    padding: 8px 14px;
}

.stylo-sugg-valeur { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.stylo-sugg-valeur b { font-size: 1.05rem; }

.stylo-chip {
    background: transparent;
    border: 1px solid #45c4dc;
    border-radius: 20px;
    color: #45c4dc;
    cursor: pointer;
    flex: none;
    font-size: .78rem;
    padding: 3px 12px;
}

    .stylo-chip:hover:not(:disabled) { background: rgba(69, 196, 220, .14); }
    .stylo-chip:disabled { border-color: #2a3a50; color: var(--sol-muted, #a7b6ca); cursor: default; }

/* ── Saisie ── */
.stylo-label {
    color: var(--sol-muted, #a7b6ca);
    display: block;
    font-size: .68rem;
    letter-spacing: .05em;
    margin-top: 16px;
    text-transform: uppercase;
}

.stylo-champ {
    align-items: stretch;
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.stylo-saisie {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: inherit;
    flex: 1 1 auto;
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 0;
    padding: 6px 10px;
    text-align: right;
}

    .stylo-saisie:focus { border-color: #45c4dc; outline: none; }
    .stylo-saisie:disabled { opacity: .6; }

.stylo-unite { align-self: center; color: var(--sol-muted, #a7b6ca); font-size: 1.05rem; }

.stylo-pas {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    flex: none;
    font-size: 1.2rem;
    line-height: 1;
    width: 38px;
}

    .stylo-pas:hover:not(:disabled) { border-color: #45c4dc; color: #45c4dc; }
    .stylo-pas:disabled { cursor: default; opacity: .45; }

.stylo-apercu {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.05rem;
    gap: 4px 10px;
    margin-top: 12px;
}

.stylo-fleche { color: var(--sol-muted, #a7b6ca); }
.stylo-hausse { color: #2EC98A; font-size: .85rem; font-weight: 700; }
.stylo-baisse { color: #E0A040; font-size: .85rem; font-weight: 700; }

/* ── Messages ── */
.stylo-note { color: var(--sol-muted, #a7b6ca); font-size: .78rem; margin: 10px 0 0; }
.stylo-erreur { color: #ef5a5a; font-weight: 600; margin: 12px 0 0; }
.stylo-succes { color: #2EC98A; font-weight: 600; margin: 12px 0 0; }

.stylo-confirme {
    align-items: flex-start;
    background: rgba(224, 160, 64, .1);
    border: 1px solid #E0A040;
    border-radius: 6px;
    color: #E0A040;
    cursor: pointer;
    display: flex;
    font-size: .8rem;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
}

    .stylo-confirme input { flex: none; margin-top: 3px; }

/* ── Boutons ── */
.stylo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.stylo-bouton {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    padding: 7px 16px;
}

    .stylo-bouton:hover:not(:disabled) { border-color: #45c4dc; }

.stylo-bouton-primaire {
    background: var(--sol-accent, #FF9900);
    border-color: var(--sol-accent, #FF9900);
    color: #111;
    font-weight: 600;
}

    .stylo-bouton-primaire:hover:not(:disabled) { border-color: var(--sol-accent, #FF9900); filter: brightness(1.08); }

.stylo-bouton:disabled { cursor: default; opacity: .5; }

.stylo-pied { color: var(--sol-muted, #a7b6ca); font-size: .7rem; margin: 14px 0 0; }