/**
 * GI App Tabs — Front styles
 *
 * S'appuie sur les classes .gi-tabbar et .gi-tabbar__item déjà
 * définies dans gi-app-core/assets/css/gi-design-system.css.
 *
 * Ce fichier ajoute :
 *   - le positionnement fixed (au-dessus du contenu)
 *   - le badge
 *   - la version mobile-only conditionnelle
 *   - le fond clair (style screenshot fourni)
 */

/* Variables alignées sur le design system du core (avec fallback) */
.gi-tabbar--app {
    --gi-tabs-bg:           var(--gi-light, #ffffff);
    --gi-tabs-border:       rgba(0, 0, 0, .06);
    --gi-tabs-color:        var(--gi-grey-500, #8b8b95);
    --gi-tabs-color-active: var(--gi-cyan, #1e9bff);
    --gi-tabs-height:       var(--gi-nav-height, 68px);
}

/* Position fixed bas de page (override du sticky du core pour usage app) */
.gi-tabbar--app {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gi-tabs-bg);
    border-top: 1px solid var(--gi-tabs-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .04);
    z-index: 9998;
    height: calc(var(--gi-tabs-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}

/* Décalage du contenu pour ne pas masquer le bas */
body.gi-tabs-active {
    padding-bottom: calc(var(--gi-nav-height, 68px) + env(safe-area-inset-bottom));
}

/* Fallback pour navigateurs supportant :has() (plus précis) */
body:has(.gi-tabbar--app) {
    padding-bottom: calc(var(--gi-nav-height, 68px) + env(safe-area-inset-bottom));
}

/* Items en mode clair (style screenshot) */
.gi-tabbar--app .gi-tabbar__item {
    color: var(--gi-tabs-color);
    position: relative;
    text-decoration: none;
    padding: 8px 4px;
    transition: color .15s ease;
}

.gi-tabbar--app .gi-tabbar__item:hover,
.gi-tabbar--app .gi-tabbar__item.is-active {
    color: var(--gi-tabs-color-active);
}

.gi-tabbar--app .gi-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.gi-tabbar--app .gi-tab-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

.gi-tabbar--app .gi-tab-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* Permet la teinte d'image PNG noir vers couleur active */
    transition: filter .15s ease;
}

.gi-tabbar--app .gi-tabbar__label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: .2px;
}

.gi-tabbar--app .gi-tabbar__item.is-active .gi-tabbar__label {
    font-weight: 600;
}

/* Badge */
.gi-tabbar--app .gi-tabbar__badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(18px);
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile only (toggle via option WP) */
body.gi-tabs-mobile-only .gi-tabbar--app {
    display: none;
}

@media (max-width: 768px) {
    body.gi-tabs-mobile-only .gi-tabbar--app {
        display: flex;
    }
}

/* Tap feedback */
.gi-tabbar--app .gi-tabbar__item:active .gi-tab-icon {
    transform: scale(.92);
    transition: transform .08s ease;
}