:root {
  --app-focus-color: var(--mud-palette-primary);

  /*
   * Sobrescreve as variaveis de tipografia do MudBlazor.
   * MudBlazor define essas variaveis com "Roboto" no tema padrao —
   * e ele aplica via `font-family: var(--mud-typography-*-family)` em
   * cada componente. Definir aqui faz tudo (Typography, Breadcrumbs,
   * Tabs, Chip, Button...) usar JetBrains Mono sem precisar listar
   * classe por classe.
   */
  --mud-typography-default-family: "JetBrains Mono", "Inter", system-ui, -apple-system, sans-serif;
  --mud-typography-h1-family: var(--mud-typography-default-family);
  --mud-typography-h2-family: var(--mud-typography-default-family);
  --mud-typography-h3-family: var(--mud-typography-default-family);
  --mud-typography-h4-family: var(--mud-typography-default-family);
  --mud-typography-h5-family: var(--mud-typography-default-family);
  --mud-typography-h6-family: var(--mud-typography-default-family);
  --mud-typography-subtitle1-family: var(--mud-typography-default-family);
  --mud-typography-subtitle2-family: var(--mud-typography-default-family);
  --mud-typography-body1-family: var(--mud-typography-default-family);
  --mud-typography-body2-family: var(--mud-typography-default-family);
  --mud-typography-button-family: var(--mud-typography-default-family);
  --mud-typography-caption-family: var(--mud-typography-default-family);
  --mud-typography-overline-family: var(--mud-typography-default-family);
}

.mud-dialog-content:has(.mud-lookup-dropdown),
.mud-dialog:has(.mud-lookup-dropdown),
.mud-dialog-container:has(.mud-lookup-dropdown) {
  overflow: visible !important;
}

/* Fonte global — JetBrains Mono. Aplicada com *:not(.mud-icon...) para
   forcar herancia em TODOS os elementos descendentes de body sem precisar
   listar todas as classes do MudBlazor (cada versao traz classes novas
   com font hardcoded). Excecoes: icones (devem manter Material Symbols). */
html,
body,
body *:not(i):not([class*="mud-icon"]):not([class*="material-icons"]):not([class*="material-symbols"]) {
  font-family:
    "JetBrains Mono",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif !important;
}

.mud-button-root {
  text-transform: lowercase !important;
}

.mud-button-root:focus:not(.mud-table-cell *):not(
    .mud-field .mud-icon-button
  ):not(.mud-input-adornment *):not(.mud-input-clear-button),
.mud-button-root:focus-visible:not(.mud-table-cell *):not(
    .mud-field .mud-icon-button
  ):not(.mud-input-adornment *):not(.mud-input-clear-button) {
  outline: 2px solid var(--app-focus-color) !important;
  outline-offset: 1px;
  transition: outline 0.1s ease-in-out;
}

.mud-button-outlined:focus:not(.mud-table-cell *):not(
    .mud-field .mud-icon-button
  ):not(.mud-input-adornment *):not(.mud-input-clear-button),
.mud-button-outlined:focus-visible:not(.mud-table-cell *):not(
    .mud-field .mud-icon-button
  ):not(.mud-input-adornment *):not(.mud-input-clear-button) {
  border-color: var(--app-focus-color) !important;
}

.mud-table-cell .mud-button-root:focus,
.mud-table-cell .mud-button-root:focus-visible {
  outline: 2px solid var(--app-focus-color) !important;
  outline-offset: 1px;
  transition: outline 0.1s ease-in-out;
}

.mud-table-cell-checkbox {
  padding: 0 4px !important;
  width: 12px !important;
}

.mud-checkbox:not(.mud-table-cell *):focus-within {
  outline: 2px solid var(--app-focus-color);
  outline-offset: 2px;
  border-radius: 8px;
  padding: 4px 12px 4px 4px;
  margin: -4px;
  transition: all 0.1s ease-in-out;
}

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

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "Ocorreu um erro nao tratado.";
}

.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto 0 auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: #2563eb;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Carregando FiscoCloud...");
}

code {
  color: #c02d76;
}

/* Remove fundo amarelo do Chrome autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ─────────────────────────────────────────────────────────────────────────
   Listagem — item inativo: opacidade na linha, line-through apenas no
   titulo (body1). Substitui chip 'Inativo/Suspenso' explicito.
   Padrao alinhado ao projeto de referencia (Cash.App).
   ─────────────────────────────────────────────────────────────────────── */
.linha-inativa {
  opacity: 0.7;
}
.linha-inativa .mud-typography-body1 {
  text-decoration: line-through;
}

/* ─────────────────────────────────────────────────────────────────────────
   Listagem — linha de metadados (NomeAdmin · email · slug · plano).
   Substitui MudStack Row, que quebrava palavras dentro de cada coluna do
   flex em viewports estreitos (ex. "Gael Barros" virando duas linhas).
   Aqui o conteudo flui inline como texto e quebra entre palavras de forma
   natural — mantendo word-wrap legivel em mobile sem fixar largura.
   ─────────────────────────────────────────────────────────────────────── */
.listagem-meta {
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: normal;
}
.listagem-meta .sep {
  margin: 0 0.25rem;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   Card-tile — MudPaper clicavel em dashboards. Hover destaca borda primaria
   e tinge sutilmente o fundo. Aplicar junto com .cursor-pointer para que
   apenas tiles realmente clicaveis recebam o realce no hover.
   ─────────────────────────────────────────────────────────────────────── */
.card-tile {
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out;
}
.card-tile.cursor-pointer:hover {
  background-color: var(--mud-palette-action-default-hover);
  border-color: var(--mud-palette-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   Chip de cabecalho — borda fina, cantos retos, fundo transparente.
   Padrao do projeto de referencia para badges discretos (plano, ambiente,
   status secundario). Uso: <span class="app-chip">PROFISSIONAL</span>.
   ─────────────────────────────────────────────────────────────────────── */
.app-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 0;
  color: var(--mud-palette-text-primary);
  background-color: transparent;
}