/* Workin Gestor — estilos globais
   Repaginada visual de 2026-09: mesma paleta de cores (definida em WorkinTheme.cs e exposta
   pelo MudBlazor como variáveis --mud-palette-*), tipografia Inter, sombras mais discretas e
   estados de foco/hover mais claros. Nenhuma cor nova é declarada aqui — tudo referencia as
   variáveis que o tema já gera, ou é uma variação de opacidade/tom delas. */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', var(--mud-typography-default-family, Roboto), Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.h-100 { height: 100%; }

/* Números tabulares em qualquer coluna monoespaçada (IDs, valores, datas em tabela) */
.mud-table-cell { font-variant-numeric: tabular-nums; }

code {
    background-color: rgba(0, 0, 0, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
}

/* ---------- foco de teclado consistente em todo o sistema ---------- */
a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---------- sombras mais discretas (o padrão do MudBlazor é pesado demais) ---------- */
.mud-elevation-1  { box-shadow: 0 1px 2px rgba(20,10,30,0.06); }
.mud-elevation-2  { box-shadow: 0 1px 2px rgba(20,10,30,0.05), 0 4px 10px -4px rgba(20,10,30,0.10); }
.mud-elevation-3,
.mud-elevation-4  { box-shadow: 0 1px 2px rgba(20,10,30,0.05), 0 6px 16px -6px rgba(20,10,30,0.13); }
.mud-elevation-8,
.mud-elevation-25 { box-shadow: 0 2px 4px rgba(20,10,30,0.06), 0 16px 32px -12px rgba(20,10,30,0.20); }

.mud-paper { border: 1px solid var(--mud-palette-lines-default); }
.mud-paper-outlined { box-shadow: none; }

/* ---------- botão preenchido: sombra colorida sutil em vez do elevation genérico ---------- */
.mud-button-filled-primary {
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.28);
}
.mud-button-filled-primary:hover {
    box-shadow: 0 4px 14px rgba(var(--mud-palette-primary-rgb), 0.38);
}
.mud-button-filled-error {
    box-shadow: 0 2px 8px rgba(var(--mud-palette-error-rgb), 0.25);
}

/* ---------- área principal do layout logado ----------
   Antes usava a classe utilitária "pa-4" do MudBlazor, que aplica "padding: 16px !important"
   nos 4 lados — isso zerava o padding-top que o MudBlazor calcula pra compensar o MudAppBar
   fixo (var(--mud-appbar-height)), e o título de cada página renderizava por baixo da barra
   roxa, cortado e ilegível. Aqui reaplicamos os mesmos 16px nas laterais/base e somamos a
   altura da AppBar no topo. */
.gestor-main-content {
    padding: 16px;
    padding-top: calc(var(--mud-appbar-height) + 16px);
}

/* ---------- cabeçalho de página (PageHeader.razor) — usado em toda tela ---------- */
.page-header { margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.3rem; color: var(--mud-palette-text-primary); width: 100%; }
.page-subtitle { margin: 0; color: var(--mud-palette-text-secondary); font-size: 0.9rem; max-width: 68ch; }
.page-header-actions { flex-shrink: 0; }

/* ---------- badges de status (MudChip) — "tonal", não mais o chip sólido clássico ---------- */
.mud-chip.mud-chip-size-small {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    height: 24px;
    border-radius: 999px;
}
.mud-chip-filled.mud-chip-color-default {
    background-color: rgba(20,10,30,0.06);
    color: var(--mud-palette-text-secondary);
}
.mud-chip-filled.mud-chip-color-primary   { background-color: rgba(var(--mud-palette-primary-rgb), 0.14);   color: var(--mud-palette-primary-darken); }
.mud-chip-filled.mud-chip-color-secondary { background-color: rgba(var(--mud-palette-secondary-rgb), 0.16); color: var(--mud-palette-secondary-darken); }
.mud-chip-filled.mud-chip-color-tertiary  { background-color: rgba(var(--mud-palette-tertiary-rgb), 0.16);  color: var(--mud-palette-tertiary-darken); }
.mud-chip-filled.mud-chip-color-success   { background-color: rgba(var(--mud-palette-success-rgb), 0.16);   color: var(--mud-palette-success-darken); }
.mud-chip-filled.mud-chip-color-error     { background-color: rgba(var(--mud-palette-error-rgb), 0.14);     color: var(--mud-palette-error-darken); }
.mud-chip-filled.mud-chip-color-warning   { background-color: rgba(var(--mud-palette-warning-rgb), 0.18);   color: var(--mud-palette-warning-darken); }
.mud-chip-filled.mud-chip-color-info      { background-color: rgba(var(--mud-palette-info-rgb), 0.14);      color: var(--mud-palette-info-darken); }

