/* Pastel border styles for post cards */
.border-pastel-buying {
    border: 3px solid #b3c7f7 !important; /* pastel blue */
}
.border-pastel-selling {
    border: 3px solid #FEE4E3 !important; /* pastel rose */
}
.border-pastel-bartering {
    border: 3px solid #b2d8b2 !important; /* pastel green */
}

/* Pastel tag styles for post type */
.tag-pastel-buying {
    background-color: #b3c7f7 !important;
    color: #222 !important;
    border-radius: 12px;
    padding: 0.25em 0.75em;
    font-weight: bold;
    font-size: 0.95em;
    display: inline-block;
    margin-bottom: 0.5em;
}
.tag-pastel-selling {
    background-color: #FEE4E3 !important;
    color: #222 !important;
    border-radius: 12px;
    padding: 0.25em 0.75em;
    font-weight: bold;
    font-size: 0.95em;
    display: inline-block;
    margin-bottom: 0.5em;
}
.tag-pastel-bartering {
    background-color: #b2d8b2 !important;
    color: #222 !important;
    border-radius: 12px;
    padding: 0.25em 0.75em;
    font-weight: bold;
    font-size: 0.95em;
    display: inline-block;
    margin-bottom: 0.5em;
}
.bg-soft-rose {
    background-color: #FEE4E3 !important;  /* !important ensures it overrides Bootstrap's bg-light */
}

.bg-pastel-blue {
    background-color: #ADD8E6 !important;  /* !important ensures it overrides Bootstrap's styles */
}

/* Forum category image styles */
.forum-category-image-container {
    border-bottom: 1px solid #dee2e6;
}

.forum-category-image {
    transition: transform 0.3s ease;
}

.forum-card:hover .forum-category-image {
    transform: scale(1.05);
}

.forum-card {
    transition: all 0.3s ease;
    border-radius: 12px !important;
    overflow: hidden;
}

.forum-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.bg-pastel-success {
    background-color: #b2d8b2 !important;  /* Pastel green */
}

.bg-pastel-warning {
    background-color: #fff7b2 !important;  /* Pastel yellow */
}

.bg-pastel-info {
    background-color: #b2eaf7 !important;  /* Pastel cyan */
}

.nav-link {
    font-family: 'Lora', serif !important;  /* Applies the elegant, feminine font to the brand and links; !important overrides Bootstrap defaults */
    font-weight: 700;  /* Makes the text bold (700 is the bold weight for Lora) to make links pop more */
    color: #333 !important;
}

.nav-link:hover {
    color: #000 !important;  /* Even darker on hover for emphasis and better UX */
}

/* @media (min-width: 1440px) {
    .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
} */

body {
    background-image: url("/static/sahmm_app/images/border2.a90a7577a063.png");  /* Replace 'background.jpg' with your actual image filename */
    background-size: cover;  /* Scales the image to cover the entire background */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat;  /* Prevents tiling */
    background-attachment: fixed;  /* Keeps the background fixed while scrolling for a subtle effect */
    overflow-y: scroll !important;
    padding-top: 160px;  /* Increase this value to match your navbar height */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 211, 0.6);  /* Semi-transparent white overlay; adjust the 0.5 opacity value (0-1) if needed—lower for more visible image, higher for more fade */
    z-index: -1;  /* Keeps the overlay behind all content */
}

/* Prevent horizontal overflow on mobile */
body, html {
    max-width: 100vw;
    overflow-x: hidden;
}

.btn-pastel-blue {
    background-color: #ADD8E6 !important;  /* Matches .bg-pastel-blue */
    border: #ADD8E6 !important;
    color: #333 !important;  /* Dark text for readability */
}

.btn-pastel-blue:hover {
    background-color: #80BFFF !important;  /* More saturated/vibrant on hover */
    border-color: #333 !important;
}

.btn-yellow {
    background-color: #ecf5db !important;  /* Soft pastel yellow for highlights */
    border-color: #ecf5db !important;
    color: #333 !important;  /* Dark text for readability */
}

.btn-yellow:hover {
    background-color: #FFFF99 !important;  /* More saturated/vibrant on hover */
    border-color: #333 !important;
}

