/* ==========================================================================
   Web Central Setrans — App Layout (SaaS claro/clean) sobre Bootstrap 5
   Estrutura: #kt_body > [_Header mobile] + .page > [.aside + .wrapper]
   IDs preservados: kt_body, kt_aside, kt_wrapper, kt_header, kt_scrolltop...
   ========================================================================== */

html,
body {
    height: 100%;
}

body#kt_body {
    margin: 0;
    background: var(--app-bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
}

/* ---- Splash de carregamento ---- */
body.page-loading::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--app-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg fill='none' stroke='%232f6fed' stroke-width='4'%3E%3Ccircle cx='21' cy='21' r='17' opacity='.2'/%3E%3Cpath d='M21 4a17 17 0 0 1 17 17'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 21 21' to='360 21 21' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center center no-repeat;
}

/* ---- Skip link (acessibilidade) ---- */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 2100;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: #fff;
    transition: top var(--t-fast);
}
.skip-link:focus {
    top: 12px;
    color: #fff;
}

/* ==========================================================================
   Estrutura raiz
   ========================================================================== */
.d-flex.flex-column.flex-root {
    min-height: 100vh;
}

.page {
    width: 100%;
}

/* ==========================================================================
   Sidebar (aside)
   ========================================================================== */
.aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width var(--t), transform var(--t);
}

/* Marca / logo */
.aside .brand {
    height: var(--topbar-height);
    flex: 0 0 var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--border);
}
.aside .brand-logo img {
    max-height: 34px;
    width: auto;
    transition: var(--t);
}
.aside .brand-toggle {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--t-fast);
}
.aside .brand-toggle:hover {
    background: var(--surface-muted);
    color: var(--accent);
}
.aside .brand-toggle svg {
    width: 20px;
    height: 20px;
}

/* Seletor de empresa da Empresa master (topo da sidebar) */
.aside-company {
    flex: 0 0 auto;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
}
.aside-company-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.3rem;
}
.aside-company form { margin: 0; }
body.aside-minimize .aside-company-label { display: none; }
body.aside-minimize .aside-company { padding: 0.5rem 0.4rem; }

/* Wrapper do menu (scrollável) */
.aside-menu-wrapper {
    flex: 1 1 auto;
    /* min-height:0 é obrigatório no flexbox pra área rolar internamente em vez de
       empurrar o rodapé (usuário) pra fora. Assim o menu rola e o usuário fica fixo no fim. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
}
/* CRÍTICO: a classe .flex-column-fluid (compat, carregada depois) força flex-shrink:0 e impede
   o scroll interno, empurrando o rodapé do usuário pra fora. O seletor por ID vence essa classe. */
#kt_aside_menu_wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.aside-menu-wrapper::-webkit-scrollbar {
    width: 6px;
}
.aside-menu-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
}

/* Nav */
.menu-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-nav .menu-section {
    padding: 1rem 1.5rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    white-space: nowrap;
}
.menu-nav .menu-item {
    margin: 0.1rem 0.75rem;
}
.menu-nav .menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: var(--t-fast);
}
.menu-nav .menu-link .menu-icon {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--text-soft);
    transition: var(--t-fast);
}
.menu-nav .menu-link .menu-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-nav .menu-link:hover {
    background: var(--surface-muted);
    color: var(--text);
}
.menu-nav .menu-link:hover .menu-icon {
    color: var(--accent);
}
/* Estado ativo — cobre .active (Razor) e .menu-item-active (util.js) */
.menu-nav .menu-link.active,
.menu-nav .menu-item-active > .menu-link {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.menu-nav .menu-link.active .menu-icon,
.menu-nav .menu-item-active > .menu-link .menu-icon {
    color: var(--accent);
}

/* ==========================================================================
   Wrapper (área de conteúdo à direita da sidebar)
   ========================================================================== */
.wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* min-width:0 impede que tabelas largas estiquem/estourem o layout flex */
    min-width: 0;
    transition: margin-left var(--t);
}

