html.dark-mode {
    --mco-bg: #1a1a1a;
    --mco-surface: #242424;
    --mco-surface-2: #2e2e2e;
    --mco-surface-3: #383838;
    --mco-border: #3d3d3d;
    --mco-text: #e8e8e8;
    --mco-text-muted: #a0a0a0;
    --mco-header: #1a3d5c;
    --mco-accent: #388bfd;
    --mco-link: #58a6ff;
    --mco-sidebar: #141414;
    --mco-card-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 123, 255, 0.1);
    --mco-btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 123, 255, 0.12);
    --mco-btn-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 123, 255, 0.22);
}

html.dark-mode,
html.dark-mode body,
html.dark-mode .wrapper {
    background-color: var(--mco-bg);
    color: var(--mco-text);
}

html.dark-mode .content-wrapper,
html.dark-mode .right-side {
    background-color: var(--mco-bg);
    color: var(--mco-text);
}

html.dark-mode .main-footer {
    background: var(--mco-surface);
    border-top-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .content-header > h1 small {
    color: var(--mco-text-muted);
}

html.dark-mode a:not(.btn) {
    color: var(--mco-link);
}

/* ===== Header / Navbar ===== */
html.dark-mode .main-header .navbar,
html.dark-mode .main-header .logo {
    background-color: var(--mco-header);
}

html.dark-mode .main-header .logo:hover {
    background-color: var(--mco-header);
}

html.dark-mode .main-header .navbar .nav > li > a {
    color: var(--mco-text);
}

html.dark-mode .main-header .navbar .nav > li > a:hover,
html.dark-mode .main-header .navbar .nav > li > a:active,
html.dark-mode .main-header .navbar .nav .open > a {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html.dark-mode .main-header .sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ===== Sidebar ===== */
/* O menu lateral mantém o padrão skin-blue (azul-grafite) do AdminLTE.
   Sem overrides de fundo aqui de propósito. A única regra abaixo apenas
   impede que a cor de link global (azul) pinte os ícones/texto do menu,
   devolvendo o cinza padrão do skin-blue. */
html.dark-mode .sidebar-menu a {
    color: #b8c7ce;
}

html.dark-mode .sidebar-form {
    border-color: var(--mco-border);
}

html.dark-mode .sidebar-form .form-control {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

/* ===== Boxes ===== */
html.dark-mode .box {
    background-color: var(--mco-surface);
    border: 1px solid var(--mco-border);
    border-top-color: var(--mco-border);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .box.box-solid > .box-header,
html.dark-mode .box-header {
    color: var(--mco-text);
}

html.dark-mode .box-header.with-border {
    border-bottom-color: var(--mco-border);
}

html.dark-mode .box-footer {
    background-color: var(--mco-surface);
    border-top-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .nav-tabs-custom {
    background-color: var(--mco-surface);
    border: 1px solid var(--mco-border);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .nav-tabs-custom > .nav-tabs {
    border-bottom-color: var(--mco-border);
}

html.dark-mode .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--mco-text-muted);
}

html.dark-mode .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--mco-header);
}

html.dark-mode .nav-tabs-custom > .nav-tabs > li.active > a {
    background-color: var(--mco-surface);
    color: var(--mco-text);
}

html.dark-mode .nav-tabs-custom > .tab-content {
    background-color: var(--mco-surface);
    color: var(--mco-text);
}

/* ===== Bootstrap nav-tabs ===== */
html.dark-mode .nav-tabs {
    border-bottom-color: var(--mco-border);
}

html.dark-mode .nav-tabs > li > a {
    color: var(--mco-text-muted);
}

html.dark-mode .nav-tabs > li > a:hover {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
    border-bottom-color: transparent;
    color: var(--mco-text);
}

/* ===== Panels / wells / callouts ===== */
html.dark-mode .panel,
html.dark-mode .well {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
    color: var(--mco-text);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .panel-default > .panel-heading {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

/* ===== List-group (ex.: Transição de Status) ===== */
html.dark-mode .list-group-item,
html.dark-mode a.list-group-item {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode a.list-group-item:hover,
html.dark-mode a.list-group-item:focus {
    background-color: var(--mco-surface-2);
    color: var(--mco-text);
}

html.dark-mode a.list-group-item.active,
html.dark-mode a.list-group-item.active:hover,
html.dark-mode a.list-group-item.active:focus {
    background-color: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .list-group-item > .badge {
    background-color: var(--mco-surface-3);
    color: var(--mco-text);
}

html.dark-mode a.list-group-item.active > .badge {
    background-color: #fff;
    color: var(--mco-header);
}

/* ===== Info-box (cards de KPI do dashboard) ===== */
html.dark-mode .info-box {
    background-color: var(--mco-surface);
    border: 1px solid var(--mco-border);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .info-box-text,
html.dark-mode .info-box-content {
    color: var(--mco-text);
}

html.dark-mode .info-box-number {
    color: var(--mco-link);
}

/* ===== Cards (estilo Bootstrap 4/5 - monitoramento) ===== */
html.dark-mode .card {
    background: var(--mco-surface);
    border: 1px solid var(--mco-border);
    box-shadow: var(--mco-card-shadow);
    color: var(--mco-text);
    /* CSS vars do card Bootstrap 5 (cabeçalho/rodapé usam --bs-card-cap-bg) */
    --bs-card-bg: var(--mco-surface);
    --bs-card-cap-bg: var(--mco-surface);
    --bs-card-color: var(--mco-text);
    --bs-card-border-color: var(--mco-border);
}

html.dark-mode .card-primary.card-outline {
    border-top: 3px solid var(--mco-accent);
}

html.dark-mode .card-header {
    border-bottom-color: var(--mco-border);
}

html.dark-mode .card-title,
html.dark-mode .profile-username {
    color: var(--mco-text);
}

html.dark-mode .filter-card {
    background-color: var(--mco-surface-2);
    color: var(--mco-text);
}

/* ===== Monitoramento E2M (cards .cartao do parque de máquinas) ===== */
html.dark-mode .cartao {
    background: var(--mco-surface);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .titulo-grafico {
    color: var(--mco-text);
}

html.dark-mode .descricao-status {
    color: var(--mco-text-muted);
}

html.dark-mode .cartao .text-dark,
html.dark-mode .card .text-dark,
html.dark-mode .cartao-cabecalho h6 {
    color: var(--mco-text) !important;
}

/* Select customizado (.select-like) e <option> nativos (telas E2M) */
html.dark-mode .select-like {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode select.form-control option,
html.dark-mode .select-like option {
    background-color: var(--mco-surface-2);
    color: var(--mco-text);
}

html.dark-mode select.form-control option:checked,
html.dark-mode .select-like option:checked {
    background-color: var(--mco-header);
    color: #fff;
}

/* ===== Select2 (telas E2M) ===== */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .select2-container--default .select2-selection__rendered {
    color: var(--mco-text);
}

html.dark-mode .select2-container--default .select2-selection__placeholder {
    color: #686868;
}

html.dark-mode .select2-dropdown {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .select2-results__option {
    color: var(--mco-text);
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--mco-surface-3);
    color: var(--mco-text);
}

html.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--mco-surface-3);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
}

/* ===== flatpickr (date/time picker - telas E2M) ===== */
html.dark-mode .flatpickr-calendar {
    background: var(--mco-surface-2);
    border-color: var(--mco-border);
    box-shadow: var(--mco-card-shadow);
    color: var(--mco-text);
}

html.dark-mode .flatpickr-calendar.arrowTop:before,
html.dark-mode .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--mco-surface-2);
}

html.dark-mode .flatpickr-calendar.arrowBottom:before,
html.dark-mode .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--mco-surface-2);
}

html.dark-mode .flatpickr-months .flatpickr-month,
html.dark-mode .flatpickr-current-month,
html.dark-mode .flatpickr-current-month input.cur-year,
html.dark-mode .flatpickr-months .flatpickr-prev-month,
html.dark-mode .flatpickr-months .flatpickr-next-month {
    color: var(--mco-text);
    fill: var(--mco-text);
}

html.dark-mode .flatpickr-months .flatpickr-prev-month:hover svg,
html.dark-mode .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--mco-link);
}

html.dark-mode span.flatpickr-weekday {
    color: var(--mco-text-muted);
}

html.dark-mode .flatpickr-day {
    color: var(--mco-text);
}

html.dark-mode .flatpickr-day:hover,
html.dark-mode .flatpickr-day:focus {
    background: var(--mco-surface-3);
    border-color: var(--mco-surface-3);
}

html.dark-mode .flatpickr-day.today {
    border-color: var(--mco-accent);
}

html.dark-mode .flatpickr-day.selected,
html.dark-mode .flatpickr-day.selected:hover {
    background: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .flatpickr-day.prevMonthDay,
html.dark-mode .flatpickr-day.nextMonthDay,
html.dark-mode .flatpickr-day.flatpickr-disabled {
    color: var(--mco-text-muted);
    opacity: 0.5;
}

html.dark-mode .flatpickr-time {
    border-top-color: var(--mco-border);
}

html.dark-mode .flatpickr-time input,
html.dark-mode .flatpickr-time .flatpickr-time-separator,
html.dark-mode .flatpickr-time .flatpickr-am-pm {
    color: var(--mco-text);
}

html.dark-mode .flatpickr-time input:hover,
html.dark-mode .flatpickr-time input:focus,
html.dark-mode .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--mco-surface-3);
}

