/**
 * Navigation Onglets — Styles de la navigation par onglets
 *
 * Styles pour la navigation par sous-onglets avec design moderne
 * style underline. Utilisé dans Préférences, Administration et Paramètres.
 *
 * @file        cc-nav-tabs.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.9
 * @version     1.1.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
 */

/* ========================================
   CONTENEUR DES SOUS-ONGLETS
   ======================================== */

.cc-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cc-spacing-lg, 20px);
    padding: 0 var(--cc-spacing-lg, 20px);
    margin-bottom: 0;
    border-top: 1px solid var(--cc-menu-border, #e5e7eb);
    border-bottom: 1px solid var(--cc-menu-border, #e5e7eb);
    background-color: var(--cc-menu-bg, #f9fafb);
}

/* ========================================
   SOUS-ONGLET GENERIQUE
   ======================================== */

.cc-nav-tab {
    display: inline-block;
    padding: var(--cc-spacing-xs, 5px) 0;
    text-decoration: none;
    color: var(--cc-menu-text, #374151);
    font-weight: 500;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -11px; /* Chevauchement sur la bordure du conteneur */
    padding-bottom: 10px;
    transition: all var(--cc-transition, 0.2s ease);
    background-color: transparent;
}

.cc-nav-tab:hover {
    color: var(--cc-important, #007bff);
    background-color: transparent;
}

.cc-nav-tab:focus {
    outline: none;
    box-shadow: none;
}

/* ========================================
   SOUS-ONGLET ACTIF
   ======================================== */

.cc-nav-tab--active {
    display: inline-block;
    padding: var(--cc-spacing-xs, 5px) 0;
    padding-bottom: 0px;
    font-weight: 500;
    font-size: 14px;
    color: var(--cc-important, #007bff);
    border-bottom: 2px solid var(--cc-important, #007bff);
    margin-bottom: -1px;
    background-color: transparent;
}