/**
 * Painel profissional — tokens e overrides globais
 */
html {
    color-scheme: dark;
}

:root {
    --panel-bg: #0f1014;
    --panel-surface: #0d0e12;
    --panel-surface-elevated: #15171c;
    --panel-surface-hover: #1b1c22;
    --panel-border: #26272f;
    --panel-border-strong: #363843;
    --panel-text: #f5f5f5;
    --panel-text-secondary: #b5b7c8;
    --panel-text-muted: #636674;
    --panel-accent: #006ae6;
    --panel-accent-hover: #107eff;
    --panel-accent-soft: rgba(0, 106, 230, 0.12);
    --panel-accent-muted: rgba(0, 106, 230, 0.3);
    --panel-primary: #006ae6;
    --panel-primary-hover: #107eff;
    --panel-success: #00a261;
    --panel-success-soft: rgba(0, 162, 97, 0.15);
    --panel-danger: #e42855;
    --panel-danger-soft: rgba(228, 40, 85, 0.14);
    --panel-warning: #c59a00;
    --panel-info: #883fff;
    --panel-input-bg: #1e222b;

    --font-xs: 0.8125rem;
    --font-sm: 0.9375rem;
    --font-base: 1rem;
    --font-md: 1.0625rem;
    --font-lg: 1.25rem;
    --font-xl: 1.375rem;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    --sidebar-width-collapsed: 0px;
    --sidebar-width-expanded: 272px;
    --header-height: 56px;
    --border-radius: var(--radius-md);

    /* Margens do conteúdo (laterais compactas) */
    --panel-content-padding-x: 0.5rem;
    --panel-content-padding-y: 0.75rem;
    --panel-content-padding-bottom: 1rem;

    --scrollbar-size: 4px;
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
    --scrollbar-track: transparent;

    /* Aliases legados */
    --futuristic-bg: var(--panel-bg);
    --futuristic-sidebar-bg: var(--panel-surface);
    --futuristic-header-bg: var(--panel-surface);
    --futuristic-card-bg: var(--panel-surface-elevated);
    --futuristic-text: var(--panel-text);
    --futuristic-text-muted: var(--panel-text-muted);
    --futuristic-accent: var(--panel-accent);
    --futuristic-accent-hover: var(--panel-accent-hover);
    --futuristic-border: var(--panel-border);
    --futuristic-active-bg: var(--panel-accent-soft);
    --futuristic-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --panel-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bs-font-sans-serif: var(--futuristic-font);
    --bs-body-font-family: var(--futuristic-font);
    --bs-btn-font-family: var(--futuristic-font);
}

[data-theme="light"] {
    --panel-bg: #fff;
    --panel-surface: #fafafa;
    --panel-surface-elevated: #f9f9f9;
    --panel-surface-hover: #f1f1f4;
    --panel-border: #f1f1f4;
    --panel-border-strong: rgba(15, 23, 42, 0.16);
    --panel-text: #071437;
    --panel-text-secondary: #4b5675;
    --panel-text-muted: #99a1b7;
    --panel-accent: #1b84ff;
    --panel-accent-hover: #3388eb;
    --panel-accent-soft: rgba(27, 132, 255, 0.1);
    --panel-accent-muted: rgba(27, 132, 255, 0.25);
    --panel-primary: #1b84ff;
    --panel-primary-hover: #3388eb;
    --panel-success: #17c653;
    --panel-danger: #f8285a;
    --panel-warning: #c09704;
    --panel-info: #7239ea;

    --futuristic-bg: var(--panel-bg);
    --futuristic-sidebar-bg: var(--panel-surface);
    --futuristic-header-bg: var(--panel-surface);
    --futuristic-text: var(--panel-text);
    --futuristic-text-muted: var(--panel-text-muted);
    --futuristic-accent: var(--panel-accent);
    --futuristic-accent-hover: var(--panel-accent-hover);
    --futuristic-border: var(--panel-border);
    --futuristic-active-bg: var(--panel-accent-soft);

    --scrollbar-thumb: rgba(15, 23, 42, 0.28);
    --scrollbar-thumb-hover: rgba(15, 23, 42, 0.42);
}

/* Barras de rolagem discretas (menu + página) */
html,
body,
.page-content,
#main-content-wrapper,
main.container-fluid,
.navigation-sidebar,
.table-wrap,
.dataTables_wrapper .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/*
 * Modal alto: o Bootstrap rola o overlay (.modal).
 * Mantém o scroll; só esconde a barra (a do site continua visível).
 */
.modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.modal,
.modal-body,
#modal_master-body,
.modal .overflow-auto,
.modal-dialog-scrollable .modal-body,
.modal-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#modal_master-body::-webkit-scrollbar,
.modal .overflow-auto::-webkit-scrollbar,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Evita “pulo” lateral/vertical ao abrir Swal/modal (Bootstrap 5.3 + SweetAlert2) */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll !important;
}

/* Mesma especificidade do CSS injetado pelo SweetAlert2 + !important */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
html.swal2-shown:not(.swal2-toast-shown),
body.swal2-shown,
body.swal2-height-auto,
html.swal2-shown,
html.swal2-height-auto,
body.modal-open {
    padding-right: 0 !important;
    margin-right: 0 !important;
    top: auto !important;
    /* Não travar scroll do body — a barra do html permanece (sem deslocar o layout) */
    overflow: visible !important;
}

html.swal2-shown,
html.swal2-shown:not(.swal2-toast-shown),
html.swal2-height-auto {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

/* Swal força height:auto !important e quebra o body flex do painel */
body.swal2-height-auto {
    height: unset !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* Header fixo / sticky também recebem padding do Bootstrap/Swal — zerar */
body.modal-open .fixed-top,
body.modal-open .sticky-top,
body.modal-open .main-header,
body.modal-open .navbar.fixed-top,
body.swal2-shown .fixed-top,
body.swal2-shown .sticky-top,
body.swal2-shown .main-header,
body.swal2-shown .navbar.fixed-top {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

.swal2-container {
    padding-right: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    flex: none !important;
    align-self: auto !important;
}

/* Toasts de sucesso/aviso: canto superior direito (abaixo do header) — padrão global */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-left,
.swal2-container.swal2-top,
.swal2-container.panel-swal-toast-tr {
    padding-top: calc(var(--header-height, 56px) + 10px) !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    z-index: 20050 !important;
    /* Flex evita toast preso/estirado no grid 3 colunas do Swal2 */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    pointer-events: none;
    background: transparent !important;
}

/* Força canto direito do viewport (não depende do grid 3 colunas do Swal) */
body .swal2-container.swal2-top-end > .swal2-popup,
body .swal2-container.swal2-top-right > .swal2-popup,
body .swal2-container.swal2-top-start > .swal2-popup,
body .swal2-container.swal2-top-left > .swal2-popup,
body .swal2-container.swal2-top > .swal2-popup,
body .swal2-container.panel-swal-toast-tr > .swal2-popup,
body .swal2-container.swal2-top-end > .swal2-toast,
body .swal2-container.swal2-top-right > .swal2-toast,
body .swal2-container.swal2-top-start > .swal2-toast,
body .swal2-container.swal2-top-left > .swal2-toast,
body .swal2-container.swal2-top > .swal2-toast,
body .swal2-container.panel-swal-toast-tr > .swal2-toast,
body .swal2-popup.swal2-toast,
body .swal2-popup.panel-notify-toast,
body .swal2-toast.panel-notify-toast,
body .swal2-popup.swal2-toast.panel-notify-toast {
    position: fixed !important;
    top: calc(var(--header-height, 56px) + 10px) !important;
    right: 1rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    /* SA2 define grid-column:1/4 no toast → barra de tela cheia; neutraliza */
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: end !important;
    align-self: start !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(380px, calc(100vw - 2rem)) !important;
    pointer-events: auto !important;
}

body.modal-open .modal,
.modal-open .modal {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Não animar width do conteúdo (scrollbar muda a largura útil e “desliza” a página) */
.page-content,
main.page-content {
    transition-property: margin-left !important;
}

/*
 * SPA NÃO deve mostrar outline em #panel-main.
 * O focus programático (ou residual) gerava retângulo branco/azul em volta de toda a página.
 */
#panel-main,
#panel-main:focus,
#panel-main:focus-visible,
#panel-main:focus-within,
main.page-content,
main.page-content:focus,
main.page-content:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
#main-content-wrapper::-webkit-scrollbar,
main.container-fluid::-webkit-scrollbar,
.navigation-sidebar::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

.modal-body::-webkit-scrollbar,
#modal_master-body::-webkit-scrollbar,
.modal .overflow-auto::-webkit-scrollbar,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar,
.modal::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.navigation-sidebar::-webkit-scrollbar-button,
.page-content::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.page-content::-webkit-scrollbar-track,
#main-content-wrapper::-webkit-scrollbar-track,
main.container-fluid::-webkit-scrollbar-track,
.navigation-sidebar::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb,
#main-content-wrapper::-webkit-scrollbar-thumb,
main.container-fluid::-webkit-scrollbar-thumb,
.navigation-sidebar::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.page-content::-webkit-scrollbar-thumb:hover,
#main-content-wrapper::-webkit-scrollbar-thumb:hover,
.navigation-sidebar::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Tipografia base */
html {
    font-size: 14px;
}

body {
    font-family: var(--futuristic-font) !important;
    font-size: var(--font-base) !important;
    line-height: 1.5 !important;
    color: var(--panel-text) !important;
    background-color: var(--panel-bg) !important;
    -webkit-font-smoothing: antialiased;
}

.modal,
.modal-title,
.modal-body,
.modal-footer,
.swal2-popup {
    font-family: var(--futuristic-font) !important;
}

code, kbd, samp,
.pre-unique a,
.info-cliente-modal pre a {
    font-family: var(--panel-font-mono) !important;
}

.pre-unique,
.info-cliente-modal pre {
    font-family: var(--futuristic-font) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.dashboard-header-title {
    color: var(--panel-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

h4,
.page-title,
main h4,
#main-content-wrapper h4,
h4.text-muted,
h4.text-uppercase {
    font-size: var(--font-lg) !important;
    font-weight: 600 !important;
    color: var(--panel-text) !important;
    margin-bottom: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.text-muted {
    color: var(--panel-text-muted) !important;
}

small, .small, .form-text {
    font-size: var(--font-sm) !important;
}

/* Cabeçalho */
.main-header {
    background-color: var(--panel-surface) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: var(--header-height) !important;
}

.main-header .navbar-brand .text-logo {
    font-size: var(--font-md) !important;
    font-weight: 600 !important;
    color: var(--panel-text) !important;
    letter-spacing: 0 !important;
}

.main-header .menu-toggle-btn {
    color: var(--panel-text-secondary) !important;
    font-size: 1rem !important;
}

.main-header .menu-toggle-btn:hover,
.main-header .menu-toggle-btn:focus {
    color: var(--panel-text) !important;
    background-color: var(--panel-accent-soft) !important;
}

.main-header .header-profile-user {
    border-color: var(--panel-border-strong) !important;
}

.main-header .dropdown-toggle::after {
    color: var(--panel-text-muted) !important;
}

.main-header .dropdown-menu {
    background-color: var(--panel-surface-elevated) !important;
    border: 1px solid var(--panel-border) !important;
    font-size: var(--font-sm) !important;
}

.main-header .dropdown-item {
    font-size: var(--font-sm) !important;
    color: var(--panel-text) !important;
}

.main-header .dropdown-item:hover {
    background-color: var(--panel-accent-soft) !important;
    color: var(--panel-text) !important;
}

.main-header .badge.bg-success {
    background-color: var(--panel-success-soft) !important;
    color: var(--panel-success) !important;
    border: 1px solid rgba(61, 143, 106, 0.35) !important;
    font-size: var(--font-xs) !important;
    font-weight: 500 !important;
}

/* Sidebar */
.navigation-sidebar {
    background-color: var(--panel-surface) !important;
    border-right: 1px solid var(--panel-border) !important;
}

.sidebar-profile .profile-pic-wrapper img,
.sidebar-profile .profile-pic-wrapper .sidebar-brand-logo {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.sidebar-profile .profile-name {
    font-size: var(--font-md) !important;
    color: var(--panel-text) !important;
}

.sidebar-profile .profile-role {
    color: var(--panel-text-muted) !important;
    font-size: var(--font-xs) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.sidebar-profile .stat-item {
    font-size: var(--font-sm) !important;
}

.nav-item .nav-link {
    font-size: 0.9375rem !important;
    height: 40px !important;
    color: var(--panel-text-muted) !important;
}

.nav-item .nav-link .icon,
.nav-item .nav-link .menu-ico {
    font-size: 1.28rem !important;
}

.nav-item .nav-link:hover {
    color: var(--panel-text) !important;
    background-color: transparent !important;
}

.nav-item.active > .nav-link:hover,
.nav-item.has-submenu.open > .nav-link:hover {
    background-color: var(--panel-surface-hover) !important;
}

.nav-item.active > .nav-link,
.nav-item.has-submenu.open > .nav-link {
    color: #ffffff !important;
    background-color: var(--panel-menu-accent-soft, rgba(59, 130, 246, 0.38)) !important;
    background: var(--panel-menu-accent-soft, rgba(59, 130, 246, 0.38)) !important;
    border-left: none !important;
    padding-left: 12px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: none !important;
}

/* Barra ativa = border-left do preset (não usar ::before) */
.nav-item .nav-link::before,
.nav-item.active > .nav-link::before {
    display: none !important;
    content: none !important;
}

.submenu {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .submenu {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

.submenu .nav-link {
    font-size: 0.90rem !important;
}

.submenu .nav-link:hover,
.submenu .nav-item.active > .nav-link {
    color: var(--panel-text) !important;
    background-color: var(--panel-accent-soft) !important;
}

/* Menu recolhido: ver css/sidebar-collapsed.css */

/* Conteúdo principal */
html, body {
    background-color: var(--panel-bg, var(--futuristic-bg, #0b0c10)) !important;
    margin: 0;
}

main.container-fluid,
.page-content,
#main-content-wrapper {
    background-color: var(--panel-bg, var(--futuristic-bg, #0b0c10)) !important;
    color: var(--panel-text, var(--futuristic-text, #e8eaed)) !important;
}

main.container-fluid {
    min-height: calc(100vh - var(--header-height, 60px));
}

.page-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Conteúdo da página abaixo do header fixo (z-index 1030), mesmo com dropdowns elevados */
#panel-main,
main.page-content {
    position: relative;
    z-index: 1;
}

.page-content .container-fluid,
.page-content #main-content-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Conteúdo abaixo do header fixo — body em coluna para o rodapé ir à margem inferior */
html {
    height: 100%;
}

body {
    padding-top: var(--header-height) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    /* Altura automática: cresce com o conteúdo; mínimo = viewport (sticky footer) */
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.page-content,
main.page-content {
    display: flex !important;
    flex-direction: column !important;
    /* Cresce para ocupar o espaço até o rodapé (irmão no body) */
    flex: 1 0 auto !important;
    padding: var(--panel-content-padding-y) var(--panel-content-padding-x) 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Evita altura forçada nos wrappers (empurra o rodapé para o meio da tela) */
.page-content > main.container-fluid,
.page-content > .container-fluid:not(#global-system-banners) {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    flex: 1 0 auto !important;
    background: transparent !important;
}

#global-system-banners {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--panel-content-padding-x, 0.5rem) !important;
    padding-right: var(--panel-content-padding-x, 0.5rem) !important;
}

#global-system-banners[hidden] {
    display: none !important;
}

.page-content > .dashboard-container {
    min-height: 0 !important;
    flex: 1 0 auto !important;
}

#main-content-wrapper {
    padding: var(--panel-content-padding-y) 0 var(--panel-content-padding-bottom) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Página sem wrapper .page-content (exceção) */
body > main.container-fluid {
    padding: var(--panel-content-padding-y) var(--panel-content-padding-x) var(--panel-content-padding-bottom) !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Evita padding horizontal duplo em wrappers internos */
.page-content .container-fluid,
.page-content .dashboard-container,
.dashboard-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.page-content .dashboard-container {
    padding-top: 0 !important;
    padding-bottom: var(--panel-content-padding-bottom) !important;
}

/* Botões */
.btn,
.btn-action-custom,
.btn-action-square,
.btn-sub-square,
.btn-filter,
.loc-btn-text,
.loc-filter-btn,
.wl-tab-btn,
.dashboard-aba-btn,
.tab-btn,
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-family: var(--futuristic-font) !important;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn {
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.45rem 0.9rem !important;
}

.btn-primary {
    background-color: var(--panel-primary) !important;
    border-color: var(--panel-primary) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--panel-primary-hover) !important;
    border-color: var(--panel-primary-hover) !important;
}

.btn-outline-success,
.btn-outline-primary {
    color: var(--panel-primary) !important;
    border-color: var(--panel-accent-muted) !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background-color: var(--panel-accent-soft) !important;
    color: var(--panel-text) !important;
    border-color: var(--panel-accent) !important;
}

.btn-outline-danger {
    color: var(--panel-danger) !important;
    border-color: rgba(196, 107, 107, 0.45) !important;
}

.btn-outline-danger:hover {
    background-color: var(--panel-danger-soft) !important;
    color: var(--panel-text) !important;
}

.btn-outline-lightning {
    color: var(--panel-text-secondary) !important;
    border: 1px solid var(--panel-border-strong) !important;
    background-color: var(--panel-surface-elevated) !important;
    box-shadow: none !important;
}

.btn-outline-lightning:hover {
    background-color: var(--panel-accent-soft) !important;
    border-color: var(--panel-accent-muted) !important;
    color: var(--panel-text) !important;
}

/* Botões de filtro (Limpar Filtro / ações de filtro) — cinza sólido, sem borda */
.btn-filter,
.btn.btn-filter,
#btn-clear-filters.btn,
.btn-outline-clear.btn-filter,
.btn-clear-filter,
.cav-btn-clear {
    background-color: #2c2e33 !important;
    border: none !important;
    border-width: 0 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.btn-filter:hover,
.btn-filter:focus,
.btn-filter:active,
.btn.btn-filter:hover,
#btn-clear-filters.btn:hover,
.btn-outline-clear.btn-filter:hover,
.btn-clear-filter:hover,
.cav-btn-clear:hover {
    background-color: #383b42 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

[data-theme="light"] .btn-filter,
[data-theme="light"] .btn.btn-filter,
[data-theme="light"] #btn-clear-filters.btn,
[data-theme="light"] .btn-outline-clear.btn-filter,
[data-theme="light"] .btn-clear-filter,
[data-theme="light"] .cav-btn-clear {
    background-color: #e8eaed !important;
    color: #1f2937 !important;
    border: none !important;
}

[data-theme="light"] .btn-filter:hover,
[data-theme="light"] #btn-clear-filters.btn:hover,
[data-theme="light"] .btn-outline-clear.btn-filter:hover,
[data-theme="light"] .btn-clear-filter:hover,
[data-theme="light"] .cav-btn-clear:hover {
    background-color: #dce0e5 !important;
    color: #111827 !important;
}

/* ==========================================================================
   Compatibilidade Universal de Ícones FontAwesome & Suporte a Duotone
   ========================================================================== */
.fa-solid, .fas,
.fa-regular, .far,
.fa-light, .fal,
.fa-duotone, .fad,
.fa-brands, .fab,
i[class*="fa-"] {
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.125em;
}
.fa-solid, .fas {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}
.fa-regular, .far {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}
.fa-light, .fal {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 300 !important;
}
.fa-duotone, .fad {
    font-family: 'Font Awesome 5 Duotone' !important;
    position: relative;
}
.fa-brands, .fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* Aliases de ícones do FA6 para FA5 */
.fa-tower-broadcast:before { content: "\f519" !important; }
.fa-rotate:before, .fa-arrows-rotate:before { content: "\f2f1" !important; }
.fa-trash-can:before { content: "\f2ed" !important; }
.fa-bag-shopping:before { content: "\f290" !important; }
.fa-right-left:before { content: "\f362" !important; }
.fa-pen-to-square:before { content: "\f044" !important; }
.fa-circle-check:before { content: "\f058" !important; }
.fa-user-check:before { content: "\f4fc" !important; }
.fa-shield-slash:before, .fa-shield-halved:before, .fa-shield-alt:before { content: "\f3ed" !important; }

/* ==========================================================================
   Botões de Ação Quadrados Padronizados do Sistema (Desktop & Mobile)
   ========================================================================== */
.btn-action-square {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    border: none !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s ease, filter 0.15s ease !important;
}

.btn-action-square i,
.btn-action-square .fad,
.btn-action-square .fas,
.btn-action-square .far,
.btn-action-square .fal,
.btn-action-square .fab {
    --fa-primary-color: #ffffff;
    --fa-secondary-color: #ffffff;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.60;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.btn-action-square:hover,
.btn-action-square:focus-visible {
    opacity: 0.94;
    color: #ffffff !important;
    transform: none !important;
    filter: brightness(1.08);
}

.btn-action-square:hover i,
.btn-action-square:hover .fad {
    --fa-primary-opacity: 1 !important;
    --fa-secondary-opacity: 0.9 !important;
}

.btn-action-square:active {
    transform: none !important;
    opacity: 0.85;
}

.btn-sub-square {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s ease, filter 0.15s ease !important;
}

.btn-sub-square:hover,
.btn-sub-square:focus-visible {
    opacity: 0.92;
    color: #ffffff !important;
    transform: none !important;
    filter: brightness(1.08);
}

/* Paleta de Cores dos Botões de Ação */
.bg-btn-blue { background-color: #0070f3 !important; }
.bg-btn-yellow { background-color: #eab308 !important; color: #ffffff !important; }
.bg-btn-orange { background-color: #ea580c !important; }
.bg-btn-green { background-color: #10b981 !important; }
.bg-btn-red { background-color: #dc2626 !important; }
.bg-btn-grey { background-color: #4b5563 !important; }
.bg-btn-purple { background-color: #8b5cf6 !important; }
.bg-btn-ciano { background-color: #0891b2 !important; }
.bg-btn-whatsapp { background-color: #25d366 !important; }

/* Adaptação Mobile: Alvos de toque confortáveis */
@media (max-width: 767.98px) {
    .btn-action-square:not(.compact-action-btn) {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.05rem !important;
        border-radius: 8px !important;
    }
    .btn-sub-square:not(.compact-action-btn) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 0.92rem !important;
        border-radius: 7px !important;
    }
}

/* Exceções explícitas para widgets compactos (árvore / rede unificada) */
.vr-acoes .btn-action-square,
.visualizar-rede-unified .btn-action-square {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 0.75rem !important;
    border-radius: 5px !important;
}

/* Paletas Rápidas (Presets) White-Label */
.wl-preset-btn {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #cbd5e1 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    user-select: none !important;
}
.wl-preset-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.wl-preset-btn.is-active-preset {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #0070f3 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 112, 243, 0.4) !important;
    font-weight: 700 !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="carbono"] {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="safira"] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="esmeralda"] {
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="ametista"] {
    border-color: #a855f7 !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="rubi"] {
    border-color: #f43f5e !important;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="amber"] {
    border-color: #f59e0b !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="cyber"] {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="obsidian"] {
    border-color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.35) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="sunset"] {
    border-color: #f97316 !important;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="blurple"] {
    border-color: #6366f1 !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.4) !important;
}
.wl-preset-btn.is-active-preset[data-preset-key="pink"] {
    border-color: #ec4899 !important;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.4) !important;
}
.wl-preset-btn.is-active-preset::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: #ffffff;
    margin-left: auto;
    display: inline-block;
}

/* Tabelas */
.table,
table.dataTable {
    font-size: var(--font-sm) !important;
    color: var(--panel-text) !important;
    background-color: var(--panel-surface-elevated) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

.table thead th,
table.dataTable thead th {
    background-color: var(--panel-surface) !important;
    color: var(--panel-text-secondary) !important;
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 0.65rem 0.85rem !important;
}

.table tbody tr,
table.dataTable tbody tr {
    background-color: var(--panel-surface-elevated) !important;
}

.table tbody tr:nth-child(even),
table.dataTable tbody tr.even,
table.dataTable tbody tr:nth-child(even) {
    background-color: var(--panel-surface) !important;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--panel-surface-hover) !important;
}

.table td,
table.dataTable tbody td {
    border-top: 1px solid var(--panel-border) !important;
    color: var(--panel-text) !important;
    padding: 0.6rem 0.85rem !important;
    vertical-align: middle !important;
}

.table-dark {
    --bs-table-bg: var(--panel-surface-elevated);
    --bs-table-color: var(--panel-text);
}

/* DataTables */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    font-size: var(--font-sm) !important;
    color: var(--panel-text-muted) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper input[type="search"] {
    font-size: var(--font-sm) !important;
    background-color: var(--panel-surface) !important;
    border: 1px solid var(--panel-border-strong) !important;
    color: var(--panel-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.4rem 0.65rem !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--panel-accent) !important;
    box-shadow: 0 0 0 2px var(--panel-accent-soft) !important;
    outline: none !important;
}

/* Paginação: ver css/datatables-pagination.css */

/* Formulários */
.form-control,
.form-select {
    font-size: var(--font-sm) !important;
    background-color: var(--panel-surface) !important;
    border: 1px solid var(--panel-border-strong) !important;
    color: var(--panel-text) !important;
    border-radius: var(--radius-sm) !important;
    caret-color: var(--panel-text) !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.form-select:-webkit-autofill:active {
    -webkit-text-fill-color: var(--panel-text, #e2e8f0) !important;
    caret-color: var(--panel-text, #e2e8f0) !important;
    border: 1px solid var(--panel-border-strong) !important;
    box-shadow: 0 0 0 1000px var(--panel-input-bg, var(--panel-surface, #1e222b)) inset !important;
    transition: background-color 99999s ease-out 0s !important;
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
select.form-control:focus,
select.form-select:focus,
select:focus,
select:focus-visible,
textarea.form-control:focus,
textarea.form-control:focus-visible,
.perfil-form-control:focus,
.perfil-form-control:focus-visible,
.page-content .form-control:focus,
.page-content .form-select:focus,
.page-content select:focus {
    border-color: #0070f3 !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.15) !important;
    outline: none !important;
    outline-offset: 0 !important;
}

/* Correção global para os options dos selects não ficarem com texto branco sobre fundo branco */
select,
.form-select,
select.form-control {
    color-scheme: dark;
}

/* Calendário nativo (date / datetime-local) no tema escuro do painel */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .75;
    cursor: pointer;
}

/* Upload de arquivo — controle custom (botão alinhado à box 38px) */
.panel-file {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}
.panel-file:hover {
    border-color: rgba(96, 165, 250, 0.45);
}
.panel-file:focus-within {
    border-color: rgba(96, 165, 250, 0.55);
}
.panel-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 100%;
    padding: 0 1rem;
    background: #0070f3;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}
.panel-file:hover .panel-file-btn {
    background: #0060d1;
}
.panel-file-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 0.75rem;
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-file-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
}

/* Fallback nativo (páginas sem .panel-file) */
input[type="file"].form-control:not(.panel-file-input),
.form-control[type="file"]:not(.panel-file-input) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    line-height: 36px !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    cursor: pointer;
    color-scheme: dark;
    overflow: hidden;
}
input[type="file"].form-control:not(.panel-file-input)::file-selector-button,
.form-control[type="file"]:not(.panel-file-input)::file-selector-button,
input[type="file"].form-control:not(.panel-file-input)::-webkit-file-upload-button,
.form-control[type="file"]:not(.panel-file-input)::-webkit-file-upload-button {
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: #ffffff !important;
    background: #0070f3 !important;
    border: 0 !important;
    border-radius: 5px 0 0 5px !important;
    height: 36px !important;
    margin: 0 0.75rem 0 0 !important;
    padding: 0 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    vertical-align: top !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
input[type="file"].form-control:not(.panel-file-input):hover::file-selector-button,
.form-control[type="file"]:not(.panel-file-input):hover::file-selector-button,
input[type="file"].form-control:not(.panel-file-input):hover::-webkit-file-upload-button,
.form-control[type="file"]:not(.panel-file-input):hover::-webkit-file-upload-button {
    background: #0060d1 !important;
}

select option,
.form-select option,
select.form-control option {
    background-color: var(--panel-surface-elevated, #15171c) !important;
    color: var(--panel-text, #e2e8f0) !important;
}

select option:hover,
.form-select option:hover,
select option:focus,
.form-select option:focus,
select option:active,
.form-select option:active,
select option:checked,
.form-select option:checked {
    background-color: var(--panel-surface-hover, #22252c) !important;
    color: var(--panel-text, #ffffff) !important;
}

/* =========================================================
   Custom Select global (referência filtros Clientes — img 1)
   ========================================================= */
.panel-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1;
}

.panel-select-wrap:has(> .panel-select-toggle.show),
.panel-select-wrap:has(> .panel-select-menu.show) {
    z-index: 30;
}

.panel-select-wrap .panel-select-toggle {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0.375rem 0.75rem;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 1.4;
    position: relative;
}

.panel-select-wrap .panel-select-toggle:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.panel-select-wrap .panel-select-toggle.show,
.panel-select-wrap .panel-select-toggle:focus {
    border-color: #0070f3 !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.15) !important;
}

.panel-select-wrap .panel-select-toggle.show .dropdown-chevron {
    transform: rotate(180deg);
}

.panel-select-wrap .dropdown-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}

.panel-select-wrap .selected-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #e2e8f0 !important;
}

.panel-select-wrap .panel-select-toggle.is-disabled,
.panel-select-wrap .panel-select-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.modal .panel-select-wrap.panel-select-in-modal .panel-select-menu.dropdown-menu,
.modal .panel-select-wrap.panel-select-in-modal ul.panel-select-menu {
    z-index: 2060 !important;
    position: fixed !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: min(90vw, 420px) !important;
}

/* Menu: mesma largura do campo, logo abaixo com espaço para a setinha */
.panel-select-wrap .panel-select-menu.dropdown-menu,
.panel-select-wrap .dropdown-menu.panel-select-menu,
.panel-select-wrap div.panel-select-menu,
ul.panel-select-menu {
    position: absolute !important;
    inset: auto auto auto 0 !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: var(--panel-surface-elevated, #15171c) !important;
    background-color: var(--panel-surface-elevated, #15171c) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
    padding: 0 !important;
    z-index: 1080 !important;
    overflow: visible !important;
    --bs-dropdown-bg: #15171c !important;
    --bs-dropdown-link-color: #e2e8f0 !important;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06) !important;
    --bs-dropdown-link-active-bg: rgba(0, 112, 243, 0.35) !important;
}

.panel-select-wrap .panel-select-scroll-container {
    max-height: min(280px, 50vh);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 7px;
    padding: 4px 0;
}

/* Contadores de paginação — abrem para cima (não empurram o rodapé) */
.panel-select-wrap.panel-select-dropup .panel-select-menu.dropdown-menu,
.panel-select-wrap.dropup .panel-select-menu.dropdown-menu,
.panel-select-wrap.panel-select-dropup ul.panel-select-menu,
.panel-select-wrap.dropup ul.panel-select-menu {
    inset: auto auto auto 0 !important;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.55) !important;
}

.panel-select-wrap.panel-select-dropup .panel-select-toggle.show .dropdown-chevron,
.panel-select-wrap.dropup .panel-select-toggle.show .dropdown-chevron {
    transform: rotate(180deg);
}

/* Setinha (Pointer Caret) centralizada no topo do menu panel-select */
.panel-select-wrap .panel-select-menu::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--panel-surface-elevated, #15171c);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
    pointer-events: none;
}

[data-theme="light"] .panel-select-wrap .panel-select-menu::before {
    background-color: #ffffff !important;
    border-left-color: rgba(15, 23, 42, 0.14) !important;
    border-top-color: rgba(15, 23, 42, 0.14) !important;
}

.panel-select-wrap.panel-select-dropup .panel-select-menu::before,
.panel-select-wrap.dropup .panel-select-menu::before {
    top: auto;
    bottom: -5px;
    border-left: none;
    border-top: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .panel-select-wrap.panel-select-dropup .panel-select-menu::before,
[data-theme="light"] .panel-select-wrap.dropup .panel-select-menu::before {
    border-right-color: rgba(15, 23, 42, 0.14) !important;
    border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}

.panel-select-wrap .panel-select-toggle::after,
.panel-select-wrap .panel-select-toggle.show::after,
.panel-select-wrap .panel-select-menu::after {
    display: none !important;
    content: none !important;
}

.panel-select-wrap .panel-select-scroll-container {
    max-height: min(280px, 50vh);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 7px;
    padding: 0 !important;
    position: relative;
    z-index: 2;
    background-color: var(--panel-surface-elevated, #15171c);
}

.panel-select-wrap .panel-select-item.dropdown-item,
.panel-select-wrap .dropdown-item.panel-select-item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.88rem !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    white-space: normal;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 2;
}

.panel-select-wrap .panel-select-scroll-container > ul > li:first-child > .dropdown-item,
.panel-select-wrap .panel-select-menu > li:first-child > .dropdown-item {
    border-radius: 7px 7px 0 0 !important;
}

.panel-select-wrap .panel-select-scroll-container > ul > li:last-child > .dropdown-item,
.panel-select-wrap .panel-select-menu > li:last-child > .dropdown-item {
    border-radius: 0 0 7px 7px !important;
}

/* Em formulários, card não corta o dropdown */
.card:has(.panel-select-wrap),
.card-body:has(.panel-select-wrap),
#add_client_form,
#main-content-wrapper:has(#add_client_form) {
    overflow: visible !important;
}

/* Remove cabeçalho azul antigo (se ainda existir no DOM) */
.panel-select-menu-header {
    display: none !important;
}

.panel-select-wrap .panel-select-item.dropdown-item:hover,
.panel-select-wrap .dropdown-item.panel-select-item:hover,
.panel-select-wrap .panel-select-item.dropdown-item:focus,
.panel-select-wrap .dropdown-item.panel-select-item:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
}

/* Selecionado: destaque discreto (não barra azul de “título”) */
.panel-select-wrap .panel-select-item.dropdown-item.active,
.panel-select-wrap .dropdown-item.panel-select-item.active,
.panel-select-wrap .panel-select-item.dropdown-item:active,
.panel-select-wrap .dropdown-item.panel-select-item:active {
    background: rgba(0, 112, 243, 0.28) !important;
    background-color: rgba(0, 112, 243, 0.28) !important;
    color: #fff !important;
    font-weight: 500;
}

.panel-select-wrap .panel-select-item.dropdown-item.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Select nativo invisível (mantido só para submit / scripts da página) */
.panel-select-wrap > select.panel-select-native {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    font-size: 16px !important; /* evita zoom iOS */
}

/* Filtros manuais (listagens) — borda padrão e estilo elegante */
.custom-select-dropdown .dropdown-toggle-custom {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
}

.custom-select-dropdown .dropdown-toggle-custom:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.custom-select-dropdown .dropdown-toggle-custom.show,
.custom-select-dropdown .dropdown-toggle-custom:focus {
    border-color: #0070f3 !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.15) !important;
}

.custom-select-dropdown .dropdown-toggle-custom.show .dropdown-chevron {
    transform: rotate(180deg);
}

.custom-select-dropdown .dropdown-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Mecanismo de Pesquisa exclusivo em todo o sistema — cor padrão de revendas (rgba(255,255,255,0.08)), sem borda e sem borda azul ativa ao focar/clicar */
#filter-search,
.search-input,
.filter-search-input,
#cav-search,
.cav-search-wrap input,
.renov-filter-input,
.visualizar-rede-unified .filter-bar #pesquisa,
#pesquisa,
div.dt-container div.dt-search input,
div.dataTables_filter input,
.dataTables_wrapper .dataTables_filter input {
    border: none !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0.2s ease !important;
}

#filter-search::placeholder,
.search-input::placeholder,
.filter-search-input::placeholder,
#cav-search::placeholder,
.cav-search-wrap input::placeholder,
.renov-filter-input::placeholder,
.visualizar-rede-unified .filter-bar #pesquisa::placeholder,
#pesquisa::placeholder,
div.dt-container div.dt-search input::placeholder,
div.dataTables_filter input::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
}

#filter-search:hover,
.search-input:hover,
.filter-search-input:hover,
#cav-search:hover,
.cav-search-wrap input:hover,
.renov-filter-input:hover,
.visualizar-rede-unified .filter-bar #pesquisa:hover,
#pesquisa:hover,
div.dt-container div.dt-search input:hover,
div.dataTables_filter input:hover,
.dataTables_wrapper .dataTables_filter input:hover,
#filter-search:focus,
.search-input:focus,
.filter-search-input:focus,
#cav-search:focus,
.cav-search-wrap input:focus,
.renov-filter-input:focus,
.visualizar-rede-unified .filter-bar #pesquisa:focus,
#pesquisa:focus,
div.dt-container div.dt-search input:focus,
div.dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border: none !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
    outline: none !important;
}

.custom-select-dropdown .dropdown-menu {
    margin-top: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--panel-surface-elevated, #15171c) !important;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    z-index: 1080;
}

.custom-select-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.85rem;
    border-radius: 0 !important;
    padding: 8px 16px;
    transition: background-color 0.15s, color 0.15s;
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

.custom-select-dropdown .dropdown-menu > li:first-child > .dropdown-item {
    border-radius: 7px 7px 0 0 !important;
}

.custom-select-dropdown .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

.custom-select-dropdown .dropdown-item.active,
.custom-select-dropdown .dropdown-item:active {
    background-color: rgba(0, 112, 243, 0.28) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Setinha (Pointer Caret) centralizada apontando para o campo de origem */
.custom-select-dropdown .dropdown-menu::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #15171c;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
    pointer-events: none;
}

[data-theme="light"] .custom-select-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .custom-select-dropdown .dropdown-menu::before {
    background-color: #ffffff !important;
    border-left-color: rgba(15, 23, 42, 0.14) !important;
    border-top-color: rgba(15, 23, 42, 0.14) !important;
}

.custom-select-dropdown .dropdown-toggle-custom.show::after,
.custom-select-dropdown .dropdown-menu::after {
    display: none !important;
    content: none !important;
}

.form-label,
label {
    font-size: var(--font-sm) !important;
    color: var(--panel-text-secondary) !important;
    font-weight: 500 !important;
}

/* Modais — centralizados na viewport */
.modal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - (var(--bs-modal-margin, 0.5rem) * 2));
    margin-left: auto;
    margin-right: auto;
}

.modal-dialog.modal-dialog-centered {
    min-height: calc(100% - (var(--bs-modal-margin, 0.5rem) * 2));
}

.modal-dialog-scrollable.modal-dialog-centered {
    align-items: center;
}

#modal_master.modal-unified-open .modal-dialog {
    max-width: min(700px, 96vw) !important;
    width: auto;
}

#modal_master.modal-unified-open .modal-header {
    display: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

#modal_master.modal-unified-open .modal-footer {
    display: flex !important;
    border-top: none !important;
    box-shadow: none !important;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.25rem 1.1rem !important;
    gap: 0.5rem;
}

#modal_master.modal-unified-open .modal-footer > .d-flex {
    width: 100%;
}

#modal_master.modal-unified-open .modal-footer .btn,
#modal_master.modal-unified-open .modal-footer a.btn,
#modal_master.modal-unified-open .modal-footer .btn-modal-fechar {
    height: 33px !important;
    min-height: 33px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 0.375rem !important;
}

#modal_master.modal-unified-open .modal-footer .btn i,
#modal_master.modal-unified-open .modal-footer a.btn i,
#modal_master.modal-unified-open .modal-footer .btn svg {
    margin-right: 0.35rem !important;
    font-size: 0.88rem !important;
}

#modal_master.modal-unified-open .modal-footer .btn-modal-fechar {
    color: #fff !important;
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    box-shadow: none !important;
}

#modal_master.modal-unified-open .modal-footer .btn-modal-fechar:hover,
#modal_master.modal-unified-open .modal-footer .btn-modal-fechar:focus {
    color: #fff !important;
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
}

@media (min-width: 992px) {
    #modal_master.modal-unified-open .modal-content {
        overflow: visible !important;
        max-height: none !important;
    }

    #modal_master.modal-unified-open .modal-body {
        overflow: visible !important;
        max-height: none !important;
        padding: 1.25rem !important;
    }
}

.info-cliente-modal .d-flex {
    border-bottom: none !important;
    border: none !important;
}


.modal-content {
    background-color: var(--panel-surface-elevated) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--panel-text) !important;
}

.modal-header {
    background-color: var(--panel-surface) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 0.85rem 1.1rem !important;
}

/* Fecha (X) dos modais Pix sempre à direita */
#modal_pix_payment .modal-header,
#modal_pix_conexao_mensalista .modal-header,
#paymentModal .modal-header,
#modal-pix .modal-body > .d-flex:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem;
}
#modal_pix_payment .modal-header .btn-close,
#modal_pix_conexao_mensalista .modal-header .btn-close,
#paymentModal .modal-header .btn-close,
#modal-pix .btn-close {
    margin-left: auto !important;
    flex-shrink: 0;
}

.modal-header.bg-info,
.modal-header.bg-primary {
    background-color: var(--panel-surface) !important;
    color: var(--panel-text) !important;
}

.modal-title {
    font-size: var(--font-md) !important;
    color: var(--panel-text) !important;
    letter-spacing: 0 !important;
}

.modal-body {
    font-size: var(--font-sm) !important;
    padding: 1rem 1.1rem !important;
}

.modal-footer {
    background-color: var(--panel-surface) !important;
    border-top: 1px solid var(--panel-border) !important;
    padding: 0.75rem 1.1rem !important;
}

/* SweetAlert — modais de confirmação */
.swal2-popup {
    background-color: var(--panel-surface-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--panel-text) !important;
    font-size: var(--font-sm) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.swal2-title {
    font-size: var(--font-md) !important;
    color: var(--panel-text) !important;
}

.swal2-confirm.swal2-styled {
    background-color: var(--panel-primary) !important;
    color: #fff !important;
}

/* Toast de feedback (sucesso/info) — ícone + texto, sem “caixa” azul */
.swal2-popup.panel-notify-toast,
.swal2-toast.panel-notify-toast {
    background: rgba(18, 20, 26, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
    padding: 0.7rem 0.95rem !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(380px, calc(100vw - 2rem)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

[data-theme="light"] .swal2-popup.panel-notify-toast,
[data-theme="light"] .swal2-toast.panel-notify-toast {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

.panel-notify-toast .swal2-icon {
    margin: 0 0.55rem 0 0 !important;
    width: 1.7rem !important;
    height: 1.7rem !important;
    min-width: 1.7rem !important;
    border-width: 0.15em !important;
    flex-shrink: 0 !important;
}

.panel-notify-toast .swal2-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f1f5f9 !important;
    text-align: left !important;
    max-width: 280px;
}

[data-theme="light"] .panel-notify-toast .swal2-title {
    color: #0f172a !important;
}

.panel-notify-toast .swal2-html-container,
.panel-notify-toast .swal2-html-container.swal2-html-container {
    margin: 0.12rem 0 0 !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
    text-align: left !important;
}

[data-theme="light"] .panel-notify-toast .swal2-html-container {
    color: #64748b !important;
}

.panel-notify-toast .swal2-timer-progress-bar {
    background: rgba(0, 112, 243, 0.55) !important;
}

.panel-notify-toast.swal2-icon-success .swal2-timer-progress-bar {
    background: rgba(16, 185, 129, 0.65) !important;
}

/* Cards / Dashboard */
.card,
.futuristic-card {
    background-color: var(--panel-surface-elevated) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

.dashboard-container .futuristic-card,
.dashboard-container .data-table-container,
.dashboard-container .dash6-card,
.dashboard-container .section-header,
.dashboard-container .card {
    box-shadow: none !important;
}

.futuristic-card::before,
.futuristic-card:hover::before {
    display: none !important;
}

.futuristic-card:hover {
    transform: none !important;
    border-color: var(--panel-border-strong) !important;
}

.section-header {
    background: var(--panel-surface) !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--panel-text-secondary) !important;
    box-shadow: none !important;
}

.section-header::before {
    display: none !important;
}

.dashboard-container {
    background: var(--panel-bg) !important;
    padding: 1.25rem !important;
}

.metric-value {
    font-size: var(--font-xl) !important;
    font-weight: 600 !important;
}

.metric-label {
    font-size: var(--font-sm) !important;
    color: var(--panel-text-muted) !important;
}

/* Badges */
.badge {
    font-size: var(--font-xs) !important;
    font-weight: 500 !important;
    padding: 0.35em 0.6em !important;
}

.badge.bg-success {
    background-color: var(--panel-success-soft) !important;
    color: var(--panel-success) !important;
}

/* Links em modais de cliente */
.info-cliente-modal a,
pre a {
    color: var(--panel-info) !important;
}

.info-cliente-modal h5 {
    color: var(--panel-text) !important;
    font-size: var(--font-md) !important;
}

/* Perfil admin no header — sem caixa/grid */
.main-header .btn.header-item.dropdown-toggle,
.main-header #dropdownUser {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
    padding: 0.2rem 0.35rem !important;
    border-radius: var(--radius-md) !important;
}

.main-header #dropdownUser.dropdown-toggle::after {
    display: none !important;
}

.main-header .header-profile-user {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover;
}

/* Theme switcher */
.theme-trigger {
    background: var(--panel-surface-elevated) !important;
    color: var(--panel-text-secondary) !important;
    border: 1px solid var(--panel-border) !important;
}

.theme-trigger .bi {
    font-size: 1rem !important;
    line-height: 1 !important;
}

.theme-menu {
    background: var(--panel-surface-elevated) !important;
    border: 1px solid var(--panel-border) !important;
}

.theme-option.active {
    background: var(--panel-accent-soft) !important;
    color: var(--panel-text) !important;
    font-weight: 500 !important;
}

.theme-option:hover {
    background: var(--panel-surface-hover) !important;
}

/* Rodapé irmão do main no body — sempre na margem inferior da viewport quando o conteúdo é curto */
body > footer.panel-site-footer,
footer.panel-site-footer {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 1rem 1.35rem !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    color: var(--panel-text-muted) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Compat: rodapé antigo ainda dentro do main (SPA cache / páginas antigas) */
.page-content > footer.panel-site-footer,
main.page-content > .panel-site-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .panel-site-footer {
    background: transparent !important;
    background-color: transparent !important;
}

/* Garante margens laterais compactas em qualquer estrutura de página */
.page-content .container-fluid,
.page-content #main-content-wrapper,
.page-content > .container-fluid,
.page-content > main.container-fluid > #main-content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Desktop: modal unificado (detalhes do cliente) largo. Mobile: full width no @media. */
@media (min-width: 992px) {
    .modal-unified-open .modal-dialog,
    #modal_master.modal-unified-open .modal-dialog {
        max-width: 700px !important;
        width: 700px !important;
    }
}

/* Page Loader Ripple Spinner (GoodPlay visual infrastructure) */
.lds-ripple,
.lds-ripple div {
    box-sizing: border-box;
}
.lds-ripple {
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;
}
.lds-ripple div {
    opacity: 1;
    border: 4px solid var(--panel-primary, #006ae6);
    border-radius: 50%;
    animation: 1s cubic-bezier(0, 0.2, 0.8, 1) infinite lds-ripple;
    position: absolute;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        opacity: 0;
        width: 8px;
        height: 8px;
        top: 36px;
        left: 36px;
    }
    4.9% {
        opacity: 0;
        width: 8px;
        height: 8px;
        top: 36px;
        left: 36px;
    }
    5% {
        opacity: 1;
        width: 8px;
        height: 8px;
        top: 36px;
        left: 36px;
    }
    100% {
        opacity: 0;
        width: 80px;
        height: 80px;
        top: 0;
        left: 0;
    }
}

/* Pull-to-refresh nativo: slot no fluxo, conteúdo desce */
#panel-ptr {
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}
#panel-ptr.is-snapping {
    transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#panel-ptr .panel-ptr-inner {
    min-height: 72px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 4px 12px 2px;
}
#panel-ptr .lds-ripple {
    width: 52px;
    height: 52px;
    transform: scale(0.58);
    transform-origin: center center;
}
#panel-ptr .panel-ptr-label {
    margin-top: -6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--panel-text-muted, #94a3b8);
    letter-spacing: 0.01em;
    line-height: 1.2;
}
#panel-ptr.is-ready .panel-ptr-label,
#panel-ptr.is-loading .panel-ptr-label {
    color: var(--panel-text, #e8eaed);
}
@media (max-width: 991.98px) {
    html,
    body,
    .page-content,
    main.page-content {
        overscroll-behavior-y: contain;
    }
}

/* Shimmer Skeletal animations for widgets */
.widget-shimmer {
    background: linear-gradient(90deg, var(--panel-surface-elevated) 25%, var(--panel-surface-hover) 50%, var(--panel-surface-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite linear;
}

@keyframes shimmer-animation {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Custom Responsive Overrides for Clientes & Revendedores list views on Mobile */
@media (max-width: 991.98px) {
    /* Hide table-like headers on mobile */
    #view-list-headers {
        display: none !important;
    }
    
    /* Make each list item act as a clean stacked card */
    .cliente-list-item,
    .revendedor-list-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px 12px !important;
    }
    
    /* Force each column/section inside the list item to take 100% width and stack vertically */
    .cliente-list-item > div,
    .revendedor-list-item > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        align-items: flex-start !important;
        margin: 0 !important;
    }
    
    /* Align the action column elements to the left on mobile */
    .cliente-list-item .text-end,
    .revendedor-list-item .text-end {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    /* Allow horizontal scrolling on the action buttons row to prevent screen overflow */
    .cliente-list-item .d-flex.align-items-center.gap-1,
    .revendedor-list-item .d-flex.align-items-center.gap-1 {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 6px;
        margin-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar for cleaner mobile look */
        scrollbar-width: none; /* Firefox */
    }
    
    .cliente-list-item .d-flex.align-items-center.gap-1::-webkit-scrollbar,
    .revendedor-list-item .d-flex.align-items-center.gap-1::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}

/* Custom Modal Background for Client Details */
.modal-content:has(.info-cliente-modal) {
    background-color: var(--panel-surface, #0d0e12) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#modal_master:has(.info-cliente-modal) .modal-content,
#modal_master.modal-unified-open:has(.info-cliente-modal) .modal-content {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.info-cliente-modal {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#modal_master:has(.info-cliente-modal) .modal-footer,
#modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer {
    justify-content: stretch !important;
    align-items: stretch !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: hidden !important;
}

#modal_master:has(.info-cliente-modal) .info-cliente-footer-actions,
#modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions,
#modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
}

#modal_master:has(.info-cliente-modal) .info-cliente-footer-actions .btn,
#modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions .btn,
#modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions .btn,
#modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions a.btn,
#modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions .btn-modal-fechar {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0.45rem 0.3rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.info-cliente-inner-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #0070f3 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    background-color: #172331 !important;
    box-shadow: none !important;
    margin-bottom: 1rem !important;
    min-height: 0;
    overflow: visible !important;
    flex: none !important;
}

.info-cliente-inner-box pre,
.info-cliente-modal pre.pre-unique {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: 1.5em;
    box-sizing: border-box !important;
}

.info-cliente-quick-copy {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    padding: 0.7rem;
}

[data-theme="light"] .info-cliente-quick-copy {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.12);
}

.info-cliente-quick-copy-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: start;
}

.info-cliente-qr-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    display: block;
    min-width: 0;
    box-sizing: border-box;
}

.info-cliente-qr-label {
    grid-column: 1;
    margin-top: 0;
    font-size: 0.65rem;
    color: var(--panel-text-muted, #8b92a0);
    line-height: 1.2;
    text-align: center;
}

.info-cliente-quick-copy-row > .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: unset !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0.25rem 0.15rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    border-radius: 8px !important;
    white-space: normal !important;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box !important;
}

.info-cliente-quick-copy-row > .btn span {
    display: block;
    max-width: 100%;
    line-height: 1.1;
    word-break: break-word;
}

.info-cliente-quick-copy-row > .btn i {
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.info-cliente-quick-copy-row > .btn-blue-premium {
    background-color: #0070f3 !important;
    border: none !important;
    color: #fff !important;
}

.info-cliente-quick-copy-row > .btn-blue-premium:hover,
.info-cliente-quick-copy-row > .btn-blue-premium:focus {
    background-color: #0060d0 !important;
    color: #fff !important;
}

.info-cliente-modal pre,
.info-cliente-modal pre a {
    color: #0a52c9 !important;
    text-decoration: none !important;
}

.info-cliente-modal pre a:hover {
    text-decoration: none !important;
}

/* Botão Fechar padrão dos modais do painel (rodapé) */
.btn-modal-fechar {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: rgba(232, 234, 237, 0.85) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-modal-fechar:hover,
.btn-modal-fechar:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    box-shadow: none !important;
}

.modal-footer .btn-modal-fechar {
    margin-left: 0.25rem;
}

/* Grids de conteúdo do painel — sem borda externa (padrão unificado) */
.clientes-list-card,
.cav-list-card,
.bl-list-card,
.sessoes-list-card,
.ativ-list-card,
.ct-list-card,
.tp-list-card,
.avisos-list-card,
.ec-list-card,
.loja-list-card,
.dns-list-card,
.form-list-card,
.notif-list-card,
.migration-card,
.cp-card-table,
.perfil-card,
.filter-card,
.transacoes-card,
.es-list-card,
.loc-list-card,
.card-pacotes,
.page-content .content-container {
    background-color: var(--panel-surface-elevated, #15171c) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;
}

[data-theme="light"] .clientes-list-card,
[data-theme="light"] .cav-list-card,
[data-theme="light"] .bl-list-card,
[data-theme="light"] .sessoes-list-card,
[data-theme="light"] .ativ-list-card,
[data-theme="light"] .ct-list-card,
[data-theme="light"] .tp-list-card,
[data-theme="light"] .avisos-list-card,
[data-theme="light"] .ec-list-card,
[data-theme="light"] .loja-list-card,
[data-theme="light"] .dns-list-card,
[data-theme="light"] .form-list-card,
[data-theme="light"] .notif-list-card,
[data-theme="light"] .migration-card,
[data-theme="light"] .cp-card-table,
[data-theme="light"] .perfil-card,
[data-theme="light"] .filter-card,
[data-theme="light"] .transacoes-card,
[data-theme="light"] .es-list-card,
[data-theme="light"] .loc-list-card,
[data-theme="light"] .page-content .content-container {
    background-color: #ffffff !important;
}

/* Formulários add/edit — cantos no padrão do painel (8px) */
.form-list-card.card,
.card.form-list-card,
main .form-list-card.card {
    background-color: var(--panel-surface-elevated, #15171c) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    overflow: visible !important;
}

/* card-body com o mesmo fundo sólido fica quadrado por cima do radius do card */
.form-list-card > .card-body,
.card.form-list-card > .card-body,
main .form-list-card > .card-body {
    background-color: transparent !important;
    border-radius: 8px !important;
}

.form-list-card .form-control,
.form-list-card .form-select,
.form-list-card .panel-select-wrap .panel-select-toggle,
.form-list-card .input-group,
.form-list-card .input-group > .form-control,
.form-list-card .input-group > .form-select,
.form-list-card .input-group > .input-group-text,
.form-list-card .input-group > .btn {
    border-radius: 6px !important;
}

.form-list-card .input-group > :not(:first-child):not(.dropdown-menu) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.form-list-card .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Icon + input: one focus ring around the whole group (no blue cut on the icon) */
.form-list-card .input-group:has(> .input-group-text) {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.03);
}
.form-list-card .input-group:has(> .input-group-text):focus-within {
    border-color: #0070f3 !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.15) !important;
}
.form-list-card .input-group:has(> .input-group-text) > .form-control,
.form-list-card .input-group:has(> .input-group-text) > .form-select,
.form-list-card .input-group:has(> .input-group-text) > .input-group-text,
.form-list-card .input-group:has(> .input-group-text) > .btn {
    border-color: transparent !important;
    box-shadow: none !important;
}
.form-list-card .input-group:has(> .input-group-text) > .form-control:focus,
.form-list-card .input-group:has(> .input-group-text) > .form-select:focus,
.form-list-card .input-group:has(> .input-group-text) > .form-control:focus-visible,
.form-list-card .input-group:has(> .input-group-text) > .form-select:focus-visible {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.form-list-card .input-group:has(> .input-group-text) > .input-group-text {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.form-list-card .mb-4.p-3.rounded,
.form-list-card .mb-4.p-4.rounded,
.form-list-card .mb-4.p-2.rounded {
    border-radius: 8px !important;
}

/* Troca de página SPA — sem fade (navegação instantânea) */
main.page-content.spa-nav-instant,
main.page-content.spa-from-cache,
#main-content-wrapper.page-content.spa-nav-instant,
#main-content-wrapper.page-content.spa-from-cache {
    animation: none !important;
}

/* Congela transitions do shell durante SPA (evita “sanfona” no menu/página) */
html.spa-nav-freeze,
html.spa-nav-freeze body,
html.spa-nav-freeze .navigation-sidebar,
html.spa-nav-freeze .main-header,
html.spa-nav-freeze .page-content,
html.spa-nav-freeze #panel-main,
html.spa-nav-freeze .submenu,
html.spa-nav-freeze .nav-item,
html.spa-nav-freeze .nav-link,
html.spa-nav-freeze .mobile-quick-nav,
html.spa-nav-freeze .quick-nav-indicator,
html.spa-nav-freeze .sidebar-fixed-block,
html.sidebar-boot-pending .navigation-sidebar,
html.sidebar-boot-pending body {
    transition: none !important;
    animation: none !important;
}

main.page-content:not(.spa-from-cache):not(.spa-nav-instant),
#main-content-wrapper.page-content:not(.spa-from-cache):not(.spa-nav-instant) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    main.page-content,
    #main-content-wrapper.page-content {
        animation: none;
    }
}

/*
 * Mobile: modal por cima de TUDO (barra, overlays).
 * Sheet com body rolável + footer sempre visível — sem cortar ações.
 */
@media (max-width: 991.98px) {
    :root {
        --panel-mobile-nav-clearance: calc(72px + env(safe-area-inset-bottom, 0px));
        --mobile-quick-nav-height: var(--panel-mobile-nav-clearance);
        --panel-mobile-modal-z: 12050;
        --panel-mobile-modal-backdrop-z: 12040;
    }

    body:not(.mobile-nav-classic) {
        --panel-mobile-nav-clearance: calc(78px + env(safe-area-inset-bottom, 0px));
        --mobile-quick-nav-height: var(--panel-mobile-nav-clearance);
    }

    .mobile-quick-nav {
        z-index: 11000 !important;
    }

    /* Com modal/alerta aberto: barra some sob o overlay (não compete com o rodapé).
       Ações (command palette) mantém a barra visível para fechar/alternar. */
    body.modal-open .mobile-quick-nav,
    body.swal2-shown:not(.swal2-toast-shown) .mobile-quick-nav {
        z-index: 1040 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-50%) translateY(120%) !important;
    }

    body.modal-open .modal,
    .modal.show {
        z-index: var(--panel-mobile-modal-z) !important;
        padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }

    body.modal-open .modal-backdrop,
    .modal-backdrop.show {
        z-index: var(--panel-mobile-modal-backdrop-z) !important;
        inset: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }

    .swal2-container:not(.swal2-top-end):not(.swal2-top-right):not(.panel-swal-toast-tr) {
        z-index: calc(var(--panel-mobile-modal-z) + 10) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .modal-dialog {
        margin: 0.25rem auto !important;
        max-width: calc(100% - 0.75rem) !important;
        width: calc(100% - 0.75rem) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 0.5rem) !important;
    }

    .modal-dialog-centered {
        min-height: unset !important;
        display: flex !important;
        align-items: flex-start !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    #modal_master .modal-content,
    #modal_master.modal-unified-open .modal-content,
    .modal .modal-content {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 0.5rem) !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    /* Form que envolve body+footer precisa participar do flex (senão o rodapé “some”) */
    #modal_master form#modal_master_form,
    #modal_master.modal-unified-open form#modal_master_form,
    .modal form.modal-content-form,
    .modal .modal-content > form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    #modal_master .modal-header,
    #modal_master.modal-unified-open .modal-header,
    .modal .modal-header {
        flex-shrink: 0 !important;
    }

    #modal_master .modal-body,
    #modal_master.modal-unified-open .modal-body,
    #modal_master #modal_master-body,
    #modal_master.modal-unified-open #modal_master-body,
    #modal_master.is-mobile-sheet .modal-body,
    #modal_master.is-mobile-sheet #modal_master-body,
    .modal .modal-body {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    #modal_master.is-mobile-sheet .modal-dialog {
        align-items: flex-start !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.35rem !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 0.5rem) !important;
    }

    #modal_master.is-mobile-sheet .info-cliente-modal {
        display: block !important;
        min-height: 0;
    }

    #modal_master:has(.info-cliente-modal) .info-cliente-quick-copy-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.3rem;
    }

    #modal_master:has(.info-cliente-modal) .info-cliente-quick-copy-row > .btn {
        min-height: 0 !important;
        font-size: 0.58rem !important;
    }

    #modal_master:has(.info-cliente-modal) .modal-footer,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-footer {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: hidden !important;
    }

    #modal_master:has(.info-cliente-modal) .info-cliente-footer-actions,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .info-cliente-footer-actions,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    #modal_master:has(.info-cliente-modal) .info-cliente-footer-actions .btn,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .info-cliente-footer-actions .btn,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions .btn,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .info-cliente-footer-actions .btn,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-footer > .info-cliente-footer-actions .btn {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0.35rem 0.2rem !important;
        font-size: 0.72rem !important;
    }

    /* Detalhe do cliente: sheet em tela cheia + barra de ações colada na borda inferior */
    body.modal-open .modal:has(.info-cliente-modal),
    .modal.show:has(.info-cliente-modal),
    #modal_master:has(.info-cliente-modal),
    #modal_master.modal-unified-open:has(.info-cliente-modal),
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) {
        padding: 0 !important;
        inset: 0 !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    #modal_master:has(.info-cliente-modal) .modal-dialog,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-dialog,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-dialog,
    #modal_master:has(.info-cliente-modal) .modal-dialog-centered {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        align-items: stretch !important;
        transform: none !important;
    }

    #modal_master:has(.info-cliente-modal) .modal-content,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-content,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-content {
        border-radius: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    #modal_master:has(.info-cliente-modal) .modal-body,
    #modal_master:has(.info-cliente-modal) #modal_master-body,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-body,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) #modal_master-body {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    #modal_master .modal-footer,
    #modal_master.modal-unified-open .modal-footer,
    .modal .modal-footer {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 6 !important;
        margin-top: auto !important;
        background: var(--panel-surface-elevated, #15171c) !important;
        padding-top: 0.75rem !important;
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="light"] #modal_master .modal-footer,
    [data-theme="light"] #modal_master.modal-unified-open .modal-footer,
    [data-theme="light"] .modal .modal-footer {
        background: #ffffff !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08) !important;
    }

    #modal_master:has(.info-cliente-modal) .modal-footer,
    #modal_master.modal-unified-open:has(.info-cliente-modal) .modal-footer,
    #modal_master.is-mobile-sheet:has(.info-cliente-modal) .modal-footer,
    .modal:has(.info-cliente-modal) .modal-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        border-radius: 0 !important;
        z-index: 30 !important;
        transform: none !important;
    }

    body.modal-open #panel-pwa-install {
        display: none !important;
    }
}