html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Segue a paleta ativa (dark/light) do MudThemeProvider — evita flash/descompasso
       de cor fora da área coberta pelo MudMainContent. */
    background-color: var(--mud-palette-background, #0A0D14);
    color: var(--mud-palette-text-primary, #F2F3F5);
}

/* ---- StatusOSStepper.razor — stepper horizontal do StatusOS (visão macro/manual da OS).
   done/current usam cores fixas de progresso (verde/azul), independentes de tema — não
   representam a cor "oficial" de um StatusOS específico, só o estado done/current/todo.
   "todo" usa token de tema (background-gray) pra não quebrar no modo claro. ---- */
.os-stepper {
    display: flex;
    align-items: flex-start;
}

.os-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 96px;
}

.os-step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.os-step-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.os-step.done .os-step-circle {
    background-color: #22C55E;
    border-color: #22C55E;
    color: #fff;
}

.os-step.done .os-step-label {
    color: #22C55E;
}

.os-step.current {
    cursor: pointer;
}

.os-step.current .os-step-circle {
    background-color: #3B82F6;
    border-color: #3B82F6;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .25);
    transition: box-shadow 150ms ease;
}

.os-step.current:hover .os-step-circle {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .28);
}

.os-step.current .os-step-label {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.os-step-connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 16px;
    background-color: var(--mud-palette-lines-default);
    margin-top: 13px;
}

.os-step-connector.done {
    background-color: #22C55E;
}

/* ---- Área de conteúdo principal (MudMainContent, Class="os-main-content" no
   MainLayout) ---- MudBlazor reserva por padrão um padding-top igual à altura de um
   AppBar, mesmo quando não existe nenhum MudAppBar na página (não é o caso deste app —
   a sidebar já tem seu próprio cabeçalho). Isso empurrava todo o conteúdo pra baixo do
   topo real da área, desalinhando o breadcrumb da logo na sidebar. Essa regra só pode
   viver aqui (CSS global) e não no MainLayout.razor.css: o markup de nível superior do
   MainLayout é só tags de componente filho (MudLayout, MudMainContent...), sem nenhum
   elemento HTML puro envolvendo tudo — não existe ancestral pra carregar o atributo de
   escopo, então nem ::deep alcançaria esse elemento. */
.os-main-content {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
    padding-top: 0 !important;
}

/* ---- Cabeçalho de página (PageHeader.razor) — breadcrumb discreto + H1, mesmo
   espaçamento em toda a aplicação. ---- */
.page-header {
    margin-bottom: 22px;
}

.page-header .breadcrumb {
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 14px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* ---- Logo no card de login (Login.razor) ---- */
.os-login-logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 24px;
    /* O SVG (fundo-escuro) já vem com retângulo de fundo navy próprio — a página de login
       é sempre dark (AuthLayout força IsDarkMode="true"), mas o card usa a cor "surface" do
       tema, não o mesmo navy exato do logo; arredondar os cantos evita esse retângulo ficar
       com quinas duras destoando do resto do card, que já é arredondado. */
    border-radius: 12px;
}

/* Utilitários de estilo "pill" para botões de ação principal e campos de busca.
   Aplicados via classe onde fizer sentido (não fazem parte do raio global do tema). */
.os-pill,
.os-pill .mud-button-root {
    border-radius: 999px !important;
}

.os-search-pill .mud-input-outlined,
.os-search-pill .mud-input-outlined .mud-input-outlined-border {
    border-radius: 999px !important;
}

/* ---- Cards de superfície (filtros/tabelas) — destacam o bloco do fundo escuro da
   página com uma borda sutil, em vez de depender só de sombra (Elevation). ---- */
.os-surface-card {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 12px !important;
}

.c-red {
    background-color: rgba(239, 68, 68, .14);
    color: #EF4444;
}

.nav-icon-badge.c-red .mud-icon-root {
    color: #EF4444;
}

/* ---- Home.razor (dashboard) ---- */
.os-dashboard-stat {
    cursor: pointer;
    transition: border-color .15s ease;
}

.os-dashboard-stat:hover {
    border-color: var(--mud-palette-primary) !important;
}

