/* ============================================================
   SGP — shell (sidebar + topbar)
   Portado do padrão do Orchestrator (Protec.SistemaV2).
   ============================================================ */

/* ------------------------------------------------------------
   Dimensões.
   CRÍTICO: ao mudar --app-chrome-size é preciso redefinir a MESMA CSS var
   (--mud-appbar-height) que o MudDrawer usa para se posicionar com
   ClipMode="Always" (ele fica em top: var(--mud-appbar-height)). Sem isso a
   appbar muda de tamanho mas o drawer continua começando na altura antiga.
   Regra geral: ao sobrescrever uma dimensão do Mud via CSS, a CSS var
   correspondente também precisa ser redefinida — outros componentes leem a var.
   ------------------------------------------------------------ */
:root {
    --app-chrome-size: 56px;
    --app-sidebar-expanded: 280px;
    --app-sidebar-collapsed: 64px;
    --mud-appbar-height: var(--app-chrome-size) !important;
}

.app-topbar.mud-appbar,
.app-topbar .mud-toolbar {
    min-height: var(--app-chrome-size) !important;
    height: var(--app-chrome-size) !important;
}

/* ------------------------------------------------------------
   TOPBAR — começa DEPOIS da sidebar (que é coluna inteira, top:0).
   ------------------------------------------------------------ */
.app-topbar.mud-appbar {
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-appbar-text) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default, #E6E9EF);
    margin: 0;
    right: 0;
    width: auto !important;
    transition: left .15s ease;
}

.app-topbar--sidebar-expanded { left: var(--app-sidebar-expanded) !important; }
.app-topbar--sidebar-collapsed { left: var(--app-sidebar-collapsed) !important; }

.app-topbar.mud-appbar > *,
.app-topbar.mud-appbar .mud-icon-root,
.app-topbar.mud-appbar .mud-typography { color: inherit; }

.app-topbar .mud-icon-button-root { margin-left: 8px; }
.app-topbar .mud-icon-button-root:first-of-type { margin-left: 0; }

.app-topbar-sistema { font-weight: 600; margin-left: 4px; }
.app-topbar-modulo { opacity: .8; }

/* ------------------------------------------------------------
   SIDEBAR — coluna INTEIRA à esquerda (top:0, bottom:0).
   O brand fica no topo dela e a topbar começa à direita.
   ------------------------------------------------------------ */
.app-sidebar.mud-drawer {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-drawer-text) !important;
    border-right: none;
    transition: width .15s ease;
    margin: 0;
    display: flex;
    flex-direction: column;
    top: 0 !important;
    height: 100% !important;
    z-index: 1250; /* acima da topbar (AppBar 1200) na quina superior esquerda */
}

.app-sidebar.mud-drawer .mud-icon-root,
.app-sidebar.mud-drawer .mud-typography,
.app-sidebar.mud-drawer .mud-nav-link,
.app-sidebar.mud-drawer .mud-nav-group-title { color: inherit; }

/* Largura: o parâmetro Width do MudDrawer é IGNORADO pelo componente quando
   Variant=Persistent e IsFixed=true (padrão) — a CSS var --mud-drawer-width só
   é escrita quando "!IsFixed || Variant == Temporary". Por isso definimos aqui
   a largura real E a própria var (é ela que o MudMainContent lê para calcular
   sua margin-left). */
.app-sidebar.app-sidebar--expanded {
    width: var(--app-sidebar-expanded) !important;
    --mud-drawer-width: var(--app-sidebar-expanded);
}

.app-sidebar.app-sidebar--collapsed {
    width: var(--app-sidebar-collapsed) !important;
    --mud-drawer-width: var(--app-sidebar-collapsed);
}

/* Header (brand) */
.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--app-chrome-size);
    flex-shrink: 0;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.app-sidebar--collapsed .app-sidebar-brand { justify-content: center; padding: 0; }
