/* Manrope variable (wght 200–800) self-host — tipografia oficial TecnoFisc (OFL 1.1).
   Servida via _content/TecnoFisc.Web.Kit/fonts/; hosts NÃO devem carregar fonte externa. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* O label dos inputs do Mud clipa o descender da Manrope ("g" de "Regime tributário", PR #28):
   line-height 1.15rem para fonte 1rem + overflow:hidden (necessário ao text-overflow) cortam a
   tinta pintada abaixo da line box. O label é position:absolute e o clip acontece na padding edge,
   então padding-bottom estende a área pintável SEM mover o texto — não mexe no alinhamento já
   aprovado. !important vence o `padding: 0px 5px !important` do .mud-input-label-outlined. */
.mud-input-label.mud-input-label-inputcontrol {
    padding-bottom: 4px !important;
}

/* Sidebar TecnoFisc — gradiente e cores derivam das vars --tf-* emitidas pelo TecnoFiscThemeProvider.
   color-mix() no lugar de rgba literal é intencional: se --tf-on-accent mudar, as opacidades acompanham. */
.tf-drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg,
        var(--tf-grad-dark) 0%,
        var(--tf-grad-mid) 50%,
        var(--tf-grad-strong) 100%) !important;
    /* Opacidades do texto sobre o gradiente calibradas para WCAG AA (4.5:1) no pior accent
       (FiscTax) e pior posição: navegação assenta na metade superior (dark→mid) com >=80%;
       o footer fica no rodapé (stop mais claro) e exige 90%. Medido, não estimado. */
    color: color-mix(in srgb, var(--tf-on-accent) 80%, transparent);
}
.tf-brand { display:flex; align-items:center; gap:10px; padding:0 18px; height:64px;
    border-bottom:1px solid color-mix(in srgb, var(--tf-on-accent) 8%, transparent);
    color:var(--tf-on-accent); font-weight:700; font-size:1.1rem; letter-spacing:.5px; }
.tf-brand-mark { flex-shrink:0; width:32px; height:32px; border-radius:7px; overflow:hidden;
    background:color-mix(in srgb, var(--tf-on-accent) 15%, transparent); color:var(--tf-on-accent);
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem; font-weight:700; }
.tf-brand-mark img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.tf-brand-name { white-space:nowrap; overflow:hidden; }
.tf-nav-section-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
    color:color-mix(in srgb, var(--tf-on-accent) 80%, transparent); padding:14px 18px 4px; font-weight:600; }
.tf-trial-alert { margin-bottom: 16px; }

/* Item de navegação ATIVO: o tema do Mud o pinta com a cor Primary (= o accent do produto),
   que sobre o gradiente do MESMO accent reprova contraste (1.7–2.9:1 em todos os accents —
   pior que qualquer rótulo). Realça com texto e ícone brancos (100% = AA em todo accent, até
   no stop mais claro) + barra lateral inset. Não clareia o fundo de propósito: um overlay
   claro reduziria o contraste do texto branco abaixo de AA no pior accent (FiscTax). */
.tf-drawer .mud-nav-link.active {
    color: var(--tf-on-accent) !important;
    box-shadow: inset 3px 0 0 0 var(--tf-on-accent);
}
.tf-drawer .mud-nav-link.active .mud-nav-link-text { color: var(--tf-on-accent) !important; font-weight: 600; }
.tf-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--tf-on-accent) !important; }

/* Estado recolhido (trilho mini): só ícones. O MudBlazor marca o drawer com .mud-drawer--closed.mud-drawer-mini;
   a regra nativa que esconde o rótulo do MudNavLink exige .mud-navmenu como filho DIRETO de .mud-drawer-content,
   o que o nosso wrapper .tf-drawer quebra — então escondemos o conteúdo textual e centralizamos os ícones aqui. */
