/**
 * Main stylesheet for ISP Dashboard
 * System Name: ISP Dashboard
 * Author: Lélio Sato
 * Primary Color: #0067b5
 */

:root {
    --primary-color: #0067b5;
    --primary-dark: #005494;
    --primary-light: #3385c6;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-bg: #f8f9fa;
    --dark-text: #212529;
    --sidebar-width: 225px;
    --sidebar-collapsed-width: 63px;
    --topbar-height: 54px;
    --page-header-height: 120px; /* fallback; JS sets this per-page via measurePageHeader() */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12.6px;
    line-height: 1.5;
    color: var(--dark-text);
    background-color: #f0f2f5;

    /* Flexbox Layout */
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden !important;  /* CRÍTICO: previne scroll no body */
    margin: 0 !important;
    padding: 0 !important;
    overscroll-behavior-y: contain; /* impede pull-to-refresh no Android */
}

html {
    overflow: hidden !important;  /* CRÍTICO: previne scroll no html */
}

@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Topbar - FIXED (solução IA) */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: white;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 200; /* Acima do sticky (150) */
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 13.5px;
}

.topbar-logo {
    height: 36px;
}

.topbar-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 13.5px;
}

.user-menu {
    position: relative;
}

.user-menu-button {
    background: none;
    border: none;
    padding: 7.2px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7.2px;
    border-radius: 5.4px;
    color: #333;
    transition: background-color 0.2s;
}

.user-menu-button:hover {
    background-color: var(--light-bg);
}

.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 7.2px;
    background: white;
    border-radius: 7.2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    display: none;
    z-index: 1001;
}

.user-menu-dropdown.show {
    display: block;
}

.user-menu-dropdown a {
    display: block;
    padding: 10.8px 20px;
    color: var(--dark-text);
    text-decoration: none;
    transition: background-color 0.2s;
}

.user-menu-dropdown a:hover {
    background-color: var(--light-bg);
}

.user-menu-dropdown a:first-child {
    border-radius: 7.2px 8px 0 0;
}

.user-menu-dropdown a:last-child {
    border-radius: 0 0 8px 8px;
    color: var(--danger-color);
}

/* Sidebar - Flexbox Layout (NÃO fixed!) */
.sidebar {
    width: var(--sidebar-width);
    background: #2c3e50;
    color: white;
    transition: width 0.3s;
    /* height e overflow definidos no layout Flexbox (linha ~991) */
}

.mobile-hamburger {
    position: absolute;
    top: 9px;
    left: 9px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 3.6px;
    padding: 9px 15px;
    cursor: pointer;
    z-index: 1001;
    display: none !important;  /* F08-0005-2: Sempre escondido */
}

.sidebar-toggle {
    position: absolute;
    top: 9px;
    right: -15px;
    width: 27px;
    height: 27px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sidebar-menu {
    list-style: none;
    padding: 18px 0;
}

.sidebar-menu-item {
    position: relative;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 10.8px;
    padding: 10.8px 20px;
    color: #ecf0f1;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.sidebar-menu-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.sidebar-menu-link.active {
    background-color: var(--primary-color);
    color: white;
}

.sidebar-menu-icon {
    width: 18px;
    text-align: center;
    font-size: 16.2px;
}

.sidebar-menu-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-menu-text {
    display: none;
}

/* .sidebar-submenu e .sidebar-submenu.show são governados pelo sidebar.css
   (esquema max-height + overflow:hidden; altura via sidebar.js). O esquema antigo
   display:none/block daqui foi removido — ele controlava `display` (que o sidebar.css
   não define) e impedia a animação de fechar. Esconder de propósito (mobile fechado,
   desktop colapsado) continua no sidebar.css. */

.sidebar-submenu-link {
    display: block;
    padding: 9px 20px 10px 52px;
    color: #bdc3c7;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-submenu-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.sidebar-submenu-link.active {
    background-color: var(--primary-dark);
    color: white;
}

/* Page Container: ancorado ao viewport abaixo da topbar */
.page-container {
    position: fixed !important;
    top: var(--topbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    margin-top: 0 !important;
    height: auto !important;
}

/* REMOVIDO: Duplicata - definição correta está na linha ~991 */

.page-header {
    margin: 0 !important;  /* Zera margin (definição consolidada linha ~991) */
    margin-bottom: 27px;  /* Apenas bottom quando NÃO sticky */
    padding-top: 0 !important;  /* CRÍTICO: Remove padding-top que causa gap */
}

.page-title {
    font-size: 25.2px;
    font-weight: 600;
    color: var(--dark-text);
    margin-top: 0 !important;  /* Remove margin-top padrão de h1 */
    margin-bottom: 7.2px;
    padding-top: 0 !important;  /* CRÍTICO: Remove padding-top */
}

.page-subtitle {
    color: var(--secondary-color);
    font-size: 12.6px;
}

/* Cards */
.card {
    background: white;
    border-radius: 10.8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 21.6px;
    margin-bottom: 21.6px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 13.5px;
    border-bottom: 1px solid #e9ecef;
}

.card-title {
    font-size: 16.2px;
    font-weight: 600;
    color: var(--dark-text);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 9px 20px;
    font-size: 12.6px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5.4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-sm {
    padding: 5.4px 12px;
    font-size: 12px;
}

/* Forms */
.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    margin-bottom: 5.4px;
    font-weight: 500;
    color: var(--dark-text);
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 12.6px;
    border: 1px solid #ced4da;
    border-radius: 5.4px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 103, 181, 0.1);
}

.form-select {
    width: 100%;
    padding: 9px 12px;
    font-size: 12.6px;
    border: 1px solid #ced4da;
    border-radius: 5.4px;
}

/* Selects de ano/período no cabeçalho — auto-width com espaço suficiente para a seta */
.page-header select.form-select {
    width: auto;
    min-width: 80px;
    padding-right: 2.2rem;
}

.form-check-input {
    margin-right: 7.2px;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    padding: 10.8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Fundo padrão apenas em thead/tfoot sem variante Bootstrap de cor */
.table thead:not(.table-dark):not(.table-light):not(.table-secondary):not(.table-primary):not(.table-danger):not(.table-warning):not(.table-info):not(.table-success) th,
.table tfoot:not(.table-dark):not(.table-light):not(.table-secondary):not(.table-primary):not(.table-danger):not(.table-warning):not(.table-info):not(.table-success) td {
    background-color: var(--light-bg);
}

.table td {
    padding: 10.8px;
    border-bottom: 1px solid #dee2e6;
}

/* Hover apenas em linhas de dados — exclui cabeçalhos de seção */
.table tbody tr:not(.table-dark):not(.section-row):hover,
.table tbody tr:not(.table-dark):not(.section-row):hover td,
.table tbody tr:not(.table-dark):not(.section-row):hover th {
    background-color: rgba(13, 110, 253, 0.10);
}
/* Dark mode: especificidade (0,5,4) > variantes (0,3,x) — ganha independente de posição */
body.dark-mode .table tbody tr:not(.table-dark):not(.section-row):hover td,
body.dark-mode .table tbody tr:not(.table-dark):not(.section-row):hover th {
    background-color: var(--dm-elevated, #404040) !important;
}

/* Alerts */
.alert {
    padding: 13.5px 20px;
    border-radius: 7.2px;
    margin-bottom: 18px;
}
/* Cores das .alert-* (fundo/texto/borda, claro + escuro) são geradas pelo
   submenu CSS → seção "Mensagens Persistentes" (SystemCSS.generate_css). */

/* Login Page */
.login-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
    background: white;
    border-radius: 14.4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    padding: 45px;
    width: 100%;
    max-width: 405px;
}

.login-logo {
    width: 162px;
    margin-bottom: 27px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-title {
    text-align: center;
    font-size: 21.6px;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 27px;
}

.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 12.6px;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.9rem;
}

.mb-3 {
    margin-bottom: 0.9rem;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.gap-2 {
    gap: 0.5rem;
}

/* F09-0014-1: Responsive baseado em django-user-agents (device-mobile/device-desktop) */
body.device-mobile .topbar-title {
    font-size: 14.4px;
}

/* Messages */
.messages {
    position: fixed;
    top: 63px;
    right: 18px;
    z-index: 9999;
    max-width: 360px;
}

.message {
    padding: 13.5px 20px;
    border-radius: 7.2px;
    margin-bottom: 9px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Sticky Page Header - COMMENTED */
/* .page-header-sticky {
    position: sticky;
    top: var(--topbar-height);
    background: white;
    z-index: 100;
    margin: 0;
    padding: 18px 20px 0 20px;
} */

/* .page-header-sticky .page-header {
    margin-bottom: 0;
    padding-bottom: 13.5px;
} */

/* .page-header-sticky .filter-bar {
    margin: 0;
} */

/* Adjust main content to accommodate sticky header - COMMENTED */
/* .main-content {
    position: relative;
} */


/* Highlight active submenu item */
.sidebar-submenu-link.active {
    background: rgba(0, 103, 181, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    border-left: 2.7px solid var(--primary-color);
    padding-left: 33.3px; /* Compensate for border */
}

.sidebar-submenu-link {
    padding-left: 36px;
    transition: all 0.2s ease;
}


/* Highlight active main menu item */
.sidebar-menu-link.active {
    background: rgba(0, 103, 181, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    border-left: 2.7px solid var(--primary-color);
    padding-left: 15.3px; /* Compensate for border */
}

.sidebar-menu-link {
    padding-left: 18px;
    transition: all 0.2s ease;
}

/* F08-0003-1.3: Sidebar Toggle Header REMOVIDO - estava causando elemento à esquerda */
/* Esta definição foi substituída pela versão sticky que fica DENTRO da sidebar (linha ~665) */

.toggle-icon {
    display: inline-block;
    line-height: 1;
}

/* Header fixo dentro da sidebar, com botão hamburger e "Main Menu" */
.sidebar-toggle-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #2c3e50;
    padding: 13.5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* hamburger + texto lado a lado */
    gap: 9px;                     /* espaço entre icone e label */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* MUITO IMPORTANTE:
   Mesmo quando a sidebar está .collapsed, o header CONTINUA visível.
   (caso exista alguma regra antiga escondendo ele)
*/
.sidebar.collapsed .sidebar-toggle-header {
    display: flex !important;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 21.6px;
    cursor: pointer;
    padding: 7.2px 12px;
    border-radius: 3.6px;
    line-height: 1;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-title {
    font-weight: bold;
    font-size: 14.4px;
    color: white;
    line-height: 1.2;
    flex: 1;
}

.toggle-icon {
    display: inline-block;
    line-height: 1;
}

/* CORREÇÃO: Remover espaço entre topbar e conteúdo - COMMENTED */
/* .main-content {
    padding-top: 54px;
    margin-top: 0;
} */

/* CORREÇÃO: Sidebar não precisa de margin-top extra */
.sidebar {
    margin-top: 0;
}

/* CORREÇÃO: Page headers sticky - COMMENTED */
/* .page-header-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
} */

/* REMOVIDO: Duplicata conflitante */

/* Remover qualquer padding/margin extra do body/html */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;  /* Previne scroll no viewport */
}

/* REMOVIDO: Duplicata - definição principal está na linha ~993 */

/* CRITICAL FIX: Main content must be below topbar, not behind it */
/* .main-content {
    padding-top: var(--topbar-height) !important;
    padding-left: 27px;
    padding-right: 27px;
    padding-bottom: 27px;
    margin-top: 0 !important;
} */

/* CRITICAL FIX: Ensure page-header-sticky - COMMENTED */
/* .page-header-sticky {
    position: sticky;
    top: var(--topbar-height);
    z-index: 100;
    background: white;
    margin: 0 !important;
    padding: 0 !important;
} */

/* REMOVIDO: Regras movidas para seção consolidada linha ~1005 */

/* Regular page headers (NÃO dentro de sticky) */
.page-header {
    margin: 0 0 30px 0;
    padding: 0;
}

/* REMOVIDO: Duplicata - definição principal está na linha ~993 */

/* REMOVIDO: Regras antigas de #mainContent - solução IA usa .main-content */

/* FINAL FIX: Prevent content from going behind sticky header */
/* .page-header-sticky {
    position: sticky;
    top: 0 !important;
    z-index: 100;
    background: white;
    padding: 18px;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
} */

/* Card that comes after sticky header should not overlap */
.card {
    position: relative;
    z-index: 1;
}

/* Ensure content inside cards starts with proper spacing */
.page-header-sticky + .card .table {
    margin-top: 0;
}

/* Prices table styling - smaller font */
#pricesTable {
    font-size: 11.7px;
}

#pricesTable thead th {
    font-size: 12px;
    font-weight: 600;
    padding: 7.2px 5px;
}

#pricesTable tbody td {
    padding: 5.4px 5px;
    vertical-align: middle;
}

#pricesTable tbody td:first-child {
    font-size: 11.7px;
}

/* Month columns - even smaller */
#pricesTable tbody td:nth-child(n+3):nth-child(-n+14) {
    font-size: 12px;
}

/* =======================================================================
   F08-0003: PAGE HEADER & STICKY - CONSOLIDATED & FIXED
   ======================================== */

/* REMOVIDO: Definições antigas conflitantes - solução IA na linha ~1005 */

/* REMOVIDO: Regras antigas conflitantes - solução IA consolidada linha ~1005 */

/* Garantir que cards tenham z-index menor */
.card {
    position: relative;
    z-index: 1;
}

/* ========================================
   SOLUÇÃO DEFINITIVA - PRICES TABLE
   ======================================== */

/* Reduzir largura das colunas */
#pricesTable {
    font-size: 11.7px;
    min-width: 1080px !important; /* Reduzido de 1400px */
}

#pricesTable thead th {
    font-size: 12px !important;   /* Ainda menor */
    font-weight: 600;
    padding: 5.4px 3px !important;  /* Padding muito reduzido */
    text-align: center;
}

#pricesTable tbody td {
    padding: 4.5px 3px !important;  /* Padding muito reduzido */
    vertical-align: middle;
    font-size: 12px;
}

/* Coluna Product - reduzida */
#pricesTable thead th:first-child,
#pricesTable tbody td:first-child {
    width: 144px !important;      /* Reduzido de 200px */
    text-align: left !important;
}

/* Coluna Year - reduzida */
#pricesTable thead th:nth-child(2),
#pricesTable tbody td:nth-child(2) {
    width: 54px !important;       /* Reduzido de 80px */
    text-align: center !important;
}

/* Colunas de meses - reduzidas */
#pricesTable thead th:nth-child(n+3):nth-child(-n+14),
#pricesTable tbody td:nth-child(n+3):nth-child(-n+14) {
    width: 58.5px !important;       /* Reduzido de 80px */
    text-align: right !important;
    font-size: 12px !important;
}

/* Coluna Actions - reduzida */
#pricesTable thead th:last-child,
#pricesTable tbody td:last-child {
    width: 117px !important;      /* Reduzido de 150px */
    text-align: center !important;
}

/* Botões menores */
#pricesTable .btn-sm {
    padding: 2.7px 8px !important;
    font-size: 12px !important;
}


/* ========================================================================

/* CORREÇÃO SIMPLES E DIRETA - Conteúdo abaixo do topbar */

/* ============================================================================
   LAYOUT FLEXBOX MODERNO (Topbar + Sidebar + Main Scrollável)
   ============================================================================ */

/* REMOVIDO: Definição duplicada conflitante de .page-container - definição correta na linha ~264 */

/* Sidebar: Fixo na lateral (solução IA) */
.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);  /* Não cresce nem encolhe */
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;  /* 100% do page-container (que tem a altura correta) */
    min-width: 0;
}

/* Main Content: container flex — NÃO scrola (content-area é o scroll frame) */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #f8f9fa;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Page header — frame fixo, não participa do scroll */
.page-header-sticky {
    flex-shrink: 0;
    background: white;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 150;
}

/* Regras internas do page-header-sticky */
.page-header-sticky .page-header {
    margin: 0;
    padding: 18px 30px;
    background: white;
}

.page-header-sticky .filter-bar {
    margin: 0;
    padding: 13.5px 30px;
    background: white;
    border-top: 1px solid #dee2e6;
}

.page-header-sticky + .card {
    margin-top: 0;
    border-top: none;
}

/* Content area — frame de scroll de página (abaixo do page-header-sticky) */
.content-area {
    flex: 1 1 0%;   /* basis 0% garante altura limitada ao espaço disponível */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 27px;
    background: #f8f9fa;
}

/* Sidebar collapsed state */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Card dentro de content-area sem margin extra */
.content-area > .card {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Backwards compatibility */
.page-header-sticky + .card {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Tabelas responsivas — scroll horizontal sempre; vertical limitado pela tabela */
.table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* JS mede o page-header-sticky real e seta --page-header-height;
       120px = card padding (43px) + card margin-bottom (22px) + content-area padding (54px) + border+buffer (1px) */
    max-height: calc(100dvh - var(--topbar-height) - var(--page-header-height) - 125px);
}

/* Cabeçalho de tabela sticky — dentro do table-responsive (scroll container próximo) */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
/* thead sem variante de cor recebe fundo branco para cobrir linhas ao scrollar */
.table-responsive thead:not(.table-dark):not(.table-light):not(.table-secondary):not(.table-primary):not(.table-danger):not(.table-warning):not(.table-info):not(.table-success) th {
    background-color: white;
}

table {
    min-width: 100%;
    white-space: nowrap;
}

/* Filter bar sticky — dentro de content-area (novo scroll container) */
.filter-bar-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
    background: white !important;
    padding: 9px 0;
    margin: -27px -27px 20px -27px;  /* compensa padding do content-area */
}

/* Page header interno - DENTRO do page-header-sticky */
.page-header {
    margin: 0 !important;  /* Remove margin que causa gap */
    padding: 18px 30px !important;  /* Padding apenas no header */
}

/* Filter bar - DENTRO do page-header-sticky */
.page-header-sticky .filter-bar {
    padding: 13.5px 30px !important;  /* Padding consistente */
    background: white;
    border-top: 1px solid #dee2e6;
}

/* About Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 27px 40px;
    border-radius: 7.2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 360px;
    width: 90%;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content h2 {
    font-size: 21.6px;
    font-weight: 600;
    margin-bottom: 13.5px;
}

.modal-content p {
    font-size: 14.4px;
    line-height: 1.6;
    margin-bottom: 22.5px;
}

.modal-content .btn {
    min-width: 90px;
    padding: 9px 20px;
    font-size: 14.4px;
    cursor: pointer;
}

/* ==================== SELECT2 CUSTOM STYLES ==================== */

/* Select2 Container */
.select2-container--classic .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 3.6px;
    min-height: 34.2px;
    padding: 2px 5px;
}

.select2-container--classic.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 103, 181, 0.25);
}

/* Pillbox/Tags Styling */
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-dark);
    border-radius: 18px;
    padding: 2.7px 10px;
    margin: 2.7px 5px 3px 0;
    color: white;
    font-size: 11.7px;
    display: inline-flex;
    align-items: center;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 4.5px;
    font-weight: bold;
    cursor: pointer;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffdddd;
}

/* Dropdown */
.select2-container--classic .select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 3.6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.select2-container--classic .select2-results__option--highlighted {
    background-color: var(--primary-light);
    color: white;
}

.select2-container--classic .select2-results__option[aria-selected=true] {
    background-color: #e9ecef;
}

/* Search Input */
.select2-container--classic .select2-search--inline .select2-search__field {
    margin: 2.7px 0;
    padding: 4.5px;
    font-size: 12.6px;
}

/* Placeholder */
.select2-container--classic .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d;
    font-size: 12.6px;
}

/* Width adjustment */
.select2-container {
    width: 100% !important;
}

/* ==================== CUSTOMER DETAILS MODAL ==================== */

/* Modal Overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    border-radius: 7.2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.customer-detail-modal {
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 2px solid var(--primary-color);
    background-color: #f8f9fa;
}

.modal-header h2 {
    margin: 0;
    font-size: 21.6px;
    color: var(--primary-color);
}

.close-btn {
    font-size: 25.2px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover {
    color: #333;
}

.modal-body {
    padding: 18px;
}

.detail-section {
    margin-bottom: 22.5px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e0e0e0;
}

.detail-section:last-child {
    border-bottom: none;
}

.detail-section h3 {
    font-size: 16.2px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 13.5px;
    padding-bottom: 7.2px;
    border-bottom: 2px solid var(--primary-light);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 13.5px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-item strong {
    font-size: 11.7px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span {
    font-size: 13.5px;
    color: #333;
    font-weight: 500;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7.2px;
    margin-top: 4.5px;
}

.tag {
    background-color: var(--primary-color);
    color: white;
    padding: 3.6px 12px;
    border-radius: 13.5px;
    font-size: 11.7px;
    font-weight: 500;
}

.modal-footer {
    padding: 13.5px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    background-color: #f8f9fa;
}

.modal-footer .btn {
    min-width: 90px;
}

/* Modal estreito (avisos / confirmações) */
.modal-content.modal-sm {
    max-width: 480px;
    width: 90%;
}

/* Campos de coordenadas (Cidades/Aeroportos) — somente leitura protegida */
.coord-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.coord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13.5px;
}

@media (max-width: 600px) {
    .coord-grid {
        grid-template-columns: 1fr;
    }
}

/* Modais genéricos (.modal/.modal-content) — modo escuro. Cobre o modal de
   aviso de coordenadas (Cidades/Aeroportos) e o de detalhes do cliente; segue
   o CSS global (--dm-*) em vez do branco fixo. */
body.dark-mode .modal-content { background-color: var(--dm-surface, #2d2d2d); color: var(--dm-text, #e0e0e0); }
body.dark-mode .modal-header { background-color: var(--dm-elevated, #404040); }
body.dark-mode .modal-footer { background-color: var(--dm-elevated, #404040); border-top-color: var(--dm-border, #505050); }
body.dark-mode .modal-body { color: var(--dm-text, #e0e0e0); }
body.dark-mode .close-btn { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .close-btn:hover { color: var(--dm-text, #e0e0e0); }
body.dark-mode .detail-section { border-bottom-color: var(--dm-border, #505050); }
body.dark-mode .detail-item strong { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .detail-item span { color: var(--dm-text, #e0e0e0); }

/* ================================================================ */
/* MOBILE RESPONSIVE - SUPORTE COMPLETO PARA CELULARES E TABLETS */
/* ================================================================ */

/* Mobile Hamburger Button - Escondido em desktop */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: 9px;
    right: 9px;
    z-index: 1110; /* Acima do topbar */
    background: var(--primary-color);
    border: none;
    border-radius: 10.8px;
    width: 54px; /* Maior para touch */
    height: 54px; /* Maior para touch */
    color: white;
    font-size: 28.8px; /* Ícone maior */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300; /* Ícone mais fino */
}

.mobile-hamburger:hover {
    background: #34495e;
    transform: scale(1.05);
}

.mobile-hamburger:active {
    transform: scale(0.95);
}

/* F09-0014-1: Mobile - Ajustar posição com safe area iOS */
body.device-mobile .mobile-hamburger {
    top: calc(6.3px + env(safe-area-inset-top, 0));
}

/* F09-0014-1: Tablets e Mobile - Ajustes gerais */
body.device-mobile .page-title {
    font-size: 1.3rem;
}

body.device-mobile .page-subtitle {
    font-size: 0.8rem;
}

/* Forms — reduz gap vertical do Bootstrap g-3 (1rem → 0.5rem) no mobile */
body.device-mobile .row.g-3 {
    --bs-gutter-y: 0.5rem;
    --bs-gutter-x: 0.5rem;
}

/* F09-0014-1: Mobile - SMARTPHONES (baseado em django-user-agents) */
/* Layout principal */
body.device-mobile {
    font-size: 12.6px;
    overflow-x: hidden !important;
}

/* FORÇA LAYOUT MOBILE */
body.device-mobile {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}
    
    /* Topbar FIXO no topo - CRÍTICO PARA MOBILE */
    body.device-mobile .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 54px;
        padding: 0 10px; /* hamburger agora é interno à sidebar */
        z-index: 1100 !important; /* Acima de tudo */
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        /* iOS Safe Area */
        padding-top: env(safe-area-inset-top, 0);
        height: calc(54px + env(safe-area-inset-top, 0));
    }
    
    body.device-mobile .topbar-title {
        font-size: 13.5px;
    }
    
    body.device-mobile .topbar-logo {
        height: 28.8px; /* Logo menor em mobile */
    }
    
    body.device-mobile .topbar-right {
        gap: 7.2px;
    }
    
    body.device-mobile .user-menu-button {
        font-size: 12px;
        padding: 5.4px 10px;
    }
    
    /* Overlay quando sidebar aberta */
    body.device-mobile .sidebar-overlay {
        display: none;
        position: fixed;
        top: calc(54px + env(safe-area-inset-top, 0));
        left: 0;
        width: 100%;
        height: calc(100dvh - 54px - env(safe-area-inset-top, 0));
        background: transparent; /* sem escurecer o conteúdo; só captura clique p/ fechar */
        z-index: 1039;
        pointer-events: none; /* F09-0014: não bloqueia cliques quando fechado */
    }
    
    body.device-mobile .sidebar-overlay.show {
        display: block;
        pointer-events: auto; /* F09-0014: só captura cliques quando aberto */
    }
    
    /* 🔴 NÃO exibimos nenhum .mobile-hamburger externo */
    body.device-mobile .mobile-hamburger {
        display: none !important;
    }
    
    /* 🔴 Mantemos o header interno da sidebar VISÍVEL em mobile */
    body.device-mobile .sidebar-toggle-header {
        display: flex !important;
    }
    
    /* Page Header */
    body.device-mobile .page-header {
        padding: 13.5px 10px;
    }
    
    body.device-mobile .page-title {
        font-size: 1.1rem;
    }
    
    body.device-mobile .page-subtitle {
        font-size: 0.7rem;
    }
    
    /* Filter bar */
    body.device-mobile .filter-bar {
        padding: 9px;
    }
    
    body.device-mobile .filter-bar .row {
        margin: 0 !important;
    }
    
    /* REMOVIDO: col-md-X stacka naturalmente abaixo de 768px (Bootstrap) */

    /* Content area */
    body.device-mobile .content-area {
        padding: 13.5px 10px;
    }
    
    /* Cards */
    body.device-mobile .card {
        margin-bottom: 13.5px;
    }
    
    body.device-mobile .card-body {
        padding: 13.5px;
    }
    
    /* KPI Cards */
    body.device-mobile .kpi-value {
        font-size: 1.3rem !important;
    }
    
    body.device-mobile .kpi-label {
        font-size: 0.7rem !important;
    }
    
    /* Tabelas */
    body.device-mobile .table {
        font-size: 12px;
    }
    
    body.device-mobile .table thead th {
        padding: 7.2px 4px;
        font-size: 12px;
    }
    
    body.device-mobile .table tbody td {
        padding: 7.2px 4px;
        font-size: 12px;
    }

    /* Tabelas no mobile: rolagem horizontal nativa do .table-responsive (Bootstrap).
       Thead sticky funciona dentro de .table-responsive com max-height. */
    body.device-mobile .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    body.device-mobile .table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
    }

    /* Botões — min-height 44px para touch target (Apple HIG / Material Design) */
    body.device-mobile .btn {
        font-size: 14px;
        padding: 10px 16px;
        min-height: 44px;
    }

    body.device-mobile .btn-sm {
        font-size: 13px;
        padding: 8px 12px;
        min-height: 44px;
    }

    /* Forms — font-size 16px obrigatório no iOS pra evitar auto-zoom */
    body.device-mobile .form-label {
        font-size: 13px;
        margin-bottom: 4.5px;
    }

    body.device-mobile .form-control,
    body.device-mobile .form-select {
        font-size: 16px;
        padding: 10px 12px;
        min-height: 44px;
    }

    body.device-mobile .form-control-sm,
    body.device-mobile .form-select-sm {
        font-size: 16px; /* mantém 16px no mobile pra não dar auto-zoom no iOS */
        padding: 8px 10px;
        min-height: 44px;
    }
    
    /* Modals */
    body.device-mobile .modal-content {
        margin: 9px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    body.device-mobile .modal-header h2 {
        font-size: 16.2px;
    }
    
    body.device-mobile .modal-body {
        padding: 13.5px;
    }
    
    /* Messages */
    body.device-mobile .messages {
        top: 58.5px;
        right: 9px;
        left: 9px;
        max-width: 100%;
    }
    
    body.device-mobile .message {
        font-size: 11.7px;
        padding: 9px 15px;
    }
    
    /* Dashboard Kanban - Gridstack Mobile */
    body.device-mobile .grid-stack {
        margin: 0 !important;
    }
    
    body.device-mobile .grid-stack-item {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        margin-bottom: 13.5px !important;
    }
    
    body.device-mobile .grid-stack-item-content {
        position: relative !important;
    }
    
    body.device-mobile .kanban-card-header {
        padding: 9px 15px;
        font-size: 12.6px;
    }
    
    body.device-mobile .kanban-card-body {
        padding: 9px;
    }
    
    /* Plotly charts mobile */
    body.device-mobile #plotly-chart {
        height: 270px !important;
    }
    
    /* Hide grip icons em mobile */
    body.device-mobile .grip-icon {
        display: none;
    }
    
    /* Action buttons */
    body.device-mobile .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 4.5px;
    }
    
    body.device-mobile .action-buttons .btn {
        width: 100%;
    }

/* Mobile pequeno (até 480px) - SMARTPHONES PEQUENOS */


/* Landscape mobile */


/* ================================================================ */
/* iOS SPECIFIC FIXES - iPhone Safe Area & Chrome */
/* ================================================================ */

/* Garantir que elementos respeitem safe area no iOS */
@supports (padding-top: env(safe-area-inset-top)) {
    
}

/* Chrome iOS específico - Webkit fix */
@supports (-webkit-touch-callout: none) {
    
}

/* ============================================
   MOBILE TOP GAP NUKE v2
   Remove QUALQUER gap entre topbar e content no mobile
   ============================================ */


/* ============================================
   MOBILE TOP GAP FINAL FIX
   Mata margin/padding responsivo tipo mt-4, pt-4 no page-header
   ============================================ */


/* ============================================
   MOBILE HEADER TIGHT: Remove o "colchão" branco antes do título
   SOLUÇÃO DEFINITIVA para gap mobile
   ============================================ */


/* ============================================
   MOBILE GAP KILLER: Remove spacer fantasma (::before)
   CAUSA RAIZ: pseudo-elemento ::before criando barra vazia
   ============================================ */


/* ============================================
   MOBILE HEADER HEIGHT FIX: Remove o "gap visual"
   CAUSA RAIZ: min-height + align-items:center fazem título ficar pendurado no meio
   ============================================ */


/* ============================================
   F09-0012-2: DARK MODE STYLES
   ============================================ */
body.dark-mode {
    background-color: var(--dm-bg, #1a1a1a);
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .topbar {
    background-color: var(--dm-surface, #2d2d2d);
    border-bottom-color: var(--dm-elevated, #404040);
}

body.dark-mode .sidebar {
    background-color: var(--dm-surface, #2d2d2d);
}

body.dark-mode .sidebar-menu-link {
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .sidebar-menu-link:hover {
    background-color: var(--dm-elevated, #404040);
}

body.dark-mode .sidebar-submenu-link {
    color: var(--dm-text-muted, #b0b0b0);
}

body.dark-mode .sidebar-submenu-link:hover {
    background-color: var(--dm-elevated, #404040);
    color: #ffffff;
}

body.dark-mode .main-content {
    background-color: var(--dm-bg, #1a1a1a);
}

body.dark-mode .page-header-sticky {
    background-color: var(--dm-surface, #2d2d2d);
    border-bottom-color: var(--dm-elevated, #404040);
}

body.dark-mode .filter-bar {
    background-color: var(--dm-surface, #2d2d2d);
}

body.dark-mode .content-area {
    background-color: var(--dm-bg, #1a1a1a);
}

body.dark-mode .card {
    background-color: var(--dm-surface, #2d2d2d);
    border-color: var(--dm-elevated, #404040);
}

/* !important necessário para sobrescrever inline style="background:..." em card-headers */
body.dark-mode .card-header {
    background-color: #363636 !important;
    border-bottom-color: var(--dm-border, #505050);
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .table {
    color: var(--dm-text, #e0e0e0);
    background-color: var(--dm-surface, #2d2d2d);
}

/* !important cobre theads com inline style="background-color:#f8f9fa" */
body.dark-mode .table thead th {
    background-color: var(--dm-elevated, #404040) !important;
    color: var(--dm-text, #e0e0e0) !important;
    border-color: var(--dm-border, #505050) !important;
}

/* Dark mode - thead sticky (table-responsive ou overflow container manual) */
body.dark-mode .table-responsive thead th {
    background-color: var(--dm-elevated, #404040) !important;
    color: var(--dm-text, #e0e0e0);
    border-bottom: 2px solid var(--dm-border, #505050);
}

body.dark-mode .table tbody td {
    border-color: var(--dm-elevated, #404040);
    background-color: var(--dm-surface, #2d2d2d);
}

/* ── Bootstrap table variant banding — dark mode ────────────────────────────
   body.dark-mode .table tbody td (specificity 0,2,3) overrides Bootstrap's
   var(--bs-table-bg) mechanism. Estes seletores têm especificidade 0,3,3+
   e !important para preservar o banding semântico de cada variante.        */
body.dark-mode .table tr.table-dark td,
body.dark-mode .table tr.table-dark th {
    background-color: var(--dm-bg, #1a1a1a) !important;
    color: #d0d0d0 !important;
    border-color: var(--dm-border, #505050) !important;
}
body.dark-mode .table tr.table-secondary td,
body.dark-mode .table tr.table-secondary th {
    background-color: rgba(108, 117, 125, 0.22) !important;
    color: #c8cdd2 !important;
    border-color: rgba(108, 117, 125, 0.3) !important;
}
body.dark-mode .table tr.table-danger td,
body.dark-mode .table tr.table-danger th {
    background-color: rgba(220, 53, 69, 0.18) !important;
    color: #f5bcc0 !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
}
body.dark-mode .table tr.table-success td,
body.dark-mode .table tr.table-success th {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #a8d5b8 !important;
    border-color: rgba(25, 135, 84, 0.28) !important;
}
body.dark-mode .table tr.table-light td,
body.dark-mode .table tr.table-light th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #c0c0c0 !important;
    border-color: #484848 !important;
}
body.dark-mode .table tr.table-warning td,
body.dark-mode .table tr.table-warning th {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #fbe6a0 !important;
    border-color: rgba(255, 193, 7, 0.22) !important;
}
body.dark-mode .table tr.table-info td,
body.dark-mode .table tr.table-info th {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: #a0e8f8 !important;
    border-color: rgba(13, 202, 240, 0.22) !important;
}
body.dark-mode .table tr.table-primary td,
body.dark-mode .table tr.table-primary th {
    background-color: rgba(13, 110, 253, 0.18) !important;
    color: #c0d4fc !important;
    border-color: rgba(13, 110, 253, 0.25) !important;
}
/* Variantes em células individuais (td/th com classe diretamente) */
body.dark-mode .table td.table-dark, body.dark-mode .table th.table-dark { background-color: var(--dm-bg, #1a1a1a) !important; color: #d0d0d0 !important; }
body.dark-mode .table td.table-secondary, body.dark-mode .table th.table-secondary { background-color: rgba(108,117,125,0.22) !important; color: #c8cdd2 !important; }
body.dark-mode .table td.table-danger, body.dark-mode .table th.table-danger { background-color: rgba(220,53,69,0.18) !important; color: #f5bcc0 !important; }
body.dark-mode .table td.table-success, body.dark-mode .table th.table-success { background-color: rgba(25,135,84,0.2) !important; color: #a8d5b8 !important; }
body.dark-mode .table td.table-light, body.dark-mode .table th.table-light { background-color: rgba(255,255,255,0.05) !important; color: #c0c0c0 !important; }
body.dark-mode .table td.table-warning, body.dark-mode .table th.table-warning { background-color: rgba(255,193,7,0.15) !important; color: #fbe6a0 !important; }
body.dark-mode .table td.table-info, body.dark-mode .table th.table-info { background-color: rgba(13,202,240,0.15) !important; color: #a0e8f8 !important; }
body.dark-mode .table td.table-primary, body.dark-mode .table th.table-primary { background-color: rgba(13,110,253,0.18) !important; color: #c0d4fc !important; }

/* thead com inline style="background:..." — cobrir o elemento pai além das células */
body.dark-mode .table thead {
    background-color: var(--dm-elevated, #404040) !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dm-elevated, #404040);
}

body.dark-mode .table tfoot td,
body.dark-mode .table tfoot th {
    background-color: #363636 !important;
    color: var(--dm-text, #e0e0e0);
    border-color: var(--dm-border, #505050);
}

/* ============================================================================
   TABELAS DE FORECAST
   ============================================================================ */

/* Coluna Total e banding de colunas — light mode */
.total-col {
    background-color: #e9ecef;
    border-left: 2px solid #dee2e6;
}
.table td.month-band,
.table th.month-band {
    background-color: #cfe2ff !important;
}
tfoot td {
    border-top: 2px solid #adb5bd;
}
.forecast-review-table td.group-cell {
    vertical-align: middle;
    font-weight: 500;
}
/* Separador visual após colunas fixas — aplicado via box-shadow no nth-child(3) (ver sticky rules abaixo) */

/* Estilo uniforme para colunas fixas em forecast-table (sem group-cell) */
.forecast-table tbody td:nth-child(1),
.forecast-table tbody td:nth-child(2),
.forecast-table tbody td:nth-child(3),
.forecast-table tfoot td:nth-child(1),
.forecast-table tfoot td:nth-child(2) {
    vertical-align: middle;
}
.forecast-table tbody td:nth-child(1) {
    font-weight: 500;
}

/* Banding trimestral — via classe .month-band em <th> e <td> de cada template */

/* ── table-layout: fixed + larguras de coluna via <colgroup> ─────────────────
   Garante que os offsets left dos sticky sejam exatos.
   Classes para <col> no <colgroup> de cada template de forecast.               */
.forecast-table,
.forecast-review-table {
    table-layout: fixed;
}
.fc-col-tipo    { width: 90px; }
.fc-col-produto { width: 160px; }
.fc-col-preco   { width: 70px; }
.fc-col-badge   { width: 50px; }
.fc-col-month   { width: 75px; }
.fc-col-total   { width: 90px; }
.fc-col-update  { width: 110px; }
.fc-col-actions { width: 140px; }

/* Truncar texto longo nas colunas fixas */
.forecast-table thead th:nth-child(1),
.forecast-table thead th:nth-child(2),
.forecast-table tbody td:nth-child(1),
.forecast-table tbody td:nth-child(2),
.forecast-review-table thead th:nth-child(1),
.forecast-review-table thead th:nth-child(2),
.forecast-review-table tbody td.group-cell:nth-child(1),
.forecast-review-table tbody td.group-cell:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Colunas fixas à esquerda: Tipo / Produto / Preço ────────────────────────
   Tipo: 90px  |  Produto: 160px  |  Preço: 70px  (left offsets: 0 / 90 / 250)
   z-index thead: 2000  |  tbody/tfoot: 1000  (igual ao padrão sa-col-fixed)
   inset 0 0 0 9999px: preenche fundo sem transparência (table-hover safe)      */

/* thead */
.forecast-table thead th:nth-child(1),
.forecast-review-table thead th:nth-child(1) {
    position: sticky; left: 0; z-index: 2000;
    box-shadow: inset 0 0 0 9999px #f8f9fa !important;
}
.forecast-table thead th:nth-child(2),
.forecast-review-table thead th:nth-child(2) {
    position: sticky; left: 90px; z-index: 2000;
    box-shadow: inset 0 0 0 9999px #f8f9fa !important;
}
.forecast-table thead th:nth-child(3),
.forecast-review-table thead th:nth-child(3) {
    position: sticky; left: 250px; z-index: 2000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f8f9fa !important;
}
/* tbody — forecast-table (linhas simples, sem rowspan) */
.forecast-table tbody td:nth-child(1) {
    position: sticky; left: 0; z-index: 1000;
    box-shadow: inset 0 0 0 9999px #fff !important;
}
.forecast-table tbody td:nth-child(2) {
    position: sticky; left: 90px; z-index: 1000;
    box-shadow: inset 0 0 0 9999px #fff !important;
}
.forecast-table tbody td:nth-child(3) {
    position: sticky; left: 250px; z-index: 1000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #fff !important;
}
/* tbody — forecast-review-table (.group-cell evita rowspan das linhas pares) */
.forecast-review-table tbody td.group-cell:nth-child(1) {
    position: sticky; left: 0; z-index: 1000;
    box-shadow: inset 0 0 0 9999px #fff !important;
}
.forecast-review-table tbody td.group-cell:nth-child(2) {
    position: sticky; left: 90px; z-index: 1000;
    box-shadow: inset 0 0 0 9999px #fff !important;
}
.forecast-review-table tbody td.group-cell:nth-child(3) {
    position: sticky; left: 250px; z-index: 1000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #fff !important;
}
/* Coluna badge FCST/REV — fixa em left:320px (só em sales_reports/forecast_review)
   Usa classe .fc-badge (thead th + tbody td, ambas as linhas FCST e REV)
   O shadow separador fica no badge pois cobre o Preço quando rolando              */
.forecast-review-table thead th.fc-badge {
    position: sticky; left: 320px; z-index: 2000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f8f9fa !important;
}
.forecast-review-table tbody td.fc-badge {
    position: sticky; left: 320px; z-index: 1000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #fff !important;
}
.forecast-review-table tbody tr:hover td.fc-badge {
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f0f0f0 !important;
}
/* hover: manter fundo preenchido no hover de linha */
.forecast-table tbody tr:hover td:nth-child(1),
.forecast-table tbody tr:hover td:nth-child(2) {
    box-shadow: inset 0 0 0 9999px #f0f0f0 !important;
}
.forecast-table tbody tr:hover td:nth-child(3) {
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f0f0f0 !important;
}
.forecast-review-table tbody tr:hover td.group-cell:nth-child(1),
.forecast-review-table tbody tr:hover td.group-cell:nth-child(2) {
    box-shadow: inset 0 0 0 9999px #f0f0f0 !important;
}
.forecast-review-table tbody tr:hover td.group-cell:nth-child(3) {
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f0f0f0 !important;
}
/* tfoot: DOM col 1 = TOTAL (colspan 2), DOM col 2 = Preço vazio */
.forecast-table tfoot td:nth-child(1),
.forecast-review-table tfoot td:nth-child(1) {
    position: sticky; left: 0; z-index: 1000;
    box-shadow: inset 0 0 0 9999px #f8f9fa !important;
}
.forecast-table tfoot td:nth-child(2),
.forecast-review-table tfoot td:nth-child(2) {
    position: sticky; left: 250px; z-index: 1000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.12), inset 0 0 0 9999px #f8f9fa !important;
}
/* dark mode */
body.dark-mode .forecast-table thead th:nth-child(1),
body.dark-mode .forecast-table thead th:nth-child(2),
body.dark-mode .forecast-review-table thead th:nth-child(1),
body.dark-mode .forecast-review-table thead th:nth-child(2),
body.dark-mode .forecast-table tfoot td:nth-child(1),
body.dark-mode .forecast-review-table tfoot td:nth-child(1) {
    box-shadow: inset 0 0 0 9999px #2a2a2a !important;
}
body.dark-mode .forecast-table thead th:nth-child(3),
body.dark-mode .forecast-review-table thead th:nth-child(3),
body.dark-mode .forecast-table tfoot td:nth-child(2),
body.dark-mode .forecast-review-table tfoot td:nth-child(2) {
    box-shadow: 2px 0 5px rgba(0,0,0,0.5), inset 0 0 0 9999px #2a2a2a !important;
}
body.dark-mode .forecast-table tbody td:nth-child(1),
body.dark-mode .forecast-table tbody td:nth-child(2),
body.dark-mode .forecast-review-table tbody td.group-cell:nth-child(1),
body.dark-mode .forecast-review-table tbody td.group-cell:nth-child(2) {
    box-shadow: inset 0 0 0 9999px #1e1e1e !important;
}
body.dark-mode .forecast-table tbody td:nth-child(3),
body.dark-mode .forecast-review-table tbody td.group-cell:nth-child(3) {
    box-shadow: 2px 0 5px rgba(0,0,0,0.5), inset 0 0 0 9999px #1e1e1e !important;
}

/* ============================================================================
   FILTER CARD — card de filtros reutilizável
   ============================================================================ */

.filter-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.filter-card label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    font-size: 14px;
}
.filter-card select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

/* ============================================================================
   SCHEDULE / CALENDÁRIO DE VIAGENS
   ============================================================================ */

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}
.schedule-table th,
.schedule-table td {
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: center;
    vertical-align: top;
}
.schedule-table th {
    background: #f8f9fa;
    font-weight: 600;
}
.schedule-table th.today {
    background: #2c3e50;
    color: white;
}
.schedule-table td.pic-column {
    background: #f8f9fa;
    font-weight: 600;
    text-align: left;
}

@media (max-width: 991px) {
    .schedule-table { font-size: 0.85rem; }
    .schedule-table th,
    .schedule-table td { padding: 5px; }
}

/* Week calendar grid (schedule_card.html) */
.week-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.day-column {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    min-height: 150px;
}
.day-header {
    background: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
    font-weight: 600;
}
.day-header.today {
    background: #2c3e50;
    color: white;
}
.day-date {
    font-size: 0.85rem;
    color: #6c757d;
}
.day-header.today .day-date { color: white; }
.day-body { padding: 10px; }

.trip-item {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.trip-item.vacation {
    background: #fff3e0;
    border-left-color: #ff9800;
}
.trip-item.training {
    background: #f3e5f5;
    border-left-color: #9c27b0;
}
.trip-owner {
    font-weight: 600;
    color: #2c3e50;
}
.trip-destination {
    color: #6c757d;
    font-size: 0.8rem;
}

/* Coluna Total do forecast e similares — dark mode */
body.dark-mode .total-col {
    background-color: #2a3a4a !important;
    border-left-color: var(--dm-border, #505050);
}

/* Banding de colunas em dark mode — via .month-band (ver light mode acima) */

/* ── Plotly charts em dark mode ──────────────────────────────────────────────
   SVG usa atributos de apresentação (não inline style), então CSS pode
   sobrescrevê-los com !important sem JS.
   Cobre: títulos, eixos, tick labels, legend text, annotations.         */
body.dark-mode .js-plotly-plot text {
    fill: #d0d0d0 !important;
}
/* Linhas de grade */
body.dark-mode .js-plotly-plot .gridlayer path,
body.dark-mode .js-plotly-plot .gridlayer line {
    stroke: rgba(200, 200, 200, 0.12) !important;
}
/* Zero-line */
body.dark-mode .js-plotly-plot .zerolinelayer path,
body.dark-mode .js-plotly-plot .zerolinelayer line {
    stroke: rgba(200, 200, 200, 0.25) !important;
}
/* Borda do plot e eixos */
body.dark-mode .js-plotly-plot .crisp path.domain {
    stroke: rgba(200, 200, 200, 0.2) !important;
}

/* ── Inputs readonly/disabled — Bootstrap define #e9ecef, templates repetem inline ── */
body.dark-mode .form-control[readonly],
body.dark-mode .form-control:disabled {
    background-color: #353535 !important;
    color: #9a9a9a !important;
    border-color: var(--dm-border, #505050) !important;
}

/* ── Bulk-action bars (id=bulkBar) — inline style=#f8f9fa em vários templates ── */
body.dark-mode #bulkBar {
    background: #363636 !important;
    border-bottom-color: var(--dm-border, #505050) !important;
    color: var(--dm-text, #e0e0e0);
}

/* ── Banding de colunas — dark mode: apenas por classe, sem nth-child ── */
body.dark-mode .table td.month-band,
body.dark-mode .table th.month-band {
    background-color: #1e3052 !important;
}

/* ── Hover de grupo (forecast review) ── */
body.dark-mode .forecast-review-table tbody tr.group-row:hover td {
    background-color: rgba(99, 155, 255, 0.15) !important;
}

/* ── Linhas tbody com classe .table-light ── */
body.dark-mode .table tbody tr.table-light > td,
body.dark-mode .table tbody tr.table-light > th {
    background-color: #383838 !important;
    color: #c0c0c0 !important;
    border-color: var(--dm-border, #505050) !important;
}

/* ── Primeira coluna fixa em tabelas mensais (monthlyTable) ── */
body.dark-mode #monthlyTable tbody td:first-child {
    background-color: #363636 !important;
    color: var(--dm-text, #e0e0e0) !important;
}

/* ── Inputs desabilitados dentro de linhas .table-secondary ── */
body.dark-mode .table-secondary td input,
body.dark-mode .table-secondary th input {
    background-color: var(--dm-surface, #2d2d2d) !important;
    color: #9a9a9a !important;
    cursor: not-allowed;
}

/* ── Org chart ── */
body.dark-mode .orgchart {
    background: var(--dm-surface, #2d2d2d) !important;
}
body.dark-mode .orgchart .node {
    background-color: #363636 !important;
    color: var(--dm-text, #e0e0e0) !important;
    border-color: var(--primary-color) !important;
}
body.dark-mode .orgchart .lines .downLine,
body.dark-mode .orgchart .lines .rightLine,
body.dark-mode .orgchart .lines .leftLine {
    border-color: var(--dm-border, #505050) !important;
    background-color: var(--dm-border, #505050) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--dm-elevated, #404040);
    color: var(--dm-text, #e0e0e0);
    border-color: var(--dm-border, #505050);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #4a4a4a;
    border-color: var(--primary-color);
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-secondary {
    background-color: var(--dm-border, #505050);
    border-color: var(--dm-border, #505050);
}

/* !important necessário: templates de card têm <style> embutido com background:white */
body.dark-mode .dashboard-card {
    background-color: var(--dm-surface, #2d2d2d) !important;
}

/* grid-stack widget wrapper e filter-card — backgrounds white hardcoded nos templates */
body.dark-mode .grid-stack-item-content {
    background: var(--dm-surface, #2d2d2d) !important;
}

body.dark-mode .filter-card {
    background: var(--dm-surface, #2d2d2d) !important;
    color: var(--dm-text, #e0e0e0) !important;
    border-color: var(--dm-border, #505050) !important;
}

body.dark-mode .dashboard-card-body,
body.dark-mode .kanban-card-body {
    background-color: var(--dm-surface, #2d2d2d) !important;
    color: var(--dm-text, #e0e0e0);
}

/* Fundo SVG do Plotly — rect.bg é o paper/plot background gerado pelo Plotly */
body.dark-mode .js-plotly-plot .bg {
    fill: var(--dm-surface, #2d2d2d) !important;
}

/* Tooltip hover — .hoverlayer contém APENAS elementos de hover (tooltip principal,
   rótulo <extra> e spike labels). Targeting sem restrição de classe filha é seguro. */
body.dark-mode .js-plotly-plot .hoverlayer path {
    fill: #1e1e1e !important;
    stroke: #555555 !important;
}
body.dark-mode .js-plotly-plot .hoverlayer text {
    fill: #ffffff !important;
}

body.dark-mode .dashboard-card-header,
body.dark-mode .kanban-card-header {
    background-color: var(--dm-elevated, #404040);
    color: var(--dm-text, #e0e0e0);
    border-bottom-color: var(--dm-border, #505050);
}

/* Forecast mensal (management/forecast_review_form_monthly.html) — <style> inline claro */
body.dark-mode #monthlyTable tbody td:first-child { background-color: var(--dm-elevated, #404040); }
body.dark-mode .table-secondary input { background-color: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); }

body.dark-mode .text-muted {
    color: #999999 !important;
}

/* ── Calendário de viagens (trip_schedule.html, calendar_cards.html) ── */
.calendar-week-label {
    text-align: center;
    background-color: #f8f9fa;
    font-weight: bold;
    vertical-align: middle;
}
.calendar-day-cell {
    vertical-align: top;
    height: 100px;
}
.today-cell {
    background-color: #fff3cd;
}
body.dark-mode .calendar-week-label {
    background-color: #3d3d3d !important;
    color: #c0c0c0 !important;
}
body.dark-mode .today-cell {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* ── Schedule table (schedule_card.html — não usa classe .table) ── */
body.dark-mode .schedule-table th,
body.dark-mode .schedule-table td {
    background-color: #363636 !important;
    border-color: var(--dm-border, #505050) !important;
    color: var(--dm-text, #e0e0e0) !important;
}
body.dark-mode .schedule-table th.today,
body.dark-mode .schedule-table td.today {
    background-color: #1a2f45 !important;
    color: var(--dm-text, #e0e0e0) !important;
}
body.dark-mode .schedule-table td.pic-column {
    background-color: var(--dm-elevated, #404040) !important;
}
/* Week calendar */
body.dark-mode .day-column {
    background-color: #363636 !important;
    border-color: var(--dm-border, #505050) !important;
}
body.dark-mode .day-header {
    background-color: var(--dm-elevated, #404040) !important;
    color: var(--dm-text, #e0e0e0) !important;
    border-bottom-color: var(--dm-border, #505050) !important;
}
body.dark-mode .day-header.today {
    background-color: #1a2f45 !important;
}
body.dark-mode .trip-owner {
    color: #d0d0d0 !important;
}
body.dark-mode .trip-destination {
    color: #9a9a9a !important;
}
body.dark-mode .trip-item {
    background-color: #1e3a5f !important;
    border-left-color: #4a90d9 !important;
    color: var(--dm-text, #e0e0e0) !important;
}
body.dark-mode .trip-item.vacation {
    background-color: #3d2b00 !important;
    border-left-color: #e08a00 !important;
}
body.dark-mode .trip-item.training {
    background-color: #2d1a3d !important;
    border-left-color: #9c27b0 !important;
}

/* F09-0013-3: Dark Mode Corrections */

/* F09-0013-3.3: Título ISP Dashboard em branco */
body.dark-mode .topbar-title {
    color: #ffffff !important;
}

/* F09-0013-3.4: Menu do usuário fechado com preenchimento branco */
body.dark-mode .user-menu-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.dark-mode .user-menu-btn:hover {
    background-color: #f0f0f0 !important;
}

/* F09-0013-3.1: Sticky headers */
body.dark-mode .page-header {
    background-color: var(--dm-surface, #2d2d2d);
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .page-title {
    color: var(--dm-text, #e0e0e0);
}

body.dark-mode .page-subtitle {
    color: var(--dm-text-muted, #b0b0b0);
}

/* ============================================
   F09-0014-1: MOBILE STYLES (django-user-agents)
   Baseado em body.device-mobile ao invés de @media queries
   ============================================ */

/* Layout principal mobile */
body.device-mobile {
    font-size: 12.6px;
    overflow-x: hidden !important;
}

/* (Blocos duplicados de .main-content/.page-container/.topbar/.topbar-title/.topbar-logo/.page-header/.page-title/.page-subtitle removidos — versões canônicas estão acima nas linhas 1359-1500) */

body.device-mobile .content-area {
    padding: 13.5px 10px;
}

body.device-mobile .filter-bar {
    padding: 9px;
}

/* REMOVIDO: 2 blocos forçando col-md-X a 100% no mobile — Bootstrap já faz isso
   automaticamente abaixo de 768px. As regras quebravam col-4/col-6 dos filter-bars. */

/* REMOVIDO: regra antiga forçava TODOS col-* (inclusive col-4, col-6 intencionalmente
   horizontais) a empilhar verticalmente. Bootstrap já faz isso corretamente:
   col-md-X stacka naturalmente em viewport < 768px (device-mobile). col-X foi escolhido
   deliberadamente para ficar horizontal em todas as larguras. */

body.device-mobile .mobile-hamburger {
    top: calc(6.3px + env(safe-area-inset-top, 0));
}

body.device-mobile .messages {
    top: 58.5px;
    right: 9px;
    left: 9px;
    max-width: 100%;
}

/* Mobile gap fixes */
body.device-mobile .page-header-sticky {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.device-mobile .page-header-sticky .page-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 14.4px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    background: #fff !important;
}

body.device-mobile .main-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* F09-0014-2.2: Dark Mode - Sticky headers no mobile */
body.device-mobile.dark-mode .page-header-sticky {
    background-color: var(--dm-surface, #2d2d2d);
}

body.device-mobile.dark-mode .page-header {
    background-color: var(--dm-surface, #2d2d2d) !important;
    color: var(--dm-text, #e0e0e0);
}

body.device-mobile.dark-mode .page-title {
    color: var(--dm-text, #e0e0e0);
}

body.device-mobile.dark-mode .page-subtitle {
    color: var(--dm-text-muted, #b0b0b0);
}

body.device-mobile.dark-mode .topbar {
    background-color: var(--dm-surface, #2d2d2d) !important;
    border-bottom-color: var(--dm-elevated, #404040);
}

/* F09-0015-1.1: Menu do usuário branco SEMPRE no dark mode (desktop) */
body.dark-mode .user-menu-button {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.dark-mode .user-menu-button:hover {
    background-color: #f0f0f0 !important;
}

/* F09-0015-FIX: Remover regra que quebrava layout desktop */
/* body.device-desktop .sidebar - REMOVIDO (causava sobreposição) */

/* Safety nets no mobile: remove padding lateral e impede overflow horizontal */
body.device-mobile .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

body.device-mobile .page-container {
    overflow-x: hidden !important;
}

/* ============================================================================
   MOBILE PORTRAIT — compactação geral pra dar mais espaço a tabelas/conteúdo
   (≤1199px, sempre — não depende de orientação)
   ============================================================================ */
@media (max-width: 1199px) {
    /* Page-header compactado */
    body.device-mobile .page-header-sticky .page-header,
    body.device-tablet .page-header-sticky .page-header {
        padding: 8px 14px;
    }
    body.device-mobile .page-title,
    body.device-tablet .page-title {
        font-size: 1rem;
        margin-bottom: 2px;
        line-height: 1.2;
    }
    body.device-mobile .page-subtitle,
    body.device-tablet .page-subtitle {
        font-size: 0.72rem;
        margin-bottom: 0;
        line-height: 1.2;
        color: #6c757d;
    }

    /* Botões do page-header menores (mas mantém min-height 44px do P0) */
    body.device-mobile .page-header > .d-flex.justify-content-between > .btn,
    body.device-mobile .page-header > .d-flex.justify-content-between > a.btn {
        padding: 8px 16px;
        font-size: 13px;
        flex: 0 0 auto;
    }

    /* Filter-bar mais compacto */
    body.device-mobile .filter-bar,
    body.device-tablet .filter-bar {
        padding: 8px 12px !important;
    }
    body.device-mobile .filter-bar .form-label,
    body.device-mobile .filter-bar .form-label-sm,
    body.device-tablet .filter-bar .form-label,
    body.device-tablet .filter-bar .form-label-sm {
        display: none; /* esconde labels — o select tem opção descritiva */
    }

    /* Content-area com menos padding */
    body.device-mobile .content-area,
    body.device-tablet .content-area {
        padding: 10px 8px !important;
    }

    /* Sticky 1ª coluna em tabelas com muitas colunas — mantém label visível */
    body.device-mobile .table-responsive .table tbody td:first-child,
    body.device-mobile .table-responsive .table tfoot td:first-child,
    body.device-tablet .table-responsive .table tbody td:first-child,
    body.device-tablet .table-responsive .table tfoot td:first-child {
        position: sticky;
        left: 0;
        background-color: #fff;
        z-index: 5;
        box-shadow: 2px 0 2px -1px rgba(0,0,0,0.08);
    }
    body.device-mobile .table-responsive .table thead th:first-child,
    body.device-tablet .table-responsive .table thead th:first-child {
        position: sticky;
        left: 0;
        background-color: #f8f9fa;
        z-index: 11; /* acima do thead sticky (top) e tbody sticky (left) */
        box-shadow: 2px 0 2px -1px rgba(0,0,0,0.08);
    }
    /* Dark mode */
    body.device-mobile.dark-mode .table-responsive .table tbody td:first-child,
    body.device-mobile.dark-mode .table-responsive .table tfoot td:first-child {
        background-color: var(--dm-surface);
    }
}

/* ============================================================================
   MOBILE LANDSCAPE — altura ≤500px (celular deitado, tablet split-view)
   Compacta tudo agressivamente pra dar espaço útil pra tabela/conteúdo
   ============================================================================ */
@media (max-width: 1199px) and (max-height: 500px) {
    /* Page-header e filter ainda mais compactos */
    .page-header-sticky .page-header {
        padding: 2px 10px;
    }
    .page-header-sticky .filter-bar {
        padding: 2px 10px !important;
    }
    .page-header,
    .page-header-sticky .page-header {
        margin-bottom: 0 !important;
    }
    .page-title,
    .page-header-sticky .page-title {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
        line-height: 1.2;
    }
    .page-subtitle,
    .page-header-sticky .page-subtitle {
        display: none; /* esconde subtitle em landscape — economiza espaço */
    }

    /* Title + botão "+ Criar" voltam a ficar lado-a-lado em landscape */
    body.device-mobile .page-header > .d-flex.justify-content-between,
    body.device-tablet .page-header > .d-flex.justify-content-between {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
    }
    /* Botão menor em landscape (mínimo aceitável p/ toque ainda) */
    body.device-mobile .page-header > .d-flex.justify-content-between > .btn,
    body.device-mobile .page-header > .d-flex.justify-content-between > a.btn,
    body.device-tablet .page-header > .d-flex.justify-content-between > .btn,
    body.device-tablet .page-header > .d-flex.justify-content-between > a.btn {
        padding: 4px 10px;
        font-size: 12px;
        min-height: 32px;
        flex: 0 0 auto;
    }

    /* Inputs/selects menores em landscape (mantém font 16px contra auto-zoom iOS) */
    body.device-mobile .form-control,
    body.device-mobile .form-select,
    body.device-tablet .form-control,
    body.device-tablet .form-select {
        padding: 4px 8px;
        min-height: 36px;
    }
    body.device-mobile .form-control-sm,
    body.device-mobile .form-select-sm,
    body.device-tablet .form-control-sm,
    body.device-tablet .form-select-sm {
        padding: 4px 8px;
        min-height: 32px;
    }

    /* Reduz padding do content-area */
    body.device-mobile .content-area,
    body.device-tablet .content-area {
        padding: 4px 6px !important;
    }
    /* Cards mais compactos */
    body.device-mobile .card .card-body,
    body.device-tablet .card .card-body {
        padding: 6px !important;
    }
    /* Form em row.g-3 ainda mais compacto */
    body.device-mobile .row.g-3,
    body.device-tablet .row.g-3 {
        --bs-gutter-y: 0.2rem;
        --bs-gutter-x: 0.25rem;
    }
    body.device-mobile .row.g-2,
    body.device-tablet .row.g-2 {
        --bs-gutter-y: 0.2rem;
        --bs-gutter-x: 0.2rem;
    }
    /* Topbar e variável --topbar-height ajustados juntos pra consistência */
    body.device-mobile .topbar,
    body.device-tablet .topbar {
        height: 40px;
        padding-top: 0;
    }
    body.device-mobile .topbar-logo,
    body.device-tablet .topbar-logo {
        height: 22px;
    }
    body.device-mobile,
    body.device-tablet {
        --topbar-height: 40px;
    }

    /* Thead da tabela com padding menor */
    body.device-mobile .table thead th,
    body.device-tablet .table thead th {
        padding: 4px 6px !important;
        font-size: 12px;
    }
    body.device-mobile .table tbody td,
    body.device-tablet .table tbody td {
        padding: 4px 6px !important;
    }
}

/* ============================================================================
   DASHBOARD KANBAN CARDS — estilos base, extraídos dos <style> inline nos templates
   ============================================================================ */

.dashboard-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kanban-card-header {
    padding: 9px 12px;
    background: #808080;
    color: white;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

.kanban-card-body {
    padding: 15px;
}

/* Card views (_card templates) — header/body para layout sem Gridstack */
.dashboard-card-header {
    padding: 15px;
    background: #808080;
    color: white;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Alturas fixas para card views (equivalente às células do Gridstack) */
.card-h-3 .dashboard-card { height: 230px; }
.card-h-4 .dashboard-card { height: 310px; }
.card-h-6 .dashboard-card { height: 470px; }
.card-h-7 .dashboard-card { height: 550px; }
.card-h-8 .dashboard-card { height: 630px; }
.card-h-9 .dashboard-card { height: 710px; }

.card-h-3 .dashboard-card-body,
.card-h-4 .dashboard-card-body,
.card-h-6 .dashboard-card-body,
.card-h-7 .dashboard-card-body,
.card-h-8 .dashboard-card-body,
.card-h-9 .dashboard-card-body { overflow: auto; }

@media (max-width: 991px) {
    .card-h-3 .dashboard-card,
    .card-h-4 .dashboard-card,
    .card-h-6 .dashboard-card,
    .card-h-7 .dashboard-card,
    .card-h-8 .dashboard-card,
    .card-h-9 .dashboard-card { height: auto !important; }
}

/* Gridstack: widget wrapper base */
.grid-stack-item-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ícone de arraste nos kanbans Gridstack */
.grip-icon {
    color: white;
    cursor: move;
}

.kpi-value {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
}

.kpi-label {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
}

.kpi-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.kpi-two-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.kpi-numbers-row {
    display: flex;
    gap: 40px;
    margin-bottom: 10px;
}

.kpi-number-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kpi-number-value {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}

.kpi-number-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    margin-top: 5px;
}

/* ============================================================================
   GRIDSTACK MOBILE — quando ≤1199px, força stacking vertical e desabilita drag
   (Chrome estava interpretando scroll como move-card)
   ============================================================================ */
@media (max-width: 1199px) {
    .grid-stack {
        height: auto !important;
    }
    .grid-stack > .grid-stack-item {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        height: auto !important;
        min-height: 250px;
        margin-bottom: 12px;
    }
    .grid-stack-item-content {
        position: relative !important;
        inset: auto !important;
        height: 100% !important;
    }
    /* Esconde ícone de "agarrar" que insinua arrasto */
    .grip-icon {
        display: none !important;
    }
    /* Cursor de move no header não faz sentido em touch */
    .kanban-card-header {
        cursor: default !important;
    }
}

/* ============================================================================
   P2 MOBILE UX — ajustes pra usabilidade real (modal, page-header, filter, etc.)
   ============================================================================ */

/* Modal customizado responsivo no mobile (.modal, .customer-detail-modal, etc.) */
@media (max-width: 768px) {
    .modal {
        padding: 8px;
    }

    .modal-content,
    .customer-detail-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90dvh !important;
        margin: 0 auto;
        padding: 0;
    }

    .modal-header {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .modal-header h2 {
        font-size: 16px;
        margin-right: 8px;
        flex: 1;
        min-width: 0;
    }

    .modal-body {
        padding: 12px 16px;
    }

    /* botão de fechar com touch target adequado */
    .close-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Page header: stack título e botão em telas pequenas */
body.device-mobile .page-header > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
}

body.device-mobile .page-header > .d-flex.justify-content-between > .btn,
body.device-mobile .page-header > .d-flex.justify-content-between > a.btn {
    align-self: flex-start;
}

/* Filter-bar: força input de busca a ocupar toda a largura no mobile
   (sobrescreve inline style max-width: 400px dos templates) */
body.device-mobile .filter-bar input[type="text"],
body.device-mobile .filter-bar .form-control {
    max-width: 100% !important;
}

/* Select2 tunado pro mobile: touch targets 44px + search 16px (anti auto-zoom iOS) */
body.device-mobile .select2-container--classic .select2-selection {
    min-height: 44px;
}

body.device-mobile .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    min-height: 32px;
    padding: 4px 10px;
    line-height: 1.6;
    font-size: 14px;
}

body.device-mobile .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    min-width: 24px;
    min-height: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.device-mobile .select2-dropdown .select2-search__field {
    font-size: 16px !important; /* impede auto-zoom no iOS ao focar no search */
    min-height: 40px;
    padding: 8px 12px;
}

body.device-mobile .select2-results__option {
    min-height: 44px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

/* ============================================================================
   F09-0024: PLOTLY + GRIDSTACK - SOLUÇÃO DEFINITIVA SCROLL
   Aplicar APENAS em cards com classe .plotly-chart-container
   ============================================================================ */

/* Container do card: flex column para distribuir altura entre header e body */
.plotly-chart-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* CRUCIAL: permite flex children encolherem */
}

/* Header: ocupa apenas o necessário */
.plotly-chart-container .kanban-card-header {
    flex: 0 0 auto;
    padding: 9px 12px;
    line-height: 1.2;
}

/* Body: ocupa todo o espaço restante, sem permitir overflow */
.plotly-chart-container .kanban-card-body {
    flex: 1 1 auto;
    min-height: 0; /* CRUCIAL: sem isso, 100% não "cabe" */
    overflow: hidden; /* Evita scroll; conteúdo deve se ajustar */
    display: flex; /* Permite o chart esticar */
}

/* Chart div: herda 100% da altura/largura do body */
.plotly-chart-container .kanban-card-body > div[id^="chart-"] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* Força contêineres internos do Plotly a usarem 100% */
.js-plotly-plot,
.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================================
   F09-0026: PLOTLY MÚLTIPLOS GRÁFICOS - Kanbans com 2+ gráficos lado a lado
   ============================================================================ */

/* Container do card: flex column + padding para gráficos ficarem visíveis */
.plotly-multiple-chart-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;  /* CRUCIAL: evita estouro */
    overflow: hidden;
}

/* Header: ocupa apenas o necessário */
.plotly-multiple-chart-container .kanban-card-header {
    flex: 0 0 auto;
    padding: 9px 12px;
    line-height: 1.2;
}

/* Body: ocupa todo o espaço restante + padding para gráficos */
.plotly-multiple-chart-container .kanban-card-body {
    flex: 1 1 auto;
    min-height: 0;  /* CRUCIAL: evita estouro */
    overflow: hidden;
    padding: 13.5px;
    display: flex;  /* Garante controle total da altura interna */
    flex-direction: column;
}

/* A row precisa herdar 100% de altura do body */
.plotly-multiple-chart-container .kanban-card-body > .row {
    flex: 1 1 auto;
    min-height: 0;  /* CRUCIAL: evita estouro */
    height: 100%;
    margin: 0;
    display: flex;  /* Permite align-items funcionar */
    flex-wrap: wrap;  /* Mantém comportamento Bootstrap */
}

/* Colunas ocupam 100% da altura disponível */
.plotly-multiple-chart-container .kanban-card-body .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;  /* CRUCIAL: evita estouro */
}

/* Quando row tem align-items-center, centralizar conteúdo das colunas também */
.plotly-multiple-chart-container .kanban-card-body .row.align-items-center > [class*="col-"] {
    justify-content: center;  /* Centraliza conteúdo verticalmente dentro da coluna */
}

/* Título do mini-bloco não rouba altura do gráfico */
.plotly-multiple-chart-container .kanban-card-body h6 {
    flex: 0 0 auto;
    margin-bottom: 7.2px;
}

/* A área do gráfico ocupa o restante, SEM encolher a 0 */
.plotly-multiple-chart-container .kanban-card-body .plotly-chart {
    flex: 1 1 auto;
    min-height: 0;  /* CRUCIAL: evita estouro */
    width: 100%;
    height: 100%;
}

/* Contêineres internos do Plotly respeitam 100% */
.plotly-multiple-chart-container .plotly-chart .js-plotly-plot,
.plotly-multiple-chart-container .plotly-chart .plot-container,
.plotly-multiple-chart-container .plotly-chart .svg-container {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================================
   F09-0026: CENTRALIZAÇÃO VERTICAL - Kanban "Total per Mode" (Trip Dashboard)
   ============================================================================ */

/* Body centraliza o gráfico vertical e horizontalmente */
#mode-kanban .kanban-card-body {
    display: flex;
    align-items: center;      /* Centraliza VERTICAL */
    justify-content: center;  /* Centraliza HORIZONTAL */
    padding: 13.5px;
    min-height: 0;
    overflow: hidden;
}

/* O container do gráfico ocupa a área útil, com limites saudáveis */
#mode-kanban .plotly-chart {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 216px;  /* Evita "ponto" minúsculo */
}

/* Plotly interno deve obedecer ao 100% acima */
#mode-kanban .plotly-chart .js-plotly-plot,
#mode-kanban .plotly-chart .plot-container,
#mode-kanban .plotly-chart .svg-container {
    width: 100% !important;
    height: 100% !important;
}

/* ==============================================
   ATW Line - Correção Kanban Total Distance
   Review 0222 - 02/11/2025
   Classes específicas que NÃO afetam outros .kpi-label
   ============================================== */

/* Linha 2: Número + ATW (flexbox para alinhamento) */
.kpi-line-atw {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
    text-transform: none !important;  /* Neutraliza uppercase apenas aqui */
}

/* Número das voltas ao mundo (negrito, maior) */
.kpi-line-atw .atw-number {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Texto "ATW" (normal, menor) */
.kpi-line-atw .atw-suffix {
    font-weight: 400;
    font-size: 0.9rem;
}

/* Linha 3: Legenda "(Around the World)" (bem pequena, discreta) */
.kpi-help {
    font-size: 0.5rem;
    color: #999;
    text-transform: none !important;  /* Garante case correto */
    letter-spacing: normal;
}

/* Garantir que strong dentro de kpi-label sempre renderize */
.kpi-label strong { 
    display: inline !important;
    font-size: inherit;
    color: inherit;
    visibility: visible !important;
}

/* Overflow hidden para evitar scroll nos cards */
.dashboard-card-body, 
.kanban-card-body {
    overflow: hidden !important;
}

/* Garantir que grid-stack-item-content também não tenha scroll */
.grid-stack-item-content {
    overflow: hidden !important;
}

/* ============================================================
   Sales Analysis Table (sales_reports/sales_analysis.html)
   ============================================================ */
.sales-analysis-table {
    font-size: 0.78rem;
}
.sales-analysis-table th.sa-sub {
    font-size: 0.72rem;
    padding: 3px 5px;
    white-space: nowrap;
}
.sales-analysis-table th.sa-month-group {
    background-color: #eef2f8;
    font-size: 0.78rem;
    padding: 4px 2px;
}
.sales-analysis-table th.sa-total-group {
    background-color: #dde5f5;
}
.sales-analysis-table td {
    padding: 3px 5px;
    white-space: nowrap;
}
.sales-analysis-table td.data-cell,
.sales-analysis-table td.total-fcst,
.sales-analysis-table td.total-rev,
.sales-analysis-table td.total-real,
.sales-analysis-table td.total-delta {
    min-width: 58px;
}
.sales-analysis-table th.sa-col-fixed,
.sales-analysis-table td.sa-col-fixed {
    position: sticky;
    z-index: 1000;
}
.sales-analysis-table th.sa-col-fixed:nth-child(1),
.sales-analysis-table td.sa-col-fixed:nth-child(1) {
    left: 0;
    min-width: 80px;
    background-color: #fff !important;
    box-shadow: inset 0 0 0 9999px #fff !important;
}
.sales-analysis-table th.sa-col-fixed:nth-child(2),
.sales-analysis-table td.sa-col-fixed:nth-child(2) {
    left: 80px;
    min-width: 100px;
    background-color: #fff !important;
    box-shadow: 2px 0 4px rgba(0,0,0,.1), inset 0 0 0 9999px #fff !important;
}
.sales-analysis-table thead th.sa-col-fixed:nth-child(1) {
    background-color: #f8f9fa !important;
    box-shadow: inset 0 0 0 9999px #f8f9fa !important;
    z-index: 2000;
}
.sales-analysis-table thead th.sa-col-fixed:nth-child(2) {
    background-color: #f8f9fa !important;
    box-shadow: 2px 0 4px rgba(0,0,0,.1), inset 0 0 0 9999px #f8f9fa !important;
    z-index: 2000;
}
.sales-analysis-table tbody tr:hover td.sa-col-fixed:nth-child(1) {
    background-color: #e8e8e8 !important;
    box-shadow: inset 0 0 0 9999px #e8e8e8 !important;
}
.sales-analysis-table tbody tr:hover td.sa-col-fixed:nth-child(2) {
    background-color: #e8e8e8 !important;
    box-shadow: 2px 0 4px rgba(0,0,0,.1), inset 0 0 0 9999px #e8e8e8 !important;
}
.sa-fcst-hdr  { color: #0d6efd; }
.sa-rev-hdr   { color: #198754; }
.sa-real-hdr  { color: #6c757d; }
.sa-delta-hdr { color: #fd7e14; text-align: center; }

/* ============================================================================
   VALIDATION TOOLTIP — feedback de validação inline em formulários
   ============================================================================ */

.validation-tooltip {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 400px;
}
.validation-tooltip .icon {
    width: 28px;
    height: 28px;
    background: #ff9800;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}
.validation-tooltip .message {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}
.validation-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

/* ============================================================================
   AUTOCOMPLETE DROPDOWN — dropdown de busca reutilizável
   ============================================================================ */

.autocomplete-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: calc(100% - 30px);
    margin-top: 2px;
}
.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.autocomplete-item:hover { background-color: #f8f9fa; }
.autocomplete-item:last-child { border-bottom: none; }

/* ============================================================================
   FORECAST FORM — inputs de tabela de revisão mensal
   ============================================================================ */

.quantity-input,
.price-input,
.total-input {
    text-align: right;
    padding: 4px 8px;
    min-width: 100px;
}

/* ============================================================================
   LANDING PAGE — tela de boas-vindas / informações do sistema
   ============================================================================ */

.landing-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem 1rem;
    overflow-y: auto;
}
.landing-logo {
    max-width: 200px;
    max-height: 110px;
    object-fit: contain;
    margin-bottom: 2rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
body.dark-mode .landing-logo {
    filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.landing-welcome {
    font-size: 1.7rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 0.4rem;
}
body.dark-mode .landing-welcome { color: #e8eaf6; }
.landing-subtitle {
    font-size: 1rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 2rem;
}
.landing-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    padding: 2rem 2.5rem;
    min-width: 320px;
    max-width: 480px;
    width: 100%;
}
body.dark-mode .landing-card {
    background: #1e1e2e;
    border-color: #3a3a5c;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.landing-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #adb5bd;
    margin-bottom: 1.2rem;
}
.landing-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
}
body.dark-mode .landing-info-row { border-bottom-color: #2e2e4a; }
.landing-info-row:last-child { border-bottom: none; }
.landing-info-label {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}
body.dark-mode .landing-info-label { color: #9fa8da; }
.landing-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
    word-break: break-all;
}
body.dark-mode .landing-info-value { color: #e8eaf6; }
.landing-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--primary-color);
    color: #fff;
    letter-spacing: 0.04em;
}

/* ===================================================================
   Gestão de Menus — alerta de pendências, engrenagem de submenu,
   chave pendente e tela de revisão de chaves (CSS global, não inline)
   =================================================================== */
.menu-toolbar .status-text.dirty {
    font-size: 13px;
    font-weight: 700;
    color: #663c00;
    background: #ffe066;
    border: 1px solid #f0c000;
    padding: 6px 14px;
    border-radius: 6px;
    animation: dirtyPulse 1.6s ease-in-out infinite;
}
@keyframes dirtyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(240,192,0,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(240,192,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(240,192,0,0); }
}
/* Submenu card: top row (label + gear) */
.menu-card .card-top-row { display: flex; align-items: center; gap: 4px; }
.menu-card .card-top-row .card-label-input { flex: 1; min-width: 0; }
.card-gear-wrapper { position: relative; flex-shrink: 0; }
.card-rename-btn {
    background: #f1f3f5; border: 1px solid #ced4da; border-radius: 4px;
    font-size: 12px; line-height: 1.3; padding: 1px 5px; cursor: pointer; color: #495057;
}
.card-rename-btn:hover { background: #e7f3ff; border-color: #0067b5; }
.card-gear-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0;
    background: #fff; border: 1px solid #ced4da; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1500; min-width: 160px; overflow: hidden;
}
.card-gear-menu.show { display: block; }
.card-gear-item {
    display: block; width: 100%; text-align: left; padding: 8px 12px;
    background: none; border: none; cursor: pointer; font-size: 13px; color: #495057; white-space: nowrap;
}
.card-gear-item:hover { background: #f1f3f5; }
.menu-card .card-key.pending { color: #b35a00; font-style: italic; }
.section-pending-badge {
    display: none; font-family: 'Courier New', monospace; font-size: 10px;
    background: #ffe066; color: #663c00; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}
/* Tela de revisão de chaves */
.mmgmt-modal.wide { max-width: 560px; }
.mmgmt-keyedit-list { margin-top: 10px; max-height: 340px; overflow-y: auto; }
.mmgmt-keyedit-row {
    display: flex; flex-direction: column; gap: 3px; padding: 8px;
    border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 8px;
}
.mmgmt-keyedit-row .kx-label { font-size: 12px; font-weight: 600; color: #2c3e50; }
.mmgmt-keyedit-row .kx-input-row { display: flex; align-items: center; gap: 4px; }
.mmgmt-keyedit-row .kx-prefix { font-family: 'Courier New', monospace; font-size: 12px; color: #868e96; white-space: nowrap; }
.mmgmt-keyedit-row input {
    flex: 1; font-family: 'Courier New', monospace; font-size: 12px;
    padding: 5px 6px; border: 1px solid #ced4da; border-radius: 4px;
}

/* ── Gestão de Menus: modo escuro ────────────────────────────────────
   O <style> inline do template fixa o kanban em claro; estes overrides
   (body.dark-mode + classe = especificidade ≥ 0,2,0) fazem seguir o tema. */
/* Colunas e cartões (cabeçalho azul de coluna fica como está = marca) */
body.dark-mode .menu-column { background: var(--dm-surface, #2d2d2d); border-color: var(--dm-border, #505050); }
body.dark-mode .menu-card { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); color: var(--dm-text, #e0e0e0); }
body.dark-mode .menu-card .card-key { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .menu-card .card-label-input { color: var(--dm-text, #e0e0e0); }
body.dark-mode .menu-card .card-label-input:focus { background: #4a3f00; border-color: var(--warning-color, #ffc107); color: var(--dm-text, #e0e0e0); }
body.dark-mode .menu-card.no-url { background: #3a2e00; border-color: #6b5800; }
body.dark-mode .menu-card.no-url::after { color: #ffd966; }
body.dark-mode .empty-column-hint { color: var(--dm-text-muted, #b0b0b0); }

/* Seções (grupos) dentro da coluna */
body.dark-mode .menu-group { background: var(--dm-bg, #1a1a1a); border-color: var(--dm-border, #505050); }
body.dark-mode .menu-group-header { background: var(--dm-elevated, #404040); }
body.dark-mode .menu-group-grip { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .group-label-input { background: rgba(255,255,255,0.08); color: var(--dm-text, #e0e0e0); }
body.dark-mode .group-label-input:focus { background: var(--dm-elevated, #404040); border-color: var(--primary-color, #0067b5); }
body.dark-mode .group-sort-btn,
body.dark-mode .group-delete-btn { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); color: var(--dm-text, #e0e0e0); }
body.dark-mode .group-sort-btn:hover { background: rgba(0,103,181,0.25); border-color: var(--primary-color, #0067b5); }

/* Botões tracejados (+ Seção, adicionar filho) */
body.dark-mode .menu-column-add-child { border-color: var(--dm-border, #505050); color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .menu-column-add-child:hover { background: rgba(0,103,181,0.20); border-color: var(--primary-color, #0067b5); color: var(--primary-light, #3385c6); }

/* Cartão: engrenagem e menu (estilos do main.css) */
body.dark-mode .card-rename-btn { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); color: var(--dm-text, #e0e0e0); }
body.dark-mode .card-rename-btn:hover { background: rgba(0,103,181,0.25); border-color: var(--primary-color, #0067b5); }
body.dark-mode .card-gear-menu,
body.dark-mode .section-gear-menu { background: var(--dm-surface, #2d2d2d); border-color: var(--dm-border, #505050); }
body.dark-mode .card-gear-item,
body.dark-mode .section-gear-item { color: var(--dm-text, #e0e0e0); }
body.dark-mode .card-gear-item:hover,
body.dark-mode .section-gear-item:hover { background: var(--dm-elevated, #404040); }
body.dark-mode .section-gear-item.danger:hover { background: #3a0d0d; }

/* Modais (nova entrada, revisão de chaves) */
body.dark-mode .mmgmt-modal { background: var(--dm-surface, #2d2d2d); }
body.dark-mode .mmgmt-modal h3 { color: var(--dm-text, #e0e0e0); }
body.dark-mode .mmgmt-modal label { color: var(--dm-text, #e0e0e0); }
body.dark-mode .mmgmt-modal small { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .mmgmt-modal input,
body.dark-mode .mmgmt-modal select { background: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); border-color: var(--dm-border, #505050); }
body.dark-mode .mmgmt-modal-error { background: #3a0d0d; color: #f5a8b0; }
body.dark-mode .mmgmt-keyedit-row { border-color: var(--dm-border, #505050); }
body.dark-mode .mmgmt-keyedit-row .kx-label { color: var(--dm-text, #e0e0e0); }
body.dark-mode .mmgmt-keyedit-row .kx-prefix { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .mmgmt-keyedit-row input { background: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); border-color: var(--dm-border, #505050); }
body.dark-mode .rename-section-key-display { background: var(--dm-bg, #1a1a1a); color: var(--dm-text-muted, #b0b0b0); }

/* Seletor de emoji e botão de pré-visualização de ícone */
body.dark-mode .emoji-picker { background: var(--dm-surface, #2d2d2d); border-color: var(--dm-border, #505050); }
body.dark-mode .emoji-picker-search { background: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); border-color: var(--dm-border, #505050); }
body.dark-mode .emoji-picker-grid button:hover { background: rgba(0,103,181,0.25); border-color: var(--primary-color, #0067b5); }
body.dark-mode .emoji-picker-none { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .icon-preview-btn { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); }
body.dark-mode .icon-preview-btn:hover { background: rgba(0,103,181,0.25); border-color: var(--primary-color, #0067b5); }

/* Barra de status e scrollbar */
body.dark-mode .menu-toolbar .status-text { color: var(--dm-text, #e0e0e0); }
body.dark-mode .menu-kanban-section-row::-webkit-scrollbar-track { background: var(--dm-elevated, #404040); }

/* ── Caixas de destaque (callouts) — claro + escuro ──────────────────
   Substituem backgrounds inline em formulários OpEx/CapEx. O layout
   (padding, margem, raio, alinhamento) permanece inline no template;
   estas classes cuidam só de cor (fundo/borda/texto), que precisa seguir o tema. */
.soft-box-muted          { background: #f8f9fa; border: 1px solid #dee2e6; }
.soft-box-info           { background: #eef6ff; border: 1px solid #c2dcf7; }
.soft-box-warning        { background: #fff8e1; border: 1px solid #ffe082; }
.soft-box-warning-strong { background: #fff3e0; border: 1px solid #ffcc80; }
.soft-fill-success       { background: #e9f7ef; color: #155724; }
.soft-fill-warning       { background: #fff3e0; color: #7a3e00; }
.soft-fill-warning-soft  { background: #fff8f0; color: #7a3e00; }
body.dark-mode .soft-box-muted { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); }
body.dark-mode .soft-box-info { background: #0d2233; border-color: #1a4a6b; }
body.dark-mode .soft-box-warning,
body.dark-mode .soft-box-warning-strong { background: #2d2200; border-color: #6b5800; }
body.dark-mode .soft-fill-success { background: #0d2d1a; color: #75d88a; }
body.dark-mode .soft-fill-warning,
body.dark-mode .soft-fill-warning-soft { background: #2d2200; color: #ffd966; }

/* Barra de ações em massa (#bulkBar) — fundo claro inline (#f8f9fa) nos 12 templates
   de lista; !important porque o style inline tem prioridade sobre a folha. */
body.dark-mode #bulkBar { background: var(--dm-surface, #2d2d2d) !important; border-bottom-color: var(--dm-border, #505050) !important; }
body.dark-mode #bulkCount { color: var(--dm-text, #e0e0e0) !important; }

/* ── Dark mode: escapes de fundo branco em filtros e tabelas (M.62) ───── */
/* (a) Select2 (filtros) — tema "default" do select2.min.css carrega depois;
   prefixo .select2-container (0,3,0) vence as regras do tema (0,2,0). */
body.dark-mode .select2-container .select2-selection--multiple,
body.dark-mode .select2-container .select2-selection--single { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); }
body.dark-mode .select2-container .select2-selection__rendered,
body.dark-mode .select2-container .select2-selection--single .select2-selection__rendered { color: var(--dm-text, #e0e0e0); }
body.dark-mode .select2-container .select2-selection__placeholder { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .select2-container .select2-selection--multiple .select2-selection__choice { background: var(--dm-border, #505050); color: var(--dm-text, #e0e0e0); }
body.dark-mode .select2-dropdown { background: var(--dm-surface, #2d2d2d); border-color: var(--dm-border, #505050); }
body.dark-mode .select2-results__option { color: var(--dm-text, #e0e0e0); }
body.dark-mode .select2-results__option[aria-selected=true] { background-color: var(--dm-elevated, #404040); }
body.dark-mode .select2-search--dropdown .select2-search__field { background: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); border-color: var(--dm-border, #505050); }

/* (b) Forecast x Revisão — coluna badge FCST/REV (sticky branca). Mesma cor das colunas fixas adjacentes. */
body.dark-mode .forecast-review-table thead th.fc-badge { box-shadow: 2px 0 5px rgba(0,0,0,0.5), inset 0 0 0 9999px #2a2a2a !important; }
body.dark-mode .forecast-review-table tbody td.fc-badge { box-shadow: 2px 0 5px rgba(0,0,0,0.5), inset 0 0 0 9999px #1e1e1e !important; }
body.dark-mode .forecast-review-table tbody tr:hover td.fc-badge { box-shadow: 2px 0 5px rgba(0,0,0,0.5), inset 0 0 0 9999px #2a2a2a !important; }

/* (c) Análise de Vendas — colunas fixas Tipo/Produto (combinam com as células da tabela no escuro) */
body.dark-mode .sales-analysis-table td.sa-col-fixed:nth-child(1) { background-color: var(--dm-surface, #2d2d2d) !important; box-shadow: inset 0 0 0 9999px var(--dm-surface, #2d2d2d) !important; }
body.dark-mode .sales-analysis-table td.sa-col-fixed:nth-child(2) { background-color: var(--dm-surface, #2d2d2d) !important; box-shadow: 2px 0 4px rgba(0,0,0,.4), inset 0 0 0 9999px var(--dm-surface, #2d2d2d) !important; }
body.dark-mode .sales-analysis-table thead th.sa-col-fixed:nth-child(1) { background-color: var(--dm-elevated, #404040) !important; box-shadow: inset 0 0 0 9999px var(--dm-elevated, #404040) !important; }
body.dark-mode .sales-analysis-table thead th.sa-col-fixed:nth-child(2) { background-color: var(--dm-elevated, #404040) !important; box-shadow: 2px 0 4px rgba(0,0,0,.4), inset 0 0 0 9999px var(--dm-elevated, #404040) !important; }
body.dark-mode .sales-analysis-table tbody tr:hover td.sa-col-fixed:nth-child(1),
body.dark-mode .sales-analysis-table tbody tr:hover td.sa-col-fixed:nth-child(2) { background-color: var(--dm-elevated, #404040) !important; box-shadow: inset 0 0 0 9999px var(--dm-elevated, #404040) !important; }

/* (d, e) .card-title segue o tema (tinha color: var(--dark-text) fixo) — Comparativo Anual, partnerships */
body.dark-mode .card-title { color: var(--dm-text, #e0e0e0); }

/* ===================================================================
   Expense Report (trips:expense_report)
   =================================================================== */
.er-scroll-area {
    max-height: 400px;
    overflow-y: auto;
}
.er-scroll-area .table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}
.er-apply-bar {
    padding: 15px;
    border-top: 1px solid #dee2e6;
}
.er-selected-count {
    margin-left: 15px;
    color: #6c757d;
}
.er-year-item {
    border-bottom: 1px solid #dee2e6;
}
.er-year-header {
    padding: 10px 15px;
    background-color: #f8f9fa;
    cursor: pointer;
    user-select: none;
}
.er-year-header:hover {
    background-color: #e9ecef;
}
.er-file-info { width: 60%; }
.er-file-actions { width: 40%; text-align: right; }
.er-empty {
    padding: 30px;
    text-align: center;
    color: #6c757d;
}

body.dark-mode .er-apply-bar {
    border-top-color: var(--dm-border, #505050);
}
body.dark-mode .er-year-item {
    border-bottom-color: var(--dm-border, #505050);
}
body.dark-mode .er-year-header {
    background-color: #363636;
}
body.dark-mode .er-year-header:hover {
    background-color: var(--dm-elevated, #404040);
}
body.dark-mode .er-selected-count,
body.dark-mode .er-empty {
    color: #909090;
}

/* ── Partnerships (CRM) — utilitários de lista/funil ─────────────── */
.status-dot { font-size: 0.85em; }
.status-dot.is-active { color: #28a745; }
.status-dot.is-inactive { color: #dc3545; }
.table-empty { padding: 20px; text-align: center; }
.search-input { max-width: 400px; }
.cell-subtext { font-size: 0.85em; }

/* Funil de parcerias (kanban por status) */
.pipeline-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-col { flex: 0 0 260px; background: var(--card-bg, #f8f9fa); border: 1px solid #dee2e6; border-radius: 8px; }
.pipeline-col-header { padding: 10px 12px; border-bottom: 1px solid #dee2e6; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.pipeline-col-count { background: #e9ecef; border-radius: 12px; padding: 1px 9px; font-size: 0.8em; color: #495057; }
.pipeline-card { display: block; padding: 10px 12px; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; }
.pipeline-card:hover { background: rgba(0,0,0,0.03); }
.pipeline-card-title { font-weight: 600; }
.pipeline-card-meta { font-size: 0.82em; color: #6c757d; }
.pipeline-prio { display: inline-block; min-width: 18px; text-align: center; border-radius: 4px; font-size: 0.78em; font-weight: 700; padding: 0 5px; margin-right: 6px; background: #e9ecef; }
body.dark-mode .pipeline-col { background: #2a2a2a; border-color: #444; }
body.dark-mode .pipeline-col-header,
body.dark-mode .pipeline-card { border-color: #444; }
body.dark-mode .pipeline-col-count { background: #444; color: #ddd; }
.card-note { padding: 0 16px 12px; }

/* ── Select de token de cor: bolinha colorida + texto neutro ─────── */
.ctsel { position: relative; }
.ctsel-native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ctsel-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.ctsel-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.ctsel-dot-none { background: transparent; border-style: dashed; }
.ctsel-label { color: inherit; }
.ctsel-list { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: 2px; background: #fff; border: 1px solid #ced4da; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); max-height: 260px; overflow: auto; display: none; }
.ctsel-list.open { display: block; }
.ctsel-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.ctsel-item:hover { background: var(--light-bg, #f8f9fa); }
body.dark-mode .ctsel-list { background: var(--dm-surface); border-color: var(--dm-border); }
body.dark-mode .ctsel-item:hover { background: var(--dm-elevated); }

/* ── Editor CSS: seção de Cores Reutilizáveis (tokens) ───────────── */
/* .css-section-body tem display:grid no <style> do template (carrega após main.css, mesma especificidade).
   Duplo seletor (0,2,0) > (0,1,0) garante que o token section não herde o grid de colunas. */
.css-section-body.token-section-body { display: block; }
.token-intro { margin-bottom: 12px; }

/* Wrapper único para header + built-in rows + custom rows */
.token-all-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.token-all-rows .token-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }

/* Linha de cabeçalho */
.token-row-header { padding-bottom: 5px; border-bottom: 1px solid #dee2e6; margin-bottom: 2px; }
.token-row-header .tc-name,
.token-row-header .tc-slug { flex: 1 1 120px; max-width: 200px; min-width: 0; font-size: 11px; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; }
.token-row-header .tc-color { flex: 0 0 38px; text-align: center; font-size: 10px; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
.token-row-header .tc-action { flex: 0 0 auto; }

/* Linha de token (base) */
.token-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.token-row .form-control { flex: 1 1 120px; min-width: 0; max-width: 200px; }
.token-row .btn { flex: 0 0 auto; }

/* Input de cor standalone (substituiu label.token-color) */
.token-color-input { width: 38px; height: 30px; padding: 0; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
.token-color-input:disabled { opacity: 0.45; cursor: default; }

/* Linha built-in — rótulo/slug readonly (Bootstrap cuida do visual), cor é editável */
.token-builtin-icon { flex: 0 0 auto; font-size: 13px; opacity: 0.45; line-height: 1; }

.token-add { align-self: flex-start; }

/* Dark mode — cabeçalho dos tokens (o painel agora segue o tema escuro) */
body.dark-mode .token-row-header { border-bottom-color: var(--dm-border, #505050); }
body.dark-mode .token-row-header .tc-name,
body.dark-mode .token-row-header .tc-slug,
body.dark-mode .token-row-header .tc-color { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .token-color-input { border-color: #ccc; }

/* ── Editor CSS: seção Tema (cores claro + escuro lado a lado) ────── */
/* .css-section-body é grid no <style> do template; duplo seletor (0,2,0) desfaz o grid. */
.css-section-body.theme-section-body { display: block; }
.theme-intro { margin-bottom: 14px; }
.theme-table { display: flex; flex-direction: column; }

.theme-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid #f0f1f3; }
.theme-row:last-child { border-bottom: none; }
.theme-row .tr-label { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.theme-row .tr-name { font-size: 13px; font-weight: 500; color: #2c3e50; }
.theme-row .tr-desc { font-size: 11px; color: #868e96; }
.theme-row .tr-cell { flex: 0 0 185px; }

/* Cabeçalho da tabela (Claro / Escuro) */
.theme-row-head { border-bottom: 2px solid #dee2e6; padding-bottom: 6px; }
.theme-row-head .tr-head { font-size: 11px; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; }

/* Separador de grupo (Marca / Status / Superfícies e Texto) */
.tr-group { font-size: 11px; font-weight: 700; color: #adb5bd; text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 3px; padding-top: 9px; border-top: 1px dashed #e9ecef; }
.theme-table > .tr-group:first-of-type { border-top: none; padding-top: 2px; margin-top: 4px; }

/* Célula somente-leitura (Fase 1: Superfície/Bordas/Texto Secundário no claro) */
.color-input-row.tr-ro { background: #f8f9fa; }
.tr-swatch { width: 22px; height: 22px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); flex: 0 0 auto; }
.tr-ro .color-hex { color: #868e96; }
.tr-lock { font-size: 11px; opacity: 0.5; flex: 0 0 auto; }

@media (max-width: 720px) {
    .theme-row { flex-wrap: wrap; }
    .theme-row .tr-cell { flex: 1 1 45%; }
}

/* ── Editor CSS: pré-visualização Claro | Escuro (mini-mockup) ────────────
   Cada coluna recebe CSS vars (--tp-* / --a-*) via JS a partir dos pickers;
   os elementos de amostra referenciam essas vars (auto-contido, independe do
   modo da própria página do editor). */
.theme-preview { margin-top: 16px; border-top: 1px dashed #e9ecef; padding-top: 12px; }
.theme-preview .tp-title-row { font-size: 11px; font-weight: 700; color: #adb5bd; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.tp-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.tp-col { flex: 1 1 280px; min-width: 240px; border-radius: 8px; padding: 10px; background: var(--tp-page, #f0f2f5); }
.tp-mode { font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.tp-col[data-mode="light"] .tp-mode { color: #495057; }
.tp-col[data-mode="dark"]  .tp-mode { color: #cfcfcf; }

.tp-surface { border: 1px solid var(--tp-bd, #dee2e6); border-radius: 6px; overflow: hidden; background: var(--tp-bg, #fff); }
.tp-thead { background: var(--tp-elev, #f8f9fa); color: var(--tp-txt, #212529); padding: 6px 10px; font-size: 12px; font-weight: 600; }
.tp-pad { padding: 10px; }
.tp-card-title { color: var(--tp-txt, #212529); font-weight: 600; font-size: 13px; }
.tp-muted { color: var(--tp-mut, #6c757d); font-size: 11px; margin: 2px 0 6px; }
.tp-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tp-btn { font-size: 11px; padding: 3px 10px; border-radius: 4px; color: #fff; font-weight: 500; }
.tp-btn-p { background: var(--tp-p, #0067b5); }
.tp-btn-s { background: var(--tp-s, #6c757d); }
.tp-link { color: var(--tp-link, #0067b5); font-size: 12px; text-decoration: underline; }
.tp-badge { font-size: 10px; padding: 2px 8px; border-radius: 12px; color: #fff; }
.tp-b-suc { background: var(--tp-suc, #28a745); }
.tp-b-dng { background: var(--tp-dng, #dc3545); }
.tp-b-wrn { background: var(--tp-wrn, #ffc107); color: #3a2e00; }
.tp-b-inf { background: var(--tp-inf, #17a2b8); }

/* mensagens (alerts) */
.tp-col-msg .tp-alert { padding: 8px 12px; border-radius: 7px; border-left: 4px solid transparent; font-size: 12px; margin-bottom: 8px; }
.tp-col-msg .tp-alert:last-child { margin-bottom: 0; }
.tp-a-info { background: var(--a-info-bg); color: var(--a-info-txt); border-left-color: var(--a-info-bd); }
.tp-a-suc  { background: var(--a-suc-bg);  color: var(--a-suc-txt);  border-left-color: var(--a-suc-bd); }
.tp-a-dng  { background: var(--a-dng-bg);  color: var(--a-dng-txt);  border-left-color: var(--a-dng-bd); }
.tp-a-wrn  { background: var(--a-wrn-bg);  color: var(--a-wrn-txt);  border-left-color: var(--a-wrn-bd); }

body.dark-mode .theme-preview { border-top-color: var(--dm-border, #505050); }

/* ── Editor CSS: modo escuro do próprio painel ───────────────────── */
/* O <style> inline do template fixa o painel em claro (especificidade 0,1,0).
   body.dark-mode + classe = (0,2,x) vence e faz o editor seguir o tema escuro. */
body.dark-mode .css-section { background: var(--dm-surface, #2d2d2d); border-color: var(--dm-border, #505050); }
body.dark-mode .css-section-header { background: var(--dm-elevated, #404040); border-bottom-color: var(--dm-border, #505050); }
body.dark-mode .css-section-header h2 { color: var(--dm-text, #e0e0e0); }
body.dark-mode .css-field label { color: var(--dm-text, #e0e0e0); }
body.dark-mode .css-field .field-desc { color: var(--dm-text-muted, #b0b0b0); }

body.dark-mode .color-input-row { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); }
body.dark-mode .color-input-row .color-hex { color: var(--dm-text, #e0e0e0); }
body.dark-mode .color-default-badge { background: var(--dm-surface, #2d2d2d); color: var(--dm-text-muted, #b0b0b0); }

body.dark-mode .number-input-row { border-color: var(--dm-border, #505050); }
body.dark-mode .number-input-row input[type="number"] { background: var(--dm-elevated, #404040); color: var(--dm-text, #e0e0e0); }
body.dark-mode .number-input-row .unit { background: var(--dm-surface, #2d2d2d); border-left-color: var(--dm-border, #505050); color: var(--dm-text-muted, #b0b0b0); }

body.dark-mode .css-select { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); color: var(--dm-text, #e0e0e0); }

body.dark-mode .css-checkbox-row { background: var(--dm-elevated, #404040); border-color: var(--dm-border, #505050); }
body.dark-mode .css-checkbox-row .check-label strong { color: var(--dm-text, #e0e0e0); }
body.dark-mode .css-checkbox-row .check-label span { color: var(--dm-text-muted, #b0b0b0); }

body.dark-mode .css-field .field-warning { background: #3a2e00; border-color: #6b5800; color: #ffd966; }

/* Tabela Tema no escuro */
body.dark-mode .theme-intro,
body.dark-mode .token-intro { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .theme-row { border-bottom-color: var(--dm-border, #505050); }
body.dark-mode .theme-row .tr-name { color: var(--dm-text, #e0e0e0); }
body.dark-mode .theme-row .tr-desc { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .theme-row-head { border-bottom-color: var(--dm-border, #505050); }
body.dark-mode .theme-row-head .tr-head { color: var(--dm-text-muted, #b0b0b0); }
body.dark-mode .tr-group { color: var(--dm-text-muted, #b0b0b0); border-top-color: var(--dm-border, #505050); }
body.dark-mode .color-input-row.tr-ro { background: var(--dm-surface, #2d2d2d); }
body.dark-mode .tr-ro .color-hex { color: var(--dm-text-muted, #b0b0b0); }

/* ── Campanha de Venda: linhas de parceiro + comissão ────────────── */
.campaign-partner-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #eee; }
.campaign-partner-row .cpr-field { display: flex; flex-direction: column; }
.campaign-partner-row .cpr-partner { flex: 1 1 260px; min-width: 0; }
.campaign-partner-row .cpr-field .form-label { margin-bottom: 2px; }
.campaign-partner-row .cpr-del { margin-left: auto; }
.campaign-partner-row .cpr-delbox { display: none; }
body.dark-mode .campaign-partner-row { border-color: var(--dm-border); }