/* FoodGrid design-system tokens & helpers (App* components).
   Mantido enxuto — MudBlazor + o tema (FoodPlatformTheme) carregam a maior parte do estilo. */

:root {
    /* Escala de espaçamento (4/8/12/16/24/32) */
    --fg-space-1: 0.25rem;
    --fg-space-2: 0.5rem;
    --fg-space-3: 0.75rem;
    --fg-space-4: 1rem;
    --fg-space-5: 1.5rem;
    --fg-space-6: 2rem;

    /* Raios */
    --fg-radius: 10px;
    --fg-radius-card: 14px;

    /* Marca (espelham o tema; úteis fora do MudBlazor) */
    --fg-primary: #EA580C;
    --fg-primary-strong: #C2410C;
    --fg-ember: #FF6B35;
    --fg-trail: #FDD3BE;

    /* Canvas & superfícies (espelham o tema — o canvas é 1 passo mais fundo que o branco
       do card para as superfícies "saltarem" do fundo) */
    --fg-canvas: #F5F6F8;
    --fg-surface: #FFFFFF;
    --fg-border: #E9ECEF;
    --fg-text-strong: #212529;
    --fg-text-muted: #6C757D;

    /* Elevação de card (destaque sobre o canvas; hover só em card interativo) */
    --fg-shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --fg-shadow-card-hover: 0 4px 8px rgba(16, 24, 40, .10);

    /* Estados de pedido (semânticos). Alinhados aos matizes do tema (Warning/Info/Success/Error)
       para o app ter UM sistema de cor — sempre acompanhados de rótulo textual, nunca só cor. */
    --fg-status-new: #B45309;            /* novo/pendente — âmbar */
    --fg-status-new-bg: #FEF3C7;
    --fg-status-preparing: #0277BD;      /* em preparo — azul */
    --fg-status-preparing-bg: #E1F5FE;
    --fg-status-ready: #2E7D32;          /* pronto — verde */
    --fg-status-ready-bg: #E8F5E9;
    --fg-status-delivered: #6C757D;      /* entregue — neutro */
    --fg-status-delivered-bg: #ECEFF1;
    --fg-status-late: #DC2626;           /* atrasado/urgente — vermelho */
    --fg-status-late-bg: #FEE2E2;

    /* Alvos de toque (telas operacionais) */
    --fg-touch: 48px;
    --fg-touch-primary: 56px;
    --fg-touch-compact: 40px;

    /* Densidade de tabelas (listagens) — gap horizontal entre colunas */
    --fg-table-cell-padding-x: 6px;

    /* Barra de filtros (AppFilterBar) — largura de partida e teto de cada tipo de campo.
       Ajuste aqui para afinar todas as barras de uma vez. */
    --fg-filter-search-basis: 260px;
    --fg-filter-search-max: 560px;
    --fg-filter-field-basis: 200px;
    --fg-filter-field-max: 320px;

    /* Compat: tokens antigos apontam para a nova escala */
    --app-page-gap: var(--fg-space-5);
    --app-section-gap: var(--fg-space-4);
}

/* ---- Card padrão (fundação — a Fase 2 aplica nos componentes) ----
   Superfície elevada sobre o canvas: raio + sombra dos tokens; hover só na variante interativa. */
.fg-card {
    background: var(--fg-surface);
    border-radius: var(--fg-radius-card);
    box-shadow: var(--fg-shadow-card);
}

.fg-card--interactive {
    transition: box-shadow 120ms ease;
}

.fg-card--interactive:hover {
    box-shadow: var(--fg-shadow-card-hover);
}

/* Cards usam o raio maior do design system (papers/inputs seguem no raio padrão do tema). */
.mud-card {
    border-radius: var(--fg-radius-card);
}

/* ---- Chip de estado de pedido (AppStatusChip) ----
   Tinta + texto dos tokens --fg-status-*; o rótulo textual sempre acompanha (nunca só cor). */
.fg-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* ---- Usabilidade operacional (toque/polegar) ---- */
/* Alvo de toque confortável para os botões de ação das telas de serviço (KDS/cumim/garçom). */
.fg-touch.mud-button-root {
    min-height: var(--fg-touch);
    padding-inline: var(--fg-space-4);
    font-size: 1rem;
}

