/* =========================================================
   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;
}


/* ==========================================================
   FERNACOM WIFI MANAGER
   DESIGN SYSTEM GLOBAL
   ========================================================== */

:root {
    /* Marca */
    --fc-primary: #A41E35;
    --fc-primary-hover: #8f192e;

    /* Estrutura */
    --fc-sidebar: #18191b;
    --fc-page-bg: #f4f5f7;
    --fc-surface: #ffffff;

    /* Textos */
    --fc-text: #202124;
    --fc-text-secondary: #777777;
    --fc-text-muted: #929292;

    /* Bordas */
    --fc-border: #e5e5e5;
    --fc-border-light: #eeeeee;

    /* Estados */
    --fc-success: #16813b;
    --fc-success-bg: #e8f7ee;

    --fc-danger: #A41E35;
    --fc-danger-bg: #fdebed;

    --fc-warning: #8a6500;
    --fc-warning-bg: #fff7df;

    /* Tipografia */
    --fc-font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --fc-font-title: 28px;
    --fc-font-subtitle: 16px;
    --fc-font-body: 14px;
    --fc-font-small: 12px;
    --fc-font-label: 12px;

    /* Formas */
    --fc-radius: 8px;
    --fc-radius-card: 14px;

    /* Espaçamento */
    --fc-content-padding: 32px;
}


/* ==========================================================
   BASE
   ========================================================== */

html,
body {
    font-family: var(--fc-font) !important;
    color: var(--fc-text) !important;
}

body {
    background: var(--fc-page-bg) !important;
}

button,
input,
select,
textarea {
    font-family: var(--fc-font) !important;
}


/* ==========================================================
   CONTEÚDO
   ========================================================== */

.content,
.main .content {
    color: var(--fc-text);
}

.content h1,
.main .content h1,
body > .content h1 {
    margin: 0 0 6px 0 !important;

    color: var(--fc-text) !important;

    font-family: var(--fc-font) !important;
    font-size: var(--fc-font-title) !important;
    font-weight: 700 !important;
    line-height: 34px !important;

    letter-spacing: 0 !important;
}

.content .subtitle,
.main .content .subtitle,
body > .content .subtitle {
    margin-top: 0 !important;

    color: var(--fc-text-secondary) !important;

    font-family: var(--fc-font) !important;
    font-size: var(--fc-font-subtitle) !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}


/* ==========================================================
   TEXTOS
   ========================================================== */

.content p,
.content td,
.content th,
.content label,
.content input,
.content select,
.content textarea,
.content button {
    font-family: var(--fc-font) !important;
}

.content p,
.content td {
    font-size: var(--fc-font-body);
}


/* ==========================================================
   LABELS
   ========================================================== */

