/**
 * Mobile Device Optimizations
 * Loaded after the framework styles so it can adjust them.
 */

@media (max-width: 768px) {
    /**
     * Filter Forms
     * Wrap the filter controls instead of overflowing horizontally.
     */
    .settings-form {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .settings-form select,
    .settings-form input[type="number"] {
        flex: 1 1 40%;
        min-width: 0;
    }

    .settings-form .btn {
        flex: 1 1 100%;
    }

    /**
     * Buttons
     * Let primary buttons fill the screen width for easier tapping.
     */
    .column > .btn {
        width: 100%;
        text-align: center;
        padding: 0.7rem 1rem;
    }

    /**
     * Tables
     * Every row becomes a simple two-line card:
     *   1. rank (#1) on the left, stats on the right
     *   2. "title - artist" with the local-file checkmark at the end
     * The layout is driven by the .td-* classes on the cells.
     */
    table.styled thead {
        display: none;
    }

    table.styled tbody {
        display: block;
        width: 100%;
    }

    table.styled tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.2rem;
        background: var(--card-background);
        border: 1px solid var(--card-border);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    table.styled tr:hover {
        background: var(--tr-background-hover);
    }

    table.styled td {
        padding: 0;
        border: none;
    }

    /**
     * First line: rank on the left, stats on the right.
     */
    .td-rank {
        grid-column: 1;
        grid-row: 1;
        font-weight: bold;
        color: var(--text-light);
    }

    .td-rank::before {
        content: "#";
    }

    .td-meta {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .td-meta + .td-meta::before {
        content: "·";
        margin-inline: 0.3rem;
    }

    /**
     * Second line: the title.
     */
    .td-title {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    /**
     * Third line: the artist, in italics.
     * Tables without a title column (top artists) show the name here instead.
     */
    .td-artist {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .td-title ~ .td-artist {
        grid-row: 3;
        font-style: italic;
    }

    /**
     * Local-file checkmark at the end of the second line.
     */
    .td-check {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    /**
     * "Tracks on Repeat" has three stats, so the first line
     * gets one column per stat.
     */
    table.on-repeat tr {
        grid-template-columns: 1fr auto auto auto;
    }

    table.on-repeat .td-meta:nth-child(4) {
        grid-column: 2;
    }

    table.on-repeat .td-meta:nth-child(5) {
        grid-column: 3;
    }

    table.on-repeat .td-meta:nth-child(6) {
        grid-column: 4;
    }

    table.on-repeat .td-check {
        grid-column: 4;
    }
}