/* APE My Garage — My Account Tab */

.ape-garage-account {
    display: flex;
    flex-direction: column;;
    gap: var(--content-gap);
}

.ape-garage-account__header {
}

.ape-garage-account__intro {
    color: var(--text-light-muted, #fff);
}

.ape-garage-account__empty {
    color: var(--text-light, #fff);
    font-style: italic;
}

.ape-garage-account__add {
    display: flex;
    flex-direction: column;;
    gap: var(--card-gap);
}

/* ── Bike cards ─────────────────────────────────────────────────────────────── */

.ape-garage-account__bikes {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, 16px);
}

.ape-garage-bike {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: var(--space-s, 16px) var(--space-m, 20px);
    border: 2px solid var(--base-light, #e0e0e0);
    border-radius: 6px;
    background: var(--base-ultra-light, #fafafa);
    transition: border-color 0.2s;
}

.ape-garage-bike--active {
    border-color: var(--primary,#e8a000);
    background: color-mix(in oklch, var(--primary) 20%, white);
}

.ape-garage-bike__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--card-gap) / 2);
}

.ape-garage-bike__nickname {
    font-size: var(--text-s, 13px);
    color: var(--primary-semi-dark);
    font-style: italic;
}

.ape-garage-bike__label {
    font-size: var(--text-m, 16px);
    font-family: var(--heading-font-family, sans-serif);
    color: var(--primary-dark, #222);
}

.ape-garage-bike__submodel {
    font-size: 13px;
    color: var(--text-dark-muted, #555);
}

.ape-garage-bike__date {
    font-size: var(--text-s, 12px);
    color: var(--primary-semi-light);
}

.ape-garage-bike__active-badge {
    display: inline-block;
    font-size: var(--text-s, 11px);
    font-weight: 700;
    color: var(--primary, #e8a000);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Actions ─────────────────────────────────────────────────────────────────── */

.ape-garage-bike__actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--card-gap) / 2);
    align-items: flex-end;
    flex-shrink: 0;
}

.ape-garage-bike__btn-activate {
    font-size: var(--text-s, 13px);
    padding: var(--btn-padding-block, .5em) var(--btn-padding-inline, .5em);
}

.ape-garage-bike__btn-delete {
    font-size: var(--text-s, 13px);
    color: var(--danger-semi-dark, #922b21);
    text-decoration: underline;
    padding: var(--btn-padding-block, .5em) var(--btn-padding-inline, .5em);

    &:hover {
        color: var(--danger, #c0392b);
    }
}

/* ── Add a bike section ───────────────────────────────────────────────────────── */

.ape-garage-account__add {
    gap: var(--card-gap);
}

.ape-garage-account__add h3 {
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .ape-garage-bike {
        grid-template-columns: 1fr;
    }

    .ape-garage-bike__actions {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        gap: 16px;
    }
}