/* GSA 2025 — mobile.css
   Responsive design partagé pour toutes les pages.
   Ajouté via: <link rel="stylesheet" href="../mobile.css">
*/

/* ============================================================
   SIDEBAR — Collapse on mobile
   ============================================================ */
@media (max-width: 900px) {
    .sidebar-modern {
        position: fixed !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }
    .sidebar-modern.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    }
    .main-area {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* Overlay quand sidebar ouverte */
    .sidebar-modern.open ~ .main-area::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 999;
    }
}

/* ============================================================
   HEADER — Compact on mobile
   ============================================================ */
@media (max-width: 600px) {
    .top-bar {
        padding: 10px 14px !important;
        gap: 8px !important;
    }
    .page-title {
        font-size: 16px !important;
    }
    .user-menu .user-info .name {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-menu .user-info .role {
        display: none;
    }
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }
    .icon-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   WELCOME SECTION (home)
   ============================================================ */
@media (max-width: 600px) {
    .welcome-card {
        padding: 18px 14px !important;
    }
    .welcome-card .welcome-sub {
        font-size: 12px !important;
    }
    .welcome-card .welcome-title {
        font-size: 20px !important;
    }
}

/* ============================================================
   STATS CARDS — Stack on mobile
   ============================================================ */
@media (max-width: 900px) {
    .stats-grid,
    .mini-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}
@media (max-width: 500px) {
    .stats-grid,
    .mini-stats {
        grid-template-columns: 1fr 1fr !important;
    }
    .stat-card,
    .mini-stats > div {
        padding: 12px !important;
    }
    .stat-value, .val {
        font-size: 20px !important;
    }
    .stat-label, .lbl {
        font-size: 11px !important;
    }
}

/* ============================================================
   MODULES GRID (home)
   ============================================================ */
@media (max-width: 900px) {
    .modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 500px) {
    .modules-grid {
        grid-template-columns: 1fr !important;
    }
    .module-card {
        padding: 16px !important;
    }
}

/* ============================================================
   SEARCH BAR — Stack on mobile
   ============================================================ */
@media (max-width: 700px) {
    .search-bar,
    .filters-row,
    .toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .search-bar .input-wrapper,
    .search-bar input[type="search"],
    .search-bar input[type="text"],
    .filters-row > * {
        width: 100% !important;
        min-width: 0 !important;
    }
    .limit-select,
    .filter-select {
        width: 100% !important;
    }
    .filter-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filter-bar > select,
    .filter-bar > input {
        width: 100% !important;
    }
}

/* ============================================================
   STORE CHIPS (Stock page)
   ============================================================ */
@media (max-width: 600px) {
    .stores-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .store-chip {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* ============================================================
   TOTAL CARD (Stock qty total)
   ============================================================ */
@media (max-width: 600px) {
    .total-card {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .total-card .qty {
        font-size: 24px !important;
    }
}

/* ============================================================
   TABLES — Touch-friendly on mobile
   ============================================================ */
@media (max-width: 800px) {
    .tbl-head {
        display: none !important;
    }
    .tbl-row,
    .order-row,
    .client-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
        padding: 12px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    /* NE PAS toucher .article-row ni .articles-head — 
       la page Stock gère déjà sa propre grille responsive */
}

/* Stock: cart button bigger on mobile */
@media (max-width: 600px) {
    .add-cart-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   MODALS — Full screen on mobile
   ============================================================ */
@media (max-width: 700px) {
    .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 95vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }
    .modal-body {
        max-height: calc(95vh - 120px) !important;
        padding: 16px !important;
    }
    .modal-head {
        padding: 14px 16px !important;
    }
    .modal-foot {
        padding: 12px 16px !important;
    }
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .perm-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   CART MODAL (qty selector)
   ============================================================ */
@media (max-width: 600px) {
    .qty-modal {
        width: 90% !important;
        max-width: 340px !important;
    }
    .qty-controls {
        gap: 12px !important;
    }
    .qty-controls button {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    .qty-controls input {
        width: 60px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   CART PAGE
   ============================================================ */
@media (max-width: 800px) {
    .cart-layout {
        flex-direction: column !important;
    }
    .cart-sidebar,
    .cart-summary {
        width: 100% !important;
        position: static !important;
    }
    .cart-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .cart-item .item-info {
        width: 100% !important;
    }
}

/* ============================================================
   COMMANDES — Order rows become cards on mobile
   ============================================================ */
@media (max-width: 800px) {
    .order-row {
        position: relative !important;
        padding-right: 80px !important;
    }
    .order-row .actions-cell {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .accept-actions {
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* ============================================================
   SIDE PANEL (order detail)
   ============================================================ */
@media (max-width: 800px) {
    .side-panel {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ============================================================
   FILTER TABS (Tout, Acceptées, En attente, Refusées)
   ============================================================ */
@media (max-width: 600px) {
    .filter-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .filter-tab {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* ============================================================
   BUTTONS — Touch-friendly sizes
   ============================================================ */
@media (max-width: 600px) {
    .btn, button.btn, .btn-primary, .btn-danger {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    .action-btn, .act-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .acc-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   STORE (Boutique) — Catalog grid
   ============================================================ */
@media (max-width: 700px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sidebar-filters {
        display: none !important;
    }
    .sidebar-filters.show {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1000 !important;
        background: var(--bg-1) !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }
}
@media (max-width: 400px) {
    .catalog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   ADMIN SIDEBAR (Sections/Clients pages)
   ============================================================ */
@media (max-width: 800px) {
    .admin-sidebar,
    .sidebar-admin {
        position: fixed !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    .admin-sidebar.open,
    .sidebar-admin.open {
        transform: translateX(0) !important;
    }
    .admin-main,
    .main-content {
        margin-left: 0 !important;
    }
}

/* ============================================================
   GENERAL — Touch improvements & Typography
   ============================================================ */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }
    /* No hover effects on touch devices */
    @media (hover: none) {
        *:hover {
            transition: none !important;
        }
    }
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    /* Better spacing */
    .content-area,
    .page-content {
        padding: 12px !important;
    }
    h2, .section-title {
        font-size: 18px !important;
    }
    .section-desc {
        font-size: 12px !important;
    }
}

/* ============================================================
   SCROLLBAR — Thin on mobile
   ============================================================ */
@media (max-width: 600px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}