/* public/css/theme.css */
/* Global CSS Variables for Dark/Light Theme */

:root {
  --bg-body: #FDFAF6;
  --bg-slider-fade-left: linear-gradient(to right, #FDFAF6, rgba(0,0,0,0));
  --bg-slider-fade-right: linear-gradient(to left, #FDFAF6, rgba(0,0,0,0));
  
  --bg-nav: #1a2935;
  --color-nav-text: #ffffffff;
  --color-nav-text-hover: #ffcb94ff;
  --color-nav-mark: #ffffffff;
  --color-nav-mark-hover: #FF9B2F;
  
  --bg-sidebar: #FDFAF6;
  --shadow-sidebar: 10px 0 10px -5px rgba(0, 0, 0, 0.1);
  --color-sidebar-text: #000;
  --color-sidebar-text-hover: #273F4F;
  --bg-sidebar-text: rgba(0, 0, 0, 0.02);
  --bg-sidebar-text-hover: rgba(0, 0, 0, 0.1);
  --color-sidebar-svg: #000;
  --color-sidebar-svg-hover: orange;
  
  --border-categories: rgba(0, 0, 0, 0.05);
  --border-categories-hover: rgba(0, 0, 0, 0.1);
  
  --bg-card: #F4F6FF;
  --bg-card-hover: rgba(0, 0, 0, 0.04);
  --color-card: #000;
  --color-card-hover: #000;
}

body[data-theme="dark"] {
  --bg-body: #212121;
  --bg-slider-fade-left: linear-gradient(to right, #212121, rgba(0,0,0,0));
  --bg-slider-fade-right: linear-gradient(to left, #212121, rgba(0,0,0,0));
  
  --bg-nav: #FDFAF6;
  --color-nav-text: #000;
  --color-nav-text-hover: #847969;
  --color-nav-mark: #000;
  --color-nav-mark-hover: #4A9782;
  
  --bg-sidebar: #393E46;
  --shadow-sidebar: 10px 0 10px -5px rgba(211, 233, 255, 0.2);
  --color-sidebar-text: #FDFAF6;
  --color-sidebar-text-hover: #FAF7F3;
  --bg-sidebar-text: rgba(255, 255, 255, 0.05);
  --bg-sidebar-text-hover: rgba(255, 255, 255, 0.1);
  --color-sidebar-svg: #FDFAF6;
  --color-sidebar-svg-hover: orange;
  
  --border-categories: rgba(255, 255, 255, 0.03);
  --border-categories-hover: rgba(255, 255, 255, 0.1);
  
  --bg-card: rgba(255, 255, 255, 0.02);
  --bg-card-hover: rgba(255, 255, 255, 0.01);
  --color-card: #DDDAD0;
  --color-card-hover: #fff;
}

/* ========================================================
   GLOBAL THEME APPLICATION
   These rules override inline styles to guarantee colors
======================================================== */

body {
  background-color: var(--bg-body) !important;
  transition: background-color 0.3s ease;
}

.slider_fade_left {
  background: var(--bg-slider-fade-left) !important;
  transition: background 0.3s ease;
}

.slider_fade_right {
  background: var(--bg-slider-fade-right) !important;
  transition: background 0.3s ease;
}

.navBGColor {
  background-color: var(--bg-nav) !important;
  transition: background-color 0.3s ease;
}

.navTextColor {
  color: var(--color-nav-text) !important;
  fill: var(--color-nav-text) !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.navTextColor:hover {
  color: var(--color-nav-text-hover) !important;
  fill: var(--color-nav-text-hover) !important;
}

.navMarkColor {
  color: var(--color-nav-mark) !important;
  fill: var(--color-nav-mark) !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.navMarkColor:hover {
  color: var(--color-nav-mark-hover) !important;
  fill: var(--color-nav-mark-hover) !important;
}

.sideBarBGColor {
  background-color: var(--bg-sidebar) !important;
  box-shadow: var(--shadow-sidebar) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sideBarTextColor {
  color: var(--color-sidebar-text) !important;
  fill: var(--color-sidebar-text) !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.sideBarTextColor:hover {
  color: var(--color-sidebar-text-hover) !important;
  fill: var(--color-sidebar-text-hover) !important;
}

.sideBarTextBG {
  background-color: var(--bg-sidebar-text) !important;
  transition: background-color 0.3s ease;
}

.sideBarTextBG:hover {
  background-color: var(--bg-sidebar-text-hover) !important;
}

.sideBarSVGColor {
  color: var(--color-sidebar-svg) !important;
  fill: var(--color-sidebar-svg) !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.sideBarSVGColor:hover {
  color: var(--color-sidebar-svg-hover) !important;
  fill: var(--color-sidebar-svg-hover) !important;
}

.categoriesBorderColor {
  border-color: var(--border-categories) !important;
  transition: border-color 0.3s ease;
}

.categoriesBorderColor:hover {
  border-color: var(--border-categories-hover) !important;
}

.card {
  background-color: var(--bg-card) !important;
  color: var(--color-card) !important;
  fill: var(--color-card) !important;
  transition: background-color 0.3s ease, color 0.3s ease, fill 0.3s ease;
}

.card:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--color-card-hover) !important;
  fill: var(--color-card-hover) !important;
}