/* D:\job\aura\aura-project\server\public\css\user-management.css */

/* Dashboard Header Refinements */
.dashboard-header {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Pushes search to one side, buttons to the other */
    align-items: center; /* Vertically aligns items in the middle */
    gap: 1rem; /* Consistent spacing between major elements */
    padding: 1.5rem; /* More generous padding */
    background-color: var(--surface-light); /* Add a background for better visual separation */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: var(--shadow-sm); /* Subtle shadow for depth */
}

html[data-theme="dark-gold"] .dashboard-header {
    background-color: var(--surface-dark);
}

.dashboard-header .input-group {
    flex-grow: 1; /* Allows search input to take available space */
    max-width: 400px; /* Limit search input width on larger screens */
    margin-bottom: 0; /* Remove bottom margin for better alignment in flex container */
}

.dashboard-header .d-flex.flex-wrap {
    /* This div contains the dropdowns and the "Add New User" button */
    gap: 0.75rem; /* Spacing between buttons/dropdowns */
    align-items: center; /* Align items within this group */
    margin-bottom: 0; /* Remove bottom margin for better alignment in flex container */
}

/* Ensure buttons and dropdowns within the group are styled consistently */
.dashboard-header .d-flex.flex-wrap .btn,
.dashboard-header .d-flex.flex-wrap .dropdown {
    margin-bottom: 0; /* Remove any residual margins */
}

/* Ensure consistent box-sizing for table elements */
.user-management-table,
.user-management-table * {
    box-sizing: border-box;
}

/* Explicitly set direction for RTL consistency */
.user-management-table {
    direction: rtl;
}

/* Adjust padding for th and td to ensure alignment */
.user-management-table thead th,
.user-management-table tbody td {
    padding-left: 15px; /* Consistent padding on both sides for RTL */
    padding-right: 15px;
}

/* Ensure dropdowns within table cells are positioned correctly */
.user-management-table tbody td .dropdown {
    position: relative;
    z-index: 10;
}



.user-management-table thead th,
.user-management-table tbody td {
    text-align: right; /* Ensure consistent text alignment for RTL */
    padding: 12px 15px; /* Consistent padding */
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Keep content on single line, use ellipsis for overflow */
}



.user-management-table thead th {
    background-color: var(--background-light); /* Use design system variable */
    color: var(--text-primary-light);
    font-weight: bold;
    border-bottom: 2px solid var(--border-light);
}

html[data-theme="dark-gold"] .user-management-table thead th {
    background-color: var(--background-dark);
    color: var(--text-primary-dark);
    border-bottom-color: var(--border-dark);
}

.user-management-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

html[data-theme="dark-gold"] .user-management-table tbody tr {
    border-bottom-color: var(--border-dark);
}

.user-management-table tbody tr:last-child {
    border-bottom: none;
}

/* Custom badge styles for roles and status */
.badge.bg-primary-subtle {
    background-color: rgba(111, 66, 193, 0.15) !important; /* Light purple */
    color: #6f42c1 !important; /* Dark purple */
}

.badge.bg-secondary-subtle {
    background-color: rgba(108, 117, 125, 0.15) !important; /* Light gray */
    color: #6c757d !important; /* Dark gray */
}

.badge.bg-success-subtle {
    background-color: rgba(46, 204, 113, 0.15) !important; /* Light green */
    color: #2ecc71 !important; /* Dark green */
}

.badge.bg-danger-subtle {
    background-color: rgba(231, 76, 60, 0.15) !important; /* Light red */
    color: #e74c3c !important; /* Dark red */
}

/*
 * Fix: Ensure dropdown menus within table cells are not clipped.
 * The 'overflow: hidden' on table cells (td) can clip absolutely positioned dropdowns.
 * By setting 'overflow: visible' on the specific table cell containing the dropdown,
 * we allow the dropdown menu to render outside the cell's boundaries.
 * We target the last td in tbody rows, as that's where the action dropdowns are located.
 */
.user-management-table tbody td:last-child {
    overflow: visible;
}

/* Ensure the dropdown menu itself has a high z-index to appear above other content */
.user-management-table tbody td .dropdown-menu {
    z-index: 1050; /* Bootstrap modals typically use 1050, ensuring dropdown is above most content */
}

.user-table-card {
    min-height: 400px; /* Adjust this value as needed */
}

/* Dropdown menu items with icons */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] .dropdown-menu .dropdown-item {
    color: var(--text-primary-dark);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--background-light);
    color: var(--accent-light);
}

html[data-theme="dark-gold"] .dropdown-menu .dropdown-item:hover {
    background-color: var(--surface-dark);
    color: var(--accent-dark);
}

.dropdown-menu .dropdown-item i {
    font-size: 1.1em;
}

/* Total Users Summary Card */
.card.text-center .card-title {
    font-size: var(--font-size-md);
    color: var(--text-secondary-light);
}

html[data-theme="dark-gold"] .card.text-center .card-title {
    color: var(--text-secondary-dark);
}

.card.text-center .card-text {
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] .card.text-center .card-text {
    color: var(--text-primary-dark);
}

.card.text-center .bi-people-fill {
    color: var(--accent-light);
}

html[data-theme="dark-gold"] .card.text-center .bi-people-fill {
    color: var(--accent-dark);
}

/* Modal form adjustments */
.modal-body .form-group label {
    font-weight: 600;
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] .modal-body .form-group label {
    color: var(--text-primary-dark);
}

.modal-body .form-control, .modal-body .form-select {
    border-color: var(--border-light);
    background-color: var(--surface-light);
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] .modal-body .form-control, html[data-theme="dark-gold"] .modal-body .form-select {
    border-color: var(--border-dark);
    background-color: var(--surface-dark);
    color: var(--text-primary-dark);
}

.modal-body .form-control::placeholder {
    color: var(--text-secondary-light);
    opacity: 0.7;
}

html[data-theme="dark-gold"] .modal-body .form-control::placeholder {
    color: var(--text-secondary-dark);
}

.modal-footer .btn-primary {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    color: #121212; /* Ensure dark text on gold button */
}

html[data-theme="dark-gold"] .modal-footer .btn-primary {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.modal-footer .btn-primary:hover {
    background-color: #e6c300; /* Slightly darker gold on hover */
    border-color: #e6c300;
}

html[data-theme="dark-gold"] .modal-footer .btn-primary:hover {
    background-color: #e6c300;
    border-color: #e6c300;
}

.modal-footer .btn-secondary {
    background-color: var(--surface-light);
    border-color: var(--border-light);
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] .modal-footer .btn-secondary {
    background-color: var(--surface-dark);
    border-color: var(--border-dark);
    color: var(--text-primary-dark);
}

.modal-footer .btn-secondary:hover {
    background-color: var(--background-light);
    border-color: var(--border-light);
}

html[data-theme="dark-gold"] .modal-footer .btn-secondary:hover {
    background-color: var(--background-dark);
    border-color: var(--border-dark);
}