html, body {
      height: 100%;
      font-family: 'Lato', sans-serif;
      background-color: #191a1b;
      color: #ddd;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    .bg-custom {
      background-color: #191a1b !important;
    }
    .navbar-brand span {
      color: #aaa !important;
    }
    .card {
      background-color: #101011;
      border: none;
    }
    .list-group-item {
      background-color: #101011;
      color: #ccc;
      border: none;
    }
    input.form-control {
      background-color: #101011;
      color: #ddd;
      border: 1px solid #252525;
    }
    input.form-control::placeholder {
      color: #999;
    }
    footer {
      margin-top: auto;
    }
    .footer-links a {
      color: #bbb;
      text-decoration: none;
      margin: 0 10px;
    }
    .footer-links a:hover {
      color: #fff;
      text-decoration: underline;
    }
    .text-lightwhite {
      color: rgba(255, 255, 255, 0.6) !important;
    }
    .code-block {
      position: relative;
    }

    .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      padding: 4px 10px;
      font-size: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #2d2d2d;
      color: white;
      cursor: pointer;
      transition: background-color 0.2s ease;
      z-index: 2;
    }

    .copy-btn:hover {
      background-color: #444;
    }
    /* Override the default GitHub dark colors */
    .hljs {
      background: #101011 !important; /* dark background */
      color: #e0e0e0 !important;      /* light text */
    }

    /* Change keyword color */
    .hljs-keyword {
      color: #ff9d00 !important;
    }

    /* Strings */
    .hljs-string {
      color: #9ccc65 !important;
    }

    /* Functions */
    .hljs-function {
      color: #64b5f6 !important;
    }
    .page-link {
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .page-item.active .page-link {
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      color: white !important;
    }

/* --- Blog Categories Sidebar Styling (Tag-based, dynamic colors) --- */

/* Main container for the tags */
.blog-categories-container {
    padding-top: 15px; /* Add some vertical padding above the tags */
    padding-bottom: 15px; /* Add some vertical padding below the tags */
    gap: 0.5rem; /* Bootstrap's gap utility: provides 8px space between items */
    /* 'd-flex flex-wrap' are applied in the HTML */
}

/* Base style for each category tag (the rounded rectangles) */
.blog-category-tag {
    /* Background and border are set via inline style in EJS using `cat.color` */
    /* This ensures they are border-only initially */

    /* Smaller size adjustments */
    padding: 6px 12px; /* Adjusted padding */
    font-size: 0.85rem; /* Slightly smaller font */

    color: #e0e0e0; /* Light text for non-filled state */
    border-radius: 20px; /* Highly rounded corners for pill shape */
    text-decoration: none; /* Remove underline from links */
    font-weight: 500; /* Medium font weight */
    white-space: nowrap; /* Prevent tag text from wrapping to multiple lines */
    cursor: pointer;

    display: inline-flex; /* Allows icon/text alignment */
    align-items: center; /* Vertically centers name and count */
    gap: 8px; /* Space between category name and count badge */

    transition: all 0.2s ease-in-out; /* Smooth transitions for hover effects */
}

/* Hover state: fill color */
.blog-category-tag:hover {
    background-color: var(--tag-color); /* Fill with the specific category color */
    color: #ffffff; /* White text when filled */
    filter: brightness(1.1); /* Subtle brightness to original color, as it's now filled */
    transform: translateY(-2px); /* Subtle lift */
    border-color: var(--tag-color); /* Ensure border matches filled color on hover */
}

/* Active Category Tag (like the "All" button in the picture) */
.blog-category-tag.active-blog-category {
    background-color: #007bff !important; /* Force primary blue for active tag */
    border-color: #007bff !important;     /* Force primary blue border */
    color: white !important; /* Ensure white text for active tag */
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); /* Subtle blue shadow for active state */
    filter: none; /* Remove brightness filter if it was applied from hover */
    transform: none; /* Remove transform if it was applied from hover */
}

