@import url('https://fonts.bunny.net/css?family=albert-sans:400,400i');

:root {
    --color-light: #dddddd;
    --color-dark: #444444;
    --color-red: #ff0000;
    --font-main: 'Albert Sans', sans-serif;
}

* {
    box-sizing: border-box;
    text-transform: lowercase;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--color-light);
    color: var(--color-dark);
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 250px;
    padding: 2rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Changed from space-between */
    gap: 1rem;
    /* Space between title and nav */
    height: 100vh;
    position: sticky;
    top: 0;
}

.site-title a {
    color: var(--color-red);
    text-decoration: none;
    font-size: 1rem;
    /* 1em size */
    display: block;
    margin-bottom: 0;
    /* Handled by gap */
    font-weight: normal;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: auto;
    /* Pushes colophon down if needed, or remove if colophon should be just below */
}

/* User asked for menu just under title logo. I'll remove margin-bottom: auto if they want it tighter. 
   "place the menu not in the middle... but just under the title logo" -> implied closer grouping. 
   Colophon "should always be there", typically at bottom, but user didn't specify position relative to menu, 
   just that menu moves up. I'll keep colophon at bottom with margin-top: auto on the nav-links or spacer.
*/

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-spacer {
    flex-grow: 1;
    /* Pushes colophon to bottom */
}

.nav-links a {
    color: var(--color-red);
    text-decoration: underline;
    font-size: 1rem;
    /* 1em size */
    cursor: pointer;
}

.nav-links a:hover {
    text-decoration: none;
}

.colophon {
    font-size: 0.8em;
    /* 1em size */
    color: var(--color-red);
}

/* Main Content */
.main-content {
    flex-grow: 1;
    padding: 2rem;
    padding-left: 0;
    /* Ensure main content doesn't overflow horizontally causing scroll on body */
    min-width: 0;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: flex-start;
    /* Ensure height matches sidebar title area if possible, though visual alignment is key */
}

.filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    margin-right: 1rem;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    /* Padding right to ensure last item is readable before fade */
    padding-right: 2rem;
    flex: 1;
    min-width: 0;
}

.sort-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
    /* Prevent sorting options from shrinking/wrapping */
}

/* Hide scrollbar for clean look but allow functionality */
.filters::-webkit-scrollbar {
    display: none;
}

.filters {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.filter-label,
.sort-label {
    color: var(--color-red);
    margin-right: 0.5rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.filter-btn,
.sort-btn {
    background: none;
    border: none;
    color: var(--color-red);
    font-family: var(--font-main);
    font-size: 1rem;
    /* 1em */
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    /* Removed underline default */
    flex-shrink: 0;
}

.filter-btn:hover,
.sort-btn:hover {
    text-decoration: underline;
}

.filter-btn.active,
.sort-btn.active {
    text-decoration: underline;
    /* Only active has underline */
}

/* Grid */
.pdf-grid {
    display: grid;
    /* Reduced minmax to 150px to fit 5-6 items on standard screens */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 3rem 2rem;
}

.pdf-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.pdf-cover-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.pdf-link {
    background: white;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    /* margin-bottom moved to container */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    text-decoration: none;
}

.pdf-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.pdf-link:hover .pdf-cover {
    opacity: 1;
}

/* Default Cover (Text based) */
.default-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    /* Align Top */
    justify-content: flex-start;
    /* Align Left */
    padding: 1.5rem;
    /* Nice padding */
    text-align: left;
    font-size: 1rem;
    /* Adjusted to 1rem per request */
    color: var(--color-dark);
    background: white;
    word-break: break-word;
    transition: opacity 0.3s ease;
}

.pdf-link:hover .default-cover {
    color: var(--color-red);
    /* Optional: user didn't specify hover for text cover, but consistency is good */
}


.pdf-info {
    border-bottom: 1px solid transparent;
}

.pdf-title {
    font-size: 1rem;
    /* 1em */
    margin: 0;
    text-decoration: underline;
    text-decoration-color: var(--color-red);
    /* Always Red underline */
    transition: none;
    /* Removed transition as requested constant style */
    font-weight: normal;
    /* Normal weight */
}

.pdf-tile:hover .pdf-title {
    text-decoration-color: var(--color-red);
    /* Stay red on hover */
}

.pdf-author {
    font-size: 1rem;
    /* 1em */
    margin: 0.2rem 0 0 0;
}

h1,
h2,
h3 {
    font-size: 1rem;
    /* Global 1em size request */
    font-weight: normal;
}

/* Specific fix for page title alignment (submit, about, admin) to match sidebar logo */
.page-title {
    margin-top: 0;
    /* Reset negative margin as user said it was too high */
    margin-bottom: 2rem;
    color: var(--color-red) !important;
    font-size: 1rem !important;
    line-height: inherit;
    /* Inherit global line-height to match sidebar logo */
}

/* Forms */
.submit-container,
.admin-container,
.about-container {
    max-width: 600px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--color-dark);
    background: transparent;
    font-family: var(--font-main);
    color: var(--color-dark);
    font-size: 1rem;
}