html.dark-mode .flatpickr-monthDropdown-months,
html.dark-mode .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--mco-surface-2);
    color: var(--mco-text);
}

/* flatpickr - plugin de seleção de mês (Comparativo) */
html.dark-mode .flatpickr-monthSelect-month {
    color: var(--mco-text);
}

html.dark-mode .flatpickr-monthSelect-month:hover {
    background: var(--mco-surface-3);
}

html.dark-mode .flatpickr-monthSelect-month.selected {
    background: var(--mco-header);
    color: #fff;
}

html.dark-mode .flatpickr-monthSelect-month.flatpickr-disabled {
    color: var(--mco-text-muted);
    opacity: 0.4;
}

/* Texto secundário/mutado do Bootstrap legível no escuro (cards Cash Flow etc.) */
html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode .help-block {
    color: var(--mco-text-muted) !important;
}

/* Selects Bootstrap 4/5 (.custom-select / .form-select) - telas E2M (Integração etc.) */
html.dark-mode .custom-select,
html.dark-mode .form-select {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .custom-select option,
html.dark-mode .form-select option {
    background-color: var(--mco-surface-2);
    color: var(--mco-text);
}

/* ===== Notificações ===== */
/* E-monitor (E2M) */
html.dark-mode .notificacoes-dropdown {
    background: var(--mco-surface);
    border-color: var(--mco-border);
}

html.dark-mode .notificacoes-dropdown .dropdown-header {
    border-bottom-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .notificacao-item {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .notificacao-item:hover {
    background-color: var(--mco-surface-3);
}

html.dark-mode .dropdown-item-text {
    color: var(--mco-text-muted);
}

/* Notificações globais (navbar - dropdown AdminLTE .notifications-menu) */
html.dark-mode #notificacoesMenu > .dropdown-menu {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode #notificacoesMenu > .dropdown-menu::before {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
}

html.dark-mode #notificacoesHeader {
    background-color: var(--mco-surface) !important;
    border-bottom-color: var(--mco-border) !important;
    color: var(--mco-text) !important;
}

html.dark-mode #notificacoesLista > li > a {
    background-color: var(--mco-surface) !important;
    color: var(--mco-text) !important;
    border-bottom-color: var(--mco-border) !important;
}

