/*
 * Shared stylesheet for both heads. Lives in the RCL so the MAUI head and the
 * web head cannot drift: each links _content/NetMauiShowcase.Shared/css/showcase.css.
 */

@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
    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;
}

.shell-nav-group-label {
    padding: 0.75rem 1rem 0.25rem;
}

/*
 * A tela de login não usa MudLayout, então ela mesma pinta o fundo e respeita
 * as safe areas — no Android o aplicativo desenha por baixo das barras.
 */
.login-shell {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding:
        calc(1.5rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right))
        calc(1.5rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
    background-color: var(--mud-palette-background);
}

.login-card {
    width: 100%;
    max-width: 32rem;
}

/* O rodapé acompanha a largura do card para as duas linhas alinharem pela esquerda. */
.login-footer {
    width: 100%;
    max-width: 32rem;
}

/* O ícone de link externo acompanha a linha do texto, um pouco menor que ele. */
.login-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.login-external-link .mud-icon-root {
    font-size: 1rem;
}

.login-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* O chip de versão e a linha de stack citam ferramenta, e ferramenta se lê em monoespaçada. */
.login-stack-line,
.login-version {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

/*
 * A linha do "lembrar": rótulo à esquerda, interruptor na borda direita. O
 * seletor é `label.mud-switch` porque o MudBlazor repete a classe `mud-switch`
 * no span do texto — sem a tag, a regra pegaria os dois e o rótulo viraria ele
 * mesmo um flex container. O respiro vem só do contêiner: mexer no padding do
 * .mud-switch-base encolhe o ripple sem mover o trilho, e o polegar sai torto.
 */
.login-remember {
    padding: 0 0.75rem 0 1rem;
}

.login-remember .mud-input-control,
.login-remember .mud-input-control-input-container {
    width: 100%;
    margin: 0;
}

.login-remember label.mud-switch {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

/*
 * O drawer é uma coluna: a navegação rola e o bloco de conta fica colado no
 * rodapé, que é onde um shell de ERP guarda a identidade de quem está dentro.
 */
.shell-drawer {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.shell-drawer-nav {
    flex: 1;
    overflow-y: auto;
}

/* A marca e o recolher dividem a linha; no trilho sobra só o botão, centralizado. */
.shell-drawer-header {
    display: flex;
    height: 3.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem 0 1rem;
}

.shell-rail .shell-drawer-header {
    justify-content: flex-start;
    padding: 0;
}

/*
 * Os invólucros do tooltip e do menu encolhem para o conteúdo, e alvo que não
 * ocupa a coluna não tem por onde alinhar. Esticá-los é o que põe todo mundo
 * na mesma vertical.
 */
.shell-rail .mud-tooltip-root,
.shell-rail .mud-menu,
.shell-rail .mud-nav-item {
    display: block;
    width: 100%;
}

/*
 * No trilho tudo é a mesma linha: navegação, busca, recolher e conta começam na
 * mesma sangria, e o alvo de clique atravessa a coluna inteira. A borda entra na
 * conta da largura (border-box) e a da busca sai — ali ela não desenha mais um
 * campo, e campo de 2,5rem não se lê como campo. A cor é a do ícone do drawer,
 * que é a que a navegação já usava: sozinha, a busca puxava o azulado do
 * Secondary e o recolher puxava o quase-preto do texto.
 */
.shell-rail .mud-nav-link,
.shell-rail .command-trigger,
.shell-rail .shell-user,
.shell-rail .shell-drawer-header .mud-icon-button {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    border: none;
    border-radius: 0;
    margin: 0.125rem 0;
    padding: 0 0 0 0.5rem;
    color: var(--mud-palette-drawer-icon);
}

/* O ícone do MudNavLink guarda margem para o rótulo, e no trilho não há rótulo. */
.shell-rail .mud-nav-link-icon {
    margin: 0;
}

/* Some dos olhos, continua no leitor de tela. */
.shell-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Abaixo do breakpoint a barra superior volta e o drawer sobrepõe, então o
 * padding de fábrica do conteúdo continua valendo. Acima, a barra não existe:
 * sem zerar o padding sobraria a faixa vazia da barra que saiu.
 */
@media (min-width: 960px) {
    .shell-appbar {
        display: none;
    }

    .mud-main-content {
        padding-top: 0;
    }
}

/* É um <button>, então o reset de aparência de botão vem antes do layout. */
.shell-user {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border: none;
    background: none;
    padding: 0.75rem 1rem;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.shell-user:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.shell-user-heading {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
}

/* min-width 0 é o que autoriza o filho flex a encolher e o texto a truncar. */
.shell-user-identity {
    min-width: 0;
    flex: 1;
    text-align: left;
}

.shell-user-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O rodapé da grade acompanha a leitura: navegação à esquerda, contagem à direita. */
.grid-pager {
    --showcase-pager-height: 2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* O rodapé acompanha a altura do cabeçalho da grade; o padding de fábrica o engorda. */
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.grid-pager .mud-table-pagination,
.grid-pager .mud-toolbar {
    min-height: 0;
    padding: 0;
}

.grid-pager-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mesma razão da barra de tela: quem é o item flexível é o <div class="mud-select"> de fora. */
.grid-pager-controls > .mud-select {
    width: 4.5rem;
    flex: 0 0 4.5rem;
}

.grid-pager-controls > .mud-select .mud-input-control,
.grid-pager .mud-button-root {
    margin: 0;
    height: var(--showcase-pager-height);
    min-height: var(--showcase-pager-height);
}

.grid-pager-controls > .mud-select .mud-input.mud-input-outlined {
    height: var(--showcase-pager-height);
    min-height: var(--showcase-pager-height);
    font-size: 0.8125rem;
}

.grid-pager-controls > .mud-select .mud-input-slot {
    padding-top: 0;
    padding-bottom: 0;
}

/* A coluna de ações é a primeira e só precisa caber o botão. */
.grid-actions-cell {
    width: 3rem;
    padding-right: 0;
}

.grid-action-danger {
    color: var(--mud-palette-error);
}

.page-breadcrumb {
    margin-bottom: 0.5rem;
}

.page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.period-toggle {
    width: fit-content;
}

/*
 * A barra de cada tela: busca ou filtro à esquerda, ações logo ao lado — nunca
 * na outra ponta, para que as telas não desalinhem entre si. A altura é única e
 * declarada aqui porque o campo denso do MudBlazor e o botão dele chegam com
 * alturas diferentes de fábrica.
 */
.page-toolbar {
    --showcase-control-height: 2.5rem;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-toolbar .mud-input-control {
    margin: 0;
}

.page-toolbar .mud-input.mud-input-outlined,
.page-toolbar .mud-button-root {
    height: var(--showcase-control-height);
    min-height: var(--showcase-control-height);
}

/*
 * O campo de busca tem largura própria e as ações vêm logo ao lado, nunca na
 * outra ponta. A regra mira o filho direto da barra porque o MudSelect envolve
 * tudo num <div class="mud-select">: uma classe passada por `Class` pousa no
 * elemento interno, que não é o item flexível, e o de fora ficaria com o
 * width 100% de fábrica empurrando os botões para a borda.
 */
.page-toolbar > .mud-select,
.page-toolbar > .mud-input-control {
    width: auto;
    min-width: 0;
    flex: 0 1 22rem;
}

/* Rótulo, barra e valor: a coluna do meio é a única elástica. */
.share-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.share-bar-label {
    width: 5rem;
    flex-shrink: 0;
}

.share-bar-track {
    height: 0.5rem;
    flex: 1;
    border-radius: 999px;
    background-color: var(--mud-palette-lines-default);
}

.share-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.share-bar-value {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .share-bar-fill {
        transition: none;
    }
}

.session-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1.5rem;
}

/*
 * The footer stays mounted while clean so the transition has something to
 * animate; aria-hidden plus tabindex -1 keep it out of the accessibility tree.
 */
.dirty-action-footer {
    position: sticky;
    bottom: 1.5rem;
    z-index: 30;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 28rem;
    transition:
        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dirty-action-footer[data-dirty='false'] {
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
}

.dirty-action-footer--start {
    align-self: flex-start;
}

.dirty-action-footer--center {
    align-self: center;
}

@media (prefers-reduced-motion: reduce) {
    .dirty-action-footer {
        transition: none;
    }
}

/* Um bloco por mês, empilhado: no celular a leitura é vertical, sem eixo apertado. */
.monthly-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.monthly-month {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-card {
    max-width: 44rem;
}

/* Mesma linha do "lembrar" do login: rótulo à esquerda, interruptor na borda. */
.settings-switch {
    padding: 0 0.75rem 0 1rem;
}

.settings-switch .mud-input-control,
.settings-switch .mud-input-control-input-container {
    width: 100%;
    margin: 0;
}

.settings-switch label.mud-switch {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

/* Grade de amostras que reflui sozinha: uma coluna no celular, várias no desktop. */
.swatch-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.color-swatch-chip {
    height: 3rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.color-swatch-token {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

.token-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.token-chip {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.8125rem;
}

.radius-sample {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    font-size: 0.75rem;
}

.decision-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* O gatilho da paleta imita um campo, mas é botão: quem digita nele é o diálogo. */
.command-trigger {
    display: flex;
    width: calc(100% - 1.5rem);
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.command-trigger:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.command-trigger-label {
    flex: 1;
}

.command-trigger-hint {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0.0625rem 0.3125rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
}

.command-palette-field {
    padding: 0.5rem 1rem;
}

.command-palette-group {
    display: block;
    padding: 0.75rem 1rem 0.25rem;
    text-transform: none;
    letter-spacing: normal;
}

/*
 * O justify-content é explícito porque o estilo padrão do navegador centraliza o
 * conteúdo de <button>: sem ele, ícone e texto ficam no meio do diálogo em vez
 * de alinhados à esquerda, e o text-align não alcança o layout flex.
 */
.command-palette-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    border: none;
    background: none;
    padding: 0.625rem 1rem;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.command-palette-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.command-palette-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.command-palette-empty {
    padding: 1.5rem 1rem;
}