/* ==========================================================================
   Topbar (header dentro do wrapper)
   ========================================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
}
.header > .container-fluid {
    height: 100%;
}
.topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.topbar-item {
    display: flex;
    align-items: center;
}

/* Sino de notificação */
.topbar .notif-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--t-fast);
}
.topbar .notif-btn:hover {
    background: var(--surface-muted);
    color: var(--accent);
}
.topbar .notif-btn svg {
    width: 22px;
    height: 22px;
}
.topbar .notif-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--topbar-bg);
}

/* Chip do usuário */
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    transition: var(--t-fast);
}
.user-chip:hover {
    background: var(--surface-muted);
}
.user-chip .user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: right;
}
.user-chip .user-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
}
.user-chip .user-company {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
}

/* ==========================================================================
   Subheader (título da página)
   ========================================================================== */
.subheader {
    background: transparent;
    padding: 1.5rem 0 0.25rem;
}
.subheader .page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

/* ==========================================================================
   Conteúdo
   ========================================================================== */
.content {
    flex: 1 1 auto;
    min-width: 0;
}
.container,
.container-xxl,
.container-fluid {
    --bs-gutter-x: 1.75rem;
}
.layout-page-container {
    max-width: var(--content-max);
    min-width: 0;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}
.layout-page-shell {
    /* Sem "moldura" fixa: o conteúdo respira; cards é que dão a superfície. */
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background: transparent;
    border-top: 1px solid var(--border);
    padding: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   Componentes — Cards
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 1.4rem;
    min-height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card .card-title {
    font-weight: 700;
    color: var(--text);
    margin: 0;
    font-size: 1.05rem;
}
.card .card-body {
    padding: 1.4rem;
}
.card .card-footer {
    background: transparent;
    border-top: 1px solid var(--border);
    padding: 1.1rem 1.4rem;
}

/* ==========================================================================
   Botões (refinamento sobre BS5)
   ========================================================================== */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--t-fast);
}
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent-active);
}

/* ==========================================================================
   Formulários
   ========================================================================== */
/* Campos ativos = BRANCO e tamanho "sm". O !important vence MDB/Bootstrap, que deixavam
   os selects cinza (cara de desabilitado). Só :disabled/[readonly] ficam cinza. */
.form-control,
.form-select,
.custom-select,
select.form-control,
input.form-control,
textarea.form-control {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    background-color: var(--surface) !important;
    color: var(--text);
    padding: 0.35rem 0.65rem;   /* sm */
    font-size: 0.8125rem;       /* sm */
    line-height: 1.5;
    transition: var(--t-fast);
}
textarea.form-control { padding: 0.45rem 0.65rem; }
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--accent);
    background-color: var(--surface) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
/* Só campos realmente inativos ficam cinza (distingue de campo ativo) */
.form-control:disabled,
.form-select:disabled,
.custom-select:disabled,
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--surface-muted) !important;
    color: var(--text-muted);
    opacity: 1;
}
.form-label,
label.col-form-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

/* Select2 alinhado ao tema (branco + tamanho sm) */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-strong) !important;
    background-color: var(--surface) !important;
    min-height: 34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    line-height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.select2-dropdown { background-color: var(--surface); border-color: var(--border-strong); }

/* ==========================================================================
   Tabelas / DataTables
   ========================================================================== */
.table {
    --bs-table-color: var(--text);
    color: var(--text);
    margin-bottom: 0;
}
.table thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:hover {
    background: var(--surface-2);
}

/* Tabelas de relatório com cabeçalho escuro (mantém legado) */
.table.table-report thead th,
table.table-report.dataTable thead > tr > th {
    background: #1f2d3d !important;
    color: #fff !important;
    border-bottom-color: #15202b !important;
}

