/* File: /assets/css/style_new.css */

/* General body style for the new layout */
body.bootstrap-layout {
    font-family: 'Jost', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Styles for the new navbar */
.navbar-logo {
    height: 50px; /* Adjust height as needed */
    width: auto;
    border-radius: 8px;
}

.navbar-flag {
    height: 24px; /* Smaller height for the flag */
    width: auto; /* Preserves aspect ratio */
    margin-left: 1rem;
    border-radius: 4px;
}

/* Style the logged-in user dropdown to look more like a button */
.dropdown-toggle::after {
    /* Hides the default Bootstrap dropdown arrow if desired */
    /* display: none; */
}

.dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

.dropdown-item {
    display: flex;
    align-items: center;
}

/* Styles for the new footer */
.footer-logo {
    height: 30px;
    width: auto;
    border-radius: 4px;
    opacity: 0.8;
}

/* File: /assets/css/style_new.css (Add this to the end of the file) */

.profile-picture {
    width: 32px; /* Sets a fixed width */
    height: 32px; /* Sets a fixed height */
    border-radius: 50%; /* This is the magic that makes it a perfect circle */
    object-fit: cover; /* This prevents the image from being stretched or squished. 
                            It crops the image to fit the circular space, which is exactly what we want. */
    border: 1px solid #dee2e6; /* Adds a subtle, clean border */
}
/* File: /assets/css/style_new.css (add this) */

.article-hero-image {
    max-height: 450px;
    width: 100%;
    object-fit: cover; /* Prevents image from being distorted */
}
/* File: /assets/css/style_new.css (add this to the end) */

/* Style for the new sub-category pills on the browse page */
.sub-category-pill {
    border-radius: 1rem; /* Makes it pill-shaped */
    margin-right: 0.5rem; /* Adds spacing between pills */
    margin-bottom: 0.5rem;
    font-size: 0.9rem; /* Slightly larger font */
    --bs-btn-hover-bg: #e9ecef; /* A subtle hover effect */
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-hover-color: #000;
}

    .sub-category-pill .badge {
        /* Ensures the inner count badge aligns nicely */
        vertical-align: middle;
    }

#user-list-container {
    min-height: 250px; /* Approx. height of a table header + 3 rows */
}
/* File: /assets/css/style_new.css (add this to the end) */

/*
 * Style for read-only form inputs to make them appear
 * visually distinct and non-interactive.
*/
input[readonly], textarea[readonly] {
    background-color: #e9ecef !important; /* Standard Bootstrap "disabled" grey */
    cursor: not-allowed;
    opacity: 1;
}