:root {
  --text-color-light: #000000;
  --container-bg-light: #ffffff;
  --h1-color-light: #333333;
  --background-color-light: #ffffff;

  /* Theme 1 - Default Dark Theme */
  --theme1-bg-dark: radial-gradient(
      circle at 50% 0%,
      rgb(54, 55, 74) 16.4%,
      rgb(47, 48, 67) 68.2%,
      rgb(23, 31, 36) 99.1%
  );
  --theme1-bg-light: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme1-container-dark: radial-gradient(
      circle at 50% 0%,
      rgb(44, 45, 64) 16.4%,
      rgb(37, 38, 57) 68.2%,
      rgb(13, 21, 26) 99.1%
  );
  --theme1-container-light: #ffffff;
  --theme1-text-dark: #ffffff;
  --theme1-text-light: #333333;
  --theme1-button-dark: var(--theme1-bg-dark);
  --theme1-button-light: var(--theme1-bg-dark);
  --theme1-button-text-dark: #ffffff;
  --theme1-button-text-light: #ffffff;

  /* Theme 2 - Purple Dream */
  --theme2-bg-dark: radial-gradient(
      circle at 50% 0%,
      rgb(88, 24, 69) 16.4%,
      rgb(67, 19, 51) 68.2%,
      rgb(36, 23, 36) 99.1%
  );
  --theme2-bg-light: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme2-container-dark: radial-gradient(
      circle at 50% 0%,
      rgb(78, 14, 59) 16.4%,
      rgb(57, 9, 41) 68.2%,
      rgb(26, 13, 26) 99.1%
  );
  --theme2-container-light: #ffffff;
  --theme2-text-dark: #ffffff;
  --theme2-text-light: #333333;
  --theme2-button-dark: var(--theme2-bg-dark);
  --theme2-button-light: var(--theme2-bg-dark);
  --theme2-button-text-dark: #ffffff;
  --theme2-button-text-light: #ffffff;

  /* Theme 3 - Ocean Breeze */
  --theme3-bg-dark: radial-gradient(
      circle at 50% 0%,
      rgb(39, 126, 176) 16.4%,
      rgb(36, 87, 121) 68.2%,
      rgb(41, 72, 72) 99.1%
  );
  --theme3-bg-light: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme3-container-dark: radial-gradient(
      circle at 50% 0%,
      rgb(33, 137, 197) 16.4%,
      rgb(25, 86, 128) 68.2%,
      rgb(33, 81, 81) 99.1%
  );
  --theme3-container-light: #ffffff;
  --theme3-text-dark: #ffffff;
  --theme3-text-light: #333333;
  --theme3-button-dark: var(--theme3-bg-dark);
  --theme3-button-light: var(--theme3-bg-dark);
  --theme3-button-text-dark: #ffffff;
  --theme3-button-text-light: #ffffff;

  /* Theme 4 - Saudi Theme */
  --theme4-bg-dark: radial-gradient(
      circle at 50% 0%,
      rgb(0, 104, 55) 16.4%,
      rgb(0, 84, 45) 68.2%,
      rgb(0, 64, 35) 99.1%
  );
  --theme4-bg-light: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme4-container-dark: radial-gradient(
      circle at 50% 0%,
      rgb(0, 94, 45) 16.4%,
      rgb(0, 74, 35) 68.2%,
      rgb(0, 54, 25) 99.1%
  );
  --theme4-container-light: #ffffff;
  --theme4-text-dark: #ffffff;
  --theme4-text-light: #333333;
  --theme4-button-dark: var(--theme4-bg-dark);
  --theme4-button-light: var(--theme4-bg-dark);
  --theme4-button-text-dark: #ffffff;
  --theme4-button-text-light: #ffffff;

  /* Theme 5 - Light Theme */
  --theme5-bg: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme5-container: #ffffff;
  --theme5-text: #333333;
  --theme5-button: var(--theme5-bg);
  --theme5-button-text: #333333;

  /* Theme 6 - Saudi Foundation Day */
  --theme6-bg-dark: radial-gradient(
      circle at 50% 0%,
      rgb(186, 119, 71) 16.4%,
      rgb(166, 99, 51) 68.2%,
      rgb(146, 79, 31) 99.1%
  );
  --theme6-bg-light: radial-gradient(
      circle at 50% 0%,
      rgb(245, 245, 245) 16.4%,
      rgb(235, 235, 235) 68.2%,
      rgb(225, 225, 225) 99.1%
  );
  --theme6-container-dark: radial-gradient(
      circle at 50% 0%,
      rgb(176, 109, 61) 16.4%,
      rgb(156, 89, 41) 68.2%,
      rgb(136, 69, 21) 99.1%
  );
  --theme6-container-light: #ffffff;
  --theme6-text-dark: #ffffff;
  --theme6-text-light: #333333;
  --theme6-button-dark: var(--theme6-bg-dark);
  --theme6-button-light: var(--theme6-bg-dark);
  --theme6-button-text-dark: #ffffff;
  --theme6-button-text-light: #ffffff;
}



