/* Shared public, customer, shredder and administrator navigation. */
.navbar .navbar-inner { background:#0099cb; background-image:none; border:0; }
.navbar .navbar-inner > .container { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 0; }
.navbar .nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px; float:none; margin:0; }
.navbar .nav > li { float:none; }
.navbar .nav > li > a, .navbar .identity-widget > a.username, .navbar .identity-widget > .dropdown > a.username {
    display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:7px;
    background:#9CCB3B; color:#18310b; font-size:15px; line-height:22px;
    text-decoration:none; text-shadow:none; box-shadow:none; font-weight:600;
}
.navbar .nav > li > a:hover, .navbar .nav > li.open > a,
.navbar .identity-widget a.username:hover { background:#b0db58; color:#122506; }
.navbar a:focus-visible, .navbar button:focus-visible { outline:3px solid #243c14; outline-offset:3px; }
.navbar .nav .caret, .navbar .identity-widget .caret { margin:0; border-top-color:#18310b; border-bottom-color:#18310b; opacity:1; }
.navbar .dropdown { position:relative; }
.navbar .dropdown > .dropdown-menu { display:none; }
.navbar .dropdown.open > .dropdown-menu {
    display:block; position:absolute; top:100%; left:0; z-index:2200; min-width:240px;
    width:max-content; max-width:min(340px,calc(100vw - 32px)); margin:6px 0 0; padding:7px;
    border:1px solid #dce6cf; border-radius:9px; background:#fff; box-shadow:0 8px 24px #17320e33;
}
.navbar .dropdown-menu::before, .navbar .dropdown-menu::after { display:none; }
.navbar .dropdown-menu li > a, .navbar .dropdown-menu button.btn-link {
    display:block; box-sizing:border-box; width:100%; padding:9px 12px; border:0; border-radius:5px;
    color:#254b11; background:transparent; background-image:none; text-decoration:none;
    font-size:15px; line-height:21px; text-align:left; text-shadow:none; white-space:normal;
}
.navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus,
.navbar .dropdown-menu button.btn-link:hover { background:#9CCB3B; color:#18310b; }
.navbar .dropdown-menu .divider { margin:6px 4px; background:#e3e9dd; border:0; height:1px; }
.navbar .dropdown-menu form { margin:0; }
.navbar .brand.sns-home-link, .navbar .brand.sns-home-link:hover {
    display:flex; align-items:center; justify-content:center; float:none; padding:7px;
    margin:0; color:#9CCB3B; background:transparent; border:0; box-shadow:none;
}
.navbar .sns-home-link #home-icon { display:block; width:26px; height:26px; }
.navbar div.phonenumber-widget, .navbar div.identity-widget { float:none; margin:0; line-height:normal; }
.navbar .phonenumber-widget a.phonenum { color:#fff; text-decoration:none; font-size:16px; white-space:nowrap; }
.navbar div.identity-widget { margin-left:auto; }
.navbar .identity-widget > .dropdown { display:flex; align-items:center; gap:6px; }
.navbar .identity-widget .dropdown.open > .dropdown-menu { left:auto; right:0; }
@media (max-width:767px) {
    .navbar .navbar-inner > .container { gap:8px; }
    .navbar .nav { flex:1 1 calc(100% - 55px); gap:5px; }
    .navbar .nav > li > a { padding:7px 9px; font-size:14px; }
    .navbar .dropdown.open > .dropdown-menu { min-width:210px; max-width:80vw; }
}

.navbar .nav li.dropdown.open > .dropdown-toggle { background:#b0db58; color:#122506; }
.navbar div.identity-widget a.username { color:#18310b; }

/* Bridge the visual gap so the dropdown remains open as the pointer enters it. */
.navbar .dropdown.open > .dropdown-menu::before {
    content:""; display:block; position:absolute; top:-8px; left:0; right:0;
    height:8px; border:0; background:transparent;
}

/* White navigation labels and home icon across all account roles. */
.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar div.identity-widget a.username,
.navbar div.identity-widget a.username:hover,
.navbar .dropdown-menu li > a,
.navbar .dropdown-menu li > a:hover,
.navbar .dropdown-menu li > a:focus,
.navbar .dropdown-menu button.btn-link,
.navbar .dropdown-menu button.btn-link:hover,
.navbar .brand.sns-home-link,
.navbar .brand.sns-home-link:hover { color:#000; }
.navbar .dropdown.open > .dropdown-menu { background:#b0db58; border-color:#387311; }
.navbar .nav .caret, .navbar .identity-widget .caret { border-top-color:#000; border-bottom-color:#000; }

/* Keep the full desktop navigation and login on one row within the site width. */
@media (min-width:768px) {
    .navbar .navbar-inner > .container { flex-wrap:nowrap; gap:6px; }
    .navbar .nav { flex-wrap:nowrap; gap:4px; min-width:0; }
    .navbar .nav > li > a { padding:8px 8px; font-size:14px; white-space:nowrap; }
    .navbar .brand.sns-home-link { flex-shrink:0; padding:5px; }
    .navbar div.phonenumber-widget { flex-shrink:0; }
    .navbar .phonenumber-widget a.phonenum { font-size:14px; }
    .navbar div.identity-widget { flex-shrink:0; }
    .navbar div.identity-widget a.username { padding:8px 9px; white-space:nowrap; font-size:14px; }
}

/* Keep longer administrator menus inside the shared container without covering the account menu. */
@media(min-width:768px) {
    .navbar .nav { flex:1 1 auto; flex-wrap:wrap; }
}

.navbar .identity-widget > .dropdown > a.username { color:#000; }