html.dark-mode #notificacoesLista > li > a:hover {
    background-color: var(--mco-surface-2) !important;
}

html.dark-mode #notificacoesLista .notificacao-nao-lida > a {
    background-color: var(--mco-surface-3) !important;
}

html.dark-mode #notificacoesLista .notificacao-mensagem {
    color: var(--mco-text-muted) !important;
}

html.dark-mode #notificacoesLista .notificacao-titulo,
html.dark-mode #notificacoesLista .notificacao-vazia > strong {
    color: var(--mco-text) !important;
}

html.dark-mode #notificacoesLista .notificacao-data,
html.dark-mode #notificacoesLista .notificacao-vazia {
    color: var(--mco-text-muted) !important;
}

html.dark-mode #notificacoesLista .notificacao-vazia > .fa {
    color: #38b98d;
}

html.dark-mode #marcarTodasNotificacoes {
    background-color: var(--mco-surface) !important;
    border-top-color: var(--mco-border);
    color: var(--mco-link) !important;
}

html.dark-mode #marcarTodasNotificacoes:hover {
    background-color: var(--mco-surface-2) !important;
    color: var(--mco-link) !important;
}

/* ===== Tables ===== */
html.dark-mode .table {
    color: var(--mco-text);
}

html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .table > tfoot > tr > th,
html.dark-mode .table > thead > tr > td,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tfoot > tr > td {
    border-top-color: var(--mco-border);
}

