/* 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;

    /* 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;
    }
}

/* ---- 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;
}

/* ---- 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: space-around;
    align-items: stretch;
}

.fg-bottomnav__item {
    flex: 1 1 0;
    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;
}

/* No mobile, reserva espaço para a barra inferior não cobrir o conteúdo. */
@media (max-width: 959.95px) {
    .fg-main-content {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0) + 0.5rem);
    }
}