/* screener.mobile.css - Screener results table as cards on small screens (max 768px).
   Uses design tokens only. No hex colors. No Arabic characters.
   Concern: mobile-only responsive layout for .results-table rows.
   Change screener mobile layout: this file only. */

@media (max-width: 768px) {
    /* Hide header row - cards show their own labels */
    .results-table thead {
        display: none;
    }

    .results-table tbody {
        display: block;
    }

    /* Each row becomes a card */
    .results-table tbody tr {
        display: block;
        margin-bottom: var(--space-3, 0.75rem);
        border: 1px solid var(--color-border, var(--border-2));
        border-radius: var(--radius-md, 8px);
        background: var(--color-bg-2, var(--bg-2));
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .results-table tbody tr:hover {
        background: var(--color-bg-3, var(--bg-3));
    }

    /* Each cell shows its column label before the value */
    .results-table tbody td {
        display: flex;
        align-items: baseline;
        gap: var(--space-2, 0.5rem);
        padding: 3px 0;
        border: none;
        font-size: 0.88rem;
        min-width: 0;
    }

    /* Column label from data-label attribute */
    .results-table tbody td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--color-text-3, var(--text-3));
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        min-width: 72px;
        white-space: nowrap;
    }

    /* Hide rank cell label (just a number) */
    .results-table tbody td.rank-cell::before {
        display: none;
    }

    /* Score bar needs special treatment in card context */
    .results-table tbody td.score-cell {
        flex-direction: column;
        align-items: flex-start;
    }

    .results-table tbody td.score-cell .score-bar {
        width: 100%;
        max-width: 180px;
        margin-top: 3px;
    }

    /* Action cell - no label needed */
    .results-table tbody td.action-cell {
        justify-content: flex-end;
        padding-top: var(--space-2, 0.5rem);
    }

    .results-table tbody td.action-cell::before {
        display: none;
    }

    /* Signals cell - allow wrapping */
    .results-table tbody td.signals-cell {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Signal tag sizing */
    .signal-tag {
        font-size: 0.68rem;
        padding: 2px 5px;
    }
}