/* WebSgi/wwwroot/css/site.css */

/* ==============================
   Tokens / Base
   ============================== */
:root {
    --bg0: #070A12;
    --bg1: #0B1220;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.08);
    --border: rgba(255,255,255,.12);
    --muted: rgba(255,255,255,.62);
    --brand: #7c3aed;
    --brand2: #22c55e;
    --glow: 0 0 .8rem rgba(124,58,237,.35), 0 0 2.6rem rgba(124,58,237,.18);
    --radius: 18px;
    --radius-sm: 14px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

/* Body do projeto (mantém o que você já usa) */
.bs-body {
    background: radial-gradient(1200px 700px at 12% 12%, rgba(124,58,237,.22), transparent 55%), radial-gradient(900px 600px at 92% 18%, rgba(34,197,94,.12), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg0));
    color: #e5e7eb;
    min-height: 100vh;
}

/* ==============================
   Helpers
   ============================== */
.text-white-75 {
    color: rgba(255,255,255,.78) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.border-secondary {
    border-color: rgba(255,255,255,.12) !important;
}

a {
    color: #86b7ff;
    text-decoration: none;
}

    a:hover {
        color: #b6d4fe;
        text-decoration: none;
    }

/* ==============================
   Brand / Buttons
   ============================== */
.brand-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #a78bfa, #7c3aed);
    box-shadow: var(--glow);
}

.btn-glow {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff !important;
    border: 0;
    box-shadow: var(--glow);
    transition: filter .12s ease, transform .12s ease;
}

    .btn-glow:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .btn-glow:active {
        transform: translateY(0);
    }

/* Bootstrap buttons (ajuste dark) */
.btn-primary {
    background-color: rgba(124,58,237,.9) !important;
    border-color: rgba(124,58,237,.9) !important;
}

    .btn-primary:hover {
        filter: brightness(1.05);
    }

/* ==============================
   Public Shell (não logado)
   ============================== */
.public-topbar {
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
}

.public-footer {
    background: #05060a;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* Hero */
.hero {
    position: relative;
    padding: 4.5rem 0 3.5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(30px);
    opacity: .35;
    mix-blend-mode: screen;
    animation: floaty 8s ease-in-out infinite;
}

.orb-1 {
    width: 260px;
    height: 260px;
    left: -60px;
    top: 40px;
    background: #7c3aed;
}

.orb-2 {
    width: 220px;
    height: 220px;
    right: -70px;
    top: 120px;
    background: #22c55e;
    animation-delay: -2.5s;
}

.orb-3 {
    width: 180px;
    height: 180px;
    right: 80px;
    bottom: -40px;
    background: #60a5fa;
    animation-delay: -4s;
}

@keyframes floaty {
    0%, 100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(0,-18px);
    }
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.9);
}

.glass-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(124,58,237,.35);
    color: #e9d5ff;
    font-size: .75rem;
}

.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.metric {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.10);
}

.metric-value {
    font-weight: 800;
}

.metric-label {
    font-size: .85rem;
    color: rgba(255,255,255,.72);
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
}

.mini {
    padding: .75rem;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
}

.mini-title {
    font-weight: 800;
}

.mini-text {
    font-size: .85rem;
    color: rgba(255,255,255,.72);
}

.section {
    padding: 4rem 0;
}

.feature-card {
    height: 100%;
    padding: 1.4rem;
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 12px 45px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 60px rgba(0,0,0,.32);
    }

.icon-bubble {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(124,58,237,.35);
    box-shadow: var(--glow);
}

.cta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

/* ==============================
   App Shell (logado)
   ============================== */
.app-shell {
    height: 100vh;
    overflow: hidden;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    background: rgba(0,0,0,.35);
    border-right: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden; /* scroll fica no miolo (app-sidebar-scroll) */
}

.app-brand {
    padding: .5rem .5rem 1rem;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .25rem;
}

/*
   Sidebar: área rolável.
   Sem isso, quando o menu cresce o conteúdo “estoura” a viewport e não aparece scrollbar.
*/
.app-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT para overflow funcionar em flex */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .15rem; /* evita que a barra esconda o conteúdo */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-nav-title {
    margin-top: .5rem;
    font-size: .75rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .6rem .6rem .35rem;
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    position: relative;
    text-decoration: none;
    color: rgba(255,255,255,.88);
    padding: .65rem .7rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.app-nav-item:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.10);
    }

.app-nav-item--module {
    font-weight: 600;
}

.app-nav-item--submenu {
    margin-left: .6rem;
    padding-left: 2.1rem;
    font-size: .95rem;
    color: rgba(255,255,255,.78);
}

.app-nav-submenu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-left: .2rem;
}

