/* ═══════════════════════════════════════════════════════════════
   FUNARPEN-RJ — APP SHELL (casca "estação de trabalho")
   Origem: apps-lab/001-teste-design-SiteShell-AppShell/assets/css/fn-app-shell.css
   Sidebar navy fixa (264px, colapsável a 68px) + topbar clara
   sticky com breadcrumb e chips + área de conteúdo densa.
   Escopo: .fn-app (classe no wrapper <div> raiz do layout Blazor,
   não no <body> — o Blazor tem um único body para todos os layouts).
   ═══════════════════════════════════════════════════════════════ */

.fn-app { min-height: 100vh; }

/* ─── SIDEBAR navy ─────────────────────────────────────────── */
.fn-appside {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: var(--fn-appsidebar-w);
    background: linear-gradient(180deg, var(--fn-navy-dark) 0%, var(--fn-navy) 100%);
    color: #dbe6f0; z-index: 1040;
    display: flex; flex-direction: column;
    transition: width .18s ease;
}
.fn-appside__brand {
    display: flex; align-items: center; gap: .6rem;
    height: var(--fn-apptopbar-h); padding: 0 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1); flex: 0 0 auto;
}
.fn-appside__brand img { height: 24px; display: block; }
.fn-appside__brand-mini { height: 28px; width: 28px; display: none; }
.fn-appside__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .7rem .55rem 1rem; scrollbar-width: thin; }

