/**
 * Messages — Styles des messages et alertes (succès, erreur, warning, info)
 *
 * Styles centralisés pour les messages de retour utilisateur :
 * succès, erreur, avertissement et information.
 *
 * @file        cc-messages.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.9
 * @version     1.3.3
 * @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
 */

/* ========================================
   MESSAGES DE BASE
   ======================================== */

.cc-success {
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    margin: 5px 0;
    border-left: 4px solid var(--cc-success, #28a745);
    border-top: 1px solid var(--cc-success, #28a745);
    border-bottom: 1px solid var(--cc-success, #28a745);
    border-right: 1px solid var(--cc-success, #28a745);
    max-width: 900px;
    width: fit-content;
}

.cc-error {
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    margin: 5px 0;
    border-left: 4px solid var(--cc-error, #dc3545);
    border-top: 1px solid var(--cc-error, #dc3545);
    border-bottom: 1px solid var(--cc-error, #dc3545);
    border-right: 1px solid var(--cc-error, #dc3545);
    max-width: 900px;
    width: fit-content;
}

.cc-warning {
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    margin: 5px 0;
    border-left: 4px solid var(--cc-warning, #ffc107);
    border-top: 1px solid var(--cc-warning, #ffc107);
    border-bottom: 1px solid var(--cc-warning, #ffc107);
    border-right: 1px solid var(--cc-warning, #ffc107);
    max-width: 900px;
    width: fit-content;
}

.cc-info {
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    margin: 5px 0;
    border-left: 4px solid var(--cc-info, #0073aa);
    border-top: 1px solid var(--cc-info, #0073aa);
    border-bottom: 1px solid var(--cc-info, #0073aa);
    border-right: 1px solid var(--cc-info, #0073aa);
    max-width: 900px;
    width: fit-content;
}

.cc-important {
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    margin: 5px 0;
    font-weight: bold;
    border-left: 4px solid var(--cc-important, #007bff);
    border-top: 1px solid var(--cc-important, #007bff);
    border-bottom: 1px solid var(--cc-important, #007bff);
    border-right: 1px solid var(--cc-important, #007bff);
    max-width: 900px;
    width: fit-content;
}

/* ========================================
   CONTENEUR DE RESULTATS
   ======================================== */

.cc-results {
    margin: 20px 0;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--cc-border-color, #ddd);
    padding: 15px;
    background: var(--cc-gray-100, #f9f9f9);
}

/* ========================================
   CLASSES TEXTE POUR STATUTS
   ======================================== */

.texte-probleme {
    color: var(--cc-error, #dc3545) !important;
    font-weight: bold;
}

.texte-warning {
    color: var(--cc-warning-dark, #ff8c00) !important;
    font-weight: bold;
}

.texte-anoter {
    color: var(--cc-warning-dark, #ff8c00);
}

.texte-ok {
    color: var(--cc-success, #28a745) !important;
    font-weight: bold;
}

.texte-grise {
    color: var(--cc-gray-600, #999) !important;
}

/* Produit exclu de la vente web (statut draft) : couleur dédiée pour le
   distinguer d'un publish en vue multi-statuts du tableau Produits. */
.texte-exclu {
    color: #8e44ad !important;
    font-weight: bold;
}

.texte-normal {
    color: inherit;
    font-weight: normal;
}

.texte-avertissement {
    color: var(--cc-warning-text, #856404);
}

.texte-erreur {
    color: var(--cc-error, #dc3545);
}

/* ========================================
   BACKGROUNDS POUR STATUTS
   ======================================== */

.bg-probleme {
    background-color: var(--cc-error-bg, #f8d7da);
}

.bg-warning {
    background-color: var(--cc-warning-bg, #fff3cd);
}

.bg-ok {
    background-color: var(--cc-success-bg, #d4edda);
}

.bg-grise {
    background-color: var(--cc-gray-200, #f5f5f5);
}

/* ========================================
   TABLEAU STATISTIQUES ACCUEIL
   ======================================== */

.cc-carte-stats {
    width: fit-content;
    max-width: none;
}

.cc-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid var(--cc-wp-border-light, #c3c4c7);
}

.cc-stats-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--cc-gray-200, #f5f5f5);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cc-important-text, #004085);
    border: 1px solid var(--cc-wp-border-light, #c3c4c7);
}

.cc-stats-table td {
    padding: 6px 12px;
    border: 1px solid var(--cc-wp-border-light, #c3c4c7);
}

.cc-stats-table .cc-stats-nombre {
    text-align: right;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
}

.cc-stats-table .cc-stats-detail {
    color: var(--cc-gray-600, #999);
    font-size: 13px;
}

/* ========================================
   BOITES D'INFORMATION
   ======================================== */

/* Boite info generique avec bordure laterale */
.cc-info-box {
    padding: 12px;
    margin-bottom: 20px;
    border-left: 4px solid var(--cc-info, #0073aa);
    background: var(--cc-info-bg, #e7f3ff);
}

/* Variante bleue (style WordPress) */
.cc-info-box--blue {
    border-left-color: var(--cc-info-alt, #2196f3);
    background: var(--cc-info-bg, #e7f3ff);
}

/* Variante centree (pour messages importants) */
.cc-info-box--centered {
    text-align: center;
    padding: 40px;
}

/* ========================================
   TEXTE COLORE SIMPLE
   ======================================== */

.cc-text-success { color: var(--cc-success, #28a745); }
.cc-text-error { color: var(--cc-error, #dc3545); }
.cc-text-error-dark { color: var(--cc-error-text, #721c24); }
.cc-text-muted { color: var(--cc-gray-700, #666); }

/* ========================================
   DESCRIPTIONS
   ======================================== */

.cc-description {
    color: var(--cc-gray-700, #666);
    font-style: italic;
}

/* ========================================
   MESSAGES WIZARD
   ======================================== */

.cc-wizard-message {
    text-align: center;
    padding: 40px;
    background: var(--cc-info-alt-bg, #e7f3fe);
    border-left: 4px solid var(--cc-info-alt, #2196f3);
    margin: 20px 0;
}

.cc-wizard-message-title {
    font-size: 20px;
    margin-bottom: 15px;
}

.cc-wizard-message-text {
    margin-top: 20px;
    font-size: 18px;
}