/* Member Panel Optimizations - Mobile First */

/* Reduce padding on mobile */
@media (max-width: 767px) {
    .registration-area {
        padding: 20px 0 !important;
    }
    
    .breadcrumb-area {
        padding: 30px 0 !important;
    }
    
    .breadcrumb-area h2 {
        font-size: 24px !important;
    }
    
    .card {
        margin-bottom: 15px !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    .card-header {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    /* Welcome card mobile optimization */
    .member-welcome-title {
        font-size: 18px !important;
        line-height: 1.3;
    }
    
    .member-welcome-id {
        font-size: 12px !important;
    }
    
    .member-welcome-avatar {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Optimize welcome banner for mobile */
@media (max-width: 767px) {
    .card-body.text-white.p-4 {
        padding: 20px !important;
    }
    
    .card-body.text-white h3 {
        font-size: 20px !important;
    }
    
    .card-body.text-white .col-md-4 {
        text-align: center !important;
        margin-top: 15px;
    }
}

/* Stack cards vertically on mobile */
@media (max-width: 767px) {
    .row > [class*="col-"] {
        margin-bottom: 15px;
    }
}

/* Optimize text sizes */
@media (max-width: 767px) {
    .card-body p {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .card-body strong {
        font-size: 12px;
    }
    
    .btn {
        font-size: 13px;
        padding: 8px 15px;
    }
}

/* Reduce image sizes on mobile */
@media (max-width: 767px) {
    .img-thumbnail {
        max-width: 120px !important;
        max-height: 120px !important;
    }
    
    .rounded-circle[style*="100px"] {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Optimize table displays */
@media (max-width: 767px) {
    .table {
        font-size: 12px;
    }
    
    .table th,
    .table td {
        padding: 8px 4px;
    }
}

/* Hide unnecessary elements on mobile */
@media (max-width: 767px) {
    .breadcrumb {
        font-size: 11px;
    }
    
    .breadcrumb li:not(.active) {
        display: none;
    }
}

/* Optimize spacing */
@media (max-width: 767px) {
    .mb-4 {
        margin-bottom: 15px !important;
    }
    
    .mt-4 {
        margin-top: 15px !important;
    }
    
    .mt-3 {
        margin-top: 10px !important;
    }
}

/* Better card layout on mobile */
@media (max-width: 767px) {
    .card.shadow-sm {
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
    
    /* Optimize member info items */
    .member-info-item {
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .member-info-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* Better button spacing */
    .d-grid.gap-2 .btn {
        margin-bottom: 8px;
    }
    
    .d-grid.gap-2 .btn:last-child {
        margin-bottom: 0;
    }
}

/* Optimize badge sizes */
@media (max-width: 767px) {
    .badge {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Footer spacing for bottom nav */
@media (max-width: 767px) {
    footer {
        margin-bottom: 60px;
    }
    
    /* Better card spacing */
    .row.g-3 > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Desktop optimizations */
@media (min-width: 768px) {
    .member-welcome-avatar {
        width: 100px !important;
        height: 100px !important;
    }
    
    .member-welcome-title {
        font-size: 28px;
    }
}