/* static/css/styles.css */
/* --- Version 8: Definitive Final Version with Community Header Image Fix --- */

/* --- 1. THEME & COLOR DEFINITIONS (WITH HIGHER CONTRAST) --- */
:root {
    color-scheme: light dark;
    --primary-hue: 210;
    --accent-hue: 260;
    --radius: 16px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Light Theme */
:root {
    --bg-primary: #e0e5ec;
    --bg-input: #e0e5ec;
    --text-primary: #3d4a5c;
    --text-secondary: #5c6a7e;
    --accent-color: hsl(var(--accent-hue), 80%, 60%);
    --primary-gradient: linear-gradient(135deg, hsl(var(--primary-hue), 80%, 60%) 0%, hsl(var(--accent-hue), 80%, 65%) 100%);
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --border-color: #c8d0e7;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #20242e;
    --bg-input: #252934;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0c0;
    --accent-color: hsl(var(--accent-hue), 80%, 75%);
    --shadow-light: #2c3140;
    --shadow-dark: #14161c;
    --border-color: #353a4a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #20242e;
        --bg-input: #252934;
        --text-primary: #e0e0e0;
        --text-secondary: #a0a0c0;
        --accent-color: hsl(var(--accent-hue), 80%, 75%);
        --shadow-light: #2c3140;
        --shadow-dark: #14161c;
        --border-color: #353a4a;
    }
}


/* --- 2. GLOBAL STYLES & BASE ELEMENTS --- */
body {
    padding-top: 76px;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
}
span {
    color: #ae8cf2;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    color: var(--text-primary);
}

p, .lead, small {
    color: var(--text-secondary);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

.card {
    background: var(--bg-primary) !important;
    border-radius: var(--radius) !important;
    border: none !important;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light) !important;
    transition: var(--transition) !important;
     color: var(--text-primary);
}

.card:hover {
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light) !important;
}

.btn {
    border-radius: 25px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: var(--transition);
    border: none;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.btn:hover {
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}

.btn-success {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}

.btn-outline-success {
    background: transparent !important;
    color: var(--accent-color) !important;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light), inset 0 0 0 2px var(--accent-color);
}

.navbar {
    background: var(--bg-primary) !important;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light) !important;
    border: none !important;
}
.navbar-brand {
    display: flex;
    align-items: center;
}
.navbar .nav-link, .navbar .navbar-brand {
    color: var(--text-secondary) !important;
}
.navbar .nav-link:hover, .navbar .navbar-brand:hover {
    color: var(--text-primary) !important;
}

/* --- 3. FORM ELEMENTS --- */
.form-control, .form-select {
    border-radius: 10px !important;
    border: none !important;
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light) !important;
    padding: 0.75rem 1rem !important;
}
.form-control::placeholder {
    color: var(--text-secondary);
}

.search-form-wrapper {
    display: flex;
    flex-direction: column; /* Mobile-first: stack vertically */
    gap: 1rem;
    align-items: stretch; /* Stretch to fill width */
    background-color: var(--bg-primary);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}

/* --- 4. PAGE & COMPONENT SPECIFIC STYLES --- */

/* Community List Page */
.communities-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 2rem;
}

.community-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.community-card-content {
    background: transparent !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.community-card-image-wrapper {
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
}

.community-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-card-text {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.community-card-meta {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: auto;
    color: var(--text-secondary);
}

/* Community Detail Page */
.community-detail-header {
    padding: 2rem;
    color: #ffffff !important;
    background: var(--primary-gradient);
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    position: relative; /* Needed for positioning context */
    overflow: hidden; /* Prevents overflow issues */
}
.community-detail-header p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/*
  ******************************************************************
  * THIS IS THE RE-ADDED RULE THAT FIXES THE OVERSIZED IMAGE       *
  ******************************************************************
*/
.community-header-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0; /* Prevents the image from being squished */
}
/* End of fix */


.member-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.member-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Discussion List Page */
.discussion-list-item {
    background: var(--bg-primary);
    border-radius: var(--radius);
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    transition: var(--transition);
    padding: 1rem;
    display: flex;
    flex-direction: column; /* Mobile-first: stack avatar on top */
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.discussion-list-item:hover {
     box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.discussion-author-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.discussion-stats {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: space-around; /* Distribute stats evenly */
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color); /* Add separator */
}

.discussion-stats strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.2rem;
}

/* Chat & Discussions Detail View */
.chat-container {
    height: calc(100vh - 90px); /* Adjusted for mobile */
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

.message-bubble-wrapper {
    display: flex;
    margin-bottom: 1.5rem;
    max-width: 85%; /* Allow slightly wider bubbles on mobile */
    align-items: flex-end;
}

.message-bubble-wrapper.sent {
    margin-left: auto;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 0 0.5rem;
}

.message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 20px;
    word-wrap: break-word;
}

.message-bubble.sent {
    background: var(--primary-gradient);
    color: #ffffff;
    border-top-right-radius: 5px;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.message-bubble.received {
    background: var(--bg-input);
    border-top-left-radius: 5px;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    color: var(--text-primary);
}

.message-bubble img {
    max-width: 100%;
    max-height: 250px;
    border-radius: 15px;
    margin-top: 8px;
    display: block;
}

.chat-input-area {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    align-items: center; /* # CORRECTION: Add this line */
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    background-color: var(--bg-primary);
}

/* --- 5. RESPONSIVE STYLES --- */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .search-form-wrapper {
        flex-direction: row; /* Horizontal layout on tablets */
        align-items: center;
    }

    .communities-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
    }

    .discussion-list-item {
        flex-direction: row; /* Horizontal layout */
        align-items: center;
        padding: 1.5rem;
    }
    .discussion-stats {
        width: auto; /* Let it size naturally */
        border-top: none;
        padding-top: 0;
        margin-left: auto; /* Push to the right */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .communities-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns */
    }

    .chat-container {
        height: calc(100vh - 120px); /* Restore original height */
    }
}
.text-muted {
    color: var(--text-secondary) !important;
}
/* --- Neumorphic UI Enhancement --- */

/* 1. Base Card and Element Styling */
/* This rule targets all cards, the stats band, and other key elements */
.card, .stats-card, .trending-card, .search-form-wrapper {
    border-radius: 20px !important; /* Softer, more modern corners */
    background: var(--bg-primary) !important;
    border: none !important;
    /* The key neumorphic shadow effect */
    box-shadow: 8px 8px 16px var(--shadow-dark), 
                -8px -8px 16px var(--shadow-light) !important;
    transition: all 0.3s ease-in-out !important;
}

/* 2. Hover / "Pressed" Effect */
/* This creates the illusion of pressing the element into the page */
.card:hover, .stats-card:hover, .trending-card:hover {
    box-shadow: inset 6px 6px 12px var(--shadow-dark), 
                inset -6px -6px 12px var(--shadow-light) !important;
    transform: translateY(2px); /* Slight press-down movement */
}


/* 3. Button Styling */
/* Applies the same effect to buttons for consistency */
.btn {
    border-radius: 25px;
    font-weight: 600;
    border: none;
    box-shadow: 4px 4px 8px var(--shadow-dark), 
                -4px -4px 8px var(--shadow-light);
    transition: all 0.3s ease-in-out;
}

a.btn.btn-outline-dark.w-100.mb-3 {
    color: #a0a0c0;
}

.btn:hover {
    box-shadow: inset 2px 2px 4px var(--shadow-dark), 
                inset -2px -2px 4px var(--shadow-light);
    color: var(--text-primary);
}


/* 4. Form Input Styling */
/* Ensures form inputs also match the new aesthetic */
.form-control, .form-select {
    border-radius: 10px !important;
    border: none !important;
    background-color: var(--bg-primary) !important;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), 
                inset -4px -4px 8px var(--shadow-light) !important;
}
h1.display-4.fw-bold.mb-4 {
    font-weight: 800;
    text-shadow: -1px 3px 20px rgba(0, 0, 0, 0.3);
}

/* Fix for overlapping Edit Profile button on mobile */
@media (max-width: 767px) {
    .profile-actions {
        position: static; /* Removes absolute positioning */
        text-align: center; /* Centers the button */
        margin-top: 1rem; /* Adds some space above it */
    }
}
.dropdown {
    position: static;
}

@media (max-width: 768px) {
    .chat-input-area {
        /* Allows items to wrap onto the next line if there isn't enough space */
        flex-wrap: wrap;
    }

    .chat-input-area .flex-grow-1 {
        /* Ensures the text input takes the full width on its own line */
        flex-basis: 100%;
        margin-bottom: 0.5rem;
    }
}
.community-detail-header {
    overflow: visible !important;
}