html.dark-mode .table > thead > tr > th {
    border-bottom-color: var(--mco-border);
}

html.dark-mode .table thead[style],
html.dark-mode .table thead[style] > tr > th {
    background-color: var(--mco-surface-2) !important;
    color: var(--mco-text);
}

html.dark-mode .table-bordered,
html.dark-mode .table-bordered > thead > tr > th,
html.dark-mode .table-bordered > tbody > tr > th,
html.dark-mode .table-bordered > tfoot > tr > th,
html.dark-mode .table-bordered > thead > tr > td,
html.dark-mode .table-bordered > tbody > tr > td,
html.dark-mode .table-bordered > tfoot > tr > td {
    border-color: var(--mco-border);
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Tabelas de endereços/itens (Empresa, AFs, PropostaComercial, Embarque) - cores
   claras hardcoded em classe nos views; aqui no global para valer em todas as telas. */
html.dark-mode .tabela-enderecos > thead > tr > th,
html.dark-mode .tabela-itens > thead > tr > th {
    background-color: var(--mco-surface-2);
    color: var(--mco-text);
}

html.dark-mode .tabela-enderecos > tbody > tr:nth-of-type(odd),
html.dark-mode .tabela-itens > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Box de descrição/comentário (.description) - reutilizado em várias telas. */
html.dark-mode .description {
    background: var(--mco-surface);
    border-color: var(--mco-border);
    color: var(--mco-text);
    box-shadow: var(--mco-card-shadow);
}

/* Tabelas dentro de modais ganham o realce de card (as de página já ficam no .box). */
html.dark-mode .modal .table-bordered {
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode .table-hover > tbody > tr:hover,
html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode .table-hover > tbody > tr:hover > th {
    background-color: var(--mco-surface-2) !important;
}

html.dark-mode td[style*="rgb(255, 204, 204)"] {
    background-color: rgba(248, 81, 73, 0.2) !important;
    color: #ff9492 !important;
}

html.dark-mode tr[style*="rgb(244, 244, 244)"],
html.dark-mode tr[style*="rgb(244, 244, 244)"] > th,
html.dark-mode tr[style*="rgb(244, 244, 244)"] > td,
html.dark-mode tr[style*="rgb(242, 242, 242)"],
html.dark-mode tr[style*="rgb(242, 242, 242)"] > th,
html.dark-mode tr[style*="rgb(242, 242, 242)"] > td {
    background-color: var(--mco-surface-2) !important;
    color: var(--mco-text);
}

/* Critérios de senha (verde inline 'green' fica escuro no tema escuro) */
html.dark-mode li[style*="color: green"] {
    color: #5cdb6e !important;
}

/* ===== Forms ===== */
html.dark-mode .form-control {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: #e6edf3;
}

html.dark-mode .form-control:focus {
    border-color: var(--mco-accent);
    box-shadow: none;
}

html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly],
html.dark-mode fieldset[disabled] .form-control {
    background-color: var(--mco-surface-3);
    color: #b3bcc6;
}

html.dark-mode .form-control::-webkit-input-placeholder {
    color: #686868;
}

html.dark-mode .form-control::-moz-placeholder {
    color: #686868;
}

html.dark-mode .input-group-addon {
    background-color: var(--mco-surface-3);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .input-group .form-control:not(:last-child) {
    border-right-color: #6e7681;
}

html.dark-mode .input-group .form-control:not(:first-child) {
    border-left-color: #6e7681;
}

html.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="month"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

html.dark-mode label,
html.dark-mode .control-label {
    color: var(--mco-text);
}

/* ===== Buttons ===== */
/* Realce (sombra azulada) nos botões, no mesmo espírito dos cards. */
html.dark-mode .btn {
    box-shadow: var(--mco-btn-shadow);
}

html.dark-mode .btn:hover,
html.dark-mode .btn:focus {
    box-shadow: var(--mco-btn-shadow-hover);
}

html.dark-mode .btn-link {
    box-shadow: none;
}

html.dark-mode .btn-default {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .btn-default:hover,
html.dark-mode .btn-default:focus,
html.dark-mode .btn-default:active {
    background-color: var(--mco-surface-3);
    border-color: var(--mco-border);
    color: #fff;
}

html.dark-mode .btn-default.active,
html.dark-mode .btn-default.active:hover,
html.dark-mode .btn-default.active:focus {
    background-color: var(--mco-surface-3);
    border-color: var(--mco-border);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--mco-header);
}

/* ===== Abas de filtro de status (btn-group-toggle) ===== */
html.dark-mode .btn-group-toggle > .btn-default {
    background-color: #444444;
    border-color: #555555;
    color: #d8d8d8;
}

html.dark-mode .btn-group-toggle > .btn-default:hover,
html.dark-mode .btn-group-toggle > .btn-default:focus {
    background-color: #4f4f4f;
    border-color: #5e5e5e;
    color: #fff;
}

html.dark-mode .btn-group-toggle > .btn-default.active,
html.dark-mode .btn-group-toggle > .btn-default.active:hover,
html.dark-mode .btn-group-toggle > .btn-default.active:focus {
    background-color: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--mco-accent);
}

html.dark-mode .btn-file {
    color: var(--mco-text);
}

html.dark-mode .btn-primary {
    background-color: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus,
html.dark-mode .btn-primary:active,
html.dark-mode .btn-primary.active {
    background-color: #143049;
    border-color: #143049;
    color: #fff;
}

html.dark-mode .btn-secondary {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-secondary:focus {
    background-color: var(--mco-surface-3);
    border-color: var(--mco-border);
    color: #fff;
}

/* Outline buttons do Bootstrap 5 (telas E2M) - legíveis no escuro */
html.dark-mode .btn-outline-info {
    color: #4dd0e1;
    border-color: #4dd0e1;
    background-color: transparent;
}

html.dark-mode .btn-outline-danger {
    color: #ff7a7a;
    border-color: #ff7a7a;
    background-color: transparent;
}

html.dark-mode .btn-outline-warning {
    color: #ffca6a;
    border-color: #ffca6a;
    background-color: transparent;
}

html.dark-mode .btn-outline-info:hover,
html.dark-mode .btn-outline-danger:hover,
html.dark-mode .btn-outline-warning:hover {
    color: #1a1a1a;
}

html.dark-mode .btn-outline-info:hover {
    background-color: #4dd0e1;
}

html.dark-mode .btn-outline-danger:hover {
    background-color: #ff7a7a;
}

html.dark-mode .btn-outline-warning:hover {
    background-color: #ffca6a;
}

/* ===== Dropdowns ===== */
html.dark-mode .dropdown-menu {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

html.dark-mode .dropdown-menu > li > a {
    color: var(--mco-text);
}

html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
    background-color: var(--mco-surface-3);
    color: #fff;
}

html.dark-mode .dropdown-menu .divider {
    background-color: var(--mco-border);
}

html.dark-mode .navbar-nav > .user-menu > .dropdown-menu > .user-header {
    background-color: var(--mco-header);
}

html.dark-mode .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: var(--mco-surface-2);
}

html.dark-mode .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    color: var(--mco-text);
}

/* ===== Modals ===== */
html.dark-mode .modal-content {
    background-color: var(--mco-surface);
    color: var(--mco-text);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--mco-border);
}

