/* Main content links: black color, underline on hover, arrow symbols */
main a {
    color: #222939 !important; /* Black color for all main content links */
    text-decoration: none;
    transition: text-decoration 0.15s ease;
}

main a:hover {
    text-decoration: underline;
}

/* Navigation sidebar links maintain gray color */
.nav-link {
    color: #4b5563 !important; /* Keep sidebar navigation links gray */
}

.nav-link.active,
.nav-link:hover {
    color: #222939 !important; /* Primary color on hover/active */
}

/* Blue card styling for "如何更好地拥抱 AI Coding" section */
/* Lightened background and text colors */
.card-blue {
    background-color: #F0F6FE; /* Specific light blue */
    border: none; /* No border */
    /* Set text color for elements within the card */
}
.card-blue h5,
.card-blue p {
    color: #20293A; /* Specific dark text color */
}


/* Red card styling for "避免常见陷阱" section */
/* Lightened background and text colors */
.card-red {
    background-color: #FEF0F0; /* Specific light pink */
    border: none; /* No border */
    /* Set text color for elements within the card */
}
.card-red h5,
.card-red p {
     color: #20293A; /* Specific dark text color */
}

/* Minimalist design styles - Clean, professional approach */

/* Active navigation state with subtle highlighting */
.nav-link.active {
    background-color: #f3f4f6;
    color: #222939;
    font-weight: 600;
}

/* Smooth scroll behavior for supported browsers */
html {
    scroll-behavior: smooth;
}

/* Clean scrollbar styling for sidebar */
#sidebar::-webkit-scrollbar {
    width: 4px;
}

#sidebar::-webkit-scrollbar-track {
    background: #f9fafb;
}

#sidebar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Fixed Reading Progress at bottom of sidebar */
#sidebar {
    display: flex;
    flex-direction: column;
}

#sidebar .p-6:first-child {
    flex: 1;
    overflow-y: auto;
}

#sidebar .sidebar-progress {
    flex-shrink: 0;
    background-color: white;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* Minimalist table styles */
table {
    border-collapse: separate;
    border-spacing: 0;
}

table th:first-child {
    border-top-left-radius: 8px;
}

table th:last-child {
    border-top-right-radius: 8px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:hover {
    background-color: #f9fafb;
}

/* Solid color design */
.text-primary {
    color: #222939 !important;
}

.bg-primary {
    background-color: #222939 !important;
}

/* Minimal navigation transitions */
.nav-link {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Progress bar without excessive animations */
#progress-bar {
    transition: width 0.3s ease-out;
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #progress-bar {
        transition: none;
    }
}

/* Clean print styles */
@media print {
    #sidebar {
        display: none;
    }

    main {
        margin-left: 0;
    }

    .sidebar-progress {
        display: none !important;
    }
}

/* Accessible focus styles */
.nav-link:focus {
    outline: 2px solid #222939;
    outline-offset: 2px;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    color: #222939;
}

/* Clean section spacing */
section {
    margin-bottom: 4rem;
}

/* Simple card styling */
.bg-white {
    background-color: white;
}

/* Consistent rounded corners */
.rounded-lg {
    border-radius: 0.5rem;
}

/* Clean, professional typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

/* Minimal interactive element styling */
button, .btn {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Clean form elements */
input, textarea, select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Start: Responsive adjustments for sidebar and main content alignment --- */
/* Default state (mobile first): Sidebar is hidden, main content is full width */
#sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    left: 0;
}

#sidebar.open {
    transform: translateX(0);
}

main {
    margin-left: 0; /* Main content takes full width by default */
}

/* Desktop/Tablet state: Sidebar is visible, main content has left margin */
@media (min-width: 768px) {
    #sidebar {
        transform: translateX(0); /* Sidebar visible */
        position: fixed; /* Keep sidebar fixed on larger screens */
        left: 0;
    }

    main {
        margin-left: 16rem; /* Add margin to main content equal to sidebar width (w-64 is 16rem) */
    }

    /* --- Modification: Adjust header left padding to align with main content --- */
    /* Target the inner div within the header that contains the title and logo */
    .header-aligned {
        padding-left: 25px; /* Add 25px left padding for header alignment */
    }
    /* --- End: Modification --- */
}
/* --- End: Responsive adjustments --- */

/* Clean color palette */
.bg-gray-50 { background-color: #f9fafb; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-red-50 { background-color: #fef2f2; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-yellow-50 { background-color: #fefce8; }

/* Consistent border styling */
.border-gray-200 { border-color: #e5e7eb; }
.border-blue-200 { border-color: #bfdbfe; }
.border-red-200 { border-color: #fecaca; }
.border-green-200 { border-color: #dcfce7; }
.border-yellow-200 { border-color: #fef08a; }

/* Typography color consistency */
.text-blue-600 { color: #2563eb; }
.text-blue-500 { color: #3b82f6; }
.text-blue-400 { color: #60a5fa; }
.text-red-600 { color: #dc2626; }
.text-red-500 { color: #ef4444; }
.text-red-400 { color: #f87171; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-700 { color: #a16207; }
.text-orange-500 { color: #f97316; }
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7c3aed; }
.text-pink-600 { color: #db2777; }
.text-pink-700 { color: #be185d; }
.text-gray-800 { color: #1f2937; }
.text-gray-700 { color: #4b5563; }
.text-gray-500 { color: #6b7280; }

/* Consistent shadow */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Typography weights */
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* Leading adjustments */
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }