/* ========================================
   MLC - Responsive Design Optimization
   Fixes and enhancements for all screens
   ======================================== */

/* ========================================
   1. GLOBAL OVERFLOW PREVENTION
   ======================================== */
html {
    overflow-x: hidden;
}

/* Prevent any element from causing horizontal scroll */
img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ========================================
   2. ADMIN TABLES - Responsive Enhancement
   Tables get horizontal scroll wrapper and
   better touch scrolling on mobile
   ======================================== */

/* Scroll hint indicator on mobile */
.admin-card-body {
    position: relative;
}

/* Fade hint on right side for scrollable tables */
@media (max-width: 900px) {
    .admin-card-body:has(.admin-table)::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
        pointer-events: none;
        z-index: 1;
        opacity: 1;
        transition: opacity 0.3s;
    }

    /* Better touch scrolling */
    .admin-card-body {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
}

/* ========================================
   3. STATS CARDS - Better Mobile Layout
   ======================================== */
@media (max-width: 768px) {
    .stats-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-card-value {
        font-size: 1.35rem !important;
    }

    .stat-card-label {
        font-size: 0.72rem !important;
    }

    .stat-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 400px) {
    .stats-cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .stat-card {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px 16px !important;
    }

    .stat-card-header {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .stat-card-value {
        font-size: 1.3rem !important;
    }
}

/* ========================================
   4. DASHBOARD - Responsive Grids
   ======================================== */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .split-grid-2,
    .split-grid-detail {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Dashboard quick actions */
@media (max-width: 768px) {
    .dashboard-quick-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .quick-action-card {
        padding: 14px 16px !important;
    }

    .qa-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 0.95rem !important;
    }

    .qa-content strong {
        font-size: 0.88rem !important;
    }

    .qa-content span {
        font-size: 0.75rem !important;
    }
}

/* Dashboard list items */
@media (max-width: 560px) {
    .dashboard-list-item {
        padding: 10px 8px !important;
        gap: 10px !important;
    }

    .dashboard-list-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.75rem !important;
    }

    .dashboard-list-name {
        font-size: 0.82rem !important;
    }

    .dashboard-list-sub {
        font-size: 0.75rem !important;
        max-width: none !important;
    }

    .dashboard-list-meta {
        display: none;
    }
}

/* ========================================
   5. ADMIN CARDS - Mobile Optimization
   ======================================== */