html.dark-mode .modal-backdrop {
    background-color: #000;
}

html.dark-mode .close {
    color: var(--mco-text);
    opacity: 0.6;
    text-shadow: none;
}

/* ===== Pagination ===== */
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-link);
}

html.dark-mode .pagination > li > a:hover {
    background-color: var(--mco-surface-3);
}

html.dark-mode .pagination > .active > a,
html.dark-mode .pagination > .active > span,
html.dark-mode .pagination > .active > a:hover,
html.dark-mode .pagination > .active > a:focus,
html.dark-mode .pagination > .active > span:hover,
html.dark-mode .pagination > .active > span:focus {
    background-color: var(--mco-header);
    border-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .pagination > .disabled > a,
html.dark-mode .pagination > .disabled > span {
    background-color: var(--mco-surface);
    border-color: var(--mco-border);
    color: var(--mco-text-muted);
}

/* ===== DataTables ===== */
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: var(--mco-text);
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--mco-text) !important;
}

html.dark-mode table.dataTable thead .sorting,
html.dark-mode table.dataTable thead .sorting_asc,
html.dark-mode table.dataTable thead .sorting_desc {
    background-color: var(--mco-surface-2);
}

/* ===== DataTables FixedColumns (coluna fixa) ===== */
html.dark-mode table.DTFC_Cloned tr,
html.dark-mode div.DTFC_LeftHeadWrapper table,
html.dark-mode div.DTFC_RightHeadWrapper table,
html.dark-mode div.DTFC_LeftBodyWrapper table,
html.dark-mode div.DTFC_RightBodyWrapper table,
html.dark-mode div.DTFC_LeftFootWrapper table,
html.dark-mode div.DTFC_RightFootWrapper table,
html.dark-mode div.DTFC_Blocker {
    background-color: var(--mco-surface);
}

