/* ========================================
   Responsive Styles - 响应式样式
   Mobile First Approach
   ======================================== */

/* Small devices (phones, 640px and below) */
@media (max-width: 640px) {
    :root {
        --spacing-xl: 20px;
        --spacing-2xl: 32px;
    }
    
    .page-content {
        padding: var(--spacing-md);
        padding-bottom: 80px;
    }
    
    .top-header {
        padding: 0 var(--spacing-md);
    }
    
    .header-subtitle {
        display: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .stat-info h3 {
        font-size: var(--font-size-2xl);
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .express-card {
        margin: 0;
    }
    
    .card-top {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .info-label {
        min-width: auto;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .card-actions .btn {
        width: 100%;
    }
    
    .submit-form .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .track-item {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .track-item-time {
        min-width: auto;
    }
    
    .pagination {
        gap: var(--spacing-xs);
    }
    
    .pagination-btn {
        padding: 8px 12px;
        font-size: var(--font-size-xs);
    }
    
    .pagination-info {
        font-size: var(--font-size-xs);
        padding: 8px 12px;
    }
    
    .modal-overlay {
        padding: var(--spacing-md);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);
    }
    
    .toast-container {
        top: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
    }
    
    .toast {
        min-width: auto;
        max-width: 100%;
    }
    
    .copy-notification {
        top: auto;
        bottom: 80px;
        right: var(--spacing-md);
        left: var(--spacing-md);
        transform: translateY(120%);
    }
    
    .copy-notification.show {
        transform: translateY(0);
    }
    
    .login-container {
        border-radius: var(--radius-lg);
    }
    
    .login-header {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .login-logo {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
    
    .login-header h1 {
        font-size: var(--font-size-xl);
    }
    
    .login-form-container {
        padding: var(--spacing-lg);
    }
    
    .login-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .login-features {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* Medium devices (tablets, 641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    .page-content {
        padding: var(--spacing-lg);
        padding-bottom: 80px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .submit-form .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Large devices (desktops, 1025px and above) */
@media (min-width: 1025px) {
    .page-content {
        padding-bottom: 80px;
    }
    
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra large devices (large desktops, 1280px and above) */
@media (min-width: 1280px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}