/* ============================================================
   1. Fonte do site
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   2. Variáveis padrão e tema automático
   ============================================================ */
:root {
    --bg: #e4e9ea;                                  /* Fundo geral */
    --text: #4B5664;                                /* Texto padrão */
    --header: #ffffff;                              /* Cabeçalho genérico */
    --sidebar: #052e68;                             /* Fundo da sidebar */
    --sidebar-text: #F1F1F1;                        /* Texto/ícones da sidebar */
    --gold: #f1bd4b;                                /* Destaque dos grupos RLS/ÁREA */
    --gold-dark: #052e68;                           /* Cabeçalho das tabelas */
    --card: #ffffff;                                /* Cards, dialogs e modais */
    --subtitle: #8a95a3;                            /* Subtítulos */
    --detail-text: #A6A9AD;                         /* E-mail, nick e status entre parênteses */
    --table-bg: #f9fafb;                            /* Fundo externo da tabela */
    --row-bg: #ffffff;                              /* Fundo das linhas */
    --inactive-bg: #EBEEF0;                         /* Linha/opção inativa */
    --inactive-fg: #66727F;                         /* Texto inativo */
    --input-bg: #f0f2f4;                            /* Inputs e selects */
    --input-border: #c8cdd3;                        /* Borda de inputs/selects */
    --shadow: 0 2px 12px rgba(5, 46, 104, .08);     /* Sombra padrão */
    --btn-blue: #1d305a;                            /* Botões azuis no tema claro */
    --btn-red: #922f25;                             /* Botões vermelhos no tema claro */
    --btn-yellow: #88651e;                          /* Botões amarelos no tema claro */
    --btn-green: #1d7365;                           /* Botões verdes no tema claro */
    --btn-text: #ffffff;                            /* Texto dos botões coloridos no tema claro */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #454545;                              /* Fundo geral */
        --text: #d4dce8;                            /* Texto padrão */
        --header: #0a1220;                          /* Cabeçalho genérico */
        --sidebar: #212121;                         /* Fundo da sidebar */
        --sidebar-text: #F1F1F1;                    /* Texto/ícones da sidebar */
        --gold: #F1F1F1;                            /* Destaque dos grupos */
        --gold-dark: #212121;                       /* Cabeçalho das tabelas */
        --card: #212121;                            /* Cards, dialogs e modais */
        --subtitle: #607080;                        /* Subtítulos */
        --detail-text: #5C646B;                     /* E-mail, nick e status entre parênteses */
        --table-bg: #333333;                        /* Fundo externo da tabela */
        --row-bg: #333333;                          /* Fundo das linhas */
        --inactive-bg: #454545;                     /* Linha/opção inativa */
        --inactive-fg: #92A1B2;                     /* Texto inativo */
        --input-bg: #333333;                        /* Inputs e selects */
        --input-border: #2d3b4f;                    /* Borda de inputs/selects */
        --shadow: 0 2px 16px rgba(0, 0, 0, .35);    /* Sombra padrão */
        --btn-blue: #b3bdda;                        /* Botões azuis no tema escuro */
        --btn-red: #ec9b94;                         /* Botões vermelhos no tema escuro */
        --btn-yellow: #e9c57d;                      /* Botões amarelos no tema escuro */
        --btn-green: #94ded2;                       /* Botões verdes no tema escuro */
        --btn-text: #ffffff;                        /* Texto dos botões coloridos no tema escuro */
    }
}

/* ============================================================
   3. Tema manual claro/escuro
   ============================================================ */
body.theme-light {
    --bg: #e4e9ea;                                  /* Fundo geral */
    --text: #4B5664;                                /* Texto padrão */
    --header: #ffffff;                              /* Cabeçalho genérico */
    --sidebar: #052e68;                             /* Fundo da sidebar */
    --sidebar-text: #F1F1F1;                        /* Texto/ícones da sidebar */
    --gold: #f1bd4b;                                /* Destaque dos grupos */
    --gold-dark: #052e68;                           /* Cabeçalho das tabelas */
    --card: #ffffff;                                /* Cards, dialogs e modais */
    --subtitle: #8a95a3;                            /* Subtítulos */
    --detail-text: #A6A9AD;                         /* E-mail, nick e status entre parênteses */
    --table-bg: #f9fafb;                            /* Fundo externo da tabela */
    --row-bg: #ffffff;                              /* Fundo das linhas */
    --inactive-bg: #EBEEF0;                         /* Linha/opção inativa */
    --inactive-fg: #66727F;                         /* Texto inativo */
    --input-bg: #f0f2f4;                            /* Inputs e selects */
    --input-border: #c8cdd3;                        /* Borda de inputs/selects */
    --shadow: 0 2px 12px rgba(5, 46, 104, .08);     /* Sombra padrão */
    --btn-blue: #1d305a;                            /* Azul */
    --btn-red: #922f25;                             /* Vermelho */
    --btn-yellow: #88651e;                          /* Amarelo */
    --btn-green: #1d7365;                           /* Verde */
    --btn-text: #ffffff;                            /* Texto dos botões */
}

body.theme-dark {
    --bg: #454545;                                  /* Fundo geral */
    --text: #d4dce8;                                /* Texto padrão */
    --header: #0a1220;                              /* Cabeçalho genérico */
    --sidebar: #212121;                             /* Fundo da sidebar */
    --sidebar-text: #F1F1F1;                        /* Texto/ícones da sidebar */
    --gold: #F1F1F1;                                /* Destaque dos grupos */
    --gold-dark: #212121;                           /* Cabeçalho das tabelas */
    --card: #212121;                                /* Cards, dialogs e modais */
    --subtitle: #607080;                            /* Subtítulos */
    --detail-text: #5C646B;                         /* E-mail, nick e status entre parênteses */
    --table-bg: #333333;                            /* Fundo externo da tabela */
    --row-bg: #333333;                              /* Fundo das linhas */
    --inactive-bg: #454545;                         /* Linha/opção inativa */
    --inactive-fg: #92A1B2;                         /* Texto inativo */
    --input-bg: #333333;                            /* Inputs e selects */
    --input-border: #a7a7a7;                        /* Borda de inputs/selects */
    --shadow: 0 2px 16px rgba(0, 0, 0, .35);        /* Sombra padrão */
    --btn-blue: #b3bdda;                            /* Azul */
    --btn-red: #ec9b94;                             /* Vermelho */
    --btn-yellow: #e9c57d;                          /* Amarelo */
    --btn-green: #94ded2;                           /* Verde */
    --btn-text: #ffffff;                            /* Texto dos botões */
}

/* ============================================================
   4. Reset e base do documento
   ============================================================ */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
}

button,
input,
select {
    font-family: 'Poppins', sans-serif;
}

/* ============================================================
   5. Layout geral
   ============================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.main {
    flex: 1;
    width: 100%;
    padding: 28px 28px 10px 28px;
    overflow-x: auto;
}

/* ============================================================
   6. Sidebar - estrutura
   ============================================================ */
.sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
    height: 100vh;
    min-height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--sidebar);
    color: var(--sidebar-text);
    border-radius: 0;
    margin: 0;
    padding: 20px 7px 45px 7px;
    overflow-y: auto;
}

.sidebar * {
    color: var(--sidebar-text);
}

.sidebar hr {
    display: none;
}

.sidebar.collapsed {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    flex: 0 0 64px !important;
    height: 100vh;
    min-height: 100vh;
    padding-left: 14px;
    padding-right: 14px;
    overflow: hidden;
}

.sidebar.collapsed .nav-group,
.sidebar.collapsed hr {
    display: none;
}

/* ============================================================
   7. Sidebar - botão de minimizar
   ============================================================ */
.sidebar-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    margin: -8px -5px 13px auto;;
    padding: 0;
}

.sidebar-toggle::before {
    content: "";
    width: 11px;
    height: 11px;
    border-left: 2px solid var(--sidebar-text);
    border-bottom: 2px solid var(--sidebar-text);
    transform: rotate(45deg);
    display: block;
}

.sidebar-toggle:hover {
    background: transparent;
}

.sidebar.collapsed .sidebar-toggle {
    transform: none;
    margin: -7px auto 20px -1px;
    background: transparent;
}

.sidebar.collapsed .sidebar-toggle::before {
    content: "☰";
    width: auto;
    height: auto;
    border: 0;
    transform:  scaleX(1.10);
    color: var(--sidebar-text);
    font-size: 18px;
    line-height: 1;
}

/* ============================================================
   8. Sidebar - grupos RLS e ÁREA
   ============================================================ */
.nav-group {
    margin-bottom: 3px;
}

.sidebar-toggle+.nav-group {
    margin-top: 20px;
}

.nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
    cursor: pointer;
    color: var(--gold);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: none;
    margin-bottom: 10px;
    list-style: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    content: "⌵";
    font-size: 16px;
    line-height: 1;
    transition: transform .2s ease;
}

.nav-group[open] summary::after {
    transform: rotate(180deg);
}

.nav-group form {
    margin: 8px 0;
}

/* ============================================================
   9. Sidebar - abas de navegação
   ============================================================ */
.nav-btn {
    width: 100%;
    min-height: 40px;
    height: 40px;
    display: block;
    line-height: 40px;
    padding: 0 12px;
    background: transparent;
    color: #F1F1F1;
    border: 0;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 100;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.nav-group .nav-btn {
    margin-bottom: 2px;
}

body.theme-light .nav-btn:hover {
    background: rgba(0, 0, 0, .28);
    color: #C9D6EA;
}

body.theme-light .nav-btn:hover * {
    color: #052e68;
}

.nav-btn.active {
    background: rgba(0, 0, 0, .28);
    color: #ffffff;
    font-weight: 400;
}

body.theme-light .nav-btn.active:hover {
    background: rgba(0, 0, 0, .28);
    color: #C9D6EA;
}

body.theme-dark .nav-btn.active:hover {
    background: #454545;
    color: #F1F1F1;
}

body.theme-dark .nav-btn:hover {
    background: #454545;
    color: #F1F1F1;
}

body.theme-dark .nav-btn:hover * {
    color: #F1F1F1;
}

body.theme-dark .nav-btn.active {
    background: #454545;
    color: #F1F1F1;
}

body.theme-dark .nav-btn.active * {
    color: #F1F1F1;
}

body.theme-dark .nav-btn.active:hover {
    background: #454545;
    color: #F1F1F1;
}

/* ============================================================
   10. Sidebar - botão Dark/Light
   ============================================================ */
.theme-toggle-wrap {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.theme-toggle-btn {
    width: fit-content;
    min-width: auto;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    padding: 0 6px;
}

.theme-toggle-btn,
body.theme-light .theme-toggle-btn,
body.theme-dark .theme-toggle-btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--sidebar-text) !important;
}

.theme-toggle-btn *,
body.theme-light .theme-toggle-btn *,
body.theme-dark .theme-toggle-btn * {
    color: var(--sidebar-text) !important;
}

.theme-toggle-btn:hover,
body.theme-light .theme-toggle-btn:hover,
body.theme-dark .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.18) !important;
    color: var(--sidebar-text) !important;
}

body.theme-light .theme-toggle-btn *,
body.theme-light .theme-icon,
body.theme-light .theme-label {
    color: #fdfdfd;
}

body.theme-dark .theme-toggle-btn *,
body.theme-dark .theme-icon,
body.theme-dark .theme-label {
    color: #333333;
}

.theme-toggle-btn:hover {
    filter: brightness(.96);
}

.theme-icon {
    display: inline-flex;
    width: 22px;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}

.sidebar.collapsed .theme-toggle-wrap {
    border-top: 0;
    padding-top: 0;
}

.sidebar.collapsed .theme-toggle-btn {
    width: 34px;
    min-height: 34px;
    height: 34px;
    line-height: 34px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
}

.sidebar.collapsed .theme-label {
    display: none;
}

.sidebar.collapsed .theme-icon {
    width: auto;
}

/* ============================================================
   11. Cabeçalho/título da página
   ============================================================ */
.rls-card {
    display: none;
}

.rls-title {
    font-size: 22px;
    font-weight: 700;
    color: #052e68;
    margin-bottom: 4px;
}

.rls-subtitle {
    font-size: 13px;
    color: var(--subtitle);
    margin-bottom: 0;
}

body.theme-light .rls-title,
body.theme-light .modal h3 {
    color: #052e68;
}

body.theme-dark .rls-title,
body.theme-dark .modal h3 {
    color: var(--btn-blue);
}

/* ============================================================
   12. Cards e blocos genéricos
   ============================================================ */
.content-expander,
.edit-card,
.table-card {
    background: var(--card);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.content-expander {
    padding: 0;
}

.content-expander summary {
    cursor: pointer;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.edit-card {
    padding: 20px 0 0 0;
}

/* ============================================================
   13. Formulários, labels, inputs e selects
   ============================================================ */
.form-grid {
    display: grid;
    gap: 16px;
    padding: 0 20px 20px 20px;
    align-items: end;
}

.form-grid.one {
    grid-template-columns: minmax(260px, 420px) auto;
}

.form-grid.two {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
}

.form-grid.three {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
}

label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

select,
input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

select option {
    background-color: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

select option[data-inactive="true"] {
    background-color: var(--inactive-bg);
    color: var(--inactive-fg);
}

select option:hover,
select option:checked {
    background-color: var(--bg);
    color: var(--text);
}

/* ============================================================
   14. Botões gerais e utilitários de cor
   ============================================================ */
.primary,
.secondary,
.danger {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
}

.primary {
    background: var(--btn-blue);
    color: var(--btn-text);
    border: 1px solid var(--btn-blue);
}

.secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--input-border);
}

.danger {
    background: var(--btn-red);
    color: var(--btn-text);
    border: 1px solid var(--btn-red);
}

.primary:hover,
.secondary:hover,
.danger:hover {
    filter: brightness(.95);
}

.small {
    height: 36px;
    min-height: 36px;
}

.btn-blue {
    background: var(--btn-blue);
    border-color: var(--btn-blue);
    color: var(--btn-text);
}

.btn-red {
    background: var(--btn-red);
    border-color: var(--btn-red);
    color: var(--btn-text);
}

.btn-yellow {
    background: var(--btn-yellow);
    border-color: var(--btn-yellow);
    color: var(--btn-text);
}

.btn-green {
    background: var(--btn-green);
    border-color: var(--btn-green);
    color: var(--btn-text);
}

/* ============================================================
   15. Tabela base
   ============================================================ */
.table-card {
    background-color: var(--table-bg);
    border-radius: 12px;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}

.small-table {
    max-width: 520px;
    max-height: 360px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg);
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    background-color: var(--gold-dark);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

tbody td {
    padding: 11px 14px;
    background-color: var(--row-bg);
    border-bottom: 1px solid rgba(128, 128, 128, .15);
    font-size: 13px;
}

tbody tr.inactive td {
    background-color: var(--inactive-bg);
    color: var(--inactive-fg);
}

.empty,
.empty-cell {
    padding: 18px;
    color: var(--text);
}

.empty-cell {
    background-color: var(--row-bg);
}

.small-empty {
    padding: 0 20px 20px 20px;
}

/* ============================================================
   16. Tabelas RLS
   ============================================================ */
.rls-table-card {
    width: 100%;
    height: calc(100vh - 92px);
    min-height: calc(100vh - 92px);
    max-height: calc(100vh - 92px);
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 14px;
}

.small-table,
.rls-table-card.small-table {
    max-width: none;
    max-height: calc(100vh - 92px);
}

.rls-table {
    width: 100%;
    min-width: 100%;
}

.rls-table thead th {
    vertical-align: middle;
    z-index: 20;
    overflow: visible;
}

.rls-table thead th.filter-open {
    z-index: 250;
}

.th-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

.deleted-label {
    font-style: italic;
    font-size: inherit;
    font-family: inherit;
    color: var(--detail-text);
    margin-left: -2px;
}
/* ============================================================
   17. Filtros no cabeçalho da tabela
   ============================================================ */
.table-filter {
    position: relative;
    width: fit-content;
    flex: 0 0 auto;
}

.table-filter summary {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 8px;
    list-style: none;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}

.table-filter summary::-webkit-details-marker {
    display: none;
}

.table-filter summary:hover,
.table-filter[open] summary {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .65);
    color: #ffffff;
}

.filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    z-index: 50;
    width: min(210px, 70vw);                       /* largura padronizada da caixa de filtros */
    padding: 8px;                                  /* espaço interno menor */
    background: var(--card);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    text-align: left;
}

.filter-menu select,
.filter-menu input.filter-input {
    width: 100%;
    min-width: 0;                                  /* deixa o select obedecer à caixa global */
    min-height: 32px;
    padding: 5px 7px;
    font-size: 12px;
}

.filter-menu.multi-filter-menu {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: min(420px, 70vh);
    overflow: hidden;
}

.filter-menu .multi-filter-source-select {
    display: none !important;
}

.multi-filter-options {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(294px, calc(70vh - 120px));    /* até 11 opções de 26px */
    margin-top: 4px;
    overflow-y: auto;
    padding: 3px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
}

.multi-filter-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 4px 5px;
    border-radius: 5px;
    color: var(--text);
    font-size: 11px;
    line-height: 1.25;
    cursor: pointer;
}

.multi-filter-option:hover {
    background: var(--input-bg);
}

.multi-filter-option[hidden] {
    display: none !important;
}

.multi-filter-option.inactive {
    background-color: var(--inactive-bg);
    color: var(--inactive-fg);
}

.multi-filter-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.multi-filter-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.multi-filter-footer {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    margin-top: 7px;
    padding-top: 7px;
    background: var(--card);
    border-top: 1px solid var(--input-border);
}

.multi-filter-ok {
    width: 100%;
    min-height: 30px;
    font-size: 11px;
}

