/* CODE-LIGHT-72-ETIQUETAGEM | App | Fase 4.1 — só o que o tema MudBlazor não cobre (skill mudblazor-cl72/tema.md). */

html, body, .mud-typography, .mud-button, .mud-input, .mud-nav-link {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: #F5F7FA; color: #31374A; }

h1:focus, h5:focus { outline: none; }

/* o coral SÓ aqui: logo/wordmark e micro-destaque */
.cl72-marca { color: #F5803E; font-weight: 800; letter-spacing: .02em; }
/* S20-7: logo oficial ETIQUETAGEM (SVG em wwwroot/img); o texto .cl72-marca fica só como reserva */
.cl72-logo { display: inline-block; width: auto; max-width: 100%; vertical-align: middle; }

/* alvo de toque no tablet da cozinha */
.cl72-toque { min-height: 44px; }

/* casca */
.cl72-topbar { border-bottom: 1px solid #E3E6ED; }
.cl72-sidebar { border-right: 1px solid #E3E6ED; }

/* páginas públicas (login, regularização) */
.cl72-publico { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cl72-publico-cartao { width: 100%; max-width: 420px; }

/* grid de seleção: hover = tint, selecionado = roxo sólido */
.cl72-card-selecionavel { cursor: pointer; transition: background .12s, border-color .12s; }
.cl72-card-selecionavel:hover { background: #F3E8FF; border-color: #6D28D9; }
.cl72-card-selecionavel.selecionado { background: #6D28D9; color: #fff; border-color: #6D28D9; }
.cl72-card-selecionavel.selecionado .mud-typography { color: #fff; }
.cl72-card-selecionavel.selecionado .mud-icon-root { color: #fff; }
/* 4.2: método sem regra de validade — visível, mas não clicável (422 nunca acontece pela tela) */
.cl72-card-selecionavel.desabilitado { opacity: .45; cursor: not-allowed; }
.cl72-card-selecionavel.desabilitado:hover { background: inherit; border-color: #E3E6ED; }

/* 4.2: a prévia — a VALIDADE é o número gigante da tela de impressão */
.cl72-validade { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.cl72-rotulo { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6E7891; }

/* tela de carregamento antes do WASM subir */
.cl72-carregando { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.cl72-carregando-texto { color: #6E7891; font-size: .9rem; }
.cl72-barra { width: 200px; height: 4px; background: #E3E6ED; border-radius: 2px; overflow: hidden; }
.cl72-barra > div { width: 40%; height: 100%; background: #6D28D9; animation: cl72-desliza 1.2s infinite ease-in-out; }
@keyframes cl72-desliza { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

#blazor-error-ui {
    color: #fff; background: #FA3B1D; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: .5rem; }
/* 4.3: card de etiqueta excluída — visível para auditoria, sem parecer válida */
.cl72-excluida { opacity: .6; }
/* S20: a etiqueta como sai na térmica de 58 mm — "papel" branco com sombra, imagem sem suavização */
.cl72-papel-termico { background: #fff; border: 1px solid #E3E6ED; border-radius: 4px; padding: 10px 14px 18px; box-shadow: 0 2px 8px rgba(49,55,74,.12); max-width: 100%; }
.cl72-papel-termico img { display: block; width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; }
.cl72-codigo-pareamento { font-size: 3rem; font-weight: 800; letter-spacing: .35em; line-height: 1.1; }

/* S22-4/S22-6: grupos com ícone — botão de grupo na Impressão, quadro do ícone na aba Grupos e a grade de escolha */
.cl72-botao-grupo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 116px; height: 100%; text-align: center; }
.cl72-icone-grupo { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #F3E8FF; }
.cl72-icones { max-height: 300px; overflow-y: auto; padding: 2px 4px 4px 2px; }
.cl72-icone-opcao { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E3E6ED; border-radius: 8px; background: #fff; color: #31374A; cursor: pointer; transition: background .12s, border-color .12s; }
.cl72-icone-opcao:hover { background: #F3E8FF; border-color: #6D28D9; }
.cl72-icone-opcao:focus-visible { outline: 2px solid #6D28D9; outline-offset: 2px; }
.cl72-icone-opcao.selecionado { background: #6D28D9; border-color: #6D28D9; color: #fff; }