/* =========================
   /history — My Games / Game History workspace
   Extends game.css/design-system.css. Rules here are scoped to
   #historyList and #myGamesList (Ticket D2) so the shared
   .ga-critical-list/.ga-critical-item class names (also usable
   elsewhere) are not affected outside this page.
========================= */

#historyList.ga-critical-list,
#myGamesList.ga-critical-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#historyList .ga-critical-item,
#myGamesList .ga-critical-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#historyList .ga-critical-item:hover,
#myGamesList .ga-critical-item:hover {
    border-color: #c7d3ea;
    box-shadow: 0 4px 14px rgba(11, 31, 77, 0.08);
}

#historyList .ga-critical-item > div:first-child,
#myGamesList .ga-critical-item > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.98rem;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

#historyList .ga-critical-item > div:nth-child(2),
#myGamesList .ga-critical-item > div:nth-child(2) {
    flex: 0 0 auto;
    font-size: 0.86rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Ticket D5: a row's actions (Open Analysis / Analyze / Delete…) are
   grouped in a plain wrapper so 1-3 buttons wrap together as one flex
   item instead of fighting the row's own space-between layout. */
.history-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#historyList .ga-critical-item a.history-open-link,
#myGamesList .ga-critical-item a.history-open-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #2f6feb;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

#historyList .ga-critical-item a.history-open-link:hover,
#myGamesList .ga-critical-item a.history-open-link:hover {
    background: #1d4fc4;
}

@media (max-width: 640px) {
    #historyList .ga-critical-item,
    #myGamesList .ga-critical-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #historyList .ga-critical-item > div:nth-child(2),
    #myGamesList .ga-critical-item > div:nth-child(2) {
        white-space: normal;
    }

    .history-row-actions {
        width: 100%;
    }

    #historyList .ga-critical-item a.history-open-link,
    #myGamesList .ga-critical-item a.history-open-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}