.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;
}

.dialog-background-custom {
    backdrop-filter: blur(10px);
}

#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;
    }
/* Seletor de unidade no cabecalho: nome da unidade seguido do botao que abre o modal de troca. */
.company-selector .company-selector-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    max-width: 22rem;
}

/* O token do template acompanha data-header-styles (light/dark/color/gradient), entao o nome permanece
   legivel em qualquer estilo de cabecalho — diferente de --mud-palette-text-primary, que e sempre escuro. */
.company-selector .company-selector-name {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--header-prime-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 15rem;
}

/* Derivar o fundo do proprio texto mantem o contraste sem uma regra por estilo de cabecalho, e evita que
   o botao desapareca quando o header passar a ser pintado com a cor primaria do cliente. */
.company-selector .company-selector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--header-prime-color);
    background-color: color-mix(in srgb, currentColor 14%, transparent);
    transition: background-color 0.15s ease-in-out;
}

.company-selector .company-selector-icon .mud-icon-root {
    font-size: 1.125rem;
}

.company-selector .company-selector-link:hover .company-selector-icon {
    background-color: color-mix(in srgb, currentColor 24%, transparent);
}

.company-selector .company-selector-link-disabled {
    cursor: default;
    opacity: 0.5;
}

    .company-selector .company-selector-link-disabled:hover .company-selector-icon {
        background-color: color-mix(in srgb, currentColor 14%, transparent);
    }

/* ==========================================================================
   Texto sobre a cor primaria do cliente

   O tema base fixa `color: #fff !important` em tudo que usa --primary-rgb como
   fundo, o que torna ilegivel a marca de qualquer cliente com cor clara. O
   LayoutService publica --primary-text-rgb calculado por contraste (WCAG) a
   partir da cor cadastrada; as regras abaixo passam a usar esse par.
   O fallback branco preserva o comportamento anterior antes do primeiro apply.
   ========================================================================== */
:root {
    --primary-text-rgb: 255, 255, 255;
}

body {
    --mud-palette-primary-text: rgb(var(--primary-text-rgb));
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    color: rgb(var(--primary-text-rgb)) !important;
}

.bg-primary,
.badge.bg-primary {
    color: rgb(var(--primary-text-rgb)) !important;
}

.mud-button-filled.mud-button-filled-primary {
    color: rgb(var(--primary-text-rgb));
}

/* ==========================================================================
   Gemeos -rgb da paleta MudBlazor

   O tema base liga --mud-palette-* aos seus proprios tokens, mas nao liga os
   gemeos --mud-palette-*-rgb, que o MudBlazor usa em tudo que precisa de alfa:
   bordas de botao outlined, ripple, hover e anel de foco. Sem este mapeamento
   esses detalhes permanecem na paleta padrao do MudBlazor (roxo) enquanto as
   cores solidas seguem a marca do cliente.

   Declarado em `body`, e nao em `:root`, porque e ali que o tema base declara
   os pares solidos — o MudThemeProvider escreve os seus em `:root`, e a
   proximidade do ancestral decide qual valor vale para o conteudo da pagina.
   ========================================================================== */
body {
    --mud-palette-primary-rgb: var(--primary-rgb);
    --mud-palette-secondary-rgb: var(--secondary-rgb);
    --mud-palette-success-rgb: var(--success-rgb);
    --mud-palette-error-rgb: var(--danger-rgb);
    --mud-palette-warning-rgb: var(--warning-rgb);
    --mud-palette-info-rgb: var(--info-rgb);
    --mud-palette-dark-rgb: var(--dark-rgb);
    --mud-palette-text-primary-rgb: 33, 37, 41;
    --mud-palette-divider-rgb: 243, 243, 243;
}

/* ==========================================================================
   Legibilidade do header e do menu pintados com a cor da marca

   Nos estilos `color` e `gradient` o tema base fixa texto branco a 60% sobre a
   cor primaria. Isso fica lavado mesmo em marcas escuras e ilegivel em marcas
   claras. Passamos a usar o par de contraste calculado pelo LayoutService.
   ========================================================================== */
