/* ==========================================
ROOT
========================================== */

:root{

--bg:#070b16;

--card:#101827;
--card-light:#18233d;

--accent:#eb6835;
--accent2:#7c5cff;

--text:#ffffff;
--muted:#9ca3af;

--border:
rgba(255,255,255,.08);

--radius:30px;

}

/* ==========================================
RESET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{

background:var(--accent2);

border-radius:999px;

}

/* ==========================================
BACKGROUND BLOBS
========================================== */

body::before{

content:"";

position:fixed;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(124,92,255,.12);

top:-150px;
left:-100px;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:500px;
height:500px;

border-radius:50%;

background:
rgba(235,104,53,.08);

bottom:-150px;
right:-120px;

filter:blur(140px);

z-index:-1;

}

/* ==========================================
NAVBAR
========================================== */

.navbar{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(20px);

background:
rgba(7,11,22,.9);

border-bottom:
1px solid var(--border);

}

.nav-container{

max-width:1400px;

margin:auto;

padding:20px 40px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:48px;
height:48px;

display:flex;
align-items:center;
justify-content:center;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

}

.logo span{

font-size:2rem;

font-family:'Syne',sans-serif;

font-weight:800;

}

.nav-links{

display:flex;

gap:15px;

}

.nav-links a{

padding:12px 20px;

border-radius:999px;

text-decoration:none;

color:#d1d5db;

transition:.3s;

}

.nav-links a:hover,
.nav-links .active{

background:
rgba(255,255,255,.08);

color:white;

}

/* ==========================================
HERO
========================================== */

.hero{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.hero-content{

padding:60px;

border-radius:40px;

background:
linear-gradient(
145deg,
#101827,
#18233d
);

border:
1px solid var(--border);

}

.hero-badge{

display:inline-block;

padding:12px 20px;

border-radius:999px;

background:
rgba(235,104,53,.15);

color:#ffc4a5;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:
clamp(
3rem,
8vw,
6rem
);

line-height:1.05;

font-family:'Syne',sans-serif;

margin-bottom:25px;

}

.hero p{

max-width:850px;

font-size:1.15rem;

line-height:1.9;

color:var(--muted);

}

.hero-tags{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:35px;

}

.hero-tags span{

padding:12px 20px;

border-radius:999px;

background:
rgba(255,255,255,.05);

border:
1px solid var(--border);

}

/* ==========================================
STATS
========================================== */

.stats-section{

max-width:1400px;

margin:auto;

padding:20px 40px 80px;

}

.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.stat-card{

padding:35px;

border-radius:28px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border:
1px solid var(--border);

text-align:center;

}

.stat-card h3{

font-size:2.5rem;

font-family:'Syne',sans-serif;

margin-bottom:10px;

}

.stat-card p{

color:var(--muted);

}

/* ==========================================
SEARCH SECTION
========================================== */

.search-section{

max-width:1400px;

margin:auto;

padding:0 40px 60px;

display:flex;

justify-content:center;

}

.search-section input{

width:min(650px,100%);

padding:18px 22px;

border:none;

outline:none;

border-radius:20px;

background:
rgba(255,255,255,.05);

border:
1px solid var(--border);

color:white;

font-size:1rem;

backdrop-filter:blur(12px);

}

.search-section input::placeholder{

color:#9ca3af;

}

/* ==========================================
GRID
========================================== */

.breadcrumb-grid{

max-width:1400px;

margin:auto;

padding:0 40px 80px;

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(380px,1fr)
);

gap:28px;

}

/* ==========================================
CARD
========================================== */

.component-card{

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border:
1px solid var(--border);

border-radius:32px;

padding:28px;

overflow:hidden;

transition:.35s ease;

position:relative;

}

.component-card:hover{

transform:
translateY(-10px);

box-shadow:
0 20px 40px rgba(0,0,0,.3);

}

