/* ================================================================
   Mobile responsive overrides — Barons Gear
   Cible : appareils <768px (téléphones)
   Stratégie minimale : flow critique fonctionnel sur mobile
   (Auth → Accueil → Menu → Caisse + Produits / Catégories / Inventaire
    + Rapports de ventes utilisés en réunion CA terrain).
   ================================================================ */

@media (max-width: 767.98px) {

    /* ---- Content wrapper : réduction du padding interne ---- */
    .content-wrapper {
        padding: 0.75rem !important;
        border-radius: 0 !important;
        min-height: calc(100vh - 8rem) !important;
    }

    /* ---- Top row : compactage du breadcrumb ---- */
    .top-row {
        margin: 0 !important;
        border-radius: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .top-row-content {
        padding: 8px 8px !important;
        gap: 0.5rem;
        flex-wrap: wrap !important;
    }

    .breadcrumb-section {
        flex: 1 1 100%;
        min-width: 0;
    }

    .breadcrumb {
        flex-wrap: wrap;
    }

    .breadcrumb-item,
    .breadcrumb-link {
        font-size: 0.85rem !important;
    }

    .welcome-text {
        font-size: 0.7rem !important;
    }

    /* Sur mobile on garde juste les 2 derniers niveaux du breadcrumb pour économiser l'espace */
    .breadcrumb-item:not(:nth-last-child(-n+2)):not(.breadcrumb-item:first-child) {
        display: none;
    }

    .user-section {
        gap: 4px !important;
    }

    /* Cache le selecteur de langue sur mobile (peu utile en match) */
    .language-selector {
        display: none !important;
    }

    /* Cache le bouton aide sur mobile */
    .help-btn {
        display: none !important;
    }

    /* Articles & sections : reset padding ---- */
    article.content,
    article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ---- Cards : moins de padding ---- */
    .card-body {
        padding: 0.75rem !important;
    }

    .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    .card-header h5,
    .card-header h6 {
        font-size: 1rem !important;
    }

    /* ---- Container Fluid : pas de padding additionnel ---- */
    .container-fluid {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* ---- Tables : scroll horizontal automatique ----
       Approche : transformer la table en bloc avec overflow-x.
       Couvre la majorité des cas où la table dépasse la largeur de l'écran. */
    .card-body > .table-responsive,
    .card-body > .table,
    .card-body > .b-table-container,
    .card-body > .b-table,
    .card-body > div > .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .card-body table {
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .card-body table th,
    .card-body table td {
        padding: 0.4rem 0.5rem !important;
    }

    /* ---- Filter rows : forcer le wrap des Blazorise Column ---- */
    .row > [class*="col-"]:has(> .field),
    .row > .b-column:has(> .field) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem;
    }

    /* ---- CRITIQUE : Blazorise Column<Is1..Is11> rend en col-1, col-2, etc.
       sans variante mobile. On les force à 100% width ou 50% width selon contexte sur mobile.
       Les col-12 sont déjà full width donc ignorés. ---- */
    .row > .col-1, .row > .col-2, .row > .col-3,
    .row > .col-4, .row > .col-5, .row > .col-7,
    .row > .col-8, .row > .col-9, .row > .col-10,
    .row > .col-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* col-6 = 50% naturel — utile pour les KPI cards par paires */
    .row > .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Exception : si on a explicitement des classes responsive Bootstrap
       (col-X col-md-Y ou col-X col-sm-Y), on les laisse tranquilles */
    .row > [class*="col-md-"]:not([class~="col-12"]),
    .row > [class*="col-sm-"]:not([class~="col-12"]) {
        /* respecter les classes responsive — mobile.css n'override pas */
    }

    /* ---- Boutons : pleine largeur quand seuls dans une row ---- */
    .btn-block-mobile,
    .mobile-full-button {
        width: 100% !important;
    }

    /* ---- Form fields : compactage ---- */
    .form-label,
    .field-label {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* ---- Headings : taille raisonnable ---- */
    h2, .h2 { font-size: 1.4rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.15rem !important; }
    h5, .h5 { font-size: 1.05rem !important; }
    h6, .h6 { font-size: 0.95rem !important; }

    /* ---- Footer : compactage ---- */
    .app-footer {
        padding: 0.5rem 1rem !important;
    }

    /* ---- KPI cards (rapports) : empilage ---- */
    .kpi-card-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* ---- Tableaux en mode "stacked" via classe opt-in ---- */
    .table-stacked-mobile thead {
        display: none;
    }

    .table-stacked-mobile tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--lp-border-color, #e5e5e5);
        border-radius: 0.5rem;
        padding: 0.5rem;
    }

    .table-stacked-mobile tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0 !important;
        border: none !important;
        text-align: right !important;
    }

    .table-stacked-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--lp-text-muted, #666);
        text-align: left;
        margin-right: 1rem;
    }

    /* ---- Boutique caisse : cartes produits compactes ---- */
    .b-table .b-table-cell-mobile {
        font-size: 0.85rem;
    }

    /* ---- Footer (bottom action bar) toujours visible sur mobile ---- */
    .mobile-action-bar {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid var(--lp-border-color, #e5e5e5);
        padding: 0.5rem;
        margin: 0 -0.75rem -0.75rem -0.75rem;
        z-index: 10;
    }

    /* ---- Modals : utilisent l'écran complet ---- */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* ---- Nav menu : header sticky pour permettre le scroll ---- */
    .sidebar-container .top-row {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    /* ---- CRITIQUE : sidebar-container ne doit PAS prendre 100vh sur mobile,
       sinon le contenu de la page est poussé hors écran ---- */
    .sidebar-container {
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar,
    .sidebar-collapsed {
        height: auto !important;
        position: relative !important;
    }

    /* ---- Sidebar footer entièrement caché sur mobile (peu importe l'état du menu).
       Contient seulement le widget « BaronsGear/Gérez votre équipement » et le bouton
       réduire-sidebar (mode mini-icons), qui sont tous deux non pertinents sur mobile. ---- */
    .sidebar-footer,
    .sidebar-footer * {
        display: none !important;
    }

    /* ---- Garde-fou explicite : si jamais le footer est rendu autrement, on cible aussi
       directement le widget et le bouton ---- */
    .premium-widget,
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* ---- Hamburger toggle plus visible sur mobile (contraste + taille) ---- */
    /* ---- Hamburger toggle : contraste fort pour qu'il soit clairement visible
       sur le gradient bleu foncé du sidebar header. L'opacité 25% précédente était
       quasi-invisible. On opte pour un fond jaune accent (matches BaronsGear logo)
       avec un burger icon foncé pour maximum de lisibilité. ---- */
    .navbar-toggler {
        background-color: #DAC94D !important;        /* jaune accent BaronsGear */
        border-color: #DAC94D !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231D3761' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
        z-index: 200 !important;
    }

    .navbar-toggler:hover,
    .navbar-toggler:checked {
        background-color: #c4b339 !important;        /* jaune un peu foncé au tap */
        border-color: #c4b339 !important;
    }
}

/* ================================================================
   Tablette portrait (768-991px) : ajustements légers
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .content-wrapper {
        padding: 1rem !important;
    }

    .card-body table {
        font-size: 0.9rem;
    }
}