.btn-outline-pastel-blue {
    border: 1px solid white !important;  /* Explicitly sets width (1px), style (solid), and color (white) */
    color: #333 !important;
    background-color: transparent !important;  /* Ensures no background for outline effect */
}

.btn-outline-pastel-blue:hover {
    background-color: #80BFFF !important;
    color: #333 !important;
    border: 1px solid white !important;  /* Keep the white border on hover for consistency */
}

.btn-pastel-red {
    background-color: #FEE4E3 !important;  /* Matches .bg-soft-rose */
    border-color: #FEE4E3 !important;
    color: #333 !important;  /* Dark text for readability */
}

.btn-pastel-red:hover {
    background-color: #FFB3BA !important;  /* More saturated/vibrant on hover */
    border-color: #FFB3BA !important;
}

.btn-pastel-gray {
    background-color: #D7D7D7 !important;  /* Soft pastel gray for secondary */
    border-color: #D7D7D7 !important;
    color: #333 !important;
}

.btn-pastel-gray:hover {
    background-color: #BEBEBE !important;  /* Slightly darker on hover */
    border-color: #BEBEBE !important;
}

/* New pastel button classes to match Bootstrap variants but with pastel theme */
.btn-pastel-primary {
    background-color: #b3c7f7 !important; /* Pastel blue for primary */
    border-color: #b3c7f7 !important;
    color: #333 !important;
}
.btn-pastel-primary, .btn-pastel-primary i {
    color: #222 !important;
}
.btn-pastel-primary:hover {
    background-color: #8faeea !important;
    border-color: #8faeea !important;
}

.btn-pastel-success {
    background-color: #b2d8b2 !important; /* Pastel green for success */
    border-color: #b2d8b2 !important;
    color: #333 !important;
}
.btn-pastel-success, .btn-pastel-success i {
    color: #222 !important;
}
.btn-pastel-success:hover {
    background-color: #8fd88f !important;
    border-color: #8fd88f !important;
}

.btn-pastel-info {
    background-color: #b2eaf7 !important; /* Pastel cyan for info */
    border-color: #b2eaf7 !important;
    color: #333 !important;
}
.btn-pastel-info, .btn-pastel-info i {
    color: #222 !important;
}
.btn-pastel-info:hover {
    background-color: #8fd8ea !important;
    border-color: #8fd8ea !important;
}

.btn-pastel-warning {
    background-color: #fff7b2 !important; /* Pastel yellow for warning */
    border-color: #fff7b2 !important;
    color: #333 !important;
}
.btn-pastel-warning, .btn-pastel-warning i {
    color: #222 !important;
}
.btn-pastel-warning:hover {
    background-color: #fff18f !important;
    border-color: #fff18f !important;
}

.btn-outline-pastel-green {
    border-color: #B2D8B2 !important;  /* Soft pastel green outline for search */
    color: #B2D8B2 !important;
}

.btn-outline-pastel-green:hover {
    background-color: #B2D8B2 !important;
    color: #333 !important;
}

h1 {
    font-family: 'Dancing Script', cursive !important;  /* Applies the elegant, feminine font to all headings; !important overrides Bootstrap defaults */
    font-weight: 600;  /* Makes the headings bold (700 is the bold weight for Lora) */
    font-size: 3.5rem;  /* Default font size for h1 on larger screens; adjust as needed */
    text-shadow: #333;
}

h2 {
    font-family: 'Lora', serif !important;  /* Applies the elegant, feminine font to all headings; !important overrides Bootstrap's defaults */
    font-weight: 500;  /* Makes the headings bold (700 is the bold weight for Lora) */
}

h3 {
    font-family: 'Lora', serif !important;  /* Applies the elegant, feminine font to all headings; !important overrides Bootstrap's defaults */
}

p {
    font-family: 'Lora', serif !important;  /* Applies the elegant, feminine font to all paragraphs; !important overrides Bootstrap's defaults */
    font-weight: 400;  /* Makes the text normal weight (400 is the normal weight for Lora) */
    font-size: 1.25rem;  /* Default font size for paragraphs on larger screens; adjust as needed */
}

