/**
 * Expédition — Administration (sélecteur provider d'expédition).
 *
 * Phase 2 vague 1 : sélecteur radio (Désactivé / Boxtal / Sendcloud à venir).
 * Le sous-formulaire Boxtal lui-même est stylé dans
 * includes/Transporteurs/boxtal/assets/css/cc-boxtal-admin.css.
 *
 * ⚠️ LE NOM DE CE FICHIER MENT SUR UNE PARTIE DE SON CONTENU : le composant
 * `cc-diag-*` (groupe, liste, item, voyant, et le modificateur `--neutre`) est
 * PARTAGÉ par les diagnostics expédition ET SMS. Il vit ici parce que cette
 * feuille est enqueuée sur TOUTES les pages CC (cc-enqueue.php) et que
 * fragmenter un composant entre deux feuilles coûterait plus cher que le
 * mensonge. Son domicile légitime est `css/components/` — dette cosmétique
 * consignée dans `TODO.md`, à solder lors d'une retouche du
 * design-system.
 *
 * @file        cc-expedition-admin.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.98.0
 * @version     1.5.0
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

#cc-expedition-provider-carte .cc-provider-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.cc-provider-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--cc-couleur-bordures, #ddd);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.cc-provider-radio:hover:not(.cc-provider-radio--disabled) {
    background-color: var(--cc-couleur-fond-survol, #f6f7f7);
    border-color: var(--cc-couleur-primaire, #2271b1);
}

.cc-provider-radio--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.cc-provider-radio input[type="radio"] {
    margin: 0;
}

.cc-provider-radio-label {
    font-size: 14px;
}

.cc-provider-bientot {
    font-style: italic;
    color: #777;
    margin-left: 4px;
    font-size: 12px;
}

.cc-provider-feedback {
    margin-top: 12px;
    min-height: 1.4em;
    font-size: 13px;
}

.cc-provider-feedback.cc-feedback--ok {
    color: #006a3a;
}

.cc-provider-feedback.cc-feedback--ko {
    color: #b32d2e;
}

/* ==========================================================================
   Carte diagnostic du module expédition
   ========================================================================== */

.cc-diag-groupe {
    margin-top: 16px;
}

.cc-diag-groupe:first-child {
    margin-top: 8px;
}

.cc-diag-groupe-titre {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cc-diag-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-diag-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cc-diag-item:last-child {
    border-bottom: none;
}

.cc-diag-voyant {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.cc-diag-item--ok .cc-diag-voyant {
    background-color: #2ecc71;
    border: 1px solid #27ae60;
    box-shadow: 0 0 3px rgba(46, 204, 113, 0.4);
}

.cc-diag-item--ko .cc-diag-voyant {
    background-color: #e74c3c;
    border: 1px solid #c0392b;
    box-shadow: 0 0 3px rgba(231, 76, 60, 0.4);
}

/* État NEUTRE : ni vert ni rouge — un réglage volontairement éteint alors que
   tout le reste est prêt. Un rouge permanent sur un état CHOISI use le signal
   (couper l'interrupteur OTP est la parade documentée en cas de panne du
   fournisseur). Hors du décompte de problèmes de son groupe. */
.cc-diag-item--neutre .cc-diag-voyant {
    background-color: #dcdcde;
    border: 1px solid #a7aaad;
}

.cc-diag-item--neutre .cc-diag-label {
    color: #1d2327;
}

.cc-diag-textes {
    display: flex;
    flex-direction: column;
}

.cc-diag-label {
    font-size: 13px;
    color: #1d2327;
}

.cc-diag-item--ko .cc-diag-label {
    font-weight: 500;
}

.cc-diag-aide {
    font-size: 12px;
    color: #787c82;
    font-style: italic;
    margin-top: 2px;
}