.fn-appside__grupo-titulo {
    font-family: var(--fn-font-mono); font-size: .64rem;
    text-transform: uppercase; letter-spacing: .14em;
    color: #a3b7c9; padding: .9rem .6rem .3rem; white-space: nowrap;
}
.fn-appside__link {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border-radius: var(--fn-radius);
    color: #dbe6f0; font-size: .82rem; font-weight: 500;
    white-space: nowrap; border: 0; background: none; width: 100%;
    text-align: left; cursor: pointer;
}
.fn-appside__link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.fn-appside__link .bi { font-size: .95rem; width: 1.2rem; text-align: center; flex: 0 0 auto; color: #9fc3c3; }
.fn-appside__link.ativo {
    background: rgba(255,255,255,.12); color: #fff;
    box-shadow: inset 3px 0 0 var(--fn-gold);
}
.fn-appside__link.ativo .bi { color: var(--fn-gold); }
.fn-appside__link .fn-badge { margin-left: auto; }
.fn-appside__chevron { margin-left: auto; font-size: .6rem !important; opacity: .6; transition: transform .15s ease; }
.fn-appside__grupo.aberto > .fn-appside__link .fn-appside__chevron { transform: rotate(180deg); }

/* Sub-lista (2º nível) */
.fn-appside__sub { display: none; padding-left: 1.35rem; }
.fn-appside__grupo.aberto > .fn-appside__sub { display: block; }
.fn-appside__sub .fn-appside__link { font-size: .78rem; padding: .35rem .55rem; color: #c3cfdb; }
.fn-appside__sub .fn-appside__grupo-titulo { padding: .55rem .55rem .2rem; }

/* Rodapé da sidebar: voltar ao portal + colapsar */
.fn-appside__rodape {
    flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.1);
    padding: .55rem;
}
.fn-appside__rodape .fn-appside__link { font-size: .78rem; color: #c3cfdb; }

/* ─── Colapso da sidebar (regras escopadas ao RAIL, para não
       afetar o flyout, que vive fora do <aside>) ─────────────── */
.fn-app.side-colapsada .fn-appside { width: var(--fn-appsidebar-w-min); }
.fn-app.side-colapsada .fn-appside .fn-appside__rotulo,
.fn-app.side-colapsada .fn-appside .fn-appside__grupo-titulo,
.fn-app.side-colapsada .fn-appside .fn-appside__chevron,
.fn-app.side-colapsada .fn-appside .fn-appside__sub,
.fn-app.side-colapsada .fn-appside__brand img.fn-appside__brand-logo,
.fn-app.side-colapsada .fn-appside .fn-appside__link .fn-badge { display: none; }
.fn-app.side-colapsada .fn-appside__brand { justify-content: center; padding: 0; }
.fn-app.side-colapsada .fn-appside__brand-mini { display: block; }
.fn-app.side-colapsada .fn-appside .fn-appside__link { justify-content: center; padding: .55rem .4rem; }
.fn-app.side-colapsada .fn-appside .fn-appside__link .bi { width: auto; }
.fn-app.side-colapsada .fn-appmain { margin-left: var(--fn-appsidebar-w-min); }
/* grupo sob o cursor / com flyout aberto ganha realce */
.fn-app.side-colapsada .fn-appside__grupo.flyout-aberto > .fn-appside__link {
    background: rgba(255,255,255,.12); color: #fff;
}

/* ─── FLYOUT do rail colapsado (painel flutuante por grupo) ── */
.fn-appside-flyout {
    position: fixed; left: var(--fn-appsidebar-w-min); z-index: 1050;
    width: 300px; max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--fn-navy);
    border: 1px solid rgba(255,255,255,.14); border-left: 0;
    border-radius: 0 var(--fn-radius-lg) var(--fn-radius-lg) 0;
    box-shadow: var(--fn-shadow-lg);
    padding: .55rem; display: none; scrollbar-width: thin;
}
.fn-appside-flyout.aberto { display: block; }
.fn-appside-flyout__titulo {
    font-family: var(--fn-font-editorial);
    font-size: .92rem; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .55rem .55rem;
    border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .35rem;
}
.fn-appside-flyout__titulo .bi { color: var(--fn-gold); }
/* dentro do flyout, links/títulos usam as mesmas classes do rail expandido —
   mas com quebra de linha (rótulos longos não podem truncar) */
.fn-appside-flyout .fn-appside__grupo-titulo { padding: .6rem .55rem .2rem; white-space: normal; }
.fn-appside-flyout .fn-appside__link { white-space: normal; line-height: 1.35; }

/* ─── ÁREA PRINCIPAL ───────────────────────────────────────── */
.fn-appmain {
    margin-left: var(--fn-appsidebar-w);
    min-height: 100vh; display: flex; flex-direction: column;
    transition: margin-left .18s ease;
}

/* Topbar clara sticky (breadcrumb + chips + ações) */
.fn-apptop {
    position: sticky; top: 0; z-index: 1030;
    background: var(--fn-surface);
    border-bottom: 1px solid var(--fn-border);
    box-shadow: var(--fn-shadow-sm);
    display: flex; align-items: center; gap: 1rem;
    height: var(--fn-apptopbar-h); padding: 0 1.25rem;
}
.fn-apptop__toggle {
    background: none; border: 0; cursor: pointer;
    color: var(--fn-navy); font-size: 1.15rem; padding: .3rem .4rem;
    border-radius: var(--fn-radius);
}
.fn-apptop__toggle:hover { background: var(--fn-bg); }
.fn-apptop__contexto { min-width: 0; flex: 1; }
.fn-apptop__breadcrumb {
    font-family: var(--fn-font-mono); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--fn-navy-light); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.fn-apptop__breadcrumb .sep { color: var(--fn-copper-texto); padding: 0 .25rem; }
.fn-apptop__titulo {
    font-family: var(--fn-font-editorial);
    font-size: 1.02rem; font-weight: 700; color: var(--fn-navy);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fn-apptop__chips { display: flex; gap: .4rem; align-items: center; }
.fn-apptop__chip {
    font-family: var(--fn-font-mono); font-size: .68rem; font-weight: 500;
    background: var(--fn-teal-pale); color: var(--fn-teal-texto);
    border-radius: var(--fn-radius-pill); padding: .2rem .65rem; white-space: nowrap;
}
.fn-apptop__acoes { display: flex; align-items: center; gap: .3rem; }
.fn-apptop__icone {
    background: none; border: 0; cursor: pointer;
    color: var(--fn-navy); font-size: 1rem; padding: .4rem .5rem;
    border-radius: var(--fn-radius); display: inline-flex; align-items: center; gap: .35rem;
}
.fn-apptop__icone:hover { background: var(--fn-bg); }
.fn-apptop__busca-rotulo {
    font-family: var(--fn-font-mono); font-size: .66rem;
    color: var(--fn-text-secondary);
    border: 1px solid var(--fn-border); border-radius: 4px; padding: .05rem .35rem;
}

/* Conta (reusa .fn-conta do site shell com cores claras) */
.fn-app .fn-conta__toggle { color: var(--fn-navy); }
.fn-app .fn-conta__toggle:hover { background: var(--fn-bg); }
.fn-app .fn-conta__dropdown { border-radius: var(--fn-radius-lg); }

/* ─── Conteúdo ─────────────────────────────────────────────── */
.fn-appconteudo { flex: 1; padding: 1.4rem 1.5rem 2.5rem; max-width: 1500px; width: 100%; }
.fn-appconteudo--estreito { max-width: 1200px; }

/* Página header dentro do conteúdo */
.fn-apppage-head { margin-bottom: 1.2rem; }
.fn-apppage-head__titulo {
    font-family: var(--fn-font-editorial);
    font-size: 1.4rem; font-weight: 700; color: var(--fn-navy);
    letter-spacing: -.01em; margin: .2rem 0 .3rem;
}
.fn-apppage-head__sub { font-size: .86rem; color: var(--fn-text-secondary); max-width: 70ch; }

/* Grid de painéis do dashboard */
.fn-appgrid { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fn-appgrid > .g-12 { grid-column: span 12; }
.fn-appgrid > .g-8  { grid-column: span 8; }
.fn-appgrid > .g-6  { grid-column: span 6; }
.fn-appgrid > .g-4  { grid-column: span 4; }

/* Lista de acesso rápido (dashboard) */
.fn-acesso-rapido { display: flex; flex-direction: column; }
.fn-acesso-rapido a {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .4rem; color: var(--fn-text);
    border-bottom: 1px solid var(--fn-border-light);
}
.fn-acesso-rapido a:last-child { border-bottom: 0; }
.fn-acesso-rapido a:hover { background: var(--fn-bg); text-decoration: none; }
.fn-acesso-rapido .bi { color: var(--fn-teal-texto); }
.fn-acesso-rapido__rotulo { font-size: .84rem; font-weight: 600; color: var(--fn-navy); }
.fn-acesso-rapido__desc { font-size: .7rem; color: var(--fn-text-secondary); }
.fn-acesso-rapido .bi-chevron-right { margin-left: auto; font-size: .7rem; color: var(--fn-text-muted); }

/* Footer mínimo do app */
.fn-appfooter {
    border-top: 1px solid var(--fn-border);
    padding: .7rem 1.5rem; font-size: .72rem; color: var(--fn-text-secondary);
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
}

/* ─── Responsivo ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .fn-appside { transform: translateX(-100%); transition: transform .2s ease; width: var(--fn-appsidebar-w); }
    .fn-app.side-mobile-aberta .fn-appside { transform: translateX(0); box-shadow: var(--fn-shadow-lg); }
    .fn-appmain, .fn-app.side-colapsada .fn-appmain { margin-left: 0; }
    .fn-appside-backdrop {
        position: fixed; inset: 0; background: rgba(13,31,45,.5); z-index: 1035; display: none;
    }
    .fn-app.side-mobile-aberta .fn-appside-backdrop { display: block; }
    .fn-appgrid > .g-8, .fn-appgrid > .g-6, .fn-appgrid > .g-4 { grid-column: span 12; }
    .fn-apptop__chips { display: none; }
    .fn-appconteudo { padding: 1rem; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    .fn-appgrid > .g-4 { grid-column: span 6; }
    .fn-appgrid > .g-8 { grid-column: span 12; }
}