/* =========================================
   USERS SPECIFIC CSS (Tables, Filters)
   ========================================= */

/* --- Filter Card --- */
.filter-card {
    background-color: var(--card-bg); 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.03); 
    border: 1px solid var(--border-color); 
    margin-bottom: 20px; 
    flex-shrink: 0; 
}

.filter-row {
    display: flex; 
    gap: 15px; 
    align-items: flex-end; 
}

.form-group {
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

.form-group label {
    font-size: 12px; 
    font-weight: 500; 
    color: var(--text-muted); 
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.form-control {
    width: 100%; 
    height: 38px; 
    padding: 8px 12px; 
    border: 1px solid #D1D5DB; 
    border-radius: 6px; 
    font-size: 13px; 
    color: var(--text-main); 
    outline: none; 
    transition: border-color 0.3s, box-shadow 0.3s; 
}

.form-control:focus {
    border-color: var(--primary-teal); 
}

.search-active:focus {
    border-color: var(--primary-teal); 
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15); 
}

.input-icon {
    position: relative; 
}

.input-icon i {
    position: absolute; 
    left: 12px; 
    top: 12px; 
    color: #9CA3AF; 
    font-size: 13px; 
}

.input-icon .form-control {
    padding-left: 35px; 
}

/* --- Scrollable Table --- */
.table-card {
    background-color: var(--card-bg); 
    border-radius: 8px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.03); 
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
    min-height: 0; 
    overflow: hidden; 
}

.table-responsive {
    width: 100%; 
    flex: 0 1 auto; 
    overflow-y: auto; 
    overflow-x: auto; 
    min-height: 0; 
}

.table-responsive::-webkit-scrollbar {
    width: 8px; 
    height: 8px; 
}

.table-responsive::-webkit-scrollbar-track {
    background: #F8F9FA; 
    border-radius: 10px; 
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #CBD5E1; 
    border-radius: 10px; 
    transition: background 0.3s ease; 
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--deep-menu); 
}

.data-table {
    width: 100%; 
    border-collapse: collapse; 
    white-space: nowrap; 
}

/* Sticky Teal Header */
.teal-header th {
    background-color: var(--primary-teal); 
    color: white; 
    padding: 14px 16px; 
    font-size: 13px; 
    font-weight: 600; 
    text-align: center; 
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    position: sticky; 
    top: 0; 
    z-index: 15; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.data-table td {
    padding: 12px 16px; 
    font-size: 12px; 
    color: var(--text-main); 
    border-bottom: 1px solid var(--border-color); 
    vertical-align: middle; 
}

.data-table tbody tr:hover {
    background-color: #F8F9FA; 
}

.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-teal { color: var(--primary-teal); }

.user-id-link {
    color: #2196F3; 
    font-weight: 600; 
    text-decoration: none; 
    transition: all 0.2s; 
}

.user-id-link:hover {
    color: var(--primary-teal); 
    text-decoration: underline; 
}

/* --- Badges & Status --- */
.badge {
    padding: 4px 10px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: 600; 
}

.badge-retailer { background-color: rgba(0, 150, 136, 0.1); color: var(--primary-teal); }
.badge-distributor { background-color: rgba(156, 39, 176, 0.1); color: #9C27B0; }
.badge-md { background-color: rgba(33, 150, 243, 0.1); color: #2196F3; }
.badge-api { background-color: rgba(255, 152, 0, 0.1); color: #FF9800; }
.badge-sub-admin { background-color: rgba(244, 67, 54, 0.1); color: #F44336; }

.kyc-status {
    font-size: 11px; 
    font-weight: 600; 
    padding: 5px 10px; 
    border-radius: 4px; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
}

.kyc-active {
    background-color: #67C949; 
    color: #FFFFFF !important; 
} 

.kyc-active i { color: #FFFFFF; } 

.kyc-pending {
    background-color: #F44336; 
    color: #FFFFFF !important; 
} 

.kyc-pending i { color: #FFFFFF; } 

/* --- Toggles & Buttons --- */
.switch {
    position: relative; 
    display: inline-block; 
    width: 34px; 
    height: 18px; 
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    transition: .4s; 
}

.slider:before {
    position: absolute; 
    content: ""; 
    height: 14px; 
    width: 14px; 
    left: 2px; 
    bottom: 2px; 
    background-color: white; 
    transition: .4s; 
}

input:checked + .slider { background-color: var(--accent-green); }
input:checked + .slider:before { transform: translateX(16px); }

.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

.action-buttons {
    display: flex; 
    gap: 8px; 
    justify-content: center; 
}

.action-btn {
    width: 28px; 
    height: 28px; 
    border-radius: 4px; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    transition: all 0.2s; 
}

.action-btn.edit {
    background-color: rgba(33, 150, 243, 0.1); 
    color: #2196F3; 
}

.action-btn.edit:hover {
    background-color: #2196F3; 
    color: white; 
}

.action-btn.wallet {
    background-color: rgba(0, 150, 136, 0.1); 
    color: var(--primary-teal); 
}

.action-btn.wallet:hover {
    background-color: var(--primary-teal); 
    color: white; 
}

.action-btn.login {
    background-color: #FF9800; 
    color: white; 
}

.action-btn.login:hover {
    background-color: #E65100; 
    box-shadow: 0 2px 4px rgba(230, 81, 0, 0.4); 
}

/* --- Pagination Area --- */
.pagination-area {
    padding: 16px 20px; 
    border-top: 1px solid var(--border-color); 
    flex-shrink: 0; 
    background-color: var(--card-bg); 
}

.pagination {
    display: flex; 
    gap: 5px; 
}

.page-btn {
    width: 30px; 
    height: 30px; 
    border: 1px solid var(--border-color); 
    background-color: white; 
    color: var(--text-muted); 
    border-radius: 4px; 
    font-size: 13px; 
    font-weight: 500; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.2s; 
}

.page-btn:hover:not(.disabled) {
    border-color: var(--primary-teal); 
    color: var(--primary-teal); 
}

.page-btn.active {
    background-color: var(--primary-teal); 
    color: white; 
    border-color: var(--primary-teal); 
}

.page-btn.disabled {
    opacity: 0.5; 
    cursor: not-allowed; 
}

@media (max-width: 768px) {
    .pagination-area.flex-between { 
        flex-direction: column; 
        gap: 12px; 
        justify-content: center; 
        align-items: center; 
    }
}