/* ===================================
   RESPONSIVE STYLES
   =================================== */

@media (max-width: 1200px) {
    .charts-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 968px) {
    .sidebar {
        position: fixed;
        right: -380px;
        top: 80px;
        height: calc(100vh - 80px);
        z-index: 99;
        transition: right 0.3s;
    }

    .sidebar.open {
        right: 0;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 1rem;
    }

    .balance-display {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .balance-amount {
        font-size: 1.5rem;
    }

    .search-box {
        display: none;
    }

    .dashboard-content {
        padding: 1rem;
    }

    .dashboard-title {
        font-size: 1.5rem;
    }

    .chart-card {
        padding: 1rem;
    }

    .chart-title {
        font-size: 1rem;
    }

    .transactions-section {
        padding: 1rem;
    }

    table {
        font-size: 0.875rem;
    }

    th, td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .logo-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .balance-display {
        margin-left: 0;
    }

    .balance-amount {
        font-size: 1.25rem;
    }

    .user-profile span {
        display: none;
    }

    .sidebar {
        width: 100%;
        right: -100%;
    }

    .chart-container {
        height: 250px;
    }

    .table-container {
        overflow-x: scroll;
    }

    table {
        min-width: 600px;
    }
}