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

:root {
  /* Light Theme Colors (Default) */
  /* New Color Palette */
  --mui-primary: #0a0a0a;
  --mui-secondary: #c3994a;
  --mui-teal: #006e96;

  --mui-forest-green: #266433;
  --mui-mint-green: #dfefca;
  --mui-lime-green: #e2dc54;
  --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: #ffffff;

  --mui-light-gray: #f3f3f3;

  --mui-dark-blue-gray: #172a3a;

  /* Gradient Variables */
  --mui-gradient-dark: linear-gradient(to top, #0a0a0a, #000000);

  /* Light Theme Semantic Variables */
  --mui-primary-bg: var(--mui-primary);
  --mui-secondary-bg: var(--mui-secondary);
  --mui-accent-bg: var(--mui-sky-blue);

  --mui-primary-text: var(--mui-primary);
  --mui-secondary-text: var(--mui-secondary);

  --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-menu: clamp(0.7rem, 0.75rem + 0.1vw, 0.8rem);
  --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) !important;
}

.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-primary);
  /* 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-secondary);
  --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-secondary);
  color: var(--mui-white);
  border: 1px solid transparent;
  padding: 8px 16px;
  transition: all 0.3s ease;
  font-size: var(--mui-fs-xxs);
}

.mui-primary-button:hover {
  background-color: var(--mui-white);
  color: var(--mui-secondary);
  border: 1px solid var(--mui-secondary);
}

.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-secondary);
  color: var(--mui-off-black);
}

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

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

.mui-link-button {
  background-color: transparent;
  color: var(--mui-primary);
  border: none;
  padding: 0px;
  transition: all 0.3s ease;
  font-size: var(--mui-fs-xxs);
}

.mui-link-button:hover {
  color: var(--mui-secondary);
}

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

.mui-dvh-100 {
  height: 100dvh !important;
}