html.dark-mode div.DTFC_LeftBodyLiner,
html.dark-mode div.DTFC_RightBodyLiner {
    background-color: var(--mco-surface);
}

/* Cabeçalho: TODAS as th do thead (inclusive não-ordenáveis como "Ações" e a coluna
   fixa clonada do FixedColumns) com a mesma cor do thead principal (surface-2). */
html.dark-mode table.dataTable thead th,
html.dark-mode table.DTFC_Cloned thead th {
    background-color: var(--mco-surface-2);
}

/* ===== Barras de rolagem ===== */
html.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--mco-bg);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--mco-surface-3);
    border-radius: 6px;
    border: 3px solid var(--mco-bg);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--mco-border);
}

html.dark-mode {
    scrollbar-color: var(--mco-surface-3) var(--mco-bg);
}

/* ===== Spinner de carregamento (spinner.gif) ===== */
/* O gif é claro e tem cauda branca (some no tema claro, mas vira "traço branco" no
   escuro). Recolore o spinner inteiro para um cinza-claro uniforme. */
html.dark-mode img[src*="spinner.gif"] {
    filter: brightness(0) invert(0.85);
}

/* ===== vue-multiselect ===== */
html.dark-mode .multiselect__tags {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .multiselect__tag {
    background: var(--mco-header);
    color: #fff;
}

html.dark-mode .multiselect__tag-icon:hover {
    background: #143049;
}

html.dark-mode .multiselect__input,
html.dark-mode .multiselect__single {
    background-color: transparent;
    color: #e6edf3;
}

html.dark-mode .multiselect--disabled,
html.dark-mode .multiselect--disabled .multiselect__single {
    color: #b3bcc6;
}

html.dark-mode .multiselect__content-wrapper {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .multiselect__option {
    color: var(--mco-text);
}

html.dark-mode .multiselect__option--highlight {
    background-color: var(--mco-header);
    color: #fff;
}

html.dark-mode .multiselect__option--selected {
    background: var(--mco-surface-3);
    color: var(--mco-text);
}

html.dark-mode .multiselect__option--group {
    background: var(--mco-surface);
    color: var(--mco-text-muted);
}

html.dark-mode .multiselect__option--disabled {
    background: var(--mco-surface) !important;
    color: var(--mco-text-muted);
}

html.dark-mode .multiselect--disabled,
html.dark-mode .multiselect--disabled .multiselect__tags,
html.dark-mode .multiselect--disabled .multiselect__current,
html.dark-mode .multiselect--disabled .multiselect__select {
    background: var(--mco-surface-3);
}

html.dark-mode .multiselect__placeholder {
    color: #686868;
}

html.dark-mode .multiselect__spinner {
    background: var(--mco-surface-2);
}

/* ===== vue-treeselect ===== */
html.dark-mode .vue-treeselect__control {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .vue-treeselect__menu {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .vue-treeselect__single-value,
html.dark-mode .vue-treeselect__input,
html.dark-mode .vue-treeselect__label {
    color: var(--mco-text);
}

html.dark-mode .vue-treeselect__option--highlight {
    background: var(--mco-surface-2);
}

html.dark-mode .vue-treeselect--single .vue-treeselect__option--selected {
    background: var(--mco-surface-3);
}

html.dark-mode .vue-treeselect__option--selected:hover {
    background: var(--mco-surface-3);
}

html.dark-mode .vue-treeselect__multi-value-item {
    background: var(--mco-header);
    color: #fff;
}

/* ===== Alerts / misc ===== */
/* Callouts/alerts informativos (azul) -> mesmo marinho dos botões */
html.dark-mode .callout.callout-info,
html.dark-mode .alert-info {
    background-color: var(--mco-header) !important;
    border-color: #143049;
    color: #fff;
}

html.dark-mode .callout.callout-info a,
html.dark-mode .alert-info a {
    color: #fff;
    text-decoration: underline;
}

html.dark-mode hr {
    border-top-color: var(--mco-border);
}

html.dark-mode .text-muted {
    color: var(--mco-text-muted);
}

html.dark-mode pre {
    background-color: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .bg-white {
    background-color: var(--mco-surface) !important;
}

html.dark-mode .progress {
    background-color: var(--mco-surface-3);
    box-shadow: none;
}

html.dark-mode .overlay {
    background: rgba(13, 17, 23, 0.6);
}

html.dark-mode .overlay > .fa,
html.dark-mode .overlay > .glyphicon,
html.dark-mode .overlay > .ion {
    color: var(--mco-text);
}

/* ===== Divisor de seção (text-divider) ===== */
html.dark-mode .text-divider span {
    background-color: var(--mco-surface);
    color: var(--mco-text-muted);
}

html.dark-mode .text-divider:before {
    border-top-color: var(--mco-border);
}

/* ===== Timeline (interações / histórico) ===== */
html.dark-mode .timeline:before {
    background: var(--mco-border);
}

html.dark-mode .timeline > li > .timeline-item,
html.dark-mode .timeline-inverse > li > .timeline-item {
    background: var(--mco-surface-2);
    border: 1px solid var(--mco-border);
    box-shadow: none;
    color: var(--mco-text);
}

html.dark-mode .timeline > li > .timeline-item > .timeline-header,
html.dark-mode .timeline-inverse > li > .timeline-item > .timeline-header {
    color: var(--mco-text);
    border-bottom-color: var(--mco-border);
}

html.dark-mode .timeline > li > .timeline-item > .time {
    color: var(--mco-text-muted);
}

html.dark-mode .timeline > li > .timeline-item:before {
    border-right-color: var(--mco-border);
}

/* ===== SweetAlert2 ===== */
html.dark-mode .swal2-popup {
    background: var(--mco-surface);
    color: var(--mco-text);
}

html.dark-mode .swal2-title,
html.dark-mode .swal2-html-container,
html.dark-mode .swal2-content {
    color: var(--mco-text);
}

html.dark-mode .swal2-input,
html.dark-mode .swal2-textarea,
html.dark-mode .swal2-select,
html.dark-mode .swal2-file {
    background: var(--mco-surface-2);
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode .swal2-input::placeholder,
html.dark-mode .swal2-textarea::placeholder {
    color: var(--mco-text-muted);
}

html.dark-mode .swal2-checkbox,
html.dark-mode .swal2-radio {
    background: transparent;
    color: var(--mco-text);
}

html.dark-mode .swal2-validation-message {
    background: var(--mco-surface-2);
    color: var(--mco-text);
}

/* ===== Toggles (yn-toggle / toggle-switch) ===== */
html.dark-mode .toggle-permission-item {
    background: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode .toggle-permission-item > label:first-child {
    color: var(--mco-text);
}

html.dark-mode .toggle-slider {
    background: var(--mco-surface-3);
}

html.dark-mode .yn-toggle {
    border-color: var(--mco-border);
}

html.dark-mode .yn-btn {
    background: var(--mco-surface-2);
    color: var(--mco-text-muted);
}

html.dark-mode .yn-btn.yn-active {
    background: var(--mco-header);
    color: #fff;
}

/* pretty-checkbox p-switch "primary" -> mesmo azul-marinho dos botões */
html.dark-mode .pretty.p-switch input:checked ~ .state.p-primary:before {
    border-color: var(--mco-header);
}

html.dark-mode .pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
    background-color: var(--mco-header) !important;
}

/* pretty-checkbox p-switch DESLIGADO -> trilha/bolinha escuras (sem branco) */
html.dark-mode .pretty.p-switch .state:before {
    border-color: var(--mco-border);
    background-color: var(--mco-surface-3);
}

html.dark-mode .pretty.p-switch .state label:after {
    background-color: #8a8a8a !important;
}

html.dark-mode .yn-sep {
    background: var(--mco-border);
}

html.dark-mode #homeApp [style*="background-color:#FFF"],
html.dark-mode #homeApp [style*="background-color: #FFF"],
html.dark-mode #homeApp [style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--mco-surface) !important;
    color: var(--mco-text);
}

html.dark-mode #homeApp [style*="box-shadow: 0px 0px 0px 1px rgba(140, 140, 140, 0.2)"] {
    box-shadow: var(--mco-card-shadow) !important;
}

html.dark-mode #homeApp .products-list > .item {
    background: var(--mco-surface);
    border-color: var(--mco-border);
}

html.dark-mode #homeApp .products-list > .item:hover {
    background: var(--mco-surface-2);
}

html.dark-mode #homeApp .birthday {
    background: var(--mco-surface-2) !important;
}

html.dark-mode #homeApp .publication-button,
html.dark-mode #homeApp .interaction-button {
    color: var(--mco-text);
}