.app-nav-submenu.show {
    display: flex;
}

.nav-caret {
    color: rgba(255,255,255,.55);
    transition: transform .18s ease, color .18s ease;
}

.app-nav-item[data-bs-toggle="collapse"][aria-expanded="true"] .nav-caret {
    transform: rotate(90deg);
    color: rgba(255,255,255,.86);
}

.app-nav-ico {
    width: 22px;
    display: inline-grid;
    place-items: center;
    opacity: .92;
}

.app-nav-item.is-active {
    background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(124,58,237,.06));
    border-color: rgba(124,58,237,.35);
    box-shadow: 0 0 0 1px rgba(124,58,237,.10), 0 16px 50px rgba(0,0,0,.28);
}

    .app-nav-item.is-active .app-nav-ico {
        color: #a78bfa;
    }

.app-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.app-main {
    margin-left: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    position: relative;
    z-index: 1;
}

.app-sidebar {
    z-index: 1040;
}

.app-topbar {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1040; /* dropdown acima do conteúdo */
}


.app-topbar-title {
    font-weight: 800;
}

.app-topbar-subtitle {
    font-size: .85rem;
}

.app-user {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.app-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(124,58,237,.20);
    border: 1px solid rgba(124,58,237,.35);
    box-shadow: var(--glow);
    font-weight: 900;
}

.app-user-name {
    font-weight: 700;
    line-height: 1.1;
}

.app-user-email {
    font-size: .82rem;
    color: rgba(255,255,255,.62);
    line-height: 1.1;
}

.app-content {
    padding: 5px;
    overflow: auto;
}

.app-footer {
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.18);
}

.app-hero-card {
    padding: 1.2rem 1.25rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.app-hero-title {
    font-weight: 900;
    font-size: 1.05rem;
}

.app-hero-subtitle {
    font-size: .85rem;
}

.app-tile {
    display: block;
    height: 100%;
    padding: 1.1rem 1.1rem;
    border-radius: var(--radius);
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--border);
    color: rgba(255,255,255,.90);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .app-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 60px rgba(0,0,0,.30);
    }

.app-tile-kicker {
    font-size: .78rem;
    color: rgba(255,255,255,.60);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.app-tile-title {
    font-weight: 900;
    font-size: 1.05rem;
    margin-top: .15rem;
}

.app-tile-desc {
    color: rgba(255,255,255,.64);
    margin-top: .25rem;
}

.app-page-card {
    padding: 1.25rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

/* Pequenos cards key/value */
.kv {
    padding: .9rem;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
}

.kv-k {
    font-size: .78rem;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.kv-v {
    font-weight: 800;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
}

.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==============================
   App Shell Enhancements
   Sidebar collapse + dropdown sólido
   ============================== */
.app-sidebar,
.app-main {
    transition: width .22s ease, margin-left .22s ease, padding .22s ease;
}

/* Dropdown (bootstrap) sólido no topbar */
.app-topbar .dropdown-menu-dark {
    --bs-dropdown-bg: #0b1220;
    --bs-dropdown-border-color: rgba(255,255,255,.12);
    --bs-dropdown-divider-bg: rgba(255,255,255,.10);
    --bs-dropdown-link-color: rgba(255,255,255,.88);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
    --bs-dropdown-link-active-bg: rgba(124,58,237,.22);
}

.app-topbar .dropdown-menu {
    background-color: #0b1220 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.55);
    backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 2000;
}

.app-topbar .dropdown-item {
    border-radius: 10px;
}

    .app-topbar .dropdown-item:active {
        background: rgba(124,58,237,.22);
    }

/* Botão toggle sidebar */
.app-sidebar-toggle {
    width: 36px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .app-sidebar-toggle:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 35px rgba(0,0,0,.28);
    }

.app-shell.sidebar-collapsed .app-sidebar-toggle i {
    transform: rotate(180deg);
    transition: transform .22s ease;
}

/* Estado recolhido (desktop/tablet) */
@media (min-width: 769px) {
    .app-shell.sidebar-collapsed .app-sidebar {
        width: 84px;
        padding: .9rem .75rem;
    }

    .app-shell.sidebar-collapsed .app-main {
        margin-left: 84px;
    }

    .app-shell.sidebar-collapsed .app-nav-title {
        display: none;
    }

    .app-shell.sidebar-collapsed .brand-text {
        display: none;
    }

    .app-shell.sidebar-collapsed .app-brand a {
        justify-content: center;
    }

    .app-shell.sidebar-collapsed .app-nav-item {
        justify-content: center;
        padding: .72rem .55rem;
        z-index: 1000
    }

    .app-shell.sidebar-collapsed .app-nav-label {
        display: none !important;
    }

    /* Quando colapsado: esconder caret (chevron) e qualquer extra fora do label */
    .app-shell.sidebar-collapsed .app-nav-item .ms-auto,
    .app-shell.sidebar-collapsed .app-nav-item .nav-caret {
        display: none !important;
    }

    /* Não renderizar submenus inline no sidebar colapsado (fica no flyout) */
    .app-shell.sidebar-collapsed .app-nav .collapse {
        display: none !important;
    }

    .app-shell.sidebar-collapsed .app-nav-item--submenu {
        margin-left: 0;
        padding-left: .72rem;
    }

    /* Footer do sidebar: manter só o ícone */
    .app-shell.sidebar-collapsed .app-sidebar-footer .app-nav-label {
        display: none;
    }

    .app-shell.sidebar-collapsed .app-sidebar-footer button {
        padding: .72rem .55rem;
    }

    /* Tooltip no hover */
    .app-shell.sidebar-collapsed .app-nav-item[data-label]::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        padding: .45rem .65rem;
        border-radius: 12px;
        background: #0b1220;
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 18px 60px rgba(0,0,0,.45);
        transition: opacity .12s ease, transform .12s ease;
        z-index: 5000;
    }

    .app-shell.sidebar-collapsed .app-nav-item[data-label]::before {
        content: "";
        position: absolute;
        left: calc(100% + 6px);
        top: 50%;
        width: 10px;
        height: 10px;
        background: #0b1220;
        border-left: 1px solid rgba(255,255,255,.12);
        border-top: 1px solid rgba(255,255,255,.12);
        transform: translateY(-50%) rotate(-45deg);
        opacity: 0;
        transition: opacity .12s ease;
        z-index: 5000;
    }

    .app-shell.sidebar-collapsed .app-nav-item:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    .app-shell.sidebar-collapsed .app-nav-item:hover::before {
        opacity: 1;
    }
}

/* ==============================
   Flyout de submenus (sidebar colapsado)
   ============================== */
.nav-flyout {
    position: fixed;
    min-width: 240px;
    max-width: 340px;
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .4rem;
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
    z-index: 5000;
}

    .nav-flyout::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 22px;
        width: 12px;
        height: 12px;
        background: #0b1220;
        border-left: 1px solid rgba(255,255,255,.12);
        border-top: 1px solid rgba(255,255,255,.12);
        transform: rotate(-45deg);
    }

.nav-flyout-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.55);
    padding: .5rem .55rem .35rem;
}