/* Chips "outlined" (ex.: tipo de usuário) ficam com o contorno mais discreto que o padrão */
.mud-chip-outlined { border-width: 1.5px; }

/* ---------- diálogos: título com peso, rodapé destacado do conteúdo ---------- */
.mud-dialog-title {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1.4rem 1.5rem 0.6rem;
}
.mud-dialog-title .mud-typography { font-weight: 700; }
.mud-dialog-content {
    padding: 0.5rem 1.5rem 1.25rem;
}
.mud-dialog-actions {
    padding: 0.9rem 1.5rem;
    background: rgba(20,10,30,0.025);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
}

/* ---------- tabelas: cabeçalho discreto, linhas com respiro ---------- */
.mud-table-head .mud-table-cell {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}
.mud-table-container { border-radius: var(--mud-default-borderradius); }

/* ---------- AppBar: marca com dois pesos, sem competir com os ícones ---------- */
.brand-title { letter-spacing: 0.01em; }
.brand-title-suffix { font-weight: 400; opacity: 0.85; }

/* ---------- navegação: item ativo com barra sólida na cor primária ---------- */
.mud-nav-link-text { white-space: nowrap; }
.mud-nav-link {
    border-radius: var(--mud-default-borderradius);
    transition: background-color .12s ease;
}
.mud-nav-link:not(.active):hover {
    background-color: rgba(20,10,30,0.045);
}
.mud-nav-link.active {
    position: relative;
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}
.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mud-palette-primary);
}

/* ---------- inputs: borda mais suave em repouso, anel de foco na cor primária ----------
   O contorno padrão do MudBlazor (outlined) é fino e neutro demais pra se destacar — e sem
   nenhum "anel" de foco, o campo ativo não chamava atenção. Isso é o que mais lembra um
   template antigo de admin, então recebeu o tratamento mais forte de toda a repaginada. */
.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs, rgba(20,10,30,0.18));
    transition: border-color .12s ease, box-shadow .12s ease;
}
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.5);
}
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.13);
}

/* ---------- animações de entrada ----------
   Suaves e curtas: só pra dar sensação de resposta ao trocar de tela / carregar dados.
   Quem pediu menos movimento no sistema operacional não vê nenhuma. */
@keyframes wg-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.page-enter { animation: wg-fade-up .28s ease-out both; }
.wg-stagger > * { animation: wg-fade-up .32s ease-out both; }
.wg-stagger > *:nth-child(2) { animation-delay: .04s; }
.wg-stagger > *:nth-child(3) { animation-delay: .08s; }
.wg-stagger > *:nth-child(4) { animation-delay: .12s; }
.wg-stagger > *:nth-child(5) { animation-delay: .16s; }
.wg-stagger > *:nth-child(6) { animation-delay: .20s; }

@keyframes wg-spin { to { transform: rotate(360deg); } }
.wg-spin { animation: wg-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .page-enter, .wg-stagger > *, .wg-spin { animation: none; }
}

/* ---------- card de superfície padrão (dashboard e afins) ---------- */
.wg-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(20,10,30,0.05);
}
.wg-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.15rem; color: var(--mud-palette-text-primary); }
.wg-card-caption { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }

/* Texto só para leitores de tela (ex.: cabeçalho "Ações" de coluna só com ícones) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Termo buscado destacado nos resultados (MudHighlighter) */
mark {
    background: rgba(var(--mud-palette-warning-rgb), 0.35);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* ---------- telas de listagem (painel + barra de filtros + tabela + paginação) ----------
   Padrão compartilhado por Usuários, Ordens de Serviço e as demais listas administrativas. */
.list-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,10,30,0.05);
    overflow: hidden;
}
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.list-toolbar .mud-input-control { margin: 0; }
.list-search { flex: 1 1 260px; max-width: 380px; }
.list-select { flex: 0 1 200px; }
.list-toggle { flex: none; }
.list-clear { text-transform: none; }

.list-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    color: var(--mud-palette-error);
}
.list-error span { flex: 1; }

.list-skeleton { padding: 0.25rem 1rem; }
.list-skeleton-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.list-table .mud-table-container { border-radius: 0; }
.list-table .mud-table-cell { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.list-row { transition: background-color .12s ease; }
.list-row-clickable { cursor: pointer; }

/* Status em texto com bolinha colorida (mais leve que chip quando há muitas colunas) */
.status-dot { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 500; }
.status-dot::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.status-dot-on { color: var(--mud-palette-success-darken); }
.status-dot-off { color: var(--mud-palette-text-secondary); }