@media (max-width: 768px) {
    .admin-card-header {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-card-header h3 {
        font-size: 0.92rem !important;
        flex: 1;
        min-width: 0;
    }

    .admin-card-body.padded {
        padding: 14px 16px !important;
    }
}

/* ========================================
   6. FORMS - Responsive Grids
   ======================================== */
@media (max-width: 768px) {
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .admin-form-group label {
        font-size: 0.8rem !important;
    }

    .admin-input,
    .admin-textarea,
    .admin-select {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
    }

    /* Make Select2 dropdowns touch-friendly */
    .select2-container .select2-selection--single {
        height: 42px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        padding-left: 12px !important;
    }

    .select2-results__option {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
    }
}

/* ========================================
   7. BUTTONS - Touch-Friendly Sizing
   ======================================== */
@media (max-width: 768px) {
    .btn-admin {
        min-height: 42px !important;
        padding: 10px 16px !important;
        font-size: 0.84rem !important;
    }

    .btn-admin-sm {
        min-height: 36px !important;
        padding: 7px 12px !important;
    }

    /* Action buttons in table rows */
    .btn-group {
        gap: 4px !important;
        flex-wrap: wrap;
    }

    .btn-group .btn-admin-sm {
        padding: 6px 10px !important;
    }

    /* Full-width buttons on very small screens */
    .form-submit-area .btn-admin {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   8. FILTER BAR - Mobile Optimization
   ======================================== */
@media (max-width: 768px) {
    .filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100%;
    }

    .filter-btn {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        flex: 1;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    /* Horizontal scroll for many filters */
    .filter-bar-scroll {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .filter-bar-scroll::-webkit-scrollbar {
        display: none;
    }

    .filter-bar-scroll .filter-btn {
        flex: 0 0 auto;
    }
}

/* ========================================
   9. MODALS - Mobile Optimization
   ======================================== */
@media (max-width: 560px) {
    /* Generic modal overlay - full screen on mobile */
    [style*="position:fixed"][style*="inset:0"],
    [style*="position: fixed"][style*="inset: 0"] {
        padding: 10px !important;
    }

    /* Modal content cards */
    [style*="max-width:520px"],
    [style*="max-width: 520px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"] {
        max-width: 100% !important;
        margin: 10px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    /* Forms inside modals */
    [style*="max-width:520px"] .form-grid-2,
    [style*="max-width: 520px"] .form-grid-2,
    [style*="max-width:600px"] .form-grid-2,
    [style*="max-width: 600px"] .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   10. DETAIL PAGES - Info Tiles & Blocks
   ======================================== */
@media (max-width: 768px) {
    .info-tiles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .info-tile {
        padding: 14px !important;
    }

    .info-tile-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
    }

    .info-tile-label {
        font-size: 0.7rem !important;
    }

    .info-tile-value {
        font-size: 1rem !important;
    }

    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .detail-block {
        margin-bottom: 16px !important;
    }

    .detail-block-header {
        padding: 12px 14px !important;
    }

    .detail-block-content {
        padding: 14px !important;
    }
}

@media (max-width: 480px) {
    .info-tiles {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   11. SHOW/DETAIL PAGE - Header Cards
   ======================================== */
@media (max-width: 560px) {
    /* Member profile header with avatar + info */
    [style*="display:flex"][style*="gap:20px"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 12px !important;
    }

    /* Toolbar buttons on detail pages */
    .detail-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .detail-toolbar .btn-admin {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   12. PAGE TOOLBAR - Mobile Layout
   ======================================== */
@media (max-width: 560px) {
    .page-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .page-toolbar-count {
        text-align: center !important;
        font-size: 0.82rem !important;
    }

    .toolbar-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .toolbar-actions .btn-admin {
        width: 100% !important;
        justify-content: center !important;
    }

    .toolbar-search-form {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Export buttons full width */
    .export-group {
        width: 100% !important;
    }

    .export-group a,
    .export-group button {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ========================================
   13. PROGRESS BARS - Responsive
   ======================================== */
@media (max-width: 768px) {
    [style*="min-width:160px"],
    [style*="min-width: 160px"],
    [style*="min-width:100px"],
    [style*="min-width: 100px"] {
        min-width: 80px !important;
    }

    .payment-progress-card {
        padding: 12px !important;
    }

    .payment-progress-value {
        font-size: 1rem !important;
    }
}

/* ========================================
   14. MEMBRE WELCOME - Mobile
   ======================================== */
@media (max-width: 560px) {
    .membre-welcome {
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .membre-welcome-avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }

    .membre-welcome h3 {
        font-size: 0.92rem !important;
    }

    .membre-welcome p {
        font-size: 0.78rem !important;
    }
}

/* ========================================
   15. QUICK ACTIONS (Admin Dashboard)
   ======================================== */
@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .quick-action-btn {
        padding: 14px 16px !important;
    }

    .quick-action-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ========================================
   16. NOTIFICATION ITEMS - Mobile
   ======================================== */
@media (max-width: 560px) {
    .notif-item {
        padding: 12px 14px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .notif-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }

    .notif-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .notif-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* ========================================
   17. BIRTHDAYS LIST - Dashboard
   ======================================== */
@media (max-width: 560px) {
    .birthdays-list {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .birthday-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .birthday-day {
        min-width: 44px !important;
    }

    .birthday-info strong {
        font-size: 0.85rem !important;
    }

    .birthday-info span {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   18. PAGINATION - Touch Friendly
   ======================================== */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .pagination a,
    .pagination span {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.82rem !important;
    }
}

/* ========================================
   19. ADMIN LOGIN PAGE - Mobile
   ======================================== */
@media (max-width: 480px) {
    .login-container {
        padding: 16px !important;
    }

    .login-card {
        padding: 24px 18px !important;
    }

    .login-logo img {
        height: 45px !important;
    }

    .login-logo h1 {
        font-size: 1rem !important;
    }

    .login-btn {
        padding: 13px !important;
        font-size: 0.92rem !important;
        min-height: 48px;
    }
}

/* ========================================
   20. MOBILE CARDS - Enhanced Styling
   ======================================== */
@media (max-width: 768px) {
    .m-card {
        padding: 14px 16px !important;
    }

    .m-card-title {
        font-size: 0.85rem !important;
    }

    .m-card-amount {
        font-size: 1.15rem !important;
    }

    .m-card-meta {
        font-size: 0.75rem !important;
        gap: 10px !important;
    }

    .m-card-actions {
        gap: 6px !important;
    }

    .m-card-actions .btn-admin-sm {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}

/* ========================================
   21. BADGES & STATUS - Mobile
   ======================================== */
@media (max-width: 560px) {
    .admin-badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }
}

/* ========================================
   22. BILAN CARDS - Member Financial Grid
   ======================================== */
@media (max-width: 768px) {
    .bilan-cards,
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .bilan-cards,
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   23. INLINE STYLE OVERRIDES FOR MOBILE
   Common inline styles that cause overflow
   ======================================== */
@media (max-width: 768px) {
    /* Fix inline flex gaps that are too large */
    [style*="gap:20px"] {
        gap: 12px !important;
    }

    /* Fix inline padding that's too large */
    [style*="padding:30px"] {
        padding: 18px !important;
    }

    /* Fix fixed-width elements */
    [style*="min-width:240px"],
    [style*="min-width: 240px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Fix max-width constraints on mobile */
    [style*="max-width:280px"],
    [style*="max-width: 280px"] {
        max-width: 100% !important;
    }
}

/* ========================================
   24. SIDEBAR - Mobile Drawer Enhancement
   ======================================== */
@media (max-width: 900px) {
    /* Smooth overscroll inside sidebar */
    .admin-sidebar {
        overscroll-behavior-y: contain;
    }

    /* Better sidebar footer on mobile */
    .sidebar-footer {
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .sidebar-user-info h5 {
        font-size: 0.82rem !important;
    }

    .sidebar-user-info span {
        font-size: 0.7rem !important;
    }
}

/* ========================================
   25. BOTTOM NAV - Enhanced Touch Targets
   ======================================== */
@media (max-width: 900px) {
    .app-bottom-nav a {
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Subtle scale animation on tap */
    .app-bottom-nav a:active {
        transform: scale(0.92);
        transition: transform 0.1s ease;
    }
}

/* ========================================
   26. VITRINE - Additional Mobile Fixes
   ======================================== */

/* Language switcher on mobile */
@media (max-width: 768px) {
    .nav-lang-switcher {
        display: flex !important;
        gap: 6px;
        padding: 12px 18px !important;
        border-top: 1px solid #f0f0f0;
    }

    .lang-btn {
        flex: 1;
        text-align: center;
        padding: 10px !important;
        border-radius: 10px !important;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* CTA section buttons on mobile */
@media (max-width: 480px) {
    .cta-section [style*="display: flex"][style*="gap: 14px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .cta-section .btn {
        width: 100% !important;
        justify-content: center;
        text-align: center;
    }
}

/* Hero buttons stack on very small phones */
@media (max-width: 380px) {
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100% !important;
        justify-content: center;
        text-align: center;
    }
}

/* Cookie banner touch targets */
@media (max-width: 640px) {
    .cookie-accept,
    .cookie-decline {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }
}

/* ========================================
   27. PWA INSTALL BANNER - Mobile Fix
   ======================================== */
@media (max-width: 400px) {
    #pwaInstall {
        left: 14px !important;
        right: 14px !important;
        max-width: none !important;
        bottom: 80px !important;
    }
}

/* ========================================
   28. PRINT STYLES (hide mobile elements)
   ======================================== */
@media print {
    .app-bottom-nav,
    .app-mobile-topbar,
    .sidebar-backdrop,
    .whatsapp-float,
    .back-to-top,
    .cookie-banner,
    #pwaInstall {
        display: none !important;
    }
}

/* ========================================
   29. ADMIN TABLE - Compact Mobile Mode
   Smaller font and tighter spacing on phones
   ======================================== */
@media (max-width: 560px) {
    .admin-table {
        min-width: 400px !important;
        font-size: 0.76rem !important;
    }

    .admin-table th {
        padding: 8px 6px !important;
        font-size: 0.66rem !important;
    }

    .admin-table td {
        padding: 8px 6px !important;
        font-size: 0.76rem !important;
    }

    /* Smaller avatars in table cells */
    .admin-table [style*="width:34px"],
    .admin-table [style*="width: 34px"],
    .admin-table [style*="width:36px"],
    .admin-table [style*="width: 36px"] {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }

    /* Hide less important columns on mobile */
    .admin-table .hide-mobile {
        display: none !important;
    }
}

/* ========================================
   30. SELECT2 DROPDOWN - Mobile Friendly
   ======================================== */
@media (max-width: 768px) {
    .select2-container--default .select2-selection--single {
        border-radius: 10px !important;
        min-height: 42px !important;
    }

    .select2-dropdown {
        border-radius: 0 0 10px 10px !important;
    }

    .select2-results__option {
        padding: 10px 14px !important;
    }

    .select2-search--dropdown .select2-search__field {
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   31. TOPBAR - Mobile Enhancement
   ======================================== */
@media (max-width: 900px) {
    .app-mobile-topbar {
        padding: 12px 14px 10px !important;
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
    }

    .app-mobile-topbar-title h1 {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
    }

    .app-mobile-topbar-title p {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 380px) {
    .app-mobile-topbar-logo {
        width: 36px !important;
        height: 36px !important;
    }

    .app-mobile-topbar-logo img {
        width: 20px !important;
        height: 20px !important;
    }

    .app-topbar-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.88rem !important;
    }
}

/* ========================================
   32. CONTENT SPACING - Mobile
   ======================================== */
@media (max-width: 900px) {
    .admin-content {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 560px) {
    .admin-content {
        padding: 12px 10px calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* Reduce card margins on mobile */
    .admin-card + .admin-card,
    .admin-card + .stats-cards,
    .stats-cards + .admin-card {
        margin-top: 12px;
    }

    /* Reduce section spacing */
    [style*="margin-bottom:24px"],
    [style*="margin-bottom: 24px"] {
        margin-bottom: 14px !important;
    }

    [style*="margin-bottom:32px"],
    [style*="margin-bottom: 32px"] {
        margin-bottom: 18px !important;
    }
}

/* ========================================
   33. TYPOGRAPHY - Mobile Adjustments
   ======================================== */
@media (max-width: 560px) {
    .app-page-heading h2 {
        font-size: 1.3rem !important;
    }

    .app-page-heading p {
        font-size: 0.82rem !important;
    }
}

/* ========================================
   34. HORIZONTAL SCROLL PREVENTION
   Force-break long words/URLs in content
   ======================================== */
.admin-content,
.admin-card-body {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Specifically target email and URL text */
.admin-content a,
.admin-content td,
.admin-content p,
.detail-block-content {
    word-break: break-word;
}

/* ========================================
   35. EVENEMENTS / PROJETS CARDS - Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Timeline or event cards stack nicely */
    .event-card,
    .projet-card {
        padding: 14px 16px !important;
    }

    /* Stats grids in event pages */
    .event-stats,
    .projet-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 400px) {
    .event-stats,
    .projet-stats {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   36. VITRINE FOOTER - Mobile Enhancement
   ======================================== */
@media (max-width: 480px) {
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .footer-bottom-links {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* ========================================
   37. VITRINE - Contact & Adhesion Pages
   ======================================== */
@media (max-width: 480px) {
    .contact-info-card {
        padding: 20px 16px !important;
    }

    .contact-info-item {
        gap: 12px !important;
    }

    .contact-info-icon {
        width: 44px !important;
        height: 44px !important;
    }

    /* Adhesion form */
    .adhesion-form-wrapper {
        padding: 20px 16px !important;
    }
}

/* ========================================
   38. SMOOTH TRANSITIONS FOR RESPONSIVE
   ======================================== */
.admin-sidebar,
.admin-main,
.admin-content,
.app-bottom-nav,
.app-mobile-topbar {
    transition: padding 0.2s ease, margin 0.2s ease;
}

/* ========================================
   39. LANDSCAPE MOBILE - Fix Bottom Nav
   ======================================== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .app-bottom-nav {
        padding: 4px 6px !important;
    }

    .app-bottom-nav a {
        padding: 4px 4px 3px !important;
        font-size: 0.6rem !important;
    }

    .app-bottom-nav a i {
        font-size: 0.95rem !important;
    }

    .admin-content {
        padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
}

/* ========================================
   40. ACCESSIBILITY - Touch Targets
   Ensure all interactive elements are
   at least 44x44px on touch devices
   ======================================== */
@media (max-width: 900px) {
    /* Sidebar nav links */
    .sidebar-nav a {
        min-height: 44px !important;
        padding: 11px 16px !important;
    }

    /* Form checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Ensure link areas are tappable */
    .admin-table td a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* ========================================
   41. MEMBER PROFILE HEADER - Mobile
   ======================================== */
@media (max-width: 560px) {
    /* Profile hero header */
    [style*="background:linear-gradient(135deg,#0f1729"][style*="padding:35px 30px"],
    [style*="background:linear-gradient(135deg,#0f1729"][style*="padding:30px"] {
        padding: 20px 16px !important;
    }

    /* Avatar sizing */
    [style*="width:80px"][style*="height:80px"][style*="border-radius:20px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.2rem !important;
    }

    /* Profile info bar */
    [style*="padding:16px 30px"][style*="display:flex"][style*="gap:35px"] {
        padding: 12px 16px !important;
        gap: 16px !important;
    }

    /* Photo upload section */
    [style*="width:100px"][style*="height:100px"][style*="border-radius:20px"] {
        width: 70px !important;
        height: 70px !important;
    }

    /* File input */
    [style*="display:flex"][style*="gap:10px"][style*="align-items:center"] input[type="file"] {
        min-width: 0;
        font-size: 0.82rem;
    }
}

/* ========================================
   42. DETAIL TOOLBAR - Mobile Stacking
   ======================================== */
@media (max-width: 560px) {
    .detail-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .detail-toolbar > a,
    .detail-toolbar > div {
        width: 100%;
    }

    .detail-toolbar > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .detail-toolbar > div > a,
    .detail-toolbar > div > button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }

    .detail-toolbar > a.btn-admin {
        text-align: center;
        justify-content: center;
    }
}

/* ========================================
   43. REQUEST DETAIL CARD - Mobile
   ======================================== */
@media (max-width: 768px) {
    .request-detail-hero {
        padding: 20px 16px !important;
    }

    .request-detail-hero-top {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .request-detail-hero-title h2 {
        font-size: 1.15rem !important;
        word-break: break-word;
    }

    .request-detail-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .request-detail-body {
        padding: 16px !important;
    }

    .request-status-chip {
        align-self: flex-start;
    }
}

/* ========================================
   44. FORM SECTION TITLES - Mobile
   ======================================== */
@media (max-width: 560px) {
    .form-section-title {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .form-section-title i {
        font-size: 0.95rem !important;
    }

    .form-section-title h4 {
        font-size: 0.92rem !important;
    }

    .form-section-title p {
        font-size: 0.78rem !important;
    }
}

/* ========================================
   45. FORM INFO BOXES - Mobile
   ======================================== */
@media (max-width: 560px) {
    .form-info {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
        gap: 10px !important;
    }

    .form-info i {
        font-size: 0.9rem !important;
        flex-shrink: 0;
    }
}

/* ========================================
   46. ADMIN ALERT - Mobile
   ======================================== */
@media (max-width: 560px) {
    .admin-alert {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
        gap: 10px !important;
        flex-wrap: wrap;
    }
}

/* ========================================
   47. MAX-WIDTH CONTAINERS ON MOBILE
   Override fixed max-width for full use
   ======================================== */
@media (max-width: 768px) {
    [style*="max-width:780px"],
    [style*="max-width: 780px"],
    [style*="max-width:800px"],
    [style*="max-width: 800px"],
    [style*="max-width:1000px"],
    [style*="max-width: 1000px"],
    [style*="max-width:750px"],
    [style*="max-width: 750px"] {
        max-width: 100% !important;
    }
}

/* ========================================
   48. VITRINE MOBILE BOTTOM NAV
   Native app-style bottom navigation
   ======================================== */
.vitrine-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .vitrine-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #ffffff;
        border-top: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: stretch;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background: rgba(255,255,255,0.95);
    }

    .vitrine-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px 4px;
        color: #8a8d9b;
        text-decoration: none;
        font-size: 0.62rem;
        font-weight: 600;
        position: relative;
        border-radius: 10px;
        transition: color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
        min-height: 48px;
    }

    .vitrine-bottom-nav a i {
        font-size: 1.15rem;
        line-height: 1;
        transition: transform 0.2s;
    }

    .vitrine-bottom-nav a span {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }

    .vitrine-bottom-nav a:active {
        background: rgba(197,160,40,0.06);
        transform: scale(0.94);
        transition: transform 0.1s;
    }

    .vitrine-bottom-nav a.active {
        color: #C5A028;
    }

    .vitrine-bottom-nav a.active i {
        transform: scale(1.1);
    }

    .vitrine-bottom-nav a.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(135deg, #D4B94E, #C5A028);
    }

    /* CTA button (center - Adhesion) */
    .vitrine-nav-cta {
        position: relative;
    }

    .vitrine-nav-cta-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #D4B94E, #C5A028);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        margin-top: -18px;
        box-shadow: 0 4px 15px rgba(197,160,40,0.35);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .vitrine-nav-cta.active .vitrine-nav-cta-icon {
        transform: scale(1.08);
        box-shadow: 0 6px 20px rgba(197,160,40,0.45);
    }

    .vitrine-nav-cta:active .vitrine-nav-cta-icon {
        transform: scale(0.95);
    }

    .vitrine-nav-cta span {
        color: #C5A028;
        font-weight: 700;
    }

    .vitrine-nav-cta::before {
        display: none !important;
    }

    .vitrine-nav-cta i {
        color: #fff !important;
    }

    /* Adjust page content to not be hidden behind bottom nav */
    main {
        padding-bottom: 70px;
    }

    .footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* Move floating buttons above the nav */
    .whatsapp-float {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .back-to-top {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    #pwaInstall {
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }

    .cookie-banner {
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }

    /* Hide desktop nav items on mobile - show bottom nav instead */
    .nav-cta-desktop {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .vitrine-bottom-nav a {
        font-size: 0.58rem;
    }

    .vitrine-bottom-nav a i {
        font-size: 1.05rem;
    }

    .vitrine-nav-cta-icon {
        width: 40px;
        height: 40px;
        margin-top: -16px;
        font-size: 1rem;
    }
}

/* Landscape mobile */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .vitrine-bottom-nav {
        padding: 3px 4px;
    }

    .vitrine-bottom-nav a {
        min-height: 40px;
        padding: 4px 2px 2px;
        font-size: 0.55rem;
    }

    .vitrine-nav-cta-icon {
        width: 36px;
        height: 36px;
        margin-top: -12px;
    }
}

/* Print: hide bottom nav */
@media print {
    .vitrine-bottom-nav {
        display: none !important;
    }
}