/* Light Theme */
body.light-theme {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}
body.light-theme .footer-text {
color: black;
}
body.light-theme .container {
  background-color: var(--container-bg-light);
  color: var(--text-color-light);
}

body.dark-theme h1,p,
body.dark-theme #dynamic-quote {
  color: #000;
}
body.light-theme h1,p,
body.light-theme #dynamic-quote {
  color: #000000;
}


/* Light Theme Special Tools Button */
body.light-theme .special-tools-button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  /* border-color: rgba(0, 0, 0, 0.1) !important; */
  box-shadow: 0 0 20px rgba(79, 172, 254, 0.4),
              inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

body.light-theme .special-tools-button:hover {
  box-shadow: 0 0 30px rgba(79, 172, 254, 0.6),
              inset 0 0 20px rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}


/* Theme Classes */
body[class*="theme-"].dark-mode .footer-text,
body.dark-mode .footer-text {
 color: #ffffff !important;
}

body.theme-1.dark-mode {
 background-image: var(--theme1-bg-dark);
 color: var(--theme1-text-dark);
}
body.theme-1.light-mode {
 background: var(--theme1-button-light);
 color: var(--theme1-text-light);
}
body.theme-1.dark-mode .container {
 background: #1a1a1a;
}
body.theme-1.light-mode .container {
 background-color: var(--theme1-container-light);
}
body.theme-1.dark-mode h1,
body.theme-1.dark-mode #dynamic-quote {
 color: var(--theme1-text-dark);
}
body.theme-1.light-mode h1,
body.theme-1.light-mode #dynamic-quote {
 color: var(--theme1-text-light);
}
body.theme-1.dark-mode .button-link,
body.theme-1.dark-mode button {
 background: var(--theme1-button-dark);
 color: var(--theme1-button-text-dark);
}
body.theme-1.light-mode .button-link,
body.theme-1.light-mode button {
 background: var(--theme1-button-light);
 color: var(--theme1-button-text-light);
}

body.theme-2.dark-mode {
 background-image: var(--theme2-bg-dark);
 color: var(--theme2-text-dark);
}
body.theme-2.light-mode {
 background-image: var(--theme2-button-light);
 color: var(--theme2-text-light);
}
body.theme-2.dark-mode .container {
 background: #1a1a1a;
}
body.theme-2.light-mode .container {
 background-color: var(--theme2-container-light);
}
body.theme-2.dark-mode h1,
body.theme-2.dark-mode #dynamic-quote {
 color: var(--theme2-text-dark);
}
body.theme-2.light-mode h1,
body.theme-2.light-mode #dynamic-quote {
 color: var(--theme2-text-light);
}
body.theme-2.dark-mode .button-link,
body.theme-2.dark-mode button {
 background: var(--theme2-button-dark);
 color: var(--theme2-button-text-dark);
}
body.theme-2.light-mode .button-link,
body.theme-2.light-mode button {
 background: var(--theme2-button-light);
 color: var(--theme2-button-text-light);
}

body.theme-3.dark-mode {
 background-image: var(--theme3-bg-dark);
 color: var(--theme3-text-dark);
}
body.theme-3.light-mode {
 background-image: var(--theme3-button-light);
 color: var(--theme3-text-light);
}
body.theme-3.dark-mode .container {
 background: #1a1a1a;
}
body.theme-3.light-mode .container {
 background-color: var(--theme3-container-light);
}
body.theme-3.dark-mode h1,
body.theme-3.dark-mode #dynamic-quote {
 color: var(--theme3-text-dark);
}
body.theme-3.light-mode h1,
body.theme-3.light-mode #dynamic-quote {
 color: var(--theme3-text-light);
}
body.theme-3.dark-mode .button-link,
body.theme-3.dark-mode button {
 background: var(--theme3-button-dark);
 color: var(--theme3-button-text-dark);
}
body.theme-3.light-mode .button-link,
body.theme-3.light-mode button {
 background: var(--theme3-button-light);
 color: var(--theme3-button-text-light);
}