.component-card::before{

content:"";

position:absolute;

width:250px;
height:250px;

border-radius:50%;

background:
rgba(124,92,255,.08);

top:-120px;
right:-120px;

opacity:0;

transition:.35s;

}

.component-card:hover::before{

opacity:1;

}

.card-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:24px;

}

.card-header h3{

font-family:'Syne',sans-serif;

font-size:1.4rem;

}

.copy-btn{

padding:10px 16px;

border:none;

border-radius:14px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

cursor:pointer;

font-weight:700;

}

/* ==========================================
BASE BREADCRUMB
========================================== */

.breadcrumb{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:12px;

padding:24px;

border-radius:22px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.05);

}

.breadcrumb a{

text-decoration:none;

color:#d1d5db;

transition:.3s ease;

}

.breadcrumb a:hover{

color:var(--accent);

}

.current{

color:white;

font-weight:700;

}

.breadcrumb span{

color:#9ca3af;

}

/* ==========================================
ARROW
========================================== */

.arrow{

background:
rgba(124,92,255,.08);

}

.arrow i{

color:var(--accent);

}

/* ==========================================
PILL
========================================== */

.pill{

gap:14px;

}

.pill a,
.pill .current{

padding:10px 16px;

border-radius:999px;

background:
rgba(255,255,255,.08);

}

/* ==========================================
ICON
========================================== */

.icon a{

display:flex;

align-items:center;

gap:8px;

}

.icon i{

color:var(--accent);

}

/* ==========================================
GLASS
========================================== */

.glass{

background:
rgba(255,255,255,.05);

backdrop-filter:blur(16px);

border:
1px solid rgba(255,255,255,.1);

box-shadow:
0 8px 24px rgba(0,0,0,.2);

}

/* ==========================================
GRADIENT
========================================== */

.gradient{

background:
linear-gradient(
135deg,
rgba(235,104,53,.15),
rgba(124,92,255,.15)
);

}

/* ==========================================
MINIMAL
========================================== */

.minimal{

background:none;

border:none;

padding:10px 0;

}

.minimal a{

color:#e5e7eb;

}

/* ==========================================
ROUNDED
========================================== */

.rounded{

border-radius:999px;

background:
rgba(255,255,255,.05);

}

.rounded a,
.rounded .current{

padding:10px 18px;

border-radius:999px;

background:
rgba(255,255,255,.06);

}

/* ==========================================
ADMIN
========================================== */

.admin{

background:
rgba(59,130,246,.08);

border:
1px solid rgba(59,130,246,.15);

}

/* ==========================================
ECOMMERCE
========================================== */

.ecommerce{

background:
rgba(16,185,129,.08);

border:
1px solid rgba(16,185,129,.15);

}

/* ==========================================
NEON
========================================== */

.neon{

background:#0d1322;

box-shadow:
0 0 20px rgba(124,92,255,.15);

}

.neon .current{

color:#c4b5fd;

}

/* ==========================================
PREMIUM
========================================== */

.premium{

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:blur(18px);

border:
1px solid rgba(255,255,255,.12);

}
/* ==========================================
NEWSLETTER
========================================== */

.newsletter{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.newsletter-card{

padding:70px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
#eb6835,
#7c5cff,
#00c2ff
);

position:relative;

overflow:hidden;

}

.newsletter-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

background:
rgba(255,255,255,.08);

top:-140px;
right:-120px;

}

.newsletter-card h2{

font-size:3rem;

font-family:'Syne',sans-serif;

margin-bottom:18px;

position:relative;

z-index:2;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

opacity:.95;

position:relative;

z-index:2;

}

