/* Theme CSS with Dark and Light Mode Support */

:root {
    /* Light Theme Colors (Default) */
    /* New Color Palette */
    --mui-forest-green: #266433;
    --mui-mint-green: #dfefca;
    --mui-lime-green: #e2dc54;
    --mui-tangerine: #f45c27;
    --mui-sky-blue: #add0ee;
    --mui-berry-purple: #6d2d59;
    --mui-deep-blue: #032f98;
    --mui-purple: #5C38FF;
    --mui-lavender: #d1c4e9;
    --mui-error-red: #dc3545;

    /* Additional Colors */
    --mui-off-white: #FAF9F5;
    --mui-off-black: #0a0a0a;

    --mui-white: #fff;

    --mui-light-gray: #F3F3F3;

    /* Light Theme Semantic Variables */
    --mui-primary-bg: var(--mui-purple);
    --mui-secondary-bg: var(--mui-tangerine);
    --mui-accent-bg: var(--mui-sky-blue);
    --mui-primary-text: var(--mui-off-black);
    --mui-secondary-text: var(--mui-tangerine);
    --mui-accent-text: var(--mui-sky-blue);
    --mui-highlight: var(--mui-lime-green);
    --mui-subtle: var(--mui-mint-green);
    --mui-soft-accent: var(--mui-lavender);
    --mui-decorative: var(--mui-berry-purple);
    --mui-neutral: var(--mui-off-white);
    --mui-card-bg: var(--mui-white);

    /* Responsive Font Size Variables */
    --mui-fs-tiny: clamp(0.65rem, 0.65rem + 0.1vw, 0.75rem);
    --mui-fs-xxs: clamp(0.7rem, 0.7rem + 0.2vw, 0.9rem);
    --mui-fs-xs: clamp(0.8rem, 0.8rem + 0.3vw, 1.1rem);
    --mui-fs-sm: clamp(0.9rem, 0.9rem + 0.4vw, 1.3rem);
    --mui-fs-base: clamp(1rem, 1rem + 0.5vw, 1.5rem);
    --mui-fs-md: clamp(1.1rem, 1.1rem + 0.7vw, 1.8rem);
    --mui-fs-lg: clamp(1.2rem, 1.2rem + 1vw, 2.2rem);
    --mui-fs-xl: clamp(1.4rem, 1.4rem + 1.5vw, 2.9rem);
    --mui-fs-xxl: clamp(1.8rem, 1.8rem + 2vw, 3.8rem);
    --mui-fs-huge: clamp(2.2rem, 2.2rem + 3vw, 5.2rem);

    /* Line Height Variables for Better Readability */
    --mui-lh-tight: 1.2;
    --mui-lh-base: 1.5;
    --mui-lh-loose: 1.8;

    /* Letter Spacing for Better Readability */
    --mui-ls-tight: -0.05em;
    --mui-ls-normal: 0;
    --mui-ls-wide: 0.05em;
}

/* Font Size Classes */
.mui-fs-tiny {
    font-size: var(--mui-fs-tiny);
}

.mui-fs-xxs {
    font-size: var(--mui-fs-xxs);
}

.mui-fs-xs {
    font-size: var(--mui-fs-xs);
}

.mui-fs-sm {
    font-size: var(--mui-fs-sm);
}

.mui-fs-base {
    font-size: var(--mui-fs-base);
}

.mui-fs-md {
    font-size: var(--mui-fs-md);
}

.mui-fs-lg {
    font-size: var(--mui-fs-lg);
}

.mui-fs-xl {
    font-size: var(--mui-fs-xl);
}

.mui-fs-xxl {
    font-size: var(--mui-fs-xxl);
}

.mui-fs-huge {
    font-size: var(--mui-fs-huge);
}

/* Line Height Classes */
.mui-lh-tight {
    line-height: var(--mui-lh-tight);
}

.mui-lh-base {
    line-height: var(--mui-lh-base);
}

.mui-lh-loose {
    line-height: var(--mui-lh-loose);
}

/* Letter Spacing Classes */
.mui-ls-tight {
    letter-spacing: var(--mui-ls-tight);
}

.mui-ls-normal {
    letter-spacing: var(--mui-ls-normal);
}

.mui-ls-wide {
    letter-spacing: var(--mui-ls-wide);
}

/* Dark Theme Colors */
[data-bs-theme="dark"] {
    --mui-primary-bg: var(--mui-purple);
    /* Darker shade of deep blue */
    --mui-secondary-bg: #c24a20;
    /* Darker shade of tangerine */
    --mui-accent-bg: #8ab0d0;
    /* Darker shade of sky blue */
    --mui-primary-text: var(--mui-white);
    --mui-secondary-text: var(--mui-tangerine);
    --mui-accent-text: var(--mui-sky-blue);
    --mui-highlight: var(--mui-lime-green);
    --mui-subtle: #1e3a22;
    /* Darker shade of mint green */
    --mui-soft-accent: #9a8aad;
    /* Darker shade of lavender */
    --mui-decorative: #4a1e3d;
    /* Darker shade of berry purple */
    --mui-neutral: #2c2c2a;
    /* Darker shade of off-white */
    --mui-card-bg: var(--mui-off-black);
    /* Darker shade of lavender */
}

