/*
  Custom CSS for Lyxios Website
  ---
  - Base Styles
  - Color Palette & Theming
  - Loader Animation
  - Navbar Styles
  - Footer Styles
  - Component Styles (Buttons, etc.)
  - Utility Classes
*/

@import url('theme.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/* Color Palette & Theming */
:root {
  --font-sans: 'Roboto', sans-serif;

  /* Default to dark theme */
  --bg-primary: var(--color-lyxios-green-950);
  --bg-secondary: var(--color-lyxios-green-900);
  --bg-tertiary: var(--color-lyxios-green-800);

  /* Light Accent for Dark Mode to ensure contrast */
  --accent-primary: var(--color-lyxios-green-500);
  --accent-primary-rgb: 90, 170, 112;

  --accent-secondary: var(--color-lyxios-green-400);

  --text-primary: var(--color-lyxios-green-50);
  --text-secondary: var(--color-lyxios-green-300);
  --text-on-accent: var(--color-lyxios-green-950); /* Dark text on light/medium accent */

  --home-bg-image: url('../../images/background.webp');
  --glass-bg: rgba(12, 24, 16, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  --bg-primary: var(--color-lyxios-green-950);
  --bg-secondary: var(--color-lyxios-green-900);
  --bg-tertiary: var(--color-lyxios-green-800);

  /* Light Accent for Dark Mode */
  --accent-primary: var(--color-lyxios-green-500);
  --accent-primary-rgb: 90, 170, 112;

  --accent-secondary: var(--color-lyxios-green-400);

  --text-primary: var(--color-lyxios-green-50);
  --text-secondary: var(--color-lyxios-green-300);
  --text-on-accent: var(--color-lyxios-green-950);

  --home-bg-image: url('../../images/background.webp');
  --hero-gradient: radial-gradient(circle at 50% 0%, var(--color-lyxios-green-800) 0%, var(--color-lyxios-green-950) 70%);

  --glass-bg: rgba(12, 24, 16, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
  --bg-primary: var(--color-lyxios-green-50);
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--color-lyxios-green-100);

  /* Dark Accent for Light Mode */
  --accent-primary: var(--color-lyxios-green-700);
  --accent-primary-rgb: 55, 106, 69;

  --accent-secondary: var(--color-lyxios-green-500);

  --text-primary: var(--color-lyxios-green-950);
  --text-secondary: var(--color-lyxios-green-700);
  --text-on-accent: #FFFFFF;

  --home-bg-image: url('../../images/background_clair.webp');
  --hero-gradient: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.05);
}

/* Base Styles */
body {
  cursor: auto;
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(var(--accent-primary-rgb), 0.08), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(var(--accent-primary-rgb), 0.08), transparent 25%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Home Page Background Override */
body.home-page {
    background-image: var(--home-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 5px;
  border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Selection Styling */
::selection {
  background: var(--accent-primary);
  color: #ffffff;
}

/* Utility Classes */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.bg-primary {
    background-color: var(--bg-primary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

/* Background utility for secondary background color (used by dropdowns) */
.bg-secondary {
    background-color: var(--bg-secondary);
}

.border-l-accent {
    border-left: 4px solid var(--accent-primary);
}

.border-bg-tertiary {
    border-color: var(--bg-tertiary);
}

.accent-primary {
    color: var(--accent-primary);
}

/* Loader Animation */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-lyxios-green-950); /* Always dark background for the loader */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 1;
  visibility: visible;
}

.loader-wrapper.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-lyxios-green-600);
  animation: bounce 1.2s cubic-bezier(0.2, 0.65, 0.5, 1) infinite;
}

.dot:nth-child(2) {
  background-color: var(--color-lyxios-green-500);
  animation-delay: -0.2s;
}

.dot:nth-child(3) {
  background-color: var(--color-lyxios-green-400);
  animation-delay: -0.4s;
}

.dot:nth-child(4) {
  background-color: var(--color-lyxios-green-600);
  animation-delay: -0.6s;
}

.dot:nth-child(5) {
  background-color: var(--color-lyxios-green-700);
  animation-delay: -0.8s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loader-text {
  color: var(--color-lyxios-green-400);
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  animation: pulse 2s infinite;
  text-transform: uppercase;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Component Styles */
.btn-primary {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%);
  background-size: 200% auto;
  color: var(--text-on-accent);
  font-weight: 600; /* Medium-bold font weight */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 0;
  z-index: 1;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -200%;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.btn-primary:hover {
  transform: scale(1.05);
  background-position: right center; /* change the direction of the change here */
  box-shadow: 0 0 20px var(--accent-secondary);
  color: var(--text-on-accent);
}

.btn-primary:hover::after {
    left: 100%;
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--accent-primary);
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  transform: scale(1.05);
}

/* Ensure child elements inside buttons have the correct color */
.btn-primary span,
.btn-primary i,
.btn-secondary span,
.btn-secondary i {
    color: inherit;
}

/* Back to top button */
.back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 1000;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.back-to-top-btn:hover {
  background-color: var(--accent-secondary);
  transform: translateY(-3px);
}

/* Section Styling */
.section-bg {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
}

.section-bg-secondary {
    background-color: var(--bg-primary);
    background-image: 
        radial-gradient(circle at 0% 75%, var(--bg-secondary) 0%, transparent 50%),
        radial-gradient(circle at 100% 25%, var(--bg-secondary) 0%, transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(var(--accent-primary-rgb), 0.07) 0%, transparent 60%);
}

/* Hero Gradient */
.gradient-bg-hero {
    background: var(--hero-gradient);
    background-size: 200% 200%;
    animation: animated-gradient 15s ease infinite;
    position: relative;
    overflow: hidden;
}

.gradient-bg-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

#home .particles-js-canvas-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@keyframes animated-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    transition: color 0.3s ease;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 1.5px;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p, span, li, a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-primary);
}

/* Lyxios Rainbow Title */
.lyxios-title {
    background: linear-gradient(to right, #E40303, #FF8C00, #FFED00, #008026, #004CFF, #732982, #E40303);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% auto;
    animation: rainbow 15s infinite linear;
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Navbar Styles */
.navbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
    background: var(--glass-bg);
}

[data-theme="light"] .navbar {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
}

.navbar.navbar-transparent {
    background: transparent !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.navbar a.text-2xl {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.nav-link {
    position: relative;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.dropdown-menu {
    position: absolute;
    z-index: 20;
    border: 1px solid var(--bg-tertiary);
    left: 50%;
    transform: translate(-50%, 10px); /* Start lower for slide-in effect */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: 0.5rem;
    padding: 0.25rem;
    white-space: nowrap; /* Prevent line breaks in links */
    min-width: 10rem; /* Ensure dropdown is wide enough */
}

.dropdown-menu.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Move to final position */
}

/* Disable underline animation for links inside the dropdown */
.dropdown-menu .nav-link::after {
    width: 0 !important;
}

.dropdown-menu a:hover {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border-radius: 0.375rem;
}

/* Ensure main nav link underline appears when hovering the container */
#doc-dropdown-container:hover > .nav-link::after,
#lang-selector-container:hover > .nav-link::after {
    width: 100%;
}

/* Ensure chevron rotates when dropdown is open */
#language-selector-btn:focus + #language-options,
#language-selector-btn:active + #language-options,
#language-options:not(.hidden) {
    display: block;
}

#language-selector-btn i {
    transition: transform 0.2s ease-in-out;
}

#lang-selector-container:hover #language-selector-btn i {
    transform: rotate(180deg);
}

#mobile-doc-dropdown .nav-link:hover::after {
    width: 0;
}

