/* ==============================================
   THEME-AWARE CSS VARIABLES
   Usam color-mix() sobre as variáveis do MudBlazor
   que já mudam automaticamente entre light/dark.
   Não dependem de nenhuma classe CSS de tema.
============================================== */
:root {
    /* Input: mix entre background e surface → fica entre os dois em ambos os modos
       Light: mix(#ededed, #fff) ≈ #f6f6f6  |  Dark: mix(#0f172a, #1e293b) ≈ #172032  */
    --cfg-input-bg:       color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface) 45%);
    --cfg-input-focus-bg: var(--mud-palette-surface);
    --cfg-input-border:   color-mix(in srgb, var(--mud-palette-divider) 100%, transparent 0%);
    /* Footer / upload / tabela: fundo ligeiramente diferente do card */
    --cfg-footer-bg:      color-mix(in srgb, var(--mud-palette-background) 30%, var(--mud-palette-surface) 70%);
    --cfg-table-head-bg:  color-mix(in srgb, var(--mud-palette-background) 40%, var(--mud-palette-surface) 60%);
    --cfg-filter-bg:      color-mix(in srgb, var(--mud-palette-background) 40%, var(--mud-palette-surface) 60%);
    --cfg-filter-border:  var(--mud-palette-divider);
    --cfg-upload-bg:      color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface) 45%);
}

/* ==============================================
   SCROLLBAR — removido o estilo "thin" customizado: o ZIP (referência
   visual 1:1) usa a barra de rolagem padrão do navegador, e a barra fina
   alterava a largura útil do conteúdo (≈9px) em todas as telas.
============================================== */

h1:focus {
    outline: none;
}

/* ==============================================
   BOTÕES — sem texto em caixa alta
============================================== */
.mud-button-root,
.mud-button-root span.mud-button-label,
.btn {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Dashboard color tokens ─────────────── */
:root {
    --db-pink:        #2563eb;
    --db-pink-soft:   rgba(37, 99, 235, 0.09);
    --db-pink-border: rgba(37, 99, 235, 0.22);
    --db-radius:      14px;
    --db-shadow:      none;
    --db-shadow-hover:none;
}

/* ==============================================
   MUD-SWITCH — TOGGLE GORDINHO GLOBAL
============================================== */

/* Wrapper */
span.mud-switch {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    cursor: pointer !important;
}

/* TRACK — trilha oval — desligado */
span.mud-switch .mud-switch-track {
    width: 52px !important;
    height: 30px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
    background-color: var(--mud-palette-action-disabled-background, var(--mud-palette-divider)) !important;
    transition: background-color 0.25s ease !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* TRACK — ligado */
span.mud-switch .mud-switch-base.mud-checked + .mud-switch-track,
span.mud-switch .mud-checked + .mud-switch-track {
    background-color: var(--mud-palette-primary) !important;
}

/* BOTÃO-BASE (área de clique) */
span.mud-switch .mud-switch-base {
    width: 30px !important;
    height: 30px !important;
    padding: 3px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.25s ease !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* THUMB — círculo */
span.mud-switch .mud-switch-base .mud-switch-thumb {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* Esconde SVG interno do thumb */
span.mud-switch .mud-switch-thumb svg,
span.mud-switch .mud-switch-thumb path {
    display: none !important;
}

/* THUMB LIGADO — desloca para a direita */
span.mud-switch .mud-switch-base.mud-checked {
    transform: translateX(22px) !important;
}

/* Remove ripple */
span.mud-switch .mud-ripple,
span.mud-switch .mud-ripple-switch {
    display: none !important;
}

/* Sem outline de foco */
span.mud-switch .mud-switch-base:focus-visible,
span.mud-switch .mud-switch-base:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Hover — evita escurecer o track via opacity */
span.mud-switch .mud-switch-base:hover ~ .mud-switch-track,
span.mud-switch:hover .mud-switch-track {
    opacity: 1 !important;
}

/* Label */
span.mud-switch .mud-input-label,
span.mud-switch .mud-switch-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-primary) !important;
    margin-left: 6px !important;
    padding-left: 0 !important;
    cursor: pointer !important;
}

/* ==============================================
   VALIDAÇÃO DE FORMULÁRIOS
============================================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

/* ==============================================
   BLAZOR ERROR BOUNDARY
============================================== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--mud-palette-error, #b32121);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--mud-palette-surface, white);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ==============================================
   CHECKBOX
============================================== */
.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-text-disabled);
}

