/* 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-lavender: #d1c4e9;
    --mui-error-red: #dc3545;

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

    --mui-white: #fff;

    /* Light Theme Semantic Variables */
    --mui-primary-bg: var(--mui-deep-blue);
    --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-deep-blue);
    /* 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);
}

/* 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;
    /* border-radius: 4px; */
    transition: background-color 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: transparent;
    color: var(--mui-accent-text);
    border: 1px solid var(--mui-accent-text);
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mui-secondary-button:hover {
    background-color: var(--mui-accent-text);
    color: var(--mui-primary-bg);
}

/* 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);
}

/* Transition for theme switching */
body {
    /* transition: background-color 0.3s ease, color 0.3s ease; */
}

/* 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 .form-group {
    margin-bottom: 0.65rem;
}

.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 */