/* ==========================================================================
   KOI Continuity — unified site header (pure Bootstrap 3 navbar)
   ONE header used by every page (public marketing, login, admin panel).
   Scoped entirely to .site-navbar so it is safe to load next to both the
   marketing layout (which has a global * reset) and AdminLTE.
   Only the links inside change by context; the chrome is identical.
   ========================================================================== */

.site-navbar.navbar {
    background: #1c1c1c;
    border: 0;
    border-radius: 0;
    margin: 0;
    min-height: 62px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* own stacking context so the open dropdown always paints above page
       content (the marketing hero/sections that follow it in the flow) */
    position: relative;
    z-index: 1030;
}

/* TWO groups, one consistent header per group (the header no longer varies
   with each page's content):
     - admin working pages -> 5%  (default)
     - front / login / forgot / profile pages (.wide-gutter) -> 15%  */
.site-navbar .container {
    width: 100%;
    max-width: none;
    padding-left: 5%;
    padding-right: 5%;
    display: block;
}
.wide-gutter .site-navbar .container { padding-left: 15%; padding-right: 15%; }
/* When a logged-in user lands on a wide-gutter (marketing/profile) page the
   header shows the full app module nav, which does NOT fit inside the 15%
   gutter and wraps to a second row (brand, nav and profile break apart). Use
   the compact 5% gutter so the app header stays identical to the admin one. */
.wide-gutter .site-navbar--app .container { padding-left: 5%; padding-right: 5%; }

/* ---- brand / logo (fixed size everywhere) ---- */
.site-navbar .navbar-header { float: left; }

.site-navbar .navbar-brand {
    height: 62px;
    padding: 0;
    margin: 0 24px 0 0;
    display: flex;
    align-items: center;
    background: transparent;   /* override custom_style.css .navbar-brand{background:#fff} */
}
/* Bootstrap pulls .navbar>.container .navbar-brand left by 15px (3-class rule);
   neutralize it so the logo starts exactly at the container edge like content. */
.site-navbar.navbar > .container .navbar-brand { margin-left: 0; }

.site-navbar .site-logo {
    height: 34px;
    width: auto;
    max-width: none;
    display: block;
}

/* ---- top-level links ---- */
.site-navbar .navbar-nav { margin: 0; }

.site-navbar .navbar-nav > li > a {
    color: #e8e8e8;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 22px;
    padding: 20px 16px;
    background: transparent;
    transition: color .15s ease, background .15s ease;
}

.site-navbar .navbar-nav > li > a:hover,
.site-navbar .navbar-nav > li > a:focus,
.site-navbar .navbar-nav > li.active > a,
.site-navbar .navbar-nav > li.open > a {
    color: var(--koi-gold, #c9a227);
    background: rgba(255, 255, 255, .06);
}

.site-navbar .navbar-nav > li.active > a { box-shadow: inset 0 -3px 0 var(--koi-gold, #c9a227); }

.site-navbar .navbar-nav > li > a .caret { margin-left: 6px; }
.site-navbar .navbar-nav > li > a .fa { margin-right: 7px; }

/* ---- Login pill (guest) ---- */
.site-navbar .nav-login {
    border: 1px solid var(--koi-gold, #c9a227);
    border-radius: 24px;
    color: var(--koi-gold, #c9a227) !important;
    margin: 14px 0 14px 10px;
    padding: 7px 20px !important;
    line-height: 1;
}
.site-navbar .nav-login:hover { background: var(--koi-gold, #c9a227); color: #fff !important; }

/* ---- dropdown menus (module + profile) ---- */
.site-navbar .dropdown-menu {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    padding: 6px 0;
    margin-top: 2px;
    min-width: 210px;
}

.site-navbar .dropdown-menu > li > a {
    color: #1f2430;
    font-size: 14px;
    padding: 9px 20px;
    white-space: nowrap;
}

.site-navbar .dropdown-menu > li > a:hover,
.site-navbar .dropdown-menu > li.active > a {
    background: var(--koi-gold-soft, #f7f1de);
    color: #1c1c1c;
}

.site-navbar .dropdown-menu > li > a .fa { margin-right: 8px; color: var(--koi-gold-dark, #a9871c); width: 16px; text-align: center; }
.site-navbar .dropdown-menu .divider { margin: 6px 0; background: #eef0f3; }

/* ---- hamburger (mobile) ---- */
.site-navbar .navbar-toggle {
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    margin: 14px 0;
}
.site-navbar .navbar-toggle .icon-bar { background: var(--koi-gold, #c9a227); }
.site-navbar .navbar-toggle:hover,
.site-navbar .navbar-toggle:focus { background: rgba(255, 255, 255, .1); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
    /* percentages get too tight on phones — floor both groups at 18px */
    .site-navbar .container,
    .wide-gutter .site-navbar .container { padding-left: 18px; padding-right: 18px; }
    /* full-width header row so the collapsed menu drops BELOW it, not beside it */
    .site-navbar .navbar-header { float: none; }
    .site-navbar .navbar-brand { height: 62px; }
    .site-navbar .navbar-collapse {
        background: #242424;
        border-top: 1px solid rgba(255, 255, 255, .08);
        margin: 0 -18px;
        padding: 6px 18px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .site-navbar .navbar-nav { float: none; }
    .site-navbar .navbar-nav > li { float: none; }
    .site-navbar .navbar-nav > li > a { padding: 12px 4px; }
    .site-navbar .navbar-nav.navbar-right { margin-bottom: 6px; }
    /* let dropdowns flow inline on mobile instead of floating */
    .site-navbar .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        background: rgba(255, 255, 255, .04);
        border: 0;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }
    .site-navbar .navbar-nav .open .dropdown-menu > li > a { color: #d6d6d6; padding-left: 26px; }
    .site-navbar .navbar-nav .open .dropdown-menu > li > a:hover { background: rgba(255,255,255,.06); color: var(--koi-gold, #c9a227); }
    .site-navbar .nav-login {
        display: inline-block;
        margin: 8px 4px;
    }
}