/**
 * Accueil — Styles de la page Dashboard/Accueil
 *
 * Mise en page des cartes statistiques, dernières commandes
 * et informations générales du tableau de bord.
 *
 * @file        cc-accueil.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.9
 * @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
 */

/* ========================================
   LAYOUT CARTES ACCUEIL (grid 2 colonnes)
   ======================================== */

.cc-accueil-cartes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}

/* Neutraliser le margin-top générique des cartes dans le layout */
.cc-accueil-cartes .cc-carte + .cc-carte {
    margin-top: 0;
}

/* Carte statistiques : colonne gauche */
.cc-accueil-cartes > .cc-carte-stats {
    max-width: 350px;
}

/* Colonne droite : empilement indépendant de la hauteur de Stats */
.cc-accueil-colonne-droite {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ========================================
   CARTE DERNIERES COMMANDES
   ======================================== */

.cc-carte-commandes .cc-carte-header {
    flex-wrap: wrap;
    gap: 10px;
}

.cc-carte-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-accueil-btn-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-accueil-btn-refresh .dashicons {
    line-height: 1;
}

.cc-accueil-nb-lignes-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--cc-wp-text-secondary, #646970);
}

.cc-accueil-nb-lignes-label input {
    width: 60px;
}

.cc-input-petit {
    width: 60px;
    padding: 4px 8px;
    font-size: 13px;
}

.cc-accueil-aucune-commande {
    text-align: center;
    color: var(--cc-wp-text-secondary, #646970);
    font-style: italic;
    padding: 20px;
    margin: 0;
}

/* ========================================
   TABLEAU COMMANDES
   ======================================== */

.cc-carte-tableau-container {
    overflow-x: auto;
}

.cc-table-commandes {
    margin: 0;
    border: none;
}

.cc-table-commandes th {
    font-weight: 600;
    white-space: nowrap;
    background: #f5f5f5;
}

.cc-commande-link {
    font-weight: 600;
    text-decoration: none;
    color: var(--cc-important, #007bff);
}

.cc-commande-link:hover {
    text-decoration: underline;
}

/* Colonnes avec largeurs fixes */
.cc-table-commandes .column-order_number {
    width: 100px;
    max-width: 60px;
}

.cc-table-commandes .column-order_date {
    width: 130px;
    max-width: 100px;
    white-space: nowrap;
}

.cc-table-commandes .column-order_status {
    width: 120px;
    max-width: 100px;
}

.cc-table-commandes .column-cc_facture {
    width: 65px;
    text-align: center;
}

.cc-table-commandes .column-order_total {
    width: 100px;
    max-width: 80px;
    text-align: right;
}

/* ========================================
   STYLES DES STATUTS (reprend WooCommerce)
   ======================================== */

.cc-table-commandes .order-status {
    display: inline-block;
    padding: 0 8px;
    line-height: 2;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    border-radius: 3px;
    background: #e5e5e5;
}

.cc-table-commandes .order-status.status-processing {
    background: #c6e1c6;
    color: #5b841b;
}

.cc-table-commandes .order-status.status-on-hold {
    background: #f8dda7;
    color: #94660c;
}

.cc-table-commandes .order-status.status-completed {
    background: #c8d7e1;
    color: #2e4453;
}

.cc-table-commandes .order-status.status-pending {
    background: #e5e5e5;
    color: #777;
}

.cc-table-commandes .order-status.status-cancelled,
.cc-table-commandes .order-status.status-refunded,
.cc-table-commandes .order-status.status-failed {
    background: #eba3a3;
    color: #761919;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .cc-accueil-cartes {
        grid-template-columns: 1fr;
    }

    .cc-accueil-cartes > .cc-carte-stats {
        max-width: 100%;
    }
}

@media (max-width: 782px) {
    .cc-carte-header-actions {
        flex-wrap: wrap;
    }

    /* Masquer les colonnes d'adresse et facture sur mobile */
    .cc-table-commandes .column-billing_address,
    .cc-table-commandes .column-shipping_address,
    .cc-table-commandes .column-cc_facture {
        display: none;
    }

    .cc-table-commandes th.column-billing_address,
    .cc-table-commandes th.column-shipping_address,
    .cc-table-commandes th.column-cc_facture {
        display: none;
    }
}

/* Le spinner du bouton « Rafraîchir » de la carte Commandes (cc-accueil.js)
   utilise la classe utilitaire globale .cc-spin (css/core/cc-animations.css),
   chargée sur toutes les pages du plugin — pas de redéfinition locale ici. */


/* ========================================
   ALERTES PRODUITS IMPUBLIABLES
   ======================================== */

/* Aligne le texte et les boutons « Voir » / « Ignorer » sur une ligne.
   Les boutons héritent du style WP natif .button.button-small. */
.cc-alerte-impubliable {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ========================================
   CARTE « COMPTES CLIENTS ORPHELINS » (D18)
   ======================================== */

/* La carte reprend .cc-carte / .cc-carte-header / .cc-warning, composants
   partagés consommés tels quels : seules la classe d'accroche et le badge
   sont définis ici. */

/* Aligne le texte et les boutons « Voir » / « Ignorer » sur une ligne, comme
   l'alerte des produits impubliables. */
.cc-alerte-clients-orphelins {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ⚠️ BADGE DU CŒUR, convention maison .cc-badge-{nom} (précédents autonomes :
   .cc-badge-compose, .cc-badge-promo, .cc-badge-doublon, .cc-badge-indispo).
   NE JAMAIS consommer .cc-kwisatz-badge-count : celle-ci vit dans la feuille du
   MODULE Kwisatz, enqueuée par son bootstrap — l'emprunter inscrirait un nom de
   module dans une surface agnostique ET laisserait le badge TOTALEMENT DÉPOURVU
   DE STYLE sur toute installation à une autre caisse (un chiffre nu au milieu du
   titre, sans la moindre erreur pour le signaler). */
.cc-badge-orphelins {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #e2a03f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}