/* RESPONSIVE MENU - 1250px */
@media (max-width: 1250px) {
    .indexSidebar {
        transform: translateX(-100%);
        z-index: 9999;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .indexSidebarVisible {
        transform: translateX(0);
    }
    
    .indexMain {
        margin-left: 0;
    }
    
    /* Overlay para fechar menu */
    .indexSidebarOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .indexSidebarOverlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* RESPONSIVE LAYOUT - 1000px */
@media (max-width: 1000px) {
    .inicioMetricsContainer {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }
    
    .inicioMetricCard {
        min-width: 100%;
        max-width: 100%;
        padding: 20px;
    }
    
    
    .indexMain {
        padding: 16px;
        max-width: 100vw;
    }
    
    .indexMainContent {
        padding: 16px;
    }
    
    .inicioMainContent {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html {
        overflow-x: hidden;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .indexTopoContainer {
        padding: 0 16px;
    }
    
    .indexTopoTitle {
        font-size: 18px;
    }
    
    .indexTopoUserInfo {
        display: none;
    }

    .indexTopoRight {
        gap: 12px;
    }
    
    .indexUserDropdown {
        min-width: 140px;
    }
    
    /* Ajustes adicionais para 768px */
    .indexMain {
        padding: 12px;
    }
    
    .indexMainContent {
        padding: 12px;
    }
    
    .inicioMetricCard {
        padding: 16px;
    }
    

}


/* Responsive Design */
@media (max-width: 480px) {
    #loginMain {
        margin: 20px;
        padding: 30px 25px;
    }
    
    #loginLogo img {
        max-width: 120px;
    }
    
    #loginUser,
    #loginPass {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .loginButtonSubmit {
        padding: 12px 25px;
        font-size: 14px;
    }
}

/* INICIO PAGE RESPONSIVE */
@media (max-width: 768px) {
    
    .inicioMetricsContainer {
        gap: 16px;
    }
    
    .inicioMetricValue {
        font-size: 28px;
    }
}

@media (max-width: 650px) {
    .inicioExtratoTitle {
        display: none;
    }
}

@media (max-width: 600px) {
    .inicioChartContainer {
        height: 300px;
    }
}

@media (max-width: 550px) {
    .inicioFilterText {
        display: none;
    }
}

@media (max-width: 520px) {
    .inicioExtratoSearch {
        width: 170px;
    }
    .inicioSearchInput {
        width: 170px;
    }
}

@media (max-width: 490px) {
    .inicioExtratoSearch {
        width: 140px;
    }
    .inicioSearchInput {
        width: 140px;
    }
}

@media (max-width: 460px) {
    .inicioExtratoSearch {
        width: 100%;
    }
    .inicioSearchInput {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .inicioTableRow {
        display: flex;
        min-height: 50px;
        gap: 12px;
    }

    .inicioTableCol {
        padding: 5px;
    }
    
    .inicioColClienteTipo {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
    }
    
    .inicioColTipo {
        display: none;
    }
    
    .inicioTipoContainerMobile {
        display: flex;
    }
    
    .inicioColValor {
        padding: 5px;
        flex: 1;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .inicioClienteNome {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    
    .inicioTipoContainerMobile {
        font-size: 12px;
        gap: 6px;
        margin-top: 0px;
        color: var(--text-secondary);
        line-height: 1.2;
    }
    
    .inicioTipoContainerMobile .inicioTipoText {
        font-size: 12px;
    }
    
    .inicioCardIcon {
        width: 18px;
        height: 18px;
    }
    
    .inicioTableHeader .inicioColTipo {
        display: none;
    }
    
    .inicioTableHeader .inicioColClienteTipo {
        flex: 1;
    }
    
    .inicioTableHeader .inicioColValor {
        flex: 1;
        text-align: right;
    }
}

@media (max-width: 650px) {
    .inicioExtratoTitle {
        display: none;
    }
}

@media (max-width: 600px) {
    .inicioChartContainer {
        height: 300px;
    }
}

@media (max-width: 550px) {
    .inicioFilterText {
        display: none;
    }
}

@media (max-width: 520px) {
    .inicioExtratoSearch {
        width: 70%;
    }
}

@media (max-width: 450px) {
    .inicioChartContainer {
        height: 250px;
    }
    
    .inicioExtratoSection {
        padding: 10px;
    }
    
    .inicioChartContainer {
        padding: 10px;
    }
    
    .inicioMetricCard {
        padding: 10px;
    }
    
    .inicioChartDetailsContainer {
        padding: 10px;
    }
}

/* Mobile Ultra Small - Abaixo de 400px */
@media (max-width: 400px) {
    .indexTopoTitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    
    .inicioMetricsContainer {
        gap: 12px;
    }
    
    .inicioMetricCard {
        padding: 10px;
    }
    
    .inicioChartDetailsContainer {
        padding: 10px;
    }
    
    .inicioMetricValue {
        font-size: 24px;
    }
    
    .inicioMetricTitle {
        font-size: 13px;
    }
    
    .inicioComparisonText {
        font-size: 11px;
    }
    
    .inicioComparisonPercent {
        font-size: 13px;
    }
    
    /* Calculadora Responsiva */
    .calculadoraContainer {
        padding: 16px;
        overflow-x: hidden;
    }
    
    .calculadoraCard {
        padding: 20px;
        overflow-x: hidden;
    }
    
    .calculadoraInputSection {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .calculadoraResultSection {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .calculadoraResultValue {
        font-size: 24px;
    }
    
    .calculadoraInputContainer {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .calculadoraInput {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }
    
    .calculadoraParcelasContainer {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .calculadoraParcelasBtn {
        width: 44px;
        height: 44px;
    }
    
    .calculadoraParcelasBtn svg {
        width: 16px;
        height: 16px;
    }
    
    .calculadoraParcelasValue {
        font-size: 15px;
    }
    
    .calculadoraParcelasType {
        font-size: 11px;
    }
    
    .calculadoraInputGroup {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}

/* EXTRATO RESPONSIVE - 900px */
@media (max-width: 900px) {
    .extratoMainContent {
        width: 100%;
        padding: 5px;
    }
    
    .extratoControlsContainer {
        flex-direction: column;
        gap: 16px;
    }
    
    .extratoFiltersContainer {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .extratoSearchContainer {
        width: 100%;
    }
    
    .extratoSearchInput {
        width: 100%;
    }
    
    .extratoTable {
        min-width: 700px;
    }
    
    .extratoTableHeader {
        grid-template-columns: 16% 28% 22% 14% 20%;
        min-width: 700px;
    }
    
    .extratoTableRow {
        grid-template-columns: 16% 28% 22% 14% 20%;
        min-width: 700px;
    }
    
    .extratoTableHeaderCell {
        padding: 12px 8px;
        font-size: 13px;
    }
    
    .extratoTableCell {
        padding: 8px 6px;
        font-size: 13px;
    }
}

/* EXTRATO MOBILE SMALL - 480px */
@media (max-width: 480px) {    
    .extratoPaginationContainer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .extratoPaginationInfo {
        order: 2;
        font-size: 13px;
    }
    
    .extratoPaginationControls {
        order: 1;
        justify-content: center;
    }
}

/* Calculadora - Breakpoint 700px */
@media (max-width: 700px) {
    .calculadoraInputSection {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .calculadoraInputContainer {
        max-width: 100%;
    }
    
    .calculadoraInput {
        font-size: 15px;
    }
    
    .calculadoraParcelasContainer {
        justify-content: center;
    }
    
    .calculadoraParcelasBtn {
        width: 48px;
        height: 48px;
    }
    
    .calculadoraParcelasDisplay {
        min-width: 140px;
        padding: 0 16px;
    }
    
    .calculadoraParcelasValue {
        font-size: 16px;
    }
    
    .calculadoraParcelasType {
        font-size: 12px;
    }
}