body.theme-4.dark-mode {
 background-image: var(--theme4-bg-dark);
 color: var(--theme4-text-dark);
}
body.theme-4.light-mode {
 background: var(--theme4-button-light);
 color: var(--theme4-text-light);
}
body.theme-4.dark-mode .container {
 background: #1a1a1a;
}
body.theme-4.light-mode .container {
 background-color: var(--theme4-container-light);
}
body.theme-4.dark-mode h1,
body.theme-4.dark-mode #dynamic-quote {
 color: var(--theme4-text-dark);
}
body.theme-4.light-mode h1,
body.theme-4.light-mode #dynamic-quote {
 color: var(--theme4-text-light);
}
body.theme-4.dark-mode .button-link,
body.theme-4.dark-mode button {
 background: var(--theme4-button-dark);
 color: var(--theme4-button-text-dark);
}
body.theme-4.light-mode .button-link,
body.theme-4.light-mode button {
 background: var(--theme4-button-light);
 color: var(--theme4-button-text-light);
}

body.theme-5 {
 background-image: var(--theme5-bg);
 color: var(--theme5-text);
}
body.theme-5 .container {
 background-color: var(--theme5-container);
}
body.theme-5 h1,
body.theme-5 #dynamic-quote {
 color: var(--theme5-text);
}
body.theme-5 .button-link,
body.theme-5 button {
 background: var(--theme5-button);
 color: var(--theme5-button-text);
}
body.theme-5 .footer-text,
body.theme-5 p,
body.theme-5 h2,
body.theme-5 {
 color: #000000 !important;
}

body.theme-6.dark-mode {
 background-image: var(--theme6-bg-dark);
 color: var(--theme6-text-dark);
}
body.theme-6.light-mode {
 background-image: var(--theme6-button-light);
 color: var(--theme6-text-light);
}
body.theme-6.dark-mode .container {
 background: #1a1a1a;
}
body.theme-6.light-mode .container {
 background-color: var(--theme6-container-light);
}
body.theme-6.dark-mode h1,
body.theme-6.dark-mode #dynamic-quote {
 color: var(--theme6-text-dark);
}
body.theme-6.light-mode h1,
body.theme-6.light-mode #dynamic-quote {
 color: var(--theme6-text-light);
}
body.theme-6.dark-mode .button-link,
body.theme-6.dark-mode button {
 background: var(--theme6-button-dark);
 color: var(--theme6-button-text-dark);
}
body.theme-6.light-mode .button-link,
body.theme-6.light-mode button {
 background: var(--theme6-button-light);
 color: var(--theme6-button-text-light);
}

/* Theme Option Updates */
.theme-option.theme-4 {
 background: var(--theme4-bg-dark);
 border: 2px solid #ffffff;
}

.theme-option.theme-5 {
 background: var(--theme5-bg);
 border: 2px solid #e0e0e0;
}

.theme-option.theme-6 {
 background: var(--theme6-bg-dark);
 border: 2px solid #ba7747;
}

.theme-option.theme-5::after {
 color: #333333;
 text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}


/* قاعدة عامة للنمط الداكن لجميع الثيمات */
body[class*="theme-"].dark-mode .footer-text,
body[class*="theme-"].dark-mode p,
body[class*="theme-"].dark-mode h2,
body[class*="theme-"].dark-mode,
body.dark-mode .footer-text,
body.dark-mode p,
body.dark-mode h2,
body.dark-mode {
 color: #ffffff !important;
}

/* قاعدة عامة للنمط الفاتح لجميع الثيمات */
body[class*="theme-"].light-mode .footer-text,
body[class*="theme-"].light-mode p,
body[class*="theme-"].light-mode h2,
body[class*="theme-"].light-mode,
body.light-mode .footer-text,
body.light-mode p,
body.light-mode h2,
body.light-mode {
 color: #000000 !important;
}

