/* Estilos customizados do Dashboard - Tema IBBX */
/* Cores baseadas na aplicação Retina IBBX (retina.ibbx.tech) */

/* Variaveis CSS IBBX */
:root {
    /* Laranja - Cor primária */
    --ibbx-orange: #F97316;
    --ibbx-orange-light: #FFF7ED;
    --ibbx-orange-dark: #EA580C;

    /* Rosa/Vermelho - Risco/Erro */
    --ibbx-rose: #F43F5E;
    --ibbx-rose-light: #FFF1F2;
    --ibbx-rose-dark: #E11D48;

    /* Verde - Normal/Sucesso */
    --ibbx-green: #22C55E;
    --ibbx-green-light: #F0FDF4;
    --ibbx-green-dark: #16A34A;

    /* Âmbar - Alerta/Warning */
    --ibbx-amber: #F59E0B;
    --ibbx-amber-light: #FFFBEB;
    --ibbx-amber-dark: #D97706;

    /* Cinza Azulado - Dark mode */
    --ibbx-slate-50: #F8FAFC;
    --ibbx-slate-100: #F1F5F9;
    --ibbx-slate-200: #E2E8F0;
    --ibbx-slate-700: #334155;
    --ibbx-slate-800: #1E293B;
    --ibbx-slate-900: #0F172A;
}

/* Reset basico */
* {
    box-sizing: border-box;
}

/* Body - background controlado pelo Mantine */
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar customizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--ibbx-orange);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ibbx-orange-dark);
}

/* Links */
a {
    color: var(--ibbx-orange);
    text-decoration: none;
}

a:hover {
    color: var(--ibbx-orange-dark);
    text-decoration: underline;
}

/* Transicoes suaves */
.mantine-Button-root,
.mantine-Card-root,
.mantine-Paper-root,
.mantine-Badge-root {
    transition: all 0.2s ease;
}

/* Hover em cards */
.mantine-Card-root:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading spinner com cor IBBX */
._dash-loading {
    color: var(--ibbx-orange) !important;
}

/* ========================================
   AG Grid - Tema Dark customizado IBBX
   Baseado no estilo do Retina (retina.ibbx.tech)
   ======================================== */

/* Variaveis do tema dark - herdar cor do Mantine */
.ag-theme-alpine-dark {
    --ag-background-color: var(--mantine-color-body);
    --ag-odd-row-background-color: rgba(255, 255, 255, 0.03);
    --ag-header-background-color: var(--mantine-color-body);
    --ag-row-hover-color: rgba(249, 115, 22, 0.1);
    --ag-selected-row-background-color: rgba(249, 115, 22, 0.15);
    --ag-border-color: #373A40;
    --ag-secondary-border-color: #373A40;
    --ag-header-foreground-color: #909296;
    --ag-foreground-color: #C1C2C5;
    --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-row-height: 44px;
    --ag-header-height: 40px;
    background-color: var(--mantine-color-body) !important;
}

/* Header */
.ag-theme-alpine-dark .ag-header {
    border-bottom: 1px solid #373A40;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.ag-theme-alpine-dark .ag-header-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #909296;
}