.os-dashboard-stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.os-dashboard-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.os-dashboard-stat-valor {
    font-size: 30px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}

.os-dashboard-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    color: var(--mud-palette-text-secondary);
}

/* Quando o card envolve uma tabela/grid, o conteúdo fica sem padding próprio
   (a borda/raio já vêm do card) e é recortado pelos cantos arredondados. */
.os-table-wrapper.os-surface-card {
    padding: 0 !important;
    overflow: hidden;
}

.os-table-wrapper .mud-table-head,
.os-table-wrapper .mud-table-toolbar {
    background-color: var(--mud-palette-surface) !important;
}

.os-table-wrapper .mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.os-table-wrapper .mud-table-cell {
    padding: 12px 14px !important;
}

/* ---- Badge colorido por trás dos ícones de nível 1 da sidebar ----
   Quadrado 28x28, cantos suaves, fundo na cor do item em baixa opacidade e o
   ícone na mesma cor em opacidade sólida. A cor é fixa por item (não muda em
   hover/active — só o fundo/indicador da linha muda, ver NavMenu.razor.css). */
.nav-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-inline-end: 10px;
    flex-shrink: 0;
}

.nav-icon-badge .mud-icon-root {
    font-size: 1.15rem;
}

.c-slate {
    background-color: rgba(148, 163, 184, .14);
    color: #94A3B8;
}

.c-blue {
    background-color: rgba(59, 130, 246, .14);
    color: #3B82F6;
}

.c-amber {
    background-color: rgba(245, 158, 11, .14);
    color: #F59E0B;
}

.c-purple {
    background-color: rgba(167, 139, 250, .14);
    color: #A78BFA;
}

.c-green {
    background-color: rgba(34, 197, 94, .14);
    color: #22C55E;
}

.nav-icon-badge.c-slate .mud-icon-root {
    color: #94A3B8;
}

.nav-icon-badge.c-blue .mud-icon-root {
    color: #3B82F6;
}

.nav-icon-badge.c-amber .mud-icon-root {
    color: #F59E0B;
}

.nav-icon-badge.c-purple .mud-icon-root {
    color: #A78BFA;
}

.nav-icon-badge.c-green .mud-icon-root {
    color: #22C55E;
}

/* ---- Chip de status (StatusChip.razor) — fundo/cor vêm por style inline (por status),
   aqui só a forma: pill sólido + bolinha antes do texto. ---- */
.os-status-chip.mud-chip {
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 12px;
}

.os-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-inline-end: 6px;
}

/* ---- Botão de ação WhatsApp (AlterarStatusOsDialog "Enviar Whats e Alterar" e o atalho
   no cabeçalho de OrdemServicoDetalhes) — fonte única do verde do WhatsApp no app; nenhum
   dos dois lugares deve ter cor/estilo duplicado por fora desta classe. ---- */
.os-btn-whatsapp {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    background: #25D366;
    color: #06210F;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37,211,102,.25);
}

.os-btn-whatsapp:hover {
    background: #1EBE5A;
}

/* ---- FormField.razor — label como texto normal acima do campo, no lugar do Label
   embutido do MudBlazor (que no Variant.Outlined corta a borda do campo com o notch
   clássico do Material Design assim que o campo tem valor/foco). ---- */
.os-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: none;
}

/* ---- MudSelect cujo valor exibido é um componente (ex.: StatusOsChip/StatusChip) em vez
   de texto puro — "Status da OS"/"Novo status". Sem Label nativo (ver FormField.razor), o
   MudBlazor usa a variante de input "sem label", cujo .mud-input-slot no Variant.Outlined
   ganha padding vertical ASSIMÉTRICO (mais em cima que embaixo) — reservado originalmente
   pra abrir espaço pro label flutuante, que aqui não existe mais. Resultado: o chip ficava
   visualmente grudado na parte de baixo da caixa. display:flex + padding vertical igual
   resolve independente da combinação exata de classes internas do MudBlazor (!important
   necessário: a regra original do MudBlazor tem 3 classes encadeadas, mais específica que
   ".status-select .mud-input-slot"). ---- */
