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

:root {
  --bg-body: #f8fafc;
  --bg-slider-fade-left: linear-gradient(to right, #f8fafc, rgba(0, 0, 0, 0));
  --bg-slider-fade-right: linear-gradient(to left, #f8fafc, rgba(0, 0, 0, 0));

  --bg-nav: linear-gradient(90deg, #F7F7F7 0%, #FDF7F4 100%);
  --bg-nav-solid: #bebebe;
  --bg-footer-created: #E1DEDD;
  --bg-dropdown: #991b1b;
  --bg-input: #ffffff;
  --border-input: #e2e8f0;
  --accent-color: #ff8453; /* Burnt Orange */
  --accent-text: #484848;
  --color-nav-text: #454545;
  --color-dropdown-text: #464646;
  --color-slider-btn-text: #1e293b;
  --color-nav-text-hover: #ffcca8;
  --color-nav-mark: #373737;
  --color-nav-mark-hover: #ff8b89;

  --bg-sidebar: #ffffff;
  --shadow-sidebar: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --color-sidebar-text: #1e293b;
  --color-sidebar-text-hover: #ff9b2f;
  --bg-sidebar-text: rgba(0, 0, 0, 0.1);
  --bg-sidebar-text-hover: rgba(0, 0, 0, 0.05);
  --color-sidebar-svg: #1e293b;
  --color-sidebar-svg-hover: #ff9b2f;

  --border-categories: rgba(0, 0, 0, 0.05);
  --border-categories-hover: rgba(0, 0, 0, 0.1);

  --bg-card: #ffffff;
  --bg-card-hover: rgba(0, 0, 0, 0.02);
  --color-card: #1e293b;
  --color-card-hover: #000;

  --bg-sayac: #ffffff;
  --shadow-sayac: 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  --bg-body: radial-gradient(circle at 50% 0%, #080808 0%, #000000 100%);
  --bg-slider-fade-left: linear-gradient(to right, #000000, rgba(0, 0, 0, 0));
  --bg-slider-fade-right: linear-gradient(to left, #000000, rgba(0, 0, 0, 0));

  --bg-nav: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
  --bg-nav-solid: #111111;
  --bg-footer-created: #050505;
  --bg-dropdown: rgba(15, 15, 20, 0.95);
  --bg-input: #0c0c0c;
  --border-input: rgba(255, 255, 255, 0.05);
  --accent-color: #ff5f1f;
  --accent-text: #ffffff;
  --color-nav-text: #94a3b8;
  --color-dropdown-text: #94a3b8;
  --color-slider-btn-text: #94a3b8;
  --color-nav-text-hover: #38bdf8;
  --color-nav-mark: #cbd5e1;
  --color-nav-mark-hover: #38bdf8;

  --bg-sidebar: #0c0c14;
  --shadow-sidebar: 0 10px 15px -3px rgba(0, 0, 0, 0.9);
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-text-hover: #38bdf8;
  --bg-sidebar-text: rgba(255, 255, 255, 0.02);
  --bg-sidebar-text-hover: rgba(255, 255, 255, 0.05);
  --color-sidebar-svg: #cbd5e1;
  --color-sidebar-svg-hover: #38bdf8;

  --border-categories: rgba(255, 255, 255, 0.05);
  --border-categories-hover: rgba(255, 255, 255, 0.1);

  --bg-card: rgba(15, 15, 25, 0.4);
  --bg-card-hover: rgba(15, 15, 25, 0.6);
  --color-card: #94a3b8;
  --color-card-hover: #f1f5f9;

  --shadow-sayac: 0px 0px 8px rgba(255, 255, 255, 0.08), 0px 0px 15px rgba(255, 255, 255, 0.05), 0px 0px 20px rgba(255, 255, 255, 0.03);
}

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

html,
body {
  background: var(--bg-body) !important;
  background-attachment: fixed;
  transition: all 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: var(--bg-nav) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 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;
}