/**
 * Tema Escuro - Sistema Amazon Flex
 */

:root {
    --bs-dark: #1a1a1a;
    --bs-dark-rgb: 26, 26, 26;
    --bs-secondary: #6c757d;
    --bs-primary: #0d6efd;
}

/* Tema escuro - aplicado quando body tem classe theme-dark */
body.theme-dark {
    background-color: #0d1117;
    color: #e6edf3 !important;
    min-height: 100vh;
}

body.theme-dark .bg-dark {
    background-color: #161b22 !important;
}

body.theme-dark .card {
    background-color: #161b22;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

body.theme-dark .card-header {
    background-color: #21262d;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: #0d1117;
    border-color: #30363d;
    color: #e6edf3 !important;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: #0d1117;
    border-color: var(--bs-primary);
    color: #e6edf3 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.theme-dark .form-control::placeholder {
    color: #6c757d;
}

body.theme-dark .table-dark {
    --bs-table-bg: #161b22;
    --bs-table-striped-bg: #21262d;
    --bs-table-hover-bg: #21262d;
    color: #e6edf3 !important;
    border-color: #30363d;
}

body.theme-dark .navbar-dark {
    background-color: #161b22 !important;
}

body.theme-dark .navbar-brand,
body.theme-dark .nav-link {
    color: #e6edf3 !important;
}

body.theme-dark .nav-link:hover {
    color: var(--bs-primary) !important;
}

body.theme-dark .dropdown-menu-dark {
    background-color: #21262d;
    border-color: #30363d;
    color: #e6edf3 !important;
}

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

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.alert {
    border: 1px solid;
}

body.theme-dark .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.5);
    color: #75b798 !important;
}

body.theme-dark .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.5);
    color: #f1aeb5 !important;
}

body.theme-dark .alert-info {
    background-color: rgba(13, 202, 240, 0.2);
    border-color: rgba(13, 202, 240, 0.5);
    color: #86cfda !important;
}

body.theme-dark .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffc107 !important;
}

.badge {
    padding: 0.35em 0.65em;
}

body.theme-dark .text-muted {
    color: #8b949e !important;
}

