:root {
    --background: #f3f6f9;
    --surface: #ffffff;
    --primary: #102b46;
    --primary-light: #1b496d;
    --accent: #079a91;
    --text: #17212b;
    --muted: #677685;
    --border: #dfe6ed;
    --success: #117a56;
    --warning: #a86d00;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--background);
    color: var(--text);
    font-family: Arial, "Segoe UI", sans-serif;
}

button,
input {
    font: inherit;
}

.login-page {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1.1fr 0.9fr;
}

.login-presentation {
    display: flex;
    padding: 55px 65px;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(7, 154, 145, 0.35),
            transparent 35%
        ),
        linear-gradient(145deg, #0b2035, #17496f);
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand strong,
.brand span {
    display: block;
}

.brand span {
    margin-top: 3px;
    font-size: 13px;
    opacity: 0.72;
}

.brand-symbol {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: var(--accent);
    color: white;
    font-weight: 800;
}

.presentation-content {
    max-width: 590px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.presentation-content h1 {
    margin: 18px 0;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 1.05;
}

.presentation-content p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
    line-height: 1.7;
}

.login-area {
    display: flex;
    min-height: 100vh;
    padding: 35px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-card {
    width: min(430px, 100%);
    padding: 42px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: white;
    box-shadow: 0 20px 55px rgba(16, 43, 70, 0.14);
}

.login-card h2 {
    margin: 12px 0 8px;
    color: var(--primary);
    font-size: 32px;
}

.login-description,
.login-support,
footer {
    color: var(--muted);
}

.mobile-brand {
    display: none;
    color: var(--accent);
    font-weight: 800;
}

.form-group {
    margin-top: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

.form-control {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fafc;
    outline: none;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(7, 154, 145, 0.12);
}

.button-primary {
    width: 100%;
    min-height: 52px;
    margin-top: 24px;
    border: 0;
    border-radius: 11px;
    color: white;
    background: var(--primary);
    cursor: pointer;
    font-weight: 800;
}

.alert-error {
    margin: 20px 0;
    padding: 13px;
    border-radius: 10px;
    color: #8b2330;
    background: #fff0f2;
}

.login-support {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
}

footer {
    margin-top: 22px;
    font-size: 13px;
}

.dashboard-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 255px 1fr;
}

.sidebar {
    display: flex;
    padding: 28px 20px;
    flex-direction: column;
    color: white;
    background: var(--primary);
}

.sidebar-menu {
    display: flex;
    margin-top: 42px;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.menu-item {
    display: block;
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    text-decoration: none;
    text-align: left;
}

.menu-item.active,
.menu-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.12);
}

.menu-item.disabled {
    opacity: 0.4;
}

.logout-button {
    cursor: pointer;
}

.dashboard-main {
    padding: 40px;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-header h1 {
    margin: 8px 0 4px;
    color: var(--primary);
    font-size: 34px;
}

.dashboard-header p {
    margin: 0;
    color: var(--muted);
}

.user-badge {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: white;
}

.user-badge strong,
.user-badge span {
    display: block;
}

.user-badge span {
    color: var(--muted);
    font-size: 12px;
}

.user-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: white;
    background: var(--accent);
    font-weight: 800;
}

.status-grid {
    display: grid;
    margin-top: 34px;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.status-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: white;
}

.status-card span,
.status-card strong,
.status-card small {
    display: block;
}

.status-card span {
    color: var(--muted);
    font-size: 13px;
}

.status-card strong {
    margin: 10px 0;
    color: var(--primary);
    font-size: 21px;
}

.success {
    color: var(--success);
}

.warning {
    color: var(--warning);
}

.welcome-panel {
    margin-top: 24px;
    padding: 34px;
    border-radius: 21px;
    color: white;
    background: linear-gradient(
        120deg,
        var(--primary),
        var(--primary-light)
    );
}

.welcome-panel h2 {
    margin: 10px 0;
    font-size: 28px;
}

.welcome-panel p {
    color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 950px) {
    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .login-page {
        display: block;
    }

    .login-presentation {
        display: none;
    }

    .mobile-brand {
        display: block;
    }

    .dashboard-layout {
        display: block;
    }

    .dashboard-main {
        padding: 22px;
    }

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .login-area {
        padding: 18px;
    }

    .login-card {
        padding: 28px 22px;
    }

    .status-grid {
        grid-template-columns: 1fr;
    }
}

.message-list {
    margin-top: 24px;
}

.system-message {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
}

.system-message.success {
    color: #0d6648;
    border-color: #b8dfd1;
    background: #edfaf5;
}

.system-message.error {
    color: #8b2330;
    border-color: #f0c8ce;
    background: #fff0f2;
}

.api-status-grid {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.configuration-grid {
    display: grid;
    margin-top: 24px;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}

.settings-card,
.test-card,
.audit-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;
}

.settings-heading {
    display: flex;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-heading h2,
.test-card h2 {
    margin: 7px 0 0;
    color: var(--primary);
}

.status-pill {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-pill.success {
    color: #0d6648;
    background: #e5f7ef;
}

.status-pill.neutral {
    color: var(--muted);
    background: #eef2f5;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.6fr) 1.4fr;
    gap: 20px;
}

.form-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

.checkbox-panel {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fafc;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.form-actions {
    display: flex;
    margin-top: 26px;
    justify-content: flex-end;
    gap: 12px;
}

.action-button {
    width: auto;
    min-width: 210px;
    margin-top: 0;
    padding: 0 22px;
}

.button-secondary {
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--primary);
    background: white;
    cursor: pointer;
    font-weight: 700;
}

.test-card p {
    color: var(--muted);
    line-height: 1.6;
}

.test-details {
    display: grid;
    margin-top: 24px;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.test-details div {
    padding: 14px;
    border-radius: 11px;
    background: #f4f7fa;
}

.test-details span,
.test-details strong {
    display: block;
}

.test-details span {
    color: var(--muted);
    font-size: 12px;
}

.test-details strong {
    margin-top: 5px;
    color: var(--primary);
}

.security-note {
    margin-top: 20px;
    padding: 14px;
    border-left: 3px solid var(--accent);
    color: var(--muted);
    background: #f5fbfa;
    font-size: 13px;
    line-height: 1.5;
}

.audit-card {
    margin-top: 20px;
}

.audit-table-wrapper {
    overflow-x: auto;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
}

.audit-table th,
.audit-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
}

.audit-table th {
    color: var(--muted);
    background: #f8fafc;
}

@media (max-width: 950px) {
    .api-status-grid,
    .configuration-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button,
    .button-secondary {
        width: 100%;
    }
}

.integration-status {
    display: flex;
    margin: 10px 0;
    align-items: center;
    gap: 10px;
}

.integration-status strong {
    margin: 0;
}

.status-semaphore {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 50%;
}

.status-semaphore-online {
    background: #16a36a;
    box-shadow:
        0 0 0 4px rgba(22, 163, 106, 0.14),
        0 0 12px rgba(22, 163, 106, 0.45);
    animation: api-online-pulse 2s infinite;
}

.status-semaphore-offline {
    background: #d74343;
    box-shadow:
        0 0 0 4px rgba(215, 67, 67, 0.13);
}

.status-error {
    color: #b52f3a;
}

@keyframes api-online-pulse {
    0% {
        box-shadow:
            0 0 0 4px rgba(22, 163, 106, 0.14),
            0 0 8px rgba(22, 163, 106, 0.35);
    }

    50% {
        box-shadow:
            0 0 0 6px rgba(22, 163, 106, 0.08),
            0 0 14px rgba(22, 163, 106, 0.55);
    }

    100% {
        box-shadow:
            0 0 0 4px rgba(22, 163, 106, 0.14),
            0 0 8px rgba(22, 163, 106, 0.35);
    }
}

.status-card .api-connection-status {
    display: flex;
    margin: 10px 0;
    align-items: center;
    gap: 10px;
}

.status-card .api-connection-status strong {
    margin: 0;
}

.status-card .api-status-dot {
    display: inline-block;
    width: 12px;
    min-width: 12px;
    height: 12px;
    margin: 0;
    border-radius: 50%;
}

.status-card .api-status-dot-online {
    background-color: #16a36a;
    box-shadow:
        0 0 0 4px rgba(22, 163, 106, 0.14),
        0 0 12px rgba(22, 163, 106, 0.55);
    animation: api-status-pulse 2s ease-in-out infinite;
}

.status-card .api-status-dot-offline {
    background-color: #d74343;
    box-shadow:
        0 0 0 4px rgba(215, 67, 67, 0.14);
}

@keyframes api-status-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.78;
    }
}


/* ==========================================================
   BEGIN: emtech modern navigation rail v3

   Referência visual:
   - navigation rail moderna
   - ícones vetoriais outline
   - active pill
   - progressive disclosure
   - expansão sem deslocar dashboard
   ========================================================== */

@media (min-width: 1100px) {

    :root {
        --emtech-rail-width: 72px;
        --emtech-sidebar-width: 268px;

        --emtech-sidebar-bg:
            #102f49;

        --emtech-sidebar-bg-hover:
            #102f49;

        --emtech-nav-text:
            rgba(235, 244, 249, .78);

        --emtech-nav-muted:
            rgba(214, 229, 238, .50);

        --emtech-nav-icon:
            rgba(223, 237, 245, .72);

        --emtech-nav-accent:
            #24c2b5;

        --emtech-nav-active-bg:
            rgba(36, 194, 181, .14);

        --emtech-nav-hover-bg:
            rgba(255, 255, 255, .065);
    }


    /* ======================================================
       ESTRUTURA
       ====================================================== */

    .dashboard-layout {
        grid-template-columns:
            var(--emtech-rail-width)
            minmax(0, 1fr);
    }


    .dashboard-main {
        min-width: 0;
    }


    .sidebar {
        position: sticky;

        top: 0;

        z-index: 100;

        align-self: start;

        width:
            var(--emtech-rail-width);

        height: 100vh;
        min-height: 100vh;

        padding:
            22px
            12px;

        overflow: hidden;

        color: #ffffff;

        background:
            var(--emtech-sidebar-bg);

        border-right:
            1px solid
            rgba(255, 255, 255, .045);

        box-shadow:
            4px 0 18px
            rgba(5, 20, 32, .05);

        transition:
            width .22s
                cubic-bezier(
                    .4,
                    0,
                    .2,
                    1
                ),
            padding .22s
                cubic-bezier(
                    .4,
                    0,
                    .2,
                    1
                ),
            box-shadow .22s ease;

        will-change:
            width;
    }


    .sidebar:hover,
    .sidebar:focus-within {
        width:
            var(--emtech-sidebar-width);

        padding-left: 16px;
        padding-right: 16px;

        background:
            var(--emtech-sidebar-bg-hover);

        box-shadow:
            18px 0 46px
            rgba(4, 20, 33, .20);
    }


    /* ======================================================
       MARCA
       ====================================================== */

    .sidebar .brand,
    .sidebar .sidebar-brand {
        display: grid;

        width: 236px;

        grid-template-columns:
            48px
            minmax(0, 1fr);

        align-items: center;

        gap: 13px;
    }


    .sidebar .brand-symbol {
        width: 48px;
        height: 48px;

        flex: 0 0 48px;

        border-radius: 14px;

        box-shadow:
            0 7px 20px
            rgba(0, 0, 0, .08);

        transition:
            border-radius .2s ease,
            transform .2s ease;
    }


    .sidebar:hover .brand-symbol,
    .sidebar:focus-within .brand-symbol {
        border-radius: 13px;
    }


    .sidebar .brand
    > :not(.brand-symbol),

    .sidebar .sidebar-brand
    > :not(.brand-symbol) {
        min-width: 0;

        opacity: 0;

        visibility: hidden;

        transform:
            translateX(-6px);

        transition:
            opacity .12s ease,
            transform .18s ease,
            visibility 0s linear .16s;
    }


    .sidebar:hover .brand
    > :not(.brand-symbol),

    .sidebar:focus-within .brand
    > :not(.brand-symbol),

    .sidebar:hover .sidebar-brand
    > :not(.brand-symbol),

    .sidebar:focus-within .sidebar-brand
    > :not(.brand-symbol) {
        opacity: 1;

        visibility: visible;

        transform:
            translateX(0);

        transition:
            opacity .16s ease .06s,
            transform .18s ease .04s,
            visibility 0s;
    }


    /* ======================================================
       MENU
       ====================================================== */

    .sidebar-menu {
        width: 236px;

        margin-top: 34px;

        gap: 6px;
    }


    /*
     * Links, grupos e logout compartilham a mesma linguagem.
     */

    .sidebar .menu-item,
    .sidebar .module-sidebar-trigger,
    .sidebar .logout-button {
        position: relative;

        display: grid;

        width: 236px;

        min-height: 44px;

        padding:
            10px
            12px;

        grid-template-columns:
            22px
            minmax(0, 1fr);

        align-items: center;

        gap: 12px;

        border:
            1px solid
            transparent;

        border-radius: 11px;

        color:
            var(--emtech-nav-text);

        background:
            transparent;

        font-size: 13px;
        font-weight: 520;

        line-height: 1.2;

        text-decoration: none;

        white-space: nowrap;

        transition:
            color .14s ease,
            background .14s ease,
            border-color .14s ease;
    }


    .sidebar .module-sidebar-trigger {
        grid-template-columns:
            22px
            minmax(0, 1fr)
            14px;
    }


    .sidebar .menu-item:hover,
    .sidebar .module-sidebar-trigger:hover,
    .sidebar .logout-button:hover {
        color: #ffffff;

        background:
            var(--emtech-nav-hover-bg);

        border-color:
            rgba(255, 255, 255, .025);
    }


    /* ======================================================
       ÍCONE BASE
       ====================================================== */

    .sidebar .menu-item::before,
    .sidebar .module-sidebar-trigger::before,
    .sidebar .logout-button::before {
        display: block;

        width: 20px;
        height: 20px;

        flex: 0 0 20px;

        background:
            currentColor;

        content: "";

        opacity: .90;

        -webkit-mask-repeat:
            no-repeat;

        mask-repeat:
            no-repeat;

        -webkit-mask-position:
            center;

        mask-position:
            center;

        -webkit-mask-size:
            20px
            20px;

        mask-size:
            20px
            20px;
    }


    /* ======================================================
       VISÃO GERAL
       Ícone dashboard/grid
       ====================================================== */

    .sidebar
    .sidebar-menu
    > a[href^="/dashboard/"]::before {
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2' fill='black'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2' fill='black'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2' fill='black'/%3E%3C/svg%3E");
    }


    /* ======================================================
       COMERCIAL
       Ícone analytics
       ====================================================== */

    .sidebar
    .module-sidebar-group[data-module="commercial"]
    > .module-sidebar-trigger::before {
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='13' width='3.5' height='7' rx='1.2' fill='black'/%3E%3Crect x='10.25' y='8' width='3.5' height='12' rx='1.2' fill='black'/%3E%3Crect x='16.5' y='4' width='3.5' height='16' rx='1.2' fill='black'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='13' width='3.5' height='7' rx='1.2' fill='black'/%3E%3Crect x='10.25' y='8' width='3.5' height='12' rx='1.2' fill='black'/%3E%3Crect x='16.5' y='4' width='3.5' height='16' rx='1.2' fill='black'/%3E%3C/svg%3E");
    }


    /* ======================================================
       COBRANÇA
       Ícone cartão/financeiro
       ====================================================== */

    .sidebar
    .module-sidebar-group[data-module="billing"]
    > .module-sidebar-trigger::before {
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18' stroke='black' stroke-width='2'/%3E%3Crect x='6' y='13' width='5' height='2' rx='1' fill='black'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18' stroke='black' stroke-width='2'/%3E%3Crect x='6' y='13' width='5' height='2' rx='1' fill='black'/%3E%3C/svg%3E");
    }


    /* ======================================================
       ADMINISTRAÇÃO
       Ícone controles/sliders
       ====================================================== */

    .sidebar
    .sidebar-menu
    > a[href="/admin/"]::before {
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h5M15 7h5M4 17h9M19 17h1'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='16' cy='17' r='3'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h5M15 7h5M4 17h9M19 17h1'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='16' cy='17' r='3'/%3E%3C/svg%3E");
    }


    /* ======================================================
       LOGOUT
       ====================================================== */

    .sidebar .logout-button::before {
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/svg%3E");
    }


    /* ======================================================
       ESTADO ATIVO
       ====================================================== */

    .sidebar .menu-item.active,
    .sidebar .menu-item.menu-item-active,

    .sidebar
    .module-sidebar-group:has(
        .module-sidebar-subitem.active
    )
    > .module-sidebar-trigger {
        color:
            #5be0d5;

        background:
            var(--emtech-nav-active-bg);

        border-color:
            rgba(36, 194, 181, .08);

        font-weight: 700;
    }


    /* ======================================================
       SUBMENUS
       ====================================================== */

    .sidebar .module-sidebar-group {
        width: 236px;

        margin:
            2px
            0;
    }


    .sidebar .module-sidebar-submenu {
        margin:
            4px
            0
            7px
            33px;

        padding:
            3px
            0
            3px
            12px;

        gap: 2px;

        border-left:
            1px solid
            rgba(255, 255, 255, .10);
    }


    .sidebar .module-sidebar-subitem {
        min-height: 34px;

        padding:
            8px
            10px;

        color:
            var(--emtech-nav-muted);

        border-radius: 8px;

        font-size: 12px;
    }


    .sidebar .module-sidebar-subitem:hover {
        color:
            rgba(255, 255, 255, .92);

        background:
            rgba(255, 255, 255, .045);
    }


    .sidebar .module-sidebar-subitem.active,
    .sidebar .module-sidebar-subitem.active:link,
    .sidebar .module-sidebar-subitem.active:visited {
        color: #ffffff;

        background:
            rgba(255, 255, 255, .07);

        font-weight: 650;
    }


    .sidebar .module-sidebar-arrow {
        width: 6px;
        height: 6px;

        opacity: .52;

        border-width: 1.5px;

        transition:
            transform .18s ease;
    }


    /* ======================================================
       RAIL RECOLHIDA
       ====================================================== */

    .sidebar:not(:hover):not(:focus-within)
    .sidebar-menu {
        width: 48px;
    }


    .sidebar:not(:hover):not(:focus-within)
    .sidebar-menu
    > .menu-item,

    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-trigger,

    .sidebar:not(:hover):not(:focus-within)
    .logout-button {
        width: 48px;

        min-width: 48px;

        height: 44px;
        min-height: 44px;

        padding: 0;

        grid-template-columns:
            48px;

        gap: 0;

        justify-items: center;

        overflow: hidden;

        color:
            var(--emtech-nav-icon);

        font-size: 0;

        border-radius: 12px;
    }


    .sidebar:not(:hover):not(:focus-within)
    .sidebar-menu
    > .menu-item::before,

    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-trigger::before,

    .sidebar:not(:hover):not(:focus-within)
    .logout-button::before {
        grid-column: 1;
        grid-row: 1;

        margin: 0;
    }


    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-trigger
    > span,

    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-submenu {
        display: none;
    }


    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-group {
        width: 48px;
    }


    .sidebar:not(:hover):not(:focus-within)
    > form {
        width: 48px;
    }


    /*
     * Deixa o item atual evidente sem exagero.
     */
    .sidebar:not(:hover):not(:focus-within)
    .menu-item.active,

    .sidebar:not(:hover):not(:focus-within)
    .menu-item.menu-item-active,

    .sidebar:not(:hover):not(:focus-within)
    .module-sidebar-group:has(
        .module-sidebar-subitem.active
    )
    > .module-sidebar-trigger {
        color:
            var(--emtech-nav-accent);

        background:
            var(--emtech-nav-active-bg);

        box-shadow:
            inset 3px 0 0
            rgba(36, 194, 181, .75);
    }


    /* ======================================================
       EXPANSÃO
       ====================================================== */

    .sidebar:hover .sidebar-menu,
    .sidebar:focus-within .sidebar-menu {
        width: 236px;
    }


    /*
     * Texto aparece suavemente sem movimentar gráficos.
     */
    .sidebar .sidebar-menu,
    .sidebar > form {
        transition:
            opacity .13s ease,
            transform .18s ease;
    }


    /*
     * Não usamos mais a seta grande flutuando
     * no meio da sidebar.
     */
    .sidebar::after {
        display: none !important;
        content: none !important;
    }


    /* ======================================================
       LOGOUT
       ====================================================== */

    .sidebar > form {
        width: 236px;
    }


    .sidebar .logout-button {
        color:
            rgba(216, 231, 239, .66);
    }


    .sidebar .logout-button:hover {
        color:
            #ffffff;

        background:
            rgba(255, 255, 255, .06);
    }
}


/* END: emtech modern navigation rail v3 */


/* ==========================================================
   BEGIN: suporte interno navigation icon v1
   Headset / service desk
   ========================================================== */

@media (min-width: 1100px) {

    /*
     * Terceiro grupo da navegação:
     * Suporte Interno.
     *
     * Segue a mesma linguagem visual do rail corporativo.
     */

    .sidebar
    .module-sidebar-group[data-module="support"]
    > .module-sidebar-trigger::before {

        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M18 19c0 1.1-.9 2-2 2h-3'/%3E%3Crect x='3' y='13' width='4' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4' height='6' rx='2'/%3E%3C/svg%3E");

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M18 19c0 1.1-.9 2-2 2h-3'/%3E%3Crect x='3' y='13' width='4' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4' height='6' rx='2'/%3E%3C/svg%3E");
    }

}


/* END: suporte interno navigation icon v1 */