.app-sidebar-brand__title { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.app-sidebar-brand__btn { color: rgba(255,255,255,.7) !important; }
.app-sidebar-brand__btn:hover { color: #FFFFFF !important; }

/* Corpo cresce; footer fica fixo no fim */
.app-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 6px;
}

.app-sidebar-footer {
    flex-shrink: 0;
    padding: 6px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.app-sidebar--collapsed .app-sidebar-footer { display: flex; justify-content: center; }

/* Itens */
.app-sidebar .mud-nav-link { border-radius: 8px; margin: 2px 0; }
.app-sidebar .mud-nav-link:hover,
.app-sidebar .mud-nav-group > .mud-nav-link:hover { background: rgba(255,255,255,.06); }

.app-sidebar-inicio--active .mud-nav-link,
.sidebar-item--active .mud-nav-link {
    background: var(--mud-palette-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.app-sidebar-inicio--active .mud-nav-link .mud-icon-root,
.sidebar-item--active .mud-nav-link .mud-icon-root { color: #FFFFFF !important; }

/* ------------------------------------------------------------
   Modo mini (64px) — só ícones.
   MudTooltip precisa de Inline="false", senão .mud-tooltip-root é
   inline-block/width:fit-content e os ícones ficam lado a lado.
   ------------------------------------------------------------ */
.app-sidebar--collapsed .mud-navmenu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0 !important;
    margin: 0 !important;
}

.app-sidebar--collapsed .mud-nav-item,
.app-sidebar--collapsed .mud-navmenu > div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.app-sidebar-mini-body .mud-tooltip-root {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
}

.app-sidebar-mini-body { cursor: pointer; }

.mini-nav-icon {
    width: 40px;
    height: 40px;
    margin: 4px auto;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.8) !important;
    transition: background .15s ease, border-color .15s ease;
}

.mini-nav-icon:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }

.mini-nav-icon--active {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   Área central.
   O último seletor zera a margin-left nativa do MudBlazor: a regra
   ".mud-drawer-open-persistent-left ... .mud-main-content { margin-left: ... }"
   dispara porque o drawer está sempre Open=true, e SOMA ao nosso left.
   ------------------------------------------------------------ */
.app-main-content {
    position: fixed;
    top: var(--app-chrome-size);
    right: 0;
    bottom: 0;
    overflow: auto;
    box-sizing: border-box;
    transition: left .15s ease;
}

.app-main-content--sidebar-expanded { left: var(--app-sidebar-expanded); }
.app-main-content--sidebar-collapsed { left: var(--app-sidebar-collapsed); }
.mud-main-content.app-main-content { margin-left: 0 !important; }

/* ------------------------------------------------------------
   Grid hierárquico reutilizável
   ------------------------------------------------------------ */
.gh-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gh-toolbar__titulo { display: flex; flex-direction: column; }
.gh-busca { max-width: 320px; }
.gh-expandir { max-width: 220px; }

.gh-scroll { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default, #E6E9EF); border-radius: 8px; }

.gh-tabela { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.gh-tabela thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
    font-weight: 700; text-align: left;
    padding: 10px 12px; border-bottom: 2px solid var(--mud-palette-lines-default, #E6E9EF);
}
.gh-tabela tbody td { padding: 6px 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.gh-col-num { text-align: right; font-family: "DM Mono", ui-monospace, monospace; }
.gh-tabela thead .gh-col-num { text-align: right; }
.gh-col-nivel { font-weight: 600; }
.gh-col-codigo { font-family: "DM Mono", ui-monospace, monospace; opacity: .9; }
.gh-col-desc { min-width: 320px; white-space: normal; }
.gh-chevron { cursor: pointer; display: inline-flex; }
.gh-chevron-vazio { display: inline-block; width: 24px; }
.gh-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.08); }
.gh-vazio { text-align: center; padding: 24px; color: var(--mud-palette-text-secondary); }

/* Impressão: some tudo menos a tabela marcada, e imprime cores de fundo. */
@media print {
    body.sgp-imprimindo * { visibility: hidden; }
    body.sgp-imprimindo .sgp-area-impressao,
    body.sgp-imprimindo .sgp-area-impressao * { visibility: visible; }
    body.sgp-imprimindo .sgp-area-impressao {
        position: absolute; left: 0; top: 0; width: 100%;
        overflow: visible !important; border: 0;
    }
    .sgp-area-impressao .gh-tabela { font-size: 10px; }
    .sgp-area-impressao .gh-tabela th,
    .sgp-area-impressao .gh-tabela td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Host do módulo MVC legado (iframe, mesma origem) */
.module-host { position: absolute; inset: 0; }
.module-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Loadmask da área central (fica acima do conteúdo/iframe, abaixo de dialog/popover) */
.sgp-loadmask { z-index: 1050; }

/* ------------------------------------------------------------
   Painel de notificações da topbar
   ------------------------------------------------------------ */
.topbar-notif { width: 340px; max-width: 88vw; padding: 4px; }

.topbar-notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 10px;
}

.topbar-notif__vazio {
    padding: 16px 10px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.topbar-notif__item {
    display: flex;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5);
}

.topbar-notif__item:hover { background: var(--mud-palette-action-default-hover); }
.topbar-notif__item--nova { background: var(--mud-palette-primary-hover); }
.topbar-notif__icon { margin-top: 2px; }

.topbar-notif__text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.topbar-notif__time {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ------------------------------------------------------------
   CARREGAMENTO — esqueleto, loadmask e entrada suave

   Por que não usar MudSkeleton direto: o cinza padrão dele é opaco demais
   sobre o nosso fundo claro e vem com cantos retos, o que faz a tela parecer
   quebrada em vez de carregando. Aqui os blocos são um véu de baixo contraste
   por cima da própria superfície, com o mesmo raio de canto dos campos reais.

   Tudo abaixo usa as CSS vars do tema (--mud-palette-*), então o modo escuro
   sai de graça: o bloco escurece junto com a superfície.
   ------------------------------------------------------------ */

.sgp-esq {
    --sgp-esq-base: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    --sgp-esq-brilho: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    border-radius: 8px;
    background-color: var(--sgp-esq-base);
    background-image: linear-gradient(
        100deg,
        transparent 20%,
        var(--sgp-esq-brilho) 40%,
        var(--sgp-esq-brilho) 60%,
        transparent 80%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    /* 1.6s: rápido o bastante para parecer vivo, lento o bastante para não
       competir com o conteúdo que está prestes a aparecer. */
    animation: sgp-esq-brilho 1.6s ease-in-out infinite;
    display: block;
    flex: none;
}

@keyframes sgp-esq-brilho {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* Texto tem cantos mais suaves e nunca chega na altura de um campo. */
.sgp-esq--texto { border-radius: 4px; }
.sgp-esq--circulo { border-radius: 50%; }

/* Uma "linha de campo": rótulo curto por cima, campo por baixo — a mesma
   proporção do MudTextField com Margin.Dense, para o conteúdo real entrar
   sem empurrar nada de lugar. */
.sgp-esq-campo { display: flex; flex-direction: column; gap: 6px; }

/* Escalona a opacidade ao longo da lista: as primeiras linhas parecem mais
   "prontas" que as últimas, o que dá sensação de carregamento progressivo em
   vez de um bloco morto. */
.sgp-esq-lista > *:nth-child(1) { opacity: 1; }
.sgp-esq-lista > *:nth-child(2) { opacity: .88; }
.sgp-esq-lista > *:nth-child(3) { opacity: .76; }
.sgp-esq-lista > *:nth-child(4) { opacity: .64; }
.sgp-esq-lista > *:nth-child(5) { opacity: .52; }
.sgp-esq-lista > *:nth-child(n+6) { opacity: .42; }

/* ---- Entrada do conteúdo -------------------------------------------------
   O salto do esqueleto para o conteúdo é o que fazia a tela "piscar". Um fade
   curto com 4px de subida cobre exatamente esse instante. */
.sgp-entrada { animation: sgp-entrada .22s ease-out both; }

@keyframes sgp-entrada {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Loadmask de recarga ------------------------------------------------
   Para quando o conteúdo JÁ está na tela e é atualizado (salvar, filtrar,
   paginar). Trocar por esqueleto aqui seria pior: o usuário perde o contexto
   do que estava lendo. O véu mantém o conteúdo visível, só afastado. */
.sgp-recarregando { position: relative; }

.sgp-recarregando > .sgp-recarregando__conteudo {
    opacity: .45;
    filter: saturate(.6);
    transition: opacity .15s ease, filter .15s ease;
    pointer-events: none;
}

.sgp-recarregando__veu {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 48px;
    z-index: 3;
}

/* Respeita quem desligou animação no sistema operacional: sem movimento, mas
   o bloco continua visível — a informação "está carregando" não se perde. */
@media (prefers-reduced-motion: reduce) {
    .sgp-esq { animation: none; }
    .sgp-entrada { animation: none; }
}

/* Conteúdo montado mas não pintado, enquanto o esqueleto ocupa a tela.
   display:none NÃO impede o ciclo de vida do Blazor — é justamente o que permite
   que um componente filho dispare a carga da página estando "escondido".
   Ver AreaCarregando. */
.sgp-oculto { display: none !important; }