.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 */
}

.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-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;
}

.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 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 defaults */
}

p {
    font-family: 'Lora', serif !important;  /* Applies the elegant, feminine font to all paragraphs; !important overrides Bootstrap 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: 100% !important;
        padding: 0.375rem !important;
    }

    .card {
        padding: 0.5rem !important;
    }

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

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

    .col-12, .col-md-9, .col-md-3 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    /* Force width calculation to include padding */
    * {
        box-sizing: border-box !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);
}

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

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

/* 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 */
    }
}

/* 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;
    }
}