[data-header-styles=color],
[data-header-styles=gradient] {
    --header-prime-color: rgb(var(--primary-text-rgb));
    --header-border-color: color-mix(in srgb, rgb(var(--primary-text-rgb)) 14%, transparent);
}

[data-menu-styles=color],
[data-menu-styles=gradient] {
    --menu-prime-color: rgb(var(--primary-text-rgb));
    --menu-border-color: color-mix(in srgb, rgb(var(--primary-text-rgb)) 14%, transparent);
}

/* ==========================================================================
   Amostras de aparencia (Preferencias > Tema e Cores)

   Substituem os `MudRadio` com as classes `color-input`/`color-white` do tema
   base: aquelas regras exigem um ancestral `.switch-select` e um `<input>` com
   `:checked`, condicoes que a marcacao do MudRadio nao satisfaz — por isso as
   amostras apareciam como circulos vazios.
   ========================================================================== */
.jota-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 1rem 0.75rem;
}

.jota-swatch {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--mud-palette-divider, #e3e3e3);
    border-radius: 50%;
    cursor: pointer;
    background-clip: padding-box;
    transition: transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.jota-swatch:hover {
    transform: scale(1.08);
}

.jota-swatch:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb));
    outline-offset: 2px;
}

/* O anel usa a cor primaria e fica fora da amostra, para que a selecao continue
   visivel mesmo quando a propria amostra e da cor primaria. */
.jota-swatch-selected {
    box-shadow: 0 0 0 2px var(--default-body-bg-color, #fff), 0 0 0 4px rgb(var(--primary-rgb));
}

.jota-swatch-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(var(--primary-text-rgb));
    mix-blend-mode: difference;
}

/* Rotulo acessivel: descreve a opcao para leitores de tela sem ocupar espaco. */
.jota-swatch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.jota-swatch-wide {
    width: 3.5rem;
    border-radius: 0.5rem;
}

/* Pre-visualizacao da identidade em Configuracoes gerais. */
.settings-preview-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
}

.settings-preview-logo {
    max-height: 3.5rem;
    max-width: 100%;
    object-fit: contain;
}

/* As artes de identidade precisam ser avaliadas em tamanho util e sem recorte. */
.tenant-brand-upload img {
    width: 11rem !important;
    height: 8rem !important;
    padding: 0.5rem;
    object-fit: contain !important;
    border-radius: 0.5rem;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(-45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f3f5 75%),
        linear-gradient(-45deg, transparent 75%, #f1f3f5 75%);
    background-size: 1rem 1rem;
    background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0;
}

.tenant-icon-upload img {
    width: 8rem !important;
    height: 8rem !important;
}

.tenant-current-image {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--default-border, #e5e7eb);
    border-radius: 0.75rem;
    background: var(--custom-white);
}

.tenant-current-image img {
    flex: 0 0 auto;
}

.tenant-current-image > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.tenant-current-image span {
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

.tenant-current-image button {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger-color, #dc3545);
    font-size: 0.75rem;
    font-weight: 600;
}

/* O CSS do template alterna variantes diferentes conforme o estilo do menu e possui regras tardias
   que ocultam toggle-logo/toggle-white. A classe propria garante o icone do tenant em todo estado compacto. */
@media (min-width: 992px) {
    [data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .main-sidebar-header .tenant-toggle-icon,
    [data-toggled="icon-click-closed"] .main-sidebar-header .tenant-toggle-icon,
    [data-toggled="icon-hover-closed"] .main-sidebar-header .tenant-toggle-icon,
    [data-toggled="icon-text-close"]:not([data-icon-text="open"]) .main-sidebar-header .tenant-toggle-icon,
    [data-toggled="detached-close"]:not([data-icon-overlay="open"]) .main-sidebar-header .tenant-toggle-icon {
        display: block !important;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto;
        object-fit: contain;
    }
}

.settings-preview-name {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

.settings-preview-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}