/* Botão de ação de card: largura total, altura compacta mas ainda tocável (≥40px). */
.fg-touch-sm.mud-button-root {
    min-height: var(--fg-touch-compact);
}

/* Filtro de chips rolável por toque (KDS/Serviço/Incidentes): sem setas, scrollbar oculta, alvos ≥40px. */
.fg-chip-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fg-chip-filter::-webkit-scrollbar {
    display: none;
}

.fg-chip-filter .mud-chip {
    flex: 0 0 auto;
    height: var(--fg-touch-compact);
    border-radius: calc(var(--fg-touch-compact) / 2);
    margin: 0; /* MudChip tem margin default de 4px */
}

/* Informação-chave (item, mesa, status) — legível de relance, sob luz forte/cozinha. */
.fg-key-info {
    font-size: 1.125rem;
    line-height: 1.4;
}

/* ---- Barra de ação fixa (AppActionBar) ----
   Ação primária ao alcance do polegar: cola no rodapé enquanto a página rola;
   no mobile fica acima da bottom nav. O botão dentro dela tem o alvo primário (56px). */
.fg-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--fg-space-3);
    margin-top: var(--fg-space-4);
    padding: var(--fg-space-3) var(--fg-space-4);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--fg-radius) var(--fg-radius) 0 0;
    box-shadow: 0 -2px 8px rgba(16, 24, 40, .06);
}

.fg-actionbar .mud-button-root {
    min-height: var(--fg-touch-primary);
    flex: 1 1 auto;
    font-size: 1.05rem;
}

@media (max-width: 959.95px) {
    .fg-actionbar {
        bottom: calc(58px + env(safe-area-inset-bottom, 0)); /* acima da bottom nav */
    }
}

.fg-status-chip--new { color: var(--fg-status-new); background: var(--fg-status-new-bg); }
.fg-status-chip--preparing { color: var(--fg-status-preparing); background: var(--fg-status-preparing-bg); }
.fg-status-chip--ready { color: var(--fg-status-ready); background: var(--fg-status-ready-bg); }
.fg-status-chip--delivered { color: var(--fg-status-delivered); background: var(--fg-status-delivered-bg); }
.fg-status-chip--late { color: var(--fg-status-late); background: var(--fg-status-late-bg); }

/* ---- Cabeçalho de página ---- */
.app-page-container {
    padding-block: var(--fg-space-2) var(--fg-space-6);
}

.app-page-header {
    display: flex;
    align-items: center;
    gap: var(--fg-space-3);
    margin-bottom: var(--app-page-gap);
}

.app-page-header__title {
    display: flex;
    align-items: center;
    gap: var(--fg-space-2);
}

.app-page-header__actions {
    margin-left: auto;
    display: flex;
    gap: var(--fg-space-2);
    align-items: center;
}

/* No mobile as ações ocupam a linha inteira — botões full-width para não vazarem à direita. */
@media (max-width: 768px) {
    .app-page-header {
        flex-wrap: wrap;
    }

    .app-page-header__actions {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .app-page-header__actions > .mud-button-root {
        width: 100%;
    }

    .app-page-header__actions .mud-button-group-root {
        width: 100%;
    }

    .app-page-header__actions .mud-button-group-root > .mud-button-root {
        flex: 1 1 0;
    }
}

/* Títulos de página um pouco menores no mobile. */
@media (max-width: 600px) {
    .app-page-header .mud-typography-h5 {
        font-size: 1.05rem;
    }
}

/* ---- Barra de filtros das listagens (AppFilterBar) ----
   Flexbox em vez do grid de 12 colunas de propósito: o switch tem largura intrínseca (trilho +
   rótulo) e numa célula percentual o rótulo vaza assim que a tela encolhe. Aqui o campo fixo
   nunca encolhe (flex-shrink 0) e os elásticos cedem espaço primeiro — o vazamento fica
   estruturalmente impossível, sem depender de acertar breakpoint por tela. */
.app-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fg-space-4);
}

/* Busca: absorve a sobra da barra, até o teto. */
.app-filter-bar__item--search {
    flex: 1 1 var(--fg-filter-search-basis);
    max-width: var(--fg-filter-search-max);
}

/* Campo comum: elástico, com largura de conforto. */
.app-filter-bar__item--field {
    flex: 1 1 var(--fg-filter-field-basis);
    max-width: var(--fg-filter-field-max);
}