body.theme-dark .border-secondary {
    border-color: #30363d !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

/* Scrollbar personalizada - Tema Escuro */
body.theme-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-dark ::-webkit-scrollbar-track {
    background: #161b22;
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 5px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Input color */
.form-control-color {
    width: 60px;
    height: 38px;
    padding: 2px;
}

/* Cards de totais */
.card-body h3 {
    font-weight: bold;
}

.opacity-50 {
    opacity: 0.5;
}

/* Garantir visibilidade de todos os textos no tema escuro */
body.theme-dark * {
    color: inherit;
}

body.theme-dark label,
body.theme-dark .form-label,
body.theme-dark small,
body.theme-dark .small {
    color: #e6edf3 !important;
}

body.theme-dark .dropdown-item {
    color: #e6edf3 !important;
}

body.theme-dark .dropdown-item:hover {
    background-color: #30363d;
    color: #ffffff !important;
}

/* Tema claro - ajustes para gráficos */
body.theme-light .chart-card {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

body.theme-light .chart-card .card-header {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

body.theme-light .chart-card .card-body {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Garantir que inputs e textareas tenham texto visível no tema claro */
body.theme-light .form-control,
body.theme-light .form-select {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

body.theme-light .form-control:focus,
body.theme-light .form-select:focus {
    background-color: #fff !important;
    border-color: var(--bs-primary) !important;
    color: #212529 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.theme-light .form-control::placeholder {
    color: #6c757d !important;
}

body.theme-light textarea.form-control {
    background-color: #fff !important;
    color: #212529 !important;
}

body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light input[type="datetime-local"] {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Melhorias para modais de comprovantes no mobile */
@media (max-width: 768px) {
    /* Modal fullscreen no mobile */
    .modal-dialog.modal-lg {
        max-width: 100vw;
        margin: 0;
        height: 100vh;
    }
    
    .modal-content {
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    .modal-header {
        position: sticky;
        top: 0;
        z-index: 1051;
        flex-shrink: 0;
        background-color: #161b22 !important;
        border-bottom: 2px solid #30363d !important;
    }
    
    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
        position: relative;
        z-index: 1;
    }
    
    .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 1051;
        flex-shrink: 0;
        background-color: #161b22 !important;
        border-top: 2px solid #30363d !important;
    }
    
    /* Garantir que o modal-content não tenha overflow que esconda o botão */
    .modal-comprovante .modal-content {
        overflow: visible !important;
        position: relative !important;
    }
    
    .modal-comprovante .modal-dialog {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Garantir que o backdrop do modal não interfira */
    .modal-backdrop {
        z-index: 1040 !important;
    }
    
    /* O botão deve estar acima do backdrop também */
    .modal-comprovante.show .btn-close-fixed {
        z-index: 99999 !important;
        pointer-events: auto !important;
    }
    
    /* Garantir que nenhum elemento do modal-body sobreponha */
    .modal-comprovante .modal-body * {
        position: relative;
        z-index: auto;
    }
    
    /* Garantir que imagens e iframes não ultrapassem o z-index do botão */
    .modal-comprovante .modal-body img,
    .modal-comprovante .modal-body iframe {
        z-index: 1 !important;
        position: relative;
    }
    
    /* Botão de fechar maior e mais visível */
    .modal-header .btn-close {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.5rem;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .modal-header .btn-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
        opacity: 1;
    }
    
    /* Botão de fechar fixo no canto superior direito (sobreposto) */
    .modal-comprovante .btn-close-fixed,
    #btn-close-fixed-global- {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 99999 !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        background-color: rgba(220, 53, 69, 0.95) !important;
        border: 3px solid rgba(255, 255, 255, 0.9) !important;
        color: white !important;
        font-size: 1.8rem !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        outline: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Selecionar qualquer elemento que comece com btn-close-fixed-global- */
    [id^="btn-close-fixed-global-"] {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 99999 !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 50% !important;
        background-color: rgba(220, 53, 69, 0.95) !important;
        border: 3px solid rgba(255, 255, 255, 0.9) !important;
        color: white !important;
        font-size: 1.8rem !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        outline: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .modal-comprovante .btn-close-fixed:active,
    .modal-comprovante .btn-close-fixed:hover,
    .modal-comprovante .btn-close-fixed:focus,
    [id^="btn-close-fixed-global-"]:active,
    [id^="btn-close-fixed-global-"]:hover,
    [id^="btn-close-fixed-global-"]:focus {
        background-color: rgba(220, 53, 69, 1) !important;
        border-color: rgba(255, 255, 255, 1) !important;
        transform: scale(1.15) !important;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 1) !important;
    }
    
    /* Garantir que o modal-body não sobreponha o botão */
    .modal-comprovante .modal-body {
        padding-top: 1rem !important;
    }
    
    /* Garantir que imagens não sobreponham */
    .modal-comprovante .modal-body img,
    .modal-comprovante .modal-body iframe {
        max-height: calc(100vh - 200px) !important;
    }
    
    /* Botões no footer maiores no mobile */
    .modal-footer .btn {
        min-height: 44px;
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    /* Imagem no modal */
    .modal-body img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
    
    /* Título do modal menor no mobile */
    .modal-title {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Ajustes para tema claro no mobile */
@media (max-width: 768px) {
    body.theme-light .modal-header {
        background-color: #fff !important;
        border-bottom: 2px solid #dee2e6 !important;
    }
    
    body.theme-light .modal-footer {
        background-color: #fff !important;
        border-top: 2px solid #dee2e6 !important;
    }
    
    body.theme-light .modal-comprovante .btn-close-fixed {
        background-color: rgba(220, 53, 69, 0.95) !important;
        border: 3px solid rgba(255, 255, 255, 0.9) !important;
        color: white !important;
    }
    
    body.theme-light .modal-comprovante .btn-close-fixed:active,
    body.theme-light .modal-comprovante .btn-close-fixed:hover,
    body.theme-light .modal-comprovante .btn-close-fixed:focus {
        background-color: rgba(220, 53, 69, 1) !important;
        border-color: rgba(255, 255, 255, 1) !important;
    }
}

/* Garantir visibilidade dos valores de gastos no tema claro */
body.theme-light .text-primary,
body.theme-light h3.text-primary {
    color: #0d6efd !important;
}

body.theme-light .text-info,
body.theme-light h3.text-info {
    color: #0dcaf0 !important;
}

body.theme-light .text-success,
body.theme-light h3.text-success {
    color: #198754 !important;
}

body.theme-light .text-warning,
body.theme-light h3.text-warning {
    color: #ffc107 !important;
}

body.theme-light .text-danger,
body.theme-light h3.text-danger {
    color: #dc3545 !important;
}

/* Garantir que os valores no tema escuro também sejam visíveis */
body.theme-dark .text-primary,
body.theme-dark h3.text-primary {
    color: #0d6efd !important;
}

body.theme-dark .text-info,
body.theme-dark h3.text-info {
    color: #0dcaf0 !important;
}

body.theme-dark .text-success,
body.theme-dark h3.text-success {
    color: #198754 !important;
}

body.theme-dark .text-warning,
body.theme-dark h3.text-warning {
    color: #ffc107 !important;
}

body.theme-dark .text-danger,
body.theme-dark h3.text-danger {
    color: #dc3545 !important;
}

/* Garantir visibilidade dos ganhos brutos */
body.theme-light h3[style*="color: #198754"],
body.theme-dark h3[style*="color: #198754"] {
    color: #198754 !important;
}

body.theme-light .bi[style*="color: #198754"],
body.theme-dark .bi[style*="color: #198754"] {
    color: #198754 !important;
}

/* Estilos para tabela de últimos gastos */
.table-dark tbody tr td {
    color: #fff !important;
}

.table-dark tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.table-dark thead th {
    color: #fff !important;
    border-color: #495057 !important;
}

body.theme-light .table-dark tbody tr td {
    color: #212529 !important;
}

body.theme-light .table-dark tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #212529 !important;
}

body.theme-light .table-dark thead th {
    color: #212529 !important;
}

/* Estilos para gráficos */
.chart-card {
    min-height: 350px;
}

.chart-card .card-body {
    position: relative;
    height: 300px;
    padding: 15px;
}

.chart-card canvas {
    max-height: 100% !important;
    width: 100% !important;
}

/* Garantir visibilidade dos gráficos */
body.theme-light .chart-card {
    background-color: #fff !important;
}

body.theme-light .chart-card .card-header {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

body.theme-light .chart-card .card-body {
    background-color: #fff !important;
    color: #212529 !important;
}