.mobile-dropdown-menu {
    display: none; /* Hidden by default */
}

.mobile-dropdown-menu.is-visible {
    display: block; /* Shown when active */
}


/* Mobile Nav */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
    margin-left: 1rem;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: var(--text-primary);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: rgba(12, 24, 16, 0.95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 49;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
}

.mobile-nav.open {
    right: 0;
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    .hamburger {
        display: flex;
    }
}

@media (min-width: 769px) {
    .mobile-nav {
        display: none;
    }
}

/* Footer Styles */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid rgba(121, 166, 130, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease;
    padding-bottom: 5rem; /* Add space for the back-to-top button */
}

[data-theme="dark"] .site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid rgba(121, 166, 130, 0.2);
}

[data-theme="light"] .site-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid rgba(44, 89, 57, 0.2);
}

.footer-link {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-primary);
}

.footer-divider {
    border-color: var(--bg-tertiary);
}

/* Glass Card Effect */
.glass-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--accent-primary);
    background: linear-gradient(145deg, var(--glass-bg) 0%, rgba(84, 171, 109, 0.1) 100%);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem;
    padding: 1px; /* border width */
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
       linear-gradient(#fff 0 0);
    mask:
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

[data-theme="light"] .glass-card {
    background: var(--glass-bg);
    border-color: rgba(0,0,0,0.05);
}

/* Card Icon Animations */
.glass-card .fas {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover .icon-discover {
    transform: rotate(360deg);
}

.glass-card:hover .icon-commands {
    animation: terminal-blink 1.2s infinite;
}

.glass-card:hover .icon-changelog {
    transform: scale(1.2);
}

.glass-card:hover .icon-team {
    transform: translateY(-5px) scale(1.1);
}

@keyframes terminal-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Hero Logo Hover */
#hero-logo {
    transition: all 0.3s ease-in-out;
}

#hero-logo:hover {
    transform: scale(1.05) rotate(2.5deg);
    box-shadow: 0 0 25px var(--color-lyxios-green-500), 0 0 40px var(--color-lyxios-green-900);
}