/* ============================================================
   BADGE DE PERFIL — menu do usuário
   ============================================================ */
.user-profile-badge-row {
    padding: 4px 12px 8px;
    display: flex;
}

.user-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
}

.user-profile-badge-icon {
    font-size: 14px !important;
}

.user-profile-badge.empresa {
    background-color: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.user-profile-badge.usuario {
    background-color: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.25);
}

/* ============================================================
   BOTÃO DE TROCA DE PERFIL — topbar
   ============================================================ */
.profile-switch-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
}

/* Indicador de status (bolinha) */
.profile-switch-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-switch-icon {
    font-size: 16px !important;
}

.profile-switch-label {
    letter-spacing: 0.2px;
}

.profile-switch-swap {
    font-size: 16px !important;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.2s;
}

.profile-switch-btn:hover .profile-switch-swap {
    opacity: 1;
    transform: rotate(180deg);
}

/* Variante Empresa */
.profile-switch-btn.empresa {
    color: #2563eb;
    background-color: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.profile-switch-btn.empresa .profile-switch-indicator {
    background-color: #22c55e;
}

.profile-switch-btn.empresa:hover {
    background-color: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.35);
}

/* Variante Usuário */
.profile-switch-btn.usuario {
    color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
}

.profile-switch-btn.usuario .profile-switch-indicator {
    background-color: #a78bfa;
}

.profile-switch-btn.usuario:hover {
    background-color: rgba(124, 58, 237, 0.14);
    border-color: rgba(124, 58, 237, 0.35);
}

/* Dark mode */
.mud-theme-dark .profile-switch-btn.empresa {
    background-color: rgba(37, 99, 235, 0.13);
}

.mud-theme-dark .profile-switch-btn.usuario {
    background-color: rgba(124, 58, 237, 0.13);
}

/* Responsivo — esconde o label em telas pequenas */
@media (max-width: 600px) {
    .profile-switch-label {
        display: none;
    }
    .profile-switch-btn {
        padding: 0 9px;
    }
}

/* =========================
   RESPONSIVIDADE GLOBAL BASE
========================= */

/* Imagens nunca estouram o container */
img { max-width: 100%; height: auto; }

/* Evita overflow horizontal na página inteira */
body { overflow-x: hidden; }

/* Inputs e selects com tamanho mínimo confortável para touch */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px !important; /* previne zoom automático no iOS */
    }

    /* MudBlazor inputs — mantém tamanho legível */
    .mud-input-slot,
    .mud-input-root input,
    .mud-select-input {
        font-size: 15px !important;
    }

    /* Popovers e dropdowns não estouram a tela */
    .mud-popover {
        max-width: calc(100vw - 16px) !important;
    }

    /* Dialogs centralizados e com margem no mobile */
    .mud-dialog-paper {
        margin: 12px !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 480px) {
    /* Snackbar full-width no mobile */
    .mud-snackbar {
        min-width: 0 !important;
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}

/* ── ContratosNovo: remove sombra da tabela de revisão ─────────────── */
.mud-simple-table {
    box-shadow: none !important;
}

/* ── ContratosNovoMock: dark mode overrides ────────────────────────── */
body.mud-theme-dark .var-chip-source:hover {
    background: rgba(37,99,235,0.20) !important;
}
body.mud-theme-dark .doc-preview-wrapper {
    background: #1a1a1f !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKBOX GLOBAL — dark/light mode aware
   Aplica a todos os input[type="checkbox"] exceto switches, .form-check-input (estilo Bootstrap do ZIP) e .pj-native-check (checkbox nativo com accent-color, como no ZIP).
   Especificidade (0,2,1) supera scoped CSS (0,2,0).
══════════════════════════════════════════════════════════ */
input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check) {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--mud-palette-text-disabled);
    background: var(--mud-palette-surface);
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    vertical-align: middle;
    flex-shrink: 0;
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-color: var(--mud-palette-primary);
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):checked {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):indeterminate {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background: #fff;
    border: none;
}

input[type="checkbox"]:not([role="switch"]):not(.form-check-input):not(.pj-native-check):disabled {
    opacity: 0.4;
    cursor: not-allowed;
}