/**
 * Dashboard Theme CSS
 * Consolidated styles for consistent dashboard page appearance
 */

/* Common dashboard spacing */
.dashboard-content {
    padding: 1.5rem 0; /* Equivalent to Bootstrap's py-4 class */
}

/* Additional page header spacing */
.page-header-breadcrumb {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Container width fix */
.dashboard-content .row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

/* Card styling */
.dashboard-content .card {
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dashboard-content .card-header {
    background-color: transparent;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Theme-specific contrast fixes */
.light-mode .card-header,
[data-theme-mode="light"] .card-header {
    background-color: #f8f9fa;
}

.dark-mode .card-header,
[data-theme-mode="dark"] .card-header {
    background-color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.light-mode .card-body,
[data-theme-mode="light"] .card-body {
    background-color: #ffffff;
}

.dark-mode .card-body,
[data-theme-mode="dark"] .card-body {
    background-color: var(--dark-color);
}

/* Table theme styling */
.light-mode .table,
[data-theme-mode="light"] .table {
    color: #333333;
}

.dark-mode .table,
[data-theme-mode="dark"] .table {
    color: #ffffff;
}

.dark-mode .table thead th,
[data-theme-mode="dark"] .table thead th {
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.dark-mode .table td,
.dark-mode .table th,
[data-theme-mode="dark"] .table td,
[data-theme-mode="dark"] .table th {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .table-hover tbody tr:hover,
[data-theme-mode="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* Badge styling for dark mode */
.dark-mode .badge,
[data-theme-mode="dark"] .badge {
    background-color: rgba(var(--primary-rgb), 0.8);
    color: #ffffff;
}

.dark-mode .badge.bg-primary,
[data-theme-mode="dark"] .badge.bg-primary {
    background-color: rgba(var(--primary-rgb), 0.9) !important;
}

.dark-mode .badge.bg-secondary,
[data-theme-mode="dark"] .badge.bg-secondary {
    background-color: rgba(var(--secondary-rgb), 0.9) !important;
}

.dark-mode .badge.bg-success,
[data-theme-mode="dark"] .badge.bg-success {
    background-color: rgba(var(--success-rgb), 0.9) !important;
}

.dark-mode .badge.bg-info,
[data-theme-mode="dark"] .badge.bg-info {
    background-color: rgba(var(--info-rgb), 0.9) !important;
}

/* Modal styling for dark mode */
.dark-mode .modal-content,
[data-theme-mode="dark"] .modal-content {
    background-color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-header,
[data-theme-mode="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-footer,
[data-theme-mode="dark"] .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-content .modal-title,
.dark-mode .modal-content label,
.dark-mode .modal-content p,
[data-theme-mode="dark"] .modal-content .modal-title,
[data-theme-mode="dark"] .modal-content label,
[data-theme-mode="dark"] .modal-content p {
    color: #ffffff;
}

/* Form styling for dark mode */
.dark-mode .form-control,
[data-theme-mode="dark"] .form-control,
.dark-mode .form-select,
[data-theme-mode="dark"] .form-select {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.dark-mode .form-control:focus,
[data-theme-mode="dark"] .form-control:focus,
.dark-mode .form-select:focus,
[data-theme-mode="dark"] .form-select:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: #ffffff;
}

.dark-mode .form-control::placeholder,
[data-theme-mode="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Button styling for dark mode */
.dark-mode .btn-secondary,
[data-theme-mode="dark"] .btn-secondary {
    background-color: rgba(var(--secondary-rgb), 0.8);
    border-color: rgba(var(--secondary-rgb), 0.7);
}

.dark-mode .btn-secondary:hover,
[data-theme-mode="dark"] .btn-secondary:hover {
    background-color: rgba(var(--secondary-rgb), 0.9);
    border-color: rgba(var(--secondary-rgb), 0.8);
}

.dark-mode .btn-danger,
[data-theme-mode="dark"] .btn-danger {
    background-color: rgba(var(--danger-rgb), 0.8);
    border-color: rgba(var(--danger-rgb), 0.7);
}

.dark-mode .btn-danger:hover,
[data-theme-mode="dark"] .btn-danger:hover {
    background-color: rgba(var(--danger-rgb), 0.9);
    border-color: rgba(var(--danger-rgb), 0.8);
}

/* Select2 dropdown theme match */
.dark-mode .select2-container--bootstrap-5 .select2-dropdown,
[data-theme-mode="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .select2-container--bootstrap-5 .select2-dropdown .select2-results__option,
[data-theme-mode="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
    color: #ffffff;
}

.dark-mode .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted,
[data-theme-mode="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
    background-color: rgba(var(--primary-rgb), 0.5);
    color: #ffffff;
}

/* User menu text contrast fix */
.light-mode .user-name,
[data-theme-mode="light"] .user-name {
    color: #333333 !important;
}

.dark-mode .user-name,
[data-theme-mode="dark"] .user-name {
    color: #ffffff !important;
}

.light-mode .text-muted,
[data-theme-mode="light"] .text-muted {
    color: #666666 !important;
}

.dark-mode .text-muted,
[data-theme-mode="dark"] .text-muted {
    color: #cccccc !important;
}

/* Avatar image styling */
.avatar-xs {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-md {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-lg {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

/* Responsive table fixes */
.table-responsive {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .dashboard-content .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .dashboard-content .card-header .btn {
        align-self: flex-start;
    }
}