/* Base Template CSS Variables & Custom Styles */
:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.75rem;
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    background-image: radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0);
    background-size: 1.5rem 1.5rem;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

html {
    scroll-behavior: smooth;
}

/* Header hide on scroll */
.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.header-visible {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

/* Sidebar adjustment when header is hidden */
.sidebar-top {
    top: 1rem !important;
    transition: top 0.3s ease-in-out;
}

.sidebar-normal {
    top: 6rem !important;
    transition: top 0.3s ease-in-out;
}

/* Left sidebar navigation styles */
.sidebar-section-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #3b82f6; /* 明亮的蓝色 */
    letter-spacing: 0.05em;
}

.sidebar-section-title svg {
    color: #f59e0b; /* 明亮的橙色图标 */
}

.sidebar-nav-item {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* 暗淡的灰色 */
}

.sidebar-nav-item:hover {
    color: hsl(var(--foreground));
}