/* forum.css */

/* --- CSS Variables (Colors) --- */
:root {
    --color-background-body: #e9ebed;
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-muted: #666;
    --color-text-light: #777;
    --color-text-meta: #607d8b;
    --color-text-heading: #2c3e50;
    --color-text-subheading: #34495e;
    --color-link-primary: #2980b9; /* A suitable blue for tags */
    --color-link-hover: #1f618d;

    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-border-light: #e0e0e0;
    --color-border-medium: #dcdfe3;
    --color-border-dark: #ccc;
    --color-border-soft: #eee;

    --color-primary-button: #2e9e22;
    --color-primary-button-hover: #218838;
    --color-secondary-button: #6c757d;
    --color-secondary-button-hover: #5a6268;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-focus-border: #a0cffc;
}


/* General Body & Root Styling (Shared) */
body {
    background-color: var(--color-background-body);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* --- Forum Page Specific Styles (for forum.php) --- */
.forum-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem; /* Padding on sides for screens smaller than max-width */
    box-sizing: border-box;
    background-color: transparent;
}

.forum-container h2 {
    font-size: 2rem;
    color: var(--color-text-heading);
    margin-bottom: 0.8rem; /* Further reduced margin */
    text-align: center;
    font-weight: 700;
}

/* --- CREATE NEW THREAD FORM --- */
#create-thread-form {
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 2.2rem 1rem 1rem;
    margin-top: 1rem;
    /* --- FIX START --- */
    width: 100%; /* Set width to 100% to allow it to fill its parent */
    max-width: 1200px; /* Keep max-width to prevent it from getting too wide on large screens */
    margin-left: auto;
    margin-right: auto;
    /* --- FIX END --- */
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Crucial: ensures padding and border are included in the width */
}

/* Collapse button inside the form */
.hide-form-btn{
    background:none;
    border:none;
    color:var(--color-text-secondary);
    font-size:1.1rem;
    cursor:pointer;
    position: absolute;
    top: 10px; /* Aligned with the new top padding */
    right: 15px;
    z-index: 2;
}
.hide-form-btn:hover{color:var(--color-text-primary);}


#create-thread-form input[type="text"],
#create-thread-form textarea,
#create-thread-form input[type="url"] {
    width: 100%;
    padding: 0.4rem 0.7rem; /* Further reduced vertical padding for inputs */
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    font-size: 0.9rem;
    box-sizing: border-box;
    background-color: var(--color-light-gray);
    resize: vertical;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    margin-bottom: 0.6rem; /* Reduced margin between inputs */
}

/* Specific adjustment for the thread title input to make space for the collapse button */
#create-thread-form #thread-title {
    margin-top: -1.2rem; /* Pulls the title input up into the added padding-top space */
    margin-bottom: 0.8rem; /* Ensures enough space below the title for the content */
}

#create-thread-form textarea {
    height: 70px; /* Further reduced height for textarea */
}

/* Focus styles for all inputs */
#create-thread-form input[type="text"]:focus,
#create-thread-form textarea:focus,
#create-thread-form input[type="url"]:focus {
    outline: none;
    border-color: var(--color-focus-border);
    background-color: var(--color-white);
}

/* Style the "Post Thread" button */
#create-thread-form button[type="submit"] {
    display: inline-block;
    background-color: var(--color-primary-button);
    color: var(--color-white);
    padding: 0.4rem 1.6rem; /* Further reduced vertical padding for pill shape */
    border: none;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 0.6rem;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

#create-thread-form button[type="submit"]:hover {
    background-color: var(--color-primary-button-hover);
}


/* Log in prompt for forum page */
.forum-container > p:last-child {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
    font-size: 1rem;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.forum-container > p:last-child a {
    color: var(--color-link-primary);
    text-decoration: none;
    font-weight: 500;
}

.forum-container > p:last-child a:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}


/* --- THREAD LIST STYLING --- */
#thread-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.thread-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.6rem;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
}

.thread-item-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.thread-item-username {
    font-weight: 600;
    color: var(--color-text-subheading);
    font-size: 0.9rem;
}

.thread-item-time {
    font-size: 0.75rem;
    color: var(--color-text-meta);
}