/* Background Classes */
.mui-primary-bg {
    background-color: var(--mui-primary-bg);
}

.mui-secondary-bg {
    background-color: var(--mui-secondary-bg);
}

.mui-accent-bg {
    background-color: var(--mui-accent-bg);
}

.mui-card-bg {
    background-color: var(--mui-card-bg);
}

.mui-highlight-bg {
    background-color: var(--mui-highlight);
}

.mui-subtle-bg {
    background-color: var(--mui-subtle);
}

.mui-decorative-bg {
    background-color: var(--mui-decorative);
}

.mui-neutral-bg {
    background-color: var(--mui-neutral);
}

.mui-light-gray-bg {
    background-color: var(--mui-light-gray);
}

/* Text Color Classes */
.mui-primary-text {
    color: var(--mui-primary-text);
}

.mui-secondary-text {
    color: var(--mui-secondary-text);
}

.mui-accent-text {
    color: var(--mui-accent-text);
}

.mui-highlight-text {
    color: var(--mui-highlight);
}

.mui-subtle-text {
    color: var(--mui-subtle);
}

.mui-soft-accent-text {
    color: var(--mui-soft-accent);
}

/* Border Classes */
.mui-primary-border {
    border-color: var(--mui-primary-text);
}

.mui-accent-border {
    border-color: var(--mui-accent-text);
}

.mui-highlight-border {
    border-color: var(--mui-highlight);
}

.mui-decorative-border {
    border-color: var(--mui-decorative);
}

/* Button Styles */
.mui-primary-button {
    background-color: var(--mui-primary-bg);
    color: var(--mui-white);
    border: none;
    padding: 8px 16px;
    transition: all 0.3s ease;
    font-size: var(--mui-fs-xxs);
}

.mui-primary-button:hover {
    background-color: #021c5a;
    /* Darker shade of deep blue */
}

.mui-secondary-button {
    background-color: var(--mui-off-black);
    color: var(--mui-off-white);
    border: none;
    padding: 8px 16px;
    transition: all 0.3s ease;
    font-size: var(--mui-fs-xxs);
}

.mui-secondary-button:hover {
    background-color: var(--mui-tangerine);
    color: var(--mui-off-white);
}

/* Card Component */
.mui-theme-card {
    background-color: var(--mui-card-bg);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Theme Toggle Functionality */
.mui-theme-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 16px;
    background-color: var(--mui-secondary-bg);
    color: var(--mui-primary-text);
    transition: all 0.3s ease;
}

/* Utility Classes */
.mui-shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mui-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mui-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* JavaScript can be used to toggle the data-theme attribute on the html or body element */
/* Example: document.documentElement.setAttribute('data-theme', 'dark'); */
.mui-form .row {
    margin-bottom: 0.5rem;
}

/* .mui-form .form-group {
    margin-bottom: 0.35rem;
} */

.mui-form .form-group .form-label {
    margin-bottom: 0.1rem;
    font-size: var(--mui-fs-xxs);
    color: var(--bs-gray-700);
}

.mui-form .form-group .error {
    color: var(--mui-error-red);
}


/* Sidebar template CSS Start */


/* Sidebar template CSS End */
.mui-badge-text {
    padding: 0px !important;
    border: none !important;
    background-color: transparent !important;
}

.mui-badge-text-inherit {
    font-size: inherit !important;
}

.mui-badge-text .bi {
    margin-right: 0.25rem !important;
}

.mui-badge-underline {
    padding: 0px !important;
    border: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid !important;
    border-radius: 0px !important;
}

/* Badge styles for #568366 */
.mui-badge-forest {
    background-color: #f0f4f2;
    color: #568366;
    border-color: #c8d3cc;
}

/* Badge styles for #FFDA48 */
.mui-badge-yellow {
    background-color: #fffdf5;
    color: #806d24;
    border-color: #fff2b3;
}

/* Badge styles for #ECC4E8 */
.mui-badge-pink {
    background-color: #fdf7fc;
    color: #76627a;
    border-color: #f7e6f5;
}

/* Badge styles for #F3F6EB */
.mui-badge-sage {
    background-color: #fbfcf9;
    color: #797c74;
    border-color: #e8ece0;
}

/* Badge styles for #7B0828 */
.mui-badge-burgundy {
    background-color: #fdf5f7;
    color: #7B0828;
    border-color: #ecd1d7;
}

/* Badge styles for #436436 */
.mui-badge-green {
    background-color: #f5f7f5;
    color: #436436;
    border-color: #d1d9d1;
}

/* Badge styles for #FF9914 */
.mui-badge-orange {
    background-color: #fff8f0;
    color: #FF9914;
    border-color: #ffe4b3;
}

/* Badge styles for #464655 */
.mui-badge-slate {
    background-color: #f6f6f7;
    color: #464655;
    border-color: #d5d5d9;
}