html.dark-mode #homeApp .publication-button {
    background: var(--mco-surface-2);
    border-color: var(--mco-border);
}

html.dark-mode #homeApp .publication-button:hover,
html.dark-mode #homeApp .interaction-button:hover {
    background: var(--mco-surface-3);
}

html.dark-mode #homeApp .mobile-buttons-container {
    background: var(--mco-surface);
    box-shadow: var(--mco-card-shadow);
}

html.dark-mode #homeApp .initials {
    background-color: var(--mco-surface-2) !important;
    border-color: var(--mco-border);
    color: var(--mco-text);
}

html.dark-mode #homeApp [style*="color:#000"],
html.dark-mode #homeApp [style*="color: #000"],
html.dark-mode #homeApp [style*="rgb(0, 0, 0)"] {
    color: var(--mco-text) !important;
}

html.dark-mode #homeApp [style*="rgba(0, 0, 0, 0.6)"] {
    color: var(--mco-text-muted) !important;
}

/* ===== Theme toggle button ===== */
.mco-tema-toggle {
    cursor: pointer;
}

/* ===== Linha de divergência em tabelas (.table-danger) ===== */
html.dark-mode .table-danger,
html.dark-mode .table-danger > td,
html.dark-mode .table-danger > th {
    background-color: #4a1f24 !important;
    border-color: var(--mco-border);
    color: var(--mco-text) !important;
}

