/* ==========================================================================
   MENU TOGGLE DESKTOP  (>= 1200px / .visible-lg-block)

   Cria um menu lateral ESQUERDO retratil apenas para desktop.
   Fica fixo na borda esquerda da tela e "acompanha" o usuario na rolagem.

   NAO interfere em:
     - menu mobile  ( .row respx / .row respx2  -> id #dvMenu )
     - menu do topo desktop ( .faixa-topo.visible-lg-block )

   Os submenus abrem no proprio painel (position:static) para nao serem
   cortados pelo overflow do painel rolavel.
   ========================================================================== */

/* Por padrao escondido em TODAS as telas (celular/tablet).
   A media query abaixo reexibe somente no desktop. */
.mtd-toggle,
.mtd-panel,
.mtd-backdrop {
    display: none;
}

@media (min-width: 1200px) {

    /* ---------------------------------------------------------------- BOTAO */
    .mtd-toggle {
        display: block;
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 1202;
        width: 34px;
        margin-top: -34px; /* centro visual aproximado */
        padding: 14px 0;
        background-color: #2f83f1;
        color: #fff;
        border: 0;
        border-radius: 0 6px 6px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        cursor: pointer;
        text-align: center;
        opacity: .9;
        transition: background-color .2s ease, opacity .2s ease;
    }

    .mtd-toggle:hover,
    .mtd-toggle:focus {
        background-color: #1b6ad1;
        opacity: 1;
        outline: none;
    }

    .mtd-toggle .mtd-bars {
        display: block;
        width: 18px;
        height: 3px;
        margin: 3px auto;
        background: #fff;
        border-radius: 1px;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* icone vira "X" quando o menu esta aberto */
    .mtd-toggle.is-open .mtd-bars:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mtd-toggle.is-open .mtd-bars:nth-child(2) {
        opacity: 0;
    }

    .mtd-toggle.is-open .mtd-bars:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ------------------------------------------------------------- BACKDROP */
    .mtd-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1199;
        background-color: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
    }

    .mtd-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* --------------------------------------------------------------- PAINEL */
    .mtd-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1201;
        width: 160px;
        max-width: 85%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background-color: #2c3e50;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .45);
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transition: transform .28s ease;
    }

    .mtd-panel.is-open {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    /* ---------------------------------------------------------- CABECALHO */
    .mtd-head {
        padding: 12px 16px;
        background-color: #233140;
        border-bottom: 2px solid #F2B538;
    }

    .mtd-head a {
        display: block;
        text-decoration: none;
    }

    .mtd-head img {
        max-width: 100%;
        max-height: 48px;
        height: auto;
        float: none !important;
        border: 0;
    }

    /* --------------------------------------------------------------- MENU */
    .mtd-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mtd-nav > li > a {
        display: block;
        padding: 12px 18px;
        color: #fff;
        font-size: 16px;
        line-height: 1.3;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .mtd-nav > li > a:hover,
    .mtd-nav > li > a:focus,
    .mtd-nav > .open > a {
        background-color: rgba(255, 255, 255, .10) !important;
        color: #fff;
        text-decoration: none;
    }

    .mtd-nav > li > a .caret {
        margin-top: 3px;
    }

    .mtd-nav > li.active{
        background-color: #2c3e50;
    }

    /* --------------------------------------------- SUBMENUS (accordion) */
    /* position:static => o submenu abre dentro do painel e nao e cortado */
    .mtd-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-color: #35495e;
        box-shadow: none;
    }

    .mtd-nav .dropdown-menu > li > a {
        display: block;
        padding: 10px 18px 10px 32px;
        color: #ecf0f1;
        font-size: 15px;
        line-height: 1.3;
        text-decoration: none;
        white-space: normal;
    }

    .mtd-nav .dropdown-menu > li > a:hover,
    .mtd-nav .dropdown-menu > li > a:focus {
        background-color: rgba(255, 255, 255, .10);
        color: #fff;
        text-decoration: none;
    }

    /* nivel 3+ ganha um recuo maior */
    .mtd-nav .dropdown-menu .dropdown-menu > li > a {
        padding-left: 46px;
    }

    .mtd-nav .caret {
        color: inherit;
    }

    /* --------------------------------------------------------- SCROLLBAR */
    .mtd-panel::-webkit-scrollbar {
        width: 8px;
    }

    .mtd-panel::-webkit-scrollbar-track {
        background: #233140;
    }

    .mtd-panel::-webkit-scrollbar-thumb {
        background: #2f83f1;
        border-radius: 4px;
    }
}