/**************************************************************************
* Copyright © 2025 CAPA Trading Corp
* Developed by Cesar Augusto Ricci
* cesar.ricci@plugcomex.us
* Version 25.1
* Last Modified: 2025-06-10
*
* site.css — estilos globais do CAPA Trading.
* Cores: Naval #1e293b (estrutural) | Laranja #e87722 / #f5a94e (CTAs) | Slate #1e293b
* Legado: verde #1e293b substituído por naval em 2026-05-26 (classes .bg-capa-green/.text-capa-green mantidas como aliases)
* Font: Poppins, sans-serif (carregada via Google Fonts no _Host.cshtml)
**************************************************************************/

/* ═══════════════════════════════════════════════════════════════════════
   1. RESET / GLOBAL
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow: hidden; /* nunca scroll no html */
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;          /* reduzido de 13px para compensar a remoção do zoom */
    color: #1e293b;
    background-color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow: hidden; /* nunca scroll no body */
}

a {
    color: #e87722;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SYNCFUSION OVERRIDES GLOBAIS
   ═══════════════════════════════════════════════════════════════════════ */

/* Todos os inputs SyncFusion: Poppins */
.e-input-group,
.e-input-group input,
.e-input-group textarea,
.e-dropdown-btn,
.e-btn,
.e-grid,
.e-dialog,
.e-tab,
.e-kanban {
    font-family: 'Poppins', sans-serif !important;
}

/* SfGrid — padrão CAPA */
.capa-grid .e-headercell {
    background-color: #1e293b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.capa-grid .e-row:hover .e-rowcell {
    background-color: rgba(232, 119, 34, 0.06) !important;
}

.capa-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #fafafa;
}

.capa-grid .e-rowcell {
    font-size: 12px !important;
    color: #1e293b !important;
    padding: 7px 10px !important;
}

.capa-grid .e-pager {
    font-family: 'Poppins', sans-serif !important;
}

.capa-grid .e-pager .e-active {
    background-color: #e87722 !important;
    color: #fff !important;
}

/* SfDialog — padrão CAPA */
.capa-dialog .e-dlg-header-content {
    background-color: #1e293b !important;
    padding: 14px 20px !important;
}

.capa-dialog .e-dlg-header {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.capa-dialog .e-btn.e-dlg-closeicon-btn span {
    color: #ffffff !important;
}

.capa-dialog .e-footer-content {
    border-top: 1px solid #eee !important;
    padding: 12px 20px !important;
}

/* SfButton primary — laranja CAPA */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: #e87722 !important;
    border-color: #e87722 !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: background-color 0.2s;
}

.e-btn.e-primary:hover {
    background-color: #d06a1e !important;
    border-color: #d06a1e !important;
}

/* SfButton outline */
.e-btn.e-outline {
    border-color: #ccc !important;
    color: #1e293b !important;
    font-family: 'Poppins', sans-serif !important;
    border-radius: 6px !important;
}

.e-btn.e-outline:hover {
    background-color: #f5f5f5 !important;
}

/* SfButton danger */
.e-btn.e-danger {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    border-radius: 6px !important;
}

.e-btn.e-danger:hover {
    background-color: #c9302c !important;
}

/* SfTab — padrão CAPA */
.capa-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #e87722 !important;
    font-weight: 600 !important;
}

.capa-tabs .e-tab-header .e-indicator {
    background-color: #e87722 !important;
}

/* SfDropDownList / SfMultiSelect */
.e-dropdownbase .e-list-item.e-active {
    background-color: rgba(232, 119, 34, 0.1) !important;
    color: #e87722 !important;
}

