/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .header h1 {
        font-size: 2rem;
    }
    
    .status-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* Stack balance panels vertically on mobile */
    .main-balance-section {
        flex-direction: column;
        gap: 15px;
    }
    
    .balance-amount {
        font-size: 2.5rem;
    }
    
    .chart-wrapper {
        height: 300px;
        padding: 15px;
    }
    
    .chart-wrapper canvas {
        max-height: 260px !important;
    }
    
    .transactions-table {
        font-size: 0.8rem;
        min-width: 600px;
    }
    
    .transactions-table th,
    .transactions-table td {
        padding: 8px 10px;
    }
    
    .transaction-memo {
        max-width: 150px;
    }
    
    /* Optimize column widths for better mobile experience */
    .transactions-table th:nth-child(1),
    .transactions-table td:nth-child(1) {
        width: 90px; /* Date column */
    }
    
    .transactions-table th:nth-child(2),
    .transactions-table td:nth-child(2) {
        width: 80px; /* Type column */
    }
    
    .transactions-table th:nth-child(3),
    .transactions-table td:nth-child(3) {
        width: 120px; /* Amount column */
    }
    
    .transactions-table th:nth-child(4),
    .transactions-table td:nth-child(4) {
        width: 140px; /* Addresses column */
    }
    
    .transactions-table th:nth-child(5),
    .transactions-table td:nth-child(5) {
        width: 170px; /* Description column */
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 1.8rem;
    }
    
    .balance-amount {
        font-size: 2rem;
    }
    
    .card {
        padding: 18px;
    }
    
    .chart-wrapper {
        height: 250px;
        padding: 10px;
    }
    
    .chart-wrapper canvas {
        max-height: 220px !important;
    }
    
    .transactions-table {
        min-width: 500px;
        font-size: 0.75rem;
    }
    
    .transactions-table th,
    .transactions-table td {
        padding: 6px 8px;
    }
    
    .transaction-memo {
        max-width: 120px;
    }
    
    /* Further optimize for very small screens */
    .transactions-table th:nth-child(1),
    .transactions-table td:nth-child(1) {
        width: 70px; /* Date column */
    }
    
    .transactions-table th:nth-child(2),
    .transactions-table td:nth-child(2) {
        width: 70px; /* Type column */
    }
    
    .transactions-table th:nth-child(3),
    .transactions-table td:nth-child(3) {
        width: 100px; /* Amount column */
    }
    
    .transactions-table th:nth-child(4),
    .transactions-table td:nth-child(4) {
        width: 120px; /* Addresses column */
    }
    
    .transactions-table th:nth-child(5),
    .transactions-table td:nth-child(5) {
        width: 140px; /* Description column */
    }
    
    /* Add scroll indicator hint */
    .transactions-table-wrapper::after {
        content: "← Scroll horizontally to see more →";
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #9ca3af;
        padding: 8px;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
    }
    
    .stats-card .card-header {
        margin: -18px -18px 15px -18px;
        padding: 15px 18px;
    }
}