.newsletter form{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.newsletter input{

width:360px;

padding:16px 18px;

border:none;

outline:none;

border-radius:16px;

}

.newsletter button{

padding:16px 24px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

}

/* ==========================================
FOOTER
========================================== */

.footer{

margin-top:100px;

background:#050816;

border-top:
1px solid var(--border);

}

.footer-container{

max-width:1400px;

margin:auto;

padding:70px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-brand h2{

font-size:2rem;

font-family:'Syne',sans-serif;

color:var(--accent);

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:var(--muted);

}

.footer-col h3{

margin-bottom:18px;

font-family:'Syne',sans-serif;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:12px;

}

.footer-col a{

text-decoration:none;

color:var(--muted);

transition:.3s ease;

}

.footer-col a:hover{

color:white;

padding-left:4px;

}

.footer-bottom{

text-align:center;

padding:25px;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* ==========================================
ENTRANCE ANIMATION
========================================== */

.component-card{

opacity:0;

transform:
translateY(40px);

animation:
fadeUp .7s ease forwards;

}

.component-card:nth-child(2){
animation-delay:.1s;
}

.component-card:nth-child(3){
animation-delay:.2s;
}

.component-card:nth-child(4){
animation-delay:.3s;
}

.component-card:nth-child(5){
animation-delay:.4s;
}

.component-card:nth-child(6){
animation-delay:.5s;
}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(40px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/* ==========================================
SEARCH FOCUS
========================================== */

.search-section input{

transition:.3s ease;

}

.search-section input:focus{

border:
1px solid rgba(124,92,255,.5);

box-shadow:
0 0 25px rgba(124,92,255,.2);

}

/* ==========================================
BUTTON HOVER
========================================== */

.copy-btn:hover{

transform:
translateY(-3px);

box-shadow:
0 10px 25px rgba(124,92,255,.25);

}

.newsletter button:hover{

transform:
translateY(-3px);

}

/* ==========================================
CARD GLOW
========================================== */

.component-card:hover{

box-shadow:
0 20px 40px rgba(0,0,0,.3),
0 0 25px rgba(124,92,255,.15);

}

/* ==========================================
MOBILE
========================================== */

@media(max-width:1200px){

.stats-grid{

grid-template-columns:
repeat(2,1fr);

}

.footer-container{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.nav-container{

flex-direction:column;

gap:20px;

padding:20px;

}

.hero,
.stats-section,
.search-section,
.breadcrumb-grid,
.newsletter{

padding-left:20px;
padding-right:20px;

}

.hero-content{

padding:35px 25px;

}

.hero h1{

font-size:3rem;

}

.stats-grid{

grid-template-columns:1fr;

}

.breadcrumb-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

padding:50px 20px;

}

.newsletter-card{

padding:40px 25px;

}

.newsletter form{

flex-direction:column;

}

.newsletter input{

width:100%;

}

}

@media(max-width:500px){

.nav-links{

flex-wrap:wrap;

justify-content:center;

}

.hero-tags{

justify-content:center;

}

.hero h1{

font-size:2.4rem;

}

.card-header{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.copy-btn{

width:100%;

}

}
/* ============================================================
   THEME STYLING OVERRIDES
   Navbar, Sidebar, and Footer theme colors:
   - Light Mode: White background, dark text/icons
   - Dark Mode: Black background, light/white text/icons
   ============================================================ */

/* ==========================================
   1. LIGHT MODE SPECIFIC (body:not(.dark-mode))
   ========================================== */
body:not(.dark-mode) .navbar,
body:not(.dark-mode) header.navbar,
body:not(.dark-mode) nav.navbar,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar,
body:not(.dark-mode) .footer,
body:not(.dark-mode) footer.footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Ensure text, icons, links inside these components are dark */
body:not(.dark-mode) .navbar *,
body:not(.dark-mode) header.navbar *,
body:not(.dark-mode) nav.navbar *,
body:not(.dark-mode) .sidebar *,
body:not(.dark-mode) aside.sidebar *,
body:not(.dark-mode) .footer *,
body:not(.dark-mode) footer.footer * {
  color: #334155 !important;
}

/* Titles and major headings */
body:not(.dark-mode) .navbar .logo,
body:not(.dark-mode) .sidebar .sidebar-brand,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar .brand-text,
body:not(.dark-mode) .footer h2,
body:not(.dark-mode) .footer h3,
body:not(.dark-mode) .footer-logo {
  color: #0f172a !important;
}

/* Sidebar navigation links */
body:not(.dark-mode) .sidebar-nav li a,
body:not(.dark-mode) .sidebar ul li a,
body:not(.dark-mode) .sidebar a {
  background: transparent !important;
  color: #475569 !important;
}

/* Sidebar active link and hover states */
body:not(.dark-mode) .sidebar-nav li.active a,
body:not(.dark-mode) .sidebar-nav li a:hover,
body:not(.dark-mode) .sidebar ul li.active a,
body:not(.dark-mode) .sidebar ul li a:hover,
body:not(.dark-mode) .sidebar a:hover,
body:not(.dark-mode) .sidebar .active a {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark-mode) .sidebar-nav li.active a *,
body:not(.dark-mode) .sidebar-nav li a:hover *,
body:not(.dark-mode) .sidebar ul li.active a *,
body:not(.dark-mode) .sidebar ul li a:hover *,
body:not(.dark-mode) .sidebar a:hover *,
body:not(.dark-mode) .sidebar .active a * {
  color: #0f172a !important;
}

/* Footer links hover */
body:not(.dark-mode) .footer a:hover,
body:not(.dark-mode) footer.footer a:hover {
  color: #4f46e5 !important; /* Premium brand indigo */
}

/* Search bar inside navbar */
body:not(.dark-mode) .search-bar input {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .search-bar input::placeholder {
  color: #64748b !important;
}

/* Outline and secondary buttons inside light navbar/sidebar */
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn,
body:not(.dark-mode) .navbar .outline-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn:hover,
body:not(.dark-mode) .navbar .outline-btn:hover {
  background-color: #f1f5f9 !important;
}


/* ==========================================
   2. DARK MODE SPECIFIC (body.dark-mode)
   ========================================== */
body.dark-mode .navbar,
body.dark-mode header.navbar,
body.dark-mode nav.navbar,
body.dark-mode .sidebar,
body.dark-mode aside.sidebar,
body.dark-mode .footer,
body.dark-mode footer.footer {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Ensure text, icons, links inside these components are light */
body.dark-mode .navbar *,
body.dark-mode header.navbar *,
body.dark-mode nav.navbar *,
body.dark-mode .sidebar *,
body.dark-mode aside.sidebar *,
body.dark-mode .footer *,
body.dark-mode footer.footer * {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Titles and major headings */
body.dark-mode .navbar .logo,
body.dark-mode .sidebar .sidebar-brand,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar .brand-text,
body.dark-mode .footer h2,
body.dark-mode .footer h3,
body.dark-mode .footer-logo {
  color: #ffffff !important;
}

/* Sidebar navigation links */
body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar ul li a,
body.dark-mode .sidebar a {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* Sidebar active link and hover states */
body.dark-mode .sidebar-nav li.active a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar ul li.active a,
body.dark-mode .sidebar ul li a:hover,
body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar .active a {
  background-color: #1e293b !important; /* slate-800 */
  color: #ffffff !important;
}

body.dark-mode .sidebar-nav li.active a *,
body.dark-mode .sidebar-nav li a:hover *,
body.dark-mode .sidebar ul li.active a *,
body.dark-mode .sidebar ul li a:hover *,
body.dark-mode .sidebar a:hover *,
body.dark-mode .sidebar .active a * {
  color: #ffffff !important;
}

/* Footer links hover */
body.dark-mode .footer a:hover,
body.dark-mode footer.footer a:hover {
  color: #818cf8 !important; /* Indigo-400 */
}

/* Search bar inside navbar */
body.dark-mode .search-bar input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}
body.dark-mode .search-bar input::placeholder {
  color: #475569 !important;
}

/* Secondary/outline buttons in dark navbar */
body.dark-mode .navbar .nav-btn.outline-nav-btn,
body.dark-mode .navbar .outline-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
body.dark-mode .navbar .nav-btn.outline-nav-btn:hover,
body.dark-mode .navbar .outline-btn:hover {
  background-color: #0f172a !important;
}


/* ==========================================
   3. THEME TOGGLE BUTTON STYLING (GLOBAL)
   ========================================== */
.theme-toggle,
#darkModeToggle,
#theme-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .theme-toggle,
body:not(.dark-mode) #darkModeToggle,
body:not(.dark-mode) #theme-toggle {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .theme-toggle:hover,
body:not(.dark-mode) #darkModeToggle:hover,
body:not(.dark-mode) #theme-toggle:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  transform: scale(1.05);
}

body.dark-mode .theme-toggle,
body.dark-mode #darkModeToggle,
body.dark-mode #theme-toggle {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode #darkModeToggle:hover,
body.dark-mode #theme-toggle:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
  transform: scale(1.05);
}

/* Floating theme toggle button (for pages without navbar/sidebar) */
.theme-toggle-floating {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
body.dark-mode .theme-toggle-floating {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Sidebar list item toggle button */
.sidebar .theme-toggle-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: calc(100% - 32px) !important;
  margin: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: none !important;
  background-color: transparent !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar {
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
}
/* ============================================================
   THEME STYLING OVERRIDES
   Navbar, Sidebar, and Footer theme colors:
   - Light Mode: White background, dark text/icons
   - Dark Mode: Black background, light/white text/icons
   ============================================================ */

/* ==========================================
   1. LIGHT MODE SPECIFIC (body:not(.dark-mode))
   ========================================== */
body:not(.dark-mode) .navbar,
body:not(.dark-mode) header.navbar,
body:not(.dark-mode) nav.navbar,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar,
body:not(.dark-mode) .footer,
body:not(.dark-mode) footer.footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Ensure text, icons, links inside these components are dark */
body:not(.dark-mode) .navbar *,
body:not(.dark-mode) header.navbar *,
body:not(.dark-mode) nav.navbar *,
body:not(.dark-mode) .sidebar *,
body:not(.dark-mode) aside.sidebar *,
body:not(.dark-mode) .footer *,
body:not(.dark-mode) footer.footer * {
  color: #334155 !important;
}

/* Titles and major headings */
body:not(.dark-mode) .navbar .logo,
body:not(.dark-mode) .sidebar .sidebar-brand,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar .brand-text,
body:not(.dark-mode) .footer h2,
body:not(.dark-mode) .footer h3,
body:not(.dark-mode) .footer-logo {
  color: #0f172a !important;
}

/* Sidebar navigation links */
body:not(.dark-mode) .sidebar-nav li a,
body:not(.dark-mode) .sidebar ul li a,
body:not(.dark-mode) .sidebar a {
  background: transparent !important;
  color: #475569 !important;
}

/* Sidebar active link and hover states */
body:not(.dark-mode) .sidebar-nav li.active a,
body:not(.dark-mode) .sidebar-nav li a:hover,
body:not(.dark-mode) .sidebar ul li.active a,
body:not(.dark-mode) .sidebar ul li a:hover,
body:not(.dark-mode) .sidebar a:hover,
body:not(.dark-mode) .sidebar .active a {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark-mode) .sidebar-nav li.active a *,
body:not(.dark-mode) .sidebar-nav li a:hover *,
body:not(.dark-mode) .sidebar ul li.active a *,
body:not(.dark-mode) .sidebar ul li a:hover *,
body:not(.dark-mode) .sidebar a:hover *,
body:not(.dark-mode) .sidebar .active a * {
  color: #0f172a !important;
}

/* Footer links hover */
body:not(.dark-mode) .footer a:hover,
body:not(.dark-mode) footer.footer a:hover {
  color: #4f46e5 !important; /* Premium brand indigo */
}

/* Search bar inside navbar */
body:not(.dark-mode) .search-bar input {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .search-bar input::placeholder {
  color: #64748b !important;
}

/* Outline and secondary buttons inside light navbar/sidebar */
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn,
body:not(.dark-mode) .navbar .outline-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn:hover,
body:not(.dark-mode) .navbar .outline-btn:hover {
  background-color: #f1f5f9 !important;
}


/* ==========================================
   2. DARK MODE SPECIFIC (body.dark-mode)
   ========================================== */
body.dark-mode .navbar,
body.dark-mode header.navbar,
body.dark-mode nav.navbar,
body.dark-mode .sidebar,
body.dark-mode aside.sidebar,
body.dark-mode .footer,
body.dark-mode footer.footer {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Ensure text, icons, links inside these components are light */
body.dark-mode .navbar *,
body.dark-mode header.navbar *,
body.dark-mode nav.navbar *,
body.dark-mode .sidebar *,
body.dark-mode aside.sidebar *,
body.dark-mode .footer *,
body.dark-mode footer.footer * {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Titles and major headings */
body.dark-mode .navbar .logo,
body.dark-mode .sidebar .sidebar-brand,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar .brand-text,
body.dark-mode .footer h2,
body.dark-mode .footer h3,
body.dark-mode .footer-logo {
  color: #ffffff !important;
}

/* Sidebar navigation links */
body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar ul li a,
body.dark-mode .sidebar a {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* Sidebar active link and hover states */
body.dark-mode .sidebar-nav li.active a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar ul li.active a,
body.dark-mode .sidebar ul li a:hover,
body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar .active a {
  background-color: #1e293b !important; /* slate-800 */
  color: #ffffff !important;
}

body.dark-mode .sidebar-nav li.active a *,
body.dark-mode .sidebar-nav li a:hover *,
body.dark-mode .sidebar ul li.active a *,
body.dark-mode .sidebar ul li a:hover *,
body.dark-mode .sidebar a:hover *,
body.dark-mode .sidebar .active a * {
  color: #ffffff !important;
}

/* Footer links hover */
body.dark-mode .footer a:hover,
body.dark-mode footer.footer a:hover {
  color: #818cf8 !important; /* Indigo-400 */
}

/* Search bar inside navbar */
body.dark-mode .search-bar input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}
body.dark-mode .search-bar input::placeholder {
  color: #475569 !important;
}

/* Secondary/outline buttons in dark navbar */
body.dark-mode .navbar .nav-btn.outline-nav-btn,
body.dark-mode .navbar .outline-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
body.dark-mode .navbar .nav-btn.outline-nav-btn:hover,
body.dark-mode .navbar .outline-btn:hover {
  background-color: #0f172a !important;
}


/* ==========================================
   3. THEME TOGGLE BUTTON STYLING (GLOBAL)
   ========================================== */
.theme-toggle,
#darkModeToggle,
#theme-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .theme-toggle,
body:not(.dark-mode) #darkModeToggle,
body:not(.dark-mode) #theme-toggle {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .theme-toggle:hover,
body:not(.dark-mode) #darkModeToggle:hover,
body:not(.dark-mode) #theme-toggle:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  transform: scale(1.05);
}

body.dark-mode .theme-toggle,
body.dark-mode #darkModeToggle,
body.dark-mode #theme-toggle {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode #darkModeToggle:hover,
body.dark-mode #theme-toggle:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
  transform: scale(1.05);
}

/* Floating theme toggle button (for pages without navbar/sidebar) */
.theme-toggle-floating {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
body.dark-mode .theme-toggle-floating {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Sidebar list item toggle button */
.sidebar .theme-toggle-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: calc(100% - 32px) !important;
  margin: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: none !important;
  background-color: transparent !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar {
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
}