/* Media query for mobile devices (screens up to 768px wide) */
@media (max-width: 768px) {
    h1 {
        font-size: 3.5rem;  /* Reduced size for mobile */
    }

    p {
        font-size: 1rem;  /* Reduced size for mobile */
    }

    /* Optionally add adjustments for h2 and h3 if they need mobile tweaks */
    h2 {
        font-size: 1.75rem;  /* Example: Set a mobile size if not already defined */
    }

    h3 {
        font-size: 1.5rem;  /* Example: Set a mobile size if not already defined */
    }
    /* Navbar brand adjustments for tablets */
    .navbar-brand {
        font-size: 2.75rem !important;  /* Increased size for better visibility */
        flex-grow: 1 !important;
    }
}

/* Consolidated mobile adjustments (screens up to 575.98px wide) */
@media (max-width: 575.98px) {
    .navbar-brand {
        max-width: 100vw;  /* Limits to full screen width on mobile */
        white-space: normal;  /* Allows text to wrap if too long */
        text-align: center;  /* Centers the text within its container on mobile */
        font-size: 2.5rem !important;  /* Increased size for better visibility on mobile */
        flex-grow: 1 !important;
        display: block !important;  /* Forces block-level for full-width centering */
        width: 100% !important;
    }

    .card-body label,
    .card-body input,
    .card-body textarea,
    .card-body small,
    .card-body button {
        font-size: 0.85rem !important;  /* Smaller fonts on mobile for better fit */
    }

    .card-body .row.mb-3 {
        margin-bottom: 1rem !important;  /* Reduce vertical spacing slightly on mobile */
    }

    /* Responsive card padding and width */
    .card {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
    }

    .container, .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .container form {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col-12, .col-md-8, .col-lg-6,
    .col-md-9, .col-md-6,
    .col-3, .col-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .col-3, .col-9 {
        padding: 0 0.5rem !important;
    }

    form .row.mb-3 {
        flex-direction: column;
    }

    .col-form-label {
        text-align: left !important;
        margin-bottom: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .form-control {
        font-size: 1rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Text alignment for mobile */
    .text-end {
        text-align: left !important;
    }

    /* Ensure form groups don't overflow */
    .form-group,
    .mb-3 {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    .nav-link {
        padding-top: 0.25rem !important;  /* Reduces vertical padding to minimize space between menu items like above Logout */
        padding-bottom: 0.25rem !important;
    }
    /* body {
        background-image: none !important;  /* Removes the background image on mobile to prevent it from being covered by content images */
    /* } */ 
}

/* Message alignment styles */
.modal-body .mb-2.text-start {
    text-align: left !important;
}

.modal-body .mb-2.text-end {
    text-align: right !important;
}

/* Message bubble styles */
.modal-body .bg-pastel-blue {
    margin-left: auto;  /* Push user messages to the right */
}

.modal-body .bg-soft-rose {
    margin-right: auto;  /* Keep other person's messages on the left */
}

/* Ensure these styles apply on mobile */
@media (max-width: 575.98px) {
    .modal-body .mb-2.text-start {
        text-align: left !important;
    }

    .modal-body .mb-2.text-end {
        text-align: right !important;
    }

    /* Override any conflicting mobile text alignment */
    .text-end {
        text-align: right !important;
    }

    /* Message container width */
    .modal-body .p-2.rounded {
        max-width: 75% !important;
        display: inline-block !important;
    }
}

/* Message spacing */
.modal-body .mb-3 {
    margin-bottom: 1rem !important;
}

.modal-body .mt-2 {
    margin-top: 0.5rem !important;
}

.card-body .mb-3 {
    margin-bottom: 1rem !important;
}

.text-muted {
    margin-top: 0.5rem;
}

/* More specific textarea controls */
textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* Container adjustments for textarea */
.col-12.col-md-9 {
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

/* Mobile-specific textarea adjustments */
@media (max-width: 575.98px) {
    textarea.form-control {
        min-height: 80px;
        font-size: 0.85rem;
        width: 100% !important;
        max-width: calc(100vw - 3rem) !important;
        padding: 0.375rem !important;
        /* Enhanced text wrapping */
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: pre-wrap !important;
        hyphens: auto !important;
    }

    .card {
        padding: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .container {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
        max-width: 100vw !important;
    }

    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .col-12, .col-md-9, .col-md-3 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Force width calculation to include padding and prevent overflow */
    * {
        box-sizing: border-box !important;
    }
    
    /* Specific input field constraints */
    input.form-control,
    select.form-control {
        max-width: calc(100vw - 3rem) !important;
        min-width: 0 !important;
    }
}

/* Ensure form controls stay within boundaries */
.form-control {
    max-width: 100% !important;
    width: 100% !important;
}

/* Card content containment */
.card {
    overflow: hidden !important;
}

/* Remove horizontal scroll from containers */
.container, 
.row, 
.col-12,
.col-md-8,
.col-md-9,
.col-lg-6 {
    overflow-x: hidden !important;
}

/* Add these styles to handle the two-row navbar */
.navbar {
    min-height: 160px;
    padding: 1rem 0;
}

.navbar-brand {
    margin-right: 0;
    font-size: 2.5rem;
    margin: 0;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
}

/* Adjust main content padding to account for taller navbar */
body {
    padding-top: 160px;
}

@media (max-width: 991.98px) {
    .navbar {
        min-height: 180px;
    }
    
    body {
        padding-top: 180px;
    }
    
    .navbar-brand {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .navbar {
        min-height: 160px;
    }
    
    .navbar-brand {
        font-size: 1.5rem;
        padding: 0.5rem 0;
    }
    
    body {
        padding-top: 160px;
    }

    .logo-figure{
        font-size: 0.5rem !important;
    }
}

/* Navbar styling */
.navbar {
    flex-direction: column;
    padding: 0;
    min-height: auto;
}

.brand-container {
    background-color: #ADD8E6;
    width: 100%;
    padding: 1rem 0;
    margin: 0;
}

.nav-links-container {
    padding: 0.5rem 0;
}

.navbar-brand {
    font-family: 'Dancing Script', cursive !important;
    font-weight: 700;
    font-size: 3.5rem;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
    background: linear-gradient(to right, #FEE4E3 , #E6E6FA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;   
    position: relative;  /* Allows positioning of pseudo-elements */
}


/* Media queries */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    .navbar-toggler {
        margin-top: 0.5rem;
        width: 40px !important;  /* Adjust this value if needed; 40px is a common fixed size for hamburger icons */
        height: 40px !important;
        padding: 0 !important;  /* Removes any padding that might cause stretching */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-toggler-icon {
        width: 24px !important;  /* Keeps the icon lines fixed; adjust if you want it smaller/larger */
        height: 24px !important;
        background-size: contain !important;  /* Ensures the icon doesn't stretch */
    }
}

/* Adjust body padding for new navbar height */
body {
    padding-top: 120px;
}

@media (max-width: 575.98px) {
    body {
        padding-top: 140px;
    }
}

/* User's own card styling */
.border-pastel-blue {
    border: 3px solid #ADD8E6 !important;
}

.badge.bg-pastel-blue {
    background-color: #ADD8E6 !important;
    color: #333 !important;
    font-family: 'Lora', serif !important;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* Card fixed dimensions and truncation */
.card {
    height: auto !important;  /* Override fixed height */
    max-height: 85vh;  /* Limit maximum height relative to viewport */
    overflow-y: auto !important;  /* Enable vertical scrolling */
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease;
}

/* Forum card specific styling */
.forum-card {
    border: 2px solid transparent !important;
    transition: all 0.3s ease;
}

.forum-card:hover {
    border-color: #b3c7f7 !important;
    transform: translateY(-3px);
}

.forum-card .card-header {
    border-bottom: none !important;
    font-weight: 600;
}

/* Forum profile image styling - More prominent for community emphasis */
.forum-profile-img {
    border: 3px solid #FEE4E3 !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(254, 228, 227, 0.4);
}

.forum-profile-img:hover {
    border-color: #b3c7f7 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(179, 199, 247, 0.5);
}

/* Large profile images for forum post details */
.forum-profile-img-large {
    border: 4px solid #FEE4E3 !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(254, 228, 227, 0.5);
}

.forum-profile-img-large:hover {
    border-color: #b3c7f7 !important;
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(179, 199, 247, 0.6);
}

/* Medium profile images for category listings */
.forum-profile-img-medium {
    border: 3px solid #FEE4E3 !important;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(254, 228, 227, 0.4);
}

.forum-profile-img-medium:hover {
    border-color: #b3c7f7 !important;
    transform: scale(1.04);
    box-shadow: 0 5px 14px rgba(179, 199, 247, 0.5);
}

/* Forum post styling */
.forum-post-card {
    border-left: 4px solid #b2d8b2;
    transition: all 0.2s ease;
}

.forum-post-card:hover {
    border-left-color: #b3c7f7;
    box-shadow: 0 4px 15px rgba(179, 199, 247, 0.2);
}

/* Community emphasis styling */
.community-profile {
    background: linear-gradient(135deg, #FEE4E3 0%, #b3c7f7 100%);
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.community-name {
    font-family: 'Lora', serif !important;
    font-weight: 600;
    color: #333;
}

.community-location {
    font-family: 'Lora', serif !important;
    font-weight: 400;
    color: #666;
}

/* Enhanced forum layout for community focus - People are the stars! */
.forum-author-section {
    min-width: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Square profile images for prominent community display */
.forum-profile-img-square {
    border-radius: 12px !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.forum-profile-img-square:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Different sizes for profile images */
.forum-profile-img-community {
    border-radius: 8px !important;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.forum-profile-img-star {
    border-radius: 10px !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.forum-profile-img-hero {
    border-radius: 15px !important;
    border: 4px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Placeholder styling */
.forum-profile-placeholder,
.profile-placeholder {
    background: linear-gradient(135deg, #FFB6C1, #FFC0CB, #FFD1DC);
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-placeholder.rounded-circle {
    border-radius: 50% !important;
}

.profile-placeholder i {
    color: #8B4B7A !important;
    font-size: 1.2em;
}

/* Post image placeholder styling */
.post-image-placeholder {
    background: linear-gradient(135deg, #FFB6C1, #FFC0CB, #FFD1DC);
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.post-image-placeholder i {
    color: #8B4B7A !important;
    font-size: 3em;
}

/* Mobile responsive adjustments for profile placeholders */
@media screen and (max-width: 768px) {
    .profile-placeholder {
        min-height: 50px !important;
    }
    
    .profile-placeholder i {
        font-size: 1em !important;
    }
    
    .forum-category-profile-img.profile-placeholder {
        width: 50px !important;
        height: 50px !important;
    }
    
    .forum-category-profile-img.profile-placeholder i {
        font-size: 1.2em !important;
    }
}

/* Forum post content area */
.forum-post-content {
    flex: 1;
    min-width: 0; /* Allows flexbox to shrink properly */
}

/* Community information styling */
.forum-post-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Enhanced mobile responsiveness for forums */
@media (max-width: 767.98px) {
    .forum-author-section {
        min-width: 60px;
    }
    
    .forum-post-header {
        gap: 0.75rem;
    }
    
    .community-name {
        font-size: 0.95rem;
    }
    
    .community-location {
        font-size: 0.8rem;
    }
    
    /* Adjust profile image sizes for mobile */
    .forum-profile-img-community {
        width: 56px !important;
        height: 56px !important;
    }
    
    .forum-profile-img-star {
        width: 70px !important;
        height: 70px !important;
    }
    
    .forum-profile-img-hero {
        width: 85px !important;
        height: 85px !important;
    }
    
    /* Fix card overflow on mobile */
    .forum-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .card-body {
        padding: 1rem 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .forum-post-header {
        gap: 0.5rem;
    }
    
    .forum-author-section {
        min-width: 48px;
    }
    
    /* Smaller profile images for very small screens */
    .forum-profile-img-community {
        width: 48px !important;
        height: 48px !important;
    }
    
    .forum-profile-img-star {
        width: 60px !important;
        height: 60px !important;
    }
    
    .forum-profile-img-hero {
        width: 75px !important;
        height: 75px !important;
    }
    
    /* Prevent horizontal overflow */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .forum-card {
        margin-left: 0;
        margin-right: 0;
    }
    
    .card-body {
        padding: 0.75rem 0.5rem;
    }
    
    /* Adjust font sizes for mobile readability */
    .community-name {
        font-size: 0.9rem;
    }
    
    .community-location {
        font-size: 0.75rem;
    }
    
    /* Icon sizes in placeholders */
    .forum-profile-placeholder i {
        font-size: 20px !important;
    }
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure proper form display */
.card form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Forum card mobile optimization */
.forum-card {
    overflow: hidden;
}

.forum-post-card {
    width: 100%;
    overflow: hidden;
}

/* Prevent text from causing horizontal overflow */
.forum-post-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Ensure form content stays within bounds */
.card-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
}

/* Mobile specific adjustments */
@media (max-width: 575.98px) {
    .card {
        max-height: 80vh;  /* Slightly smaller on mobile to account for browser chrome */
        margin-bottom: 1rem !important;
    }
    
    .container.mt-4 {
        margin-top: 1.5rem !important;  /* Reduce top margin on mobile */
    }
    
    /* Mobile forum profile images - keep them prominent but appropriately sized */
    .forum-profile-img-large {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
    }
    
    .forum-profile-img-medium {
        width: 45px !important;
        height: 45px !important;
        border-width: 2px !important;
    }
    
    .forum-profile-img {
        width: 36px !important;
        height: 36px !important;
        border-width: 2px !important;
    }
    
    /* Ensure forum posts are well-spaced on mobile */
    .forum-post-mobile {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Forum card adjustments for mobile */
    .forum-card {
        margin-bottom: 1.5rem !important;
    }
    
    .forum-card .card-header {
        padding: 1rem !important;
    }
    
    .forum-card .card-body {
        padding: 1rem !important;
    }
    
    /* Forum category profile images - smaller on mobile */
    .forum-category-profile-img {
        width: 50px !important;
        height: 50px !important;
        object-fit: cover !important;
    }
    
    .forum-category-profile-icon {
        font-size: 20px !important;
    }
    
    /* Forum post content adjustments for mobile */
    .forum-post-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Forum category profile images - default desktop size */
.forum-category-profile-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.forum-category-profile-icon {
    font-size: 32px;
}

/* Responsive text utilities */
@media (min-width: 576px) {
    .forum-category-profile-img {
        width: 80px !important;
        height: 80px !important;
    }
    
    .forum-category-profile-icon {
        font-size: 32px !important;
    }
    
    .forum-post-excerpt {
        font-size: 1rem !important;
    }
}

/* Ensure form inputs don't overflow */
textarea.form-control {
    max-height: 200px;
    min-height: 100px;
}

/* Profile card scrolling fixes */
.card {
    overflow-x: hidden !important;
}

.profile-info {
    width: 100%;
}

.text-break {
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .card {
        max-height: 80vh !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Only target the main card container, not all elements */
@media screen and (max-width: 768px) {
    .card.profile-edit-card {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }
    
    /* Ensure body can scroll properly */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Keep form content properly contained */
    .card-body,
    .card form {
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Enhanced form controls with better text wrapping */
    .form-control,
    textarea.form-control,
    input.form-control,
    select.form-control {
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        box-sizing: border-box !important;
        /* Add viewport constraint */
        min-width: 0 !important;
    }
    
    /* Specific textarea handling with enhanced constraints */
    textarea.form-control {
        resize: vertical !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        word-break: break-word !important;
        hyphens: auto !important;
        /* Force text to wrap within container */
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        /* Ensure container width is respected */
        max-width: calc(100vw - 2rem) !important;
        width: 100% !important;
    }
    
    /* Keep text within card boundaries */
    .col-12,
    .col-md-9,
    .col-md-3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow-x: hidden !important;
        /* Ensure columns don't exceed viewport */
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Ensure form rows don't overflow */
    .row.mb-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Prevent row from exceeding container */
        max-width: 100% !important;
    }
    
    /* Additional container safety with viewport constraints */
    .container.mt-4 {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Profile edit card specific constraints */
    .profile-edit-card {
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}