/* seller_mobile.scss - Styles mobile-first pour la page vendeur */

/* ========================================
   ONGLETS OPTIMISÉS MOBILE
   ======================================== */

.nav-tabs {
    border-bottom: 2px solid #dee2e6;

    .nav-link {
        color: #6c757d;
        font-weight: 500;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 0.75rem 0.5rem;

        &:hover {
            border-color: transparent;
            color: #0d6efd;
        }

        &.active {
            color: #0d6efd;
            background: none;
            border-bottom-color: #0d6efd;
        }

        // Icônes plus visibles sur mobile
        svg {
            width: 20px;
            height: 20px;
        }
    }
}

/* ========================================
   CARTES VENTES - DESIGN COMPACT
   ======================================== */

.sales-list {
    .card {
        transition: transform 0.2s, box-shadow 0.2s;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        }
    }

    // Images produits responsives
    img {
        max-height: 80px;
        object-fit: cover;
    }
}

/* ========================================
   CARTES DÉPÔTS - DESIGN COMPACT
   ======================================== */

.consignments-list {
    .card {
        transition: transform 0.2s, box-shadow 0.2s;

        &:hover {
            transform: translateX(3px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
        }
    }
}

/* ========================================
   CARTE VENDEUR COMPACTE
   ======================================== */

.sat-card {
    .card-body {
        // Espacement optimisé mobile
        padding: 1rem;

        @media (min-width: 768px) {
            padding: 1.5rem;
        }
    }
}

/* ========================================
   BOUTONS OPTIMISÉS TACTILES
   ======================================== */

.btn-sm {
    // Taille minimum pour toucher facilement
    min-height: 38px;

    // Espacement des icônes
    svg {
        vertical-align: middle;
        margin-top: -2px;
    }
}

// Boutons actions avec icônes seules sur mobile
a[data-controller="confirmDelete"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;

    &:hover {
        transform: scale(1.1);
        transition: transform 0.2s;
    }
}

/* ========================================
   BADGES ET LABELS
   ======================================== */

.badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;

    // Badges arrondis pour les compteurs
    &.rounded-pill {
        padding: 0.25rem 0.75rem;
    }
}

/* ========================================
   AMÉLIORATION TYPOGRAPHIE MOBILE
   ======================================== */

// Titres plus compacts sur mobile
h1, .h1 {
    font-size: 1.5rem;

    @media (min-width: 768px) {
        font-size: 2rem;
    }
}

// Texte petit mais lisible
.small, small {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ========================================
   OPTIMISATION GRILLE RESPONSIVE
   ======================================== */

// Espacement des colonnes réduit sur mobile
.row {
    &.g-2 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

/* ========================================
   PAGINATION MOBILE
   ======================================== */

.pagination {
    justify-content: center;

    .page-link {
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ========================================
   STATS CARD - VISUEL AMÉLIORÉ
   ======================================== */

//.card-header.bg-primary {
//    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
//}

.list-group-flush {
    .list-group-item {
        transition: background-color 0.2s;

        &:hover {
            background-color: #f8f9fa;
        }
    }
}

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

//.alert {
//    display: flex;
//    align-items: center;
//    gap: 0.5rem;
//
//    svg {
//        flex-shrink: 0;
//    }
//}

/* ========================================
   ANIMATIONS SUBTILES
   ======================================== */

.tab-pane {
    animation: fadeIn 0.3s ease-in;
}

//@keyframes fadeIn {
//    from {
//        opacity: 0;
//        transform: translateY(10px);
//    }
//    to {
//        opacity: 1;
//        transform: translateY(0);
//    }
//}

/* ========================================
   SCROLL OPTIMISÉ
   ======================================== */

// Scroll fluide pour les onglets
html {
    scroll-behavior: smooth;
}

// Espacement du contenu sur mobile
.container-fluid {
    @media (max-width: 767px) {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ========================================
   ACCESSIBILITÉ - FOCUS VISIBLE
   ======================================== */

.nav-link:focus,
.btn:focus,
a:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}