.filter-line {
    width: min(420px, 100%);
    margin-bottom: 18px;
    padding: 16px 20px;
    background: var(--card);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.filter-select.placeholder,
.filter-select option:first-child,
.filter-input.placeholder::placeholder {
    color: #a6a7a6;
}

.filter-expander .form-grid.one {
    grid-template-columns: minmax(260px, 420px);
}

.filter-expander .form-grid.two {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.filter-expander .form-grid.three {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* ============================================================
   18. Coluna de ações da tabela
   ============================================================ */
.actions-th {
    width: 220px;
    text-align: left;
    padding-left: 115px;
}

.actions-th .primary {
    min-width: 35px;
    min-height: 35px;
    height: 35px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

.actions-th .primary:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .65);
    color: #ffffff;
}

/* Célula de ações deve continuar sendo uma célula da tabela, mesmo sem botões.
   Usar display:flex em <td> fazia a cor de linhas inativas parar antes do fim. */
.row-actions {
    vertical-align: middle;
    white-space: nowrap;
}

.row-actions > button + button {
    margin-left: 8px;
}

/* Botão fantasma para manter o botão Excluir na mesma posição das linhas com Editar + Excluir. */
.row-actions .row-action-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.row-actions .secondary,
.row-actions .danger {
    min-height: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.row-actions .secondary {
    background: var(--btn-yellow);
    border: 1px solid var(--btn-yellow);
    color: var(--btn-text);
}

.row-actions .danger {
    background: var(--btn-red);
    border: 1px solid var(--btn-red);
    color: var(--btn-text);
}

body.theme-dark .row-actions .secondary,
body.theme-dark .row-actions .danger {
    color: var(--bg);
}

.row-actions .secondary:hover,
.row-actions .danger:hover {
    filter: brightness(.95);
}

.rls-geral-table .row-actions,
.rls-usuarios-table .row-actions,
.area-master-table .row-actions {
    padding-left: 131px;
}

.rls-table:not(.rls-geral-table):not(.rls-usuarios-table):not(.area-master-table) .row-actions {
    padding-left: 105px;
    padding-right: 0;
}

/* ============================================================
   19. Dialogs de Adicionar, Editar e Excluir
   ============================================================ */
.app-dialog {
    width: min(540px, calc(100vw - 36px));
    max-height: none;
    overflow: visible;
    padding: 0;
    background: var(--card);
    color: var(--text);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

.app-dialog::backdrop {
    background: rgba(0, 0, 0, .48);
}

.dialog-form {
    display: grid;
    gap: 16px;
    padding: 26px;
    overflow: visible;
}

.dialog-form h3 {
    margin: 0;
    color: var(--btn-blue);
    font-size: 18px;
}

dialog[id^="dialog-add"] .dialog-form h3 {
    color: var(--btn-blue);
}

dialog[id^="dialog-edit"] .dialog-form h3 {
    color: var(--btn-yellow);
}

dialog[id^="dialog-delete"] .dialog-form h3 {
    color: var(--btn-red);
}

.dialog-readonly {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
}

.dialog-readonly p {
    margin: 0;
    line-height: 1.4;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.app-dialog .primary {
    background: var(--btn-blue);
    border-color: var(--btn-blue);
    color: var(--btn-text);
}

dialog[id^="dialog-edit"] .dialog-actions .primary {
    background: var(--btn-green);
    border-color: var(--btn-green);
    color: var(--btn-text);
}

.app-dialog .danger,
dialog[id^="dialog-delete"] .dialog-actions .primary,
dialog[id^="dialog-delete"] .dialog-actions .danger {
    background: var(--btn-red);
    border-color: var(--btn-red);
    color: var(--btn-text);
}

.app-dialog .secondary {
    background: transparent;
    border: 1px solid var(--input-border);
    color: var(--text);
}

body.theme-dark .app-dialog .secondary {
    border-color: #f1f1f1;
    color: #f1f1f1;
}

.app-dialog .primary:hover,
.app-dialog .secondary:hover,
.app-dialog .danger:hover {
    filter: brightness(.95);
}

/* ============================================================
   20. Modal de confirmação secundária
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .45);
}

body.theme-dark .modal-backdrop {
    background-color: rgba(2, 6, 23, .72);
}

/* ============================================================
   20.1 Loading overlay de navegação entre páginas
   ============================================================ */
.page-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

/* Enquanto o JS ainda não calculou a largura real da sidebar (ex.: no
   primeiro paint de cada página), usa a largura padrão dela em telas
   largas, para o overlay já nascer sem cobrir a sidebar. */
@media (min-width: 701px) {
    .page-loading-overlay {
        left: 250px;
    }
}

.page-loading-overlay[hidden] {
    display: none;
}

.page-loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    animation: page-loading-spin .7s linear infinite;
}

body.theme-dark .page-loading-spinner {
    border-top-color: #212121;
    border-right-color: #212121;
    border-bottom-color: #212121;
}

@keyframes page-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.modal {
    width: min(540px, 100%);
    padding: 26px;
    background: var(--card);
    color: var(--text);
    border-radius: 18px;
    box-shadow: 0 18px 70px rgba(0, 0, 0, .35);
    text-align: center;
}

.modal h3 {
    margin-top: 0;
    color: var(--btn-blue);
}

.modal.modal-edit h3,
body.theme-light .modal.modal-edit h3,
body.theme-dark .modal.modal-edit h3 {
    color: var(--btn-yellow);
}

.modal.modal-danger h3,
body.theme-light .modal.modal-danger h3,
body.theme-dark .modal.modal-danger h3 {
    color: var(--btn-red);
}

.modal p {
    line-height: 1.5;
}

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.modal .primary {
    background: var(--btn-blue);
    border-color: var(--btn-blue);
    color: var(--btn-text);
}

.modal.modal-edit .primary {
    background: var(--btn-green);
    border-color: var(--btn-green);
    color: var(--btn-text);
}

.modal.modal-danger .primary,
.modal .danger {
    background: var(--btn-red);
    border-color: var(--btn-red);
    color: var(--btn-text);
}

.modal .secondary {
    background: transparent;
    border: 1px solid var(--input-border);
    color: var(--text);
}

body.theme-dark .modal .secondary {
    border-color: #f1f1f1;
    color: #f1f1f1;
}

.modal .primary:hover,
.modal .secondary:hover,
.modal .danger:hover {
    filter: brightness(.95);
}

/* ============================================================
   21. Mensagens flash
   ============================================================ */
.flash-stack {
    /* flutua sobre a página: o aviso não empurra a tabela nem desloca a linha que a pessoa está editando (teste de 27/10) */
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    max-width: min(420px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
}

.flash {
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-size: 14px;
}

.flash.success {
    background: #dff4e6;
    color: #165c2d;
}

.flash.warning {
    background: #fff1c7;
    color: #6b4a00;
}

.flash.error {
    background: #ffe0e0;
    color: #802020;
}

/* ============================================================
   22. Downloads e linha de ações inferior
   ============================================================ */
.actions-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 0;
    padding-right: 0;
}

.actions-left,
.actions-right,
.dual-downloads {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.actions-right,
.dual-downloads {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
}

.right-only {
    justify-content: flex-end;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.link-btn.secondary {
    min-height: 36px;
    height: 36px;
    padding: 0 16px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    box-sizing: border-box;
    font-weight: 700;
    line-height: 1;
}

.actions-row .link-btn.secondary {
    min-height: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    background: var(--btn-green);
    border: 1px solid var(--btn-green);
    color: var(--btn-text);
    width: auto;
}

body.theme-dark .actions-row .link-btn.secondary {
    color: var(--bg);
}

.actions-row .link-btn.secondary:hover {
    filter: brightness(.95);
}

.bottom-edit,
.bottom-edit-inline {
    margin: 0;
}

/* ============================================================
   23. Áreas Disponíveis - formulários antigos
   ============================================================ */
.master-actions {
    display: grid;
    gap: 18px;
}

.master-actions.two-cols {
    grid-template-columns: minmax(280px, 420px) minmax(280px, 420px);
    align-items: start;
}

.stack-form {
    display: grid;
    gap: 16px;
    padding: 0 20px 20px 20px;
    align-items: start;
}

.stack-form .small {
    width: fit-content;
    min-width: 120px;
}


/* ============================================================
   24. Tela inicial e logos
   ============================================================ */
.main-home {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 40px);
}

.home-logos {
    width: 100%;
    display: grid;
    place-items: center;
}

.home-logo {
    width: 100%;
    max-width: min(680px, 70vw);
    height: auto;
}

.home-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .home-logo-light {
        display: none;
    }

    .home-logo-dark {
        display: block;
    }
}

body.theme-light .home-logo-light {
    display: block;
}

body.theme-light .home-logo-dark {
    display: none;
}

body.theme-dark .home-logo-light {
    display: none;
}

body.theme-dark .home-logo-dark {
    display: block;
}

/* ============================================================
   25. Scrollbar das tabelas
   ============================================================ */
.rls-table-card::-webkit-scrollbar,
.table-card::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.rls-table-card::-webkit-scrollbar-track,
.table-card::-webkit-scrollbar-track {
    background: transparent;
}

.rls-table-card::-webkit-scrollbar-thumb,
.table-card::-webkit-scrollbar-thumb {
    background: rgba(5, 46, 104, .35);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

.rls-table-card::-webkit-scrollbar-thumb:hover,
.table-card::-webkit-scrollbar-thumb:hover {
    background: rgba(5, 46, 104, .55);
    border: 2px solid transparent;
    background-clip: content-box;
}

.rls-table-card,
.table-card {
    scrollbar-width: thin;
    scrollbar-color: #919493 transparent;
}



/* ============================================================
   26. Aba Margem
   ============================================================ */
.margem-form {
    display: flex;
    flex-direction: column;
}

.margem-table-card {
    width: 100%;
    height: calc(100vh - 100px);
    min-height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
}

.rls-margem-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
}

.rls-margem-table .margem-col-usuario {
    width: auto;
}

.rls-margem-table .margem-col-visualizacao {
    width: 260px;
}


.rls-margem-table .margem-visualizacao-th,
.rls-margem-table .margem-select-cell {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    text-align: left;
    padding-left: -155px;
    padding-right: -155px;
}

.rls-margem-table .margem-th-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

.rls-margem-table .margem-th-content > span {
    white-space: nowrap;
}

/* posição do escrito "Visualização Margem" no cabeçalho*/
.rls-margem-table .margem-visualizacao-th .margem-th-content > span {
    position: relative;
    left: -180px;
}

/* posição do filtro no cabeçalho*/
.rls-margem-table .margem-visualizacao-th .table-filter {
    position: relative;
    left: -178px;
}

.rls-margem-table .margem-visualizacao-th .filter-menu {
    left: 0;
    right: auto;
    /* tamanho herdado da regra global .filter-menu */
}

.rls-margem-table .margem-select {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    min-height: 24px;
    height: 24px;
    padding: 2px 4px;
    border-radius: 6px;
    color: var(--btn-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
    transform: translateX(-180px); /* posição do dropdown na tabela*/
}                                


.rls-margem-table .margem-select.is-sim {
    background: var(--btn-green);
    border-color: var(--btn-green);
}

.rls-margem-table .margem-select.is-nao {
    background: var(--btn-red);
    border-color: var(--btn-red);
}

body.theme-dark .rls-margem-table .margem-select.is-sim,
body.theme-dark .rls-margem-table .margem-select.is-nao {
    color: var(--bg);
}

.rls-margem-table .margem-select:hover {
    filter: brightness(.95);
}

.rls-margem-table .margem-select option {
    background: var(--input-bg);
    color: var(--text);
    font-weight: 500;
}


.margem-save-row {
    justify-content: flex-end;
    margin-top: 8px;
}

.margem-save-btn {
    min-height: 30px;
    height: 30px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--btn-green);
    background: var(--btn-green);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
}

body.theme-dark .margem-save-btn {
    color: var(--bg);
}

.margem-save-btn:hover {
    filter: brightness(.95);
}


/* ============================================================
   27. Ajustes específicos antigos
   ============================================================ */
.geral-add-grid {
    grid-template-columns: minmax(360px, 560px) auto;
}

.geral-add-grid .primary.small {
    min-width: 110px;
}

/* ============================================================
   28. Responsivo
   ============================================================ */
@media (min-width: 701px) {
    .app-shell {
        display: flex;
        min-height: 100vh;
    }

    .sidebar {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        flex: 0 0 250px;
        height: 100vh;
        min-height: 100vh;
        position: sticky;
        top: 0;
        border-radius: 0;
        margin: 0;
    }

    .sidebar.collapsed {
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        flex: 0 0 64px;
        height: 100vh;
        min-height: 100vh;
        padding-left: 14px;
        padding-right: 14px;
        overflow: hidden;
    }
}

@media (max-width: 900px) {
    .rls-table-card {
        height: calc(100vh - 100px);
        min-height: 480px;
        max-height: calc(100vh - 100px);
    }

    .rls-table {
        min-width: 680px;
    }

    .row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        position: relative;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: auto;
        border-radius: 0 0 20px 20px;
        margin: 0 0 10px 0;
    }

    .sidebar.collapsed {
        width: 64px;
        min-height: 100vh;
        height: 100vh;
        padding-left: 14px;
        padding-right: 14px;
    }

    .main {
        padding: 18px;
    }

    .rls-table-card {
        height: calc(100vh - 140px);
        min-height: 420px;
        max-height: calc(100vh - 140px);
    }

    .form-grid.one,
    .form-grid.two,
    .form-grid.three,
    .master-actions,
    .geral-add-grid,
    .filter-expander .form-grid.two,
    .filter-expander .form-grid.three {
        grid-template-columns: 1fr;
    }

    .actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-left,
    .actions-right,
    .dual-downloads {
        width: 100%;
    }

    .link-btn,
    .bottom-edit-inline button,
    .actions-row .link-btn,
    .actions-row .link-btn.secondary {
        width: 100%;
    }
}

/* Tema escuro: preserva o fundo colorido e usa texto cinza-escuro nos botões da popup */
html[data-theme="dark"] body .app-dialog .dialog-actions .primary,
html[data-theme="dark"] body .app-dialog .dialog-actions .danger,
html[data-theme="dark"] body .modal .modal-actions .primary,
html[data-theme="dark"] body .modal .modal-actions .danger,
body.theme-dark .app-dialog .dialog-actions .primary,
body.theme-dark .app-dialog .dialog-actions .danger,
body.theme-dark .modal .modal-actions .primary,
body.theme-dark .modal .modal-actions .danger {
    color: #333333 !important;
}

/* ============================================================
   27. Aba Usuários
   ============================================================ */
.usuario-sufixo {
    margin-left: 4px;
    font-style: italic;
    font-family: inherit;
    font-size: inherit;
    color: var(--detail-text);
}



/* Cabeçalho e ações da aba Usuários: alinham + Criar com Excluir. */
.rls-usuarios-table .actions-th {
    padding-left: 131px;
}

.usuarios-api-feedback {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
}

.usuarios-api-feedback.is-success {
    background: #dff4e6;
    color: #165c2d;
}

.usuarios-api-feedback.is-error {
    background: #ffe0e0;
    color: #802020;
}

.row-actions .danger:disabled {
    opacity: .65;
    cursor: not-allowed;
    filter: none;
}

.dialog-actions-single {
    grid-template-columns: 1fr;
}


/* ============================================================
   Margem - coluna País + Visualização por país
   ============================================================ */
.rls-margem-table .margem-col-pais {
    width: 220px;
}

.rls-margem-table .margem-col-visualizacao {
    width: 220px;
}

.rls-margem-table .margem-pais-th,
.rls-margem-table .margem-pais-cell,
.rls-margem-table .margem-visualizacao-th,
.rls-margem-table .margem-select-cell {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
}

.rls-margem-table .margem-pais-select {
    width: 165px!important;
    min-width: 165px!important;
    max-width: 165px!important;
    min-height: 24px;
    height: 24px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
}

.rls-margem-table .margem-select {
    transform: none;
}

.rls-margem-table .margem-visualizacao-th .margem-th-content > span,
.rls-margem-table .margem-visualizacao-th .table-filter {
    left: 0;
}

.rls-margem-table .margem-visualizacao-th .filter-menu {
    left: 0;
    right: auto;
}


/* Margem - dropdown País/Nível */
body.theme-light .rls-margem-table .margem-pais-select {
    background-color: #88651e !important;
    border-color: #88651e !important;
    color: #ffffff !important;
}

body.theme-dark .rls-margem-table .margem-pais-select {
    background-color: #e9c57d !important;
    border-color: #e9c57d !important;
    color: #333333 !important;
}

/* Margem - botão Salvar */
body.theme-light .margem-save-btn {
    background-color: #1d7365 !important;
    border-color: #1d7365 !important;
    color: #ffffff !important;
}

body.theme-dark .margem-save-btn {
    background-color: #94ded2 !important;
    border-color: #94ded2 !important;
    color: #454545 !important;
}
/* ============================================================
   Margem - aproximar coluna País para a esquerda
   ============================================================ */
.rls-margem-table {
    table-layout: fixed;
}

.rls-margem-table .margem-col-usuario {
    width: 48%;
}

.rls-margem-table .margem-col-pais {
    width: 170px;
}

.rls-margem-table .margem-col-visualizacao {
    width: 210px;
}

.rls-margem-table .margem-pais-th,
.rls-margem-table .margem-pais-cell {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    padding-left: 8px;
    padding-right: 8px;
}

.rls-margem-table .margem-visualizacao-th,
.rls-margem-table .margem-select-cell {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
}


body.theme-dark .rls-margem-table select[name^="origem_"],
body.theme-dark .margem-pais-select {
    border-color: var(--input-border);
}

.rls-margem-table .margem-pais-select.placeholder {
    color: #A6A9AD;
}

.rls-margem-table .margem-pais-select option {
    color: var(--text);
}

.rls-margem-table .margem-pais-select option[value=""] {
    color: #A6A9AD;
}

/* ============================================================
   Margem - placeholder da Visualização Margem
   ============================================================ */
.rls-margem-table .margem-select.placeholder,
.rls-margem-table .margem-select:has(option[value=""]:checked) {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: #A6A9AD;
    font-weight: 400;
}

.rls-margem-table .margem-select.placeholder option,
.rls-margem-table .margem-select option {
    background: var(--input-bg);
    color: var(--text);
}

.rls-margem-table .margem-select option[value=""] {
    color: #A6A9AD;
}

/* ============================================================
   Margem - placeholder do País igual ao Visualização Margem
   ============================================================ */
.rls-margem-table .margem-pais-select.placeholder,
.rls-margem-table .margem-pais-select:has(option[value=""]:checked) {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: #A6A9AD;
    font-weight: 400;
}

.rls-margem-table .margem-pais-select.placeholder option,
.rls-margem-table .margem-pais-select option {
    background: var(--input-bg);
    color: var(--text);
}

.rls-margem-table .margem-pais-select option[value=""] {
    color: #A6A9AD;
}

/* ============================================================
   Margem - layout País - Nível
   ============================================================ */
.rls-margem-table .margem-col-usuario {
    width: auto;
}

.rls-margem-table .margem-col-pais {
    width: 320px;
}

.rls-margem-table .margem-pais-th,
.rls-margem-table .margem-pais-cell {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
}


body.theme-dark .rls-margem-table select[name^="nivel_margem_"],
body.theme-dark .rls-margem-table .margem-pais-select {
    border-color: var(--input-border);
}

/* Margem - tamanho igual aos botões Editar/Excluir */
.rls-margem-table .margem-pais-select {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Margem - Selecione sem cor amarela */
body.theme-light .rls-margem-table .margem-pais-select.placeholder,
body.theme-light .rls-margem-table .margem-pais-select:has(option[value=""]:checked) {
    background-color: #969899 !important;
    border-color: #A8ABAD !important;
    color: #ffffff !important;
}

body.theme-dark .rls-margem-table .margem-pais-select.placeholder,
body.theme-dark .rls-margem-table .margem-pais-select:has(option[value=""]:checked) {
    background-color: #212121 !important;
    border-color: #a7a7a7 !important;
    color: #d4dce8 !important;
}

/* ============================================================
   Sidebar - Usuários como link direto
   ============================================================ */
.nav-group-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 24px;
    padding-right: 8px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: none;
    text-decoration: none;
    margin-bottom: 6px;
    cursor: pointer;
}

.sidebar-toggle + .nav-group-link {
    margin-top: 20px;
}

.nav-group-link:hover,
.nav-group-link.active {
    color: var(--gold);
    text-decoration: none;
}

.sidebar.collapsed .nav-group-link {
    display: none;
}

/* ============================================================
   Sidebar - sino de notificações de erro
   ============================================================ */
.sidebar-footer-actions {
    align-items: center;
    justify-content: space-between;
}

.notification-toggle-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent !important;
    color: #a6a7a6 !important;
}



.notification-bell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.notification-bell-svg {
    width: 27px;
    height: 27px;
    display: block;
    fill: currentColor;
}

.notification-toggle-btn.has-errors .notification-badge {
    position: absolute;
    top: 1px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ff1d1d;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: column;
    gap: 4px;
}

.sidebar.collapsed .notification-toggle-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
}

.app-error-dialog {
    width: min(860px, calc(100vw - 36px));
}

.app-error-dialog-form {
    gap: 14px;
}

.app-error-table-wrap {
    max-height: min(58vh, 430px);
    overflow: auto;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: var(--table-bg);
}

.app-error-table {
    min-width: 720px;
    width: 100%;
}

.app-error-table thead th {
    top: 0;
    z-index: 2;
    padding: 10px 12px;
    font-size: 12px;
}

.app-error-table tbody td {
    padding: 10px 12px;
    vertical-align: top;
    font-size: 12px;
    word-break: break-word;
}

.app-error-table th:nth-child(1),
.app-error-table td:nth-child(1) {
    width: 190px;
}

.app-error-table th:nth-child(2),
.app-error-table td:nth-child(2),
.app-error-table th:nth-child(3),
.app-error-table td:nth-child(3) {
    width: 150px;
}

.app-error-empty {
    margin: 0;
    padding: 14px 16px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    color: var(--text);
    font-size: 13px;
}



/* ============================================================
   Sidebar - Dark/Light à esquerda e sino à direita
   ============================================================ */
.theme-toggle-wrap {
    width: 100%;
}

.sidebar-footer-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-footer-actions .theme-toggle-btn {
    order: 1;
    margin-right: auto;
}

.sidebar-footer-actions .notification-toggle-btn {
    order: 2;
    margin-left: auto;
}

.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.sidebar.collapsed .sidebar-footer-actions .theme-toggle-btn,
.sidebar.collapsed .sidebar-footer-actions .notification-toggle-btn {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================================
   Sidebar - alinhar sino um pouco mais à esquerda
   ============================================================ */
.sidebar-footer-actions {
    justify-content: flex-start !important;
}

.sidebar-footer-actions .theme-toggle-btn {
    order: 1;
    margin-right: 0 !important;
}

.sidebar-footer-actions .notification-toggle-btn {
    order: 2;
    margin-left: auto !important;
    margin-right: 18px !important;
}

.sidebar.collapsed .sidebar-footer-actions .notification-toggle-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Sidebar - sino à esquerda e Dark/Light à direita
   ============================================================ */
.theme-toggle-wrap {
    width: 100%;
}

.sidebar-footer-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
}

.sidebar-footer-actions .notification-toggle-btn {
    order: 1;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sidebar-footer-actions .theme-toggle-btn {
    order: 2;
    margin-left: auto !important;
    margin-right: 18px !important;
}

.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
}

.sidebar.collapsed .sidebar-footer-actions .notification-toggle-btn,
.sidebar.collapsed .sidebar-footer-actions .theme-toggle-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Sidebar fixo - sem botão de recolher
   ============================================================ */
.sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
    padding-top: 60px !important;
}

.sidebar-toggle {
    display: none !important;
}

.nav-group-link {
    margin-top: 0 !important;
}

.sidebar-toggle + .nav-group-link,
.sidebar-toggle + .nav-group {
    margin-top: 0 !important;
}

/* Mesmo se alguma classe collapsed antiga estiver no HTML, o menu permanece aberto. */
.sidebar.collapsed {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
    padding: 12px 7px 45px 7px !important;
    overflow-y: auto !important;
}

.sidebar.collapsed .nav-group {
    display: block !important;
}

.sidebar.collapsed .nav-group-link {
    display: flex !important;
}

.sidebar.collapsed hr {
    display: none !important;
}

.sidebar.collapsed .theme-label {
    display: inline !important;
}

.sidebar.collapsed .theme-toggle-wrap {
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
    padding-top: 14px !important;
}

.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: row !important;
    align-items: center !important;
}

/* AppError - tabela do sino seguindo as cores normais das tabelas */
.app-error-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg) !important;
    color: var(--text) !important;
}

.app-error-table thead th {
    background-color: var(--gold-dark) !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
}

.app-error-table tbody td {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid rgba(128, 128, 128, .15);
    font-size: 13px;
}

.app-error-table-wrap {
    background: var(--table-bg) !important;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    overflow: auto;
}

.app-error-empty {
    color: var(--text) !important;
}

/* AppError - cabeçalho vermelho e coluna Usuário maior */
body.theme-light .app-error-table thead th {
    background-color: var(--btn-red) !important;
    color: #ffffff !important;
}

body.theme-dark .app-error-table thead th {
    background-color: var(--btn-red) !important;
    color: #333333 !important;
}

.app-error-table th:first-child,
.app-error-table td:first-child {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
}

/* AppError - título do dialog em vermelho */
body.theme-light .app-error-dialog h3,
body.theme-dark .app-error-dialog h3 {
    color: var(--btn-red) !important;
}

/* ============================================================
   Sidebar - ajuste títulos dos grupos e Usuários sem ativo fixo
   ============================================================ */
.nav-group summary {
    padding-left: 10px !important;
}

.nav-group-link {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px 0 10px !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--gold) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* Mesmo selecionado, USUÁRIOS não fica com fundo fixo */
.sidebar .nav-group-link.active,
.sidebar .nav-group-link.active:not(:hover),
body.theme-light .sidebar .nav-group-link.active,
body.theme-light .sidebar .nav-group-link.active:not(:hover),
body.theme-dark .sidebar .nav-group-link.active,
body.theme-dark .sidebar .nav-group-link.active:not(:hover) {
    background: transparent !important;
    color: var(--gold) !important;
}

/* USUÁRIOS - cor #A36B3C somente quando passa o mouse */
.sidebar .nav-group-link:hover,
.sidebar .nav-group-link.active:hover,
body.theme-light .sidebar .nav-group-link:hover,
body.theme-light .sidebar .nav-group-link.active:hover,
body.theme-dark .sidebar .nav-group-link:hover,
body.theme-dark .sidebar .nav-group-link.active:hover {
    color: #A36B3C !important;
}

/* ============================================================
   INÍCIO - FUNDO DO BOTÃO "USUÁRIOS" NO HOVER
   Para tirar o fundo do botão USUÁRIOS, apague somente este bloco inteiro.
   Mantém o mesmo padrão das outras opções do sidebar:
   - Light: fundo azul escuro/transparente
   - Dark: fundo cinza #454545
   ============================================================ */
body.theme-light .sidebar .nav-group-link:hover,
body.theme-light .sidebar .nav-group-link.active:hover {
    background: rgba(0, 0, 0, .28) !important;
}

body.theme-dark .sidebar .nav-group-link:hover,
body.theme-dark .sidebar .nav-group-link.active:hover {
    background: #454545 !important;
}

/* Estado normal/selecionado sem mouse */
body.theme-light .sidebar .nav-group-link,
body.theme-light .sidebar .nav-group-link.active:not(:hover) {
    background: transparent !important;
    color: var(--gold) !important;
}

body.theme-dark .sidebar .nav-group-link,
body.theme-dark .sidebar .nav-group-link.active:not(:hover) {
    background: transparent !important;
    color: var(--sidebar-text) !important;
}

/* Hover no light */
body.theme-light .sidebar .nav-group-link:hover,
body.theme-light .sidebar .nav-group-link.active:hover {
    background: rgba(0, 0, 0, .28) !important;
    color: #A36B3C !important;
}

/* Hover no dark */
body.theme-dark .sidebar .nav-group-link:hover,
body.theme-dark .sidebar .nav-group-link.active:hover {
    background: #454545 !important;
    color: var(--sidebar-text) !important;
}

/* ============================================================
   FIM - FUNDO DO BOTÃO "USUÁRIOS" NO HOVER
   ============================================================ */
   
/* Dark/Light um pouco mais para a direita */
.theme-toggle-btn {
    margin-left: 10px !important;
    transform: translateX(10px);
}

/* Sino - remove hover azul herdado do nav-btn */
.notification-toggle-btn,
.notification-toggle-btn:hover,
.notification-toggle-btn:focus,
.notification-toggle-btn:active {
    background: transparent !important;
    color: var(--sidebar-text) !important;
}

.notification-toggle-btn:hover *,
.notification-toggle-btn:focus *,
.notification-toggle-btn:active * {
    color: var(--sidebar-text) !important;
    fill: var(--sidebar-text) !important;
}

.notification-bell-svg,
.notification-bell-svg path {
    fill: currentColor !important;
}

/* AppError - aumenta coluna Visualização */
.app-error-table th:nth-child(2),
.app-error-table td:nth-child(2) {
    width: 220px;
    min-width: 220px;
}

/* ============================================================
   Estilos extraídos dos templates HTML
   ============================================================ */
.app-error-alert {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 35, 24, .35);
    border-radius: 8px;
    background: rgba(180, 35, 24, .08);
    color: var(--danger-color, #b42318);
    font-size: 13px;
    font-weight: 600;
}

.email-domain-control {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.email-domain-control input {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.email-domain-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color, #d0d7de);
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--surface-muted, #f6f8fa);
    color: var(--text-muted, #57606a);
    white-space: nowrap;
}

.field-hint,
.field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.field-error {
    color: var(--danger-color, #b42318);
}

/* Tela de autenticação */
body.auth-page,
body.auth-complete-page {
    font-family: Arial, sans-serif;
    background: #f6f7fb;
    margin: 0;
    min-height: 100vh;
    color: #4b5563;
}

body.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.auth-complete-page {
    padding: 24px;
    text-align: center;
}

.auth-card,
body.auth-page .card {
    background: #fff;
    width: min(92vw, 560px);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    text-align: center;
}

.auth-card h1,
body.auth-page .card h1 {
    margin-top: 0;
    font-size: 24px;
    color: #111827;
}

.auth-card p,
body.auth-page .card p {
    color: #4b5563;
    line-height: 1.5;
}

.auth-page .warn,
.auth-card .warn {
    color: #b45309;
    font-weight: 700;
}

.auth-page .mail,
.auth-card .mail {
    color: #111827;
    font-weight: 700;
    word-break: break-word;
}

.auth-page a.button,
.auth-page button.button,
.auth-card a.button,
.auth-card button.button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    margin-top: 12px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
}

.auth-page a.secondary,
.auth-card a.secondary {
    display: inline-block;
    color: #374151;
    text-decoration: none;
    margin-top: 16px;
    font-size: 13px;
}

.auth-page .small,
.auth-card .small {
    font-size: 12px;
    color: #6b7280;
    margin-top: 18px;
}

.auth-refresh-step {
    margin-top: 18px;
}

.auth-refresh-warning {
    margin-bottom: 0;
}

.auth-popup-help {
    display: block;
    font-size: 12px;
    margin-top: 14px;
    color: #b45309;
}

.auth-complete-page h3 {
    color: #111827;
}

.auth-complete-note {
    font-size: 12px;
    color: #6b7280;
}


/* ============================================================
   Usuários - Margem integrada
   ============================================================ */
.usuarios-margem-table {
    table-layout: fixed;
    width: 100%;
    min-width: 880px;
}

.usuarios-col-usuario {
    width: 50%;
}

.usuarios-col-pais {
    width: 35%;
}

.usuarios-col-margem {
    width: 20%;
}

.usuarios-col-actions {
    width: 25%;
}

.usuarios-margem-table .usuarios-margem-pais-cell,
.usuarios-margem-table .usuarios-margem-cell,
.usuarios-margem-table .usuarios-margem-pais-th,
.usuarios-margem-table .usuarios-margem-th {
    text-align: left;
    white-space: nowrap;
}

.usuarios-margem-table .margem-pais-select,
.usuarios-margem-table .margem-select {
    min-height: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: filter .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Usuários - tamanho do dropdown/botão de País na tabela.
   Para diminuir/aumentar, altere os três valores abaixo mantendo todos iguais. */
.usuarios-margem-table .margem-pais-select {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    background-color: var(--input-bg);
    color: var(--text);
}

.usuarios-margem-table .margem-select {
    width: 105px;
    min-width: 105px;
    max-width: 105px;
    background-color: var(--input-bg);
    color: var(--text);
}

body.theme-light .usuarios-margem-table .margem-pais-select.placeholder,
body.theme-light .usuarios-margem-table .margem-select.placeholder,
body.theme-light .usuarios-margem-table .margem-select:has(option[value=""]:checked) {
    background-color: #969899;
    border-color: #A8ABAD;
    color: #ffffff;
    font-weight: 400;
}

body.theme-dark .usuarios-margem-table .margem-pais-select.placeholder,
body.theme-dark .usuarios-margem-table .margem-select.placeholder,
body.theme-dark .usuarios-margem-table .margem-select:has(option[value=""]:checked) {
    background-color: #212121;
    border-color: #a7a7a7;
    color: #d4dce8;
    font-weight: 400;
}
.usuarios-margem-table .margem-pais-select option,
.usuarios-margem-table .margem-select option {
    background: var(--input-bg);
    color: var(--text);
    font-weight: 500;
}

.usuarios-margem-table .margem-pais-select:disabled,
.usuarios-margem-table .margem-select:disabled {
    opacity: .9;
    cursor: not-allowed;
}

.usuarios-margem-table-card {
    height: calc(100vh - 92px);
    min-height: calc(100vh - 92px);
    max-height: calc(100vh - 92px);
}

.usuarios-bottom-actions {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 8px;
}

.usuarios-bottom-actions .actions-left,
.usuarios-bottom-actions .actions-right {
    width: auto;
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
}

.usuarios-margem-table .actions-th,
.usuarios-margem-table .row-actions {
    padding-left: 12px;
    padding-right: 12px;
    text-align: right;
}


/* ============================================================
   Usuários - botão Salvar verde e espaçamento dos botões
   ============================================================ */
.usuarios-bottom-actions {
    gap: 9px;
}

.usuarios-bottom-actions .margem-save-btn {
    background-color: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-green) !important;
}

body.theme-dark .usuarios-bottom-actions .margem-save-btn {
    color: var(--btn-green) !important;
}

/* ============================================================
   Usuários - criar usuário com País e Margem obrigatórios
   ============================================================ */
.create-usuario-margem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
}

.create-usuario-margem-grid .margem-pais-select,
.create-usuario-margem-grid .margem-select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 38px;
    height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.create-usuario-margem-grid .margem-pais-select.placeholder,
.create-usuario-margem-grid .margem-select.placeholder,
.create-usuario-margem-grid .margem-select:has(option[value=""]:checked) {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: #A6A9AD;
    font-weight: 400;
}
.create-usuario-margem-grid .margem-pais-select:disabled,
.create-usuario-margem-grid .margem-select:disabled {
    opacity: .9;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .create-usuario-margem-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Usuários - correção final do botão Salvar verde
   ============================================================ */
body.theme-light .usuarios-bottom-actions .margem-save-btn,
body.theme-light .usuarios-bottom-actions button.margem-save-btn,
.usuarios-bottom-actions .margem-save-btn {
    background-color: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: #ffffff !important;
}

body.theme-dark .usuarios-bottom-actions .margem-save-btn,
body.theme-dark .usuarios-bottom-actions button.margem-save-btn {
    background-color: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--bg) !important;
}

/* ============================================================
   Substituições - edição direta na célula
   ============================================================ */
td[data-substituicao-editable-cell] {
    cursor: text;
}

td.substituicao-cell-editing {
    background-color: rgba(241, 189, 75, .22) !important;
    outline: 2px solid rgba(241, 189, 75, .72);
    outline-offset: -2px;
}

td.substituicao-cell-saving {
    opacity: .68;
}

td.substituicao-cell-error {
    background-color: rgba(146, 47, 37, .18) !important;
    outline: 2px solid var(--btn-red);
    outline-offset: -2px;
}

body.theme-dark td.substituicao-cell-editing {
    background-color: rgba(241, 189, 75, .16) !important;
}


/* ============================================================
   Substituições - salvar alterações e adicionar linha
   ============================================================ */
.substituicoes-bottom-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
    margin-bottom: 18px;
}