/* ===== E2M ===== */
html.dark-mode .e2m-page,
html.dark-mode .e2m-page-header {
    --e2m-primary: var(--mco-accent);
    --e2m-primary-strong: var(--mco-header);
    --e2m-primary-soft: var(--mco-surface-3);
    --e2m-accent: #35c9b8;
    --e2m-accent-soft: var(--mco-surface-3);
    --e2m-danger: #f06b7e;
    --e2m-danger-soft: #402a2e;
    --e2m-warning: #e6a43c;
    --e2m-warning-soft: #3d3425;
    --e2m-success: #38b98d;
    --e2m-page-bg: var(--mco-bg);
    --e2m-surface: var(--mco-surface);
    --e2m-surface-alt: var(--mco-surface-2);
    --e2m-surface-raised: var(--mco-surface-2);
    --e2m-text: var(--mco-text);
    --e2m-text-muted: var(--mco-text-muted);
    --e2m-border: var(--mco-border);
    --e2m-border-strong: var(--mco-surface-3);
    --e2m-grid: rgba(88, 166, 255, .055);
    --e2m-glow: rgba(53, 201, 184, .11);
    --e2m-shadow-sm: var(--mco-card-shadow);
    --e2m-shadow: var(--mco-card-shadow);
    --e2m-focus: 0 0 0 3px rgba(56, 139, 253, .22);
}

html.dark-mode .e2m-page-header,
html.dark-mode .e2m-page .card,
html.dark-mode .e2m-page .box,
html.dark-mode .e2m-page .panel,
html.dark-mode .e2m-page .info-box,
html.dark-mode .e2m-page .modal-content,
html.dark-mode .e2m-page .table,
html.dark-mode .e2m-page .table > tbody > tr > td {
    color: var(--e2m-text);
}

html.dark-mode .e2m-page [style*="background:#fff"],
html.dark-mode .e2m-page [style*="background: #fff"],
html.dark-mode .e2m-page [style*="background-color:#fff"],
html.dark-mode .e2m-page [style*="background-color: #fff"],
html.dark-mode .e2m-page [style*="rgb(255, 255, 255)"] {
    background-color: var(--e2m-surface) !important;
}

html.dark-mode .e2m-page [style*="color:#000"],
html.dark-mode .e2m-page [style*="color: #000"],
html.dark-mode .e2m-page [style*="rgb(0, 0, 0)"] {
    color: var(--e2m-text) !important;
}