.wos-nav {
    background: linear-gradient(135deg, #111827, #1f2937);
    border-bottom: 1px solid rgba(74, 144, 226, 0.35);
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}

/* --- NAVBAR: full width, slim items, right aligned --- */

.wos-nav {
    background: linear-gradient(135deg, #111827, #1f2937);
    border-bottom: 1px solid rgba(74, 144, 226, 0.35);
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}

/* IMPORTANT: remove the 1200px cap so desktop uses full width */
.wos-nav-inner {
    max-width: none; /* was 1200px */
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
}

/* Brand: keep left, don’t steal too much width */
.wos-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0; /* allows ellipsis */
}

    .wos-nav .navbar-brand span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48vw; /* prevents “brand eats everything” */
    }

/* Menu: shove to far right + reduce visual bulk */
.wos-nav .navbar-nav {
    margin-left: auto;
    gap: .25rem; /* slim spacing between items */
    align-items: center;
}

/* Slim nav links (this is the “admin toolbar vibe”) */
.wos-nav .nav-link {
    padding: .35rem .55rem; /* slimmer than Bootstrap default */
    border-radius: 10px;
    color: rgba(203, 213, 245, 0.88);
}

    /* Optional hover effect consistent with your theme */
    .wos-nav .nav-link:hover {
        background: rgba(96, 165, 250, 0.10);
        color: rgba(235, 245, 255, 0.96);
    }

    /* Make icon-only items less wide (your lock icon, etc.) */
    .wos-nav .nav-link:has(i):not(:has(span)) {
        padding-left: .45rem;
        padding-right: .45rem;
    }

/* Tighten the logout "button as link" */
.wos-nav button.nav-link.btn.btn-link {
    padding: .35rem .55rem;
    border-radius: 10px;
    text-decoration: none;
}

/* If you want even more room: shrink font slightly on medium desktops */
@media (max-width: 1200px) {
    .wos-nav .nav-link {
        font-size: .95rem;
    }
}

/* Mobile: don’t ellipsis too aggressively, and add a little breathing space */
@media (max-width: 576px) {
    .wos-nav-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wos-nav .navbar-brand span {
        max-width: 62vw;
    }
}

.wos-main {
    min-height: calc(93vh - 120px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* central content width system */
.wos-content {
    max-width: 1200px;
    margin-inline: auto;
}

    .wos-content.wos-content-wide {
        max-width: 1400px;
    }

    .wos-content.wos-content-xl {
        max-width: 1600px;
    }

@media (min-width: 992px) {
    .wos-content.wos-content-wide-desktop {
        max-width: 1400px;
    }

    .wos-content.wos-content-xl-desktop {
        max-width: 1600px;
    }
}

/* Mobile safe defaults */
@media (max-width: 576px) {
    .wos-main {
        display: block;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .ms-3 {
        margin-left: .5rem !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
.home-feature-card-messages .home-feature-pill {
    border-color: rgba(255, 215, 130, .25);
    color: rgba(255, 225, 160, .95);
}