/* 1. Make the table responsive */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* Horizontal scroll on smaller screens */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}

/* 2. Adjust table for small screens */
@media (max-width: 768px) {
    table {
        font-size: 0.9rem; /* Slightly smaller font size for better mobile viewing */
    }

    th, td {
        padding: 0.75rem 1rem; /* Add more padding for better touch accessibility */
    }

    /* 3. Truncate long currency names to prevent overflow */
    .currency-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Adds ellipsis for overflow */
        max-width: 100px; /* Set a max width for the currency name */
    }

    /* 4. Stack table columns on smaller screens */
    td {
        display: block; /* Stack table cells */
        width: 100%;
        padding-left: 45%; /* Push content to the right to avoid text overlapping */
        text-align: right; /* Align text to the right */
    }

    td::before {
        content: attr(data-label); /* Show column title in td for context */
        font-weight: bold;
        text-transform: uppercase;
        padding-right: 10px;
        display: inline-block;
    }

    /* 5. Remove edit button when on small screens, or hide it under an ellipsis menu */
    .btn-sm {
        font-size: 0.8rem;
    }

    .actions-column {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}