/**
 * 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;  /* CRÍTICO: previne scroll no body */
    margin: 0;
    padding: 0;
}

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

/* 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 {
    list-style: none;
    display: none;
    background-color: rgba(0,0,0,0.2);
}

.sidebar-submenu.show {
    display: block;
}

.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: Flexbox horizontal abaixo da topbar (solução IA) */
.page-container {
    display: flex;
    /* NÃO ter margin-top aqui - position:fixed no inline CSS já posiciona */
    /* NÃO precisar do height calc aqui - bottom:0 já limita a altura */
    overflow: hidden; /* Previne scroll externo */
    background: #f8f9fa;
}

/* 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: #404040 !important;
}

/* Alerts */
.alert {
    padding: 13.5px 20px;
    border-radius: 7.2px;
    margin-bottom: 18px;
}

.alert-success {
    background-color: #d4edda;
    border-left: 3.6px solid var(--success-color);
    color: #155724;
}

.alert-error, .alert-danger {
    background-color: #f8d7da;
    border-left: 3.6px solid var(--danger-color);
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    border-left: 3.6px solid var(--warning-color);
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    border-left: 3.6px solid var(--info-color);
    color: #0c5460;
}

/* 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;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    background: #f8f9fa;
    min-height: 0;
    min-width: 0;
}

/* 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;
}

/* ================================================================ */
/* 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: rgba(0, 0, 0, 0.5);
        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: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .topbar {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
}

body.dark-mode .sidebar {
    background-color: #2d2d2d;
}

body.dark-mode .sidebar-menu-link {
    color: #e0e0e0;
}

body.dark-mode .sidebar-menu-link:hover {
    background-color: #404040;
}

body.dark-mode .sidebar-submenu-link {
    color: #b0b0b0;
}

body.dark-mode .sidebar-submenu-link:hover {
    background-color: #404040;
    color: #ffffff;
}

body.dark-mode .main-content {
    background-color: #1a1a1a;
}

body.dark-mode .page-header-sticky {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
}

body.dark-mode .filter-bar {
    background-color: #2d2d2d;
}

body.dark-mode .content-area {
    background-color: #1a1a1a;
}

body.dark-mode .card {
    background-color: #2d2d2d;
    border-color: #404040;
}

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

body.dark-mode .table {
    color: #e0e0e0;
    background-color: #2d2d2d;
}

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

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

body.dark-mode .table tbody td {
    border-color: #404040;
    background-color: #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: #1a1a1a !important;
    color: #d0d0d0 !important;
    border-color: #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: #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: #404040 !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #404040;
}

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

/* 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;
}
.forecast-review-table td.group-cell {
    border-right: 2px solid #dee2e6;
    vertical-align: middle;
    font-weight: 500;
}

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

/* Banding de colunas em dark mode */
body.dark-mode .forecast-table thead th:nth-child(n+4):nth-child(-n+6),
body.dark-mode .forecast-table thead th:nth-child(n+10):nth-child(-n+12),
body.dark-mode .forecast-table tbody td:nth-child(n+4):nth-child(-n+6),
body.dark-mode .forecast-table tbody td:nth-child(n+10):nth-child(-n+12),
body.dark-mode .forecast-table tfoot td.month-band {
    background-color: rgba(99, 155, 255, 0.12) !important;
}

/* ── 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: #505050 !important;
}

/* ── Bulk-action bars (id=bulkBar) — inline style=#f8f9fa em vários templates ── */
body.dark-mode #bulkBar {
    background: #363636 !important;
    border-bottom-color: #505050 !important;
    color: #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: #505050 !important;
}

/* ── Primeira coluna fixa em tabelas mensais (monthlyTable) ── */
body.dark-mode #monthlyTable tbody td:first-child {
    background-color: #363636 !important;
    color: #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: #2d2d2d !important;
    color: #9a9a9a !important;
    cursor: not-allowed;
}

/* ── Org chart ── */
body.dark-mode .orgchart {
    background: #2d2d2d !important;
}
body.dark-mode .orgchart .node {
    background-color: #363636 !important;
    color: #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: #505050 !important;
    background-color: #505050 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #404040;
    color: #e0e0e0;
    border-color: #505050;
}

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

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

body.dark-mode .btn-secondary {
    background-color: #505050;
    border-color: #505050;
}

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

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

body.dark-mode .filter-card {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

body.dark-mode .dashboard-card-body,
body.dark-mode .kanban-card-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0;
}

/* Fundo SVG do Plotly — rect.bg é o paper/plot background gerado pelo Plotly */
body.dark-mode .js-plotly-plot .bg {
    fill: #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: #404040;
    color: #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: #505050 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .schedule-table th.today,
body.dark-mode .schedule-table td.today {
    background-color: #1a2f45 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .schedule-table td.pic-column {
    background-color: #404040 !important;
}
/* Week calendar */
body.dark-mode .day-column {
    background-color: #363636 !important;
    border-color: #505050 !important;
}
body.dark-mode .day-header {
    background-color: #404040 !important;
    color: #e0e0e0 !important;
    border-bottom-color: #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: #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: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .page-title {
    color: #e0e0e0;
}

body.dark-mode .page-subtitle {
    color: #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: #2d2d2d;
}

body.device-mobile.dark-mode .page-header {
    background-color: #2d2d2d !important;
    color: #e0e0e0;
}

body.device-mobile.dark-mode .page-title {
    color: #e0e0e0;
}

body.device-mobile.dark-mode .page-subtitle {
    color: #b0b0b0;
}

body.device-mobile.dark-mode .topbar {
    background-color: #2d2d2d !important;
    border-bottom-color: #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;
    }
}

/* ============================================================================
   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;
}