html, body {
    font-family: 'Reddit Sans', 'Roboto', 'Segoe UI', system-ui, sans-serif;
    height: 100%;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Contraste de texto dos chips/tags (Design System — spec 047)
   Chips Text/Outlined coloridos com Primary/Tertiary usam a própria cor do
   destaque como cor do texto. Verde e amarelo claros ficam ilegíveis sobre
   superfícies claras — então definimos uma cor de texto legível por
   destaque (data-accent) e por tema (data-theme), setados no <html> pelo
   ThemeService. Fills (Variant.Filled) já resolvem via ContrastText.
   ───────────────────────────────────────────────────────────────────────── */
:root { --jam-chip-primary-text: var(--mud-palette-primary); --jam-chip-tertiary-text: var(--mud-palette-tertiary); }

/* Tema claro — texto escurecido para contraste sobre fundo claro */
[data-theme="claro"][data-accent="verde"]   { --jam-chip-primary-text: #5C8A1C; }
[data-theme="claro"][data-accent="laranja"] { --jam-chip-primary-text: #D2620A; }
[data-theme="claro"][data-accent="amarelo"] { --jam-chip-primary-text: #8A7500; }
[data-theme="claro"] { --jam-chip-tertiary-text: #8A6D00; }

/* Tema escuro — usa os tons vivos do destaque sobre fundo escuro */
[data-theme="escuro"][data-accent="verde"]   { --jam-chip-primary-text: #A3D74F; }
[data-theme="escuro"][data-accent="laranja"] { --jam-chip-primary-text: #F5972E; }
[data-theme="escuro"][data-accent="amarelo"] { --jam-chip-primary-text: #FADD01; }
[data-theme="escuro"] { --jam-chip-tertiary-text: #F9B801; }

.mud-chip.mud-chip-text.mud-chip-color-primary,
.mud-chip.mud-chip-outlined.mud-chip-color-primary {
    color: var(--jam-chip-primary-text) !important;
}
.mud-chip.mud-chip-outlined.mud-chip-color-primary {
    border-color: var(--jam-chip-primary-text) !important;
}
.mud-chip.mud-chip-text.mud-chip-color-tertiary,
.mud-chip.mud-chip-outlined.mud-chip-color-tertiary {
    color: var(--jam-chip-tertiary-text) !important;
}
.mud-chip.mud-chip-outlined.mud-chip-color-tertiary {
    border-color: var(--jam-chip-tertiary-text) !important;
}

/* ── Impressão de etiquetas A4 (spec 033) ── */
.etiqueta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
}
.etiqueta-box {
    border: 1px solid #999;
    border-radius: 4px;
    padding: 3mm;
    height: 30mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.etiqueta-nome { font-size: 11px; font-weight: 600; line-height: 1.1; }
.etiqueta-sub  { font-size: 9px; color: #555; }
.etiqueta-preco { font-size: 13px; font-weight: 700; }

/* Cada folha tem no máximo 10 etiquetas; na tela mostra só a folha ativa. */
.etiqueta-folha { display: none; }
.etiqueta-folha.ativa { display: block; }

@media print {
    .no-print { display: none !important; }
    body * { visibility: hidden; }
    .etiqueta-area, .etiqueta-area * { visibility: visible; }
    .etiqueta-area { position: absolute; left: 0; top: 0; width: 100%; }
    .etiqueta-box { break-inside: avoid; }
    /* No papel, imprime todas as folhas, uma por página. */
    .etiqueta-folha { display: block !important; page-break-after: always; }
    .etiqueta-folha:last-child { page-break-after: auto; }
}

/* ── Logo da marca por tema (spec 047) ──────────────────────────────────────
   Duas logos: fundo claro (tema light) e fundo escuro (tema dark). O
   ThemeService seta data-theme no <html>; o CSS mostra a certa. */
.jam-logo { height: 40px; width: auto; display: block; }
.jam-logo-dark { display: none; }
[data-theme="escuro"] .jam-logo-light { display: none; }
[data-theme="escuro"] .jam-logo-dark { display: block; }

/* Transição suave ao expandir/colapsar o drawer */
.mud-drawer {
    transition: width 0.25s ease;
}

/* Ocultar texto da label quando drawer mini */
.mud-nav-link .mud-nav-link-text {
    overflow: hidden;
    white-space: nowrap;
}

/* ── Documentação (Home) ───────────────────────────────────────────────────── */
.doc-layout {
    display: flex;
    margin-top: 60px;
}
.doc-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}
.doc-toc {
    padding-bottom: 12px;
}
.doc-group-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.doc-group-header:hover {
    background: var(--mud-palette-action-default-hover);
}
.doc-navlink {
    font-size: 0.85rem !important;
    padding: 6px 16px !important;
    border-radius: 0 !important;
    min-height: 34px !important;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.doc-navlink:hover {
    background: var(--mud-palette-action-default-hover);
}
.doc-content {
    flex: 1;
    padding: 32px 40px;
    max-width: 900px;
    min-height: 100vh;
}
.doc-content h3, .doc-content .mud-typography-h3 {
    margin-bottom: 4px;
}
.doc-content p {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
}
.doc-card {
    transition: transform .15s, box-shadow .15s;
}
.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-4) !important;
}
.doc-step-card {
    margin-bottom: 20px;
}
.doc-content code {
    background: var(--mud-palette-background-gray);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .85em;
}
@media (max-width: 768px) {
    .doc-sidebar { display: none; }
    .doc-content { padding: 16px; max-width: 100%; }
}

/* Blazor error UI */
#blazor-error-ui {
    background: #ffcdd2;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }