/* ==================================================
   VENDRIX ERP - APP CSS
   Personalizações do sistema
================================================== */


/* ---------- Base ---------- */

body {
    background: #f5f7fb;
}


/* ---------- Layout principal ---------- */

.main {
    min-height: 100vh;
}


/* ---------- Sidebar ---------- */

.navbar-vertical {
    box-shadow: 0 0 15px rgba(0,0,0,.05);
}

.navbar-vertical .navbar-brand {
    padding: 1rem;
}

.navbar-vertical .nav-link {
    font-weight: 500;
}

.navbar-vertical .nav-link:hover {
    background: rgba(0,0,0,.04);
}


/* ---------- Navbar superior ---------- */

.navbar-expand-md {
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}


/* ---------- Conteúdo ---------- */

.page-wrapper {
    background: #f5f7fb;
}

.page-body {
    padding-top: 1rem;
}


/* ---------- Cards Dashboard ---------- */

.card {
    border-radius: 12px;
    border: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}


/* ---------- Tabelas ---------- */

.table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
}


/* ---------- Botões ---------- */

.btn {
    border-radius: 8px;
}


/* ---------- Footer ---------- */

.footer {
    margin-top: auto;
    background: transparent;
}


/* ---------- Ajustes Mobile ---------- */

@media (max-width: 768px) {

    .page-body {
        padding: 1rem;
    }

}


/* ==========================================================================
   SIDEBAR VENDRIX
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.navbar-vertical {
    transition:
        width 0.2s ease,
        transform 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/


.navbar-brand-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 4rem;
    padding: 0.75rem 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
}

.navbar-brand-image {
    display: block;
    max-width: 170px;
    max-height: 48px;
    width: auto;
    height: auto;
}




/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

.navbar-vertical .navbar-nav {
    width: 100%;
}

.navbar-vertical .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    border-radius: 0.5rem;
}

.navbar-vertical .nav-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-width: 1.75rem;
}

.navbar-vertical .nav-link-icon i {
    font-size: 1.1rem;
}

.navbar-vertical .nav-link-title {
    margin-left: 0.25rem;
}


/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.navbar-vertical .nav-link .badge {
    margin-left: auto;
    font-size: 0.7rem;
    line-height: 1;
    min-width: 1.35rem;
    padding: 0.3rem 0.4rem;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR ESCONDIDO
|--------------------------------------------------------------------------
|
| A classe é colocada no BODY pelo JavaScript:
|
| body.sidebar-hidden
|
*/

body.sidebar-hidden .navbar-vertical {
    width: 0;
    min-width: 0;
    overflow: hidden;
    transform: translateX(-100%);
}


/*
|--------------------------------------------------------------------------
| ÁREA PRINCIPAL
|--------------------------------------------------------------------------
|
| Quando o sidebar desaparece, o conteúdo deve ocupar
| automaticamente o espaço disponível.
|
*/

body.sidebar-hidden .page {
    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| TRANSIÇÃO DA PÁGINA
|--------------------------------------------------------------------------
*/

.page {
    transition:
        margin-left 0.2s ease,
        width 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
|
| No telemóvel deixamos o comportamento normal do Tabler.
|
*/

@media (max-width: 991.98px) {

    body.sidebar-hidden .navbar-vertical {
        width: auto;
        min-width: auto;
        transform: none;
        overflow: visible;
    }

}


/* ==========================================================================
   BADGES DO SIDEBAR
   ========================================================================== */

.navbar-vertical .nav-link {
    position: relative;
}

.navbar-vertical .nav-link .badge {
    margin-left: auto;
    border-radius: 999px;
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
}



/* ==========================================================================
   NAVBAR FIXO
   ========================================================================== */

header.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}


/*
|--------------------------------------------------------------------------
| Espaço para o conteúdo não ficar por baixo da navbar
|--------------------------------------------------------------------------
*/

body {
    padding-top: 4rem;
}


/*
|--------------------------------------------------------------------------
| Quando existe sidebar
|--------------------------------------------------------------------------
*/

@media (min-width: 992px) {

    header.navbar {
        left: var(--tblr-sidebar-width, 15rem);
    }

}


/*
|--------------------------------------------------------------------------
| Quando o sidebar está escondido
|--------------------------------------------------------------------------
*/

@media (min-width: 992px) {

    body.sidebar-hidden header.navbar {
        left: 0;
    }

}


/*
|--------------------------------------------------------------------------
| Telemóvel
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    header.navbar {
        left: 0;
    }

}

/* ==========================================================================
   SIDEBAR VENDRIX
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.sidebar-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 1.5rem;
}


.sidebar-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
}


.sidebar-logo-image {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 55px;
    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/

#sidebar-menu {
    width: 100%;
}


#sidebar-menu .navbar-nav {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

#sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
}


#sidebar-menu .nav-link-icon {
    width: 2rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


#sidebar-menu .nav-link-title {
    flex: 1;
}


/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

#sidebar-menu .nav-link .badge {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
}