/**
 * Réglages boutique — module Commerce
 *
 * Utilise les variables et les composants du back-office. Rien n'est
 * réinventé ici : les onglets viennent d'Utilities.Tabs, les champs et
 * les boutons du noyau.
 */

/* Colonne centrée : ce sont des réglages qu'on parcourt, pas des blocs
   à comparer. Étirés sur un écran large, les champs deviennent pénibles
   à lire — l'œil parcourt trop de distance entre l'étiquette et la
   valeur. */
/* La largeur vient de `page--narrow`, l'utilitaire du noyau : la coder
   ici en donnerait une différente du reste du back-office.

   Seuls les onglets restent pleine largeur — c'est un repère de
   navigation, il s'étend. */
.shop-settings > .dev__tabs {
    margin-bottom: var(--space-lg);
}

.shop-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    /* La barre flottante recouvrirait le dernier champ des panneaux
       longs si rien ne l'en éloignait. */
    padding-bottom: 80px;
}

/* Les onglets utilisent le composant `dev__tabs` du back-office,
   remonté dans global.css. Rien à redéfinir ici.

   Ils s'étendent en revanche sur toute la largeur. Le débordement est
   obtenu en sortant les onglets du conteneur centré plutôt qu'avec un
   calcul en `vw` : la barre latérale occupe une partie de l'écran, et
   `50vw` déborderait sous elle. */

/* La barre d'enregistrement utilise `settings-actions` du back-office,
   remonté dans global.css. Rien à redéfinir ici. */

/* ── Langues ── */

/* La case vient de `form-check` ; la puce autour est propre à ce cas.
   Une simple liste verticale de cases se lisait mal pour sept langues
   dont deux ou trois sont cochées. */
.shop-locales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.shop-locale {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: all var(--transition-fast);
}

.shop-locale:hover { border-color: var(--primary-400); }

.shop-locale:has(input:checked) {
    border-color: var(--primary-500);
    background: rgba(var(--primary-rgb), 0.06);
}

/* La langue principale ne se décoche pas : sans elle, le catalogue
   perdrait son contenu de repli. Le curseur le signale avant le clic. */
.shop-locale--locked { cursor: not-allowed; }
.shop-locale--locked:hover { border-color: var(--border-color); }

.shop-locale .form-check__help { margin-top: 0; }

/* ── Taux de TVA ── */

/* Champs dimensionnés à leur contenu plutôt qu'étirés : un taux à deux
   chiffres n'a pas besoin de trois cents pixels. */
.tax-rate {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
}

.tax-rate:last-of-type { border-bottom: 0; }

.tax-rate__name { flex: 1; min-width: 120px; }

.tax-rate__value {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.tax-rate__value input { width: 68px; text-align: right; }
.tax-rate__value span { color: var(--text-tertiary); font-size: var(--font-size-sm); }

.tax-rate__applies { width: 130px; flex-shrink: 0; }

/* Le radio vient de `form-check` ; seul le non-retour à la ligne est
   propre au tableau. */
.tax-rate__default { flex-shrink: 0; white-space: nowrap; }
.tax-rate__default .form-check__label { font-size: var(--font-size-xs); }

@media (max-width: 720px) {
    .tax-rate {
        flex-wrap: wrap;
        padding: var(--space-md) 0;
    }

    .tax-rate__name { flex: 1 1 100%; }
}

/* ── Adresse de notification ── */

/* Affichée avec un bouton de copie : la retaper à la main est le
   meilleur moyen d'introduire une faute qui ne se verra qu'au premier
   paiement perdu. */
.gateway__webhook {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.gateway__webhook .form-label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.gateway__webhook-url {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
}

.gateway__webhook-url code {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-xs);
    word-break: break-all;
}

/* ── Cartes de passerelle ── */

/* Mêmes classes que l'onglet Extensions de la fiche produit : le
   composant est le même — un interrupteur, des réglages dépliés — et
   deux styles divergeraient au premier ajustement.
   
   Dupliqués et non partagés : `shop-product.css` n'est pas chargé sur
   cette page, et l'y ajouter ferait télécharger toute la fiche produit
   pour quatre cartes. */

/* Une carte par extension : son état d'activation en tête, ses réglages
   dessous. Les réglages sont masqués tant qu'elle est éteinte — les
   montrer laisserait croire qu'ils s'appliquent. */
.ext-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.ext-card + .ext-card { margin-top: var(--space-sm); }

.ext-card.is-on { border-color: var(--primary-500); }

.ext-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
}

.ext-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    font-size: var(--font-size-lg);
}

.ext-card.is-on .ext-card__icon {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-500);
}

.ext-card__main { flex: 1; min-width: 0; }

.ext-card__main strong {
    display: block;
    font-size: var(--font-size-sm);
}

.ext-card__main span {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.ext-card__body {
    padding: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.ext-card__body[hidden] { display: none; }

.ext-card__color {
    width: 60px;
    height: 34px;
    padding: 2px;
    cursor: pointer;
}

/* Avertissement quand un réglage ne peut pas être satisfait : dire ce
   qui manque évite de chercher pourquoi la liste est vide. */
.ext-card__warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(217, 119, 6, 0.08);
    color: var(--warning-dark, #b45309);
    font-size: var(--font-size-xs);
}


/* ── Statuts de commande ──

   Une grille à colonnes fixes : chaque information est toujours au
   même endroit d'une ligne à l'autre, on lit la colonne plutôt que
   de chercher dans la ligne. */

.status-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.status-row:last-child { border-bottom: 0; }
.status-row:hover { background: var(--bg-surface-secondary); }

.status-row__badge { justify-self: start; }

/* Le profil : ce qui commande le comportement, il doit se lire sans
   ouvrir la fenêtre d'édition. */
.status-row__profile {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.status-row__flags { display: flex; gap: 4px; }

.status-row__flag {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-600);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.status-row__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── Fenêtre d'édition ── */

/* Transitions en colonnes : une liste verticale de dix statuts ferait
   défiler la fenêtre. */
.status-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 2px var(--space-md);
    max-height: 190px;
    overflow-y: auto;
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

@media (max-width: 900px) {
    .status-row {
        grid-template-columns: 1fr auto;
        row-gap: 4px;
    }

    .status-row__profile { grid-column: 1 / -1; }
    .status-row__flags { grid-column: 1; }
}