/* ===== Design System "Entida" (tema da marca) =====
   Tokens centrais: Dark Navy (solidez), Tech Teal (acao), Slate Gray (fundos).
   Tipografia Sans-Serif Geometrica via stack do sistema (Inter/Roboto se instaladas),
   SEM carregar fonte externa (compativel com a CSP enforce: style-src 'self'). */
:root {
    /* Cores */
    --entida-navy: #0F172A;       /* primaria */
    --entida-navy-2: #1E293B;     /* navy claro p/ gradiente/superficies */
    --entida-teal: #14B8A6;       /* acao */
    --entida-teal-dark: #0F9488;  /* hover/ativo */
    --entida-slate: #E2E8F0;      /* fundos */
    --entida-superficie: #ffffff; /* cards/superficies */
    --entida-borda: #cbd5e1;      /* bordas suaves */
    --entida-texto: #0F172A;
    --entida-texto-suave: #475569;

    /* Escala tipografica (nenhuma fonte funcional < 12px) */
    --font-size-xs: 12px;   /* breadcrumbs/metadata (minimo) */
    --font-size-sm: 14px;   /* labels, botoes, menu, tabelas */
    --font-size-base: 16px; /* texto base/inputs */
    --font-size-lg: 18px;   /* subtitulos/cards */
    --font-size-xl: 24px;   /* titulos de pagina */

    /* Pesos / line-height */
    --peso-regular: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --lh-apertado: 1.3;
    --lh-base: 1.5;

    /* Spacing / radius / sombra */
    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px;
    --raio-sm: 6px; --raio: 8px; --raio-lg: 12px;
    --sombra-leve: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
}

html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    color: var(--entida-texto);
    background-color: var(--entida-slate);
    font-size: var(--font-size-base);   /* base 16px (corrige sensacao de telas comprimidas) */
    line-height: var(--lh-base);
}

a, .btn-link {
    color: var(--entida-teal-dark);
}

.btn-primary {
    color: #fff;
    background-color: var(--entida-teal);
    border-color: var(--entida-teal-dark);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--entida-teal-dark);
    border-color: var(--entida-teal-dark);
}

/* Cantos levemente arredondados (modernidade) */
.btn, .card, .form-control, .form-select { border-radius: 8px; }

.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 var(--entida-teal);
}

.form-check-input:checked {
    background-color: var(--entida-teal);
    border-color: var(--entida-teal-dark);
}

/* ===== UI-1: densidade visual e tipografia Entida (somente CSS; sem mudar markup/funcionalidade) =====
   Telas herdadas usavam defaults apertados do Bootstrap. Aqui padronizamos legibilidade, hierarquia,
   espacamento e hitbox. Nenhuma fonte funcional fica abaixo de 12px. */

/* Hierarquia de titulos */
h1, .h1 { font-size: var(--font-size-xl); font-weight: var(--peso-semibold); line-height: var(--lh-apertado); }
h2, .h2 { font-size: var(--font-size-lg); font-weight: var(--peso-semibold); line-height: var(--lh-apertado); }
h3, .h3 { font-size: var(--font-size-base); font-weight: var(--peso-semibold); }
h4, h5, h6 { font-weight: var(--peso-semibold); }

/* Metadata/small no piso de 12px (xs) — nunca abaixo. Nao mexe em .text-muted (cor, nao tamanho). */
small, .small, .badge, .breadcrumb, .breadcrumb-item, figcaption { font-size: var(--font-size-xs); }