/* Add transition for theme changes */
body {
  transition: background-image 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.container {
  transition: background-image 0.3s ease, background-color 0.3s ease;
}

.button-link, button {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
 


body.theme-1.dark-mode .schedule-table {
 background-image: var(--theme1-container-dark);
}
body.theme-1.light-mode .schedule-table {
 background-image: var(--theme1-container-light);
}

body.theme-2.dark-mode .schedule-table {
 background-image: var(--theme2-container-dark);
}
body.theme-2.light-mode .schedule-table {
 background-image: var(--theme2-container-light);
}


body.theme-3.dark-mode .schedule-table {
 background-image: var(--theme3-container-dark);
}
body.theme-3.light-mode .schedule-table {
 background-image: var(--theme3-container-light);
}

body.theme-4.dark-mode .schedule-table {
 background-image: var(--theme4-container-dark);
}
body.theme-4.light-mode .schedule-table {
 background-image: var(--theme4-container-light);
}
body.theme-5.dark-mode .schedule-table {
 background-image: var(--theme5-container-dark);
}
body.theme-5.light-mode .schedule-table {
 background-image: var(--theme5-container-light);
}
body.theme-6.dark-mode .schedule-table {
 background-image: var(--theme6-container-dark);
}
body.theme-6.light-mode .schedule-table {
 background-image: var(--theme6-container-light);
}






/* Calendar+ */
body.theme-1.dark-mode .event-card.upcoming {
 background: var(--theme1-button-light);
 color: rgb(0, 0, 0);
}
body.theme-1.dark-mode .detail-item {
 background: var(--theme1-container-light);
 color: rgb(0 0 0);
}
body.theme-1.light-mode .event-card.upcoming{
 background: var(--theme1-button-light);
 color: white;
}
body.theme-1.light-mode .detail-item {
 background: var(--theme1-container-light);
 color: rgb(0, 0, 0);
}

body.theme-2.dark-mode .event-card.upcoming {
 background: var(--theme2-container-light);
 color: rgb(0, 0, 0);
}
body.theme-2.dark-mode .detail-item {
 background: var(--theme2-button-light);
 color: rgb(255, 255, 255);
}
body.theme-2.light-mode .event-card.upcoming{
 background: var(--theme2-button-light);
 color: white;
}
body.theme-2.light-mode .detail-item {
 background: var(--theme2-container-light);
 color: rgb(0, 0, 0);
}

body.theme-3.dark-mode .event-card.upcoming {
 background: var(--theme3-container-light);
 color: rgb(0, 0, 0);
}
body.theme-3.dark-mode .detail-item {
 background: var(--theme3-button-light);
 color: rgb(255, 255, 255);
}  
body.theme-3.light-mode .event-card.upcoming{
 background: var(--theme3-button-light);
 color: white;
}
body.theme-3.light-mode .detail-item {
 background: var(--theme3-container-light);
 color: rgb(0, 0, 0);
}  

body.theme-4.dark-mode .event-card.upcoming {
 background: var(--theme4-container-light);
 color: rgb(0, 0, 0);
}
body.theme-4.dark-mode .detail-item {
 background: var(--theme4-button-light);
 color: rgb(255, 255, 255);
}  
body.theme-4.light-mode .event-card.upcoming{
 background: var(--theme4-button-light);
 color: white;
}
body.theme-4.light-mode .detail-item {
 background: var(--theme4-container-light);
 color: rgb(0, 0, 0);
}     
body.theme-5.dark-mode .event-card.upcoming {
 background: var(--theme5-container-light);
 color: rgb(0, 0, 0);
}
body.theme-5.dark-mode .detail-item {
 background: var(--theme5-button-light);
 color: rgb(255, 255, 255);
}        
body.theme-5.light-mode .event-card.upcoming{
 background: var(--theme5-button-light);
 color: rgb(0, 0, 0);
}
body.theme-5.light-mode .detail-item {
 background: var(--theme5-container-light);
 color: rgb(0, 0, 0);
}        
/*--------------------------------*/
body.theme-6.dark-mode .event-card.upcoming {
 background: var(--theme6-container-light);
 color: rgb(0, 0, 0);
}
body.theme-6.dark-mode .detail-item {
 background: var(--theme6-button-light);
 color: rgb(255, 255, 255);
}
body.theme-6.light-mode .event-card.upcoming{
 background: var(--theme6-button-light);
 color: white;
}
body.theme-6.light-mode .detail-item {
 background: var(--theme6-container-light);
 color: rgb(0, 0, 0);
}

/* GPA */
body.theme-1.dark-mode #cumulativeFields,
body.theme-1.dark-mode .subject {
 background-color: white;
 color: #000;
}
body.theme-1.light-mode #cumulativeFields,
body.theme-1.light-mode .subject {
 background: var(--theme1-button-light) ;
 color: #fff;
}
body.theme-2.dark-mode #cumulativeFields,
body.theme-2.dark-mode .subject {
 background-color: white;
 color: #000;
}
body.theme-2.light-mode #cumulativeFields,
body.theme-2.light-mode .subject {
 background: var(--theme2-button-light) ;
 color: #fff;
}
body.theme-3.dark-mode #cumulativeFields,
body.theme-3.dark-mode .subject {
 background-color: white;
 color: #000000;
}
body.theme-3.light-mode #cumulativeFields,
body.theme-3.light-mode .subject {
 background: var(--theme3-button-light) ;
 color: #fff; 
}
body.theme-4.dark-mode #cumulativeFields,
body.theme-4.dark-mode .subject {
 background-color: white;
 color: #000 !important;
} 



body.theme-4.light-mode #cumulativeFields,
body.theme-4.light-mode .subject {
 background: var(--theme4-button-light) ;
 color: #fff; 
}
body.theme-5.dark-mode #cumulativeFields,
body.theme-5.dark-mode .subject {
 background-color: white;
 color: #000;
}
body.theme-5.light-mode #cumulativeFields,
body.theme-5.light-mode .subject { 
 background: var(--theme5-button-light) ;
 color: #fff; 
}
body.theme-6.dark-mode #cumulativeFields,
body.theme-6.dark-mode .subject {
 background-color: white;
 color: #000;
} 
body.theme-6.light-mode #cumulativeFields,
body.theme-6.light-mode .subject {
 background: var(--theme6-button-light) ;
 color: #fff; 
} 


/*
--------------
*/



body.theme-1.light-mode  #date-info-container, 
body.theme-1.light-mode  #nextLectureCountdown, 
body.theme-1.light-mode  #upcoming-events, 
body.theme-1.light-mode  #academic-week, 
body.theme-1.light-mode  #upcoming-events .event-item {  
  background: var(--theme1-button-light);
}

body.theme-1.dark-mode  #date-info-container, 
body.theme-1.dark-mode  #nextLectureCountdown, 
body.theme-1.dark-mode  #upcoming-events, 
body.theme-1.dark-mode  #academic-week, 
body.theme-1.dark-mode  #upcoming-events .event-item {  
  background: var(--theme1-button-light);
}

