/* ============================================
   LAPTOP/TABLET SCREENS (769px - 1920px)
   Covers: 1366x768, 1920x1080, and scaled QHD (2560x1440 at 150% = ~1707px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1920px) {

    /* Account Row Container */
    .account-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Account Box Items - flexible width */
    .account-row__item {
        flex: 1 1 280px !important;
        min-width: 260px !important;
        max-width: none !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        height: auto !important;
        border: 2px solid transparent !important;
    }

    /* Ensure active item uses same sizing box */
    .account-row__item.--active {
        border-color: var(--color-secondary) !important;
    }

    /* Left side content */
    .account-row__left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 90px) !important;
        padding-right: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    /* Right side price area */
    .account-row__right {
        flex: 0 0 auto !important;
        min-width: 80px !important;
        max-width: 90px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    /* BE amount and badge row */
    .account-row__box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* BE amount */
    .account-row__be {
        font-size: 18px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Badge styling - allow full text */
    .account-row__badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Meta area with caption and stock */
    .account-row__meta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 2px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Caption text */
    .account-row__caption {
        font-size: 11px !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Stock indicator container */
    .stock-indicator {
        flex-shrink: 0 !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin-left: auto !important;
    }

    .stock-indicator__dot {
        width: 5px !important;
        height: 5px !important;
    }

    /* Single item - limit width so it doesn't span full row */
    .account-row--single .account-row__item {
        max-width: 350px !important;
        flex: 0 1 350px !important;
    }

    /* Two items - each takes ~50% but with max-width */
    .account-row--double .account-row__item {
        max-width: 400px !important;
        flex: 0 1 400px !important;
    }
}