/**
 * Styles Admin — Point d'entrée principal des styles admin du plugin
 *
 * Styles généraux de l'interface d'administration Caisse-Connect :
 * header de page, conteneurs, formulaires et mise en page responsive.
 *
 * @file        main.css
 * @package     CaisseConnect
 * @subpackage  CSS
 * @since       0.9
 * @version     1.2.2
 * @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
 */

/* ========================================
   STYLES GENERAUX ADMIN CAISSE-CONNECT
   ======================================== */

/* === HEADER DE PAGE === */

/* Container header - layout flexbox 3 zones */
.cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-spacing-lg, 20px);
    margin-bottom: 0;
    padding: var(--cc-spacing-md, 15px) var(--cc-spacing-lg, 20px);
    background-color: var(--cc-menu-bg, #f9fafb);
    flex-wrap: wrap;
}

/* Zone gauche : titre */
.cc-header-left {
    flex: 0 0 auto;
}

/* Zone centre : icône statut connexion caisse */
.cc-bandeau-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cc-bandeau-icone .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    color: #fff;
}

.cc-bandeau-icone:hover {
    opacity: 0.85;
}

.cc-bandeau-icone:disabled {
    cursor: default;
    opacity: 1;
}

.cc-bandeau-icone--ok,
.cc-bandeau-icone--synchro {
    background-color: var(--cc-success, #28a745);
}

.cc-bandeau-icone--error {
    background-color: var(--cc-error, #dc3545);
}

.cc-bandeau-icone--warning {
    background-color: var(--cc-warning-dark, #ff8c00);
}

.cc-bandeau-icone--info {
    background-color: var(--cc-important, #007bff);
}

.cc-bandeau-icone--inconnu {
    background-color: var(--cc-gray-text, #495057);
}

/* Icône maintenance : indicateur passif (non cliquable) → pas d'affordance bouton */
#cc-bandeau-maintenance {
    cursor: default;
}

#cc-bandeau-maintenance:hover {
    opacity: 1;
}

/* Icône « préfixe de commande manquant » : indicateur passif (non cliquable) */
#cc-bandeau-prefixe-manquant {
    cursor: default;
}

#cc-bandeau-prefixe-manquant:hover {
    opacity: 1;
}



/* Zone droite : boutons */
.cc-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.cc-header-right form {
    display: flex;
    align-items: center;
    gap: var(--cc-spacing-sm, 10px);
    margin: 0;
}

/* Titre principal */
.cc-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--cc-text, #333);
    margin: 0;
    padding: 0;
}

/* Boutons dans le header */
.cc-header-right .button,
.cc-header-right .button-primary {
    font-size: 13px;
    padding: 6px 16px;
    border-radius: var(--cc-border-radius, 4px);
    transition: all var(--cc-transition, 0.2s ease);
}

/* Bouton principal (filled) */
.cc-header-right .button-primary {
    background-color: var(--cc-important, #007bff);
    border-color: var(--cc-important-dark, #0056b3);
    color: var(--cc-white, #fff);
}

.cc-header-right .button-primary:hover,
.cc-header-right .button-primary:focus {
    background-color: var(--cc-important-dark, #0056b3);
    border-color: var(--cc-important-dark, #0056b3);
}

/* Bouton secondaire (outline) */
.cc-header-right .button {
    background-color: transparent;
    border: 1px solid var(--cc-btn-outline-border, #d1d5db);
    color: var(--cc-btn-outline-text, #374151);
}

.cc-header-right .button:hover,
.cc-header-right .button:focus {
    background-color: var(--cc-btn-outline-hover-bg, #f3f4f6);
    border-color: var(--cc-gray-500, #ccc);
    color: var(--cc-text, #333);
}

/* Logo dans le header */
.cc-header-logo {
    max-height: 40px;
    width: auto;
    display: block;
}

/* Icônes email bandeau */
.cc-email-icon-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    margin: 0 4px;
}

.cc-email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--cc-important, #007bff);
    color: #fff;
    font-size: 18px;
    line-height: 32px;
}

.cc-email-icon-wrapper:hover .cc-email-icon {
    background-color: var(--cc-important-dark, #0056b3);
}

.cc-email-badge {
    position: absolute;
    top: -4px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: #dc3232;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

.cc-email-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #666;
    margin-top: -2px;
    white-space: nowrap;
    text-decoration: none;
}

/* === CONTENU DES ONGLETS === */

.tab-content {
    margin-top: 0;
    padding: 0;
    background-color: var(--cc-white, #fff);
}

/* Wrap enfant direct de tab-content */
.tab-content > .wrap {
    padding: var(--cc-spacing-lg, 20px);
    margin: 0;
}

/* Wrap Caisse-Connect (reset WordPress) */
.wrap.cc-wrap {
    padding: 0;
    margin: 0;
}

/* Boutons principaux Caisse-Connect */
.wrap.cc-wrap .button-primary {
    background-color: var(--cc-important, #007bff);
    border-color: var(--cc-important-dark, #0056b3);
    color: var(--cc-white, #fff);
}

.wrap.cc-wrap .button-primary:hover,
.wrap.cc-wrap .button-primary:focus {
    background-color: var(--cc-important-dark, #0056b3);
    border-color: var(--cc-important-darker, #004494);
}

/* Première carte sans margin-top */
.tab-content > .cc-carte:first-child,
.tab-content > .wrap > .cc-carte:first-child,
.tab-content > div:first-child > .cc-carte:first-child {
    margin-top: 0;
}

/* === TABLEAUX DE REGLAGE === */

.form-table th {
    width: 300px;
    padding-top: 15px;
}

.cc_tab_stats td {
    border: 1px var(--cc-black, #000) solid;
    border-collapse: collapse;
}


/* ========================================
   RESPONSIVE MOBILE - HEADER
   ======================================== */

@media screen and (max-width: 782px) {

    /* Module Mobile + Logo en premier, avec espace pour le bouton ☰ fixe */
    .cc-header-right {
        order: -1;
        padding-left: 50px;
        gap: 15px;
        min-height: 46px;
        align-items: center;
    }

    /* Bandeau connexion en 2ème, pleine largeur */
    .cc-header-center {
        order: 1;
        flex-basis: 100%;
    }

    /* Titre de page en 3ème, pleine largeur */
    .cc-header-left {
        order: 2;
        flex-basis: 100%;
    }
}