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

/* ==========================================================================
   Rodape do menu lateral: atalho de Configuracoes

   O grupo de Configuracoes sai da lista principal e passa a ser acessado pelo
   rodape fixo. O botao reaproveita side-menu__item/label/angle para herdar do
   tema as cores de cada estilo de menu e o comportamento dos modos recolhidos
   (que ocultam rotulo e seta e deixam so o icone).
   ========================================================================== */
.app-sidebar.has-settings-footer .main-sidebar {
    padding-block-end: 9rem;
}

.app-sidebar .sidebar-settings-footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    padding: 0.5rem 0.75rem;
    background: var(--menu-bg);
    border-block-start: 1px solid var(--menu-border-color);
}

/* Modulos e itens que so expandem sao <a> sem href, que o navegador exibe com o cursor padrao. */
.app-sidebar .side-menu__item {
    cursor: pointer;
}

.app-sidebar .sidebar-settings-footer .side-menu__item .bx-cog {
    transition: transform 0.3s ease-in-out;
}

.app-sidebar .sidebar-settings-footer .side-menu__item:hover .bx-cog,
.app-sidebar .sidebar-settings-footer .side-menu__item.active .bx-cog {
    transform: rotate(60deg);
}

/* Aberto, a seta aponta para cima: o conteudo de Configuracoes esta "acima" do botao. */
.app-sidebar .sidebar-settings-footer .side-menu__item.active .side-menu__angle {
    transform: rotate(-90deg);
}

/* O tema (styles.css) zera o foco com "a, button { outline: 0 !important }" e "* :focus-visible { outline: none !important }":
   sem estas regras (com !important) o item do menu e os links focados pelo teclado não tinham indicação. */
.app-sidebar .side-menu__item:focus-visible,
.app-sidebar .sidebar-settings-footer .side-menu__item:focus-visible,
.app-sidebar .settings-menu-back:focus-visible {
    outline: 2px solid var(--menu-prime-color) !important;
    outline-offset: -2px !important;
}

/* Voltar ao menu principal: discreto, para nao competir com os modulos. */
.app-sidebar .settings-menu .settings-menu-back {
    opacity: 0.75;
}

.app-sidebar .settings-menu .settings-menu-back:hover {
    opacity: 1;
}

.app-sidebar .settings-menu .settings-menu-back .side-menu__label {
    font-size: 0.78rem;
}

/* Mesmo gesto da engrenagem nos modulos do menu, com o mesmo tempo e curva. O angulo e menor que os
   60deg da engrenagem: ela e simetrica, mas icones como carrinho ou recibo pareceriam tortos. */
.app-sidebar .main-menu > .slide > .side-menu__item:not(.settings-menu-back) .side-menu__icon {
    transition: transform 0.3s ease-in-out;
}

.app-sidebar .main-menu > .slide > .side-menu__item:not(.settings-menu-back):hover .side-menu__icon {
    transform: rotate(20deg);
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar .sidebar-settings-footer .side-menu__item .bx-cog,
    .app-sidebar .main-menu > .slide > .side-menu__item .side-menu__icon {
        transition: none;
    }
}

/* Contornado neutro (Voltar, atalhos de período): a borda do tema (--default-border) some sobre o cartão branco.
   Derivada da cor do texto, vale no tema claro e no escuro. */
.mud-button-outlined.mud-button-outlined-default:not(.mud-icon-button) {
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Links do conteúdo (breadcrumb, "Entrar sem senha", células clicáveis) também perdiam o foco visível. */
.main-content a:not(.mud-button-root):focus-visible,
.authentication a:not(.mud-button-root):focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Botões (MudBlazor e nativos, inclusive em diálogos e popovers fora do conteúdo) também perdiam o foco pelo tema.
   Só :focus-visible: o contorno aparece na navegação por teclado, não no clique do mouse. */
button:focus-visible,
[role="button"]:focus-visible,
.mud-button-root:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px !important;
}

/* O tema força o preenchimento dos ícones do paginador, inclusive nos botões desabilitados. */
.mud-table-pagination-actions .mud-icon-button:disabled .mud-icon-root.mud-svg-icon {
    fill: var(--mud-palette-action-disabled);
}