.status-select .mud-input-slot {
    display: flex !important;
    align-items: center !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* ---- Pré-visualização da logo da empresa (Configuracoes.razor) — mesma caixa (tamanho,
   borda, cantos) esteja a logo carregada ou não, pro botão "Selecionar Logo" ao lado nunca
   pular de posição quando a imagem some/aparece. ---- */
.os-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    object-fit: contain;
    background-color: var(--mud-palette-background-gray);
    flex-shrink: 0;
}

.os-logo-preview-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
}

/* ---- DialogHeader.razor — cabeçalho reutilizável de TitleContent (título + subtítulo
   opcional + ícone opcional), usado em todo MudDialog do projeto pra nenhum título voltar a
   duplicar visualmente o Label do primeiro campo/opção logo abaixo dele. ---- */
.dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dialog-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dialog-header-icon-primary {
    background: rgba(59, 130, 246, .14);
    color: #3B82F6;
}

.dialog-header-icon-error {
    background: rgba(239, 68, 68, .14);
    color: var(--mud-palette-error);
}

.dialog-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.dialog-header-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ---- Padding lateral do AlterarStatusOsDialog (ContentClass) — acompanha a largura maior
   do modal (560px, ver Style inline no MudDialog); o padding padrão do MudBlazor pra
   .mud-dialog-content é 8px 24px. ---- */
.dialog-content-lg {
    padding: 16px 28px !important;
}

/* Garantia extra de largura pro AlterarStatusOsDialog, além do Style inline no MudDialog
   (Style já deveria bastar sozinho — não existe MaxWidth/DialogOptions global no
   MudDialogProvider do MainLayout/AuthLayout que pudesse estar competindo com ele). Esta
   regra existe só como reforço via seletor de classe, caso algum outro CSS mais específico
   apareça no futuro e volte a apertar esse modal. */
.mud-dialog.alterar-status-os-dialog {
    width: 560px !important;
    max-width: 90vw !important;
}

/* Campo Mensagem do AlterarStatusOsDialog — cresce pelo Lines (ver Lines="9" no
   MudTextField), não por arrasto manual do usuário: resize desabilitado de propósito.
   font-weight explícito pra igualar ao peso do dialog-header-subtitle (400) — o MudBlazor
   tem uma regra própria ".mud-input>textarea.mud-input-root{font:inherit;...}" com
   especificidade MAIOR (duas classes) que ".dialog-textarea-lg textarea" (uma classe + tag),
   então um "font-weight: 400" simples aqui perdia a cascata e o peso herdado (mais pesado
   que o do tema) continuava vencendo. !important garante que este, e só este, vença —
   não há outro !important competindo em font-weight pra esse elemento. */
.dialog-textarea-lg {
    width: 100%;
}

.dialog-textarea-lg textarea {
    min-height: 200px;
    resize: none;
    font-weight: 400 !important;
    font-size: 13.5px;
    color: var(--mud-palette-text-primary);
}

/* ---- Botões de rodapé de dialog (AlterarStatusOsDialog) — elementos <button> puros, sem
   nenhum MudButton por trás: evita o contorno/fundo residual do Variant.Outlined padrão do
   MudBlazor que as classes CSS não conseguiam sobrescrever por completo (conflito de
   especificidade com .mud-button-root). Mesmo padrão de "sem MudButton" já usado no botão
   de WhatsApp do cabeçalho da OS (os-btn-whatsapp). ---- */
/* Altura fixa e idêntica pros 3 (4, com o de excluir) botões de rodapé de dialog — sem
   isso, .dialog-btn-outline (tem border de 1.5px) e .os-btn-whatsapp (é flex por causa do
   ícone) acabavam com uma ou duas px de diferença de altura em relação ao .dialog-btn-ghost
   (sem border, block normal), o suficiente pra "flutuar" fora da linha visual dos outros.
   box-sizing: border-box garante que o border do outline entra DENTRO dos 40px, não some. */