.thread-item-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.thread-item-title a {
    text-decoration: none;
    color: var(--color-link-primary);
}

.thread-item-title a:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}

.thread-item-content {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Image preview in thread list */
.thread-item-image-area {
    margin-bottom: 0.6rem;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.thread-item-image-placeholder {
    min-height: 50px;
    background-color: var(--color-light-gray);
    border: 1px dashed var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: var(--color-text-light);
    border-radius: 16px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.thread-item-image-placeholder .fa-spinner {
    margin-right: 8px;
    color: var(--color-text-secondary);
}

.thread-item-image-wrapper {
    text-align: center;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
}

.thread-item-image-preview {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}

/* Stats container */
.thread-item-stats-container {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 0.6rem;
    margin-top: 0.4rem;
    align-items: center;
}
.thread-item-stats-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-meta);
    line-height: 1; /* Add this to normalize line height */
}

.thread-item-stats-icon {
    font-size: 1.2rem; /* Make it the same size as the number for consistency */
    color: var(--color-text-meta);
    /* Add vertical-align to ensure it sits nicely with text */
    vertical-align: top;
}
.thread-item-stats-number {
    font-weight: 500;
}
.like-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Specific styling for generic paragraphs within #thread-list, e.g., "No threads found." */
#thread-list p {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
    color: var(--color-text-meta);
    font-size: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
}

/* --- FORM IMAGE PREVIEW AREA STYLES --- */
#thread-form-image-preview-area {
    margin-top: 0.8rem;
    padding: 8px;
    border: 1px dashed var(--color-border-dark);
    border-radius: 8px;
    background-color: var(--color-light-gray);
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, padding 0.3s ease-in-out, border 0.3s ease-in-out;
    overflow: hidden;
    height: 0;
}

#thread-form-image-preview-area.show {
    opacity: 1;
    height: auto;
    min-height: 100px;
    padding: 8px;
    border: 1px dashed var(--color-border-dark);
}

.form-image-preview-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.4rem;
}

.form-image-preview {
    max-width: 100%;
    max-height: 100px;
    height: auto;
    border-radius: 16px;
    object-fit: contain;
    display: block;
}

.remove-image-button {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--color-danger);
    color: var(--color-white);
    border: none;
    border-radius: 16px;
    width: 22px;
    height: 22px;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
    z-index: 10;
}

.remove-image-button:hover {
    background-color: var(--color-danger-hover);
}

.form-image-info {
    font-size: 0.8em;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 4px;
}


/* --- LIKES / EDIT BUTTONS --- */
.like-button.liked .heart-icon {
    color: var(--color-danger);
    font-weight: 900;
}

.thread-item-stats-container {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 0.6rem;
    margin-top: 0.4rem;
    align-items: center;
}

.like-container {
    display: flex;
    align-items: center;
    gap: 4px;
}
.thread-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.edit-thread-button {
    text-decoration: none;
    background-color: var(--color-light-gray);
    color: var(--color-text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--color-border-medium);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.edit-thread-button:hover {
    background-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.edit-thread-button .fa-pencil-alt {
    margin-right: 3px;
}

/* --- TAGS (GENERAL) --- */
.tag-choice,
.thread-item-tag {
    display:inline-block;
    padding:3px 9px;
    margin:0 4px; /* Keep margin for spacing between tags */
    border-radius:16px;
    font-size:12px;
    font-weight:600;
    white-space: nowrap;
    /* <<<<<< FIXED: All tags blue background >>>>>> */
    background: var(--color-link-primary); /* Default blue background */
    color: var(--color-white); /* White text for all tags */
}
/* Removed specific tag colors like .tag-Photo, .tag-Help\ Request, etc.
   If you want *only* selected tags to have their specific colors, we'd re-add them
   under .tag-choice.selected or .thread-item-tag.selected */


/* Tag choices in the form (additional styling for clickable effect) */
#tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Spacing between tags */
    margin-bottom: 0.8rem; /* Space below tag picker */
    padding-top: 0.5rem; /* Space above tags */
    border-top: 1px solid var(--color-border-soft); /* Subtle separator */
    padding-bottom: 0.5rem; /* Space below tags */
    border-bottom: 1px solid var(--color-border-soft); /* Subtle separator */
}

#tag-picker .tag-choice {
    cursor:pointer;
    opacity:.9; /* Slightly less opaque when not selected */
    background-color: var(--color-link-primary); /* Default blue background for choices */
    color: var(--color-white); /* White text for choices */
    border: 1px solid var(--color-link-primary); /* Border matching background for non-selected */
    transition: all 0.2s ease;
}