.mud-drawer--closed.mud-drawer-mini .tf-brand { justify-content:center; padding:0; gap:0; }
.mud-drawer--closed.mud-drawer-mini .tf-brand-name { display:none; }
.mud-drawer--closed.mud-drawer-mini .tf-nav-section-title { display:none; }
.mud-drawer--closed.mud-drawer-mini .tf-drawer .mud-nav-link-text { display:none; }
.mud-drawer--closed.mud-drawer-mini .tf-drawer .mud-nav-link { justify-content:center; }

/* Footer da sidebar: copyright + versão do app consumidor (MinVer). Some no trilho recolhido. */
.tf-sidebar-footer { padding:10px 18px; border-top:1px solid color-mix(in srgb, var(--tf-on-accent) 8%, transparent);
    font-size:.68rem; color:color-mix(in srgb, var(--tf-on-accent) 90%, transparent); white-space:nowrap; overflow:hidden; }
.mud-drawer--closed.mud-drawer-mini .tf-sidebar-footer { display:none; }

/* Ícone de produto no ProductSwitcher: imagem ou inicial sobre o accent do produto. */
.tf-product-item { display:flex; align-items:center; gap:8px; }
.tf-product-ic { width:20px; height:20px; border-radius:4px; object-fit:contain; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--tf-on-accent); font-size:.6rem; font-weight:800; }

/* Cabeçalho de página: título à esquerda, ações à direita; com wrap as ações descem
   para a própria linha em telas estreitas em vez de espremer o título. */
.tf-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
.tf-page-header__main { min-width: 0; }       /* deixa o texto quebrar em vez de empurrar as ações */
.tf-page-header__actions { flex-shrink: 0; }

/* Container principal responsivo: 24px em telas grandes, 16px em mobile. */
.tf-main-container {
    padding: 24px;
}

@media (max-width: 599.98px) {
    .tf-main-container {
        padding: 16px;
    }
}

/* Grid de cards dirigido pelo container (estilo YouTube): as colunas derivam da largura do
   PRÓPRIO grid (auto-fill + minmax), nunca do viewport — drawer aberto/recolhido entra na conta
   sozinho. min(100%, …) evita overflow quando o container é mais estreito que o piso.
   Valores espelham TecnoFiscTokens.CardGridMinItemWidth/CardGridGap. */
.tf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tf-card-min, 300px)), 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Modo painel (Fill): tracks vazios colapsam (auto-fit) e os cards esticam para ocupar a linha. */
.tf-card-grid--fill {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tf-card-min, 300px)), 1fr));
}

/* Card interno de um TfCardGrid: acompanha o stretch da linha (alturas iguais por linha). */
.tf-card-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Conteúdo só para leitor de tela (visualmente oculto, mas anunciado). Usado em regiões
   aria-live como a do BusyButton, onde o estado precisa ser narrado sem aparecer na tela. */
.tf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Quality floor: respeita o pedido do sistema por menos movimento (WCAG 2.3.3 / 2.2.2).
   Neutraliza animações e transições — inclusive ripples e spinners indeterminados do Mud,
   cujo estado continua comunicado por texto (ex.: o BusyLabel do BusyButton). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Account card do topo (interface-craft: identidade é cartão, não bolha de inicial):
   avatar + nome em repouso, popover sob clique; abaixo de md degrada para só o avatar.
   Sem valor de design novo: cores/raio vêm das variáveis do tema. */
.tf-account-card { display:flex; align-items:center; gap:8px; padding:4px 6px;
    border:none; background:transparent; cursor:pointer; font:inherit;
    color:var(--mud-palette-text-primary); border-radius:var(--mud-default-borderradius); }
.tf-account-card:hover, .tf-account-card:focus-visible { background:var(--mud-palette-action-default-hover); }
.tf-account-card-rest { align-items:center; gap:4px; } /* display vem do utilitário d-md-flex */
.tf-account-card-name { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:.875rem; font-weight:500; }
/* Forma estática do nome da conta (sem callback): display honesto, sem cara de botão. */
.tf-account-name-static { font-size:.8125rem; color:var(--mud-palette-text-secondary); }