/* ==========================================
   MOBILE RESPONSIVE FRAMEWORK - 2026
   Professional Mobile-First Design
   ========================================== */

/* Base Setup */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { 
    overflow-x: hidden; 
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* Grid System */
.grid {
    display: grid;
    gap: 15px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive Images */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Touch-Friendly Elements */
button, 
input[type="submit"], 
input[type="button"],
.btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Form Elements - Prevent Zoom */
input, select, textarea {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    input, select, textarea {
        font-size: 14px !important;
    }
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}

.table-responsive table {
    min-width: 500px;
}

/* ==========================================
   MOBILE SPECIFIC (max-width: 767px)
   ========================================== */
@media (max-width: 767px) {
    /* Base Typography */
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
    
    .container {
        padding: 12px;
    }
    
    /* Cards */
    .card {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 12px !important;
    }
    
    .card h2, .card h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
    
    /* Dashboard Grid */
    .dashboard-grid,
    .row,
    .admin-grid,
    .stats-grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Stats Cards */
    .stat-card,
    .admin-stat {
        padding: 15px !important;
    }
    
    .stat-value,
    .stat-number {
        font-size: 1.3rem !important;
    }
    
    /* Balance Display */
    .balance-card {
        padding: 20px 15px !important;
        border-radius: 14px !important;
    }
    
    .balance-amount {
        font-size: 1.8rem !important;
    }
    
    .balance-big {
        font-size: 2rem !important;
    }
    
    /* Tables */
    .transaction-table,
    .users-table,
    .referral-table,
    .investment-table {
        font-size: 0.85rem !important;
        display: block;
        overflow-x: auto;
    }
    
    .transaction-table th,
    .transaction-table td,
    .users-table th,
    .users-table td {
        padding: 10px 8px !important;
        white-space: nowrap;
    }
    
    /* Navigation */
    .navbar {
        padding: 0 10px !important;
    }
    
    .nav-brand {
        font-size: 1.1rem !important;
        padding: 10px 0 !important;
    }
    
    .nav-links {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding-bottom: 5px !important;
    }
    
    .nav-links::-webkit-scrollbar {
        display: none !important;
    }
    
    .nav-links li a {
        padding: 10px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
    
    .btn-sm {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        width: auto !important;
        display: inline-block !important;
    }
    
    .btn-block {
        display: block !important;
        width: 100% !important;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 15px !important;
    }
    
    .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .product-card {
        padding: 10px !important;
    }
    
    .product-icon {
        font-size: 2rem !important;
    }
    
    /* Plans Grid */
    .plans-grid {
        grid-template-columns: 1fr !important;
    }
    
    .plan-card {
        padding: 15px !important;
    }
    
    /* Ads Grid */
    .ads-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Two Column Layouts */
    .withdraw-layout,
    .deposit-layout,
    .referral-header,
    .investment-header,
    .admin-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Filter Tabs */
    .filter-tabs {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .filter-tabs a {
        flex: 1 1 auto !important;
        min-width: calc(33.33% - 5px) !important;
        text-align: center !important;
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
    
    /* Action Buttons */
    .action-form,
    .bonus-form {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .action-form input,
    .bonus-form input,
    .action-form select {
        width: 100% !important;
    }
    
    /* Referral Stats */
    .referral-stats-card .stats-grid {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .levels-grid {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Notification */
    .notification-full-item {
        flex-direction: column !important;
    }
    
    /* Admin Grid */
    .plan-info-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Welcome Section */
    .welcome-section {
        padding: 20px 15px !important;
        border-radius: 14px !important;
    }
    
    .welcome-section h1 {
        font-size: 1.3rem !important;
    }
    
    /* Quick Actions */
    .quick-actions {
        grid-template-columns: 1fr !important;
    }
    
    /* Mini Cards */
    .mini-card {
        padding: 12px !important;
    }
    
    /* Auth Pages */
    .auth-box {
        padding: 20px !important;
    }
    
    /* Toast */
    .toast {
        left: 15px !important;
        right: 15px !important;
        bottom: 80px !important;
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .products-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .action-grid {
        grid-template-columns: 1fr !important;
    }
    
    .btn {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .top-actions a:not(.user-avatar) {
        display: none !important;
    }
}

/* ==========================================
   TABLET (768px - 1024px)
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 20px;
    }
    
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================
   LARGE DESKTOP (1280px+)
   ========================================== */
@media (min-width: 1280px) {
    .container {
        padding: 25px;
    }
}

/* ==========================================
   LANDSCAPE MODE
   ========================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slider { 
        height: 200px !important; 
    }
    
    .balance-card {
        padding: 15px !important;
    }
}

/* ==========================================
   ACCESSIBILITY - Reduced Motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   SAFE AREA INSETS (Notched Devices)
   ========================================== */
@supports (padding: env(safe-area-inset-top)) {
    .navbar,
    .top-bar {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    
    body {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }

@media (min-width: 768px) {
    .hide-mobile { display: block !important; }
    .show-mobile { display: none !important; }
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.w-full { width: 100% !important; }
.h-full { height: 100% !important; }

.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.p-10 { padding: 10px !important; }
.p-20 { padding: 20px !important; }

/* Flex Utilities */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.gap-2 { gap: 10px !important; }
.gap-3 { gap: 15px !important; }

/* Grid Utilities */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 767px) {
    .md\:hide { display: none !important; }
}

@media (max-width: 480px) {
    .sm\:hide { display: none !important; }
}