.nav-flyout-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .65rem;
    border-radius: 12px;
    border: 1px solid transparent;
    color: rgba(255,255,255,.90);
    text-decoration: none;
    background: transparent;
    transition: background .12s ease, border-color .12s ease;
}

    .nav-flyout-item:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.10);
    }

    .nav-flyout-item.is-active {
        background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(124,58,237,.06));
        border-color: rgba(124,58,237,.35);
    }

.nav-flyout-ico {
    width: 22px;
    display: inline-grid;
    place-items: center;
    opacity: .92;
}

/* ==============================
   Responsivo
   ============================== */
@media (max-width: 992px) {
    .app-sidebar {
        width: 240px;
    }

    .app-main {
        margin-left: 240px;
    }
}

@media (max-width: 768px) {
    .app-sidebar {
        position: static;
        width: auto;
        height: auto;
        border-right: 0;
    }

    .app-main {
        margin-left: 0;
        height: auto;
    }

    .app-shell {
        height: auto;
        overflow: auto;
    }
}

/* ==============================
   Fixes gerais p/ Bootstrap em dark
   ============================== */
hr {
    opacity: 1;
}

.card {
    background: transparent;
    padding: 10px;
}

.form-label {
    color: rgba(255,255,255,.85);
}

.form-control,
.form-select {
    background-color: rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
}

.form-select {
    color-scheme: dark;
    background-color: #0b1220;
}

    .form-select option {
        background: #0f172a;
        color: #f8fafc;
    }

    .form-select option[value=""] {
        background: #1f2937;
        color: rgba(255,255,255,.72);
    }

    .form-select option:checked,
    .form-select option:selected {
        background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(79,70,229,.92));
        color: #ffffff;
    }

    .form-select option:disabled {
        background: #111827;
        color: rgba(255,255,255,.40);
    }

    .support-inline-note {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .85rem 1rem;
        border: 1px solid rgba(124, 58, 237, .24);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(15, 23, 42, .9), rgba(15, 23, 42, .72));
        color: #dbeafe;
    }

    .support-inline-note i {
        color: #8b5cf6;
        line-height: 1.35;
    }