/* Largura intrínseca (switch/botão/chip): nunca encolhe nem estica. */
.app-filter-bar__item--fixed {
    flex: 0 0 auto;
}

/* Variante densa (diálogos): re-escopa os tokens de largura — 140+120+8 de gap = 268px,
   cabe nos 312px úteis do diálogo mobile. Os tetos (*-max) ficam: no desktop os campos
   crescem de volta ao conforto. */
.app-filter-bar--dense {
    gap: var(--fg-space-2);
    --fg-filter-search-basis: 140px;
    --fg-filter-field-basis: 120px;
}

/* ---- Diálogo com lista longa (ex.: copiar modificadores) ----
   Um único scroller: a lista. Um teto em vh na lista parece resolver, mas ela não sabe quanto
   espaço sobrou no diálogo — se errar para mais, o conteúdo do diálogo passa a rolar TAMBÉM e
   ficam dois scrollers aninhados (no celular o dedo empurra o container errado). Aqui o conteúdo
   não rola (overflow hidden), o cabeçalho e os filtros não encolhem, e a lista fica com o que
   sobrar, seja qual for a altura da tela. Global porque a isolação de CSS não alcança o
   .mud-dialog-content, que quem renderiza é o MudDialog. */
.app-dialog-fill-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tudo que não é a lista mantém o tamanho natural; só a lista cede. */
.app-dialog-fill-content > :not(.app-dialog-fill-scroll) {
    flex: 0 0 auto;
}

.app-dialog-fill-scroll {
    flex: 1 1 auto;
    /* min-height:0 é o que permite encolher abaixo do conteúdo — sem isso o item flex tem piso
       automático no tamanho do conteúdo e o overflow reaparece no pai. */
    min-height: 0;
    overflow-y: auto;
}

/* ---- Título de diálogo (AppDialogTitle) ----
   Ação curta fixa + subtítulo com o dado variável (produto/cliente/mesa), truncado com
   ellipsis — o dado tem qualquer tamanho e o cabeçalho mantém altura previsível.
   min-width:0 em cada nível do flex: sem isso o item tem piso min-content e o ellipsis
   nunca dispara. nowrap também neutraliza o overflow-wrap:anywhere do .mud-dialog-title. */
.app-dialog-title {
    display: flex;
    align-items: center;
    gap: var(--fg-space-2);
    min-width: 0;
}

.app-dialog-title__icon {
    flex: 0 0 auto;
}

.app-dialog-title__text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-dialog-title__title,
.app-dialog-title__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nota à esquerda no rodapé do diálogo ("N selecionado(s)") — empurra os botões para a
   direita e trunca em vez de quebrar o rodapé em duas linhas. O recuo alinha com o padding
   de 24px do conteúdo no desktop. */
.app-dialog-actions-note {
    margin-right: auto;
    margin-inline-start: var(--fg-space-4);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utilitário: contadores/legendas curtas que não podem quebrar linha. */
.fg-nowrap {
    white-space: nowrap;
}

/* ---- Diálogos em telas pequenas ----
   FullWidth do MudBlazor rende width: calc(100% - 64px) e paddings de 24px — em 360px sobram
   248px úteis e tudo empilha. Aqui o vão cai para 8px por lado e os paddings para 16px
   (312px úteis). :not(.mud-dialog-fullscreen) preserva diálogos fullscreen futuros, que têm
   largura e margem próprias. Global porque a isolação de CSS não alcança o .mud-dialog. */
@media (max-width: 599.95px) {
    .mud-dialog-width-full:not(.mud-dialog-fullscreen) {
        width: calc(100% - 16px);
    }

    .mud-dialog-width-false:not(.mud-dialog-fullscreen) {
        max-width: calc(100% - 16px);
    }

    /* O default reserva a altura da appbar — num diálogo modal ela não importa. */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        max-height: calc(100dvh - 24px);
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title {
        padding: 12px 16px 8px;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        padding: 8px 16px;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        padding: 8px 12px;
    }

    .mud-dialog-title .mud-typography-h6 {
        font-size: 0.9375rem;
    }

    .app-dialog-actions-note {
        margin-inline-start: 0;
    }
}

/* ---- Tabelas ---- */
.app-data-table {
    border-radius: var(--fg-radius-card);
}

/* Rolagem horizontal segura para tabelas largas em telas estreitas. */
.app-data-table .mud-table-container {
    overflow-x: auto;
}

/* Densidade das listagens — reduz o gap horizontal entre colunas em todas as tabelas.
   Só o eixo horizontal é alterado; a altura da linha é preservada.
   Global + !important porque a isolação de CSS não alcança os <td>/<th> gerados
   pelos componentes MudTd/MudTh. */
.mud-table-cell {
    padding-left: var(--fg-table-cell-padding-x) !important;
    padding-right: var(--fg-table-cell-padding-x) !important;
}

/* MudSimpleTable não recebe a classe .mud-table-cell; aplica a mesma densidade. */
.mud-simple-table td,
.mud-simple-table th {
    padding-left: var(--fg-table-cell-padding-x) !important;
    padding-right: var(--fg-table-cell-padding-x) !important;
}

/* ---- Utilitário mono (dados/números/códigos — "painel de controle") ---- */
.fg-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}