/* DataTables: paginação, busca, info */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    padding: 0.4rem 0.7rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dt-container .dt-paging .dt-paging-button {
    border-radius: var(--radius-sm) !important;
}
div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   Dropdowns (menus) — usados nas ações das tabelas e em geral
   ========================================================================== */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    font-size: 0.875rem;
    min-width: 12rem;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--text);
}
.dropdown-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--text-soft);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--accent-soft);
    color: var(--accent);
}
.dropdown-item:hover i,
.dropdown-item:focus i {
    color: var(--accent);
}
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background: var(--danger-soft);
    color: var(--danger);
}
.dropdown-item.text-danger:hover i,
.dropdown-item.text-danger:focus i {
    color: var(--danger);
}
.dropdown-divider {
    border-color: var(--border);
    margin: 0.35rem 0.25rem;
}

/* Ações de tabela: botão compacto e menu nunca recortado */
.table-actions {
    display: inline-block;
    text-align: left;
}
.table-actions .dropdown-toggle {
    white-space: nowrap;
}

/* ==========================================================================
   Scroll-to-top
   ========================================================================== */
.scrolltop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--t-fast);
}
.scrolltop:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}
.scrolltop.scrolltop-on {
    display: inline-flex;
}
.scrolltop svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* ==========================================================================
   Auth (login / reset / esqueci a senha) — estilo Predyra (fundo vívido + card)
   ========================================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* Gradiente vívido sobre base escura (cores do Setrans) */
    background:
        radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.55), transparent 42%),
        radial-gradient(circle at bottom center, rgba(var(--accent-rgb), 0.42), transparent 38%),
        radial-gradient(circle at top right, rgba(124, 92, 252, 0.35), transparent 26%),
        #0b1020;
}
.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.25rem;
}
.auth-card h3 {
    font-weight: 700;
    color: var(--text);
}

/* Cabeçalho do card (logo + títulos) */
.auth-brand {
    margin-bottom: 1.75rem;
}
.auth-logo {
    max-height: 60px;
    width: auto;
    margin-bottom: 1.25rem;
}
.auth-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem;
}
.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}
.auth-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}
.auth-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Campo de senha com botão mostrar/ocultar */
.auth-password {
    position: relative;
}
.auth-password .form-control {
    padding-right: 2.75rem;
}
.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--t-fast);
}
.auth-password-toggle:hover {
    color: var(--accent);
    background: var(--surface-muted);
}

/* Divisor "ou" */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.25rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

/* ==========================================================================
   Header mobile + off-canvas da sidebar
   ========================================================================== */
.header-mobile {
    display: none;
    height: 56px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1035;
}
.header-mobile .burger-icon {
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
}
.header-mobile .burger-icon:hover {
    background: var(--surface-muted);
}

