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

@media (max-width: 768px) {
    main {
        width: 100%;
    }

    /**
     * Tables
     * Every row becomes a simple card.
     * 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;
    }
}