/* Tables */
.table-wrap {
    overflow-x: auto
}

.glass-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, transform .15s ease;
}

    .glass-table th {
        text-align: left;
        padding: 14px 18px;
        font-weight: 600;
        color: var(--muted);
        border-bottom: 1px solid var(--border);
        font-size: .9rem;
        background: #f9fafb;
        cursor: pointer;
        user-select: none;
    }

        .glass-table th:hover {
            background: #f3f4f6
        }

    .glass-table td {
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
        font-size: .9rem;
    }

    .glass-table tr {
        transition: transform .15s ease, box-shadow .15s ease
    }

        .glass-table tr:hover {
            background: #f1f5f9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15,23,42,.06);
        }

/* Mobile table cards */
@media (max-width:720px) {
    .table-wrap {
        padding: 0 12px
    }

    .glass-table thead {
        display: none
    }

    .glass-table, .glass-table tbody, .glass-table tr, .glass-table td {
        display: block;
        width: 100%;
    }

        .glass-table tr {
            margin: 12px 0;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            background: var(--card);
        }

        .glass-table td {
            padding: 12px 16px 12px 120px;
            text-align: right;
            position: relative;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

            .glass-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--muted);
                font-weight: 600;
                text-align: left;
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
}

/* Keep desktop table clipped nicely */
@media (min-width:721px) {
    .glass-table {
        overflow: hidden
    }
}