#tag-picker .tag-choice:hover {
    opacity: 1; /* Full opacity on hover */
    background-color: var(--color-link-hover); /* Slightly darker blue on hover */
    border-color: var(--color-link-hover);
}

/* Selected tag styling */
#tag-picker .tag-choice.selected {
    opacity: 1;
    border: 2px solid var(--color-white); /* <<<< FIXED: White border for selected tag >>>> */
    background-color: var(--color-link-primary); /* Maintain blue background when selected */
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--color-link-primary); /* Add a subtle inner shadow of the tag color */
}


/* --- TOP CONTROL BAR (Search, New Thread Btn, Sort/Filter) --- */
.forum-controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:12px; /* Slightly increased gap for spacing */
    margin:1rem auto; /* Adjusted margin for overall compactness but with space */
    max-width: 1200px;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Style for the search input */
.forum-controls input#thread-search {
    flex-grow: 1;
    max-width: 250px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    background: var(--color-light-gray);
    font-size: 0.95rem;
    box-sizing: border-box;
    min-width: 120px;
}
.forum-controls input#thread-search:focus {
    outline: none;
    border-color: var(--color-focus-border);
    background: var(--color-white);
}

#show-form-btn {
    background:var(--color-primary-button);
    color:#fff;
    border:none;
    border-radius:16px;
    padding:0.4rem 1.2rem;
    font-size:0.95rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s;
    white-space: nowrap;
}
#show-form-btn:hover{background:var(--color-primary-button-hover);}

/* Style for the Profile button */
.profile-button {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 5px; /* Space between icon and text */
    background-color: var(--color-link-primary); /* Match secondary button style */
    color: var(--color-white);
    border: none;
    border-radius: 16px;
    padding: 0.25rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* Remove underline for links */
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.profile-button:hover {
    background-color: var(--color-link-hover);
    color: var(--color-white);

}

/* Styles for the sort and filter options */
.sort-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    align-items: center;
}

.sort-options span{
    align-self:center;
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Styling for the sort buttons (Newest, Most Likes) */
.sort-button {
    background-color: var(--color-light-gray);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-medium);
    padding: 0.4rem 1rem; /* Further reduced vertical padding */
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sort-button:hover {
    background-color: var(--color-border-light);
    border-color: var(--color-border-medium);
}

.sort-button.active {
    background-color: var(--color-primary-button);
    color: var(--color-white);
    border-color: var(--color-primary-button);
    font-weight: bold;
}

.sort-button.active:hover {
    background-color: var(--color-primary-button-hover);
    border-color: var(--color-primary-button-hover);
}


/* Style for the select dropdowns */
.sort-options select{
    padding:0.4rem 1rem; /* Further reduced vertical padding */
    border:1px solid var(--color-border-medium);
    border-radius:16px;
    background:var(--color-light-gray);
    font-size:0.9rem;
    cursor:pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2C197.8L154.4%2C65.2c-4.4-4.4-11.5-4.4-15.9%2C0L5.3%2C197.8c-4.4%2C4.4-4.4%2C11.5%2C0%2C15.9l15.9%2C15.9c4.4%2C4.4%2C11.5%2C4.4%2C15.9%2C0l106.3-106.3l106.3%2C106.3c4.4%2C4.4%2C11.5%2C4.4%2C15.9%2C0l15.9-15.9c4.4-4.4%2C4.4-11.5%2C0-15.9L287%2C197.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.65em auto, 100%;
    padding-right: 2.2em;
}


/* Collapsed thread starter wrapper */
#new-thread-collapser{
    display:flex;
    justify-content:center;
    margin:0.8rem 0;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .forum-controls {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1rem;
    }

    .forum-controls input#thread-search {
        max-width: 100%;
    }

    #show-form-btn {
        width: 100%;
    }

    .sort-options {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .sort-options span {
        text-align: center;
    }

    .sort-button, .sort-options select {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width:480px){
    .forum-controls{
        gap:8px;
    }
    #show-form-btn{
        flex:1 1 100%;
    }
    .forum-controls input#thread-search{
        flex:1 1 100%;
    }
}