.substituicoes-bottom-actions button:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.substituicoes-feedback {
    margin: 0 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.substituicoes-feedback.success {
    color: var(--btn-green);
}

.substituicoes-feedback.warning {
    color: var(--btn-yellow);
}

.substituicoes-feedback.error {
    color: var(--btn-red);
}

tr.substituicao-new-row td {
    background-color: rgba(241, 189, 75, .10) !important;
}

td.substituicao-cell-dirty {
    box-shadow: inset 0 -3px 0 rgba(241, 189, 75, .72);
}

td.substituicao-readonly-cell {
    opacity: .82;
}

.substituicoes-saving td[data-substituicao-editable-cell] {
    pointer-events: none;
}


/* ============================================================
   Substituições - redimensionamento de colunas
   ============================================================ */
table[data-substituicoes-table] {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

table[data-substituicoes-table] th[data-column-name],
table[data-substituicoes-table] tbody td {
    min-width: 90px;
    overflow-wrap: anywhere;
}

table[data-substituicoes-table] th[data-column-name] {
    position: sticky;
    top: 0;
}

.substituicoes-column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.substituicoes-column-resizer:hover,
th.substituicoes-column-resizing .substituicoes-column-resizer {
    background: rgba(255, 255, 255, .34);
}

body.substituicoes-is-resizing-column {
    cursor: col-resize;
    user-select: none;
}


/* Mantém o Excluir na mesma posição das linhas que têm Editar + Excluir. */
.row-actions-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.row-actions-inline > button + button {
    margin-left: 0;
}

.row-actions-inline .row-action-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================
   AJUSTE - rodapé do sidebar fixo
   Mantém a linha, o botão Dark/Light e o sino de notificações
   presos no rodapé visível da sidebar, mesmo com muitas abas abertas.
   ============================================================ */
.sidebar {
    position: sticky !important;
    top: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 116px !important; /* reserva espaço para o rodapé fixo não cobrir as abas */
}

.theme-toggle-wrap,
.sidebar.collapsed .theme-toggle-wrap {
    position: fixed !important;
    left: 7px !important;
    bottom: 4px !important;           /* quanto menor, mais para baixo fica o conjunto */
    width: 236px !important;          /* 250px da sidebar - 14px de respiro lateral */
    margin-top: 0 !important;
    padding: 14px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
    background: var(--sidebar) !important;
    z-index: 80 !important;
}

.sidebar-footer-actions,
.sidebar.collapsed .sidebar-footer-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.sidebar-footer-actions .notification-toggle-btn,
.sidebar.collapsed .sidebar-footer-actions .notification-toggle-btn {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sidebar-footer-actions .theme-toggle-btn,
.sidebar.collapsed .sidebar-footer-actions .theme-toggle-btn {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 18px !important;
}

/* ============================================================
   AJUSTE - sidebar com rolagem sem barra visível
   Mantém a função de subir/descer ativa, mas esconde a barra.
   ============================================================ */
.sidebar {
    scrollbar-width: none !important;      /* Firefox */
    -ms-overflow-style: none !important;   /* Internet Explorer/Edge antigo */
}

.sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;              /* Chrome, Edge, Safari */
}

/* ============================================================
   AJUSTE - itens do sidebar mais para cima
   Sobe os grupos Usuários, RLS, Área, Câmbio e Substituições,
   mantendo o rodapé fixo e a rolagem sem barra visível.
   ============================================================ */
.sidebar,
.sidebar.collapsed {
    padding-top:60px !important;
}

.sidebar .nav-group-link {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

.sidebar .nav-group {
    margin-top: 0 !important;
    margin-bottom: 1px !important;
}

.sidebar .nav-group summary {
    margin-bottom: 6px !important;
}

.sidebar .nav-group form {
    margin: 4px 0 !important;
}



/* ============================================================
   AJUSTE - evita abas passando por trás do rodapé do sidebar
   Mantém o bloco Dark/Light + notificações fixo no rodapé,
   mas cria uma área segura e uma máscara visual acima dele.
   ============================================================ */
.sidebar,
.sidebar.collapsed {
    padding-bottom: 150px !important;
    scroll-padding-bottom: 150px !important;
}

.theme-toggle-wrap,
.sidebar.collapsed .theme-toggle-wrap {
    isolation: isolate !important;
    overflow: visible !important;
    z-index: 999 !important;
    box-shadow: 0 -14px 24px var(--sidebar) !important;
}

.theme-toggle-wrap::before,
.sidebar.collapsed .theme-toggle-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -30px !important;
    height: 30px !important;
    background: var(--sidebar) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ============================================================
   AJUSTE - coluna Ações menor nas abas de Substituições
   Reduz somente a largura da coluna Ações das tabelas marcadas
   com data-substituicoes-table, sem afetar as demais abas.
   ============================================================ */
table[data-substituicoes-table] .actions-th {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
    text-align: center !important;
}

table[data-substituicoes-table] tbody td.row-actions {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

table[data-substituicoes-table] tbody td.row-actions .danger {
    min-width: 56px !important;
}

/* ============================================================
   AJUSTE - coluna Ações de Substituições mais para o lado
   Empurra o título "Ações" e o botão "Excluir" mais para a direita,
   além de dar um pouco mais de largura para não cortar o texto.
   ============================================================ */
table[data-substituicoes-table] .actions-th {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    padding-left: 0 !important;
    padding-right: 7px !important;
    text-align: 7px !important;
}

table[data-substituicoes-table] .actions-th .th-content {
    justify-content: flex-end !important;
}

table[data-substituicoes-table] tbody td.row-actions {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: 14px !important;
    white-space: nowrap !important;
}

table[data-substituicoes-table] tbody td.row-actions .row-actions-inline {
    width: 100% !important;
    justify-content: flex-end !important;
}

table[data-substituicoes-table] tbody td.row-actions .danger {
    min-width: 56px !important;
}
/* ============================================================
   AJUSTE - Sidebar: linha acima do rodapé e bloco fixo proporcional
   Não altera tamanho do botão Dark/Light nem do sino; ajusta apenas
   o contêiner fixo para ficar justo ao tamanho atual dos botões.
   ============================================================ */
.theme-toggle-wrap {
    position: fixed !important;
    left: 7px !important;
    bottom: 4px !important;
    width: 236px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 0 4px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .22) !important;
    background-color: var(--sidebar) !important;
    z-index: 3000 !important;
}

.theme-toggle-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -14px !important;
    height: 14px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--sidebar) 90%) !important;
    pointer-events: none !important;
}

.sidebar-footer-actions {
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
}

/* Reserva só o espaço necessário para o rodapé fixo, sem deixar um bloco grande. */
.sidebar,
.sidebar.collapsed {
    padding-bottom: 96px !important;
    scroll-padding-bottom: 96px !important;
}

/* Mantém o mesmo comportamento caso a classe collapsed ainda exista no HTML. */
.sidebar.collapsed .theme-toggle-wrap {
    width: 236px !important;
    left: 7px !important;
    padding: 7px 0 4px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .22) !important;
}
/* ============================================================
   AJUSTE - Sidebar: rodapé fixo colado na margem inferior
   Mantém o tamanho original dos botões e encosta o bloco na borda
   inferior da tela.
   ============================================================ */
.theme-toggle-wrap,
.sidebar.collapsed .theme-toggle-wrap {
    bottom: 0 !important;
}
/* ============================================================
   AJUSTE - Sidebar: linha divisória acima do bloco fixo
   Mantém o rodapé colado na margem inferior e recoloca a linha
   que separa os botões do restante do sidebar.
   ============================================================ */
.theme-toggle-wrap,
.sidebar.collapsed .theme-toggle-wrap {
    bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .28) !important;
}
/* ============================================================
   AJUSTE FINAL - Sidebar: linha visível acima do bloco fixo
   A linha anterior estava sendo mascarada pelo bloco/gradiente do rodapé.
   Este ajuste desenha a divisória com ::after por cima do fundo, sem
   alterar o tamanho do sino nem do botão Dark/Light.
   ============================================================ */
.theme-toggle-wrap,
.sidebar.collapsed .theme-toggle-wrap {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 250px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 7px 4px 7px !important;
    border-top: 0 !important;
    background: var(--sidebar) !important;
    isolation: isolate !important;
    overflow: visible !important;
    z-index: 3000 !important;
}

.sidebar-footer-actions,
.sidebar.collapsed .sidebar-footer-actions {
    transform: translateY(-6px);
}

.theme-toggle-wrap::before,
.sidebar.collapsed .theme-toggle-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -16px !important;
    height: 16px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--sidebar) 90%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Esta é a linha divisória visível. */
.theme-toggle-wrap::after,
.sidebar.collapsed .theme-toggle-wrap::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    right: 7px !important;
    top: -9px !important;
    height: 1px !important;
    background: rgba(255, 255, 255, .55) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.sidebar-footer-actions,
.sidebar.collapsed .sidebar-footer-actions {
    position: relative !important;
    z-index: 3 !important;
}

/* ============================================================
   AJUSTE - Substituições: remover scroll vertical da página
   O scroll vinha da altura global .rls-table-card somada ao padding
   da .main e ao bloco de botões abaixo da tabela.
   Nesta aba, a tabela fica um pouco menor para caber tudo na viewport;
   o scroll continua apenas dentro da tabela quando houver muitas linhas.
   ============================================================ */
.substituicoes-root {
    min-height: 0 !important;
}

.substituicoes-root .rls-table-card {
    height: calc(105vh - 150px) !important;
    min-height: calc(105vh - 150px) !important;
    max-height: calc(105vh - 150px) !important;
}

.substituicoes-root .substituicoes-bottom-actions {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}
/* ============================================================
   AJUSTE - Substituições: ícone visual de coluna editável
   Mostra um pequeno ícone ao lado do nome de cada coluna para indicar
   que as células dessa tabela podem ser editadas.
   ============================================================ */
table[data-substituicoes-table] thead th .th-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

table[data-substituicoes-table] thead th.actions-th .th-content,
table[data-substituicoes-table] thead th[aria-label="Ações"] .th-content {
    gap: 0 !important;
}

.substituicoes-editable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: .92;
}

.substituicoes-editable-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

table[data-substituicoes-table] thead th.actions-th .substituicoes-editable-icon {
    display: none !important;
}

body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-dark .substituicoes-bottom-actions .primary[data-substituicoes-save],
body.theme-dark button.primary.small[data-substituicoes-save] {
    color: var(--bg) !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-editing,
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty,
body.theme-dark table[data-substituicoes-table] td[contenteditable="true"]:focus {
    background-color: #454545 !important;
    color: #d4dce8 !important;
    outline: 2px solid #a7a7a7 !important;
}
.usuarios-bottom-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important;
}

.usuarios-bottom-actions .actions-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.usuarios-bottom-actions .actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.usuarios-bottom-actions .margem-save-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.usuarios-bottom-actions .link-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ============================================================
   Substituições - botão de Download
   ============================================================ */
.substituicoes-bottom-actions .substituicoes-download-link {
    min-height: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    background: var(--btn-green);
    border: 1px solid var(--btn-green);
    color: var(--btn-text);
    margin-left: auto;
}

body.theme-dark .substituicoes-bottom-actions .substituicoes-download-link {
    color: var(--bg);
}

.substituicoes-bottom-actions .substituicoes-download-link:hover {
    filter: brightness(.95);
}

