/* Modern Header Overrides */

/* Make the navbar "Shining" Bright Blue */
.navbar-default.header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    /* Shining Blue Gradient */
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
    /* Blue-tinted shadow */
    border: none;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all 0.3s ease;

    /* Sticky Header */
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
}

/* Add spacing to the container */
.navbar-default.header .container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Navigation Links */
.navbar-default .navbar-nav>li>a {
    color: #f8fafc !important;
    /* White/Off-white text */
    font-weight: 500;
    font-size: 15px;
    padding: 10px 15px;
    margin: 0 5px;
    line-height: normal !important;
    display: inline-block !important;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Icons - ORANGE */
.navbar-default .navbar-nav>li>a i {
    color: #fb923c !important;
    /* Bright Orange */
    margin-right: 6px;
    font-size: 1.1em;
}

/* Hover States */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.open>a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown menus */
.dropdown-menu {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
}

.dropdown-menu>li>a {
    border-radius: 6px;
    padding: 8px 15px;
    color: #4b5563;
    font-weight: 500;
}

.dropdown-menu>li>a:hover {
    background-color: #f3f4f6;
    color: #1a1a1a;
}

/* User Profile Image */
.client-profile-image-small {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 2px;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* Mobile Toggle Button */
.navbar-toggle {
    border: none;
    background: transparent !important;
    margin-top: 20px;
}

.navbar-toggle .icon-bar {
    background-color: #ffffff !important;
    width: 25px;
    height: 3px;
    border-radius: 2px;
}

/* Desktop Alignment & Reordering */
@media (min-width: 768px) {
    .navbar-default.header .container {
        display: flex;
        /* Use flexbox for easy reordering */
        justify-content: space-between;
        /* Space logo and navigation items */
    }

    .navbar-collapse {
        width: auto !important;
        /* Allow it to shrink/grow based on content, preventing overlap with width: 100% */
        flex-grow: 1;
        display: flex !important;
        justify-content: flex-end;
    }

    .navbar-nav {
        float: none;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        /* Prevent wrapping if possible, or handle it */
    }

    /* Ensure layout handles tight spaces - USE FULL WIDTH */
    .navbar-default.header .container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Reduce horizontal padding on links if space is tight */
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: normal !important;
        padding-left: 8px;
        /* Further reduced */
        padding-right: 8px;
        font-size: 14px;
        /* Slight reduction from 15px to fit more items */
    }

    /* Login Button Positioning */
    /* Assuming 'customers-nav-item-login' is the class for the login button */
    /* Order default is 0. We want Login to be "First one at the far right" ?? */
    /* Interpreting "First one" usually implies left-most in the group, or index 0. */
    /* "move it to the far rigth to be first one" -> could mean order: 100 to be at the very end. */
    /* The user uploaded an image where "Login" button is Blue and seemingly in the middle of icons? No, wait. */
    /* In the uploaded image, Login is a button. */
    /* I will make it the last item (far right) using flex order. */

    .customers-nav-item-login {
        order: 9999;
        /* Use high order to force it to the very end */
        margin-left: 20px !important;
    }

    /* Style the login button to look like a distinct button */
    .customers-nav-item-login>a {
        background-color: #ffffff !important;
        /* White button */
        color: #2563eb !important;
        /* Blue text */
        padding: 8px 20px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .customers-nav-item-login>a:hover {
        background-color: #f1f5f9 !important;
        color: #1d4ed8 !important;
        transform: translateY(-1px);
    }

    /* Ensure icons inside the white login button are blue */
    .customers-nav-item-login>a i {
        color: #2563eb !important;
    }
}

/* Logo Expansion and Tagline */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar-brand.logo {
    padding: 0;
    height: auto;
    display: flex;
    /* Remove inline-block default to remove spacing issues */
    align-items: center;
}

.navbar-brand.logo img {
    height: 50px !important;
    /* Increase from default tiny size */
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    /* Allow width to expand */
}

.logo-tagline {
    color: #ffffff;
    font-size: 13px;
    /* Slightly reduced base size */
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #fb923c;
    /* Orange separator line */
    padding-left: 12px;
    height: 34px;
    /* Slightly taller to fit 2 lines */
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    justify-content: center;
    align-items: flex-start;
}

.logo-tagline .line-1 {
    font-weight: 600;
    display: block;
}

.logo-tagline .line-2 {
    font-weight: 400;
    font-size: 12px;
    /* Smaller second line */
    display: block;
    color: #e2e8f0;
    /* Slightly lighter/softer white */
}

@media (max-width: 767px) {
    .logo-wrapper {
        margin-left: 15px;
        /* Adjust alignment on mobile if needed */
    }

    .navbar-brand.logo img {
        height: 40px !important;
        /* Slightly smaller on mobile but still larger than tiny */
    }

    .logo-tagline {
        font-size: 12px;
        display: none;
        /* Optional: Hide tagline on very small screens if it breaks layout, or keep it. User didn't specify. I'll keep it for now but user might want it hidden. I'll keep it visible but smaller. */
        display: block;
    }
}