/* Desktop navigation only. Mobile navigation, permissions and modal logic stay
   with the existing application. Bootstrap owns dropdown visibility. */
@media screen and (min-width: 768px) {
    body:not(.admin-impersonating):not(.account-financial-overdue):not(.account-double-banner) {
        padding-top: 64px;
    }

    body.admin-impersonating,
    body.account-financial-overdue {
        padding-top: 106px;
    }

    body.account-double-banner {
        padding-top: 148px;
    }

    #client-vehicle-sidebar,
    #client-vehicle-sidebar-open {
        top: 76px;
    }

    body.admin-impersonating #client-vehicle-sidebar,
    body.admin-impersonating #client-vehicle-sidebar-open,
    body.account-financial-overdue #client-vehicle-sidebar,
    body.account-financial-overdue #client-vehicle-sidebar-open {
        top: 118px;
    }

    body.account-double-banner #client-vehicle-sidebar,
    body.account-double-banner #client-vehicle-sidebar-open {
        top: 160px;
    }

    .navbar.leal-compact-navbar {
        height: 64px;
        min-height: 64px;
        margin-bottom: 0;
        border-width: 0;
        box-sizing: border-box;
    }

    .navbar.leal-compact-navbar > .container-fluid {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 64px;
        min-height: 64px;
        padding: 0 16px;
    }

    .navbar.leal-compact-navbar > .container-fluid::before,
    .navbar.leal-compact-navbar > .container-fluid::after {
        display: none;
    }

    .navbar.leal-compact-navbar .navbar-header {
        flex: 0 0 140px;
        float: none;
        height: 64px;
        min-width: 0;
    }

    /* The installed logo rule fixes 86px/280px with !important. */
    .navbar.leal-compact-navbar .navbar-brand.navbar-brand-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        width: 140px !important;
        height: 64px !important;
        min-height: 64px;
        max-height: 64px;
        margin: 0;
        padding: 0 8px !important;
        box-sizing: border-box;
    }

    .navbar.leal-compact-navbar .navbar-brand.navbar-brand-logo .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        width: 100% !important;
        height: 44px !important;
        max-height: 44px;
        margin: 0;
        padding: 0;
    }

    .navbar.leal-compact-navbar .navbar-brand.navbar-brand-logo .brand img {
        display: block;
        width: auto;
        height: auto;
        max-width: 116px !important;
        max-height: 44px !important;
        margin: 0;
        object-fit: contain;
    }

    .navbar.leal-compact-navbar .navbar-collapse.collapse {
        display: flex !important;
        flex: 1 1 auto;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        height: 64px !important;
        min-height: 64px;
        max-height: 64px;
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .navbar.leal-compact-navbar .leal-primary-nav,
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 2px;
        min-width: 0;
        margin: 0 0 0 auto;
        padding: 0;
        list-style: none;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        float: none;
        height: 64px;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 44px;
        margin: 0;
        padding: 10px;
        border-radius: 7px;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        white-space: nowrap;
        text-transform: none;
        box-sizing: border-box;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a > i {
        position: relative;
        display: inline-block;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin: 0;
        font-size: 22px;
        line-height: 22px;
        text-align: center;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a > p {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a > i > .label {
        position: absolute;
        top: -6px;
        right: -7px;
        min-width: 16px;
        padding: 1px 4px;
        border-radius: 8px;
        background: #e54343;
        color: #fff;
        font-size: 10px;
        line-height: 14px;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a:hover,
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a:focus,
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li.open > a {
        background: rgba(255, 255, 255, .14);
        color: #fff;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .navbar.leal-compact-navbar .leal-nav-short {
        display: none;
    }

    .navbar.leal-compact-navbar .leal-more-dropdown > .leal-more-menu,
    .navbar.leal-compact-navbar .client-account-dropdown > .dropdown-menu {
        top: calc(100% - 2px);
        right: 0;
        left: auto;
        min-width: 248px;
        max-width: min(340px, calc(100vw - 24px));
        max-height: calc(100vh - 80px);
        margin: 0;
        padding: 8px;
        border: 1px solid #dce4ee;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(20, 43, 75, .18);
        text-align: left;
        overflow: auto;
    }

    body.admin-impersonating .navbar.leal-compact-navbar .leal-more-menu,
    body.admin-impersonating .navbar.leal-compact-navbar .client-account-dropdown-menu,
    body.account-financial-overdue .navbar.leal-compact-navbar .leal-more-menu,
    body.account-financial-overdue .navbar.leal-compact-navbar .client-account-dropdown-menu {
        max-height: calc(100vh - 122px);
    }

    body.account-double-banner .navbar.leal-compact-navbar .leal-more-menu,
    body.account-double-banner .navbar.leal-compact-navbar .client-account-dropdown-menu {
        max-height: calc(100vh - 164px);
    }

    .navbar.leal-compact-navbar .leal-more-menu > li > a,
    .navbar.leal-compact-navbar .client-account-dropdown-menu > li > a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        margin: 0;
        padding: 10px 12px;
        border-radius: 6px;
        color: #273c55;
        font-size: 14px;
        line-height: 20px;
        white-space: normal;
        text-transform: none;
    }

    .navbar.leal-compact-navbar .leal-more-menu > li > a > i,
    .navbar.leal-compact-navbar .client-account-dropdown-menu > li > a > i {
        flex: 0 0 20px;
        width: 20px;
        margin: 0;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
    }

    .navbar.leal-compact-navbar .leal-more-menu > li > a > p,
    .navbar.leal-compact-navbar .client-account-dropdown-menu > li > a > p {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
    }

    .navbar.leal-compact-navbar .leal-more-menu > li > a:hover,
    .navbar.leal-compact-navbar .leal-more-menu > li > a:focus,
    .navbar.leal-compact-navbar .client-account-dropdown-menu > li > a:hover,
    .navbar.leal-compact-navbar .client-account-dropdown-menu > li > a:focus {
        background: #eef3fb;
        color: #173d78;
    }
}

@media screen and (min-width: 768px) and (max-width: 1150px) {
    .navbar.leal-compact-navbar .leal-nav-long {
        display: none;
    }

    .navbar.leal-compact-navbar .leal-nav-short {
        display: inline;
    }

    /* The camera entry is an existing replace:true Angular component. Keep its
       text/accessible name and render a short visual label without new JS. */
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > .leal-nav-camera > a > p {
        font-size: 0;
    }

    .navbar.leal-compact-navbar .leal-nav-camera > a > p::after {
        content: 'Câmeras';
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .navbar.leal-compact-navbar > .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }

    .navbar.leal-compact-navbar .navbar-header {
        flex-basis: 108px;
    }

    .navbar.leal-compact-navbar .navbar-brand.navbar-brand-logo {
        width: 108px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .navbar.leal-compact-navbar .navbar-brand.navbar-brand-logo .brand img {
        max-width: 96px !important;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a {
        gap: 6px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12.5px;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a > p,
    .navbar.leal-compact-navbar .leal-nav-camera > a > p::after {
        font-size: 12.5px;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > .leal-nav-camera > a > p {
        font-size: 0;
    }

    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > li > a > i {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
    }
}

/* Keep map centering one click away without wrapping the tablet navigation. */
@media screen and (min-width:768px) and (max-width:1150px) {
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > .leal-nav-center > a {min-width:44px;width:44px;padding:10px;}
    .navbar.leal-compact-navbar .navbar-collapse > .navbar-nav > .leal-nav-center > a > p {display:none;}
}