/* ========== 1. Utilitários e globais ========== */
.grecaptcha-badge {
    display: none;
}

.radios {
    padding-bottom: 2%;
    padding-right: 2%;
}

.text-right{
    text-align: right;
}

/* ========== 2. Componentes: icon-card ========== */
.icon-card {
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.icon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #4B7FF6;
}

.icon-card .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.icon-card .icon-wrapper .feather {
    width: 24px;
    height: 24px;
    color: #4B7FF6;
    stroke-width: 2;
}

.icon-card:hover .icon-wrapper .feather {
    color: #5E50EE;
}

.icon-card .icon-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6E6B7B;
    padding: 0 0.5rem;
}

.icon-card:hover .icon-name {
    color: #4B7FF6;
}

/* Margin horizontal alternativa ao mx-50 */
.mx-50 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Ajuste para botão fechar no icon-card */
.icon-card .btn-close {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.icon-card:hover .btn-close {
    opacity: 1;
}

.icon-card .btn-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

/* ========== 3. Breadcrumb (tema claro) ========== */
.content-wrapper .breadcrumb-wrapper {
    margin-top: 0.25rem;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
    background: transparent;
    padding: 0;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb-item {
    margin-left: 10px;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb-item a {
    color: #6E6B7B;
    text-decoration: none;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb-item a:hover {
    color: #4B7FF6;
    text-decoration: underline;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb-item.active span {
    color: #5E5873;
    font-weight: 500;
    margin-left: 10px;
}

.content-wrapper .breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {
    color: #B8C2CC;
}

/* ========== 4. Tema dark — variáveis e base ========== */

/* Variáveis da paleta dark (custom properties) */
html.dark-layout {
    --dark-bg: #161D31;
    --dark-surface: #283046;
    --dark-surface-alt: #343D55;
    --dark-border: #3B4253;
    --dark-text: #B4B7BD;
    --dark-text-strong: #D0D2D6;
    --dark-text-muted: #676D7D;
    --dark-accent: #4B7FF6;
    --dark-table-bg: #242B3D;
    --dark-table-hover: #2d3548;
    --dark-input-border: #404656;
}

html.dark-layout body {

    color: var(--dark-text);
    background-color: var(--dark-bg);
}

html.dark-layout h1, html.dark-layout h2, html.dark-layout h3, html.dark-layout h4, html.dark-layout h5, html.dark-layout h6 {

    color: var(--dark-text-strong);
}

html.dark-layout .border, html.dark-layout .border-bottom, html.dark-layout .border-end, html.dark-layout .border-start, html.dark-layout .border-top {

    border-color: var(--dark-border) !important;
}

html.dark-layout a:hover {

    color: var(--dark-accent);
}

html.dark-layout label {

    color: var(--dark-text-strong);
}

html.dark-layout .header-navbar-shadow {

    background: linear-gradient(180deg, rgba(22, 29, 49, .9) 44%, rgba(22, 29, 49, .43) 73%, rgba(22, 29, 49, 0));
}

html.dark-layout .header-navbar {

    background-color: var(--dark-surface) !important;
}

html.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link {

    color: var(--dark-text-strong) !important;
    background-color: transparent;
}

html.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link i, html.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link svg, html.dark-layout .header-navbar .navbar-container .nav li i.ficon, html.dark-layout .header-navbar .navbar-container .nav li svg.ficon {

    color: var(--dark-text-strong) !important;
}

html.dark-layout .header-navbar .theme-toggle:hover .ficon {

    color: var(--dark-accent) !important;
}

/* ========== 5. Tema dark — header e navbar ========== */
/* (header-navbar já aplicado acima) */

/* ========== 6. Tema dark — menu / sidebar ========== */
html.dark-layout .main-menu.menu-light, html.dark-layout .main-menu {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .main-menu.menu-light .navigation, html.dark-layout .main-menu .main-menu-content .navigation, html.dark-layout .main-menu .main-menu-content ul.navigation-main {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
}

html.dark-layout .main-menu .shadow-bottom {

    background: linear-gradient(180deg, var(--dark-surface) 44%, rgba(40, 48, 70, .51) 73%, rgba(40, 48, 70, 0));
}

html.dark-layout .main-menu .navbar-header .brand-text, html.dark-layout .main-menu .navbar-header .navbar-brand {

    color: var(--dark-text-strong) !important;
}

/* Toggle e ícones do header do menu (sobrescreve .text-primary do Bootstrap) */
html.dark-layout .main-menu .nav-toggle .nav-link i, html.dark-layout .main-menu .nav-toggle .nav-link svg, html.dark-layout .main-menu .navbar-header .text-primary {

    color: var(--dark-text) !important;
}

/* Utilitários de texto dentro do menu: forçar paleta dark (evita .text-primary etc. do Bootstrap) */
html.dark-layout .main-menu .main-menu-content .navigation-main .text-primary {

    color: var(--dark-accent) !important;
}
html.dark-layout .main-menu .main-menu-content .navigation-main li a.active .text-primary, html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a .text-primary {

    color: #FFF !important;
}

html.dark-layout .main-menu .collapse-toggle-icon {

    color: var(--dark-accent) !important;
}

/* Todos os links do menu (li a, .nav-item a, a.d-flex, a.align-items-center) - espelhar .main-menu.menu-light: padding, margin, line-height */
html.dark-layout .main-menu.menu-light .navigation li a, html.dark-layout .main-menu .navigation li a, html.dark-layout .main-menu .main-menu-content .navigation-main li a, html.dark-layout .main-menu .main-menu-content .navigation-main li.nav-item a, html.dark-layout .main-menu .main-menu-content .navigation-main li a.d-flex, html.dark-layout .main-menu .main-menu-content .navigation-main li a.align-items-center {

    color: var(--dark-text-strong) !important;
    background-color: transparent !important;
    background: none !important;
    padding: 10px 15px !important;
    line-height: 1.45 !important;
}

/* >li>a: mesmo margin do menu-light (margin: 0 15px) */
html.dark-layout .main-menu.menu-light .navigation > li > a, html.dark-layout .main-menu .navigation > li > a, html.dark-layout .main-menu .main-menu-content .navigation-main > li > a {

    margin: 0 15px !important;
}

/* Submenu: mesmo padding do menu-light (li>a e li ul a) */
html.dark-layout .main-menu .main-menu-content .navigation-main > li > ul li > a {

    padding: 10px 15px 10px 20px !important;
}
html.dark-layout .main-menu .main-menu-content .navigation-main > li > ul li ul a {

    padding: 10px 15px 10px 53px !important;
}

/* Filhos diretos do link: .menu-title, span, i, svg (herdam cor do link) */
html.dark-layout .main-menu .navigation li a .menu-title, html.dark-layout .main-menu .navigation li a span, html.dark-layout .main-menu .navigation li a i, html.dark-layout .main-menu .navigation li a svg, html.dark-layout .main-menu .main-menu-content .navigation-main li a .menu-title, html.dark-layout .main-menu .main-menu-content .navigation-main li a span, html.dark-layout .main-menu .main-menu-content .navigation-main li a i, html.dark-layout .main-menu .main-menu-content .navigation-main li a svg, html.dark-layout .main-menu .main-menu-content .navigation-main li a * {

    color: inherit !important;
}

html.dark-layout .main-menu .navigation li a i, html.dark-layout .main-menu .navigation li a svg, html.dark-layout .main-menu .main-menu-content .navigation-main li a i, html.dark-layout .main-menu .main-menu-content .navigation-main li a svg {

    color: var(--dark-text-strong) !important;
}

/* Open / sidebar-group-active */
html.dark-layout .main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a, html.dark-layout .main-menu.menu-light .navigation > li.sidebar-group-active > a, html.dark-layout .main-menu .navigation .sidebar-group-active > a {

    background-color: var(--dark-bg) !important;
    color: var(--dark-text-strong) !important;
}

/* Item ativo: li.active > a OU a.active (anchor com classe active) - sobrescreve gradient e var(--dark-accent) */
html.dark-layout .main-menu.menu-light .navigation > li.active > a, html.dark-layout .main-menu.menu-light .navigation > li .active > a, html.dark-layout .main-menu .navigation > li.active > a, html.dark-layout .main-menu .navigation > li .active > a, html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active {

    background: var(--dark-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #FFF !important;
}

/* Filhos do link ativo: .menu-title, i, svg, span em branco */
html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a .menu-title, html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a i, html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a svg, html.dark-layout .main-menu .main-menu-content .navigation-main li.active > a span, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active .menu-title, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active i, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active svg, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active span, html.dark-layout .main-menu .main-menu-content .navigation-main li a.active * {

    color: #FFF !important;
}

html.dark-layout .main-menu.menu-light .navigation > li ul .open > a, html.dark-layout .main-menu.menu-light .navigation > li ul .sidebar-group-active > a {

    background-color: var(--dark-bg) !important;
    color: var(--dark-text-strong) !important;
}

html.dark-layout .main-menu-content .navigation-main {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
}

/* Cabeçalhos de seção do menu (.navigation-header) - mesmo formato do tema claro (margin, padding, line-height) */
html.dark-layout .main-menu .navigation .navigation-header, html.dark-layout .main-menu-content .navigation-main .navigation-header {

    color: var(--dark-text-muted) !important;
    margin: calc(2rem + .286rem) 0 .8rem 2.2rem !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    letter-spacing: .01rem !important;
}

html.dark-layout .main-menu .navigation .navigation-header span, html.dark-layout .main-menu .navigation .navigation-header i, html.dark-layout .main-menu .navigation .navigation-header svg, html.dark-layout .main-menu-content .navigation-main .navigation-header span, html.dark-layout .main-menu-content .navigation-main .navigation-header i, html.dark-layout .main-menu-content .navigation-main .navigation-header svg {

    color: var(--dark-text-muted) !important;
}

html.dark-layout .main-menu .navigation .navigation-header span, html.dark-layout .main-menu-content .navigation-main .navigation-header span {

    font-weight: 500 !important;
}

/* Menu colapsado: .navigation-header com mesmo formato do tema claro (margin-left como em menu.min.css) */
html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .navigation-header, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main .navigation-header {

    margin-left: 2.2rem !important;
    margin-top: calc(2rem + .286rem) !important;
    margin-bottom: .8rem !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .navigation-header .feather-more-horizontal, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .navigation-header i[data-feather="more-horizontal"], html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .navigation-header svg, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main .navigation-header .feather-more-horizontal, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main .navigation-header i[data-feather="more-horizontal"], html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main .navigation-header svg {

    color: var(--dark-text-muted) !important;
    font-size: 1.285rem !important;
    width: 18px !important;
    height: 18px !important;
}

html.dark-layout .main-menu-content .navigation-main li ul .open > a, html.dark-layout .main-menu-content .navigation-main li ul .sidebar-group-active > a, html.dark-layout .main-menu-content .navigation-main .nav-item.open > a {

    background-color: var(--dark-bg) !important;
}

html.dark-layout .main-menu-content .navigation-main .nav-item .menu-content, html.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content {

    background-color: var(--dark-surface) !important;
}

/* Menu colapsado: item ativo com fundo escuro (sobrescreve #f5f5f5 do theme) */
html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.active a, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li a.active {

    background: var(--dark-bg) !important;
    color: #FFF !important;
    box-shadow: none !important;
}

html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a .menu-title, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a i, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a svg, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li a.active .menu-title, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li a.active i, html.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li a.active svg {

    color: #FFF !important;
}

html.dark-layout .main-menu.menu-border {

    border-right-color: var(--dark-border) !important;
}

html.dark-layout .main-menu.menu-shadow {

    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
}

/* Hover/focus: manter legível */
html.dark-layout .main-menu a:hover, html.dark-layout .main-menu a:focus {

    color: var(--dark-text-strong) !important;
}

html.dark-layout .main-menu .main-menu-content .navigation-main li a:hover .menu-title, html.dark-layout .main-menu .main-menu-content .navigation-main li a:hover i, html.dark-layout .main-menu .main-menu-content .navigation-main li a:hover svg, html.dark-layout .main-menu .main-menu-content .navigation-main li a:focus .menu-title, html.dark-layout .main-menu .main-menu-content .navigation-main li a:focus i, html.dark-layout .main-menu .main-menu-content .navigation-main li a:focus svg {

    color: var(--dark-text-strong) !important;
}

/* ========== 7. Tema dark — cards, tabelas, formulários, dropdown, footer, modais ========== */
/* Card */
html.dark-layout .card {

    background-color: var(--dark-surface);
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, .24);
}

html.dark-layout .card .card-footer {

    border-color: var(--dark-border);
}

html.dark-layout .app-content, html.dark-layout .content-wrapper {

    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Breadcrumb */
html.dark-layout .breadcrumb .breadcrumb-item, html.dark-layout .breadcrumb .breadcrumb-item + .breadcrumb-item::before {

    color: var(--dark-text);
}

html.dark-layout .content-wrapper .breadcrumb-wrapper .breadcrumb-item a {

    color: var(--dark-text);
}

html.dark-layout .content-wrapper .breadcrumb-wrapper .breadcrumb-item a:hover {

    color: var(--dark-accent);
}

html.dark-layout .content-wrapper .breadcrumb-wrapper .breadcrumb-item.active span {

    color: var(--dark-text-strong);
}

html.dark-layout .content-wrapper .breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {

    color: var(--dark-text);
}

/* Tabelas */
html.dark-layout .table td, html.dark-layout .table th {

    color: var(--dark-text);
    border-color: var(--dark-border) !important;
}

html.dark-layout .table tfoot tr th, html.dark-layout .table thead tr th {

    border-color: var(--dark-border);
    background-color: var(--dark-surface-alt);
    color: var(--dark-text-strong);
}

html.dark-layout .table.table-hover tbody tr:hover {

    --bs-table-accent-bg: var(--dark-table-bg);
}

/* Tabelas estáticas (valores exames empresa/requisitante) — mesmo padrão DataTables no dark */
html.dark-layout .table-responsive .table.table-striped.table-hover,
html.dark-layout .content-wrapper .table.table-striped.table-hover {

    --bs-table-bg: var(--dark-table-bg);
    --bs-table-striped-bg: var(--dark-table-bg);
    --bs-table-striped-color: var(--dark-text);
    --bs-table-hover-bg: var(--dark-table-hover);
    --bs-table-hover-color: var(--dark-text);
    --bs-table-accent-bg: var(--dark-table-bg);
}

html.dark-layout .table-responsive .table.table-striped.table-hover thead th,
html.dark-layout .table-responsive .table.table-striped.table-hover thead td,
html.dark-layout .content-wrapper .table.table-striped.table-hover thead th,
html.dark-layout .content-wrapper .table.table-striped.table-hover thead td {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong) !important;
    border-color: var(--dark-border) !important;
}

html.dark-layout .table-responsive .table.table-striped.table-hover tbody td,
html.dark-layout .table-responsive .table.table-striped.table-hover tbody th,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody td,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody th {

    background-color: var(--dark-table-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-layout .table-responsive .table.table-striped.table-hover tbody tr:nth-of-type(odd) td,
html.dark-layout .table-responsive .table.table-striped.table-hover tbody tr:nth-of-type(odd) th,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody tr:nth-of-type(odd) td,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody tr:nth-of-type(odd) th {

    background-color: var(--dark-table-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .table-responsive .table.table-striped.table-hover tbody tr:hover td,
html.dark-layout .table-responsive .table.table-striped.table-hover tbody tr:hover th,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody tr:hover td,
html.dark-layout .content-wrapper .table.table-striped.table-hover tbody tr:hover th {

    background-color: var(--dark-table-hover) !important;
    color: var(--dark-text) !important;
}

/* Formulários */
html.dark-layout input.form-control, html.dark-layout select.form-select, html.dark-layout textarea.form-control {

    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.dark-layout input.form-control:not(:focus), html.dark-layout select.form-select:not(:focus), html.dark-layout textarea.form-control:not(:focus) {

    border-color: var(--dark-input-border);
}

html.dark-layout input.form-control::placeholder, html.dark-layout select.form-select::placeholder, html.dark-layout textarea.form-control::placeholder {

    color: var(--dark-text-muted);
}

html.dark-layout .form-label, html.dark-layout .col-form-label {

    color: var(--dark-text-strong);
}

html.dark-layout .input-group .input-group-text {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Dropdown */
html.dark-layout .dropdown-menu {

    background-color: var(--dark-surface);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .24);
}

html.dark-layout .dropdown-menu .dropdown-header {

    color: var(--dark-text-strong);
}

html.dark-layout .dropdown-menu .dropdown-item {

    color: var(--dark-text);
}

html.dark-layout .dropdown-menu .dropdown-item:focus, html.dark-layout .dropdown-menu .dropdown-item:hover {

    background: rgba(75, 127, 246, .12);
    color: var(--dark-accent);
}

html.dark-layout .dropdown-divider {

    border-color: var(--dark-border);
}

/* Footer */
html.dark-layout .footer, html.dark-layout .footer-fixed .footer {

    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .footer a {

    color: var(--dark-text);
}

html.dark-layout .footer a:hover {

    color: var(--dark-accent);
}

/* Modais (Bootstrap + Grocery CRUD: delete-confirmation, inline, dashboard) */
html.dark-layout .modal-content {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .modal-header {

    border-bottom-color: var(--dark-border);
    background-color: var(--dark-bg) !important;
}

html.dark-layout .modal-title {

    color: var(--dark-text-strong);
}

html.dark-layout .modal-body {

    color: var(--dark-text);
    background-color: transparent;
}

html.dark-layout .modal-footer {

    border-top-color: var(--dark-border);
    background-color: transparent;
}

html.dark-layout .modal .btn-close, html.dark-layout .modal .close {

    filter: invert(1);
    opacity: 0.7;
}

html.dark-layout .modal .btn-close:hover, html.dark-layout .modal .close:hover {

    opacity: 1;
}

html.dark-layout .modal-backdrop, html.dark-layout .modal-backdrop.show {

    background-color: var(--dark-bg);
    opacity: 0.8;
}

/* ========== DataTables (Grocery CRUD / listagens) no dark - ref. 4say ========== */
html.dark-layout .dataTables_wrapper {

    color: var(--dark-text);
}

/* Variáveis Bootstrap da tabela: forçar cores dark (evita --bs-table-striped-bg/color claros) */
html.dark-layout .dataTables_wrapper .table, html.dark-layout .dataTables_wrapper .table.dataTable {

    --bs-table-bg: var(--dark-table-bg);
    --bs-table-striped-bg: var(--dark-table-bg);
    --bs-table-striped-color: var(--dark-text);
    --bs-table-hover-bg: var(--dark-table-hover);
    --bs-table-hover-color: var(--dark-text);
    --bs-table-accent-bg: var(--dark-table-bg);
}

/* Tabela: thead e tbody com cores explícitas (evitar inherit/branco) */
html.dark-layout .dataTables_wrapper .table.dataTable thead th, html.dark-layout .dataTables_wrapper .table.dataTable thead td, html.dark-layout .dataTables_wrapper .table.dataTable thead tr th, html.dark-layout .dataTables_wrapper .table.dataTable thead tr td {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong) !important;
    border-color: var(--dark-border) !important;
}

html.dark-layout .dataTables_wrapper .table.dataTable tbody td, html.dark-layout .dataTables_wrapper .table.dataTable tbody th, html.dark-layout .dataTables_wrapper .table.dataTable tbody tr td, html.dark-layout .dataTables_wrapper .table.dataTable tbody tr th {

    background-color: var(--dark-table-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-layout .dataTables_wrapper .table.dataTable tfoot th, html.dark-layout .dataTables_wrapper .table.dataTable tfoot td {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong) !important;
    border-color: var(--dark-border) !important;
}

/* Striped/hover: manter cores dark (evitar faixas ou hover brancos) */
html.dark-layout .dataTables_wrapper .table.dataTable.table-striped tbody tr:nth-of-type(odd) td, html.dark-layout .dataTables_wrapper .table.dataTable.table-striped tbody tr:nth-of-type(odd) th {

    background-color: var(--dark-table-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .dataTables_wrapper .table.dataTable.table-hover tbody tr:hover td, html.dark-layout .dataTables_wrapper .table.dataTable.table-hover tbody tr:hover th {

    background-color: var(--dark-table-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting:before, html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting_asc:before, html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting_desc:before {

    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23b4b7bd\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-chevron-up\'%3E%3Cpolyline points=\'18 15 12 9 6 15\'%3E%3C/polyline%3E%3C/svg%3E');
}

html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting:after, html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting_asc:after, html.dark-layout .dataTables_wrapper .table.dataTable thead .sorting_desc:after {

    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23b4b7bd\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-chevron-down\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'%3E%3C/polyline%3E%3C/svg%3E');
}

html.dark-layout .dataTables_wrapper .dt-buttons .btn-secondary, html.dark-layout .dataTables_wrapper .dt-buttons .buttons-copy, html.dark-layout .dataTables_wrapper .dt-buttons .buttons-excel, html.dark-layout .dataTables_wrapper .dt-buttons .buttons-pdf, html.dark-layout .dataTables_wrapper .dt-buttons .buttons-print, html.dark-layout .dataTables_wrapper .dt-button-collection [class*=buttons-] {

    color: #FFF !important;
    background-color: var(--dark-bg) !important;
}

html.dark-layout .dataTables_wrapper .table.dataTable tr.group td {

    background-color: var(--dark-table-bg);
    color: var(--dark-text-strong);
}

html.dark-layout .dataTables_wrapper .dataTables_info {

    color: var(--dark-text);
}

html.dark-layout .dataTables_wrapper .dt-button-collection {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .dataTables_wrapper div.dataTables_filter label, html.dark-layout .dataTables_wrapper div.dataTables_length label {

    color: var(--dark-text-strong);
}

html.dark-layout .dataTables_wrapper div.dataTables_filter input, html.dark-layout .dataTables_wrapper div.dataTables_length select {

    background-color: var(--dark-surface);
    border-color: var(--dark-input-border);
    color: var(--dark-text);
}

/* Toast (Bootstrap) no dark - ref. 4say */
html.dark-layout .toast {

    background-color: rgba(40, 48, 70, .85) !important;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, .24);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-layout .toast .toast-header {

    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-bottom-color: var(--dark-border);
}

html.dark-layout .toast .toast-header .btn-close {

    filter: invert(1);
    opacity: 0.8;
}

/* SweetAlert2 (Processando..., sucesso/erro) no dark */
html.dark-layout .swal2-container .swal2-popup {

    background-color: var(--dark-surface) !important;
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

html.dark-layout .swal2-container .swal2-title {

    color: var(--dark-text-strong) !important;
}

html.dark-layout .swal2-container .swal2-html-container {

    color: var(--dark-text) !important;
}

html.dark-layout .swal2-container .swal2-backdrop-show, html.dark-layout .swal2-container .swal2-backdrop {

    background: rgba(22, 29, 49, .8) !important;
}

html.dark-layout .swal2-container.swal2-toast .swal2-popup {

    background-color: rgba(40, 48, 70, .95) !important;
    border-color: var(--dark-border);
}

/* Popover e tooltip no dark */
html.dark-layout .popover {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .popover .popover-header {

    background-color: var(--dark-surface-alt);
    border-bottom-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .popover .popover-body {

    color: var(--dark-text);
}

html.dark-layout .popover .arrow::before, html.dark-layout .popover .arrow::after {

    border-color: var(--dark-border);
}

html.dark-layout .tooltip .tooltip-inner {

    background-color: var(--dark-surface);
    color: var(--dark-text-strong);
}

/* Text utilities */
html.dark-layout .text-muted {

    color: var(--dark-text-muted) !important;
}

html.dark-layout .text-body {

    color: var(--dark-text) !important;
}

/* Icon cards */
html.dark-layout .icon-card {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .icon-card .icon-name {

    color: var(--dark-text);
}

html.dark-layout .icon-card:hover .icon-name {

    color: var(--dark-accent);
}

/* Grocery CRUD - container e textos */
html.dark-layout .gc-container {

    color: var(--dark-text);
}

html.dark-layout .gc-container .table-label, html.dark-layout .gc-container .displaying-paging-items, html.dark-layout .gc-container .form-group label, html.dark-layout .gc-container .form-container label, html.dark-layout .gc-container .crud-form label {

    color: var(--dark-text-strong);
}

html.dark-layout .gc-container .table-section, html.dark-layout .gc-container .table-container, html.dark-layout .gc-container .scroll-if-required {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .gc-container .table-container {

    border-left-color: var(--dark-border);
    border-right-color: var(--dark-border);
}

/* GC - tabela e cabeçalhos */
html.dark-layout .gc-container table.grocery-crud-table {

    color: var(--dark-text);
}

/* Variáveis Bootstrap: tabela Grocery CRUD usa .table-striped (--bs-table-striped-bg/color) */
html.dark-layout .gc-container table.grocery-crud-table.table, html.dark-layout .gc-container table.table.grocery-crud-table {

    --bs-table-bg: var(--dark-table-bg);
    --bs-table-striped-bg: var(--dark-table-bg);
    --bs-table-striped-color: var(--dark-text);
    --bs-table-hover-bg: var(--dark-table-hover);
    --bs-table-hover-color: var(--dark-text);
    --bs-table-accent-bg: var(--dark-table-bg);
}

html.dark-layout .gc-container table.grocery-crud-table thead th, html.dark-layout .gc-container table.grocery-crud-table .filter-row td {

    background-color: var(--dark-surface-alt);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .gc-container table.grocery-crud-table tbody td, html.dark-layout .gc-container table.grocery-crud-table tbody th, html.dark-layout .gc-container table.grocery-crud-table tbody tr td, html.dark-layout .gc-container table.grocery-crud-table tbody tr th {

    background-color: var(--dark-table-bg) !important;
    border-color: var(--dark-border);
    color: var(--dark-text) !important;
}

html.dark-layout .gc-container .column-with-ordering {

    color: var(--dark-text-strong);
}

html.dark-layout .gc-container .column-with-ordering:hover {

    background: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong) !important;
}

/* GC - busca e inputs na lista */
html.dark-layout .gc-container .searchable-input, html.dark-layout .gc-container input.search-input, html.dark-layout .gc-container input.search-input-big {

    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-input-border);
}

html.dark-layout .gc-container .searchable-input::placeholder {

    color: var(--dark-text-muted);
}

html.dark-layout .gc-container .search-button-big {

    background-color: var(--dark-surface) !important;
}

html.dark-layout .gc-container .search-button-big:hover, html.dark-layout .gc-container .search-button-big:focus, html.dark-layout .gc-container .search-button-big:active {

    background-color: var(--dark-surface-alt) !important;
}

html.dark-layout .gc-container .clear-search, html.dark-layout .gc-container .clear-all-search {

    color: var(--dark-text);
}

html.dark-layout .gc-container .clear-search:hover, html.dark-layout .gc-container .clear-all-search:hover {

    color: var(--dark-accent) !important;
}

/* GC - header-tools, footer-tools, botões */
html.dark-layout .gc-container .header-tools, html.dark-layout .gc-container .footer-tools {

    color: var(--dark-text);
}

html.dark-layout .gc-container .btn-dark {

    background-color: var(--dark-surface-alt);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .gc-container .btn-dark:hover {

    background-color: var(--dark-input-border);
    border-color: var(--dark-border);
    color: #FFF;
}

/* GC - paginação e per_page */
html.dark-layout .gc-container .gc-pagination-container, html.dark-layout .gc-container .pagination {

    color: var(--dark-text);
}

html.dark-layout .gc-container .pagination .page-link, html.dark-layout .gc-container .page-number-input-container {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .pagination .page-link:hover, html.dark-layout .gc-container .pagination .page-item:not(.disabled) .page-link {

    background-color: var(--dark-surface-alt);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .gc-container .page-number-input, html.dark-layout .gc-container .per_page {

    background-color: var(--dark-surface);
    border-color: var(--dark-input-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .displaying-paging-items .paging-starts, html.dark-layout .gc-container .displaying-paging-items .paging-ends, html.dark-layout .gc-container .displaying-paging-items .current-total-results, html.dark-layout .gc-container .displaying-paging-items .full-total {

    color: var(--dark-text-strong);
}

/* GC - dropdown (ações na tabela) */
html.dark-layout .gc-container .dropdown-menu {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-layout .gc-container .dropdown-item {

    color: var(--dark-text);
}

html.dark-layout .gc-container .dropdown-item:hover {

    background: rgba(75, 127, 246, .12);
    color: var(--dark-accent);
}

/* GC - formulários add/edit e form-container */
html.dark-layout .gc-container .form-container, html.dark-layout .gc-container .crud-form, html.dark-layout .gc-container .form-control, html.dark-layout .gc-container .form-select, html.dark-layout .gc-container select.chosen-select {

    color: var(--dark-text);
}

html.dark-layout .gc-container .form-container, html.dark-layout .gc-container .crud-form {

    background-color: transparent;
}

html.dark-layout .gc-container .has-error input {

    border-color: #EA5455;
}

/* GC - table-label (add-edit-form), report-div, alerts */
html.dark-layout .gc-container .table-label, html.dark-layout .form-container .table-label {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong);
    border-color: var(--dark-border);
}

html.dark-layout .gc-container .report-div, html.dark-layout .gc-container .report-div.error, html.dark-layout .gc-container #report-error {

    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .report-div.error, html.dark-layout .gc-container #report-error {

    background-color: rgba(234, 84, 85, .2);
}

html.dark-layout .gc-container .alert, html.dark-layout .gc-container #success-message-container {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .alert-success, html.dark-layout .gc-container .success-message {

    color: #28C76F;
}

html.dark-layout .gc-container .minimize-maximize-container {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .btn-outline-secondary, html.dark-layout .gc-container .btn-outline-dark, html.dark-layout .gc-container .gc-refresh {

    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .gc-container .btn-outline-secondary:hover, html.dark-layout .gc-container .btn-outline-dark:hover, html.dark-layout .gc-container .gc-refresh:hover {

    background: rgba(75, 127, 246, .12);
    color: var(--dark-accent);
    border-color: var(--dark-border);
}

/* Scrollbar (Perfect Scrollbar) */
html.dark-layout .ps__thumb-x, html.dark-layout .ps__thumb-y {

    background-color: var(--dark-text);
}

/* ========== Demais elementos HTML no dark ========== */
html.dark-layout .list-group-item {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-layout .list-group-item-action:hover {

    background-color: var(--dark-surface-alt);
    color: var(--dark-text-strong);
}

html.dark-layout .alert {

    border-color: var(--dark-border);
}

html.dark-layout .alert-light, html.dark-layout .alert-secondary {

    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-layout .nav-tabs {

    border-bottom-color: var(--dark-border);
}

html.dark-layout .nav-tabs .nav-link {

    color: var(--dark-text);
    border-color: transparent;
    background-color: transparent;
}

html.dark-layout .nav-tabs .nav-link:hover, html.dark-layout .nav-tabs .nav-link:focus {

    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .nav-tabs .nav-link.active {

    background-color: var(--dark-surface);
    border-color: var(--dark-border) var(--dark-border) transparent;
    color: var(--dark-accent);
}

html.dark-layout .tab-content {

    color: var(--dark-text);
}

html.dark-layout .badge {

    border-color: transparent;
}

html.dark-layout .badge.bg-light, html.dark-layout .badge.bg-secondary {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong);
}

html.dark-layout .progress {

    background-color: var(--dark-surface);
}

html.dark-layout .progress-bar {

    background-color: var(--dark-accent);
}

/* form-check / form-switch: manter aparência do tema light no dark (cores claras) */
html.dark-layout .form-check-label {

    color: inherit;
}

html.dark-layout .form-check-input {

    background-color: #fff;
    border-color: #ced4da;
}

html.dark-layout .form-check-input:checked {

    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
}

html.dark-layout .form-switch .form-check-input {

    background-color: #e9ecef;
    border-color: transparent;
}

html.dark-layout .form-switch .form-check-input:checked {

    background-color: var(--dark-accent);
    border-color: transparent;
}

html.dark-layout .content-overlay {

    background-color: var(--dark-bg);
}

html.dark-layout .sidenav-overlay {

    background-color: rgba(22, 29, 49, .5);
}

html.dark-layout .card .card-header {

    border-bottom-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .card .card-title {

    color: var(--dark-text-strong);
}

html.dark-layout .btn-light {

    background-color: var(--dark-surface-alt);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.dark-layout .btn-light:hover {

    background-color: var(--dark-input-border);
    border-color: var(--dark-border);
    color: #FFF;
}

html.dark-layout .pagination .page-item.disabled .page-link {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}

html.dark-layout .content-header .content-header-left h1, html.dark-layout .content-header h1, html.dark-layout .content-header-title, html.dark-layout h4.content-header-title {

    color: var(--dark-text-strong);
}

/* Tela de permissões e similares: card-header.bg-primary, .bg-light, .border-primary */
html.dark-layout .card .card-header.bg-primary {

    background-color: var(--dark-accent) !important;
    border-bottom-color: rgba(255, 255, 255, .15);
}

html.dark-layout .card .card-header.bg-primary .card-title.text-white, html.dark-layout .card .card-header.bg-primary .form-check-label.text-white {

    color: #fff !important;
}

/* Permissões: form-switch "Selecionar Todos" no header mantém cores do tema light (track claro, checked warning) */
html.dark-layout .card .card-header.bg-primary .form-switch .form-check-input, html.dark-layout .card .card-header.bg-primary .form-check-warning .form-check-input {

    background-color: #e9ecef !important;
    border-color: transparent !important;
}

html.dark-layout .card .card-header.bg-primary .form-switch .form-check-input:checked, html.dark-layout .card .card-header.bg-primary .form-check-warning .form-check-input:checked {

    background-color: #FF9F43 !important;
    border-color: transparent !important;
}

html.dark-layout .bg-light {

    background-color: var(--dark-table-bg) !important;
}

html.dark-layout .border-primary {

    border-color: var(--dark-accent) !important;
}

html.dark-layout .card .card-text.text-muted {

    color: var(--dark-text-muted) !important;
}

html.dark-layout pre, html.dark-layout code {

    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Chosen (chosen-select) - dark: override chosen-select2-override.css com especificidade e !important */
html.dark-layout .chosen-container-single .chosen-single, html.dark-layout .chosen-container .chosen-single {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

html.dark-layout .chosen-container-active .chosen-single, html.dark-layout .chosen-container-active.chosen-with-drop .chosen-single {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
    border-color: var(--dark-accent) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .chosen-container-single .chosen-default {

    color: var(--dark-text-muted) !important;
}

html.dark-layout .chosen-container-single .chosen-single span {

    color: inherit !important;
}

html.dark-layout .chosen-container-single .chosen-single div b {

    border-top-color: var(--dark-text) !important;
}

html.dark-layout .chosen-container-active.chosen-with-drop .chosen-single div b {

    border-bottom-color: var(--dark-text) !important;
}

html.dark-layout .chosen-container .chosen-drop, html.dark-layout .chosen-container .chosen-results {

    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

html.dark-layout .chosen-container-active.chosen-with-drop .chosen-drop {

    border-top: none !important;
}

html.dark-layout .chosen-container .chosen-results li {

    color: var(--dark-text) !important;
}

html.dark-layout .chosen-container .chosen-results li.highlighted {

    background: rgba(75, 127, 246, .12) !important;
    color: var(--dark-accent) !important;
}

html.dark-layout .chosen-container .chosen-results li.result-selected {

    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text-strong) !important;
}

html.dark-layout .chosen-container .chosen-results li.disabled-result {

    color: var(--dark-text-muted) !important;
}

html.dark-layout .chosen-container-single .chosen-search input[type="text"], html.dark-layout .chosen-container .chosen-search input[type="text"] {

    background-color: var(--dark-surface) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .chosen-container-multi .chosen-choices {

    background-color: var(--dark-surface) !important;
    background: var(--dark-surface) !important;
    border-color: var(--dark-input-border) !important;
}

html.dark-layout .chosen-container-active .chosen-choices {

    border-color: var(--dark-accent) !important;
}

html.dark-layout .chosen-container-multi .chosen-choices li.search-choice {

    background-color: var(--dark-surface-alt) !important;
    background: var(--dark-surface-alt) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html.dark-layout .chosen-container-multi .chosen-choices li.search-field input[type="text"] {

    color: var(--dark-text) !important;
}

html.dark-layout .chosen-container-multi.chosen-disabled .chosen-choices, html.dark-layout .chosen-disabled .chosen-single, html.dark-layout .chosen-container-single.chosen-disabled .chosen-single {

    background-color: var(--dark-surface-alt) !important;
    background: var(--dark-surface-alt) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
}