.content label {
    color: #555 !important;

    font-size: var(--fc-font-label) !important;
    font-weight: 600 !important;
    line-height: 16px !important;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

.content input:not([type="checkbox"]):not([type="radio"]),
.content select,
.content textarea {
    min-height: 42px;

    padding: 11px 12px !important;

    background: var(--fc-surface) !important;
    color: var(--fc-text) !important;

    border: 1px solid #dddddd !important;
    border-radius: var(--fc-radius) !important;

    font-size: var(--fc-font-body) !important;
    line-height: 18px !important;

    outline: none;
}

.content textarea {
    min-height: 90px;
}

.content input:focus,
.content select:focus,
.content textarea:focus {
    border-color: var(--fc-primary) !important;
    box-shadow: 0 0 0 3px rgba(164,30,53,.08) !important;
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.content .btn,
.content button:not(.unstyled) {
    min-height: 40px;

    padding: 10px 16px !important;

    border: 0;
    border-radius: var(--fc-radius) !important;

    font-family: var(--fc-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;

    text-decoration: none;

    cursor: pointer;
}

.content .btn-primary,
.content button[type="submit"] {
    background: var(--fc-primary) !important;
    color: #ffffff !important;
}

.content .btn-primary:hover,
.content button[type="submit"]:hover {
    background: var(--fc-primary-hover) !important;
}

.content .btn-secondary {
    background: #eeeeee !important;
    color: var(--fc-text) !important;
}


/* ==========================================================
   CARDS / PAINÉIS
   ========================================================== */

.content .card,
.content .panel {
    background: var(--fc-surface) !important;

    border: 1px solid var(--fc-border-light) !important;
    border-radius: var(--fc-radius-card) !important;

    box-shadow: 0 1px 3px rgba(0,0,0,.025);
}


/* ==========================================================
   TABELAS
   ========================================================== */

.content table {
    color: var(--fc-text);
}

.content th {
    color: var(--fc-text-secondary) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;

    letter-spacing: .4px;
}

.content td {
    color: var(--fc-text) !important;

    font-size: var(--fc-font-body) !important;
    line-height: 20px !important;
}

.content th,
.content td {
    border-color: var(--fc-border-light) !important;
}


/* ==========================================================
   MENSAGENS
   ========================================================== */

.content .erro,
.content .error,
.content .alert-danger {
    background: var(--fc-danger-bg) !important;
    color: var(--fc-danger) !important;

    border-radius: var(--fc-radius) !important;

    font-size: 13px !important;
}

.content .sucesso,
.content .success,
.content .alert-success {
    background: var(--fc-success-bg) !important;
    color: var(--fc-success) !important;

    border-radius: var(--fc-radius) !important;

    font-size: 13px !important;
}


/* ==========================================================
   BADGES
   ========================================================== */

.content .badge {
    padding: 6px 10px !important;

    border-radius: 999px !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

.content a {
    font-family: var(--fc-font);
}

.content a:not(.btn) {
    color: var(--fc-primary);
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.topbar {
    font-family: var(--fc-font) !important;
    color: var(--fc-text) !important;
}

.topbar .logout {
    color: var(--fc-primary) !important;
}


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

.sidebar {
    background: var(--fc-sidebar) !important;
}

.sidebar .menu a,
.sidebar > a {
    font-family: var(--fc-font) !important;
}

.sidebar .menu a.active,
.sidebar > a.active,
.sidebar .menu a:hover,
.sidebar > a:hover {
    background: var(--fc-primary) !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 750px) {

    :root {
        --fc-content-padding: 18px;
    }

    .content h1,
    .main .content h1,
    body > .content h1 {
        font-size: 25px !important;
        line-height: 31px !important;
    }

    .content .subtitle,
    .main .content .subtitle,
    body > .content .subtitle {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}



/* ==========================================================
   TOPBAR OFICIAL - TODAS AS PÁGINAS
   ========================================================== */

.topbar {
    height: 74px !important;
    min-height: 74px !important;

    padding: 0 32px !important;

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

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

    font-family: var(--fc-font) !important;
}

.topbar > div:first-child > strong {
    display: block !important;

    color: #202124 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

.topbar-right {
    display: flex !important;
    align-items: center !important;
}

.topbar .user-info {
    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;

    font-family: var(--fc-font) !important;
}

.topbar .user-name {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #202124 !important;

    font-family: var(--fc-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
}

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

    margin: 0 !important;
    padding: 0 !important;

    color: #888888 !important;

    font-family: var(--fc-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
}

.topbar .logout {
    display: block !important;

    margin: 0 0 0 20px !important;
    padding: 0 !important;

    color: #A41E35 !important;

    font-family: var(--fc-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;

    text-decoration: none !important;
}



/* ==========================================================
   FERNACOM WIFI MANAGER
   MOBILE NAVIGATION OFICIAL
   ========================================================== */

.mobile-menu-button {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}


@media (max-width: 750px) {

    /* ------------------------------------------------------
       SIDEBAR vira menu lateral deslizante
       ------------------------------------------------------ */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 285px !important;
        max-width: 85vw !important;

        height: 100vh !important;
        min-height: 100vh !important;

        padding: 22px 18px !important;

        overflow-y: auto !important;

        z-index: 1001 !important;

        transform: translateX(-105%) !important;
        transition: transform .25s ease !important;

        box-shadow: 8px 0 30px rgba(0,0,0,.18) !important;
    }

    body.mobile-menu-open .sidebar {
        transform: translateX(0) !important;
    }


    /* ------------------------------------------------------
       LOGO DO MENU
       ------------------------------------------------------ */

    .sidebar .logo,
    .sidebar > .logo {
        height: auto !important;
        min-height: 60px !important;

        margin: 0 0 24px 0 !important;

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

    .sidebar-logo {
        width: 190px !important;
        max-width: 100% !important;
        max-height: 60px !important;
        height: auto !important;
    }


    /* ------------------------------------------------------
       OVERLAY
       ------------------------------------------------------ */

    .mobile-menu-overlay {
        display: block;

        position: fixed;

        inset: 0;

        background: rgba(0,0,0,.38);

        z-index: 1000;

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    body.mobile-menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }


    /* ------------------------------------------------------
       BOTÃO HAMBÚRGUER
       ------------------------------------------------------ */

    .mobile-menu-button {
        display: flex !important;

        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        align-items: center;
        justify-content: center;

        margin-right: 12px;

        border: 0;
        border-radius: 9px;

        background: #A41E35;
        color: #ffffff;

        font-size: 22px;
        line-height: 1;

        cursor: pointer;
    }


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

    .topbar {
        width: 100% !important;

        height: 68px !important;
        min-height: 68px !important;

        margin-left: 0 !important;
        padding: 0 14px !important;

        position: relative !important;

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

    .topbar > div:first-child {
        display: flex !important;
        align-items: center !important;
    }

    .topbar > div:first-child > strong {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .topbar-right {
        margin-left: auto !important;
    }

    .topbar .user-name {
        max-width: 145px !important;

        font-size: 12px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .topbar .user-company {
        max-width: 145px !important;

        font-size: 10px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .topbar .logout {
        margin-left: 10px !important;
        font-size: 12px !important;
    }


    /* ------------------------------------------------------
       CONTEÚDO
       ------------------------------------------------------ */

    .wrapper {
        display: block !important;
        width: 100% !important;
    }

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

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

    body.mobile-menu-open {
        overflow: hidden !important;
    }
}