:root {
    /* LIGHT (bate com seu PaletteLight) */
    --dnd-primary: #0343bf;
    --dnd-bg: #eef2f6;
    --dnd-surface: #ffffff;
    --dnd-text: #1e293b;
    --dnd-text-muted: #475569;
    --dnd-divider: #e5e7eb;
}

    :root[data-theme="dark"] {
        /* DARK (bate com seu PaletteDark) */
        --dnd-primary: #4d7cff;
        --dnd-bg: #0f172a;
        --dnd-surface: #1e293b;
        --dnd-text: #e5e7eb;
        --dnd-text-muted: #94a3b8;
        --dnd-divider: #334155;
    }

/* Esconde por padrão (o Blazor mostra quando precisa) */
#blazor-error-ui {
    background: transparent;
    display: none;
}

    /* Container fixo tipo toast */
    #blazor-error-ui.dnd-blazor-error {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 9999;
        font-family: inherit;
    }

    /* Ações: força layout horizontal e sem quebra */
    #blazor-error-ui .dnd-blazor-error__actions {
        margin-left: auto;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* Garante que link/botão não virem block e não ocupem 100% */
    #blazor-error-ui .dnd-blazor-error__reload,
    #blazor-error-ui .dnd-blazor-error__dismiss {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
    }

    /* Remove possíveis estilos do bootstrap que forçam block/line-height estranho */
    #blazor-error-ui a.reload {
        float: none !important;
    }

/* Card */
.dnd-blazor-error__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--dnd-divider);
    background: var(--dnd-surface);
    color: var(--dnd-text);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* Ícone */
.dnd-blazor-error__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(220, 38, 38, 0.12); /* error suave */
    font-size: 18px;
}

/* Texto */
.dnd-blazor-error__title {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.1;
}

.dnd-blazor-error__desc {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--dnd-text-muted);
}

/* Ações */
.dnd-blazor-error__actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Botão recarregar */
.dnd-blazor-error__reload {
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--dnd-primary);
    color: #fff;
    font-weight: 700;
}

/* Botão fechar */
.dnd-blazor-error__dismiss {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--dnd-divider);
    background: transparent;
    color: var(--dnd-text);
    font-weight: 700;
    cursor: pointer;
}

    .dnd-blazor-error__dismiss:hover {
        background: rgba(0,0,0,0.05);
    }

/* Dark hover */
:root[data-theme="dark"] .dnd-blazor-error__dismiss:hover {
    background: rgba(255,255,255,0.06);
}

.mud-main-content {
    padding-top: 72px !important;
}

.mud-input-control {
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    /*    .main-content {
        padding-top: 80px;
    }*/
}

.perm-container {
    overflow-y: auto;
}

/* garante alinhamento vertical e tira padding extra do grid */
.role-perms-header {
    width: 100%;
    align-items: center;
}

/* remove margem/padding vertical que o MudInputControl costuma adicionar */
.perm-search,
.perm-search .mud-input-control,
.perm-search .mud-input-control-input-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

    /* remove qualquer margin do próprio input wrapper */
    .perm-search .mud-input {
        margin-bottom: 0 !important;
    }

    .perm-search .mud-input-control-input-container {
        align-items: flex-end !important;
    }

/* força o ícone do checkbox a aparecer quando estiver marcado */
.mud-checkbox.mud-checkbox-checked .mud-icon-root,
.mud-checkbox.mud-checkbox-checked svg {
    opacity: 1 !important;
    visibility: visible !important;
}

/* força uma cor visível no estado marcado */
.mud-checkbox.mud-checkbox-checked {
    color: var(--mud-palette-primary) !important;
}

/* Drawer - card de troca de empresa */
.drawer-company-switch {
    padding: 10px 12px;
    margin: 6px 0;
    border: 1px solid var(--zda-divider);
    border-radius: 12px;
}

    .drawer-company-switch:hover {
        background: var(--menu-hover-bg);
    }

.drawer-company-chip {
    max-width: 100%;
}

/* AppBar - botão do menu do usuário */
/*.user-menu-btn {
    text-transform: none;
    border-radius: 999px;
    padding: 6px 10px;
}

.user-menu-logout * {
    color: var(--mud-palette-error) !important;
}*/

/* AppBar sem padding à direita para o botão encostar no fim */
.dnd-appbar,
.dnd-appbar .mud-toolbar {
    padding-right: 0 !important;
}

.dnd-user-menu {
    height: 100%;
}

/* Botão do usuário ocupando a altura total do AppBar e com cara de retângulo */
.dnd-user-menu-btn {
    height: 100% !important;
    border-radius: 0 !important;
    padding: 0 18px !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
}

    /* Hover sutil */
    .dnd-user-menu-btn:hover {
        background: rgba(255, 255, 255, 0.12);
    }

/* Nome do usuário com limite (não estoura) */
.dnd-user-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem; /* um pouco maior que subtitle1 */
    font-weight: 600; /* destaque sem virar h6 */
    line-height: 1.2;
    margin-left: 2px;
    margin-top: 2px;
}

/* Popover do menu maior */
.dnd-user-menu-popover {
    min-width: 280px;
}

    /* Itens maiores (altura/padding/font) */
    .dnd-user-menu-popover .mud-list-item {
        padding: 12px 16px !important;
    }

.dnd-menu-item {
    border-radius: 8px;
}

.dnd-menu-item .mud-typography {
    font-size: 0.95rem;
}

/* Sair vermelho + ícone vermelho */
.dnd-menu-logout,
.dnd-menu-logout * {
    color: var(--mud-palette-error) !important;
}

.dnd-logout-icon {
    color: var(--mud-palette-error) !important;
}

.mud-menu-list {
    padding: 8px 12px;
}

.dnd-user-menu-header {
    padding: 8px 8px;
}

.dnd-user-menu-name {
    font-weight: 700;
}

.dnd-user-menu-email {
    opacity: .75;
}

/* remove gap do MudStack mesmo que ele gere gap-3 */
.dnd-user-menu-header {
    gap: 0 !important;
}

/* define um espaçamento único e pequeno entre avatar e texto */
.dnd-user-menu-text {
    margin-left: 14px; /* ajuste: 6px, 8px, 10px... */
}

/* Centraliza verticalmente ícone + texto dentro do item do menu */
.dnd-user-menu-popover .mud-menu-item-text,
.dnd-appbar .mud-menu-item-text {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

    /* garante que o ícone não fique “caído” */
    .dnd-appbar .mud-menu-item-text .mud-icon-root,
    .dnd-user-menu-popover .mud-menu-item-text .mud-icon-root {
        display: inline-flex;
        align-items: center;
        margin-right: 14px !important;
    }

/* Deixa "Sair" em negrito */
.dnd-menu-logout .mud-menu-item-text {
    font-weight: 700 !important;
}

.dnd-menu-item-label {
    margin-top: 2px; /* leve */
    display: inline-block; /* necessário pro margin-top funcionar */
}

.workday-toggle .mud-toggle-group {
    min-width: 72px;
}

.workday-toggle .mud-toggle-item {
    padding: 2px 6px;
}