.aside-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t);
}
body.aside-mobile-on .aside-backdrop {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Sidebar minimizada (desktop)
   ========================================================================== */
@media (min-width: 992px) {
    body.aside-minimize .aside {
        width: var(--sidebar-width-minimized);
    }
    body.aside-minimize .wrapper {
        margin-left: var(--sidebar-width-minimized);
    }
    body.aside-minimize .aside .menu-text,
    body.aside-minimize .aside .brand-logo {
        opacity: 0;
        pointer-events: none;
        width: 0;
    }
    /* seções (headers) somem por completo no modo minimizado */
    body.aside-minimize .aside .menu-section {
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        opacity: 0;
    }
    body.aside-minimize .aside .menu-link {
        justify-content: center;
    }
    body.aside-minimize .aside .brand {
        justify-content: center;
    }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 991.98px) {
    .header-mobile {
        display: flex;
    }
    .aside {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    body.aside-mobile-on .aside {
        transform: translateX(0);
    }
    .wrapper {
        margin-left: 0;
    }
    .header {
        top: 0;
    }
    .layout-page-container {
        padding-top: 0.25rem;
    }
    /* botão de minimizar é só desktop */
    .aside .brand-toggle {
        display: none;
    }
}

/* ==========================================================================
   Rodapé da sidebar — usuário fixo no fundo (disposição estilo Predyra)
   ========================================================================== */
.aside-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid var(--border);
    background: var(--sidebar-bg);
}
/* ==========================================================================
   Seletor de perfil (role) em cards clicáveis — formulário de usuário
   ========================================================================== */
.role-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}
.role-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: var(--t-fast);
}
.role-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.role-card-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.role-card.is-active,
.role-card:has(.role-card-input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}
.role-card-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.6rem;
    transition: var(--t-fast);
}
.role-card.is-active .role-card-check,
.role-card:has(.role-card-input:checked) .role-card-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.role-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.role-card-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
}
.role-card.is-active .role-card-name,
.role-card:has(.role-card-input:checked) .role-card-name {
    color: var(--accent);
}
.role-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 0.15rem;
}
.role-card-input:focus-visible + .role-card-check {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

.aside-user-dd {
    min-width: 0;
}
.aside-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius);
    background: var(--surface-muted);
    transition: var(--t-fast);
}
.aside-user:hover,
.aside-user[aria-expanded="true"] {
    background: var(--surface-muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.aside-user-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.aside-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}
.aside-user-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aside-user-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aside-user-chevron {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 0.85rem;
    align-self: center;
}
.aside-user-dd .dropdown-menu {
    min-width: calc(var(--sidebar-width) - 1.4rem);
}
/* Pílula da role dentro do card compacto */
.aside-user-role {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Menu detalhado do usuário (dropdown) ---- */
.aside-user-menu {
    padding: 0.5rem;
}
.aside-user-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 0.6rem;
}
.aside-user-card-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
}
.aside-user-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.aside-user-card-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aside-user-card-email {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aside-user-detail {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
    color: var(--text);
}
.aside-user-detail i {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    color: var(--text-soft);
}
.aside-user-detail span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar minimizada: rodapé vira só o avatar centralizado */
@media (min-width: 992px) {
    body.aside-minimize .aside-footer {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem 0.4rem;
    }
    body.aside-minimize .aside-user {
        justify-content: center;
        padding: 0.35rem;
    }
    body.aside-minimize .aside-user-meta,
    body.aside-minimize .aside-user-chevron {
        display: none;
    }
}

/* ==========================================================================
   Disposição dos elementos da tabela (DataTables) — estilo Predyra
   Busca no topo à direita; "por página" + info + paginação embaixo.
   ========================================================================== */
div.dt-container {
    max-width: 100%;
}
div.dt-container .dt-layout-row {
    align-items: center;
    margin: 0;
    row-gap: 0.6rem;
}
div.dt-container .dt-layout-row.dt-layout-table {
    margin-block: 0.85rem;
    /* a faixa da tabela rola na horizontal quando não cabe — em qualquer tela.
       Assim uma tabela larga (ex.: /system-errors) nunca estoura o layout. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
div.dt-container .dt-length,
div.dt-container .dt-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
div.dt-container .dt-search {
    justify-content: flex-end;
}
div.dt-container label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}
div.dt-container .dt-search input {
    min-width: 220px;
    max-width: 100%;
}
div.dt-container .dt-info {
    color: var(--text-muted);
    font-size: 0.82rem;
    padding-top: 0.25rem;
}
/* Paginação em "pílulas" alinhada à direita */
div.dt-container .dt-paging {
    display: flex;
    justify-content: flex-end;
    gap: 0.2rem;
}
div.dt-container .dt-paging .dt-paging-button {
    min-width: 2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
    color: var(--text-muted);
}
div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
    border-color: var(--border);
}

/* Tabela dentro de card: cantos limpos e sem borda dupla */
.card > .card-body > .table:only-child,
.card > .card-body > .dataTables_wrapper:only-child,
.card > .card-body > .dt-container:only-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Mobile — tabela com scroll horizontal contido na própria área
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Só a faixa da tabela rola na horizontal — controles/paginação ficam fixos */
    div.dt-container .dt-layout-row.dt-layout-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Busca ocupa a largura disponível no mobile */
    div.dt-container .dt-search {
        justify-content: flex-start;
        width: 100%;
    }
    div.dt-container .dt-search input {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Tabelas simples (sem DataTables) também rolam contidas */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    /* Dropdowns de ação nunca mais largos que a viewport */
    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }
}