/* Base theme styles */
:root {
    --primary-color: rgb(5, 39, 103);
    --secondary-color: #3a0647;
    --sidebar-start-color: var(--primary-color);
    --sidebar-end-color: var(--secondary-color);
    --navbar-text-color: white;
    --btn-primary-bg: var(--primary-color);
    --btn-primary-border: var(--primary-color);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-border: var(--secondary-color);
}

/* Theme-specific styles */
.default, body[data-theme="default"] {
    --primary-color: rgb(5, 39, 103) !important;
    --secondary-color: #3a0647 !important;
    --sidebar-start-color: var(--primary-color) !important;
    --sidebar-end-color: var(--secondary-color) !important;
    --navbar-text-color: white !important;
}

.teal-purple, body[data-theme="teal-purple"] {
    --primary-color: #00897B !important;
    --secondary-color: #5E35B1 !important;
    --sidebar-start-color: var(--primary-color) !important;
    --sidebar-end-color: var(--secondary-color) !important;
    --navbar-text-color: white !important;
}

.forest-plum, body[data-theme="forest-plum"] {
    --primary-color: #2E7D32 !important;
    --secondary-color: #8E24AA !important;
    --sidebar-start-color: var(--primary-color) !important;
    --sidebar-end-color: var(--secondary-color) !important;
    --navbar-text-color: white !important;
}

.navy-coral, body[data-theme="navy-coral"] {
    --primary-color: #1A237E !important;
    --secondary-color: #FF7043 !important;
    --sidebar-start-color: var(--primary-color) !important;
    --sidebar-end-color: var(--secondary-color) !important;
    --navbar-text-color: white !important;
}

.emerald-indigo, body[data-theme="emerald-indigo"] {
    --primary-color: #2E7D62 !important;
    --secondary-color: #4B0082 !important;
    --sidebar-start-color: var(--primary-color) !important;
    --sidebar-end-color: var(--secondary-color) !important;
    --navbar-text-color: white !important;
}

/* Apply theme colors to elements */
.sidebar {
    background-image: linear-gradient(180deg, var(--sidebar-start-color) 0%, var(--sidebar-end-color) 70%) !important;
}

.sidebar .top-row {
    background-color: var(--sidebar-start-color) !important;
}

.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-border) !important;
}

/* Add smooth transitions for theme changes */
body, .sidebar, .top-row, .page, .content, .quick-grid,
.quick-grid th, .quick-grid td, .paginator, button, a {
    transition: background-color 0.3s ease,
                background-image 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease !important;
}

/* Prevent FOUC (Flash of Unstyled Content) during theme changes */
.theme-transition {
    opacity: 0.95;
}

/* Rounded image styling */
.rounded-image {
    border-radius: 12px;
    width: 100%; /* Use 100% of container width */
    max-width: 500px; /* Maximum width constraint */
    max-height: 400px; /* Maximum height constraint */
    height: auto;
    object-fit: contain; /* Ensure the image maintains its aspect ratio */
    display: block;
    margin: 0 auto;
}

/* Responsive image sizing for different screen sizes */
@media (max-width: 1200px) {
    .rounded-image {
        max-width: 450px;
        max-height: 350px;
    }
}

@media (max-width: 992px) {
    .rounded-image {
        max-width: 400px;
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .rounded-image {
        max-width: 350px;
        max-height: 250px;
    }
}

@media (max-width: 576px) {
    .rounded-image {
        max-width: 300px;
        max-height: 200px;
    }
}

/* Microsoft Edge specific fixes */
@supports (-ms-ime-align:auto) {
    .rounded-image {
        width: auto;
        max-width: 450px;
    }
}