/* Hover state for active tags (darker blue) */
.blog-category-tag.active-blog-category:hover {
    background-color: #0069d9 !important; /* Darker blue on hover for active */
    border-color: #0069d9 !important;
    color: white !important;
    filter: none; /* Ensure no brightness filter */
}

/* Category Count Badge (the circle next to the name) */
.blog-category-count {
    min-width: 26px; /* Adjust badge size to match smaller tags */
    height: 26px;
    display: flex; /* Flexbox to center text inside */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 0.75rem; /* Smaller font for the count */
    font-weight: bold;
    border-radius: 50%; /* Make it a perfect circle */

    /* Inactive Count Colors - these will work on top of the varying tag colors */
    background-color: rgba(255, 255, 255, 0.1); /* Very subtle translucent white fill for count initially */
    color: #e0e0e0 !important; /* Light text on count */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Keep a subtle border */

    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition for count on hover */
}

/* On hover of the tag, adjust count badge appearance */
.blog-category-tag:hover .blog-category-count {
    background-color: rgba(255, 255, 255, 0.25) !important; /* More prominent translucent white on tag hover */
    color: #ffffff !important; /* Ensure white text for count on hover */
}

/* Active Count Colors - inside the active tag */
.active-blog-category .blog-category-count {
    background-color: rgba(255, 255, 255, 0.3) !important; /* Semi-transparent white for active count */
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Text for "No categories available" message */
.blog-no-categories {
    padding: 6px 12px; /* Adjusted padding to match smaller tags */
    font-size: 0.85rem; /* Adjusted font size */
    color: #b0b0b0 !important; /* Muted color for this message */
}

/* General text colors (ensure these are defined globally if not already) */
.text-white {
    color: #ffffff !important;
}
.text-muted {
    color: #b0b0b0 !important;
}

        /* Pure CSS Dropdown Styles (now toggled by JS for better mobile support) */
        .css-dropdown {
            position: relative;
            display: inline-block; /* Allows side-by-side with other elements */
        }

        .css-dropdown-toggle {
           color: #b0b0b0 !important;
            transition: color 0.2s ease-in-out;
            cursor: pointer;
            text-decoration: none; /* Remove underline */
            display: inline-block; /* Ensure padding works */
            border-radius: 0.5rem; /* Rounded corners */
        }

        .css-dropdown-toggle:hover {
            color: #cbd5e0; /* Lighter on hover */
            background-color: #4a5568; /* Subtle background on hover */
        }

        .css-dropdown-menu {
            position: absolute;
            bottom: 100%; /* Position ABOVE the toggle */
            right: 0; /* Align to the right of the toggle */
            background-color: #2d3748; /* Dark dropdown background */
            border: 1px solid #4a5568; /* Darker border */
            border-radius: 0.5rem;
            padding: 0.5rem 0;
            min-width: 200px; /* Increased min-width to prevent squeezing */
            list-style: none; /* Remove bullet points */
            margin: 0 0 0.5rem 0; /* Spacing ABOVE the toggle */
            opacity: 0; /* Start hidden */
            visibility: hidden; /* Hide from screen readers when not visible */
            transform: translateY(10px); /* Slight animation effect, moves UPWARDS */
            transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out;
            z-index: 1000; /* Ensure it's above other content */
        }

        /* Show dropdown menu when parent has 'is-open' class */
        .css-dropdown.is-open .css-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0); /* Moves to its final position */
        }

        /* Styling for dropdown items */
        .css-dropdown-item {
            color: #e2e8f0; /* Light text for dropdown items */
            padding: 0.6rem 1rem; /* Adjusted padding for a slightly tighter look */
            display: flex;
            align-items: center;
            text-decoration: none; /* Remove underline */
            transition: background-color 0.2s ease-in-out;
            font-size: 0.9rem; /* Slightly smaller font size for dropdown items */
        }
        .css-dropdown-item:hover {
            background-color: #4a5568; /* Darker hover background */
            color: #f7fafc;
        }
        .css-dropdown-item i {
            width: 20px; /* Standardize icon spacing */
            text-align: center;
            margin-right: 0.6rem; /* Adjusted margin for icon */
        }