:root {
    /* DARK MODE - High Contrast */
    --bg: #05070a; 
    --panel: #0f172a; 
    --card: #111827;
    --accent: #10b981; 
    --text: #ffffff;    /* Pure white text for black background */
    --dim: #94a3b8;     /* Bright grey for meta */
    --border: #1e293b;
}

/* Find your [data-theme="dark"] section in style.css */
[data-theme="dark"] {
    --bg: #05070a;      /* Deep Black */
    --panel: #111827;   /* Dark Gray for cards/nav */
    --text: #f9fafb;    /* Off-white for body text */
    --accent: #10b981;  /* Emerald Green (Very readable on black) */
    --dim: #94a3b8;     /* Muted blue-gray for "ENTRY_ID" */
    --border: #1f2937;  /* Subtle border */
}

[data-theme="light"] {
    /* LIGHT MODE - High Contrast Light Gray */
    --bg: #f1f5f9;      /* Light gray background */
    --panel: #cbd5e1;   /* Medium gray sidebar */
    --card: #ffffff;    /* Pure white cards */
    --accent: #065f46;  /* Very dark emerald for titles */
    --text: #020617;    /* Near-black text for gray background */
    --dim: #475569;     /* Deep slate for meta */
    --border: #94a3b8;  /* Visible border */
}

/* By default, hide the sun when we are in DARK mode */
/* Sun icon becomes a bright Gold */
[data-theme="dark"] .sun-icon { 
    color: #fbbf24; 
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4));
}

/* Moon icon becomes a soft Indigo */
[data-theme="dark"] .moon-icon { 
    color: #818cf8; 
}

/* Add these to your stylesheet to force the colors */

body, html {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

.card {
    position: relative;
    z-index: 10; /* Brings the card to the front */
    cursor: pointer; /* Makes it obvious it's clickable */
}

.card a {
    position: relative;
    z-index: 20; /* Ensures the link is above the card background */
    display: inline-block; /* Gives the link a physical 'hit box' */
}

.card h2 {
    color: var(--accent) !important; /* Forces the Title color */
}

.card p {
    color: var(--text) !important;   /* Forces the Body color */
}

.meta-info, .entry-number {
    color: var(--dim) !important;    /* Forces the Entry # color */
}

/* Apply variables to existing elements */
body {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Prevents the whole page from scrolling, only the columns scroll */
}

/* 1. Ensure the body doesn't trap the content */
body {
    display: flex;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-y: auto; /* Allow the whole page to scroll */
}

/* 2. Fix the Sidebar so it stays put while content moves */
aside {
    width: 280px;
    height: 100vh;
    position: sticky; /* Sticky is better than fixed for this layout */
    top: 0;
    flex-shrink: 0; /* Prevents sidebar from squishing */
    overflow-y: auto; /* In case the sidebar menu is too long */
    border-right: 1px solid var(--border);
}

/* 3. Let the Main content expand naturally */
main {
    flex-grow: 1;
    min-height: 100vh;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Let the content dictate the height */
}
/* If you have a decorative overlay for dark mode, make sure it ignores clicks */
#theme-overlay {
    pointer-events: none;
}

/* Entry Summary/Snippet */

/* Volume/Subject Labels */
.card .meta {
    color: var(--dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Search Bar Fix */
input#searchBar {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px;
    border-radius: 4px;
}

body { background: var(--bg); color: var(--text); transition: all 0.3s ease; }
aside { background: var(--panel); border-right: 1px solid var(--border); }

.terminal-header { background: var(--panel); border: 1px solid var(--border); }
.tag { background: var(--border); color: var(--dim); }

input { background: transparent; border: 1px solid var(--border); color: var(--text); }       

 /* Sidebar Navigation */
        aside { width: 280px; background: var(--panel); border-right: 1px solid #1e293b; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; overflow-y: auto; }
        .brand { font-weight: bold; color: var(--accent); letter-spacing: 2px; }
        
        /* Daily Wisdom Widget */
        .widget { var(--accent); padding: 15px; border-radius: 8px; border-left: 4px solid var(--v1); font-size: 0.85rem; }
        .widget label { color: var(--v1); font-size: 0.7rem; text-transform: uppercase; display: block; margin-bottom: 5px; }

        /* Main Content Area */
        main { flex: 1; overflow-y: auto; padding: 2rem; }
        .terminal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; background: #1e293b; padding: 1rem; border-radius: 8px; }
        .search-box input { background: transparent; border: 1px solid #334155; color: white; padding: 8px; border-radius: 4px; width: 300px; }

        /* Common Tags Cloud */
        .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
        .tag { font-size: 0.7rem; padding: 4px 8px; var(--accent); border-radius: 4px; color: var(--dim); cursor: pointer; text-decoration: none; }
        .tag:hover { color: var(--accent); }

        /* Grid & Cards */
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
        .card { var(--accent); border: 1px solid #1e293b; padding: 20px; border-radius: 4px; position: relative; }
        .card:hover { border-color: var(--accent); box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); }
        .vol-indicator { position: absolute; top: 0; left: 0; width: 4px; height: 100%; }

        /* UI Buttons */
        .btn { var(--accent); border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 0.8rem; }
        .btn-primary { background: var(--accent); color: var(--bg); font-weight: bold; }

/* Force links to stay the color YOU want */
.nav-back, .nav-back:visited {
    color: var(--accent) !important;
    text-decoration: none;
    transition: opacity 0.2s;
}

.nav-back:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.entry-pagination {
    display: flex;
    /* This pushes the first item to the left and the last to the right */
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
    .nav-btn span {
        display: none; /* Hides the text 'Previous/Next' on tiny screens */
    }
    .nav-btn::before {
        content: "Prev"; /* Shorter text for mobile */
    }
    /* Repeat for Next */
}

.nav-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* For Previous button */
}

.nav-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Align text to the left for the Previous button */
.nav-btn:first-child .nav-btn-text {
    align-items: flex-start;
}

/* Align text to the right for the Next button */
.nav-btn:last-child .nav-btn-text {
    align-items: flex-end;
    text-align: right;
}

.nav-btn-text small {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.nav-btn-text span {
    font-size: 1rem;
    font-weight: 600;
}

#searchInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); /* Soft glow using your accent color */
}

.card { border: 2px solid red !important; display: block !important; }

.share-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.logo-copy-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.logo-copy-btn img {
    width: 24px;
    height: 24px;
    filter: brightness(0.8); /* Matches the dim terminal look */
    transition: transform 0.2s;
}

.logo-copy-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.logo-copy-btn:hover img {
    filter: brightness(1.2) drop-shadow(0 0 5px var(--accent));
    transform: scale(1.1);
}

.logo-copy-btn span {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--dim);
}

.sticky-header-actions {
    position: sticky;
    top: 20px; /* Distance from the top of the viewport */
    z-index: 100;
    display: flex;
    justify-content: flex-end; /* Pushes button to the right */
    pointer-events: none; /* Prevents the container from blocking clicks on text behind it */
    margin-bottom: -40px; /* Pulls the content back up so the button "floats" over it */
}

.logo-copy-btn {
    pointer-events: auto; /* Re-enables clicks for the button specifically */
    background: rgba(10, 10, 15, 0.8); /* Semi-transparent terminal dark */
    backdrop-filter: blur(5px); /* Professional frosted glass effect */
    border: 1px solid var(--border);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.logo-copy-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}