/* ============================================
   Shared Responsive CSS for Small Screen Devices
   Applies to: User, Admin, Seller/Agent panels
   ============================================ */

/* Small width screens */
@media (max-width: 400px) {
    body {
        font-size: 13px;
    }
    
    h1, .page-title {
        font-size: 18px !important;
    }
    
    h2 {
        font-size: 16px !important;
    }
    
    h3 {
        font-size: 14px !important;
    }
    
    table {
        font-size: 12px;
    }
    
    table th, table td {
        padding: 5px 4px !important;
        font-size: 11px !important;
    }
    
    .card, .stat-card, .panel, .box {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
    
    input, select, textarea, button {
        font-size: 13px !important;
    }
    
    .btn, button[type="submit"] {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 360px) {
    body {
        font-size: 12px;
    }
    
    table th, table td {
        padding: 4px 3px !important;
        font-size: 10px !important;
    }
    
    input, select, textarea {
        padding: 5px !important;
        font-size: 12px !important;
    }
}

/* Small height screens */
@media (max-height: 700px) {
    .header, .top-bar, .app-bar, nav {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    
    .card, .stat-card, .panel {
        padding: 8px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-height: 600px) {
    .header, .top-bar, .app-bar, nav {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    h1, .page-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    h2 {
        font-size: 14px !important;
    }
    
    .card, .stat-card, .panel {
        padding: 6px !important;
        margin-bottom: 4px !important;
    }
    
    table th, table td {
        padding: 4px 3px !important;
        font-size: 11px !important;
    }
}

/* Ensure tables don't overflow */
.table-responsive, .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

/* Prevent horizontal overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Better touch targets on small screens */
@media (max-width: 400px) {
    a, button, .clickable, [onclick] {
        min-height: 32px;
    }
}