body.theme-2.light-mode  #date-info-container, 
body.theme-2.light-mode  #nextLectureCountdown, 
body.theme-2.light-mode  #upcoming-events, 
body.theme-2.light-mode  #academic-week, 
body.theme-2.light-mode  #upcoming-events .event-item {  
  background: var(--theme2-button-light);
}

body.theme-2.dark-mode  #date-info-container, 
body.theme-2.dark-mode  #nextLectureCountdown, 
body.theme-2.dark-mode  #upcoming-events, 
body.theme-2.dark-mode  #academic-week, 
body.theme-2.dark-mode  #upcoming-events .event-item {  
  background: var(--theme2-button-light);
}

body.theme-3.light-mode  #date-info-container, 
body.theme-3.light-mode  #nextLectureCountdown, 
body.theme-3.light-mode  #upcoming-events, 
body.theme-3.light-mode  #academic-week, 
body.theme-3.light-mode  #upcoming-events .event-item {  
  background: var(--theme3-button-light);
}

body.theme-3.dark-mode  #date-info-container, 
body.theme-3.dark-mode  #nextLectureCountdown, 
body.theme-3.dark-mode  #upcoming-events, 
body.theme-3.dark-mode  #academic-week, 
body.theme-3.dark-mode  #upcoming-events .event-item {  
  background: var(--theme3-button-light);
}

body.theme-6.light-mode  #date-info-container, 
body.theme-6.light-mode  #nextLectureCountdown, 
body.theme-6.light-mode  #upcoming-events, 
body.theme-6.light-mode  #academic-week, 
body.theme-6.light-mode  #upcoming-events .event-item {  
  background: var(--theme6-button-light);
}

body.theme-6.dark-mode  #date-info-container, 
body.theme-6.dark-mode  #nextLectureCountdown, 
body.theme-6.dark-mode  #upcoming-events, 
body.theme-6.dark-mode  #academic-week, 
body.theme-6.dark-mode  #upcoming-events .event-item {  
  background: var(--theme6-button-light);
}

body.theme-4.light-mode  #date-info-container, 
body.theme-4.light-mode  #nextLectureCountdown, 
body.theme-4.light-mode  #upcoming-events, 
body.theme-4.light-mode  #academic-week, 
body.theme-4.light-mode  #upcoming-events .event-item {  
  background: var(--theme4-button-light);
}

body.theme-4.dark-mode  #date-info-container, 
body.theme-4.dark-mode  #nextLectureCountdown, 
body.theme-4.dark-mode  #upcoming-events, 
body.theme-4.dark-mode  #academic-week, 
body.theme-4.dark-mode  #upcoming-events .event-item {  
  background: var(--theme4-button-light);
}