/* ============================================================
   Substituições - célula editada no tema escuro
   Mantém apenas a barrinha inferior cinza após sair da edição.
   O laranja fica restrito ao tema claro.
   ============================================================ */
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty,
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:not(:focus),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(:focus) {
    background-color: var(--row-bg) !important;
    outline: 0 !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:focus,
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:focus,
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-editing,
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-editing {
    background-color: #454545 !important;
    color: #d4dce8 !important;
    outline: 2px solid #a7a7a7 !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty,
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty {
    box-shadow: inset 0 -3px 0 rgba(241, 189, 75, .72) !important;
}

/* ============================================================
   Substituições - filtros por coluna
   ============================================================ */
.substituicoes-table-filter summary {
    min-height: 24px;
    padding: 0 7px;
    font-size: 10.8px;
}

.substituicoes-table-filter .filter-menu {
    width: min(210px, 70vw);
}

.substituicoes-table-filter .filter-select,
.substituicoes-table-filter .filter-input {
    font-size: 12px;
}

.substituicoes-table-filter .filter-input {
    min-height: 32px;
    padding: 5px 8px;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    outline: none;
}

.substituicoes-table-filter .filter-input:focus {
    border-color: var(--gold-dark);
}

.substituicoes-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 8px;
}

.substituicoes-filter-actions .small {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
}


/* ============================================================
   AJUSTE - Substituições: largura das colunas com filtros
   Evita que os títulos e botões "Filtrar ..." quebrem por falta de espaço.
   A tabela pode rolar horizontalmente quando houver muitas colunas.
   ============================================================ */
table[data-substituicoes-table] {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

table[data-substituicoes-table] th[data-column-name],
table[data-substituicoes-table] tbody td {
    min-width: 150px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

table[data-substituicoes-table] thead th[data-column-name] {
    white-space: nowrap !important;
}

table[data-substituicoes-table] thead th .th-content {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: max-content !important;
    min-width: 100% !important;
    white-space: nowrap !important;
}

table[data-substituicoes-table] thead th .th-content > span:first-child,
table[data-substituicoes-table] .substituicoes-table-filter summary {
    white-space: nowrap !important;
}

/* Colunas menores */
table[data-substituicoes-table] th[data-column-name="dado_sist"],
table[data-substituicoes-table] th[data-column-name="dado_origem"],
table[data-substituicoes-table] th[data-column-name="dado_produtoBU"],
table[data-substituicoes-table] th[data-column-name="dado_produtoBU1"],
table[data-substituicoes-table] th[data-column-name="dado_produtoBU2"],
table[data-substituicoes-table] th[data-column-name="dado_geoPais"],
table[data-substituicoes-table] th[data-column-name="dado_geoRegiao"],
table[data-substituicoes-table] th[data-column-name="dado_geoEstadoB"],
table[data-substituicoes-table] th[data-column-name="dado_geoCidade"],
table[data-substituicoes-table] th[data-column-name="dado_geoLon"],
table[data-substituicoes-table] th[data-column-name="dado_geoLat"] {
    min-width: 165px !important;
}

/* Colunas médias */
table[data-substituicoes-table] th[data-column-name="dado_produtoID"],
table[data-substituicoes-table] th[data-column-name="dado_produtoSeg"],
table[data-substituicoes-table] th[data-column-name="dado_produtoSeg2"],
table[data-substituicoes-table] th[data-column-name="dado_clienteID"],
table[data-substituicoes-table] th[data-column-name="dado_clienteSeg"],
table[data-substituicoes-table] th[data-column-name="dado_clienteArea"],
table[data-substituicoes-table] th[data-column-name="dado_vendedorC"],
table[data-substituicoes-table] th[data-column-name="dado_clienteCS"],
table[data-substituicoes-table] th[data-column-name="dado_geoEstadoA"],
table[data-substituicoes-table] th[data-column-name="nickVendC"],
table[data-substituicoes-table] th[data-column-name="nickGeo"] {
    min-width: 205px !important;
}

/* Colunas longas */
table[data-substituicoes-table] th[data-column-name="dado_produtoNome"],
table[data-substituicoes-table] th[data-column-name="dado_produtoGrupo"],
table[data-substituicoes-table] th[data-column-name="dado_produtoGrupo1"],
table[data-substituicoes-table] th[data-column-name="dado_produtoGrupo2"],
table[data-substituicoes-table] th[data-column-name="dado_clienteNome"],
table[data-substituicoes-table] th[data-column-name="dado_clienteGrupo"],
table[data-substituicoes-table] th[data-column-name="dado_clienteSeg1"],
table[data-substituicoes-table] th[data-column-name="dado_clienteSeg2"] {
    min-width: 245px !important;
}

/* Coluna de ações continua compacta */
table[data-substituicoes-table] .actions-th,
table[data-substituicoes-table] tbody td.row-actions {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* ============================================================
   AJUSTE - Substituições: filtro com dropdown + pesquisa livre
   Ao abrir o filtro aparece só o campo de busca; ao clicar nele, a lista abre.
   ============================================================ */
.substituicoes-table-filter .substituicoes-filter-menu {
    width: min(210px, 70vw);
}

.substituicoes-table-filter .substituicoes-filter-search {
    margin-bottom: 0;
}

.substituicoes-table-filter .substituicoes-filter-menu.substituicoes-filter-list-open .substituicoes-filter-search {
    margin-bottom: 7px;
}

.substituicoes-table-filter [data-substituicoes-filter-select] {
    width: 100%;
    display: none;
    min-height: 132px;
    max-height: min(590px, 72vh);
    overflow-y: auto;
}

.substituicoes-table-filter .substituicoes-filter-menu.substituicoes-filter-list-open [data-substituicoes-filter-select] {
    display: block;
}

.substituicoes-table-filter [data-substituicoes-filter-select] option[hidden] {
    display: none;
}


/* ============================================================
   AJUSTE - filtros pesquisáveis: lista sem recuo e scroll menor
   ============================================================ */
.table-filter.substituicoes-table-filter .substituicoes-filter-menu {
    padding: 6px !important;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select] {
    padding: 0 2px !important;
    scrollbar-width: thin;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select] option {
    padding: 2px 3px 2px 2px !important;
    margin-left: 0 !important;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar {
    width: 6px;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar-track {
    background: transparent;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .72);
    border-radius: 999px;
}

/* ============================================================
   Ajustes solicitados - modo escuro e alerta
   ============================================================ */
body.theme-dark .sidebar .nav-group > summary,
body.theme-dark .sidebar .nav-group-link,
body.theme-dark .sidebar .nav-group-link.active,
body.theme-dark .sidebar .nav-group-link.active:not(:hover),
html[data-theme="dark"] body .sidebar .nav-group > summary,
html[data-theme="dark"] body .sidebar .nav-group-link,
html[data-theme="dark"] body .sidebar .nav-group-link.active,
html[data-theme="dark"] body .sidebar .nav-group-link.active:not(:hover) {
    color: #E9C57D !important;
}

body.theme-dark .sidebar .nav-group > summary::after,
html[data-theme="dark"] body .sidebar .nav-group > summary::after {
    color: #E9C57D !important;
}

body.theme-dark .geolocalizacao-table tr.substituicao-new-row td,
html[data-theme="dark"] body .geolocalizacao-table tr.substituicao-new-row td {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
}

body.theme-dark .geolocalizacao-table tr.substituicao-new-row td.substituicao-cell-dirty,
html[data-theme="dark"] body .geolocalizacao-table tr.substituicao-new-row td.substituicao-cell-dirty {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

body.theme-light .geolocalizacao-table tr.substituicao-new-row td,
html[data-theme="light"] body .geolocalizacao-table tr.substituicao-new-row td {
    background-color: rgba(241, 189, 75, .10) !important;
}

/* ============================================================
   Ajustes solicitados - lista dos filtros pesquisáveis
   ============================================================ */
.table-filter.substituicoes-table-filter .substituicoes-filter-menu {
    padding: 6px 4px !important;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select] {
    padding-left: 0 !important;
    padding-right: 1px !important;
    text-indent: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .72) transparent;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select] option {
    padding-left: 0 !important;
    padding-right: 2px !important;
    margin-left: 4px !important;
    text-indent: 0 !important;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar {
    width: 4px;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar-track {
    background: transparent;
}

.table-filter.substituicoes-table-filter [data-substituicoes-filter-select]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .72);
    border-radius: 999px;
}


/* ============================================================
   CORREÇÃO FINAL - títulos principais do sidebar no modo escuro
   Força exatamente #e9c57d em USUÁRIOS, RLS, ÁREA, CÂMBIO e SUBSTITUIÇÕES.
   Não altera as subpáginas (.nav-btn).
   ============================================================ */
body.theme-dark .sidebar {
    --sidebar-title-dark: #e9c57d;
}

body.theme-dark .sidebar .nav-group > summary,
body.theme-dark .sidebar .nav-group > summary:hover,
body.theme-dark .sidebar .nav-group[open] > summary,
body.theme-dark .sidebar .nav-group[open] > summary:hover,
body.theme-dark .sidebar .nav-group-link,
body.theme-dark .sidebar .nav-group-link:hover,
body.theme-dark .sidebar .nav-group-link.active,
body.theme-dark .sidebar .nav-group-link.active:hover,
body.theme-dark .sidebar .nav-group-link.active:not(:hover),
html[data-theme="dark"] body .sidebar .nav-group > summary,
html[data-theme="dark"] body .sidebar .nav-group > summary:hover,
html[data-theme="dark"] body .sidebar .nav-group[open] > summary,
html[data-theme="dark"] body .sidebar .nav-group[open] > summary:hover,
html[data-theme="dark"] body .sidebar .nav-group-link,
html[data-theme="dark"] body .sidebar .nav-group-link:hover,
html[data-theme="dark"] body .sidebar .nav-group-link.active,
html[data-theme="dark"] body .sidebar .nav-group-link.active:hover,
html[data-theme="dark"] body .sidebar .nav-group-link.active:not(:hover) {
    color: #e9c57d !important;
    -webkit-text-fill-color: #e9c57d !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}

body.theme-dark .sidebar .nav-group > summary::after,
body.theme-dark .sidebar .nav-group > summary:hover::after,
body.theme-dark .sidebar .nav-group[open] > summary::after,
html[data-theme="dark"] body .sidebar .nav-group > summary::after,
html[data-theme="dark"] body .sidebar .nav-group > summary:hover::after,
html[data-theme="dark"] body .sidebar .nav-group[open] > summary::after {
    color: #e9c57d !important;
    -webkit-text-fill-color: #e9c57d !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}

/* ============================================================
   AJUSTES - Geolocalização: coluna Nick e largura do filtro
   ============================================================ */
.geolocalizacao-table th[data-column-name="nickGeo"],
.geolocalizacao-table tbody td:first-child {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

.geolocalizacao-table .substituicoes-table-filter .substituicoes-filter-menu {
    width: min(210px, 70vw) !important;
}

.geolocalizacao-table .substituicoes-table-filter .substituicoes-filter-search,
.geolocalizacao-table .substituicoes-table-filter [data-substituicoes-filter-select] {
    width: 100% !important;
}

/* ============================================================
   Geolocalização - coluna Erro e linhas com erro
   ============================================================ */
.geolocalizacao-table {
    --geolocalizacao-error-row-bg: #EDEDED;
}

body.theme-light .geolocalizacao-table,
html[data-theme="light"] body .geolocalizacao-table {
    --geolocalizacao-error-row-bg: #EDEDED;
}

body.theme-dark .geolocalizacao-table,
html[data-theme="dark"] body .geolocalizacao-table {
    --geolocalizacao-error-row-bg: #454545;
}

table.geolocalizacao-table[data-substituicoes-table] tbody tr.geolocalizacao-row-error > td,
table.geolocalizacao-table[data-substituicoes-table] tbody tr[data-geolocalizacao-erro="true"] > td,
table.geolocalizacao-table[data-substituicoes-table] tbody td.geolocalizacao-row-error-cell {
    background: var(--geolocalizacao-error-row-bg, #EDEDED) !important;
    background-color: var(--geolocalizacao-error-row-bg, #EDEDED) !important;
}

.geolocalizacao-error-cell {
    font-weight: 600;
    color: var(--btn-red);
    white-space: nowrap;
}

.geolocalizacao-error-filter .geolocalizacao-error-filter-menu {
    min-width: 145px;
    width: min(210px, 70vw) !important;
}

.geolocalizacao-error-filter-select {
    min-height: 32px;
    font-size: 12px;
}

.geolocalizacao-error-filter-submit {
    width: 100%;
    min-height: 30px;
    margin-top: 7px;
    font-size: 11px;
}



/* ============================================================
   Filtros ativos - botão X para limpar filtro individual
   ============================================================ */
.table-filter.has-active-filter > summary {
    gap: 6px;
    padding-right: 5px;
}

.filter-clear-x {
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #922f25;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

/* O X só aparece quando o filtro correspondente estiver ativo. */
.filter-clear-x[hidden] {
    display: none !important;
}

.filter-clear-x:hover {
    filter: brightness(.95);
}

body.theme-dark .filter-clear-x,
html[data-theme="dark"] body .filter-clear-x {
    background: #ec9b94;
    color: #212121;
    -webkit-text-fill-color: #212121;
}


/* ============================================================
   Geolocalização - ajuste de altura da tabela
   ============================================================ */
.geolocalizacao-table-card {
    max-height: 230px !important;
}

/* ============================================================
   Geolocalização - botão Detalhamento
   ============================================================ */
.geolocalizacao-top-actions {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 10px 0;
}

.geolocalizacao-detalhamento-button {
    width: fit-content;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-left: 12px;
    padding-right: 14px;
    white-space: nowrap;
}

.geolocalizacao-detalhamento-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    color: currentColor;
}

.geolocalizacao-detalhamento-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
}

.geolocalizacao-detalhamento-dialog {
    width: min(920px, 92vw);
}

.geolocalizacao-detalhamento-dialog-form {
    width: 100%;
}

.geolocalizacao-detalhamento-table-card {
    width: 100%;
    min-height: 280px;
    max-height: 55vh;
    margin-bottom: 0;
}

.geolocalizacao-detalhamento-table-space {
    min-height: 280px;
    background: var(--row-bg);
    border: 1px dashed var(--input-border);
    border-radius: 10px;
    margin: 12px;
}


/* ============================================================
   Geolocalização - altura real da tabela
   ============================================================
   A tabela herda height/min-height/max-height de .rls-table-card.
   Por isso, alterar só max-height não reduz a altura.
   Para ajustar manualmente, altere os três valores abaixo mantendo iguais.
   ============================================================ */
.rls-table-card.geolocalizacao-table-card,
.geolocalizacao-table-card.rls-table-card,
div.table-card.rls-table-card.geolocalizacao-table-card {
    height: 765px !important;
    min-height: 765px !important;
    max-height: 765px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* ============================================================
   Substituições - nova linha no modo escuro
   Mantém o destaque amarelo/laranja somente no tema claro.
   Em Produto e Cliente, a linha adicionada fica cinza no modo escuro,
   igual ao comportamento da Geolocalização.
   ============================================================ */
body.theme-dark .substituicoes-root[data-page-name^="substituicoes_produto"] table[data-substituicoes-table] tr.substituicao-new-row > td,
body.theme-dark .substituicoes-root[data-page-name^="substituicoes_cliente"] table[data-substituicoes-table] tr.substituicao-new-row > td,
html[data-theme="dark"] body .substituicoes-root[data-page-name^="substituicoes_produto"] table[data-substituicoes-table] tr.substituicao-new-row > td,
html[data-theme="dark"] body .substituicoes-root[data-page-name^="substituicoes_cliente"] table[data-substituicoes-table] tr.substituicao-new-row > td {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
}

body.theme-dark .substituicoes-root[data-page-name^="substituicoes_produto"] table[data-substituicoes-table] tr.substituicao-new-row > td.substituicao-cell-dirty,
body.theme-dark .substituicoes-root[data-page-name^="substituicoes_cliente"] table[data-substituicoes-table] tr.substituicao-new-row > td.substituicao-cell-dirty,
html[data-theme="dark"] body .substituicoes-root[data-page-name^="substituicoes_produto"] table[data-substituicoes-table] tr.substituicao-new-row > td.substituicao-cell-dirty,
html[data-theme="dark"] body .substituicoes-root[data-page-name^="substituicoes_cliente"] table[data-substituicoes-table] tr.substituicao-new-row > td.substituicao-cell-dirty {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

/* ============================================================
   Geolocalização - tamanho específico do filtro Erro
   ============================================================ */
.geolocalizacao-table .geolocalizacao-error-th .geolocalizacao-error-filter-menu,
.geolocalizacao-table .geolocalizacao-error-filter .geolocalizacao-error-filter-menu {
    width: min(210px, 70vw) !important;
}

/* ============================================================
   Sidebar - Acesso com cor cinza/branca igual aos outros itens
   ============================================================ */
.sidebar .nav-group-link,
.sidebar .nav-group-link:hover,
.sidebar .nav-group-link.active,
.sidebar .nav-group-link.active:hover,
.sidebar .nav-group-link.active:not(:hover),
body.theme-light .sidebar .nav-group-link,
body.theme-light .sidebar .nav-group-link:hover,
body.theme-light .sidebar .nav-group-link.active,
body.theme-light .sidebar .nav-group-link.active:hover,
body.theme-light .sidebar .nav-group-link.active:not(:hover),
body.theme-dark .sidebar .nav-group-link,
body.theme-dark .sidebar .nav-group-link:hover,
body.theme-dark .sidebar .nav-group-link.active,
body.theme-dark .sidebar .nav-group-link.active:hover,
body.theme-dark .sidebar .nav-group-link.active:not(:hover),
html[data-theme="light"] body .sidebar .nav-group-link,
html[data-theme="light"] body .sidebar .nav-group-link:hover,
html[data-theme="light"] body .sidebar .nav-group-link.active,
html[data-theme="light"] body .sidebar .nav-group-link.active:hover,
html[data-theme="light"] body .sidebar .nav-group-link.active:not(:hover),
html[data-theme="dark"] body .sidebar .nav-group-link,
html[data-theme="dark"] body .sidebar .nav-group-link:hover,
html[data-theme="dark"] body .sidebar .nav-group-link.active,
html[data-theme="dark"] body .sidebar .nav-group-link.active:hover,
html[data-theme="dark"] body .sidebar .nav-group-link.active:not(:hover) {
    color: var(--sidebar-text) !important;
    -webkit-text-fill-color: var(--sidebar-text) !important;
}

/* ============================================================
   Acesso - e-mail abaixo do nome na tabela
   ============================================================ */
.rls-usuarios-table tbody td .usuario-sufixo {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 400;
}

/* ============================================================
   Acesso - aproximar colunas País e Margem do nome
   ============================================================ */
.usuarios-margem-table {
    table-layout: fixed;
}

.usuarios-col-usuario {
    width: 44% !important;
}

.usuarios-col-pais {
    width: 18% !important;
}

.usuarios-col-margem {
    width: 16% !important;
}

.usuarios-col-actions {
    width: 22% !important;
}

.usuarios-margem-table .usuarios-margem-pais-th,
.usuarios-margem-table .usuarios-margem-pais-cell,
.usuarios-margem-table .usuarios-margem-th,
.usuarios-margem-table .usuarios-margem-cell {
    padding-left: 8px;
    padding-right: 8px;
}

/* ============================================================
   Acesso - coluna RLS após Margem
   ============================================================ */
.usuarios-col-usuario {
    width: 30% !important;
}

.usuarios-col-pais {
    width: 14% !important;
}

.usuarios-col-margem {
    width: 12% !important;
}

.usuarios-col-rls {
    width: 32% !important;
}

.usuarios-col-actions {
    width: 12% !important;
}

.usuarios-margem-table .usuarios-rls-th,
.usuarios-margem-table .usuarios-rls-cell {
    padding-left: 8px;
    padding-right: 8px;
}

.acesso-rls-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.acesso-rls-controls [data-rls-control] {
    display: inline-flex;
    align-items: center;
}

.acesso-rls-controls [data-rls-control][hidden] {
    display: none !important;
}

.acesso-rls-select {
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.acesso-rls-tipo-select {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
}

.acesso-rls-geral-select {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    text-align: center;
}

.acesso-rls-area-origem-select,
.acesso-rls-area-select {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
}

.acesso-rls-select.placeholder,
.acesso-rls-select:has(option[value=""]:checked) {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

body.theme-light .acesso-rls-select:not(.placeholder):not(:has(option[value=""]:checked)) {
    background-color: #88651e !important;
    border-color: #88651e !important;
    color: #ffffff !important;
}

body.theme-dark .acesso-rls-select:not(.placeholder):not(:has(option[value=""]:checked)) {
    background-color: #e9c57d !important;
    border-color: #e9c57d !important;
    color: #454545 !important;
}

.acesso-rls-select option {
    background: var(--input-bg);
    color: var(--text);
}

@media (max-width: 1100px) {
    .usuarios-margem-table {
        min-width: 980px;
    }
}

/* ============================================================
   Acesso - RLS com o mesmo modelo visual do dropdown País
   ============================================================ */
.usuarios-margem-table .acesso-rls-select {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: filter .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

.usuarios-margem-table .acesso-rls-select.placeholder,
.usuarios-margem-table .acesso-rls-select:has(option[value=""]:checked) {
    font-weight: 400 !important;
}

body.theme-light .usuarios-margem-table .acesso-rls-select.placeholder,
body.theme-light .usuarios-margem-table .acesso-rls-select:has(option[value=""]:checked) {
    background-color: #969899 !important;
    border-color: #A8ABAD !important;
    color: #ffffff !important;
}

body.theme-dark .usuarios-margem-table .acesso-rls-select.placeholder,
body.theme-dark .usuarios-margem-table .acesso-rls-select:has(option[value=""]:checked) {
    background-color: #212121 !important;
    border-color: #a7a7a7 !important;
    color: #d4dce8 !important;
}

.usuarios-margem-table .acesso-rls-select option {
    background: var(--input-bg) !important;
    color: var(--text) !important;
    font-weight: 500 !important;
}

.usuarios-margem-table .acesso-rls-select:disabled {
    opacity: .9 !important;
    cursor: not-allowed !important;
}

.usuarios-margem-table .acesso-rls-select:hover {
    filter: brightness(.95);
}

/* Mantém os dropdowns da coluna RLS no mesmo padrão de largura do País. */
.usuarios-margem-table .acesso-rls-tipo-select,
.usuarios-margem-table .acesso-rls-origem-select,
.usuarios-margem-table .acesso-rls-vendedor-select,
.usuarios-margem-table .acesso-rls-area-origem-select,
.usuarios-margem-table .acesso-rls-area-select {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}

.usuarios-margem-table .acesso-rls-geral-select {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    text-align: center;
}

/* ============================================================
   Acesso - multiseleção da coluna RLS (País e Vendedor)
   ============================================================ */
.acesso-rls-multiselect {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.acesso-rls-multi-details {
    position: relative;
    width: 100%;
}

.acesso-rls-multi-summary {
    width: 100%;
    min-height: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 6px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--text);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acesso-rls-multi-summary::-webkit-details-marker {
    display: none;
}

.acesso-rls-multi-summary::after {
    content: "⌄";
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
}

.acesso-rls-multiselect.placeholder .acesso-rls-multi-summary {
    font-weight: 400;
}

body.theme-light .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary {
    background-color: #969899;
    border-color: #A8ABAD;
    color: #ffffff;
}

body.theme-dark .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary {
    background-color: #212121;
    border-color: #a7a7a7;
    color: #d4dce8;
}

body.theme-light .acesso-rls-multiselect:not(.placeholder) .acesso-rls-multi-summary,
body.theme-dark .acesso-rls-multiselect:not(.placeholder) .acesso-rls-multi-summary {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

.acesso-rls-multi-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 260;
    width: min(230px, 70vw);
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
}

.acesso-rls-multi-option {
    min-height: 26px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 7px;
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.acesso-rls-multi-option:hover {
    background-color: var(--input-bg);
}

.acesso-rls-multi-option.inactive {
    background-color: var(--inactive-bg);
    color: var(--inactive-fg);
}

.acesso-rls-multi-option input[type="checkbox"] {
    width: 13px;
    min-width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0;
    padding: 0;
}

.acesso-rls-multi-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Acesso - separar RLS e Visualização
   ============================================================ */
.usuarios-col-usuario {
    width: 28% !important;
}

.usuarios-col-pais {
    width: 12% !important;
}

.usuarios-col-margem {
    width: 10% !important;
}

.usuarios-col-rls {
    width: 10% !important;
}

.usuarios-col-visualizacao {
    width: 28% !important;
}

.usuarios-col-actions {
    width: 12% !important;
}

.usuarios-margem-table .usuarios-rls-th,
.usuarios-margem-table .usuarios-rls-cell,
.usuarios-margem-table .usuarios-rls-visualizacao-th,
.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    padding-left: 8px;
    padding-right: 8px;
}

.usuarios-margem-table .usuarios-rls-th .th-content,
.usuarios-margem-table .usuarios-rls-cell {
    text-align: center;
}

.usuarios-margem-table .usuarios-rls-th .th-content,
.usuarios-margem-table .usuarios-rls-cell .acesso-rls-controls {
    justify-content: center;
}

.usuarios-margem-table .usuarios-rls-visualizacao-th .th-content,
.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    text-align: left;
}

.acesso-rls-visualizacao-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.acesso-rls-visualizacao-controls [data-rls-control] {
    display: inline-flex;
    align-items: center;
}

.acesso-rls-visualizacao-controls [data-rls-control][hidden] {
    display: none !important;
}

.acesso-rls-visualizacao-cell .acesso-rls-multiselect {
    width: 185px;
    min-width: 185px;
    max-width: 185px;
}


/* Área dentro da coluna Visualização: área + países no mesmo box */
.acesso-rls-visualizacao-cell .acesso-rls-area-combo {
    width: 215px;
    min-width: 215px;
    max-width: 215px;
}

.acesso-rls-area-details {
    position: relative;
    width: 100%;
}

.acesso-rls-area-combo-menu {
    width: min(285px, 70vw);
    max-height: 260px;
}

.acesso-rls-area-option {
    display: block;
    border-radius: 8px;
}

.acesso-rls-area-option.has-selected,
.acesso-rls-area-option.is-active {
    background-color: var(--input-bg);
}

.acesso-rls-area-trigger {
    width: 100%;
    min-height: 27px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 6px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.acesso-rls-area-trigger:hover {
    background-color: var(--input-bg);
}

.acesso-rls-area-trigger::after {
    content: "⌄";
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
}

.acesso-rls-area-option.is-active .acesso-rls-area-trigger::after,
.acesso-rls-area-option.has-selected .acesso-rls-area-trigger::after {
    transform: rotate(180deg);
}

.acesso-rls-area-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acesso-rls-area-country-list {
    margin: 0 0 5px 14px;
    padding: 3px 0 3px 7px;
    border-left: 1px solid var(--input-border);
}

.acesso-rls-area-country-title {
    padding: 3px 6px 4px 6px;
    color: var(--detail-text);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}

.acesso-rls-area-country-option {
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 1100px) {
    .usuarios-margem-table {
        min-width: 1080px;
    }
}


/* ============================================================
   Acesso - ajustes finais RLS / Visualização
   ============================================================ */
/* Mantém RLS e Visualização mais à direita e com respiro entre as duas colunas. */
.usuarios-col-usuario {
    width: 26% !important;
}

.usuarios-col-pais {
    width: 11% !important;
}

.usuarios-col-margem {
    width: 11% !important;
}

.usuarios-col-rls {
    width: 13% !important;
}

.usuarios-col-visualizacao {
    width: 29% !important;
}

.usuarios-col-actions {
    width: 10% !important;
}

.usuarios-margem-table .usuarios-rls-th,
.usuarios-margem-table .usuarios-rls-cell {
    padding-left: 28px !important;
    padding-right: 18px !important;
}

.usuarios-margem-table .usuarios-rls-visualizacao-th,
.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    padding-left: 28px !important;
    padding-right: 10px !important;
}

/* RLS deve seguir o mesmo visual neutro da Visualização, sem cor de status. */
.usuarios-margem-table .acesso-rls-select,
.usuarios-margem-table .acesso-rls-select:not(.placeholder):not(:has(option[value=""]:checked)),
.usuarios-margem-table .acesso-rls-select:disabled,
body.theme-light .usuarios-margem-table .acesso-rls-select,
body.theme-light .usuarios-margem-table .acesso-rls-select:not(.placeholder):not(:has(option[value=""]:checked)),
body.theme-light .usuarios-margem-table .acesso-rls-select:disabled,
body.theme-dark .usuarios-margem-table .acesso-rls-select,
body.theme-dark .usuarios-margem-table .acesso-rls-select:not(.placeholder):not(:has(option[value=""]:checked)),
body.theme-dark .usuarios-margem-table .acesso-rls-select:disabled {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
    opacity: 1 !important;
}

body.theme-light .usuarios-margem-table .acesso-rls-select.placeholder,
body.theme-light .usuarios-margem-table .acesso-rls-select:has(option[value=""]:checked) {
    background-color: #969899 !important;
    border-color: #A8ABAD !important;
    color: #ffffff !important;
}

body.theme-dark .usuarios-margem-table .acesso-rls-select.placeholder,
body.theme-dark .usuarios-margem-table .acesso-rls-select:has(option[value=""]:checked) {
    background-color: #212121 !important;
    border-color: #a7a7a7 !important;
    color: #d4dce8 !important;
}

/* Visualização pode quebrar linha quando tiver muitos nomes/países. */
.acesso-rls-visualizacao-cell .acesso-rls-multi-summary {
    height: auto !important;
    min-height: 22px !important;
    align-items: flex-start !important;
    padding: 4px 6px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Setas iguais nos boxes customizados de Visualização. */
.acesso-rls-multi-summary::after,
.acesso-rls-area-trigger::after {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: 2px !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform .15s ease !important;
}

.acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.acesso-rls-area-option.is-active .acesso-rls-area-trigger::after {
    transform: rotate(-135deg) !important;
    margin-top: 6px !important;
}

/* Área: a linha de área agora também tem quadradinho de seleção visual. */
.acesso-rls-area-trigger {
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
}

.acesso-rls-area-checkbox {
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    margin: 0 7px 0 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    flex: 0 0 auto !important;
}

.acesso-rls-area-trigger span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.acesso-rls-area-country-list[hidden] {
    display: none !important;
}

@media (max-width: 1100px) {
    .usuarios-margem-table {
        min-width: 1140px;
    }
}

/* ============================================================
   Acesso - Visualização mais à direita e tamanho padronizado
   ============================================================ */
/* Mantém as colunas iniciais compactas para a Visualização nascer mais à direita. */
.usuarios-col-usuario {
    width: 25% !important;
}

.usuarios-col-pais {
    width: 20% !important;
}

.usuarios-col-margem {
    width: 20% !important;
}

.usuarios-col-rls {
    width: 10% !important;
}

.usuarios-col-visualizacao {
    width: 18% !important;
}

.usuarios-col-actions {
    width: 10% !important;
}

/* Empurra somente o conteúdo de Visualização para a direita, sem afetar as demais colunas. */
.usuarios-margem-table .usuarios-rls-visualizacao-th,
.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    padding-left: 56px !important;
    padding-right: 10px !important;
}

.usuarios-margem-table .usuarios-rls-visualizacao-th .th-content,
.usuarios-margem-table .usuarios-rls-visualizacao-cell,
.acesso-rls-visualizacao-controls {
    justify-content: flex-start !important;
}

/* Padroniza o tamanho do botão/campo de Visualização em todos os tipos de RLS,
   incluindo quando Área ainda está vazia. */
.acesso-rls-visualizacao-cell .acesso-rls-select,
.acesso-rls-visualizacao-cell .acesso-rls-multiselect,
.acesso-rls-visualizacao-cell .acesso-rls-area-combo {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
}

.acesso-rls-visualizacao-cell .acesso-rls-multi-summary,
.acesso-rls-visualizacao-cell .acesso-rls-geral-select {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box !important;
}

/* Garante que o estado vazio de Área use exatamente a mesma altura visual dos demais vazios. */
.acesso-rls-visualizacao-cell .acesso-rls-area-summary {
    min-height: 22px !important;
    height: auto !important;
}

@media (max-width: 1100px) {
    .usuarios-margem-table {
        min-width: 1180px !important;
    }
}

/* ============================================================
   Acesso - ajuste final do cabeçalho RLS e Visualização
   ============================================================ */
/* RLS alinhado no início da coluna, junto com o dropdown da célula. */
.usuarios-margem-table .usuarios-rls-th,
.usuarios-margem-table .usuarios-rls-cell {
    text-align: left !important;
}

.usuarios-margem-table .usuarios-rls-th .th-content,
.usuarios-margem-table .usuarios-rls-cell .acesso-rls-controls {
    justify-content: flex-start !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-rls-select {
    margin-left: 0 !important;
}

/* Visualização não filtra, mas segue o mesmo formato visual dos filtros do cabeçalho. */
.usuarios-rls-visualizacao-label,
.usuarios-margem-table .usuarios-rls-visualizacao-th .th-content > span {
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.usuarios-margem-table .usuarios-rls-visualizacao-th .th-content {
    justify-content: flex-start !important;
}

/* ============================================================
   Acesso - modal Criar com RLS e Visualização obrigatórios
   ============================================================ */
.create-usuario-rls-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
}

.create-usuario-rls-grid .acesso-rls-select,
.create-usuario-rls-grid .acesso-rls-tipo-select,
.create-usuario-rls-grid .acesso-rls-geral-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.create-usuario-rls-grid .acesso-rls-select.placeholder,
.create-usuario-rls-grid .acesso-rls-select:has(option[value=""]:checked) {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

.create-usuario-rls-grid .create-usuario-rls-visualizacao-controls {
    width: 100%;
    display: flex;
    align-items: center;
}

.create-usuario-rls-grid .create-usuario-rls-visualizacao-controls [data-rls-control] {
    width: 100%;
}

.create-usuario-rls-grid .create-usuario-rls-visualizacao-controls [data-rls-control][hidden] {
    display: none !important;
}

.create-usuario-rls-grid .acesso-rls-multiselect,
.create-usuario-rls-grid .acesso-rls-area-combo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.create-usuario-rls-grid .acesso-rls-multi-summary,
.create-usuario-rls-grid .acesso-rls-area-summary {
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.create-usuario-rls-grid .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary,
.create-usuario-rls-grid .acesso-rls-area-combo.placeholder .acesso-rls-area-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

.create-usuario-rls-grid .acesso-rls-multi-menu {
    width: min(320px, 78vw) !important;
    max-height: 240px !important;
    z-index: 500 !important;
}

@media (max-width: 700px) {
    .create-usuario-rls-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Acesso - correção modal Criar com RLS/Visualização visível
   ============================================================ */
#dialog-create-usuario {
    width: min(760px, calc(100vw - 36px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
}

#dialog-create-usuario .dialog-form {
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
}

#dialog-create-usuario .create-usuario-margem-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

#dialog-create-usuario .create-usuario-rls-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

#dialog-create-usuario .create-usuario-rls-grid {
    margin-top: 2px !important;
    padding-top: 2px !important;
}

#dialog-create-usuario .create-usuario-rls-grid label {
    min-width: 0 !important;
}

#dialog-create-usuario .create-usuario-rls-visualizacao-controls,
#dialog-create-usuario .create-usuario-rls-visualizacao-controls [data-rls-control],
#dialog-create-usuario .acesso-rls-multiselect,
#dialog-create-usuario .acesso-rls-area-combo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#dialog-create-usuario .acesso-rls-select,
#dialog-create-usuario .acesso-rls-geral-select,
#dialog-create-usuario .acesso-rls-multi-summary,
#dialog-create-usuario .acesso-rls-area-summary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
    font-size: 13px !important;
}

#dialog-create-usuario .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary,
#dialog-create-usuario .acesso-rls-area-combo.placeholder .acesso-rls-area-summary,
#dialog-create-usuario .acesso-rls-select.placeholder,
#dialog-create-usuario .acesso-rls-select:has(option[value=""]:checked) {
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

#dialog-create-usuario .acesso-rls-multi-menu,
#dialog-create-usuario .acesso-rls-area-combo-menu {
    width: min(340px, 78vw) !important;
    max-height: 260px !important;
    z-index: 999 !important;
}

@media (max-width: 700px) {
    #dialog-create-usuario .create-usuario-margem-grid,
    #dialog-create-usuario .create-usuario-rls-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   Acesso - dropdowns únicos padronizados com Visualização
   ============================================================ */
.acesso-native-single-hidden {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.acesso-single-select {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.acesso-single-details {
    position: relative;
    width: 100%;
}

.acesso-single-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.acesso-single-select.placeholder .acesso-single-summary {
    font-weight: 400 !important;
}

body.theme-light .acesso-single-select.placeholder .acesso-single-summary {
    background-color: #969899 !important;
    border-color: #A8ABAD !important;
    color: #ffffff !important;
}

body.theme-dark .acesso-single-select.placeholder .acesso-single-summary {
    background-color: #212121 !important;
    border-color: #a7a7a7 !important;
    color: #d4dce8 !important;
}

.acesso-single-select.is-disabled .acesso-single-summary {
    opacity: .75;
    cursor: not-allowed !important;
}

.acesso-single-menu {
    width: min(230px, 70vw) !important;
    z-index: 1200 !important;
}

.acesso-single-option input[type="checkbox"] {
    pointer-events: none;
}

.usuarios-margem-table .usuarios-margem-pais-cell .acesso-single-select,
.usuarios-margem-table .usuarios-margem-pais-th .acesso-single-select,
.usuarios-margem-table .usuarios-margem-cell .acesso-single-select,
.usuarios-margem-table .usuarios-margem-th .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select,
.usuarios-margem-table .usuarios-rls-th .acesso-single-select {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select {
    margin-left: 0 !important;
}

/* A lista aberta dentro do Criar pode sair do limite visual do dialog. */
#dialog-create-usuario,
#dialog-create-usuario .dialog-form,
#dialog-create-usuario .create-usuario-margem-grid,
#dialog-create-usuario .create-usuario-rls-grid,
#dialog-create-usuario label {
    overflow: visible !important;
}

#dialog-create-usuario {
    max-height: none !important;
}

#dialog-create-usuario .dialog-form {
    max-height: none !important;
}

#dialog-create-usuario .acesso-single-select,
#dialog-create-usuario .acesso-rls-multiselect,
#dialog-create-usuario .acesso-rls-area-combo {
    position: relative !important;
    z-index: 20;
}

#dialog-create-usuario .acesso-single-details[open],
#dialog-create-usuario .acesso-rls-multi-details[open],
#dialog-create-usuario .acesso-rls-area-details[open] {
    z-index: 1300 !important;
}

#dialog-create-usuario .acesso-single-menu,
#dialog-create-usuario .acesso-rls-multi-menu,
#dialog-create-usuario .acesso-rls-area-combo-menu {
    z-index: 1400 !important;
}

#dialog-create-usuario .create-usuario-margem-grid .acesso-single-select,
#dialog-create-usuario .create-usuario-rls-grid .acesso-single-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#dialog-create-usuario .create-usuario-margem-grid .acesso-single-summary,
#dialog-create-usuario .create-usuario-rls-grid .acesso-single-summary {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

#dialog-create-usuario .create-usuario-margem-grid .acesso-single-menu,
#dialog-create-usuario .create-usuario-rls-grid .acesso-single-menu {
    width: min(340px, 78vw) !important;
    max-height: 260px !important;
}

/* ============================================================
   Acesso - correção cor Margem e estabilidade RLS customizado
   ============================================================ */

/* O botão visual da Margem não recebe mais cor por valor.
   Ele permanece no padrão neutro dos outros botões/dropdowns da tela Acesso. */
.acesso-single-select.is-margem .acesso-single-summary,
body.theme-light .acesso-single-select.is-margem .acesso-single-summary,
body.theme-dark .acesso-single-select.is-margem .acesso-single-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}

/* Placeholder da margem continua neutro/cinza quando não há seleção. */
.acesso-single-select.is-margem.placeholder .acesso-single-summary,
body.theme-light .acesso-single-select.is-margem.placeholder .acesso-single-summary,
body.theme-dark .acesso-single-select.is-margem.placeholder .acesso-single-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

/* País segue o mesmo padrão neutro do Margem/RLS/Relatórios. */
.acesso-single-select.is-pais-margem .acesso-single-summary,
body.theme-light .acesso-single-select.is-pais-margem .acesso-single-summary,
body.theme-dark .acesso-single-select.is-pais-margem .acesso-single-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}

/* Placeholder do País continua neutro/cinza quando não há seleção. */
.acesso-single-select.is-pais-margem.placeholder .acesso-single-summary,
body.theme-light .acesso-single-select.is-pais-margem.placeholder .acesso-single-summary,
body.theme-dark .acesso-single-select.is-pais-margem.placeholder .acesso-single-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

/* Reforço para a coluna RLS não quebrar quando o select nativo é escondido
   e o box customizado entra no lugar. */
.usuarios-margem-table .usuarios-rls-cell,
.usuarios-margem-table .usuarios-rls-th {
    overflow: visible !important;
    text-align: left !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-rls-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo,
#dialog-create-usuario .create-usuario-rls-grid .acesso-single-select.is-rls-tipo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    flex: 0 0 110px !important;
    margin-left: 0 !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo .acesso-single-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo.placeholder .acesso-single-summary {
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

/* Relatórios (multiselect) segue o mesmo padrão neutro do Margem/RLS:
   fundo permanece var(--input-bg), sem o cinza genérico de placeholder. */
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-relatorios-multiselect.placeholder .acesso-rls-multi-summary,
body.theme-light .usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-relatorios-multiselect.placeholder .acesso-rls-multi-summary,
body.theme-dark .usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-relatorios-multiselect.placeholder .acesso-rls-multi-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}


/* ============================================================
   Acesso - menu RLS com scroll
   ============================================================ */
/* O menu do RLS precisa se comportar como dropdown normal:
   abre perto do botão, com altura limitada e scroll interno. */
.usuarios-margem-table .usuarios-rls-cell .acesso-single-details,
.usuarios-margem-table .usuarios-rls-th .acesso-single-details {
    position: relative !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details:not([open]) .acesso-single-menu,
.usuarios-margem-table .usuarios-rls-th .acesso-single-details:not([open]) .acesso-single-menu {
    display: none !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-menu,
.usuarios-margem-table .usuarios-rls-th .acesso-single-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: min(190px, 70vw) !important;
    max-height: 180px !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1500 !important;
    display: block !important;
}

/* Evita que o box do RLS tente ocupar/esticar a altura da célula/tabela. */
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-details,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-summary {
    height: 22px !important;
    max-height: 22px !important;
}


/* ============================================================
   Acesso - correção definitiva do dropdown RLS
   ============================================================ */
/* O dropdown único (País/Margem/RLS) não pode herdar comportamento da multiseleção.
   Quando o details está fechado, o menu fica realmente escondido. */
.acesso-single-details:not([open]) > .acesso-single-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.acesso-single-details[open] > .acesso-single-menu {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: min(230px, 70vw) !important;
    height: auto !important;
    max-height: 210px !important;
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--card) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22) !important;
    z-index: 3000 !important;
}

/* RLS volta a ter exatamente o comportamento visual dos outros dropdowns da tabela. */
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-details,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-summary {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 110px !important;
    margin: 0 !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details {
    position: relative !important;
    overflow: visible !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-summary {
    display: flex !important;
    align-items: center !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-menu {
    width: min(230px, 70vw) !important;
    max-height: 210px !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details:not([open]) > .acesso-single-menu {
    display: none !important;
}

/* Remove o efeito de menu esticado causado por regras antigas específicas do RLS. */
.usuarios-margem-table .usuarios-rls-cell .acesso-single-menu:not(:empty) {
    min-height: 0 !important;
}

/* ============================================================
   Acesso - posição fixa das colunas
   ============================================================ */

.usuarios-margem-table {
    table-layout: fixed !important;
    width: auto !important;
    min-width: 1280px !important;
}

/* Coluna Nome/Usuário */
.usuarios-col-usuario {
    width: 420px !important;
}

/* Coluna País */
.usuarios-col-pais {
    width: 180px !important;
}

/* Coluna Margem */
.usuarios-col-margem {
    width: 180px !important;
}

/* Coluna RLS */
.usuarios-col-rls {
    width: 180px !important;
}

/* Coluna Visualização */
.usuarios-col-visualizacao {
    width: 180px !important;
}

/* Coluna Ações */
.usuarios-col-actions {
    width: 400px !important;
}

/* ============================================================
   Acesso - correção coluna RLS / dropdown duplicado
   ============================================================ */
/* Mantém a tabela com largura real suficiente para as colunas.
   Antes a tabela estava com width:auto e algumas colunas tinham conteúdo maior
   que o próprio <col>, criando a sensação de uma coluna por trás/à frente. */
.usuarios-margem-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1420px !important;
}

.usuarios-col-usuario {
    width: 380px !important;
}

.usuarios-col-pais {
    width: 160px !important;
}

.usuarios-col-margem {
    width: 150px !important;
}

.usuarios-col-rls {
    width: 150px !important;
}

.usuarios-col-visualizacao {
    width: 330px !important;
}

.usuarios-col-actions {
    width: 250px !important;
}

/* O select nativo fica apenas como campo de valor/formulário.
   Ele não pode ocupar camada visual na célula, senão aparece como “fantasma”
   atrás do dropdown customizado. */
.acesso-native-single-hidden,
.usuarios-margem-table .usuarios-rls-cell select.acesso-native-single-hidden,
.usuarios-margem-table .usuarios-margem-pais-cell select.acesso-native-single-hidden,
.usuarios-margem-table .usuarios-margem-cell select.acesso-native-single-hidden,
#dialog-create-usuario select.acesso-native-single-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* A coluna RLS deve conter somente o box customizado fechado.
   O menu aberto continua absoluto, com altura limitada e scroll interno.
   O <th> fica de fora do "position: relative" - ele precisa continuar
   com o "position: sticky" padrão do cabeçalho, senão sobe junto com
   as linhas ao rolar a tabela em vez de ficar fixo. */
.usuarios-margem-table .usuarios-rls-th {
    overflow: visible !important;
    vertical-align: middle !important;
}

.usuarios-margem-table .usuarios-rls-cell {
    position: relative !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-rls-controls {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    overflow: visible !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-details,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-summary {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details {
    position: relative !important;
    overflow: visible !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details:not([open]) > .acesso-single-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

.usuarios-margem-table .usuarios-rls-cell .acesso-single-details[open] > .acesso-single-menu {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: min(230px, 70vw) !important;
    height: auto !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 3000 !important;
}

/* Visualização tinha conteúdo de 215px dentro de coluna de 180px com padding de 56px.
   Isso fazia o box atravessar as linhas/colunas vizinhas.
   O <th> fica de fora do "position: relative" pelo mesmo motivo do
   RLS acima: precisa manter o "position: sticky" do cabeçalho. */
.usuarios-margem-table .usuarios-rls-visualizacao-th {
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    position: relative !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.usuarios-margem-table .usuarios-rls-visualizacao-cell .acesso-rls-visualizacao-controls {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.acesso-rls-visualizacao-cell .acesso-rls-select,
.acesso-rls-visualizacao-cell .acesso-rls-multiselect,
.acesso-rls-visualizacao-cell .acesso-rls-area-combo,
.acesso-rls-visualizacao-cell .acesso-rls-multi-summary,
.acesso-rls-visualizacao-cell .acesso-rls-geral-select {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box !important;
}

.usuarios-margem-table .usuarios-rls-cell:has(.acesso-single-details[open]),
.usuarios-margem-table .usuarios-rls-visualizacao-cell:has(.acesso-rls-multi-details[open]),
.usuarios-margem-table .usuarios-rls-visualizacao-cell:has(.acesso-rls-area-details[open]) {
    z-index: 1000 !important;
}

/* ============================================================
   Acesso - correção final do empilhamento no modal + Criar
   ============================================================ */
/*
   Causa do problema: no modal +Criar, País/Margem/RLS são dropdowns
   customizados. Todos os widgets recebiam z-index parecido e o campo RLS,
   por vir depois no HTML, podia pintar por cima da lista aberta de País.
   Esta regra sobe somente o campo que estiver aberto e sua linha inteira.
*/
#dialog-create-usuario,
#dialog-create-usuario .dialog-form {
    isolation: isolate !important;
    overflow: visible !important;
}

#dialog-create-usuario .create-usuario-margem-grid,
#dialog-create-usuario .create-usuario-rls-grid,
#dialog-create-usuario label {
    position: relative !important;
    overflow: visible !important;
}

/* Estado fechado: mantém a ordem normal do formulário. */
#dialog-create-usuario .create-usuario-margem-grid {
    z-index: 20 !important;
}

#dialog-create-usuario .create-usuario-rls-grid {
    z-index: 10 !important;
}

#dialog-create-usuario .acesso-single-select,
#dialog-create-usuario .acesso-rls-multiselect,
#dialog-create-usuario .acesso-rls-area-combo {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* Estado aberto: a linha/campo aberto fica acima dos campos que estão abaixo. */
#dialog-create-usuario .create-usuario-margem-grid:has(.acesso-single-details[open]),
#dialog-create-usuario .create-usuario-margem-grid:has(.acesso-rls-multi-details[open]),
#dialog-create-usuario .create-usuario-rls-grid:has(.acesso-single-details[open]),
#dialog-create-usuario .create-usuario-rls-grid:has(.acesso-rls-multi-details[open]),
#dialog-create-usuario .create-usuario-rls-grid:has(.acesso-rls-area-details[open]) {
    z-index: 9000 !important;
}

#dialog-create-usuario label:has(.acesso-single-details[open]),
#dialog-create-usuario label:has(.acesso-rls-multi-details[open]),
#dialog-create-usuario label:has(.acesso-rls-area-details[open]) {
    z-index: 9100 !important;
}

#dialog-create-usuario .acesso-single-select:has(.acesso-single-details[open]),
#dialog-create-usuario .acesso-rls-multiselect:has(.acesso-rls-multi-details[open]),
#dialog-create-usuario .acesso-rls-area-combo:has(.acesso-rls-area-details[open]) {
    z-index: 9200 !important;
}

#dialog-create-usuario .acesso-single-details[open] > .acesso-single-menu,
#dialog-create-usuario .acesso-rls-multi-details[open] > .acesso-rls-multi-menu,
#dialog-create-usuario .acesso-rls-area-details[open] > .acesso-rls-area-combo-menu {
    position: absolute !important;
    z-index: 9300 !important;
}


/* ============================================================
   RLS - edição em massa por usuário (País, Área e Vendedor)
   ============================================================ */
.rls-bulk-table {
    table-layout: fixed;
}

.rls-bulk-table th:first-child,
.rls-bulk-table td:first-child {
    width: 34%;
}

.rls-bulk-table th:not(:first-child),
.rls-bulk-table td:not(:first-child) {
    width: auto;
}

.rls-bulk-user-cell {
    line-height: 1.25;
    vertical-align: middle;
}

.rls-bulk-user-cell .usuario-sufixo {
    display: inline;
    margin-left: 4px;
    color: var(--detail-text);
    font-size: 11px;
    font-weight: 400;
}

.rls-bulk-user-cell .inline-alert {
    margin: 6px 0 0 0;
    padding: 5px 7px;
    font-size: 10.5px;
}

.rls-bulk-select-cell {
    vertical-align: middle;
}

.rls-bulk-table .rls-bulk-multiselect,
.rls-bulk-table .rls-bulk-area-combo {
    width: min(520px, 100%);
    min-width: 260px;
    max-width: 100%;
}

.rls-bulk-table .acesso-rls-multi-summary,
.rls-bulk-table .acesso-rls-area-summary {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.rls-bulk-table .acesso-rls-multi-menu,
.rls-bulk-table .acesso-rls-area-combo-menu {
    width: min(520px, 72vw);
    max-height: 300px;
    z-index: 320;
}

.rls-bulk-table .acesso-rls-area-combo-menu {
    width: min(620px, 76vw);
}

.rls-bulk-actions-row {
    justify-content: space-between;
    margin-top: 10px;
}

.rls-bulk-actions-row .actions-left {
    margin-right: auto;
}

.rls-bulk-actions-row .primary.small,
.rls-bulk-actions-row .link-btn.secondary {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.rls-bulk-actions-row .rls-bulk-save-btn {
    background: var(--btn-blue);
    border-color: var(--btn-blue);
    color: var(--btn-text);
}

.rls-bulk-actions-row .rls-bulk-add-btn {
    background: var(--btn-green);
    border-color: var(--btn-green);
    color: var(--btn-text);
}

body.theme-dark .rls-bulk-actions-row .primary.small {
    color: var(--bg);
}

@media (max-width: 900px) {
    .rls-bulk-table {
        min-width: 820px;
    }
}

.rls-bulk-table td:has(.acesso-rls-multi-details[open]),
.rls-bulk-table td:has(.acesso-rls-area-details[open]) {
    position: relative;
    z-index: 1200;
}

.rls-bulk-table .acesso-rls-multi-details[open] > .acesso-rls-multi-menu,
.rls-bulk-table .acesso-rls-area-details[open] > .acesso-rls-area-combo-menu {
    z-index: 1300;
}

/* ============================================================
   RLS - coluna Usuário no mesmo padrão da página Acesso
   ============================================================ */
.rls-geral-table tbody td.rls-user-cell .usuario-sufixo,
.rls-bulk-table tbody td.rls-bulk-user-cell .usuario-sufixo {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 400;
    color: var(--detail-text);
}

.rls-geral-table tbody td.rls-user-cell .rls-user-name,
.rls-bulk-table tbody td.rls-bulk-user-cell .rls-user-name {
    display: block;
}

/* ============================================================
   Área do Vendedor - Vendedor no padrão Nome / (nick)
   ============================================================ */
.rls-area-vendedor-table tbody td.rls-area-vendedor-user-cell .usuario-sufixo {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 400;
    color: var(--detail-text);
}

.rls-area-vendedor-table tbody td.rls-area-vendedor-user-cell .rls-user-name {
    display: block;
}

/* ============================================================
   RLS - ajustes finos das tabelas editáveis
   ============================================================ */
.rls-bulk-table th.actions-th,
.rls-bulk-table td.row-actions {
    width: 110px;
    text-align: right;
    white-space: nowrap;
}

.rls-bulk-table .rls-bulk-multiselect,
.rls-bulk-table .rls-bulk-area-combo {
    width: min(380px, 100%) !important;
    min-width: 180px !important;
    max-width: 100% !important;
}

.rls-bulk-area-table .rls-bulk-area-combo {
    width: min(430px, 100%) !important;
}

.rls-bulk-table .acesso-rls-multi-summary,
.rls-bulk-table .acesso-rls-area-summary {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.rls-bulk-table .acesso-rls-multi-menu {
    width: min(380px, 72vw) !important;
}

.rls-bulk-table .acesso-rls-area-combo-menu {
    width: min(520px, 76vw) !important;
}

/* ============================================================
   RLS - dropdown menor e botão Salvar verde
   ============================================================ */
.rls-bulk-table .rls-bulk-multiselect,
.rls-bulk-table .rls-bulk-area-combo {
    width: min(300px, 100%) !important;
    min-width: 150px !important;
    max-width: 100% !important;
}

.rls-bulk-area-table .rls-bulk-area-combo {
    width: min(340px, 100%) !important;
}

.rls-bulk-table .acesso-rls-multi-summary,
.rls-bulk-table .acesso-rls-area-summary {
    min-height: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 22px 0 8px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

.rls-bulk-table .acesso-rls-multi-summary::after,
.rls-bulk-table .acesso-rls-area-summary::after {
    right: 7px !important;
    font-size: 10px !important;
}

.rls-bulk-table .acesso-rls-multi-menu {
    width: min(300px, 72vw) !important;
}

.rls-bulk-table .acesso-rls-area-combo-menu {
    width: min(420px, 76vw) !important;
}

.rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-light .rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn {
    background-color: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
}

/* ============================================================
   RLS - base das tabelas editáveis
   ============================================================ */

.rls-bulk-table {
    table-layout: fixed !important;
}


/* ============================================================
   RLS > País
   ============================================================ */

/* Coluna Usuário */
.rls-bulk-pais-table th:first-child,
.rls-bulk-pais-table td:first-child {
    width: 40% !important;
}

/* Coluna País / dropdown */
.rls-bulk-pais-table th:nth-child(2),
.rls-bulk-pais-table td.rls-bulk-select-cell {
    width: 230px !important;
}

/* Tamanho do dropdown da aba País */
.rls-bulk-pais-table .rls-bulk-multiselect {
    width: 230px !important;
    min-width: 180px !important;
    max-width: 230px !important;
}

/* Menu aberto do dropdown País */
.rls-bulk-pais-table .acesso-rls-multi-menu {
    width: 230px !important;
}


/* ============================================================
   RLS > Vendedor
   ============================================================ */

/* Coluna Usuário */
.rls-bulk-vendedor-table th:first-child,
.rls-bulk-vendedor-table td:first-child {
    width: 40% !important;
}

/* Coluna Vendedor / dropdown */
.rls-bulk-vendedor-table th:nth-child(2),
.rls-bulk-vendedor-table td.rls-bulk-select-cell {
    width: 230px !important;
}

/* Tamanho do dropdown da aba Vendedor */
.rls-bulk-vendedor-table .rls-bulk-multiselect {
    width: 260px !important;
    min-width: 200px !important;
    max-width: 260px !important;
}

/* Menu aberto do dropdown Vendedor */
.rls-bulk-vendedor-table .acesso-rls-multi-menu {
    width: 260px !important;
}


/* ============================================================
   RLS > Área
   ============================================================ */

/* Coluna Usuário */
.rls-bulk-area-table th:first-child,
.rls-bulk-area-table td:first-child {
    width: 40% !important;
}

/* Coluna Área / dropdown */
.rls-bulk-area-table th:nth-child(2),
.rls-bulk-area-table td.rls-bulk-select-cell {
    width: 230px !important;
}

/* Tamanho do dropdown combinado Área + País */
.rls-bulk-area-table .rls-bulk-area-combo {
    width: 290px !important;
    min-width: 220px !important;
    max-width: 290px !important;
}

/* Menu aberto do dropdown Área + País */
.rls-bulk-area-table .acesso-rls-area-combo-menu {
    width: 360px !important;
}


/* ============================================================
   RLS - coluna Excluir
   ============================================================ */

.rls-bulk-table th.actions-th,
.rls-bulk-table td.row-actions {
    width: 220px !important;
    padding-left: 115px !important;
    padding-right: 14px !important;
    text-align: left !important;
}

.rls-bulk-table td.row-actions .danger.small {
    min-width: 58px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
}


/* ============================================================
   RLS - aparência geral dos botões dropdown
   ============================================================ */

.rls-bulk-table .acesso-rls-multi-summary,
.rls-bulk-table .acesso-rls-area-summary {
    min-height: 27px !important;
    height: 27px !important;
    line-height: 27px !important;
    padding: 0 20px 0 8px !important;
    font-size: 11.5px !important;
}

.rls-bulk-table .acesso-rls-multi-summary::after,
.rls-bulk-table .acesso-rls-area-summary::after {
    right: 7px !important;
    font-size: 10px !important;
}

.rls-bulk-table .acesso-rls-multi-option,
.rls-bulk-table .acesso-rls-area-country-option,
.rls-bulk-table .acesso-rls-area-trigger {
    min-height: 28px !important;
    font-size: 11.5px !important;
}

/* ============================================================
   RLS - quebra de linha nos dropdowns País, Área e Vendedor
   ============================================================ */
.rls-bulk-pais-table .acesso-rls-multi-summary,
.rls-bulk-vendedor-table .acesso-rls-multi-summary,
.rls-bulk-area-table .acesso-rls-area-summary {
    height: auto !important;
    min-height: 32px !important;
    line-height: 1.25 !important;
    padding: 5px 22px 5px 8px !important;
    align-items: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 12px !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-summary::after {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
    flex: none !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-details[open] > .acesso-rls-area-summary::after {
    transform: translateY(-50%) rotate(-135deg) !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option,
.rls-bulk-vendedor-table .acesso-rls-multi-option,
.rls-bulk-area-table .acesso-rls-area-trigger,
.rls-bulk-area-table .acesso-rls-area-country-option {
    min-height: 32px !important;
    height: auto !important;
    align-items: flex-start !important;
    line-height: 1.25 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    white-space: normal !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option span,
.rls-bulk-vendedor-table .acesso-rls-multi-option span,
.rls-bulk-area-table .acesso-rls-area-trigger span,
.rls-bulk-area-table .acesso-rls-area-country-option span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

/* ============================================================
   RLS - padronização final com a aba Acesso
   ============================================================
   Mantém as abas Geral, País, Área e Vendedor com o mesmo padrão visual
   da tabela de Acesso: coluna Usuário com a mesma largura, coluna de ações
   com a mesma largura/alinhamento, dropdowns compactos e botão Salvar igual.
*/
.rls-geral-table,
.rls-bulk-pais-table,
.rls-bulk-area-table,
.rls-bulk-vendedor-table {
    table-layout: fixed !important;
    width: auto !important;
}

.rls-geral-table {
    min-width: 600px !important;
}

.rls-bulk-pais-table,
.rls-bulk-area-table,
.rls-bulk-vendedor-table {
    min-width: 815px !important;
}

.rls-geral-table .rls-match-usuario-col,
.rls-bulk-pais-table .rls-match-usuario-col,
.rls-bulk-area-table .rls-match-usuario-col,
.rls-bulk-vendedor-table .rls-match-usuario-col,
.rls-geral-table th:first-child,
.rls-geral-table td.rls-user-cell,
.rls-bulk-pais-table th:first-child,
.rls-bulk-pais-table td.rls-bulk-user-cell,
.rls-bulk-area-table th:first-child,
.rls-bulk-area-table td.rls-bulk-user-cell,
.rls-bulk-vendedor-table th:first-child,
.rls-bulk-vendedor-table td.rls-bulk-user-cell {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
}

.rls-bulk-pais-table .rls-match-value-col,
.rls-bulk-area-table .rls-match-value-col,
.rls-bulk-vendedor-table .rls-match-value-col,
.rls-bulk-pais-table th:nth-child(2),
.rls-bulk-pais-table td.rls-bulk-select-cell,
.rls-bulk-area-table th:nth-child(2),
.rls-bulk-area-table td.rls-bulk-select-cell,
.rls-bulk-vendedor-table th:nth-child(2),
.rls-bulk-vendedor-table td.rls-bulk-select-cell {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: left !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

.rls-geral-table .rls-match-actions-col,
.rls-bulk-pais-table .rls-match-actions-col,
.rls-bulk-area-table .rls-match-actions-col,
.rls-bulk-vendedor-table .rls-match-actions-col,
.rls-geral-table th.actions-th,
.rls-geral-table td.row-actions,
.rls-bulk-pais-table th.actions-th,
.rls-bulk-pais-table td.row-actions,
.rls-bulk-area-table th.actions-th,
.rls-bulk-area-table td.row-actions,
.rls-bulk-vendedor-table th.actions-th,
.rls-bulk-vendedor-table td.row-actions {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: right !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.rls-geral-table tbody td.rls-user-cell,
.rls-bulk-pais-table tbody td.rls-bulk-user-cell,
.rls-bulk-area-table tbody td.rls-bulk-user-cell,
.rls-bulk-vendedor-table tbody td.rls-bulk-user-cell {
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

.rls-geral-table tbody td.rls-user-cell .rls-user-name,
.rls-bulk-pais-table tbody td.rls-bulk-user-cell .rls-user-name,
.rls-bulk-area-table tbody td.rls-bulk-user-cell .rls-user-name,
.rls-bulk-vendedor-table tbody td.rls-bulk-user-cell .rls-user-name {
    display: block !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.rls-geral-table tbody td.rls-user-cell .usuario-sufixo,
.rls-bulk-pais-table tbody td.rls-bulk-user-cell .usuario-sufixo,
.rls-bulk-area-table tbody td.rls-bulk-user-cell .usuario-sufixo,
.rls-bulk-vendedor-table tbody td.rls-bulk-user-cell .usuario-sufixo {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: var(--detail-text) !important;
}

/* Header +Adicionar no mesmo tamanho visual do +Criar de Acesso. */
.rls-geral-table th.actions-th .primary.small,
.rls-bulk-pais-table th.actions-th .primary.small,
.rls-bulk-area-table th.actions-th .primary.small,
.rls-bulk-vendedor-table th.actions-th .primary.small {
    min-width: 35px !important;
    min-height: 35px !important;
    height: 35px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Excluir no mesmo tamanho compacto da tela Acesso. */
.rls-geral-table td.row-actions .danger.small,
.rls-bulk-pais-table td.row-actions .danger.small,
.rls-bulk-area-table td.row-actions .danger.small,
.rls-bulk-vendedor-table td.row-actions .danger.small {
    min-width: auto !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Dropdowns País, Área e Vendedor no mesmo padrão compacto de Acesso. */
.rls-bulk-pais-table .rls-bulk-multiselect,
.rls-bulk-vendedor-table .rls-bulk-multiselect,
.rls-bulk-area-table .rls-bulk-area-combo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details,
.rls-bulk-vendedor-table .acesso-rls-multi-details,
.rls-bulk-area-table .acesso-rls-area-details {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary,
.rls-bulk-vendedor-table .acesso-rls-multi-summary,
.rls-bulk-area-table .acesso-rls-area-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 22px !important;
    height: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.rls-bulk-pais-table .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary,
.rls-bulk-vendedor-table .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary,
.rls-bulk-area-table .acesso-rls-area-combo.placeholder .acesso-rls-area-summary {
    font-weight: 400 !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-summary::after {
    position: static !important;
    flex: 0 0 auto !important;
    content: "⌄" !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-details[open] > .acesso-rls-area-summary::after {
    transform: none !important;
}

.rls-bulk-pais-table .acesso-rls-multi-menu,
.rls-bulk-vendedor-table .acesso-rls-multi-menu,
.rls-bulk-area-table .acesso-rls-area-combo-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 3000 !important;
    width: min(285px, 70vw) !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px !important;
    border-radius: 10px !important;
}

.rls-bulk-table td.rls-bulk-select-cell:has(.acesso-rls-multi-details[open]),
.rls-bulk-table td.rls-bulk-select-cell:has(.acesso-rls-area-details[open]) {
    position: relative !important;
    z-index: 2900 !important;
    overflow: visible !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option,
.rls-bulk-vendedor-table .acesso-rls-multi-option,
.rls-bulk-area-table .acesso-rls-area-trigger,
.rls-bulk-area-table .acesso-rls-area-country-option {
    min-height: 26px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 6px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option span,
.rls-bulk-vendedor-table .acesso-rls-multi-option span,
.rls-bulk-area-table .acesso-rls-area-trigger span,
.rls-bulk-area-table .acesso-rls-area-country-option span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

/* Salvar das abas editáveis igual ao Salvar da tela Acesso. */
.rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-light .rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn {
    color: var(--bg) !important;
}


/* ============================================================
   RLS - correção de distribuição das colunas
   ============================================================
   As abas Geral, País, Área e Vendedor têm menos colunas que Acesso.
   Por isso a tabela deve ocupar 100% da área disponível, deixando apenas
   a coluna de ações compacta e distribuindo o restante entre as colunas
   de conteúdo. Evita a sobra vazia à direita da tabela.
*/
.rls-geral-table,
.rls-bulk-pais-table,
.rls-bulk-area-table,
.rls-bulk-vendedor-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.rls-geral-table {
    min-width: 520px !important;
}

.rls-bulk-pais-table,
.rls-bulk-area-table,
.rls-bulk-vendedor-table {
    min-width: 760px !important;
}

/* Geral: 2 colunas. Usuário ocupa todo o espaço restante; ações fica compacta. */
.rls-geral-table .rls-match-usuario-col,
.rls-geral-table th:first-child,
.rls-geral-table td.rls-user-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.rls-geral-table .rls-match-actions-col,
.rls-geral-table th.actions-th,
.rls-geral-table td.row-actions {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

/* País, Área e Vendedor: 3 colunas. Usuário e valor dividem o espaço útil. */
.rls-bulk-pais-table .rls-match-usuario-col,
.rls-bulk-area-table .rls-match-usuario-col,
.rls-bulk-vendedor-table .rls-match-usuario-col,
.rls-bulk-pais-table th:first-child,
.rls-bulk-pais-table td.rls-bulk-user-cell,
.rls-bulk-area-table th:first-child,
.rls-bulk-area-table td.rls-bulk-user-cell,
.rls-bulk-vendedor-table th:first-child,
.rls-bulk-vendedor-table td.rls-bulk-user-cell {
    width: 42% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.rls-bulk-pais-table .rls-match-value-col,
.rls-bulk-area-table .rls-match-value-col,
.rls-bulk-vendedor-table .rls-match-value-col,
.rls-bulk-pais-table th:nth-child(2),
.rls-bulk-pais-table td.rls-bulk-select-cell,
.rls-bulk-area-table th:nth-child(2),
.rls-bulk-area-table td.rls-bulk-select-cell,
.rls-bulk-vendedor-table th:nth-child(2),
.rls-bulk-vendedor-table td.rls-bulk-select-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.rls-bulk-pais-table .rls-match-actions-col,
.rls-bulk-area-table .rls-match-actions-col,
.rls-bulk-vendedor-table .rls-match-actions-col,
.rls-bulk-pais-table th.actions-th,
.rls-bulk-pais-table td.row-actions,
.rls-bulk-area-table th.actions-th,
.rls-bulk-area-table td.row-actions,
.rls-bulk-vendedor-table th.actions-th,
.rls-bulk-vendedor-table td.row-actions {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

/* Remove espaçamentos antigos que empurravam os botões e criavam sobra visual. */
.rls-geral-table th.actions-th,
.rls-geral-table td.row-actions,
.rls-bulk-pais-table th.actions-th,
.rls-bulk-pais-table td.row-actions,
.rls-bulk-area-table th.actions-th,
.rls-bulk-area-table td.row-actions,
.rls-bulk-vendedor-table th.actions-th,
.rls-bulk-vendedor-table td.row-actions {
    padding-left: 12px !important;
    padding-right: 14px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.rls-bulk-pais-table td.rls-bulk-select-cell,
.rls-bulk-area-table td.rls-bulk-select-cell,
.rls-bulk-vendedor-table td.rls-bulk-select-cell {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.rls-bulk-pais-table .rls-bulk-multiselect,
.rls-bulk-vendedor-table .rls-bulk-multiselect,
.rls-bulk-area-table .rls-bulk-area-combo {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   RLS - dropdowns menores que a coluna + quebra de linha
   ============================================================
   Mantém a largura das colunas distribuída em 100%, mas reduz somente
   o componente dropdown para o mesmo tamanho visual usado em Acesso.
*/
.rls-bulk-pais-table .rls-bulk-multiselect,
.rls-bulk-vendedor-table .rls-bulk-multiselect,
.rls-bulk-area-table .rls-bulk-area-combo {
    width: min(215px, 100%) !important;
    min-width: 0 !important;
    max-width: 215px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details,
.rls-bulk-vendedor-table .acesso-rls-multi-details,
.rls-bulk-area-table .acesso-rls-area-details {
    width: min(215px, 100%) !important;
    min-width: 0 !important;
    max-width: 215px !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary,
.rls-bulk-vendedor-table .acesso-rls-multi-summary,
.rls-bulk-area-table .acesso-rls-area-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 215px !important;
    min-height: 26px !important;
    height: auto !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 5px 22px 5px 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-summary::after {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    flex: none !important;
    transform: translateY(-50%) !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-details[open] > .acesso-rls-area-summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.rls-bulk-pais-table .acesso-rls-multi-menu,
.rls-bulk-vendedor-table .acesso-rls-multi-menu,
.rls-bulk-area-table .acesso-rls-area-combo-menu {
    width: min(285px, 70vw) !important;
    min-width: 215px !important;
    max-width: min(285px, 70vw) !important;
    white-space: normal !important;
    overflow-x: hidden !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option,
.rls-bulk-vendedor-table .acesso-rls-multi-option,
.rls-bulk-area-table .acesso-rls-area-trigger,
.rls-bulk-area-table .acesso-rls-area-country-option {
    height: auto !important;
    min-height: 30px !important;
    align-items: flex-start !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

.rls-bulk-pais-table .acesso-rls-multi-option span,
.rls-bulk-vendedor-table .acesso-rls-multi-option span,
.rls-bulk-area-table .acesso-rls-area-trigger span,
.rls-bulk-area-table .acesso-rls-area-country-option span {
    display: inline !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

/* ============================================================
   RLS - seta e largura do menu iguais ao botão compacto
   ============================================================
   Ajuste final para País, Área e Vendedor:
   - seta em chevron desenhado, no mesmo padrão visual da tela Acesso;
   - box aberto com a mesma largura do botão de seleção.
*/
.rls-bulk-pais-table .acesso-rls-multi-details,
.rls-bulk-vendedor-table .acesso-rls-multi-details,
.rls-bulk-area-table .acesso-rls-area-details {
    position: relative !important;
    width: min(215px, 100%) !important;
    min-width: 0 !important;
    max-width: 215px !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary,
.rls-bulk-vendedor-table .acesso-rls-multi-summary,
.rls-bulk-area-table .acesso-rls-area-summary {
    position: relative !important;
    width: 100% !important;
    max-width: 215px !important;
    padding-right: 26px !important;
}

.rls-bulk-pais-table .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-summary::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: translateY(-65%) rotate(45deg) !important;
    transition: transform .15s ease, margin-top .15s ease !important;
    flex: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.rls-bulk-pais-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-vendedor-table .acesso-rls-multi-details[open] > .acesso-rls-multi-summary::after,
.rls-bulk-area-table .acesso-rls-area-details[open] > .acesso-rls-area-summary::after {
    transform: translateY(-35%) rotate(-135deg) !important;
}

.rls-bulk-pais-table .acesso-rls-multi-menu,
.rls-bulk-vendedor-table .acesso-rls-multi-menu,
.rls-bulk-area-table .acesso-rls-area-combo-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   RLS - modais +Adicionar com padrão do +Criar em Acesso
   ============================================================ */
#dialog-add-geral,
#dialog-add-pais,
#dialog-add-area,
#dialog-add-vendedor,
#dialog-add-cambio {
    width: min(760px, calc(100vw - 36px)) !important;
    max-height: none !important;
    overflow: visible !important;
}

#dialog-add-geral .dialog-form,
#dialog-add-pais .dialog-form,
#dialog-add-area .dialog-form,
#dialog-add-vendedor .dialog-form,
#dialog-add-cambio .dialog-form,
#dialog-add-geral label,
#dialog-add-pais label,
#dialog-add-area label,
#dialog-add-vendedor label,
#dialog-add-cambio label {
    overflow: visible !important;
}

#dialog-add-geral .acesso-single-select,
#dialog-add-pais .acesso-single-select,
#dialog-add-area .acesso-single-select,
#dialog-add-vendedor .acesso-single-select,
#dialog-add-cambio .acesso-single-select,
#dialog-add-pais .acesso-rls-multiselect,
#dialog-add-area .acesso-rls-area-combo,
#dialog-add-vendedor .acesso-rls-multiselect {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: relative !important;
    z-index: 20 !important;
}

#dialog-add-geral .acesso-single-summary,
#dialog-add-pais .acesso-single-summary,
#dialog-add-area .acesso-single-summary,
#dialog-add-vendedor .acesso-single-summary,
#dialog-add-cambio .acesso-single-summary,
#dialog-add-pais .acesso-rls-multi-summary,
#dialog-add-area .acesso-rls-area-summary,
#dialog-add-vendedor .acesso-rls-multi-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 28px 8px 10px !important;
    border-radius: 8px !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#dialog-add-geral .acesso-single-select.placeholder .acesso-single-summary,
#dialog-add-pais .acesso-single-select.placeholder .acesso-single-summary,
#dialog-add-area .acesso-single-select.placeholder .acesso-single-summary,
#dialog-add-vendedor .acesso-single-select.placeholder .acesso-single-summary,
#dialog-add-cambio .acesso-single-select.placeholder .acesso-single-summary,
#dialog-add-pais .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary,
#dialog-add-area .acesso-rls-area-combo.placeholder .acesso-rls-area-summary,
#dialog-add-vendedor .acesso-rls-multiselect.placeholder .acesso-rls-multi-summary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #A6A9AD !important;
    font-weight: 400 !important;
}

#dialog-add-geral .acesso-single-details[open],
#dialog-add-pais .acesso-single-details[open],
#dialog-add-area .acesso-single-details[open],
#dialog-add-vendedor .acesso-single-details[open],
#dialog-add-cambio .acesso-single-details[open],
#dialog-add-pais .acesso-rls-multi-details[open],
#dialog-add-area .acesso-rls-area-details[open],
#dialog-add-vendedor .acesso-rls-multi-details[open] {
    z-index: 1300 !important;
}

#dialog-add-geral .acesso-single-menu,
#dialog-add-pais .acesso-single-menu,
#dialog-add-area .acesso-single-menu,
#dialog-add-vendedor .acesso-single-menu,
#dialog-add-cambio .acesso-single-menu,
#dialog-add-pais .acesso-rls-multi-menu,
#dialog-add-area .acesso-rls-area-combo-menu,
#dialog-add-vendedor .acesso-rls-multi-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 260px !important;
    z-index: 1400 !important;
}

#dialog-add-pais .acesso-rls-multi-option,
#dialog-add-area .acesso-rls-area-trigger,
#dialog-add-area .acesso-rls-area-country-option,
#dialog-add-vendedor .acesso-rls-multi-option,
#dialog-add-geral .acesso-single-option,
#dialog-add-pais .acesso-single-option,
#dialog-add-area .acesso-single-option,
#dialog-add-vendedor .acesso-single-option,
#dialog-add-cambio .acesso-single-option {
    min-height: 34px !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

#dialog-add-pais .acesso-rls-multi-option span,
#dialog-add-area .acesso-rls-area-trigger span,
#dialog-add-area .acesso-rls-area-country-option span,
#dialog-add-vendedor .acesso-rls-multi-option span,
#dialog-add-geral .acesso-single-option span,
#dialog-add-pais .acesso-single-option span,
#dialog-add-area .acesso-single-option span,
#dialog-add-vendedor .acesso-single-option span,
#dialog-add-cambio .acesso-single-option span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

/* ============================================================
   RLS - ajuste final solicitado: dialog +Adicionar e botão Salvar
   ============================================================
   - mantém os dialogs +Adicionar no tamanho padrão antigo da aplicação;
   - força o Salvar das abas RLS editáveis a ter o mesmo porte visual do
     Salvar da aba Acesso, sem herdar fonte grande do container.
*/
#dialog-add-geral,
#dialog-add-pais,
#dialog-add-area,
#dialog-add-vendedor,
#dialog-add-cambio {
    width: min(540px, calc(100vw - 36px)) !important;
}

.rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-light .rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn {
    color: var(--bg) !important;
}

/* ============================================================
   RLS - +Adicionar: dropdown aberto sempre acima dos campos/botões
   ============================================================
   Corrige o caso em que a listagem aberta do primeiro campo ficava atrás
   do dropdown/botões posicionados abaixo dentro do mesmo dialog.
*/
#dialog-add-geral,
#dialog-add-pais,
#dialog-add-area,
#dialog-add-vendedor,
#dialog-add-geral .dialog-form,
#dialog-add-pais .dialog-form,
#dialog-add-area .dialog-form,
#dialog-add-vendedor .dialog-form,
#dialog-add-cambio .dialog-form {
    overflow: visible !important;
    isolation: isolate !important;
}

#dialog-add-geral .dialog-form,
#dialog-add-pais .dialog-form,
#dialog-add-area .dialog-form,
#dialog-add-vendedor .dialog-form,
#dialog-add-cambio .dialog-form {
    position: relative !important;
}

#dialog-add-geral label,
#dialog-add-pais label,
#dialog-add-area label,
#dialog-add-vendedor label,
#dialog-add-cambio label,
#dialog-add-geral .dialog-actions,
#dialog-add-pais .dialog-actions,
#dialog-add-area .dialog-actions,
#dialog-add-vendedor .dialog-actions,
#dialog-add-cambio .dialog-actions {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

#dialog-add-geral label:has(.acesso-single-details[open]),
#dialog-add-pais label:has(.acesso-single-details[open]),
#dialog-add-area label:has(.acesso-single-details[open]),
#dialog-add-vendedor label:has(.acesso-single-details[open]),
#dialog-add-cambio label:has(.acesso-single-details[open]),
#dialog-add-pais label:has(.acesso-rls-multi-details[open]),
#dialog-add-area label:has(.acesso-rls-area-details[open]),
#dialog-add-vendedor label:has(.acesso-rls-multi-details[open]) {
    z-index: 9000 !important;
}

#dialog-add-geral .acesso-single-select,
#dialog-add-pais .acesso-single-select,
#dialog-add-area .acesso-single-select,
#dialog-add-vendedor .acesso-single-select,
#dialog-add-cambio .acesso-single-select,
#dialog-add-pais .acesso-rls-multiselect,
#dialog-add-area .acesso-rls-area-combo,
#dialog-add-vendedor .acesso-rls-multiselect {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
}

#dialog-add-geral .acesso-single-select:has(.acesso-single-details[open]),
#dialog-add-pais .acesso-single-select:has(.acesso-single-details[open]),
#dialog-add-area .acesso-single-select:has(.acesso-single-details[open]),
#dialog-add-vendedor .acesso-single-select:has(.acesso-single-details[open]),
#dialog-add-cambio .acesso-single-select:has(.acesso-single-details[open]),
#dialog-add-pais .acesso-rls-multiselect:has(.acesso-rls-multi-details[open]),
#dialog-add-area .acesso-rls-area-combo:has(.acesso-rls-area-details[open]),
#dialog-add-vendedor .acesso-rls-multiselect:has(.acesso-rls-multi-details[open]) {
    z-index: 9100 !important;
}

#dialog-add-geral .acesso-single-details[open],
#dialog-add-pais .acesso-single-details[open],
#dialog-add-area .acesso-single-details[open],
#dialog-add-vendedor .acesso-single-details[open],
#dialog-add-cambio .acesso-single-details[open],
#dialog-add-pais .acesso-rls-multi-details[open],
#dialog-add-area .acesso-rls-area-details[open],
#dialog-add-vendedor .acesso-rls-multi-details[open] {
    position: relative !important;
    z-index: 9200 !important;
    overflow: visible !important;
}

#dialog-add-geral .acesso-single-details[open] > .acesso-single-menu,
#dialog-add-pais .acesso-single-details[open] > .acesso-single-menu,
#dialog-add-area .acesso-single-details[open] > .acesso-single-menu,
#dialog-add-vendedor .acesso-single-details[open] > .acesso-single-menu,
#dialog-add-cambio .acesso-single-details[open] > .acesso-single-menu,
#dialog-add-pais .acesso-rls-multi-details[open] > .acesso-rls-multi-menu,
#dialog-add-area .acesso-rls-area-details[open] > .acesso-rls-area-combo-menu,
#dialog-add-vendedor .acesso-rls-multi-details[open] > .acesso-rls-multi-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 9300 !important;
}

/* ============================================================
   RLS - opções excluídas nos dropdowns + largura Vendedor
   ============================================================
   - usuários/paises/vendedores inativos aparecem com a mesma cor de
     registros excluídos dentro dos dropdowns customizados;
   - a coluna Vendedor da aba rls_vendedor ganha mais largura somente no
     botão/menu do dropdown, sem alterar fonte, altura ou distribuição da tabela.
*/
.acesso-single-option.inactive,
.acesso-rls-multi-option.inactive,
.acesso-rls-area-country-option.inactive,
#dialog-create-usuario .acesso-single-option.inactive,
#dialog-create-usuario .acesso-rls-multi-option.inactive,
#dialog-create-usuario .acesso-rls-area-country-option.inactive,
#dialog-add-geral .acesso-single-option.inactive,
#dialog-add-pais .acesso-single-option.inactive,
#dialog-add-area .acesso-single-option.inactive,
#dialog-add-vendedor .acesso-single-option.inactive,
#dialog-add-cambio .acesso-single-option.inactive,
#dialog-add-pais .acesso-rls-multi-option.inactive,
#dialog-add-area .acesso-rls-area-country-option.inactive,
#dialog-add-vendedor .acesso-rls-multi-option.inactive,
.rls-bulk-pais-table .acesso-rls-multi-option.inactive,
.rls-bulk-area-table .acesso-rls-area-country-option.inactive,
.rls-bulk-vendedor-table .acesso-rls-multi-option.inactive {
    background-color: var(--inactive-bg) !important;
    color: var(--inactive-fg) !important;
}

.acesso-single-option.inactive span,
.acesso-rls-multi-option.inactive span,
.acesso-rls-area-country-option.inactive span,
#dialog-create-usuario .acesso-single-option.inactive span,
#dialog-create-usuario .acesso-rls-multi-option.inactive span,
#dialog-create-usuario .acesso-rls-area-country-option.inactive span,
#dialog-add-geral .acesso-single-option.inactive span,
#dialog-add-pais .acesso-single-option.inactive span,
#dialog-add-area .acesso-single-option.inactive span,
#dialog-add-vendedor .acesso-single-option.inactive span,
#dialog-add-cambio .acesso-single-option.inactive span,
#dialog-add-pais .acesso-rls-multi-option.inactive span,
#dialog-add-area .acesso-rls-area-country-option.inactive span,
#dialog-add-vendedor .acesso-rls-multi-option.inactive span,
.rls-bulk-pais-table .acesso-rls-multi-option.inactive span,
.rls-bulk-area-table .acesso-rls-area-country-option.inactive span,
.rls-bulk-vendedor-table .acesso-rls-multi-option.inactive span {
    color: var(--inactive-fg) !important;
}

.acesso-single-option.inactive:hover,
.acesso-rls-multi-option.inactive:hover,
.acesso-rls-area-country-option.inactive:hover,
#dialog-create-usuario .acesso-single-option.inactive:hover,
#dialog-create-usuario .acesso-rls-multi-option.inactive:hover,
#dialog-create-usuario .acesso-rls-area-country-option.inactive:hover,
#dialog-add-geral .acesso-single-option.inactive:hover,
#dialog-add-pais .acesso-single-option.inactive:hover,
#dialog-add-area .acesso-single-option.inactive:hover,
#dialog-add-vendedor .acesso-single-option.inactive:hover,
#dialog-add-cambio .acesso-single-option.inactive:hover,
#dialog-add-pais .acesso-rls-multi-option.inactive:hover,
#dialog-add-area .acesso-rls-area-country-option.inactive:hover,
#dialog-add-vendedor .acesso-rls-multi-option.inactive:hover,
.rls-bulk-pais-table .acesso-rls-multi-option.inactive:hover,
.rls-bulk-area-table .acesso-rls-area-country-option.inactive:hover,
.rls-bulk-vendedor-table .acesso-rls-multi-option.inactive:hover {
    background-color: var(--inactive-bg) !important;
    color: var(--inactive-fg) !important;
    filter: brightness(.98);
}

.rls-bulk-vendedor-table .rls-bulk-multiselect,
.rls-bulk-vendedor-table .acesso-rls-multi-details {
    width: min(300px, 100%) !important;
    max-width: 300px !important;
}

.rls-bulk-vendedor-table .acesso-rls-multi-summary {
    max-width: 300px !important;
}

.rls-bulk-vendedor-table .acesso-rls-multi-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   RLS - ajustes finais: Área maior + busca nos dialogs Criar/Adicionar
   ============================================================
   - rls_area: dropdown da coluna Área com a mesma largura da coluna Vendedor;
   - dialogs Criar/Adicionar: campo de busca dentro dos dropdowns customizados;
   - dropdowns diretamente nas tabelas continuam sem campo de busca.
*/
.rls-bulk-area-table .rls-bulk-area-combo,
.rls-bulk-area-table .acesso-rls-area-details {
    width: min(300px, 100%) !important;
    max-width: 300px !important;
}

.rls-bulk-area-table .acesso-rls-area-summary {
    max-width: 300px !important;
}

.rls-bulk-area-table .acesso-rls-area-combo-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#dialog-create-usuario .acesso-dropdown-search-wrap,
#dialog-add-geral .acesso-dropdown-search-wrap,
#dialog-add-pais .acesso-dropdown-search-wrap,
#dialog-add-area .acesso-dropdown-search-wrap,
#dialog-add-vendedor .acesso-dropdown-search-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    display: block !important;
    padding: 4px 4px 7px 4px !important;
    margin: -2px -2px 4px -2px !important;
    background-color: var(--card) !important;
}

#dialog-create-usuario .acesso-dropdown-search,
#dialog-add-geral .acesso-dropdown-search,
#dialog-add-pais .acesso-dropdown-search,
#dialog-add-area .acesso-dropdown-search,
#dialog-add-vendedor .acesso-dropdown-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    outline: none !important;
}

#dialog-create-usuario .acesso-dropdown-search::placeholder,
#dialog-add-geral .acesso-dropdown-search::placeholder,
#dialog-add-pais .acesso-dropdown-search::placeholder,
#dialog-add-area .acesso-dropdown-search::placeholder,
#dialog-add-vendedor .acesso-dropdown-search::placeholder {
    color: var(--detail-text) !important;
    font-weight: 400 !important;
}

#dialog-create-usuario .acesso-dropdown-search:focus,
#dialog-add-geral .acesso-dropdown-search:focus,
#dialog-add-pais .acesso-dropdown-search:focus,
#dialog-add-area .acesso-dropdown-search:focus,
#dialog-add-vendedor .acesso-dropdown-search:focus {
    border-color: var(--gold-dark) !important;
    box-shadow: 0 0 0 2px rgba(5, 46, 104, .10) !important;
}

body.theme-dark #dialog-create-usuario .acesso-dropdown-search:focus,
body.theme-dark #dialog-add-geral .acesso-dropdown-search:focus,
body.theme-dark #dialog-add-pais .acesso-dropdown-search:focus,
body.theme-dark #dialog-add-area .acesso-dropdown-search:focus,
body.theme-dark #dialog-add-vendedor .acesso-dropdown-search:focus {
    box-shadow: 0 0 0 2px rgba(241, 241, 241, .10) !important;
}

/* ============================================================
   RLS - busca digitável no próprio botão dos dialogs Criar/Adicionar
   ============================================================
   - remove a necessidade do box interno "Pesquisar";
   - o próprio campo "Selecione" recebe digitação e filtra a lista;
   - aplicado somente nos dialogs Criar/Adicionar.
*/
#dialog-create-usuario .acesso-summary-search-input,
#dialog-add-geral .acesso-summary-search-input,
#dialog-add-pais .acesso-summary-search-input,
#dialog-add-area .acesso-summary-search-input,
#dialog-add-vendedor .acesso-summary-search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    cursor: text !important;
    box-shadow: none !important;
}

#dialog-create-usuario .acesso-summary-search-input::placeholder,
#dialog-add-geral .acesso-summary-search-input::placeholder,
#dialog-add-pais .acesso-summary-search-input::placeholder,
#dialog-add-area .acesso-summary-search-input::placeholder,
#dialog-add-vendedor .acesso-summary-search-input::placeholder {
    color: inherit !important;
    opacity: 1 !important;
}

#dialog-create-usuario .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-create-usuario .acesso-rls-multi-summary:has(.acesso-summary-search-input),
#dialog-create-usuario .acesso-rls-area-summary:has(.acesso-summary-search-input),
#dialog-add-geral .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-pais .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-area .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-vendedor .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-pais .acesso-rls-multi-summary:has(.acesso-summary-search-input),
#dialog-add-area .acesso-rls-area-summary:has(.acesso-summary-search-input),
#dialog-add-vendedor .acesso-rls-multi-summary:has(.acesso-summary-search-input) {
    cursor: text !important;
}

#dialog-create-usuario .acesso-summary-search-input::-webkit-search-decoration,
#dialog-create-usuario .acesso-summary-search-input::-webkit-search-cancel-button,
#dialog-add-geral .acesso-summary-search-input::-webkit-search-decoration,
#dialog-add-geral .acesso-summary-search-input::-webkit-search-cancel-button,
#dialog-add-pais .acesso-summary-search-input::-webkit-search-decoration,
#dialog-add-pais .acesso-summary-search-input::-webkit-search-cancel-button,
#dialog-add-area .acesso-summary-search-input::-webkit-search-decoration,
#dialog-add-area .acesso-summary-search-input::-webkit-search-cancel-button,
#dialog-add-vendedor .acesso-summary-search-input::-webkit-search-decoration,
#dialog-add-vendedor .acesso-summary-search-input::-webkit-search-cancel-button {
    display: none !important;
}


/* ============================================================
   RLS - correção da busca no próprio campo dos dialogs
   ============================================================
   Quando o JS filtra as opções, força o display none mesmo quando
   regras anteriores usam display:flex nos itens dos dropdowns.
*/
#dialog-create-usuario .search-hidden,
#dialog-add-geral .search-hidden,
#dialog-add-pais .search-hidden,
#dialog-add-area .search-hidden,
#dialog-add-vendedor .search-hidden,
#dialog-create-usuario [data-search-hidden="true"],
#dialog-add-geral [data-search-hidden="true"],
#dialog-add-pais [data-search-hidden="true"],
#dialog-add-area [data-search-hidden="true"],
#dialog-add-vendedor [data-search-hidden="true"] {
    display: none !important;
}


/* ============================================================
   RLS - correção definitiva da busca no próprio dropdown
   ============================================================
   Garante que o input dentro do botão receba digitação/clique
   e que os itens filtrados sumam mesmo com regras anteriores.
*/
#dialog-create-usuario .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-geral .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-pais .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-area .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-add-vendedor .acesso-single-summary:has(.acesso-summary-search-input),
#dialog-create-usuario .acesso-rls-multi-summary:has(.acesso-summary-search-input),
#dialog-add-pais .acesso-rls-multi-summary:has(.acesso-summary-search-input),
#dialog-add-vendedor .acesso-rls-multi-summary:has(.acesso-summary-search-input),
#dialog-create-usuario .acesso-rls-area-summary:has(.acesso-summary-search-input),
#dialog-add-area .acesso-rls-area-summary:has(.acesso-summary-search-input) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

#dialog-create-usuario .acesso-summary-search-input,
#dialog-add-geral .acesso-summary-search-input,
#dialog-add-pais .acesso-summary-search-input,
#dialog-add-area .acesso-summary-search-input,
#dialog-add-vendedor .acesso-summary-search-input {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#dialog-create-usuario .search-hidden,
#dialog-add-geral .search-hidden,
#dialog-add-pais .search-hidden,
#dialog-add-area .search-hidden,
#dialog-add-vendedor .search-hidden,
#dialog-create-usuario [data-search-hidden="true"],
#dialog-add-geral [data-search-hidden="true"],
#dialog-add-pais [data-search-hidden="true"],
#dialog-add-area [data-search-hidden="true"],
#dialog-add-vendedor [data-search-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================================
   Área do Vendedor - edição direta na tabela
   ============================================================
   Mantém o layout no mesmo padrão das abas RLS editáveis, sem botão Editar,
   com Área e País em dropdowns separados e botão Salvar à esquerda.
*/
.rls-area-vendedor-bulk-table {
    width: 100% !important;
    min-width: 860px !important;
    table-layout: fixed !important;
}

.rls-area-vendedor-bulk-table .area-vendedor-col-vendedor,
.rls-area-vendedor-bulk-table th:first-child,
.rls-area-vendedor-bulk-table td.rls-area-vendedor-user-cell {
    width: 34% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.rls-area-vendedor-bulk-table .area-vendedor-col-area,
.rls-area-vendedor-bulk-table .area-vendedor-col-pais,
.rls-area-vendedor-bulk-table th:nth-child(2),
.rls-area-vendedor-bulk-table th:nth-child(3),
.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: left !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

.rls-area-vendedor-bulk-table .area-vendedor-col-actions,
.rls-area-vendedor-bulk-table th.actions-th,
.rls-area-vendedor-bulk-table td.row-actions {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    padding-left: 12px !important;
    padding-right: 14px !important;
    text-align: right !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.rls-area-vendedor-bulk-table tbody td.rls-area-vendedor-user-cell {
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

.rls-area-vendedor-bulk-table tbody td.rls-area-vendedor-user-cell .rls-user-name {
    display: block !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.rls-area-vendedor-bulk-table tbody td.rls-area-vendedor-user-cell .usuario-sufixo {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: var(--detail-text) !important;
}

.rls-area-vendedor-bulk-table td.row-actions .danger.small {
    min-width: auto !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.rls-area-vendedor-bulk-table .acesso-single-select,
.rls-area-vendedor-bulk-table .acesso-single-details {
    position: relative !important;
    width: min(215px, 100%) !important;
    min-width: 0 !important;
    max-width: 215px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.rls-area-vendedor-bulk-table .acesso-single-summary {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 215px !important;
    min-height: 26px !important;
    height: auto !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 5px 26px 5px 8px !important;
    border-radius: 6px !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.rls-area-vendedor-bulk-table .acesso-single-select.placeholder .acesso-single-summary {
    font-weight: 400 !important;
}

.rls-area-vendedor-bulk-table .acesso-single-summary::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: translateY(-65%) rotate(45deg) !important;
    transition: transform .15s ease !important;
    flex: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.rls-area-vendedor-bulk-table .acesso-single-details[open] > .acesso-single-summary::after {
    transform: translateY(-35%) rotate(-135deg) !important;
}

.rls-area-vendedor-bulk-table .acesso-single-details[open] > .acesso-single-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 3000 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell:has(.acesso-single-details[open]) {
    position: relative !important;
    z-index: 2900 !important;
    overflow: visible !important;
}

.rls-area-vendedor-bulk-table .acesso-single-option {
    min-height: 30px !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 5px 6px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.rls-area-vendedor-bulk-table .acesso-single-option span {
    display: inline !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

.rls-area-vendedor-bulk-table .acesso-single-option.inactive,
.rls-area-vendedor-bulk-table .acesso-single-option.inactive:hover {
    background-color: var(--inactive-bg) !important;
    color: var(--inactive-fg) !important;
}

.rls-area-vendedor-bulk-table .acesso-single-option.inactive span {
    color: var(--inactive-fg) !important;
}

.rls-area-vendedor-actions-row {
    justify-content: space-between !important;
    margin-top: 10px !important;
}

.rls-area-vendedor-actions-row .actions-left {
    margin-right: auto !important;
}


/* ============================================================
   Ajuste final - Área do Vendedor e Valores de Câmbio
   ============================================================ */
.rls-area-vendedor-bulk-table .rls-area-vendedor-select-cell .acesso-single-select,
.rls-area-vendedor-bulk-table .rls-area-vendedor-select-cell .acesso-single-details,
.rls-area-vendedor-bulk-table .rls-area-vendedor-select-cell .acesso-single-summary,
.rls-area-vendedor-bulk-table .rls-area-vendedor-select-cell .acesso-single-menu {
    width: 215px !important;
    min-width: 0 !important;
    max-width: 215px !important;
}

.cambio-valores-table {
    width: 100% !important;
    min-width: 760px !important;
    table-layout: fixed !important;
}

.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: 34% !important;
}

.cambio-valores-table .cambio-col-ano,
.cambio-valores-table th:nth-child(2),
.cambio-valores-table tbody td:nth-child(2) {
    width: 16% !important;
}

.cambio-valores-table .cambio-col-valor,
.cambio-valores-table th:nth-child(3),
.cambio-valores-table tbody td.cambio-inline-cell {
    width: auto !important;
}

.cambio-valores-table .cambio-col-actions,
.cambio-valores-table th.actions-th,
.cambio-valores-table td.row-actions {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.cambio-valores-table td.row-actions .danger.small,
.cambio-valores-table th.actions-th .primary.small {
    min-width: auto !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.cambio-valores-table th.actions-th .primary.small {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
}

.cambio-inline-cell {
    position: relative !important;
    vertical-align: middle !important;
}

.cambio-inline-input {
    width: 215px !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    outline: none !important;
}

.cambio-inline-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(241, 189, 75, .18) !important;
}

.cambio-inline-cell.cambio-cell-dirty {
    box-shadow: inset 0 -3px 0 rgba(241, 189, 75, .72) !important;
}

body.theme-dark .cambio-inline-cell.cambio-cell-dirty {
    background-color: rgba(241, 189, 75, .16) !important;
}

.cambio-actions-row {
    justify-content: space-between !important;
    margin-top: 10px !important;
}

.cambio-actions-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-right: auto !important;
}

.cambio-feedback {
    margin: 0 !important;
    font-size: 12px !important;
}

#dialog-add-cambio {
    width: min(540px, calc(100vw - 36px)) !important;
}

/* ============================================================
   Correção final - Câmbio igual ao padrão de Substituições
   ============================================================ */
.cambio-valores-table {
    width: 100% !important;
    min-width: 760px !important;
    table-layout: fixed !important;
}

.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: auto !important;
}

.cambio-valores-table .cambio-col-ano,
.cambio-valores-table th:nth-child(2),
.cambio-valores-table tbody td:nth-child(2) {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.cambio-valores-table .cambio-col-valor,
.cambio-valores-table th:nth-child(3),
.cambio-valores-table tbody td.cambio-inline-cell {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

.cambio-valores-table .cambio-col-actions,
.cambio-valores-table th.actions-th,
.cambio-valores-table td.row-actions {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.cambio-valores-table th.actions-th {
    padding-right: 12px !important;
}

.cambio-valores-table th.actions-th .primary.small,
.cambio-valores-table td.row-actions .danger.small {
    margin-left: auto !important;
}

.cambio-valores-table td.row-actions {
    padding-right: 12px !important;
}

.cambio-valores-table td[data-cambio-editable-cell] {
    cursor: text !important;
    border: 0 !important;
    outline: 0;
    background-color: var(--row-bg) !important;
    box-shadow: none;
}

.cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing {
    background-color: rgba(241, 189, 75, .22) !important;
    outline: 2px solid rgba(241, 189, 75, .72) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing,
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing {
    background-color: #454545 !important;
    color: #d4dce8 !important;
    outline: 2px solid #a7a7a7 !important;
    outline-offset: -2px !important;
}

.cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty {
    background-color: var(--row-bg) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 rgba(241, 189, 75, .72) !important;
}

body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty,
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty {
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

.cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error {
    background-color: rgba(146, 47, 37, .18) !important;
    outline: 2px solid var(--btn-red) !important;
    outline-offset: -2px !important;
}

.cambio-inline-input {
    display: none !important;
}

.cambio-actions-row {
    justify-content: space-between !important;
    margin-top: -4px !important;
    margin-bottom: 18px !important;
}

.cambio-actions-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-right: auto !important;
}

/* ============================================================
   Ajuste final - Câmbio: país/ano e ações
   ============================================================ */
.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;
}

.cambio-valores-table .cambio-col-ano,
.cambio-valores-table th:nth-child(2),
.cambio-valores-table tbody td:nth-child(2) {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
}

.cambio-valores-table .cambio-col-actions,
.cambio-valores-table th.actions-th,
.cambio-valores-table td.row-actions {
    width: auto !important;
    min-width: 300px !important;
    max-width: none !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.cambio-valores-table th.actions-th .th-content,
.cambio-valores-table td.row-actions {
    justify-content: flex-end !important;
}

.cambio-valores-table td[data-cambio-editable-cell] {
    border: 0 !important;
    border-bottom: 1px solid rgba(128, 128, 128, .15) !important;
}

.cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing {
    border-bottom: 1px solid rgba(128, 128, 128, .15) !important;
}

.cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty {
    border-bottom: 1px solid rgba(128, 128, 128, .15) !important;
    box-shadow: inset 0 -3px 0 rgba(241, 189, 75, .72) !important;
}

body.theme-dark .cambio-valores-table td[data-cambio-editable-cell],
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell] {
    border-bottom: 1px solid rgba(167, 167, 167, .18) !important;
}

body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty,
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty {
    border-bottom: 1px solid rgba(167, 167, 167, .18) !important;
    box-shadow: inset 0 -3px 0 #a7a7a7 !important;
}

/* ============================================================
   Ajuste final - Câmbio: subir botões inferiores
   ============================================================ */
.cambio-valores-bottom-actions,
.cambio-valores-table + .actions-row,
.cambio-valores-table-card + .actions-row {
    margin-top: 1px !important;
}
/* ============================================================
   Correção final - Câmbio: diminuir altura da tabela
   ============================================================
   O ajuste é vertical: a tabela de Câmbio fica um pouco mais baixa
   para que a linha de ações (Salvar/Download) caiba na tela sem gerar
   scroll vertical da página. O scroll, quando houver muitas linhas,
   fica dentro do card da tabela.
*/
.rls-table-card.cambio-valores-table-card,
.rls-table-card:has(.cambio-valores-table) {
    height: calc(107vh - 155px) !important;
    min-height: calc(107vh - 155px) !important;
    max-height: calc(107vh - 155px) !important;
    margin-bottom: 15px !important;
    overflow-y: auto !important;
}

.cambio-actions-row,
.cambio-valores-bottom-actions,
.cambio-valores-table-card + .actions-row,
.rls-table-card:has(.cambio-valores-table) + .actions-row {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   Ajuste final - Substituições: botões inferiores padronizados
   ============================================================ */
.substituicoes-bottom-actions {
    align-items: center !important;
    gap: 10px !important;
}

.substituicoes-bottom-actions button[data-substituicoes-add-row],
.substituicoes-bottom-actions button[data-substituicoes-save] {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Salvar verde igual ao padrão das outras abas. */
.substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-light .substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save] {
    background-color: var(--btn-green) !important;
    border: 1px solid var(--btn-green) !important;
    color: var(--btn-text) !important;
}

body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save] {
    color: var(--bg) !important;
}

/* +Adicionar Linha no mesmo tamanho/formato, mantendo a cor original de botão secundário. */
.substituicoes-bottom-actions button[data-substituicoes-add-row],
body.theme-light .substituicoes-bottom-actions button[data-substituicoes-add-row],
body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-add-row] {
    background: transparent !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
}

body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-add-row] {
    border-color: #f1f1f1 !important;
    color: #f1f1f1 !important;
}

.substituicoes-bottom-actions button[data-substituicoes-add-row]:hover,
.substituicoes-bottom-actions button[data-substituicoes-save]:hover {
    filter: brightness(.95) !important;
}

.substituicoes-bottom-actions button[data-substituicoes-save]:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
}

/* ============================================================
   Correção final - Substituições: botões Salvar e +Adicionar Linha
   ============================================================
   Mantém os botões inferiores com o mesmo porte dos botões Salvar
   das demais páginas: altura compacta, fonte menor e padding controlado.
   O botão +Adicionar Linha acompanha tamanho/formato, mas preserva a cor
   de botão secundário.
*/
.substituicoes-bottom-actions {
    align-items: center !important;
    gap: 10px !important;
}

.substituicoes-bottom-actions button[data-substituicoes-save],
.substituicoes-bottom-actions button[data-substituicoes-add-row] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-light .substituicoes-bottom-actions button[data-substituicoes-save] {
    background-color: var(--btn-green) !important;
    border: 1px solid var(--btn-green) !important;
    color: #ffffff !important;
}

body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save] {
    background-color: var(--btn-green) !important;
    border: 1px solid var(--btn-green) !important;
    color: var(--bg) !important;
}

.substituicoes-bottom-actions button[data-substituicoes-add-row],
body.theme-light .substituicoes-bottom-actions button[data-substituicoes-add-row] {
    background: transparent !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
}

body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-add-row] {
    background: transparent !important;
    border: 1px solid #f1f1f1 !important;
    color: #f1f1f1 !important;
}

.substituicoes-bottom-actions button[data-substituicoes-save]:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
}


/* ============================================================
   Ajuste final - Geolocalização no padrão das Substituições
   ============================================================ */
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .geolocalizacao-top-actions,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .geolocalizacao-detalhamento-button,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .geolocalizacao-detalhamento-dialog,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-add-row] {
    display: none !important;
}

/* A tabela de Geolocalização volta a ter a mesma altura das demais abas de Substituições. */
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .rls-table-card.geolocalizacao-table-card,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .geolocalizacao-table-card.rls-table-card,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] div.table-card.rls-table-card.geolocalizacao-table-card {
    height: calc(105vh - 150px) !important;
    min-height: calc(105vh - 150px) !important;
    max-height: calc(105vh - 150px) !important;
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-bottom-actions {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* Em Geolocalização, fica somente o botão Salvar no padrão compacto das outras páginas. */
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background-color: var(--btn-green) !important;
    border: 1px solid var(--btn-green) !important;
    color: #ffffff !important;
}

body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
html[data-theme="dark"] body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save] {
    color: var(--bg) !important;
}

/* ============================================================
   Geolocalização - carregamento sequencial
   ============================================================ */
.geolocalizacao-loading {
    margin: 0;
    color: var(--subtitle);
    font-size: 11.5px;
    font-weight: 600;
}

/* ============================================================
   Ajuste final - posicionamento da coluna de ações
   ============================================================ */
/* Mantém a coluna de ações no limite direito visível da tabela.
   A posição sticky evita precisar rolar horizontalmente para localizar
   +Criar/+Adicionar/Excluir em tabelas mais largas. */
.rls-usuarios-table th.actions-th,
.rls-geral-table th.actions-th,
.rls-bulk-pais-table th.actions-th,
.rls-bulk-area-table th.actions-th,
.rls-bulk-vendedor-table th.actions-th,
.rls-area-vendedor-bulk-table th.actions-th,
.cambio-valores-table th.actions-th {
    position: sticky !important;
    right: 0 !important;
    z-index: 80 !important;
    background-color: var(--gold-dark) !important;
    background-clip: padding-box !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.rls-usuarios-table td.row-actions,
.rls-geral-table td.row-actions,
.rls-bulk-pais-table td.row-actions,
.rls-bulk-area-table td.row-actions,
.rls-bulk-vendedor-table td.row-actions,
.rls-area-vendedor-bulk-table td.row-actions,
.cambio-valores-table td.row-actions {
    position: sticky !important;
    right: 0 !important;
    z-index: 35 !important;
    background-color: var(--row-bg) !important;
    background-clip: padding-box !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.rls-usuarios-table tbody tr.inactive td.row-actions,
.rls-geral-table tbody tr.inactive td.row-actions,
.rls-bulk-pais-table tbody tr.inactive td.row-actions,
.rls-bulk-area-table tbody tr.inactive td.row-actions,
.rls-bulk-vendedor-table tbody tr.inactive td.row-actions,
.rls-area-vendedor-bulk-table tbody tr.inactive td.row-actions,
.cambio-valores-table tbody tr.inactive td.row-actions {
    background-color: var(--inactive-bg) !important;
}

/* Acesso e Câmbio: estavam muito à esquerda; ficam alinhados ao limite direito. */
.rls-usuarios-table th.actions-th,
.rls-usuarios-table td.row-actions,
.cambio-valores-table th.actions-th,
.cambio-valores-table td.row-actions {
    padding-left: 8px !important;
    padding-right: 14px !important;
    text-align: right !important;
}

/* Geral, País, Área, Vendedor e Área do Vendedor:
   estavam muito à direita; entram um pouco, mas seguem no limite visível da tabela. */
.rls-geral-table th.actions-th,
.rls-geral-table td.row-actions,
.rls-bulk-pais-table th.actions-th,
.rls-bulk-pais-table td.row-actions,
.rls-bulk-area-table th.actions-th,
.rls-bulk-area-table td.row-actions,
.rls-bulk-vendedor-table th.actions-th,
.rls-bulk-vendedor-table td.row-actions,
.rls-area-vendedor-bulk-table th.actions-th,
.rls-area-vendedor-bulk-table td.row-actions {
    padding-left: 8px !important;
    padding-right: 34px !important;
    text-align: right !important;
}

/* Câmbio: deixa +Adicionar no mesmo tamanho visual dos demais botões de adicionar/criar. */
.cambio-valores-table th.actions-th .primary.small {
    min-width: 35px !important;
    min-height: 35px !important;
    height: 35px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Câmbio: Excluir no mesmo padrão dos demais Excluir das tabelas RLS. */
.cambio-valores-table td.row-actions .danger.small {
    min-width: auto !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.rls-usuarios-table th.actions-th .primary.small,
.rls-geral-table th.actions-th .primary.small,
.rls-bulk-pais-table th.actions-th .primary.small,
.rls-bulk-area-table th.actions-th .primary.small,
.rls-bulk-vendedor-table th.actions-th .primary.small,
.rls-area-vendedor-bulk-table th.actions-th .primary.small,
.cambio-valores-table th.actions-th .primary.small,
.rls-usuarios-table td.row-actions .danger.small,
.rls-geral-table td.row-actions .danger.small,
.rls-bulk-pais-table td.row-actions .danger.small,
.rls-bulk-area-table td.row-actions .danger.small,
.rls-bulk-vendedor-table td.row-actions .danger.small,
.rls-area-vendedor-bulk-table td.row-actions .danger.small,
.cambio-valores-table td.row-actions .danger.small {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Correção - Acesso e Câmbio: coluna de ações compacta
   ============================================================
   A coluna de botões dessas duas telas estava maior que o padrão
   das tabelas Geral/País/Área/Vendedor. Como a coluna é sticky à
   direita, reduzir a largura move a borda esquerda para a direita,
   evitando que ela avance sobre a coluna anterior em telas menores.
*/
.rls-usuarios-table .usuarios-col-actions,
.rls-usuarios-table th.actions-th,
.rls-usuarios-table td.row-actions,
.cambio-valores-table .cambio-col-actions,
.cambio-valores-table th.actions-th,
.cambio-valores-table td.row-actions {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    padding-left: 12px !important;
    padding-right: 14px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.rls-usuarios-table th.actions-th .th-content,
.cambio-valores-table th.actions-th .th-content {
    justify-content: flex-end !important;
}

.rls-usuarios-table td.row-actions,
.cambio-valores-table td.row-actions {
    vertical-align: middle !important;
}

/* A largura mínima da tabela de Acesso acompanha a redução da coluna
   de ações: antes eram 1420px, com a coluna de ações em 250px. */
.usuarios-margem-table {
    min-width: 1320px !important;
}

/* ============================================================
   Ajuste fino - Acesso e Valores de Câmbio
   ============================================================
   Câmbio: reduz a coluna País e entrega espaço para o restante da tabela.
   Acesso: reduz um pouco Usuário e reduz mais a coluna de ações/excluir.
*/
.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
}

.rls-usuarios-table .usuarios-col-usuario,
.rls-usuarios-table th:nth-child(1),
.rls-usuarios-table tbody td:nth-child(1) {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
}

.rls-usuarios-table .usuarios-col-actions,
.rls-usuarios-table th.actions-th,
.rls-usuarios-table td.row-actions {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    padding-left: 6px !important;
    padding-right: 10px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.rls-usuarios-table th.actions-th .th-content,
.rls-usuarios-table td.row-actions {
    justify-content: flex-end !important;
}

/* Nova largura mínima: 350 + 160 + 150 + 150 + 330 + 120. */
.usuarios-margem-table {
    min-width: 1260px !important;
}

/* ============================================================
   Ajuste fino v3 - Acesso: coluna Excluir mais compacta
   ============================================================
   Reduz novamente apenas a coluna de ações da página Acesso.
   Como a coluna é sticky à direita e os botões seguem alinhados à direita,
   a redução acontece no lado esquerdo da coluna.
*/
.rls-usuarios-table .usuarios-col-actions,
.rls-usuarios-table th.actions-th,
.rls-usuarios-table td.row-actions {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding-left: 4px !important;
    padding-right: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.rls-usuarios-table th.actions-th .th-content,
.rls-usuarios-table td.row-actions {
    justify-content: flex-end !important;
}

/* Nova largura mínima: 350 + 160 + 150 + 150 + 330 + 100. */
.usuarios-margem-table {
    min-width: 1240px !important;
}

/* ============================================================
   Ajuste fino v4 - Acesso: coluna Usuário menor
   ============================================================
   Reduz apenas a coluna Usuário da página Acesso.
   Mantém os ajustes anteriores da coluna Excluir/+Criar.
*/
.rls-usuarios-table .usuarios-col-usuario,
.rls-usuarios-table th:nth-child(1),
.rls-usuarios-table tbody td:nth-child(1) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

/* Nova largura mínima: 300 + 160 + 150 + 150 + 330 + 100. */
.usuarios-margem-table {
    min-width: 1190px !important;
}

/* ============================================================
   Ajuste fino v5 - Valores de Câmbio: País e Ano menores
   ============================================================
   Reduz somente as colunas País e Ano.
   Mantém a coluna de ações/botões exatamente como está.
*/
.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
}

.cambio-valores-table .cambio-col-ano,
.cambio-valores-table th:nth-child(2),
.cambio-valores-table tbody td:nth-child(2) {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

/* ============================================================
   Ajuste fino v6 - Valores de Câmbio: País bem menor
   ============================================================
   Reduz bastante somente a coluna País.
   Mantém Ano e a coluna de ações/botões como estavam no v5.
*/
.cambio-valores-table .cambio-col-pais,
.cambio-valores-table th:nth-child(1),
.cambio-valores-table tbody td:nth-child(1) {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

/* ============================================================
   Ajuste final v8 - Altura das tabelas e posição dos botões
   ============================================================
   Referência visual: rls_geral, rls_pais, rls_area_nova,
   rls_vendedor e rls_area_vendedor.

   Câmbio e Substituições estavam com regras próprias de altura/margem,
   deixando a tabela menor e puxando Salvar/Download para cima.
   Esta regra final força essas páginas a usar o mesmo padrão vertical
   das tabelas RLS que já estão corretas.
*/
.substituicoes-root .rls-table-card,
.substituicoes-root .table-card.rls-table-card,
.rls-table-card.cambio-valores-table-card,
.cambio-valores-table-card.rls-table-card,
.rls-table-card:has(.cambio-valores-table) {
    height: calc(100vh - 92px) !important;
    min-height: calc(100vh - 92px) !important;
    max-height: calc(100vh - 92px) !important;
    margin-bottom: 18px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.substituicoes-root .substituicoes-bottom-actions,
.cambio-actions-row,
.cambio-valores-bottom-actions,
.cambio-valores-table-card + .actions-row,
.rls-table-card:has(.cambio-valores-table) + .actions-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.substituicoes-root .substituicoes-bottom-actions .actions-left,
.cambio-actions-row .actions-left,
.cambio-actions-left {
    margin-right: auto !important;
}

/* ============================================================
   Ajuste fino v9 - Geolocalização no mesmo padrão das tabelas RLS
   ============================================================
   Referência visual: rls_geral, rls_pais, rls_area_nova,
   rls_vendedor e rls_area_vendedor.

   A página de Geolocalização tinha regras antigas próprias
   (.geolocalizacao-table-card e substituicoes_geolocalizacao)
   que deixavam a tabela menor e puxavam os botões Salvar/Download
   para cima. Esta sobrescrita fica no final do CSS para ganhar
   de todas as regras anteriores.
*/
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .table-card.rls-table-card.geolocalizacao-table-card,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .rls-table-card.geolocalizacao-table-card,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .geolocalizacao-table-card.rls-table-card,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] div.table-card.rls-table-card.geolocalizacao-table-card {
    height: calc(100vh - 92px) !important;
    min-height: calc(100vh - 92px) !important;
    max-height: calc(100vh - 92px) !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-bottom-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-bottom-actions button[data-substituicoes-save],
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-bottom-actions .substituicoes-download-link {
    align-self: center !important;
}

/* ============================================================
   Ajuste final v10 - Cores dos botões Salvar e Download
   ============================================================
   Regra única no final do CSS para ganhar de ajustes antigos.
   Salvar = verde. Download = amarelo.
   Usa os tons já definidos nas variáveis de tema:
   --btn-green e --btn-yellow.
*/

/* SALVAR - Acesso, Margem/RLS Usuários, RLS editáveis, Área do Vendedor,
   Valores de Câmbio, Substituições e Geolocalização. */
.margem-save-btn,
.usuarios-bottom-actions .margem-save-btn,
.rls-bulk-actions-row .rls-bulk-save-btn,
.rls-area-vendedor-actions-row .rls-bulk-save-btn,
.cambio-actions-row .rls-bulk-save-btn,
.substituicoes-bottom-actions button[data-substituicoes-save],
.substituicoes-bottom-actions .primary[data-substituicoes-save],
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save] {
    background-color: var(--btn-green) !important;
    background: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
}

/* DOWNLOAD - RLS, Acesso, Câmbio, Substituições e Geolocalização. */
.actions-row .actions-right .link-btn.secondary,
.actions-row .dual-downloads .link-btn.secondary,
.usuarios-bottom-actions .link-btn.secondary,
.rls-bulk-actions-row .actions-right .link-btn.secondary,
.rls-area-vendedor-actions-row .actions-right .link-btn.secondary,
.cambio-actions-row .actions-right .link-btn.secondary,
.substituicoes-bottom-actions .substituicoes-download-link,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-download-link {
    background-color: var(--btn-yellow) !important;
    background: var(--btn-yellow) !important;
    border-color: var(--btn-yellow) !important;
    color: var(--btn-text) !important;
}

/* Tema escuro: os tons dos botões já são mais claros, então o texto fica escuro,
   seguindo o padrão que o próprio arquivo já usa nos botões coloridos. */
body.theme-dark .margem-save-btn,
body.theme-dark .usuarios-bottom-actions .margem-save-btn,
body.theme-dark .rls-bulk-actions-row .rls-bulk-save-btn,
body.theme-dark .rls-area-vendedor-actions-row .rls-bulk-save-btn,
body.theme-dark .cambio-actions-row .rls-bulk-save-btn,
body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-dark .substituicoes-bottom-actions .primary[data-substituicoes-save],
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
html[data-theme="dark"] body .margem-save-btn,
html[data-theme="dark"] body .usuarios-bottom-actions .margem-save-btn,
html[data-theme="dark"] body .rls-bulk-actions-row .rls-bulk-save-btn,
html[data-theme="dark"] body .rls-area-vendedor-actions-row .rls-bulk-save-btn,
html[data-theme="dark"] body .cambio-actions-row .rls-bulk-save-btn,
html[data-theme="dark"] body .substituicoes-bottom-actions button[data-substituicoes-save],
html[data-theme="dark"] body .substituicoes-bottom-actions .primary[data-substituicoes-save],
html[data-theme="dark"] body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
body.theme-dark .actions-row .actions-right .link-btn.secondary,
body.theme-dark .actions-row .dual-downloads .link-btn.secondary,
body.theme-dark .usuarios-bottom-actions .link-btn.secondary,
body.theme-dark .rls-bulk-actions-row .actions-right .link-btn.secondary,
body.theme-dark .rls-area-vendedor-actions-row .actions-right .link-btn.secondary,
body.theme-dark .cambio-actions-row .actions-right .link-btn.secondary,
body.theme-dark .substituicoes-bottom-actions .substituicoes-download-link,
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-download-link,
html[data-theme="dark"] body .actions-row .actions-right .link-btn.secondary,
html[data-theme="dark"] body .actions-row .dual-downloads .link-btn.secondary,
html[data-theme="dark"] body .usuarios-bottom-actions .link-btn.secondary,
html[data-theme="dark"] body .rls-bulk-actions-row .actions-right .link-btn.secondary,
html[data-theme="dark"] body .rls-area-vendedor-actions-row .actions-right .link-btn.secondary,
html[data-theme="dark"] body .cambio-actions-row .actions-right .link-btn.secondary,
html[data-theme="dark"] body .substituicoes-bottom-actions .substituicoes-download-link,
html[data-theme="dark"] body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] .substituicoes-download-link {
    color: var(--bg) !important;
}

/* Estados de hover e disabled preservados para os botões padronizados. */
.margem-save-btn:hover,
.rls-bulk-actions-row .rls-bulk-save-btn:hover,
.rls-area-vendedor-actions-row .rls-bulk-save-btn:hover,
.cambio-actions-row .rls-bulk-save-btn:hover,
.substituicoes-bottom-actions button[data-substituicoes-save]:hover,
.actions-row .actions-right .link-btn.secondary:hover,
.actions-row .dual-downloads .link-btn.secondary:hover,
.usuarios-bottom-actions .link-btn.secondary:hover,
.rls-bulk-actions-row .actions-right .link-btn.secondary:hover,
.rls-area-vendedor-actions-row .actions-right .link-btn.secondary:hover,
.cambio-actions-row .actions-right .link-btn.secondary:hover,
.substituicoes-bottom-actions .substituicoes-download-link:hover {
    filter: brightness(.95) !important;
}

.margem-save-btn:disabled,
.rls-bulk-actions-row .rls-bulk-save-btn:disabled,
.rls-area-vendedor-actions-row .rls-bulk-save-btn:disabled,
.cambio-actions-row .rls-bulk-save-btn:disabled,
.substituicoes-bottom-actions button[data-substituicoes-save]:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
}

/* ============================================================
   Correção final v11 - FORÇAR botão Salvar verde
   ============================================================
   Esta regra fica no fim do arquivo para ganhar de qualquer ajuste antigo
   que ainda deixe Salvar em cor antiga.
*/
button.margem-save-btn,
button[form="margem-save-form"],
button.rls-bulk-save-btn,
button.primary.rls-bulk-save-btn,
button.primary.small.rls-bulk-save-btn,
button[form="rls-pais-bulk-form"],
button[form="rls-area-bulk-form"],
button[form="rls-vendedor-bulk-form"],
button[form="rls-area-vendedor-bulk-form"],
button[form="cambio-bulk-form"],
button[data-cambio-save],
button[data-substituicoes-save],
button.primary[data-substituicoes-save],
button.primary.small[data-substituicoes-save],
.usuarios-bottom-actions button.margem-save-btn,
.rls-bulk-actions-row button.rls-bulk-save-btn,
.rls-area-vendedor-actions-row button.rls-bulk-save-btn,
.cambio-actions-row button.rls-bulk-save-btn,
.substituicoes-bottom-actions button[data-substituicoes-save],
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save] {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    border: 1px solid var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
}

/* Mantém Download amarelo, sem afetar o Salvar. */
a.link-btn.secondary[href*="download"],
a.substituicoes-download-link,
.actions-row .actions-right a.link-btn.secondary,
.actions-row .dual-downloads a.link-btn.secondary,
.usuarios-bottom-actions a.link-btn.secondary,
.rls-bulk-actions-row .actions-right a.link-btn.secondary,
.rls-area-vendedor-actions-row .actions-right a.link-btn.secondary,
.cambio-actions-row .actions-right a.link-btn.secondary,
.substituicoes-bottom-actions a.substituicoes-download-link,
.substituicoes-root[data-page-name="substituicoes_geolocalizacao"] a.substituicoes-download-link {
    background: var(--btn-yellow) !important;
    background-color: var(--btn-yellow) !important;
    background-image: none !important;
    border: 1px solid var(--btn-yellow) !important;
    border-color: var(--btn-yellow) !important;
    color: var(--btn-text) !important;
}

body.theme-dark button.margem-save-btn,
body.theme-dark button[form="margem-save-form"],
body.theme-dark button.rls-bulk-save-btn,
body.theme-dark button.primary.rls-bulk-save-btn,
body.theme-dark button.primary.small.rls-bulk-save-btn,
body.theme-dark button[form="rls-pais-bulk-form"],
body.theme-dark button[form="rls-area-bulk-form"],
body.theme-dark button[form="rls-vendedor-bulk-form"],
body.theme-dark button[form="rls-area-vendedor-bulk-form"],
body.theme-dark button[form="cambio-bulk-form"],
body.theme-dark button[data-cambio-save],
body.theme-dark button[data-substituicoes-save],
body.theme-dark button.primary[data-substituicoes-save],
body.theme-dark button.primary.small[data-substituicoes-save],
body.theme-dark .usuarios-bottom-actions button.margem-save-btn,
body.theme-dark .rls-bulk-actions-row button.rls-bulk-save-btn,
body.theme-dark .rls-area-vendedor-actions-row button.rls-bulk-save-btn,
body.theme-dark .cambio-actions-row button.rls-bulk-save-btn,
body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
body.theme-dark a.link-btn.secondary[href*="download"],
body.theme-dark a.substituicoes-download-link,
body.theme-dark .actions-row .actions-right a.link-btn.secondary,
body.theme-dark .actions-row .dual-downloads a.link-btn.secondary,
body.theme-dark .usuarios-bottom-actions a.link-btn.secondary,
body.theme-dark .rls-bulk-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .rls-area-vendedor-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .cambio-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .substituicoes-bottom-actions a.substituicoes-download-link,
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] a.substituicoes-download-link,
html[data-theme="dark"] body button.margem-save-btn,
html[data-theme="dark"] body button[form="margem-save-form"],
html[data-theme="dark"] body button.rls-bulk-save-btn,
html[data-theme="dark"] body button.primary.rls-bulk-save-btn,
html[data-theme="dark"] body button.primary.small.rls-bulk-save-btn,
html[data-theme="dark"] body button[form="rls-pais-bulk-form"],
html[data-theme="dark"] body button[form="rls-area-bulk-form"],
html[data-theme="dark"] body button[form="rls-vendedor-bulk-form"],
html[data-theme="dark"] body button[form="rls-area-vendedor-bulk-form"],
html[data-theme="dark"] body button[form="cambio-bulk-form"],
html[data-theme="dark"] body button[data-cambio-save],
html[data-theme="dark"] body button[data-substituicoes-save],
html[data-theme="dark"] body button.primary[data-substituicoes-save],
html[data-theme="dark"] body button.primary.small[data-substituicoes-save],
html[data-theme="dark"] body a.link-btn.secondary[href*="download"],
html[data-theme="dark"] body a.substituicoes-download-link {
    color: var(--bg) !important;
}

/* ============================================================
   Correção final v12 - Salvar VERDE em todos os pontos
   ============================================================
   Foram removidos/neutralizados os blocos antigos que deixavam Salvar
   amarelo e esta regra fica por último para garantir a prioridade.
   Download continua amarelo.
*/

/* SALVAR - botões inferiores de Acesso, RLS, Área do Vendedor, Câmbio,
   Substituições e Geolocalização. */
html body button.margem-save-btn,
html body button[form="margem-save-form"],
html body .usuarios-bottom-actions button.margem-save-btn,
html body button.rls-bulk-save-btn,
html body button.primary.rls-bulk-save-btn,
html body button.primary.small.rls-bulk-save-btn,
html body button[form="rls-pais-bulk-form"],
html body button[form="rls-area-bulk-form"],
html body button[form="rls-vendedor-bulk-form"],
html body button[form="rls-area-vendedor-bulk-form"],
html body button[form="cambio-bulk-form"],
html body button[data-cambio-save],
html body .rls-bulk-actions-row button.rls-bulk-save-btn,
html body .rls-area-vendedor-actions-row button.rls-bulk-save-btn,
html body .cambio-actions-row button.rls-bulk-save-btn,
html body button[data-substituicoes-save],
html body button.primary[data-substituicoes-save],
html body button.primary.small[data-substituicoes-save],
html body .substituicoes-bottom-actions button[data-substituicoes-save],
html body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save] {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    border: 1px solid var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
}

/* SALVAR em dialogs/modais de edição. */
html body dialog[id^="dialog-edit"] .dialog-actions button.primary,
html body .modal.modal-edit button.primary {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    border: 1px solid var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: var(--btn-text) !important;
}

/* Texto no tema escuro para Salvar, usando o padrão já existente no arquivo. */
body.theme-dark button.margem-save-btn,
body.theme-dark button[form="margem-save-form"],
body.theme-dark .usuarios-bottom-actions button.margem-save-btn,
body.theme-dark button.rls-bulk-save-btn,
body.theme-dark button.primary.rls-bulk-save-btn,
body.theme-dark button.primary.small.rls-bulk-save-btn,
body.theme-dark button[form="rls-pais-bulk-form"],
body.theme-dark button[form="rls-area-bulk-form"],
body.theme-dark button[form="rls-vendedor-bulk-form"],
body.theme-dark button[form="rls-area-vendedor-bulk-form"],
body.theme-dark button[form="cambio-bulk-form"],
body.theme-dark button[data-cambio-save],
body.theme-dark .rls-bulk-actions-row button.rls-bulk-save-btn,
body.theme-dark .rls-area-vendedor-actions-row button.rls-bulk-save-btn,
body.theme-dark .cambio-actions-row button.rls-bulk-save-btn,
body.theme-dark button[data-substituicoes-save],
body.theme-dark button.primary[data-substituicoes-save],
body.theme-dark button.primary.small[data-substituicoes-save],
body.theme-dark .substituicoes-bottom-actions button[data-substituicoes-save],
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
body.theme-dark dialog[id^="dialog-edit"] .dialog-actions button.primary,
body.theme-dark .modal.modal-edit button.primary,
html[data-theme="dark"] body button.margem-save-btn,
html[data-theme="dark"] body button[form="margem-save-form"],
html[data-theme="dark"] body .usuarios-bottom-actions button.margem-save-btn,
html[data-theme="dark"] body button.rls-bulk-save-btn,
html[data-theme="dark"] body button.primary.rls-bulk-save-btn,
html[data-theme="dark"] body button.primary.small.rls-bulk-save-btn,
html[data-theme="dark"] body button[form="rls-pais-bulk-form"],
html[data-theme="dark"] body button[form="rls-area-bulk-form"],
html[data-theme="dark"] body button[form="rls-vendedor-bulk-form"],
html[data-theme="dark"] body button[form="rls-area-vendedor-bulk-form"],
html[data-theme="dark"] body button[form="cambio-bulk-form"],
html[data-theme="dark"] body button[data-cambio-save],
html[data-theme="dark"] body .rls-bulk-actions-row button.rls-bulk-save-btn,
html[data-theme="dark"] body .rls-area-vendedor-actions-row button.rls-bulk-save-btn,
html[data-theme="dark"] body .cambio-actions-row button.rls-bulk-save-btn,
html[data-theme="dark"] body button[data-substituicoes-save],
html[data-theme="dark"] body button.primary[data-substituicoes-save],
html[data-theme="dark"] body button.primary.small[data-substituicoes-save],
html[data-theme="dark"] body .substituicoes-bottom-actions button[data-substituicoes-save],
html[data-theme="dark"] body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] button[data-substituicoes-save],
html[data-theme="dark"] body dialog[id^="dialog-edit"] .dialog-actions button.primary,
html[data-theme="dark"] body .modal.modal-edit button.primary {
    color: var(--bg) !important;
}

/* DOWNLOAD - permanece amarelo em todas as tabelas. */
html body a.link-btn.secondary[href*="download"],
html body a.substituicoes-download-link,
html body .actions-row .actions-right a.link-btn.secondary,
html body .actions-row .dual-downloads a.link-btn.secondary,
html body .usuarios-bottom-actions a.link-btn.secondary,
html body .rls-bulk-actions-row .actions-right a.link-btn.secondary,
html body .rls-area-vendedor-actions-row .actions-right a.link-btn.secondary,
html body .cambio-actions-row .actions-right a.link-btn.secondary,
html body .substituicoes-bottom-actions a.substituicoes-download-link,
html body .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] a.substituicoes-download-link {
    background: var(--btn-yellow) !important;
    background-color: var(--btn-yellow) !important;
    background-image: none !important;
    border: 1px solid var(--btn-yellow) !important;
    border-color: var(--btn-yellow) !important;
    color: var(--btn-text) !important;
}

body.theme-dark a.link-btn.secondary[href*="download"],
body.theme-dark a.substituicoes-download-link,
body.theme-dark .actions-row .actions-right a.link-btn.secondary,
body.theme-dark .actions-row .dual-downloads a.link-btn.secondary,
body.theme-dark .usuarios-bottom-actions a.link-btn.secondary,
body.theme-dark .rls-bulk-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .rls-area-vendedor-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .cambio-actions-row .actions-right a.link-btn.secondary,
body.theme-dark .substituicoes-bottom-actions a.substituicoes-download-link,
body.theme-dark .substituicoes-root[data-page-name="substituicoes_geolocalizacao"] a.substituicoes-download-link,
html[data-theme="dark"] body a.link-btn.secondary[href*="download"],
html[data-theme="dark"] body a.substituicoes-download-link {
    color: var(--bg) !important;
}


/* ============================================================
   Ajuste v13 - Substituições: célula alterada na cor do Salvar
   ============================================================
   Substitui os destaques antigos amarelo/cinza das células editadas.
   A célula alterada passa a usar a mesma cor do botão Salvar: --btn-green.
*/
html body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error) {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    color: var(--btn-text) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error) {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    color: var(--bg) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
}

/* Linha nova em Substituições também deixa de usar amarelo e segue o verde do Salvar. */
html body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error) {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    color: var(--btn-text) !important;
}

body.theme-dark table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error) {
    background: var(--btn-green) !important;
    background-color: var(--btn-green) !important;
    background-image: none !important;
    color: var(--bg) !important;
}

/* ============================================================
   Ajuste v14 - Substituições: destaque alterado no padrão original
   ============================================================
   Mantém o mesmo comportamento visual anterior:
   - fundo transparente/suave na cor do botão Salvar;
   - barra inferior forte na cor do botão Salvar ao sair da célula;
   - sem voltar para amarelo no light ou cinza no dark.
*/
html body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error) {
    background: rgba(29, 115, 101, .13) !important;
    background-color: color-mix(in srgb, var(--btn-green) 13%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 0 !important;
    border-bottom-color: rgba(128, 128, 128, .15) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

html body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(:focus),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(:focus),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(:focus) {
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

html body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error) {
    background: rgba(29, 115, 101, .18) !important;
    background-color: color-mix(in srgb, var(--btn-green) 18%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error) {
    background: rgba(148, 222, 210, .14) !important;
    background-color: color-mix(in srgb, var(--btn-green) 14%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 0 !important;
    border-bottom-color: rgba(167, 167, 167, .18) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(:focus),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(:focus) {
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error) {
    background: rgba(148, 222, 210, .20) !important;
    background-color: color-mix(in srgb, var(--btn-green) 20%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

html body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error) {
    background: rgba(29, 115, 101, .10) !important;
    background-color: color-mix(in srgb, var(--btn-green) 10%, var(--row-bg)) !important;
    color: var(--text) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error) {
    background: rgba(148, 222, 210, .12) !important;
    background-color: color-mix(in srgb, var(--btn-green) 12%, var(--row-bg)) !important;
    color: var(--text) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Mantém os erros em vermelho, acima do destaque verde. */
html body table[data-substituicoes-table] td.substituicao-cell-error,
body.theme-light table[data-substituicoes-table] td.substituicao-cell-error,
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-error,
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-error,
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-error {
    background-color: rgba(146, 47, 37, .18) !important;
    outline: 2px solid var(--btn-red) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-red) !important;
}

/* ============================================================
   Ajuste v15 - Substituições: destaque pós-edição e feedback verde
   ============================================================
   Enquanto a célula está em foco/edição, mantém o fundo verde transparente.
   Ao sair da célula alterada, remove o fundo e deixa apenas a barra inferior.
   Mensagens de alterações pendentes/nova linha seguem a cor do botão Salvar.
   ============================================================ */

/* Célula alterada após sair do foco: sem fundo, somente barra verde. */
html body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus) {
    background: var(--row-bg) !important;
    background-color: var(--row-bg) !important;
    outline: 0 !important;
    border-bottom-color: rgba(128, 128, 128, .15) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Célula alterada durante edição/foco: fundo verde transparente + barra forte. */
html body table[data-substituicoes-table] td.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-light table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="light"] body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error) {
    background: color-mix(in srgb, var(--btn-green) 18%, var(--row-bg)) !important;
    background-color: color-mix(in srgb, var(--btn-green) 18%, var(--row-bg)) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-dark table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[data-substituicao-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body table[data-substituicoes-table] td[contenteditable="true"]:focus:not(.substituicao-cell-error) {
    background: color-mix(in srgb, var(--btn-green) 20%, var(--row-bg)) !important;
    background-color: color-mix(in srgb, var(--btn-green) 20%, var(--row-bg)) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Linha/célula nova fora do foco: segue a mesma lógica, sem fundo e com barra verde. */
html body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-light table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-dark table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="light"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="dark"] body table[data-substituicoes-table] tr.substituicao-new-row td:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus) {
    background: var(--row-bg) !important;
    background-color: var(--row-bg) !important;
    outline: 0 !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Feedback de alterações pendentes/nova linha: verde igual ao botão Salvar. */
html body .substituicoes-feedback,
html body .substituicoes-feedback.warning,
html body .substituicoes-feedback.success,
html body .substituicoes-feedback[data-substituicoes-feedback],
body.theme-light .substituicoes-feedback,
body.theme-light .substituicoes-feedback.warning,
body.theme-light .substituicoes-feedback.success,
body.theme-dark .substituicoes-feedback,
body.theme-dark .substituicoes-feedback.warning,
body.theme-dark .substituicoes-feedback.success,
html[data-theme="light"] body .substituicoes-feedback,
html[data-theme="light"] body .substituicoes-feedback.warning,
html[data-theme="light"] body .substituicoes-feedback.success,
html[data-theme="dark"] body .substituicoes-feedback,
html[data-theme="dark"] body .substituicoes-feedback.warning,
html[data-theme="dark"] body .substituicoes-feedback.success {
    color: var(--btn-green) !important;
}

/* Mensagem de erro continua vermelha. */
html body .substituicoes-feedback.error,
body.theme-light .substituicoes-feedback.error,
body.theme-dark .substituicoes-feedback.error,
html[data-theme="light"] body .substituicoes-feedback.error,
html[data-theme="dark"] body .substituicoes-feedback.error {
    color: var(--btn-red) !important;
}

/* ============================================================
   Ajuste v16 - Valores de Câmbio: destaque editável igual Substituições
   ============================================================
   A coluna "Valor de Câmbio" usa data-cambio-editable-cell.
   Mantém o mesmo padrão visual das Substituições:
   - durante foco/edição: fundo verde transparente + barra/contorno verde;
   - após clicar fora: sem fundo, somente barra inferior verde;
   - feedback pendente/sucesso verde igual ao botão Salvar;
   - erros continuam vermelhos.
   ============================================================ */

/* Câmbio alterado após sair do foco: sem fundo, somente barra inferior verde. */
html body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html body .cambio-valores-table td.cambio-inline-cell.substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html body .cambio-valores-table td.cambio-inline-cell.cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:not(.substituicao-cell-error):not(.substituicao-cell-editing):not(:focus) {
    background: var(--row-bg) !important;
    background-color: var(--row-bg) !important;
    color: var(--text) !important;
    outline: 0 !important;
    border-bottom-color: rgba(128, 128, 128, .15) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Câmbio alterado durante edição/foco: fundo verde transparente + barra/contorno forte. */
html body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing:not(.substituicao-cell-error),
html body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:focus:not(.substituicao-cell-error),
html body .cambio-valores-table td[data-cambio-editable-cell]:focus:not(.substituicao-cell-error),
html body .cambio-valores-table td.cambio-inline-cell.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html body .cambio-valores-table td.cambio-inline-cell.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html body .cambio-valores-table td.cambio-inline-cell.cambio-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-light .cambio-valores-table td[data-cambio-editable-cell]:focus:not(.substituicao-cell-error),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell]:focus:not(.substituicao-cell-error) {
    background: rgba(29, 115, 101, .18) !important;
    background-color: color-mix(in srgb, var(--btn-green) 18%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    border-bottom-color: rgba(128, 128, 128, .15) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell]:focus:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td.cambio-inline-cell.substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td.cambio-inline-cell.substituicao-cell-dirty:focus:not(.substituicao-cell-error),
body.theme-dark .cambio-valores-table td.cambio-inline-cell.cambio-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty.substituicao-cell-editing:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-dirty:focus:not(.substituicao-cell-error),
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell]:focus:not(.substituicao-cell-error) {
    background: rgba(148, 222, 210, .20) !important;
    background-color: color-mix(in srgb, var(--btn-green) 20%, var(--row-bg)) !important;
    color: var(--text) !important;
    outline: 2px solid var(--btn-green) !important;
    outline-offset: -2px !important;
    border-bottom-color: rgba(167, 167, 167, .18) !important;
    box-shadow: inset 0 -3px 0 var(--btn-green) !important;
}

/* Erro no Câmbio continua vermelho, acima do destaque verde. */
html body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error,
html body .cambio-valores-table td[data-cambio-editable-cell].cambio-cell-error,
body.theme-light .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error,
body.theme-dark .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error,
html[data-theme="light"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error,
html[data-theme="dark"] body .cambio-valores-table td[data-cambio-editable-cell].substituicao-cell-error {
    background-color: rgba(146, 47, 37, .18) !important;
    outline: 2px solid var(--btn-red) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 -3px 0 var(--btn-red) !important;
}

/* Feedback do Câmbio pendente/sucesso: verde igual ao botão Salvar. */
html body .cambio-feedback,
html body .cambio-feedback.warning,
html body .cambio-feedback.success,
body.theme-light .cambio-feedback,
body.theme-light .cambio-feedback.warning,
body.theme-light .cambio-feedback.success,
body.theme-dark .cambio-feedback,
body.theme-dark .cambio-feedback.warning,
body.theme-dark .cambio-feedback.success,
html[data-theme="light"] body .cambio-feedback,
html[data-theme="light"] body .cambio-feedback.warning,
html[data-theme="light"] body .cambio-feedback.success,
html[data-theme="dark"] body .cambio-feedback,
html[data-theme="dark"] body .cambio-feedback.warning,
html[data-theme="dark"] body .cambio-feedback.success {
    color: var(--btn-green) !important;
}

/* Feedback de erro do Câmbio continua vermelho. */
html body .cambio-feedback.error,
body.theme-light .cambio-feedback.error,
body.theme-dark .cambio-feedback.error,
html[data-theme="light"] body .cambio-feedback.error,
html[data-theme="dark"] body .cambio-feedback.error {
    color: var(--btn-red) !important;
}

/* ============================================================
   Ajuste v17 - Feedback pendente padronizado em todas as páginas
   ============================================================
   Mensagem padrão quando houver alteração pendente:
   "Alterações pendentes. Clique em Salvar."
   Usa a mesma cor, tamanho e peso visual em RLS, Acesso, Câmbio,
   Substituições e demais telas com botão Salvar.
   ============================================================ */
html body .save-pending-feedback,
html body [data-save-pending-feedback],
html body .substituicoes-feedback,
html body .substituicoes-feedback.warning,
html body .substituicoes-feedback.success,
html body [data-substituicoes-feedback],
html body .cambio-feedback,
html body .cambio-feedback.warning,
html body .cambio-feedback.success,
html body [data-cambio-feedback],
body.theme-light .save-pending-feedback,
body.theme-light [data-save-pending-feedback],
body.theme-light .substituicoes-feedback,
body.theme-light .substituicoes-feedback.warning,
body.theme-light .substituicoes-feedback.success,
body.theme-light .cambio-feedback,
body.theme-light .cambio-feedback.warning,
body.theme-light .cambio-feedback.success,
body.theme-dark .save-pending-feedback,
body.theme-dark [data-save-pending-feedback],
body.theme-dark .substituicoes-feedback,
body.theme-dark .substituicoes-feedback.warning,
body.theme-dark .substituicoes-feedback.success,
body.theme-dark .cambio-feedback,
body.theme-dark .cambio-feedback.warning,
body.theme-dark .cambio-feedback.success,
html[data-theme="light"] body .save-pending-feedback,
html[data-theme="light"] body [data-save-pending-feedback],
html[data-theme="light"] body .substituicoes-feedback,
html[data-theme="light"] body .substituicoes-feedback.warning,
html[data-theme="light"] body .substituicoes-feedback.success,
html[data-theme="light"] body .cambio-feedback,
html[data-theme="light"] body .cambio-feedback.warning,
html[data-theme="light"] body .cambio-feedback.success,
html[data-theme="dark"] body .save-pending-feedback,
html[data-theme="dark"] body [data-save-pending-feedback],
html[data-theme="dark"] body .substituicoes-feedback,
html[data-theme="dark"] body .substituicoes-feedback.warning,
html[data-theme="dark"] body .substituicoes-feedback.success,
html[data-theme="dark"] body .cambio-feedback,
html[data-theme="dark"] body .cambio-feedback.warning,
html[data-theme="dark"] body .cambio-feedback.success {
    margin: 0 0 0 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    color: var(--btn-green) !important;
    white-space: nowrap !important;
}

html body .substituicoes-feedback.error,
html body .cambio-feedback.error,
html body [data-substituicoes-feedback].error,
html body [data-cambio-feedback].error,
body.theme-light .substituicoes-feedback.error,
body.theme-light .cambio-feedback.error,
body.theme-dark .substituicoes-feedback.error,
body.theme-dark .cambio-feedback.error,
html[data-theme="light"] body .substituicoes-feedback.error,
html[data-theme="light"] body .cambio-feedback.error,
html[data-theme="dark"] body .substituicoes-feedback.error,
html[data-theme="dark"] body .cambio-feedback.error {
    color: var(--btn-red) !important;
}

/* Mantém a mensagem alinhada com os botões inferiores em qualquer linha de ação. */
.rls-bulk-actions-row .save-pending-feedback,
.rls-area-vendedor-actions-row .save-pending-feedback,
.cambio-actions-row .save-pending-feedback,
.actions-row .save-pending-feedback,
.substituicoes-bottom-actions .substituicoes-feedback,
.cambio-actions-row .cambio-feedback {
    align-self: center !important;
}


/* ============================================================
   Ajuste v18 - Linhas alteradas com destaque verde
   ============================================================
   O estado de edição não pinta mais o dropdown. O JavaScript marca
   a linha da tabela com .rls-row-dirty, e somente a linha recebe
   a cor de alteração.

   Modo claro: usa o verde transparente que antes estava no modo escuro.
   Modo escuro: usa o verde transparente que antes estava no modo claro.
*/
html body .rls-usuarios-table tbody tr.rls-row-dirty > td,
html body .rls-usuarios-table tbody tr[data-rls-row-dirty="true"] > td,
html body .rls-bulk-pais-table tbody tr.rls-row-dirty > td,
html body .rls-bulk-pais-table tbody tr[data-rls-row-dirty="true"] > td,
html body .rls-bulk-area-table tbody tr.rls-row-dirty > td,
html body .rls-bulk-area-table tbody tr[data-rls-row-dirty="true"] > td,
html body .rls-bulk-vendedor-table tbody tr.rls-row-dirty > td,
html body .rls-bulk-vendedor-table tbody tr[data-rls-row-dirty="true"] > td,
html body .rls-area-vendedor-bulk-table tbody tr.rls-row-dirty > td,
html body .rls-area-vendedor-bulk-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-light .rls-usuarios-table tbody tr.rls-row-dirty > td,
body.theme-light .rls-usuarios-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-light .rls-bulk-pais-table tbody tr.rls-row-dirty > td,
body.theme-light .rls-bulk-pais-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-light .rls-bulk-area-table tbody tr.rls-row-dirty > td,
body.theme-light .rls-bulk-area-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-light .rls-bulk-vendedor-table tbody tr.rls-row-dirty > td,
body.theme-light .rls-bulk-vendedor-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-light .rls-area-vendedor-bulk-table tbody tr.rls-row-dirty > td,
body.theme-light .rls-area-vendedor-bulk-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="light"] body .rls-usuarios-table tbody tr.rls-row-dirty > td,
html[data-theme="light"] body .rls-usuarios-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="light"] body .rls-bulk-pais-table tbody tr.rls-row-dirty > td,
html[data-theme="light"] body .rls-bulk-pais-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="light"] body .rls-bulk-area-table tbody tr.rls-row-dirty > td,
html[data-theme="light"] body .rls-bulk-area-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="light"] body .rls-bulk-vendedor-table tbody tr.rls-row-dirty > td,
html[data-theme="light"] body .rls-bulk-vendedor-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="light"] body .rls-area-vendedor-bulk-table tbody tr.rls-row-dirty > td,
html[data-theme="light"] body .rls-area-vendedor-bulk-table tbody tr[data-rls-row-dirty="true"] > td {
    background-color: rgba(148, 222, 210, .18) !important;
}

body.theme-dark .rls-usuarios-table tbody tr.rls-row-dirty > td,
body.theme-dark .rls-usuarios-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-dark .rls-bulk-pais-table tbody tr.rls-row-dirty > td,
body.theme-dark .rls-bulk-pais-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-dark .rls-bulk-area-table tbody tr.rls-row-dirty > td,
body.theme-dark .rls-bulk-area-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-dark .rls-bulk-vendedor-table tbody tr.rls-row-dirty > td,
body.theme-dark .rls-bulk-vendedor-table tbody tr[data-rls-row-dirty="true"] > td,
body.theme-dark .rls-area-vendedor-bulk-table tbody tr.rls-row-dirty > td,
body.theme-dark .rls-area-vendedor-bulk-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="dark"] body .rls-usuarios-table tbody tr.rls-row-dirty > td,
html[data-theme="dark"] body .rls-usuarios-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="dark"] body .rls-bulk-pais-table tbody tr.rls-row-dirty > td,
html[data-theme="dark"] body .rls-bulk-pais-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="dark"] body .rls-bulk-area-table tbody tr.rls-row-dirty > td,
html[data-theme="dark"] body .rls-bulk-area-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="dark"] body .rls-bulk-vendedor-table tbody tr.rls-row-dirty > td,
html[data-theme="dark"] body .rls-bulk-vendedor-table tbody tr[data-rls-row-dirty="true"] > td,
html[data-theme="dark"] body .rls-area-vendedor-bulk-table tbody tr.rls-row-dirty > td,
html[data-theme="dark"] body .rls-area-vendedor-bulk-table tbody tr[data-rls-row-dirty="true"] > td {
    background-color: rgba(29, 115, 101, .16) !important;
}

/* ============================================================
   Sidebar - fundos compactos nos botões das subpáginas
   ============================================================
   Deixa Geral, País, Área, Vendedor, Área do Vendedor,
   Valores de Câmbio, Substituições etc. com a mesma altura
   compacta do botão ACESSO, sem alterar a largura.
   ============================================================ */
.sidebar .nav-group > .nav-btn {
    width: 100% !important;
    min-height: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    margin-bottom: 3px !important;
    border-radius: 7px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Estado normal: sem fundo fixo. */
.sidebar .nav-group > .nav-btn:not(:hover):not(.active),
body.theme-light .sidebar .nav-group > .nav-btn:not(:hover):not(.active),
body.theme-dark .sidebar .nav-group > .nav-btn:not(:hover):not(.active),
html[data-theme="light"] body .sidebar .nav-group > .nav-btn:not(:hover):not(.active),
html[data-theme="dark"] body .sidebar .nav-group > .nav-btn:not(:hover):not(.active) {
    background: transparent !important;
}

/* Light: mantém o mesmo fundo dos botões no modo claro, só compacto. */
body.theme-light .sidebar .nav-group > .nav-btn:hover,
body.theme-light .sidebar .nav-group > .nav-btn.active,
body.theme-light .sidebar .nav-group > .nav-btn.active:hover,
html[data-theme="light"] body .sidebar .nav-group > .nav-btn:hover,
html[data-theme="light"] body .sidebar .nav-group > .nav-btn.active,
html[data-theme="light"] body .sidebar .nav-group > .nav-btn.active:hover {
    background: rgba(0, 0, 0, .28) !important;
    color: #F1F1F1 !important;
    -webkit-text-fill-color: #F1F1F1 !important;
}

/* Dark: mantém o mesmo fundo dos botões no modo escuro, só compacto. */
body.theme-dark .sidebar .nav-group > .nav-btn:hover,
body.theme-dark .sidebar .nav-group > .nav-btn.active,
body.theme-dark .sidebar .nav-group > .nav-btn.active:hover,
html[data-theme="dark"] body .sidebar .nav-group > .nav-btn:hover,
html[data-theme="dark"] body .sidebar .nav-group > .nav-btn.active,
html[data-theme="dark"] body .sidebar .nav-group > .nav-btn.active:hover {
    background: #454545 !important;
    color: #F1F1F1 !important;
    -webkit-text-fill-color: #F1F1F1 !important;
}

/* ============================================================
   Câmbio - dialog Adicionar no mesmo padrão dos dialogs RLS
   ============================================================
   O JS transforma os selects do dialog em dropdowns customizados com
   busca dentro do próprio campo. As regras dos dialogs Geral/País/Área/
   Vendedor já removiam a aparência de input interno; aqui aplicamos o
   mesmo reset ao #dialog-add-cambio.
*/
#dialog-add-cambio .acesso-single-summary:has(.acesso-summary-search-input) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    cursor: text !important;
}

#dialog-add-cambio .acesso-summary-search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    cursor: text !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#dialog-add-cambio .acesso-summary-search-input::placeholder {
    color: inherit !important;
    opacity: 1 !important;
}

#dialog-add-cambio .acesso-summary-search-input::-webkit-search-decoration,
#dialog-add-cambio .acesso-summary-search-input::-webkit-search-cancel-button {
    display: none !important;
}

#dialog-add-cambio .search-hidden,
#dialog-add-cambio [data-search-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================================
   Ajuste pontual - Área do Vendedor: largura dos dropdowns Área/País
   ============================================================ */
.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell .acesso-single-select,
.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell .acesso-single-details,
.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell .acesso-single-summary,
.rls-area-vendedor-bulk-table td.rls-area-vendedor-select-cell .acesso-single-menu {
    width: 140px !important;
    min-width: 0 !important;
    max-width: 140px !important;
}

/* ============================================================
   Acesso - coluna Relatórios (entre País e Margem)
   ============================================================
   Nova coluna com dropdown no mesmo formato/fonte/cor das demais
   (País, Margem, RLS). Por enquanto o dropdown fica em branco,
   sem opções além do placeholder "Selecione".
*/
.usuarios-margem-table .usuarios-relatorios-th,
.usuarios-margem-table .usuarios-relatorios-cell {
    text-align: left;
}

/* ============================================================
   Acesso - Usuário mais estreita para aproximar a coluna País
   ============================================================
   Agora que o e-mail mostra só a parte antes do "@", a coluna
   Usuário não precisa mais dos 300px de antes: reduzindo-a, a
   coluna País (e as seguintes) passam a ficar mais à esquerda.
*/
.rls-usuarios-table .usuarios-col-usuario,
.rls-usuarios-table th:nth-child(1),
.rls-usuarios-table tbody td:nth-child(1) {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
}

/* ============================================================
   Acesso - um único padrão para os dropdowns de País, Relatórios,
   Margem e RLS (tamanho, seta e espaçamento entre colunas)
   ============================================================
   Bloco único (substitui os vários ajustes soltos que existiam
   antes) que define, para os 4 dropdowns:
   - a mesma largura fixa de botão (12 caracteres, unidade "ch");
   - texto à esquerda, seta sempre encostada na borda direita do
     botão (igual ao dropdown de Visualização), centralizada
     verticalmente;
   - a mesma largura de coluna (botão + respiro dos dois lados),
     para que a distância entre qualquer par de colunas seja igual.
     Antes País (150px) sobrava bem mais espaço vazio depois do
     botão do que Relatórios/Margem/RLS (110/100/120px), por isso
     o vão depois de País parecia maior que os demais.

   RLS e Visualização tinham <th> sem classe, então o padding que
   valia pra célula do corpo nunca chegava no cabeçalho (por isso
   Visualização ficava desalinhada). Os <th> agora carregam
   "usuarios-rls-th" e "usuarios-rls-visualizacao-th" no template.
*/
.usuarios-margem-table .usuarios-margem-pais-cell .acesso-single-select,
.usuarios-margem-table .usuarios-margem-pais-th .acesso-single-select,
.usuarios-margem-table .usuarios-margem-cell .acesso-single-select,
.usuarios-margem-table .usuarios-margem-th .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select,
.usuarios-margem-table .usuarios-rls-th .acesso-single-select,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-select.is-rls-tipo,
.usuarios-margem-table .usuarios-margem-pais-cell .acesso-single-details,
.usuarios-margem-table .usuarios-margem-cell .acesso-single-details,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-details,
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multiselect,
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multi-details {
    width: 12ch !important;
    min-width: 12ch !important;
    max-width: 12ch !important;
    flex: 0 0 12ch !important;
}

.usuarios-margem-table .usuarios-margem-pais-cell .acesso-single-summary,
.usuarios-margem-table .usuarios-margem-cell .acesso-single-summary,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-summary,
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multi-summary {
    width: 12ch !important;
    min-width: 12ch !important;
    max-width: 12ch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.usuarios-margem-table .usuarios-margem-pais-th,
.usuarios-margem-table .usuarios-margem-pais-cell,
.usuarios-margem-table .usuarios-relatorios-th,
.usuarios-margem-table .usuarios-relatorios-cell,
.usuarios-margem-table .usuarios-margem-th,
.usuarios-margem-table .usuarios-margem-cell,
.usuarios-margem-table .usuarios-rls-th,
.usuarios-margem-table .usuarios-rls-cell,
.usuarios-margem-table .usuarios-rls-visualizacao-th,
.usuarios-margem-table .usuarios-rls-visualizacao-cell {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.usuarios-margem-table .usuarios-rls-th .th-content,
.usuarios-margem-table .usuarios-rls-visualizacao-th .th-content {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Mesma largura para as 4 colunas de dropdown: botão fixo (12ch)
   + 14px de respiro nos dois lados, sem sobra. */
.usuarios-col-pais,
.usuarios-col-relatorios,
.usuarios-col-margem,
.usuarios-col-rls {
    width: 100px !important;
}

/* Nova largura mínima: 230 (Usuário) + 100 (País) + 100 (Relatórios)
   + 100 (Margem) + 100 (RLS) + 330 (Visualização) + 100 (Ações). */
.usuarios-margem-table {
    min-width: 1060px !important;
}

/* ============================================================
   Acesso - menu aberto do dropdown maior que o botão de novo
   ============================================================
   A tentativa de deixar o menu do mesmo tamanho do botão (12ch)
   ficou pequena demais para ler as opções. Volta a ser maior que
   o botão fechado - perto do tamanho original (230px), só um
   pouco menor - nas colunas País, Relatórios, Margem e RLS.
*/
.usuarios-margem-table .usuarios-margem-pais-cell .acesso-single-menu,
.usuarios-margem-table .usuarios-margem-cell .acesso-single-menu,
.usuarios-margem-table .usuarios-rls-cell .acesso-single-menu,
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multi-menu {
    width: min(190px, 70vw) !important;
    min-width: 190px !important;
    max-width: min(190px, 70vw) !important;
}

/* ============================================================
   Acesso - Relatórios: múltipla seleção e travamento com o país "<dev>"
   ============================================================
   O dropdown de Relatórios aceita mais de um valor marcado (checkbox),
   no mesmo formato visual dos outros três. Quando o país selecionado é
   "<dev>", ele fica travado (não dá pra abrir/alterar), igual à Margem
   e ao RLS nesse mesmo cenário.
*/
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multiselect.is-dev-locked,
.usuarios-margem-table .usuarios-relatorios-cell .acesso-rls-multiselect.is-disabled {
    pointer-events: none !important;
    opacity: .75;
    cursor: not-allowed;
}