.btn-submit {
    background: var(--color-light);
    /* Normal bg */
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    /* 1px dark border */
    padding: 1rem 2rem;
    font-family: var(--font-main);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background: var(--color-red);
    /* Red on hover */
    color: white;
    border-color: var(--color-red);
}

/* Mobile */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        padding: 1rem;
        position: relative;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid var(--color-dark);
    }

    .site-title a {
        margin-bottom: 2em;
    }

    .nav-links {
        flex-direction: row;
        gap: 1em;
        margin-left: auto;
        /* Push nav to right on mobile header */
    }

    .sidebar-spacer {
        display: none;
    }

    .colophon {
        display: none;
    }

    .main-content {
        padding: 1rem;
    }

    /* Mobile custom for Top Bar stacking */
    .top-bar {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .filters {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        /* User wants filter bar ABOVE sorting. 
           In HTML, Filters come first, then Sorting. 
           So column direction works naturally (Filters top, Sort bottom). 
        */
    }

    .sort-options {
        width: 100%;
        flex-wrap: wrap;
        /* Allow sorting options to wrap if needed on very small screens */
    }
}

/* === Core Updates === */
/* Remove bold globally */
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6,
th {
    font-weight: normal;
}

/* Accent emphasis class */
.accent {
    color: var(--color-red);
}

/* Notification / Alert Styles */
.alert-box {
    background-color: var(--color-light);
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.alert-box.success {
    border-color: var(--color-dark);
    /* Keep consistent or use red if desired? User asked for theme colors. Regular border is fine. */
}

.alert-box::before {
    /* Optional: minimal marker */
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-red);
    margin-right: 0.5rem;
}

/* === Admin Styles (Moved from Inline) === */
.admin-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-menu-link {
    font-size: 1rem;
    color: var(--color-dark);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    width: 200px;
    /* Or auto */
}

.admin-menu-link:hover,
.admin-menu-link.active {
    text-decoration: underline;
    text-decoration-color: var(--color-red);
    color: var(--color-dark);
    /* Keep text dark, underline red? Or text red? User said "same style as buttons... light/dark + red accent" */
}

.admin-menu-link:hover {
    color: var(--color-red);
}

.admin-section {
    margin-bottom: 3rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1rem;
}

.admin-table th,
.admin-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-dark);
    font-weight: normal;
}

.admin-table th {
    color: var(--color-red);
}

.admin-top-bar {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-dark);
    padding-bottom: 1rem;
}

.admin-back-link {
    text-decoration: none;
    color: var(--color-dark);
}

.admin-back-link:hover {
    color: var(--color-red);
}

.admin-message-card {
    border: 1px solid var(--color-dark);
    padding: 1rem;
    margin-bottom: 1rem;
}

.admin-message-card.unread {
    border-left: 5px solid var(--color-red);
}

.admin-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.admin-tag-item {
    border: 1px solid var(--color-dark);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todo-item {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todo-item.priority {
    /* font-weight: bold; REMOVED per request */
    color: var(--color-red);
    /* Maybe underline for priority? */
    text-decoration: underline;
    text-decoration-color: var(--color-red);
}

.btn-icon {
    background: none;
    border: 1px solid var(--color-dark);
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    color: var(--color-dark);
    font-size: 0.8rem;
    padding: 0;
}

.btn-icon:hover {
    background: var(--color-red);
    color: var(--color-light);
    border-color: var(--color-red);
}

.btn-text {
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    color: var(--color-dark);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.btn-text:hover {
    color: var(--color-red);
}

.btn-text.accent {
    color: var(--color-red);
}

/* PDF Tile Hover Actions */
.pdf-cover-container {
    position: relative;
    border: 1px solid var(--color-red);
}

.pdf-hover-actions {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    /* Let clicks pass through if hidden */
}

.pdf-cover-container:hover .pdf-hover-actions {
    opacity: 1;
    pointer-events: auto;
}

.hover-btn {
    background: var(--color-light);
    border: 1px solid var(--color-dark);
    color: var(--color-dark);
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.hover-btn:hover {
    background: var(--color-red);
    color: var(--color-light);
    border-color: var(--color-red);
}