/* Mobile nav */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        flex-direction: column;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-actions {
        position: absolute;
        right: 3.5rem;
    }

    .nav-actions .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Repayment table responsive */
@media (max-width: 640px) {
    .repayment-table th,
    .repayment-table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* Loans table responsive - transform to cards on mobile */
@media (max-width: 768px) {
    .loans-table { min-width: unset !important; }
    .loans-table thead { display: none; }
    .loans-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 1rem;
        background: var(--surface-1);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }
    .loans-table tbody tr.separator-row { display: none; }
    .loans-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        border: none;
        font-size: 0.85rem;
    }
    .loans-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.7rem;
        margin-right: 1rem;
    }
    .loans-table tbody td:empty { display: none; }
    .loans-table .totals-row { display: none; }
}

/* Mobile Quick Actions Fix */
@media (max-width: 768px) {
    .loan-row-actions {
        position: static;
        opacity: 1;
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem 0 0;
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-color);
        justify-content: flex-end;
        transform: none;
    }
    .loan-row-actions button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    .completed-toggle-row td {
        font-size: 0.85rem;
    }
}

/* Action labels on mobile (Iteration 12 - Change 4) */
.action-label { display: none; }
@media (max-width: 768px) {
    .action-label { display: inline; font-size: 0.75rem; }
}

/* A5: Mobile filter row overflow fix */
@media (max-width: 480px) {
    .filters {
        flex-direction: column;
        gap: 0.5rem;
    }
    .filter-group {
        width: 100%;
    }
    .filter-group select, .filter-group input {
        width: 100%;
    }
}

/* Loan detail action buttons responsive <360px */
@media (max-width: 360px) {
    .loan-detail-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .loan-detail-actions .btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
}

/* Stats grid compact on small screens */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .stat-card {
        padding: 0.75rem;
    }
    .stat-value { font-size: 1rem; }
    .stat-label { font-size: 0.65rem; }
}

/* Liquidity metrics responsive */
@media (max-width: 640px) {
    .liquidity-metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Portfolio comparison table responsive */
@media (max-width: 640px) {
    .portfolio-comparison-card {
        padding: 1rem;
    }
    .portfolio-comparison-table th,
    .portfolio-comparison-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }
}

/* Testnet banner mobile */
@media (max-width: 480px) {
    .testnet-banner {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
    .testnet-banner a {
        display: none;
    }
}