/* ---- Cards de altura igual (Fase 3) ----
   Aplique .fg-cards no MudGrid: cada MudItem estica e o MudCard ocupa 100% da altura,
   com as ações fixadas embaixo — cards da mesma linha ficam com altura idêntica. */
.fg-cards .mud-grid-item {
    display: flex;
}

.fg-cards .mud-grid-item > .mud-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fg-cards .mud-card > .mud-card-content {
    flex: 1 1 auto;
}

.fg-cards .mud-card > .mud-card-actions {
    margin-top: auto;
}

/* Conteúdo muito variável dentro do card (ex.: lista de itens do pedido QR)
   não deve explodir a altura — cabe numa área rolável. */
.fg-card-scroll {
    max-height: 9.5rem;
    overflow-y: auto;
}

/* ---- Barra de navegação inferior (mobile) — estilo Mercado Pago ---- */
.fg-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    height: 58px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    justify-content: center;
    align-items: stretch;
}

.fg-bottomnav__item {
    /* Cada item cresce para preencher no mobile, mas nunca passa de --fg-bottomnav-item-max.
       Em telas grandes eles param de esticar e o conjunto fica centralizado (justify-content: center).
       >>> Ajuste APENAS este valor para aproximar/afastar os ícones: menor = mais juntos. <<< */
    --fg-bottomnav-item-max: 96px;
    flex: 1 1 0;
    max-width: var(--fg-bottomnav-item-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    padding: 6px 2px;
    min-width: 0;
}

.fg-bottomnav__label {
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fg-bottomnav__item.active {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Em <768px a barra mostra só os 5 principais; do 6º item em diante fica escondido.
   Em ≥768px todos os itens permitidos aparecem. */
@media (max-width: 767.95px) {
    .fg-bottomnav__item:nth-child(n+6) {
        display: none;
    }
}

/* Barra inferior é sempre visível — reserva espaço para não cobrir o conteúdo em qualquer largura. */
.fg-main-content {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0) + 0.5rem);
}

/* ---- Picker (MudAutocomplete via AppSearchSelect) no mobile ----------------------------------- */
/* A lista precisa ficar acima da barra inferior fixa (z-index:1300) e rolável em telas pequenas. */
.fg-autocomplete-popover {
    z-index: 1301;
}

.fg-autocomplete-popover .mud-list {
    max-height: 40vh;
}

/* ---- Diálogos de cadastro/edição em tela cheia no celular ------------------------------------- */
/* No celular os modais viram full-screen: os campos ficam no topo e a lista do picker tem espaço
   acima do teclado. No desktop os diálogos seguem centralizados (MaxWidth). */
@media (max-width: 600px) {
    .fg-dialog-responsive.mud-dialog {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .fg-dialog-responsive .mud-dialog-content {
        max-height: none;
    }
}

/* ---- Folha de QR das mesas (grid + impressão) ------------------------------------------------- */
.fg-qr-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.fg-qr-cell {
    text-align: center;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    break-inside: avoid;
}

.fg-qr-cell svg {
    width: 100%;
    max-width: 180px;
    height: auto;
}

/* Na impressão, isola a folha: esconde todo o resto (chrome do app, backdrop do diálogo, botões) e
   mostra só o grid de QRs, ancorado no topo, em 3 colunas. */
@media print {
    body * {
        visibility: hidden;
    }

    .fg-qr-sheet,
    .fg-qr-sheet * {
        visibility: visible;
    }

    .fg-qr-sheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }
}