/* Botoes: padding minimo, fonte legivel, hierarquia clara */
.btn {
    font-size: var(--font-size-sm);
    font-weight: var(--peso-medio);
    padding: 10px 16px;
    line-height: 1.4;
    border-radius: var(--raio);
}
.btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); }
.btn-lg { padding: 12px 20px; font-size: var(--font-size-base); }
.btn-secondary { background-color: #fff; color: var(--entida-navy); border-color: var(--entida-borda); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--entida-slate); color: var(--entida-navy); border-color: var(--entida-borda); }
.btn-outline-primary { color: var(--entida-teal-dark); border-color: var(--entida-teal); }
.btn-outline-primary:hover { background-color: var(--entida-teal); border-color: var(--entida-teal-dark); color: #fff; }
.btn-danger { background-color: #dc2626; border-color: #b91c1c; }   /* acao perigosa diferenciada */

/* Inputs/selects: altura e padding confortaveis, fonte legivel */
.form-control, .form-select {
    font-size: var(--font-size-sm);
    padding: 8px 12px;
    min-height: 40px;
    line-height: 1.4;
}
.form-label { font-size: var(--font-size-sm); font-weight: var(--peso-medio); margin-bottom: 4px; }
.input-group-text { font-size: var(--font-size-sm); }

/* Cards: respiro nas telas principais + sombra leve */
.card { border: 1px solid var(--entida-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-leve); }
.card-body { padding: var(--esp-6); }
.card-header { padding: var(--esp-3) var(--esp-6); font-weight: var(--peso-semibold); font-size: var(--font-size-base); }

/* Blocos de filtro: respiro e organizacao */
fieldset { border: 1px solid var(--entida-borda); border-radius: var(--raio); padding: var(--esp-4); margin-bottom: var(--esp-4); }
fieldset > legend { font-size: var(--font-size-sm); font-weight: var(--peso-semibold); width: auto; padding: 0 var(--esp-2); margin-bottom: 0; }

/* Tabelas: legibilidade sem perder densidade operacional */
.table { font-size: var(--font-size-sm); }
.table > thead th, .table > thead > tr > th { font-weight: var(--peso-semibold); background-color: var(--entida-slate); color: var(--entida-navy); }
.table > :not(caption) > * > * { padding: 10px 12px; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: 6px 10px; }   /* densa, mas ainda 14px */

/* Foco acessivel (Tech Teal) em elementos interativos */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--entida-teal);
    outline-offset: 2px;
}

.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;
}
/* Dia 1 (UX) — tabelas responsivas: wrapper com rolagem horizontal em telas estreitas.
   CSP-safe, sem JS. Nao quebra desktop (overflow so atua quando a tabela excede a largura). */