.thread-item-header > div {
    display: flex;
    align-items: center; /* Vertically align all items */
    gap: 8px; /* Slightly more space between username, time, and tag */
    flex-wrap: wrap; /* Allow wrapping on very small screens, but prefer no wrap */
}

/* Make tags in thread list look good next to text */
.thread-item-tag {
    /* Inherits general tag styles, but can be fine-tuned here if needed */
    margin-left: 0; /* Remove the general margin as gap handles it */
    margin-right: 0; /* Remove the general margin as gap handles it */
}
.edit-thread-button {
    text-decoration: none;
    background-color: var(--color-light-gray);
    color: var(--color-text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--color-border-medium);
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto; /* PUSHES IT TO THE RIGHT */
}

.edit-thread-button:hover {
    background-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.edit-thread-button .fa-pencil-alt {
    margin-right: 3px;
}

/* Refinement for thread-item-header to accommodate the edit button pushed to the right */
.thread-item-header {
    display: flex;
    justify-content: space-between; /* This ensures left and right aligned content */
    align-items: center;
    gap: 0.8rem;
}

/* If the inner div also needs specific alignment or flex properties */
.thread-item-header > div {
    display: flex; /* Make the left side of the header a flex container */
    align-items: center; /* Align username, time, tag vertically */
    gap: 8px; /* Spacing between these elements */
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}
/* public/assets/css/popup.css */

.notification-popup {
    position: fixed;
    bottom: 20px; /* Position at the bottom */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background-color: rgba(0, 0, 0, 0.75); /* Darker, semi-transparent background */
    color: white;
    padding: 12px 25px;
    border-radius: 16px; /* Your requested border-radius */
    box-shadow: none; /* No shadow */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    text-align: center;
    max-width: 90%; /* Prevent it from being too wide on small screens */
    white-space: nowrap; /* Keep text on one line if possible */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if content overflows */
}

.notification-popup.show {
    opacity: 1;
    visibility: visible;
}

#notification-message {
    margin: 0;
    font-size: 1em;
}

/* --- Posts Loading Indicator --- */
.posts-loading-indicator {
    text-align: center;
    padding: 20px 0;
    color: #666; /* A subtle grey */
    font-style: italic;
    font-size: 0.95em;
    display: none; /* Hidden by default */
}
.thread-item-stats-item.comments-link {
    position: relative; /* Enable positioning */
    top: 4px;     
    display: flex;
    align-items: center;
    gap: 4px;
}
.like-container .like-count {
    color: var(--color-text-meta); /* Apply the same meta text color */
    font-size: 0.85rem;            /* Match the font size of the comment number */
    font-weight: 500;              /* Match the font weight of the comment number */
}
.thread-item-stats-item.comments-link .thread-item-stats-icon {
    font-size: 1.25em; /* Slightly larger than its parent for emphasis */
}
.thread-item-stats-item.comments-link .thread-item-stats-icon i {
    font-size: 1.2em; /* Make the icon significantly larger relative to its parent */
}
/* popup.css or forum.css */

/* --- Like Animation --- */
.like-animation-heart {
    position: absolute;
    font-size: 3em; /* Size of the heart */
    color: #e0245e; /* Instagram-like red/pink */
    opacity: 0;
    transform: scale(0);
    pointer-events: none; /* Allows clicks to pass through */
    text-shadow: 0 0 5px rgba(0,0,0,0.2); /* Subtle shadow for pop effect */
    z-index: 100; /* Ensure it's above the post content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.like-animation-heart.animate {
    animation: likePop 0.6s ease-out forwards; /* Animation duration and easing */
}

@keyframes likePop {
    0% {
        opacity: 0;
        transform: scale(0) translate(-50%, -50%);
    }
    30% {
        opacity: 1;
        transform: scale(1.2) translate(-50%, -50%); /* Pop out slightly bigger */
    }
    100% {
        opacity: 0;
        transform: scale(1.5) translate(-50%, -50%); /* Fade out and get slightly bigger */
    }
}