/* Mobile Responsive Styles */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* General Layout */
    .container {
        padding: 0 10px;
    }
    
    .container-fluid {
        padding: 0 10px;
    }
    
    .row {
        margin: 0 -5px;
    }
    
    .col-md-6, .col-md-4, .col-md-3, .col-md-8, .col-md-9, .col-lg-6, .col-lg-4, .col-lg-3 {
        padding: 0 5px;
        margin-bottom: 15px;
    }
    
    /* Typography */
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    /* Cards */
    .card {
        margin-bottom: 15px;
        border-radius: 12px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    .card-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .card-header {
        padding: 15px;
    }
    
    /* Navigation */
    .navbar {
        padding: 10px 0;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .nav-link {
        padding: 8px 10px !important;
        margin: 0 2px;
        font-size: 0.9rem;
    }
    
    .navbar-nav {
        flex-direction: row;
        justify-content: center;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 15px;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    /* Prevent input-group toggle button from stacking below on mobile */
    .input-group .btn {
        width: auto;
        margin-bottom: 0;
        padding: 0.375rem 0.75rem;
        flex: 0 0 auto;
    }
    
    .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Forms */
    .form-control {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .input-group {
        margin-bottom: 15px;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 8px;
        font-size: 0.85rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 12px;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px;
    }
    
    /* Statistics Cards */
    .stat-card {
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .stat-card h4 {
        font-size: 1.2rem;
    }
    
    .stat-card i {
        font-size: 1.5rem !important;
    }
    
    /* Balance Cards */
    .balance-card h3 {
        font-size: 1.4rem;
    }
    
    /* Quick Actions */
    .quick-action-btn {
        padding: 15px;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .quick-action-btn i {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    /* Transaction Items */
    .transaction-item,
    .referral-item {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .transaction-item .row {
        align-items: center;
    }
    
    /* Pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-link {
        padding: 6px 10px;
        font-size: 0.85rem;
        margin: 2px;
    }
    
    /* Alerts */
    .alert {
        padding: 12px 15px;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    
    /* Badges */
    .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* Profile Avatar */
    .profile-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    /* Referral Code */
    .referral-code {
        font-size: 1.1rem;
        padding: 10px 15px;
        word-break: break-all;
    }
    
    /* Copy Button */
    .copy-btn {
        padding: 8px 15px;
        font-size: 0.85rem;
        margin-top: 10px;
    }
    
    /* Social Share Buttons */
    .social-share-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
        margin: 5px 2px;
    }
}

/* Extra Small Mobile Styles */
@media (max-width: 576px) {
    /* Container */
    .container {
        padding: 0 5px;
    }
    
    /* Typography */
    h1 {
        font-size: 1.6rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    /* Cards */
    .card-body {
        padding: 12px;
    }
    
    .card-header {
        padding: 12px;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .nav-link {
        padding: 6px 8px !important;
        font-size: 0.8rem;
    }
    
    /* Buttons */
    .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        width: 100%;
        margin-bottom: 8px;
    }
    .btn-group .btn {
        width: auto;
    }
    /* Ensure input-group toggle button sits beside the input */
    .input-group .btn {
        width: auto;
        margin-bottom: 0;
        padding: 0.375rem 0.75rem;
        flex: 0 0 auto;
    }
    
    /* Forms */
    .form-control {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .form-label {
        font-size: 0.85rem;
    }
    
    /* Statistics */
    .stat-card {
        padding: 12px;
        text-align: center;
    }
    
    .stat-card h4 {
        font-size: 1.1rem;
    }
    
    .stat-card i {
        font-size: 1.3rem !important;
    }
    
    /* Balance Display */
    .balance-card h3 {
        font-size: 1.2rem;
    }
    
    /* Transaction List */
    .transaction-item {
        padding: 10px;
    }
    
    .transaction-amount {
        font-size: 0.9rem;
    }
    
    /* Referral Items */
    .referral-item {
        padding: 10px;
    }
    
    .referral-item .col-auto {
        flex: 0 0 auto;
        width: auto;
    }
    
    /* Profile Avatar */
    .profile-avatar {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 5px;
        max-width: calc(100% - 10px);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 12px;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .table th,
    .table td {
        padding: 6px;
        font-size: 0.8rem;
    }
    
    /* Hide some elements on very small screens */
    .d-none-xs {
        display: none !important;
    }
    
    /* Compact spacing */
    .mb-xs-2 {
        margin-bottom: 0.5rem !important;
    }
    
    .p-xs-2 {
        padding: 0.5rem !important;
    }
}

/* Landscape Mobile Styles */
@media (max-width: 768px) and (orientation: landscape) {
    .container {
        padding: 0 15px;
    }
    
    .navbar {
        padding: 8px 0;
    }
    
    .card {
        margin-bottom: 10px;
    }
    
    .card-body {
        padding: 12px;
    }
    
    .stat-card {
        padding: 10px;
    }
    
    .stat-card h4 {
        font-size: 1rem;
    }
    
    .stat-card i {
        font-size: 1.2rem !important;
    }
    
    /* Mobile Navigation Active Link */
    .mobile-nav .nav-link.active {
        color: #000000 !important;
    }
}

/* Touch-friendly styles */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .form-control {
        min-height: 44px;
    }
    
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .card {
        background: rgba(31, 41, 55, 0.95);
        color: white;
    }
    
    .form-control {
        background: rgba(55, 65, 81, 0.8);
        border-color: rgba(75, 85, 99, 0.8);
        color: white;
    }
    
    .table {
        background: rgba(31, 41, 55, 0.95);
        color: white;
    }
}

@media (max-width: 768px) {
  .input-group .btn { width: auto; margin-bottom: 0; padding: 0.375rem 0.75rem; flex: 0 0 auto; }
  
  /* Ensure floating support button doesn't become full-width on mobile */
  .floating-support-btn { width: 52px !important; height: 52px !important; display: inline-flex !important; flex: 0 0 auto !important; }
}

@media (max-width: 576px) {
  .input-group .btn { width: auto; margin-bottom: 0; padding: 0.375rem 0.75rem; flex: 0 0 auto; }
  .floating-support-btn { right: 14px; bottom: 18px; }
}

/* Desktop Header Polish (moved from header.php inline) */
@media (min-width: 992px) {
  .app-header { background: linear-gradient(90deg, #4338ca 0%, #4f46e5 50%, #6d28d9 100%); box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
  .navbar { padding: 0.45rem 0; }
  .navbar-brand i { animation: none; }
  .desktop-primary-nav .nav-link { color: rgba(255,255,255,0.9) !important; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: 8px; transition: color .2s ease, background .2s ease; }
  .desktop-primary-nav .nav-link:hover, .desktop-primary-nav .nav-link.active { color: #fff !important; background: rgba(255,255,255,0.12); }
  .balance-display { background: rgba(255,255,255,0.12); box-shadow: none; }
  .navbar-nav .dropdown-toggle { background: rgba(255,255,255,0.12); }
  .dropdown-menu { backdrop-filter: none; box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
  /* Hide user dropdown box on desktop */
  .navbar .dropdown-menu,
  .navbar .dropdown-menu.show { display: none !important; visibility: hidden; opacity: 0; pointer-events: none; }

  /* Hide offcanvas body on desktop */
  .navbar-expand-lg .offcanvas .offcanvas-body { display: none; flex-grow: 0; padding: 0; overflow-y: visible; }
}