/**
 * RESPONSIVO
 * Media queries para diferentes tamanhos de tela
 */

/* ============ TABLET (768px) ============ */
@media (max-width: 768px) {
    /* Layout principal */
    .container {
        box-shadow: none;
    }

    /* Header compacto no mobile */
    header.header { padding: var(--spacing-md); }

    .header-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .header-content h1 {
        font-size: var(--font-size-lg);
    }

    .header-info {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .header-info > * { flex: 0 0 auto; }

    /* Main */
    :root { --pad-main: var(--spacing-lg); }

    /* Dashboard: Balanço e Gasto diário continuam dividindo a linha */
    .dashboard {
        grid-template-columns: 1fr 1fr;
    }

    /* Abas: fontes/padding menores no mobile (layout já é grid por padrão) */
    .tabs .tab-btn {
        padding: 0.45rem 0.25rem;
        font-size: 0.76rem;
    }

    /* Barra do mês: mais estreita p/ caber a engrenagem à direita */
    .month-bar { gap: var(--spacing-sm); }
    .month-bar .month-nav { gap: 0.4rem; }
    .month-bar .current-month { min-width: 0; font-size: var(--font-size-sm); }
    .month-bar .month-nav .month-btn { padding: 0.3rem 0.55rem; }

    /* Formulário */
    .form-transacao {
        padding: var(--spacing-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .tipo-btn {
        flex: 1;
    }

    /* Transações: dia+valor / método / descrição, ações à direita */
    .despesa-item {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .despesa-valor {
        width: auto;
        text-align: right;
    }

    /* Gráficos */
    .chart-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Listas */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Seletor de mês */
    .month-selector {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .current-month {
        font-size: var(--font-size-sm);
    }
}

/* ============ SMARTPHONE (480px) ============ */
@media (max-width: 480px) {
    /* Reset */
    * {
        font-size: calc(var(--font-size-base) * 0.95);
    }

    /* Container */
    .container {
        box-shadow: none;
        background: var(--light);
    }

    /* Header */
    .header {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .header-content h1 {
        font-size: 1.5rem;
    }

    .header-info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    /* Main */
    :root { --pad-main: var(--spacing-md); }

    /* Dashboard cards */
    .summary-card {
        padding: var(--spacing-md);
    }

    .summary-card h3 {
        font-size: 0.75rem;
    }

    .summary-card .amount {
        font-size: 1.5rem;
    }

    /* Tabs */
    .tab-btn {
        padding: 0.4rem 0.2rem;
        font-size: 0.74rem;
    }

    .tab-badge {
        display: none;
    }

    .tab-content {
        min-height: 200px;
    }

    /* Formulário */
    .form-transacao {
        padding: var(--spacing-md);
        border-radius: var(--radius-sm);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
        border-radius: var(--radius-xs);
    }

    .btn-submit {
        padding: 0.65rem;
        font-size: var(--font-size-sm);
        border-radius: var(--radius-sm);
    }

    /* Transações */
    .despesa-item {
        padding: var(--spacing-md);
        border-left-width: 3px;
    }

    .despesa-categoria {
        font-size: var(--font-size-sm);
    }

    .recorrencia-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }

    .despesa-descricao {
        font-size: 0.8rem;
    }

    .despesa-valor {
        font-size: 1rem;
        min-width: auto;
    }

    /* Gráficos */
    .chart-container {
        padding: var(--spacing-md);
    }

    .category-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .category-bar {
        height: 4px;
    }

    .category-value {
        font-size: 0.75rem;
    }

    .chart-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    /* Seletor de mês */
    .month-selector {
        width: 100%;
        padding: var(--spacing-sm);
    }

    .month-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .current-month {
        font-size: 0.75rem;
        min-width: auto;
    }

    /* Footer */
    footer.footer {
        font-size: 0.8rem;
        padding: var(--spacing-md);
    }

    /* Utility classes */
    .hide-mobile {
        display: none;
    }

    .show-mobile {
        display: block;
    }
}

/* ============ EXTRA PEQUENO (<320px) ============ */
@media (max-width: 320px) {
    .header-content h1 {
        font-size: 1.2rem;
    }

    .summary-card {
        padding: var(--spacing-sm);
    }

    .tab-btn {
        padding: 0.35rem 0.15rem;
        font-size: 0.68rem;
    }

    .despesa-item {
        padding: var(--spacing-sm);
    }

    .form-group input,
    .form-group select {
        font-size: 0.85rem;
    }

    .form-header {
        padding-right: 1.9rem;
        gap: 0.25rem;
    }

    .form-header h2 {
        font-size: 0.66rem;
    }

    .tipo-btn {
        padding: 0.3rem 0.05rem;
        font-size: 0.56rem;
    }
}

/* ============ GRANDE (1024px) ============ */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }

    :root {
        --pad-main: 2.5rem;
    }

    .dashboard {
        grid-template-columns: 1fr 1fr;
    }

    .form-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .chart-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============ MUITO GRANDE (1440px) ============ */
@media (min-width: 1440px) {
    .container {
        max-width: 1024px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============ ORIENTAÇÃO ============ */
@media (orientation: landscape) and (max-height: 600px) {
    :root {
        --pad-main: var(--spacing-md);
    }

    .dashboard {
        gap: var(--spacing-md);
    }

    .form-transacao {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

@media (orientation: portrait) and (max-width: 600px) {
    .header-content {
        gap: var(--spacing-sm);
    }

    .header-content h1 {
        font-size: 1.3rem;
    }
}

/* ============ HIGH DPI (Retina) ============ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Bordas mais finas em telas de alta DPI */
    .despesa-item {
        border-left-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============ ALTO CONTRASTE ============ */
@media (prefers-contrast: more) {
    .summary-card {
        border-width: 3px;
    }

    .despesa-item {
        border-left-width: 5px;
    }

    button {
        font-weight: bold;
    }
}

/* ============ IMPRESSÃO ============ */
@media print {
    body {
        background: white;
    }

    .container {
        box-shadow: none;
        max-width: 100%;
    }

    header.header,
    footer.footer,
    .tabs,
    .form-transacao,
    .btn-submit {
        display: none;
    }

    main.main {
        padding: 0;
    }

    .despesa-item {
        page-break-inside: avoid;
    }
}