/* Celulas */
.ag-theme-alpine-dark .ag-cell {
    display: flex;
    align-items: center;
    border-right: none !important;
    color: var(--mantine-color-dark-0, #C1C2C5);
}

/* Linhas - com leve alternancia de cor */
.ag-theme-alpine-dark .ag-row {
    border-bottom: 1px solid #373A40;
}

/* Linhas pares = mesma cor do fundo (herdar) */
.ag-theme-alpine-dark .ag-row-even {
    background-color: var(--mantine-color-body) !important;
}

/* Linhas impares = levemente mais clara */
.ag-theme-alpine-dark .ag-row-odd {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.ag-theme-alpine-dark .ag-row:hover {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.ag-theme-alpine-dark .ag-row-selected {
    background-color: rgba(249, 115, 22, 0.2) !important;
}

/* Root wrapper e body - herdar cor do fundo */
.ag-theme-alpine-dark .ag-root-wrapper {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--mantine-color-body) !important;
}

.ag-theme-alpine-dark .ag-root,
.ag-theme-alpine-dark .ag-body-viewport,
.ag-theme-alpine-dark .ag-center-cols-viewport {
    background-color: var(--mantine-color-body) !important;
}

/* Paginacao */
.ag-theme-alpine-dark .ag-paging-panel {
    border-top: 1px solid var(--mantine-color-dark-4, #5C5F66);
    color: var(--mantine-color-dark-2, #909296);
    padding: 10px 16px;
    background-color: transparent;
}

.ag-theme-alpine-dark .ag-paging-button {
    color: var(--mantine-color-dark-2, #909296);
}

.ag-theme-alpine-dark .ag-paging-button:hover {
    color: var(--ibbx-orange);
}

/* Select de tamanho de pagina */
.ag-theme-alpine-dark .ag-paging-page-size .ag-picker-field-wrapper {
    background-color: var(--mantine-color-dark-6, #25262B);
    border: 1px solid var(--mantine-color-dark-5, #373A40);
    border-radius: 4px;
}

/* Filtros popup */
.ag-theme-alpine-dark .ag-filter,
.ag-theme-alpine-dark .ag-menu {
    background-color: var(--mantine-color-dark-6, #25262B);
    border: 1px solid var(--mantine-color-dark-5, #373A40);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ag-theme-alpine-dark .ag-menu-option-active {
    background-color: rgba(249, 115, 22, 0.15);
}

.ag-theme-alpine-dark input[type="text"],
.ag-theme-alpine-dark input[type="number"] {
    background-color: var(--mantine-color-dark-8, #141517);
    border: 1px solid var(--mantine-color-dark-5, #373A40);
    color: var(--mantine-color-dark-0, #C1C2C5);
    border-radius: 4px;
    padding: 6px 10px;
}

.ag-theme-alpine-dark input[type="text"]:focus,
.ag-theme-alpine-dark input[type="number"]:focus {
    border-color: var(--ibbx-orange);
    outline: none;
}

/* Icones do header */
.ag-theme-alpine-dark .ag-icon {
    color: var(--mantine-color-dark-3, #5C5F66);
}

.ag-theme-alpine-dark .ag-header-cell:hover .ag-icon {
    color: var(--mantine-color-dark-2, #909296);
}

/* Sem dados */
.ag-theme-alpine-dark .ag-overlay-no-rows-center {
    color: var(--mantine-color-dark-3, #5C5F66);
}

/* Checkbox */
.ag-theme-alpine-dark .ag-checkbox-input-wrapper {
    background-color: var(--mantine-color-dark-6, #25262B);
    border: 1px solid var(--mantine-color-dark-5, #373A40);
    border-radius: 4px;
}

.ag-theme-alpine-dark .ag-checkbox-input-wrapper.ag-checked {
    background-color: var(--ibbx-orange);
    border-color: var(--ibbx-orange);
}

/* Dropdown */
.ag-theme-alpine-dark .ag-picker-field-display {
    color: var(--mantine-color-dark-0, #C1C2C5);
}

.ag-theme-alpine-dark .ag-select-list {
    background-color: var(--mantine-color-dark-6, #25262B);
    border: 1px solid var(--mantine-color-dark-5, #373A40);
}

.ag-theme-alpine-dark .ag-select-list-item:hover {
    background-color: rgba(249, 115, 22, 0.15);
}

/* Action Button e Menu - Dark theme */
.ag-theme-alpine-dark {
    --ag-action-btn-bg: var(--mantine-color-dark-5, #373A40);
    --ag-action-btn-color: var(--mantine-color-dark-1, #A6A7AB);
    --ag-action-btn-border: var(--mantine-color-dark-4, #5C5F66);
    --ag-action-menu-bg: var(--mantine-color-dark-6, #25262B);
    --ag-action-menu-border: var(--mantine-color-dark-5, #373A40);
    --ag-action-menu-text: var(--mantine-color-dark-0, #C1C2C5);
    --ag-action-menu-hover: rgba(255, 255, 255, 0.1);
}

.ag-theme-alpine-dark .ag-action-btn:hover {
    background-color: rgba(100, 116, 139, 0.25) !important;
    border-color: rgba(100, 116, 139, 0.5) !important;
}

/* ========================================
   AG Grid - Tema Light customizado IBBX
   ======================================== */

.ag-theme-alpine {
    --ag-background-color: #FFFFFF;
    --ag-odd-row-background-color: #F8FAFC;
    --ag-header-background-color: #F1F5F9;
    --ag-row-hover-color: rgba(249, 115, 22, 0.08);
    --ag-selected-row-background-color: rgba(249, 115, 22, 0.12);
    --ag-border-color: #E2E8F0;
    --ag-secondary-border-color: #F1F5F9;
    --ag-header-foreground-color: #64748B;
    --ag-foreground-color: #334155;
    --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-row-height: 44px;
    --ag-header-height: 40px;

    /* Action Button e Menu - Light theme */
    --ag-action-btn-bg: rgba(100, 116, 139, 0.1);
    --ag-action-btn-color: #64748B;
    --ag-action-btn-border: rgba(100, 116, 139, 0.25);
    --ag-action-menu-bg: #FFFFFF;
    --ag-action-menu-border: #E2E8F0;
    --ag-action-menu-text: #334155;
    --ag-action-menu-hover: rgba(100, 116, 139, 0.1);
}

/* Header - Light */
.ag-theme-alpine .ag-header {
    border-bottom: 1px solid #E2E8F0;
}

.ag-theme-alpine .ag-header-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #64748B;
}

/* Celulas - Light */
.ag-theme-alpine .ag-cell {
    display: flex;
    align-items: center;
    border-right: none !important;
    color: #334155;
}

/* Linhas - Light */
.ag-theme-alpine .ag-row {
    border-bottom: 1px solid #F1F5F9;
}

.ag-theme-alpine .ag-row:hover {
    background-color: rgba(249, 115, 22, 0.06) !important;
}

.ag-theme-alpine .ag-row-selected {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* Root wrapper - Light */
.ag-theme-alpine .ag-root-wrapper {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

/* Paginacao - Light */
.ag-theme-alpine .ag-paging-panel {
    border-top: 1px solid #E2E8F0;
    color: #64748B;
    padding: 10px 16px;
    background-color: #F8FAFC;
}

.ag-theme-alpine .ag-paging-button:hover {
    color: var(--ibbx-orange);
}

/* Filtros popup - Light */
.ag-theme-alpine .ag-filter,
.ag-theme-alpine .ag-menu {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ag-theme-alpine .ag-menu-option-active {
    background-color: rgba(249, 115, 22, 0.1);
}

.ag-theme-alpine input[type="text"],
.ag-theme-alpine input[type="number"] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #334155;
    border-radius: 4px;
    padding: 6px 10px;
}

.ag-theme-alpine input[type="text"]:focus,
.ag-theme-alpine input[type="number"]:focus {
    border-color: var(--ibbx-orange);
    outline: none;
}

/* Action Button hover - Light */
.ag-theme-alpine .ag-action-btn:hover {
    background-color: rgba(100, 116, 139, 0.15) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
}

/* ========================================
   Action Menu Portal (renderizado no body)
   Precisa de estilos globais pois usa portal
   ======================================== */

/* Dark theme - menu renderizado no body */
[data-mantine-color-scheme="dark"] .ag-action-menu,
body:has(.ag-theme-alpine-dark) .ag-action-menu {
    background-color: var(--mantine-color-dark-6, #25262B) !important;
    border-color: var(--mantine-color-dark-5, #373A40) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-mantine-color-scheme="dark"] .ag-action-menu button,
body:has(.ag-theme-alpine-dark) .ag-action-menu button {
    color: var(--mantine-color-dark-0, #C1C2C5) !important;
}

[data-mantine-color-scheme="dark"] .ag-action-menu button:hover,
body:has(.ag-theme-alpine-dark) .ag-action-menu button:hover {
    background-color: var(--mantine-color-dark-5, #373A40) !important;
}

/* Light theme - menu renderizado no body */
[data-mantine-color-scheme="light"] .ag-action-menu,
body:has(.ag-theme-alpine:not(.ag-theme-alpine-dark)) .ag-action-menu {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-mantine-color-scheme="light"] .ag-action-menu button,
body:has(.ag-theme-alpine:not(.ag-theme-alpine-dark)) .ag-action-menu button {
    color: #334155 !important;
}

[data-mantine-color-scheme="light"] .ag-action-menu button:hover,
body:has(.ag-theme-alpine:not(.ag-theme-alpine-dark)) .ag-action-menu button:hover {
    background-color: rgba(100, 116, 139, 0.1) !important;
}

/* Botao Excluir sempre vermelho */
.ag-action-menu button:last-child {
    color: #EF4444 !important;
}

.ag-action-menu button:last-child:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* ========================================
   Plotly Charts - Tema adaptativo
   ======================================== */

/* Textos do Plotly seguem a cor de texto do Mantine */
.js-plotly-plot .plotly text {
    fill: var(--mantine-color-text) !important;
}

/* Excecao: textos dentro de barras coloridas mantêm cor branca */
.js-plotly-plot .plotly .bars text {
    fill: white !important;
}

/* ========================================
   Dashboard Executivo - Modo Fullscreen
   Para apresentacao em TV/reunioes (IQ-140)
   ======================================== */

/* Container base */
#executive-dashboard-container {
    transition: all 0.3s ease;
}

/* Modo fullscreen ativo */
.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background-color: var(--mantine-color-body) !important;
    padding: 2rem !important;
    overflow-y: auto !important;
}

/* Aumentar fontes no modo fullscreen */
.fullscreen-mode .executive-kpi-value {
    font-size: 2rem !important;
}

.fullscreen-mode .mantine-Title-root {
    font-size: 2.5rem !important;
}

.fullscreen-mode .mantine-Text-root {
    font-size: 1.1rem !important;
}

/* KPI Cards no modo fullscreen */
.fullscreen-mode .executive-kpi-card {
    padding: 1.5rem !important;
}

.fullscreen-mode .executive-kpi-card .mantine-ThemeIcon-root {
    width: 80px !important;
    height: 80px !important;
}

/* Gauge maior no fullscreen */
.fullscreen-mode .js-plotly-plot {
    transform: scale(1.1);
    transform-origin: center;
}

/* Badge de status */
.fullscreen-mode .mantine-Badge-root {
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
}

/* Cards com hover sutil */
.executive-kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.executive-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}