/* --- TABLES --- */
        .table-container {
            overflow-x: auto;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }
        
        /* Mobile: hide tables, show card view */
        @media (max-width: 767px) {
            .table-container {
                border: none;
                overflow: visible;
            }
            
            .data-table {
                display: none;
            }
            
            /* Card view for tables will be handled by JavaScript */
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        .data-table thead {
            background: var(--bg-page);
            border-bottom: none;
        }

        .data-table th {
            padding: 16px;
            text-align: left;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .data-table tbody tr {
            border-bottom: 1px solid rgba(0, 0, 0, 0.02);
            transition: all var(--transition-fast);
        }

        .data-table tbody tr:hover {
            background: var(--primary-light);
        }

        .data-table td {
            padding: 16px;
            color: var(--text-main);
            font-size: 0.9rem;
            vertical-align: middle;
        }

        /* --- STATUS BADGES --- */
        .status-badge {
            padding: 6px 12px;
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .status-new {
            background: var(--info-light);
            color: var(--info);
        }

        .status-processing {
            background: var(--warning-light);
            color: var(--warning);
        }

        .status-completed {
            background: var(--success-light);
            color: var(--success);
        }

        .status-cancelled {
            background: var(--danger-light);
            color: var(--danger);
        }

        .status-pending {
            background: #F3F4F6;
            color: #6B7280;
        }