.dialog-btn-ghost,
.dialog-btn-outline,
.os-btn-whatsapp,
.dialog-btn-danger,
.dialog-btn-primary {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

/* Pill preenchido de ação primária (ex.: "Salvar" na StickyActionBar de formulários longos)
   — mesmo padrão visual do os-btn-whatsapp/dialog-btn-danger, na cor primária do tema. */
.dialog-btn-primary {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 700;
    background: var(--mud-palette-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.dialog-btn-primary:hover {
    filter: brightness(0.92);
}

/* Reforço com escopo no rodapé real do dialog (classe do MudBlazor é .mud-dialog-actions —
   não existe ".modal-actions" neste projeto). Medi ao vivo via Playwright (bounding boxes +
   computed styles) e as 3 regras acima já bastam pra deixar os 3 botões com y e height
   idênticos (646.89 / 40px) — a diferença visual que ainda aparece é o pill VERDE
   preenchido "parecendo" maior ao lado do OUTLINE azul (1.5px de borda numa cor sólida lê
   como "menor" que um preenchimento sólido do mesmo tamanho — ilusão de ótica de
   contraste, não uma diferença real de caixa). Esta regra é só garantia extra, caso algum
   CSS mais específico apareça futuramente e volte a desalinhar de verdade. */
.mud-dialog-actions .dialog-btn-ghost,
.mud-dialog-actions .dialog-btn-outline,
.mud-dialog-actions .os-btn-whatsapp {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.dialog-btn-ghost {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.dialog-btn-ghost:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.dialog-btn-outline {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    border: 1.5px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    cursor: pointer;
    font-family: inherit;
}

.dialog-btn-outline:hover {
    background: rgba(59, 130, 246, .1);
}

/* Pill preenchido pra ações destrutivas em dialog (ex.: confirmar exclusão de Serviço) —
   mesmo padrão visual do os-btn-whatsapp, só que na cor de erro do tema em vez do verde do
   WhatsApp. */
.dialog-btn-danger {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 700;
    background: var(--mud-palette-error);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.dialog-btn-danger:hover {
    filter: brightness(0.92);
}

/* ---- Aviso "não incluído no orçamento" na coluna Valor Orçado da aba Serviços, junto com
   a linha inteira em opacity: .6 (RowStyleFunc no MudTable) — só aparece pra Equipamento
   com Status = Reprovado (ver OrdemServico.ValorTotalOrcamento, que já exclui esse item da
   soma exibida na aba Pagamento). ---- */
.os-nao-orcado-hint {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

/* ---- Subtítulo opcional do PageHeader (ex.: nome do cliente na tela de detalhes da OS) --- */
.page-header-subtitle {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* ---- Seletor de tema (Configurações > Preferências) ----
   Trilho segmentado único (não MudButton/MudButtonGroup) pra evitar que cada opção
   traga borda/elevação própria do Material — só a opção ativa fica com fundo cheio. */
.os-segmented {
    display: inline-flex;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.os-segmented button {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease;
}

.os-segmented button:hover:not(.active) {
    color: var(--mud-palette-text-primary);
}

.os-segmented button.active {
    background: var(--mud-palette-primary);
    color: white;
}

/* ---- StickyActionBar.razor — barra de ações fixa no rodapé de formulários longos
   (Cliente, Tipo de Serviço, Nova OS...), pra Salvar/Cancelar continuarem visíveis
   enquanto o resto do formulário rola. NÃO usar em MudDialog — dialogs compactos já têm
   seu próprio rodapé (.mud-dialog-actions).
   Sem bleed (margem negativa) de propósito: cada formulário que usa isto está dentro de um
   container com padding diferente (MudPaper "pa-4" = 16px em Cliente/Tipo de Serviço vs.
   ".os-content" = 32px em Nova OS) — um valor de margem negativa fixo aqui acertaria um
   caso e vazaria/ficaria torto no outro. A barra fica dentro do padding do container que a
   envolve; suficiente pro objetivo real (continuar visível ao rolar), sem esse risco. ---- */
.sticky-action-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 16px 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    z-index: 5;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Keep MudTable/MudDataGrid column sort icons visible at all times, not just on hover */
.mud-table-sort-label-icon {
    opacity: 1 !important;
}

.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    opacity: .8 !important;
}

/* ---- OrdemServicoImprimir.razor (rota /ordens-servico/{id}/imprimir, PrintLayout) ----
   Documento formatado pra impressão/PDF via Ctrl+P — sempre claro/profissional em papel,
   independente do tema (claro/escuro/auto) escolhido no resto do sistema; por isso usa
   cores fixas aqui, não var(--mud-palette-*) (essas mudam com o tema do usuário, o que não
   faz sentido pra uma folha impressa). Fora da tela, ".os-print-backdrop" só dá um fundo
   cinza-claro pra simular uma folha sobre a mesa enquanto o usuário confere antes de
   imprimir; @media print zera isso e deixa só o conteúdo do documento na página. ---- */
.os-print-backdrop {
    min-height: 100vh;
    background: #E7E9EE;
    padding: 24px 0 48px;
}

.os-print-toolbar {
    max-width: 210mm;
    margin: 0 auto 16px;
    padding: 0 12px;
    display: flex;
    justify-content: flex-end;
}

.os-print-btn {
    height: 40px;
    padding: 0 18px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #3B82F6;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.os-print-btn:hover {
    filter: brightness(0.92);
}

.os-print-page {
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    color: #1A1F2B;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 18mm 16mm;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    box-sizing: border-box;
}

.os-print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 2px solid #3B82F6;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.os-print-header-empresa {
    display: flex;
    align-items: center;
    gap: 14px;
}

.os-print-logo {
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
}

.os-print-empresa-dados {
    color: #444B5A;
}

.os-print-whatsapp {
    display: flex;
    align-items: center;
    gap: 4px;
}

.os-print-whatsapp svg {
    width: 13px;
    height: 13px;
}

.os-print-empresa-nome {
    font-size: 16px;
    font-weight: 700;
    color: #1A1F2B;
    margin-bottom: 2px;
}

.os-print-header-os {
    text-align: right;
    color: #444B5A;
    white-space: nowrap;
}

.os-print-os-titulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #3B82F6;
}

.os-print-os-numero {
    font-size: 20px;
    font-weight: 700;
    color: #1A1F2B;
    margin-bottom: 4px;
}

.os-print-status {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #EEF2FF;
    color: #3B82F6;
    font-size: 11px;
    font-weight: 700;
}

.os-print-section {
    margin-bottom: 16px;
}

.os-print-section-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #3B82F6;
    background: #F5F6F8;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.os-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    padding: 0 10px;
}

.os-print-grid-full {
    grid-column: 1 / -1;
}

.os-print-label {
    color: #5B6379;
    font-weight: 600;
}

.os-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.os-print-table th,
.os-print-table td {
    border: 1px solid #D7DAE0;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.os-print-table th {
    background: #F5F6F8;
    font-weight: 700;
    color: #444B5A;
}

.os-print-col-valor {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.os-print-hint {
    font-size: 10.5px;
    color: #9AA1B0;
    font-weight: 400;
    white-space: nowrap;
}

/* Cor/fundo vêm inline (StatusColorHelper.Hex/BackgroundRgba por linha, dinâmico por
   status) — aqui só o formato do "selo": mesmo helper de cor usado no chip de status em
   OrdemServicoDetalhes, simplificado pra 3 rótulos (ver RotuloAprovacao no code-behind). */
.os-print-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.os-print-totais {
    margin: 12px 0 0 auto;
    width: 260px;
}

.os-print-totais-linha {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
}

.os-print-totais-saldo {
    border-top: 1px solid #D7DAE0;
    margin-top: 2px;
    font-weight: 700;
    font-size: 14px;
}

.os-print-footer {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid #D7DAE0;
    color: #5B6379;
    font-size: 11px;
    white-space: pre-line;
}

.os-print-assinaturas {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    margin-top: 56px;
}

.os-print-assinatura {
    flex: 1;
}

.os-print-assinatura-linha {
    /* Espaço em branco acima da linha pra caber uma assinatura física a caneta antes dela. */
    margin-top: 48px;
    border-top: 1px solid #1A1F2B;
}

.os-print-assinatura-legenda {
    margin-top: 6px;
    text-align: center;
    color: #5B6379;
    font-size: 11px;
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    .os-print-toolbar {
        display: none !important;
    }

    .os-print-backdrop {
        background: #fff;
        padding: 0;
        min-height: 0;
    }

    .os-print-page {
        box-shadow: none;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 14mm 14mm;
    }
}