/* Scroll Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Language Switcher Transition */
[data-lang-key] {
    transition: opacity 0.2s ease-in-out;
}

[data-lang-key].lang-fade-out {
    opacity: 0;
}

/* New Changelog Styles */
.changelog-item {
    background-color: var(--bg-secondary);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.changelog-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-5px);
}

.toggle-button {
    cursor: pointer;
}

.toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.changelog-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.changelog-content > div {
    min-height: 0;
    transition: padding-top 0.4s ease-in-out;
}

.changelog-content.is-expanded {
    max-height: 5000px; /* Adjust if content is larger */
}

.changelog-content.is-expanded > div {
    padding-top: 1.5rem;
}

.toggle-icon.rotate-180 {
    transform: rotate(180deg);
}

.changelog-content ul {
    list-style-position: inside;
    padding-left: 0.5rem;
}

.changelog-content li span {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Standardized Search Input */
.search-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 9999px; /* pill shape */
    width: 100%;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 10px var(--accent-primary);
}

.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Module Page Styles */
.module-nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-align: left;
}

.module-nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.module-nav-link.active-link {
    color: var(--text-on-accent);
    background-color: var(--accent-primary);
    border-color: var(--accent-secondary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
    transform: translateY(-2px);
}
.module-nav-link.active-link .fas, .module-nav-link.active-link span {
    color: var(--text-on-accent);
}

.module-content {
    background-color: var(--bg-secondary);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--bg-tertiary);
    animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

code {
    background-color: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Fira Code', monospace;
    color: var(--accent-secondary);
    border: 1px solid var(--bg-primary);
}

@media (max-width: 768px) {
    #module-nav {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .module-nav-link {
        flex-grow: 1;
        justify-content: center;
    }
}

/* Documentation Page New Layout */
.doc-links-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.doc-link-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--bg-tertiary);
    transition: all 0.3s ease;
    text-align: left;
}

.doc-link-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    background-color: var(--bg-tertiary);
}

.doc-link-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    border-radius: 50%;
}

.doc-link-text h3 {
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .doc-link-item {
        flex-direction: column;
        text-align: center;
    }
}