.sindgo-tabela-rolavel {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dia 1 (UX) — badge global de ambiente (homologacao/staging). CSP-safe, sem JS. */
.sindgo-ambiente-badge {
    display: inline-block;
    font-weight: 600;
    font-size: var(--entida-fs-xs, 12px);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #e0b400;
}
.sindgo-ambiente-badge.sindgo-ambiente-producao {
    background: #fde2e1;
    color: #842029;
    border-color: #d88;
}

/* Dia 2 (UX) — utilitarios para reduzir estilo inline. CSP-safe, sem JS. */
.sindgo-btn-perigo {
    border-color: #d88;
    color: #842029;
}
.sindgo-btn-perigo:hover {
    background: #fde2e1;
}
.sindgo-form-inline {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: .5rem;
}
.sindgo-filtro {
    margin: .4rem 0;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
.sindgo-input-md { width: 200px; max-width: 100%; }
.sindgo-input-sm { width: 140px; max-width: 100%; }

/* UX-TOKENS-1 — classes reutilizaveis para reduzir style inline. CSP-safe, sem JS.
   Valores identicos aos inline originais (sem mudanca visual). */
.sindgo-nota {
    border: 1px solid #14b8a6;
    background: #f0fdfa;
    padding: .5rem;
    border-radius: 6px;
}
.sindgo-nota-atencao {
    border: 1px solid #a80;
    background: #fffbe6;
    padding: .4rem;
    border-radius: 6px;
}
.sindgo-acoes-linha {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* UX-TOKENS-2 — utilitarios de largura (valores identicos aos inline width:Npx) e form de edicao. CSP-safe, sem JS. */
.sindgo-w-60 { width: 60px; }
.sindgo-w-80 { width: 80px; }
.sindgo-w-90 { width: 90px; }
.sindgo-w-100 { width: 100px; }
.sindgo-w-110 { width: 110px; }
.sindgo-w-120 { width: 120px; }
.sindgo-w-140 { width: 140px; }
.sindgo-w-150 { width: 150px; }
.sindgo-w-160 { width: 160px; }
.sindgo-w-180 { width: 180px; }
.sindgo-w-200 { width: 200px; }
.sindgo-w-220 { width: 220px; }
.sindgo-w-240 { width: 240px; }
.sindgo-w-280 { width: 280px; }
.sindgo-w-300 { width: 300px; }
.sindgo-w-320 { width: 320px; }
.sindgo-form-edicao { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin-top: .4rem; }

/* UX-TOKENS-3 — classes reutilizaveis (valores identicos aos inline). CSP-safe, sem JS. */
.sindgo-linha-edicao { background: #f0fdfa; }
.sindgo-mb-1 { margin-bottom: 1rem; }
.sindgo-nota-homolog { border: 1px solid #b58900; background: #fff8e1; padding: .6rem; border-radius: 6px; }
.sindgo-card-editar { border: 1px solid #0d6efd; background: #f0f7ff; padding: .6rem; border-radius: 6px; margin-bottom: .5rem; }
.sindgo-mw-760 { max-width: 760px; }
.sindgo-mw-820 { max-width: 820px; }
.sindgo-mw-860 { max-width: 860px; }
.sindgo-mw-880 { max-width: 880px; }

/* UX-TOKENS-4 — utilitarios reutilizaveis (valores identicos aos inline). CSP-safe, sem JS. */
.sindgo-acoes-linha-lg { display: flex; gap: 1rem; flex-wrap: wrap; }
.sindgo-inline { display: inline; }
.sindgo-card { border: 1px solid #ccc; padding: .5rem; margin-bottom: .5rem; }
.sindgo-painel { border: 1px solid #e2e8f0; border-radius: 8px; padding: .8rem; }
.sindgo-my-xs { margin: .1rem 0; }
.sindgo-mb-6 { margin-bottom: .6rem; }
.sindgo-mt-4 { margin-top: .4rem; }
.sindgo-texto-secundario { color: #475569; font-size: .9rem; }
.sindgo-texto-perigo { color: #a00; }
.sindgo-text-right { text-align: right; }

/* UX-TOKENS-5 — utilitarios finais (valores identicos aos inline). CSP-safe, sem JS. */
.sindgo-inativo { opacity: .5; }
.sindgo-mono { font-family: monospace; }
.sindgo-w-full { width: 100%; }
.sindgo-w-rem-4 { width: 4rem; }
.sindgo-w-rem-5 { width: 5rem; }
.sindgo-w-rem-6 { width: 6rem; }
.sindgo-w-rem-7 { width: 7rem; }
.sindgo-w-rem-8 { width: 8rem; }
.sindgo-w-rem-20 { width: 20rem; }
.sindgo-w-rem-36 { width: 36rem; }

/* UX-TOKENS-6 — utilitarios finais (valores identicos aos inline). CSP-safe, sem JS. */
.sindgo-mw-280 { max-width: 280px; }
.sindgo-mw-420 { max-width: 420px; }
.sindgo-mw-440 { max-width: 440px; }
.sindgo-mw-480 { max-width: 480px; }
.sindgo-mw-560 { max-width: 560px; }
.sindgo-mw-620 { max-width: 620px; }
.sindgo-mw-640 { max-width: 640px; }
.sindgo-nota-erro { border: 1px solid #a00; background: #fff0f0; padding: .6rem; border-radius: 6px; }
.sindgo-nota-cinza { border: 1px solid #888; background: #f6f6f6; padding: .5rem; border-radius: 6px; }
.sindgo-num-grande { font-size: 1.4rem; font-weight: 600; }
.sindgo-mt-1 { margin-top: 1rem; }
.sindgo-mt-6 { margin-top: .6rem; }
.sindgo-acoes-linha-my { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }

/* UX-CRUD: largura minima do campo de busca das listagens (CSP-safe, sem inline style). */
.sindgo-busca { min-width: 240px; }