/* SfToast */
.e-toast-container .e-toast {
    font-family: 'Poppins', sans-serif !important;
    border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════ */

.text-capa-orange { color: #e87722; }
.text-capa-green  { color: #1e293b; }   /* legado — use .text-capa-naval */
.text-capa-naval  { color: #1e293b; }
.text-capa-slate  { color: #1e293b; }
.text-muted       { color: #999; }
.text-danger      { color: #d9534f; }
.text-success     { color: #28a745; }

.bg-capa-green  { background-color: #1e293b; }   /* legado — use .bg-capa-naval */
.bg-capa-naval  { background-color: #1e293b; }
.bg-capa-orange { background-color: #e87722; }
.bg-white       { background-color: #ffffff; }
.bg-light       { background-color: #f5f5f5; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.d-flex      { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Card genérico */
.capa-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SCROLLBAR CUSTOM
   ═══════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. PRINT
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    .capa-sidebar,
    .top-bar,
    .page-toolbar .e-btn {
        display: none !important;
    }

    .main-content-area {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .page-content {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

/* FIX SIDEBAR COLORS */
.capa-sidebar,
.capa-sidebar .e-dock,
.e-sidebar.capa-sidebar {
    background-color: #1e293b !important;
}

    .capa-sidebar .nav-label {
        color: #ffffff !important;
    }

    .capa-sidebar .nav-icon {
        color: rgba(255,255,255,0.7) !important;
    }

    .capa-sidebar .nav-item:hover .nav-label,
    .capa-sidebar .nav-item-active .nav-label {
        color: #ffffff !important;
    }

    .capa-sidebar .nav-item:hover .nav-icon,
    .capa-sidebar .nav-item-active .nav-icon {
        color: #e87722 !important;
    }

    .capa-sidebar .nav-item:hover {
        background-color: rgba(232, 119, 34, 0.15) !important;
    }

    .capa-sidebar .nav-item-active {
        background-color: rgba(232, 119, 34, 0.2) !important;
        border-left-color: #e87722 !important;
    }

    /* FIX SIDEBAR - FORCE DARK */
    .e-sidebar.capa-sidebar,
    .e-sidebar.capa-sidebar .e-content-animation,
    .e-sidebar.capa-sidebar > .e-content-animation,
    .e-sidebar.capa-sidebar .e-dock,
    div.e-sidebar.capa-sidebar {
        background: #1e293b !important;
        background-color: #1e293b !important;
    }

/* FIX SIDEBAR - override bootstrap5 theme */
.e-sidebar {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. DIALOG FULLSCREEN — capa-dialog-fullscreen
   Ocupa toda a área de conteúdo (abaixo da top bar, ignorando sidebar).
   Usar esta classe em qualquer SfDialog principal de cadastro/edição.
   ═══════════════════════════════════════════════════════════════════ */

.capa-dialog-fullscreen.e-dialog {
    position: fixed !important;
    top: 60px !important;           /* altura exata da top bar */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* O conteúdo scrollável ocupa o espaço restante */
.capa-dialog-fullscreen .e-dlg-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 32px !important;
}

/* Rodapé fixo na base */
.capa-dialog-fullscreen .e-footer-content {
    flex: 0 0 auto !important;
    padding: 14px 32px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
}

/* Header escuro CAPA */
.capa-dialog-fullscreen .e-dlg-header-content {
    flex: 0 0 auto !important;
    padding: 16px 32px !important;
    background: #1e293b !important;
    border-radius: 0 !important;
}

.capa-dialog-fullscreen .e-dlg-header {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Botão fechar (×) branco */
.capa-dialog-fullscreen .e-dlg-closeicon-btn .e-btn-icon {
    color: rgba(255,255,255,0.75) !important;
}

.capa-dialog-fullscreen .e-dlg-closeicon-btn:hover .e-btn-icon {
    color: #e87722 !important;
}

/* Overlay do modal — fundo semitransparente cobre apenas a área de conteúdo */
.e-dialog-overlay {
    top: 60px !important;
}

   Garante que células nunca fiquem menores que o header.
   AutoFit cuida do conteúdo; este CSS garante o mínimo visual.
   ═══════════════════════════════════════════════════════════════════ */

/* Impede que o texto do header seja cortado/reticenciado */
.capa-grid .e-headercell .e-headercelldiv {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
}

/* Cada célula de header não encolhe abaixo do seu conteúdo */
.capa-grid .e-headercell {
    min-width: fit-content;
}

/* Células de dados acompanham */
.capa-grid .e-rowcell {
    white-space: nowrap;
}

/* AutoFit padrão para todas as colunas — o Syncfusion respeita
   o width mínimo definido pela largura do header text */
.capa-grid .e-gridheader .e-header-icon-hide ~ .e-sortfilterdiv {
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════
   KANBAN HEADER FIX — garante legibilidade em todos os sub-elementos
   ═══════════════════════════════════════════════════════════════════ */
.capa-kanban .e-kanban-header .e-header-cells,
.capa-kanban .e-kanban-header .e-header-cells *,
.capa-kanban .e-kanban-header .e-header-cells .e-header-text,
.capa-kanban .e-kanban-header .e-header-cells .e-item-count,
.capa-kanban .e-kanban-header .e-header-cells .e-board-header,
.capa-kanban .e-kanban-header .e-header-cells .e-collapse-header-text {
    opacity: 1 !important;
}

.capa-kanban .e-kanban-header .e-header-cells {
    background-color: #1a2e1c !important;
    border-bottom: 2px solid #e87722 !important;
    padding: 10px 16px !important;
}

.capa-kanban .e-kanban-header .e-header-cells .e-header-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
}

.capa-kanban .e-kanban-header .e-header-cells .e-item-count {
    color: #e87722 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}