/* Team Page Styles */
.border-accent {
    border-color: var(--accent-primary);
}

.social-link {
    color: var(--text-secondary);
    transition: color 0.3s ease;
    cursor: pointer;
}

.social-link:hover {
    color: var(--accent-primary);
}

/* General Mobile Responsiveness */
@media (max-width: 768px) {
    /* Adjust Typography */
    h1 {
        font-size: 2.5rem !important; /* Tailwind: text-4xl */
        line-height: 2.75rem !important;
    }
    h2 {
        font-size: 2rem !important; /* Between text-3xl and text-4xl */
        line-height: 2.5rem !important;
    }

    /* Adjust Section Padding */
    section.py-20 {
        padding-top: 4rem; /* Tailwind: py-16 */
        padding-bottom: 4rem; /* Tailwind: py-16 */
    }

    /* Hero Section Specifics */
    #home {
        min-height: 80vh;
    }
    #home h1 {
        font-size: 3rem !important; /* Tailwind: text-5xl */
    }
    #home p {
        font-size: 1.125rem !important; /* Tailwind: text-xl */
    }
    #home .flex-wrap.justify-center.gap-6 {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}
/* Image Fade-in Animation */
.img-loading {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.img-loaded {
    opacity: 1;
}

/* Global Loader Overrides (if needed) */
#global-gallery-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary); /* Or slightly transparent */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#global-gallery-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Dashboard Sidebar Scrollbar Styles */
.sidebar-scroll-container {
    direction: rtl; /* Déplace la barre de défilement sur le bord gauche */
    overflow-y: auto;
    margin-left: -1.5rem;
    padding-left: 1.5rem;
}

@supports (scrollbar-width: thin) {
    .sidebar-scroll-container {
        scrollbar-width: thin; /* Pour Firefox : barre fine */
        scrollbar-color: rgba(var(--accent-primary-rgb), 0.3) transparent; /* Pour Firefox */
    }
}

.sidebar-scroll-container > * {
    direction: ltr; /* Remet le contenu (texte, icônes) dans le sens de lecture normal */
}

/* Personnalisation de la scrollbar pour Webkit (Chrome, Safari, Edge) */
.sidebar-scroll-container::-webkit-scrollbar {
    width: 4px; /* Largeur très réduite pour la discrétion */
}

.sidebar-scroll-container::-webkit-scrollbar-track {
    background: transparent; /* Fond invisible pour coller au bord */
}

.sidebar-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-primary-rgb), 0.3); /* Couleur d'accentuation semi-transparente */
    border-radius: 10px;
    border: none;
}

.sidebar-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-primary-rgb), 0.6); /* Un peu plus visible au survol */
}

/* Status Indicator */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    transition: all 0.3s ease;
    position: relative;
    animation: pulse-status 2s infinite;
}

.status-online {
    --status-color: #22c55e;
    --status-shadow: rgba(34, 197, 94, 0.4);
    background-color: var(--status-color);
}

.status-offline {
    --status-color: #ef4444;
    --status-shadow: rgba(239, 68, 68, 0.4);
    background-color: var(--status-color);
}

.status-loading {
    --status-color: #fbbf24;
    --status-shadow: rgba(251, 191, 36, 0.4);
    background-color: var(--status-color);
    animation-duration: 1s;
}

@keyframes pulse-status {
    0% {
        box-shadow: 0 0 0 0 var(--status-shadow);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Dashboard Refresh Button */
#refresh-guilds {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    padding: 0;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.is-visible .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--accent-primary);
}

/* Form Styles inside Modal */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 300px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 4px solid var(--accent-primary);
}

.toast.is-visible {
    transform: translateX(0);
}

.toast-success {
    border-left-color: #22c55e;
}

.toast-error {
    border-left-color: #ef4444;
}

.toast-icon {
    font-size: 1.25rem;
}

.toast-success .toast-icon {
    color: #22c55e;
}

.toast-error .toast-icon {
    color: #ef4444;
}