.form-control::placeholder {
    color: rgba(255,255,255,.42);
}

    .form-control:focus,
    .form-select:focus {
        background-color: rgba(0,0,0,.20);
        border-color: rgba(124,58,237,.45);
        box-shadow: 0 0 0 .2rem rgba(124,58,237,.15);
        color: rgba(255,255,255,.95);
    }

/* Scrollbar (Chrome/Edge) */
.app-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.app-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
}

    .app-content::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,.16);
    }


/* ==============================
   Fix z-index do submenu flyout
   (quando sidebar colapsado)
   ============================== */

/* Flyout dos submenus */
.nav-flyout {
    z-index: 2147483647 !important; /* topo absoluto */
    isolation: isolate; /* evita interferência de stacking context */
}

    /* Setinha do flyout */
    .nav-flyout::before {
        z-index: 2147483647 !important;
    }

/* Tooltip do item (data-label) quando colapsado */
@media (min-width: 769px) {
    .app-shell.sidebar-collapsed .app-nav-item[data-label]::after,
    .app-shell.sidebar-collapsed .app-nav-item[data-label]::before {
        z-index: 2147483647 !important;
    }
}

.sgi-label-help {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}

.sgi-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    padding: 0;
    transform: translateY(-0.38rem);
    vertical-align: super;
}

    .sgi-help-icon:hover,
    .sgi-help-icon:focus {
        border-color: rgba(124,58,237,.85);
        box-shadow: 0 0 0 .14rem rgba(124,58,237,.18);
        outline: none;
    }

.sgi-check-help {
    display: inline-flex;
    align-items: flex-start;
    gap: .35rem;
}

.sgi-help-tooltip .e-tip-content {
    white-space: normal;
    max-width: 320px;
    line-height: 1.4;
}

/* ==============================
   Sidebar: pré-carga do estado recolhido
   Evita flash visual ao trocar de página/módulo.
   ============================== */
.app-shell.sidebar-init-pending .app-sidebar,
.app-shell.sidebar-init-pending .app-main,
.app-shell.sidebar-init-pending .app-nav-item,
.app-shell.sidebar-init-pending .app-sidebar-toggle i,
.app-shell.sidebar-init-pending .app-sidebar-footer button,
.app-shell.sidebar-init-pending .brand-text {
    transition: none !important;
}

@media (min-width: 769px) {
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-sidebar,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-sidebar {
        width: 84px;
        padding: .9rem .75rem;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-main,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-main {
        margin-left: 84px;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-title,
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .brand-text,
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-label,
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-sidebar-footer .app-nav-label,
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-item .ms-auto,
    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-item .nav-caret,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-title,
    .app-shell.sidebar-collapsed.sidebar-init-pending .brand-text,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-label,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-sidebar-footer .app-nav-label,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-item .ms-auto,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-item .nav-caret {
        display: none !important;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-brand a,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-brand a {
        justify-content: center;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-item,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-item {
        justify-content: center;
        padding: .72rem .55rem;
        z-index: 1000;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav .collapse,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav .collapse {
        display: none !important;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-nav-item--submenu,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-nav-item--submenu {
        margin-left: 0;
        padding-left: .72rem;
    }

    html.sgi-sidebar-collapsed .app-shell:not(.sidebar-ready) .app-sidebar-footer button,
    .app-shell.sidebar-collapsed.sidebar-init-pending .app-sidebar-footer button {
        padding: .72rem .55rem;
    }
}

/* O rótulo em pseudo-elemento ficava cortado pelo overflow do sidebar.
   O tooltip/flyout real passa a ser controlado via JS e anexado ao body. */
@media (min-width: 769px) {
    .app-shell.sidebar-collapsed .app-nav-item[data-label]::after,
    .app-shell.sidebar-collapsed .app-nav-item[data-label]::before {
        content: none !important;
        display: none !important;
    }
}

.nav-hovercard {
    position: fixed;
    max-width: 320px;
    white-space: nowrap;
    padding: .45rem .65rem;
    border-radius: 12px;
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    color: rgba(255,255,255,.92);
    pointer-events: none;
    z-index: 2147483647 !important;
}

.nav-hovercard[hidden] {
    display: none !important;
}

.nav-hovercard::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: #0b1220;
    border-left: 1px solid rgba(255,255,255,.12);
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateY(-50%) rotate(-45deg);
}

.app-shell.sidebar-collapsed .app-sidebar-footer-button {
    position: relative;
}

.turnstile-block {
    width: 100%;
}

.turnstile-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88px;
    padding: .85rem;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
}

.turnstile-caption {
    min-height: 1.25rem;
}

@media (max-width: 575.98px) {
    .turnstile-shell {
        padding-left: .35rem;
        padding-right: .35rem;
        overflow-x: auto;
    }
}