/* --- 1. GENERAL STYLING --- */
    /* Card Container */
    .table-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 30px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        height: 100%;
    }

    /* --- 2. HEADER (SEARCH & FILTER) --- */
    .table-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .search-box {
        position: relative;
        flex: 1;
        min-width: 200px;
    }
    .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }
    .search-box input {
        width: 100%;
        padding: 10px 10px 10px 35px; /* Space for icon */
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        outline: none;
        transition: border-color 0.2s;
    }
    .search-box input:focus { border-color: #3b82f6; }

    .filter-box select {
        padding: 10px 15px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background-color: white;
        cursor: pointer;
        outline: none;
    }

    /* --- 3. TABLE STYLING --- */
    .table-container { overflow-x: auto; }
    
    .user-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .user-table th {
        background-color: #f9fafb;
        color: #374151;
        font-weight: 600;
        padding: 12px 20px;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e5e7eb;
    }

    .user-table td {
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        color: #4b5563;
        font-size: 0.95rem;
    }

    .user-table tbody tr:hover { background-color: #f9fafb; }

    /* Status Badges */
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        gap: 6px;
    }

    .status-badge.active { background-color: #d1fae5; color: #065f46; } /* Hijau */
    .status-badge.inactive { background-color: #fee2e2; color: #991b1b; } /* Merah */
    
    .status-badge i { font-size: 6px; }

    /* --- 4. PAGINATION --- */
    .pagination-wrapper {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }
    .pagination-info { font-size: 0.875rem; color: #6b7280; }
    .pagination { list-style: none; display: flex; gap: 5px; padding: 0; margin: 0; }
    .pagination li a {
        padding: 6px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        text-decoration: none;
        color: #374151;
        font-size: 0.875rem;
        transition: all 0.2s;
    }
    .pagination li a:hover, .pagination li a.active {
        background-color: #eff6ff;
        color: #2563eb;
        border-color: #2563eb;
    }