:root {
    --primary: #FF4500;
    --primary-hover: #FF5722;
    --bg-primary: #DAE0E6;
    --bg-card: #FFFFFF;
    --text-primary: #1A1A1B;
    --text-secondary: #7C7C7C;
    --border: #CCCCCC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navbar */
.navbar {
    background: white;
    padding: 0.5rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.logo { 
    font-weight: 700; color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 1.2rem;
}
.logo-circle {
    background: var(--primary); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* === NEW LAYOUT GRID === */
.layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar is 280px, Content is rest */
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Sidebar Styles */
.sidebar {
    background: white;
    border-radius: 4px;
    padding: 20px 10px;
    height: fit-content;
    border: 1px solid var(--border);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

.sidebar-header h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* The Teacher Plus Button */
.circle-plus-btn {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.circle-plus-btn:hover { background: var(--primary-hover); }

/* Sidebar List */
.sub-list { list-style: none; }

.sub-item {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-weight: 500;
}
.sub-item:hover { background-color: #f6f7f8; }
.sub-item.active { background-color: #e3edfa; color: #0079D3; }

/* The Teacher Delete X */
.delete-sub-x {
    color: #ff0000;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.5;
    font-size: 0.9rem;
}
.delete-sub-x:hover { opacity: 1; background: #ffebeb; border-radius: 3px; }

/* Main Content Area */
.main-content { min-width: 0; }

.action-bar {
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid var(--border);
    display: flex;
}
.create-input {
    background: #F6F7F8;
    border: 1px solid var(--border);
    flex-grow: 1;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
}
.create-input:hover { background: white; border-color: var(--primary); }

/* Post Cards (Same as before) */
.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 10px;
}

/* Clickable Post Cards */
.clickable-card {
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
}
.clickable-card:hover {
    border-color: #898989;
    background-color: #ffffff; /* Explicit white to prevent transparency issues */
}
.clickable-card:active {
    transform: scale(0.995);
}

/* Delete Icon on Feed */
.delete-icon {
    color: red;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 5px;
}
.delete-icon:hover { background: #ffebeb; border-radius: 4px; }

/* Large View Post Modal */
.large-modal {
    width: 90%;
    max-width: 800px;
    height: 85vh; /* Takes up most of screen height */
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove padding from container to let header stretch */
}





.post-header { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; display: flex; gap: 5px; }
.post-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; }
.post-image { max-width: 100%; border-radius: 4px; margin-top: 10px; }
.post-footer { display: flex; align-items: center; gap: 15px; margin-top: 8px; font-weight: bold; color: var(--text-secondary); font-size: 0.9rem; }
.vote-btn { background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; }

/* Modals */
.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1000;
    align-items: center; justify-content: center;
}
.modal.active { display: flex; }
.modal-content { background: white; padding: 20px; border-radius: 5px; width: 90%; max-width: 500px; }

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 5px 5px 0 0;
}

.view-post-scroll-area {
    padding: 20px;
    overflow-y: auto; /* Enables scrolling for long posts/comments */
    flex-grow: 1;
}

.view-post-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.view-post-img {
    max-width: 100%;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px solid #eee;
}

.view-post-link {
    display: block;
    padding: 10px;
    background: #f0f7ff;
    border: 1px solid #cce5ff;
    border-radius: 4px;
    color: #0079D3;
    text-decoration: none;
    margin: 10px 0;
}
.view-post-link:hover { text-decoration: underline; }

/* Back Button */
.back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}
.back-btn:hover { color: var(--primary); text-decoration: underline; }

/* Full Page Post Style */
.full-post-card {
    background: white;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-height: 80vh; /* Takes up substantial screen space */
}

.detail-title {
    font-size: 1.6rem;
    margin: 10px 0 20px 0;
}

.detail-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #1a1a1b;
    margin-bottom: 20px;
}

.detail-img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
    max-height: 600px;
    object-fit: contain;
    background: #f8f8f8;
}

.detail-link {
    display: inline-block;
    padding: 12px 16px;
    background: #f0f7ff;
    border: 1px solid #cce5ff;
    border-radius: 4px;
    color: #0079D3;
    text-decoration: none;
    margin-bottom: 20px;
}

.divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}



/* --- IMAGES (Fixes the "Too Large" issue) --- */
.post-image, .detail-img {
    max-width: 100%;       /* Ensures it never exceeds the container width */
    height: auto;          /* Maintains the aspect ratio */
    border-radius: 4px;
    display: block;
    margin-top: 10px;
    object-fit: contain;   /* Ensures the whole image is visible */
    max-height: 600px;     /* Prevents extremely tall images from taking over */
}

/* --- VOTING COLORS --- */
.vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #878A8C;        /* Default Grey */
    padding: 2px 8px;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.vote-btn:hover { background-color: rgba(0,0,0,0.05); }

/* Reddit Orange for Upvote */
.vote-btn.up.active { color: #FF4500; font-weight: bold; }

/* Reddit Blue for Downvote */
.vote-btn.down.active { color: #7193FF; font-weight: bold; }

.score-text {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    color: #1A1A1B;
}




/* Comments */
.comment-box {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}

.small-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
}



.close-modal-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #555; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.submit-btn { width: 100%; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 20px; font-weight: bold; cursor: pointer; }
.google-btn { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid #ccc; background: white; border-radius: 20px; cursor: pointer; }

/* Sort Buttons */
.sort-btn, .view-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.sort-btn:hover, .view-btn:hover { background: #f0f0f0; }
.sort-btn.active, .view-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}