/* =========================================================
   FERNACOM WIFI MANAGER
   Layout global: Sidebar + Topbar + Navegação
   ========================================================= */

:root {
    --fernacom-red: #A41E35;
    --sidebar-bg: #18191b;
    --sidebar-width: 255px;
    --topbar-height: 74px;
}

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

.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: var(--sidebar-width) !important;
    height: 100vh !important;

    background: var(--sidebar-bg) !important;
    color: #fff !important;

    padding: 27px 20px !important;
    overflow-y: auto;
    z-index: 1000;
}

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

.sidebar .logo,
.sidebar > .logo {
    height: 58px !important;
    margin: 0 0 32px 0 !important;

    display: flex !important;
    align-items: center !important;

    font-size: 0 !important;
    line-height: 1 !important;
}

.sidebar-logo {
    display: block !important;

    width: 195px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 58px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

/* ---------- TÍTULOS DOS GRUPOS ---------- */

.sidebar .menu-title,
.sidebar .section {
    display: block !important;

    margin: 25px 10px 10px !important;
    padding: 0 !important;

    color: #888 !important;

    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 14px !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

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

.sidebar .menu a,
.sidebar > a {
    display: block !important;

    width: 100% !important;
    min-height: 42px !important;

    margin: 0 0 5px 0 !important;
    padding: 12px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #c8c8c8 !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        color .15s ease;
}

.sidebar .menu a:hover,
.sidebar > a:hover,
.sidebar .menu a.active,
.sidebar > a.active {
    background: var(--fernacom-red) !important;
    color: #fff !important;
}

.sidebar .menu a.active,
.sidebar > a.active {
    font-weight: 500 !important;
}

/* ---------- TOPBAR ---------- */

.topbar {
    position: relative !important;

    width: auto !important;
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;

    margin-left: var(--sidebar-width) !important;

    padding: 0 32px !important;

    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    z-index: 100;
}

.topbar > strong,
.topbar > div > strong {
    font-size: 14px;
    font-weight: 700;
}

/* ---------- USUÁRIO ---------- */

.topbar .user,
.topbar .user-info {
    text-align: right !important;
    margin: 0 !important;

    color: #202124;
    font-size: 13px !important;
    line-height: 17px !important;
}

.topbar .user strong,
.topbar .user-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.topbar .user small,
.topbar .user-company {
    display: block !important;

    color: #888 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* ---------- SAIR ---------- */

.topbar .logout {
    margin-left: 20px !important;

    color: var(--fernacom-red) !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

/* ---------- ÁREA PRINCIPAL ---------- */

/*
   Páginas antigas usam .content diretamente.
   Dashboard/Funcionários usam .wrapper + .main.
*/

body > .content {
    margin-left: var(--sidebar-width) !important;
}

.wrapper {
    min-height: 100vh;
}

.wrapper > .main {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    min-width: 0 !important;
}

/*
   Dentro do .main a topbar não precisa de outro deslocamento,
   pois o próprio .main já começa depois da sidebar.
*/

.wrapper > .main > .topbar {
    margin-left: 0 !important;
}

/* Conteúdo padrão */

.wrapper > .main > .content {
    margin-left: 0 !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 750px) {

    .sidebar {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 18px !important;

        overflow: visible !important;
    }

    .sidebar .logo,
    .sidebar > .logo {
        height: 50px !important;
        margin-bottom: 16px !important;
    }

    .sidebar-logo {
        width: 180px !important;
        max-height: 50px !important;
    }

    .sidebar .menu-title,
    .sidebar .section {
        margin: 18px 8px 8px !important;
    }

    .sidebar .menu a,
    .sidebar > a {
        min-height: 40px !important;
        padding: 11px 12px !important;
    }

    .topbar {
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;

        margin-left: 0 !important;
        padding: 0 18px !important;
    }

    body > .content {
        margin-left: 0 !important;
    }

    .wrapper {
        display: block !important;
    }

    .wrapper > .main {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ===== Logo da tela de login ===== */
.login-logo {
    width: 100%;
    max-width: 250px !important;
    height: auto !important;
    margin: 0 auto 18px !important;
    object-fit: contain;
}


/* ==========================================================
   FERNACOM WIFI MANAGER
   PADRONIZAÇÃO GLOBAL DE TIPOGRAFIA
   ========================================================== */

/* Fonte padrão do sistema */
html,
body,
button,
input,
select,
textarea {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;
}

/* Título principal de todas as páginas */
.content h1,
.main .content h1,
body > .content h1 {
    margin-top: 0 !important;
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
}

/* Subtítulo abaixo do título */
.content .subtitle,
.main .content .subtitle,
body > .content .subtitle {
    font-size: 16px !important;
    line-height: 22px !important;
    color: #777 !important;
}

/* Menu lateral */
.sidebar .menu a,
.sidebar > a {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400;
}

/* Item ativo continua com destaque */
.sidebar .menu a.active,
.sidebar > a.active {
    font-weight: 600 !important;
}

/* Títulos GERENCIAMENTO / SISTEMA */
.sidebar .menu-title,
.sidebar .section {
    font-size: 10px !important;
    line-height: 14px !important;
}

/* Barra superior */
.topbar {
    font-size: 14px !important;
}

.topbar > strong {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Nome do usuário */
.topbar .user strong,
.topbar .user-name {
    font-size: 14px !important;
    line-height: 17px !important;
}

/* Empresa / perfil abaixo do usuário */
.topbar .user small,
.topbar .user-company {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 400 !important;
}

/* Sair */
.topbar .logout {
    font-size: 13px !important;
    font-weight: 600 !important;
}


/* Padroniza títulos de seção das páginas antigas */
.sidebar .section-title {
    color: #929292 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 2px !important;
    margin: 30px 10px 12px !important;
}

/* ==========================================================
   PADRONIZAÇÃO DEFINITIVA DO MENU LATERAL
   ========================================================== */

.sidebar .menu a,
.sidebar > a {
    display: block !important;
    padding: 14px 12px !important;
    margin: 4px 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

/* Títulos: GERENCIAMENTO / SISTEMA */
.sidebar .menu-title,
.sidebar .section,
.sidebar .section-title {
    color: #929292 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 2px !important;
    margin: 30px 10px 12px !important;
}